push

lib/saas/view/config/configInput.vue

@@ -0,0 +1,186 @@
+<!-- @format -->
+
+<template>
+  <div v-if="editableData" class="editable-cell-input-wrapper">
+    <a-input
+      :title="editableData.expectedValue"
+      v-model:value="editableData.expectedValue"
+      @pressEnter="save()" />
+    <CheckOutlined :style="{ color: '#37abc4', margin: '0 5px' }" @click="save()" />
+    <CloseCircleOutlined :style="{ color: '#37abc4' }" @click="clear()" />
+    <br />
+    <span v-if="editableData.message" class="config-message">
+      <CloseCircleFilled :style="{ color: 'red' }" />{{ editableData.message }}
+    </span>
+  </div>
+  <div v-else class="editable-cell-text-wrapper">
+    <span class="config-input">{{ configValue.expectedValue }}</span>
+    <EditOutlined :style="{ color: '#37abc4' }" @click="edit()" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { cloneDeep } from 'lodash-es';
+  import {
+    CheckOutlined,
+    EditOutlined,
+    CloseCircleOutlined,
+    CloseCircleFilled,
+  } from '@ant-design/icons-vue';
+  export interface DataItem {
+    childName: string;
+    remark: string;
+    configValue: string;
+    expectedValue: string;
+    key: string;
+    message: string;
+    rulesData: object;
+  }
+  export default defineComponent({
+    components: {
+      CheckOutlined,
+      EditOutlined,
+      CloseCircleOutlined,
+      CloseCircleFilled,
+    },
+    props: {
+      configValue: {
+        type: Object,
+      },
+      index: {
+        type: Number,
+      },
+      listKey: {
+        type: String,
+      },
+    },
+    emits: ['changeInput', 'blur'],
+    setup(props, ctx) {
+      let editableData = ref();
+      let ifShow = ref<boolean>(false);
+      //输入框编辑
+      const edit = () => {
+        // console.log('edit');
+        editableData.value = cloneDeep(props.configValue);
+        ifShow.value = true;
+        console.log(editableData.value);
+      };
+      //输入框保存
+      const save = () => {
+        // console.log('save');
+        let dataType = editableData.value.childSpecsDTO;
+        validatorRules();
+        if (validatorRules()) {
+          let value = {
+            configValue: editableData.value.expectedValue,
+            index: props.index,
+            key: props.listKey,
+          };
+          if (dataType.dataType == 'INT') {
+            value.configValue = parseInt(value.configValue);
+          }
+          ctx.emit('changeInput', value);
+          editableData.value = '';
+        } else {
+        }
+      };
+      //校验规则
+      const validatorRules = () => {
+        // console.log('校验规则');
+        let rulesData = editableData.value.childSpecsDTO;
+        let value = editableData.value.expectedValue;
+        // console.log(rulesData);
+        // console.log(value);
+        if (rulesData['min'] && rulesData['max']) {
+        }
+        const min = parseInt(rulesData['min']);
+        const max = parseInt(rulesData['max']);
+        // if (value == '') {
+        //   editableData.value.message = '不可以为空';
+        //   return false;
+        // }
+        if (rulesData.dataType == 'TEXT') {
+          if (value.length > rulesData.length) {
+            editableData.value.message = '字符串长度最大不超过' + rulesData.length;
+            // console.log('字符串长度最大不超过' + rulesData.length);
+            return false;
+          } else {
+            return true;
+          }
+        } else if (rulesData.dataType == 'DOUBLE') {
+          value = value + '';
+          if (value.length > 100) {
+            editableData.value.message = 'double类型支持最大位数为100';
+            return false;
+          }
+          if (!/^(-)?[0-9]+\.?([0-9]{0,16})?$/.test(value)) {
+            editableData.value.message = '双精度有效位为16';
+            return false;
+          }
+          if (value > max || value < min) {
+            editableData.value.message = ''.concat(`取值范围：${min} ~ ${max}`);
+            return false;
+          }
+          return true;
+        } else if (rulesData.dataType == 'FLOAT') {
+          if (!/^(-)?[0-9]+\.?([0-9]{0,7})?$/.test(value)) {
+            editableData.value.message = '单精度有效位为7';
+            return false;
+          }
+          if (value > max || value < min) {
+            editableData.value.message = ''.concat(`取值范围：${min} ~ ${max}`);
+            return false;
+          }
+          return true;
+        } else if (rulesData.dataType == 'INT') {
+          value = value.toString();
+          value = value.split('.');
+          if (value.length <= 1) {
+            value = parseInt(value);
+            if (typeof value === 'number' && value % 1 === 0) {
+              if (value < min || value > max) {
+                editableData.value.message = `取值范围：${min} ~ ${max}`;
+                return false;
+              } else {
+                return true;
+              }
+            } else {
+              editableData.value.message = '请输入正确的整数类型';
+              return false;
+            }
+          } else {
+            editableData.value.message = '请输入正确的整数类型';
+            return false;
+          }
+        } else {
+          return true;
+        }
+      };
+      //关闭输入框内容
+      const clear = () => {
+        editableData.value = '';
+      };
+      return {
+        save,
+        clear,
+        edit,
+        editableData,
+      };
+    },
+  });
+</script>
+<style scoped>
+  :deep(.editable-cell-input-wrapper input) {
+    width: 150px;
+  }
+
+  .config-message {
+    color: red;
+  }
+  .editable-cell-text-wrapper {
+    width: 70%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>