SaaS-lib/lib/saas/view/config/configInput.vue

<!-- @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>