zfb_mp/src/views/corporation/deviceModal.vue

<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    :title="t('routes.devices.addDevice')"
    @ok="submitModal"
    @cancel="handleCloseModal"
    @visible-change="handleVisibleChange"
  >
    <div class="pt-3px pr-3px">
      <BasicForm @register="registerForm">
        <template #userName="{ model, field }">
          {{ model[field] }}
        </template>
        <template #name="{ model, field }">
          {{ model[field] }}
        </template>
        <template #subNum="{ model, field }">
          <!-- {{ model[field] }} -->
          <input-number
            v-model:value="model[field]"
            style="width: 260px; text-align: center"
            class="justify-center suNum"
            :min="0"
            :max="20"
            @blur="deviceMapping"
            @press-enter="deviceMapping"
          >
            <template #addonBefore>
              <a-button size="small" type="link" @click="handleMinusDevice">
                <Icon icon="ic:baseline-minus" :size="20" />
              </a-button>
            </template>
            <template #addonAfter>
              <a-button size="small" type="link" @click="handlePlusDevice">
                <Icon icon="ic:round-plus" :size="20" />
              </a-button>
            </template>
          </input-number>
        </template>
      </BasicForm>
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, nextTick, unref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { InputNumber } from 'ant-design-vue';
  // AddDevice
  import { checkDevice, AddDevice } from '/@/api/corporation/modal';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { Icon } from '/@/components/Icon/index';
  import { clamp, range } from 'lodash-es';

  export default defineComponent({
    components: { BasicModal, BasicForm, InputNumber, Icon },
    props: {
      userData: { type: Object },
    },
    emits: ['register', 'reload'],
    setup(props, { emit }) {
      const modelRef = ref({
        mappingLength: 0,
      });

      // const num = ref(0);
      const { t } = useI18n();
      const { createMessage } = useMessage();
      const { success, error } = createMessage;

      const [register, { closeModal }] = useModalInner((data) => {
        data && onDataReceive(data);
      });

      const handlevalidator = async (_, value) => {
        console.log('handlevalidator', value);
        if (!value) {
          return Promise.resolve();
        }
        try {
          let res = await checkDevice({
            childName: value,
          });
          if (res.message) {
            return Promise.reject(res.message);
          } else {
            return Promise.resolve();
          }
        } catch (err) {
          return Promise.reject(err);
        }
      };
      const schemas: FormSchema[] = [
        {
          field: 'id',
          label: 'id',
          show: false,
          component: 'Input',
        },
        {
          field: 'subNum',
          label: 'subNum',
          show: false,
          component: 'Input',
        },
        {
          field: 'name',
          label: t('routes.corporation.enterpriseName'),
          slot: 'userName',
          component: 'Input',
        },
        {
          field: 'userName',
          label: t('routes.corporation.enterpriseId'),
          slot: 'name',
          component: 'Input',
        },
        {
          field: 'deviceNumber',
          component: 'InputNumber',
          label: t('routes.corporation.cameraNum'),
          defaultValue: 0,
          slot: 'subNum',
          colProps: {
            span: 8,
          },
          helpMessage: '最多批量增加20个！',
          // componentProps: () => {
          //   return {
          //     // xxxx props schema, tableAction, formModel  checkDevice
          //     min: 0,
          //     max: 10,
          //     // onChange: numOnChange,
          //     onblur: deviceMapping,
          //   };
          // },
        },
      ];
      // let schemasList = []
      const [
        registerForm,
        {
          setFieldsValue,
          resetFields,
          getFieldsValue,
          validate,
          appendSchemaByField,
          removeSchemaByFiled,
        },
      ] = useForm({
        labelWidth: 120,
        schemas,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 24,
        },
      });

      // async function submitModal() {
      //   let formData = {
      //     ...getFieldsValue(),
      //   };
      //   let validate = false;
      //   try {
      //     const res = await validateFields();
      //     validate = true;
      //     console.log('passing', res, formData);
      //   } catch (error: unknown) {
      //     console.log('not passing', error);
      //   }
      //   if (validate) {
      //     const { subNum, id, userName } = modelRef.value;
      //     let childNameList = [];
      //     Object.keys(formData).map((ele) => {
      //       if (ele.includes('ID')) {
      //         childNameList.push(formData[ele]);
      //       }
      //     });
      //     console.log('modelRef.value', Object.keys(formData), childNameList);
      //     try {
      //       const res = await AddDevice({
      //         childNames: childNameList as any as string[],
      //         companyId: id,
      //         subNum: String(subNum),
      //         userName,
      //       });
      //       success(res);
      //       closeModal();
      //     } catch (errors) {
      //       // error('errors');
      //       // console.log('not passing', error);
      //     }
      //   }
      // }
      async function submitModal() {
        try {
          const values = await validate();
          console.log('values,', values);
          let childNameList: string[] = [];
          Object.keys(values).map((ele) => {
            if (ele.includes('ID')) {
              childNameList.push(values[ele].replace(/\s*/g, ''));
            }
          });

          await AddDevice({
            childNames: childNameList,
            id: values.id,
            subNum: String(values.subNum),
            userName: values.userName,
          });
          success(t('common.optSuccess'));
          closeModal();
          emit('reload');
        } catch (error) {}
      }

      function onDataReceive(data) {
        // 方式1;
        console.log('userName', data.record);

        resetFields();
        setFieldsValue({
          ...data.record,
          subNum: 0,
        });
        deviceMapping();
      }

      // function numOnChange(data) {
      //   const value = Number(data);
      //   if (num.value > value) {
      //     //减
      //     let delList = Array.from(new Array(num.value)).map((_, index) => {
      //       console.log(index, value, num.value);
      //       if (index >= value) {
      //         return `ID${index}`;
      //       }
      //     });

      //     removeSchemaByFiled(delList as any as string[]);
      //     console.log('schemasList减', value, num.value, delList);
      //     // value,num.value,schemasList.filter((_,index) => {return !(index<num.value)}).map((_,index) => `ID${index}`))
      //   } else {
      //     //增
      //     let device = t('routes.corporation.device');
      //     let schemasList: FormSchema[] = Array.from(new Array(value)).map((_, index) => {
      //       return {
      //         field: `ID${index}`,
      //         component: 'Input',
      //         label: device + 'ID' + index,
      //         helpMessage: [t('common.checkTips'), `${device} ${t('common.unusual')}`],
      //         itemProps: {
      //           validateTrigger: 'blur',
      //         },
      //         colProps: {
      //           span: 24,
      //         },
      //         rules: [
      //           {
      //             required: true,
      //             message: `${t('common.inputText')} ${device} ID`,
      //           },
      //           {
      //             validator: handlevalidator,
      //           },
      //         ],
      //       };
      //     });
      //     console.log(
      //       'schemasList增',
      //       num.value,
      //       schemasList.filter((_, index) => {
      //         return index >= num.value;
      //       }),
      //     );
      //     schemasList
      //       .filter((_, index) => {
      //         return index >= num.value;
      //       })
      //       .forEach((item) => appendSchemaByField(item, ''));
      //   }
      //   num.value = value;
      // }

      function handleVisibleChange(v) {
        v && props.userData && nextTick(() => onDataReceive(props.userData));
      }

      async function handleCloseModal() {
        // numOnChange(0);
        await setFieldsValue({
          subNum: 0,
          deviceNumber: 0,
        });
      }

      function setMappingDevice(devices: number, start = 0): FormSchema[] {
        return Array.from(new Array(devices)).map((_, index) => {
          const startIndex = start + index + 1;
          return {
            field: `ID${startIndex}`,
            component: 'Input',
            label: `${t('routes.corporation.device')} ID  ${startIndex}`,
            helpMessage: [
              t('common.checkTips'),
              `${t('routes.corporation.device')} ${t('common.unusual')}`,
            ],
            itemProps: {
              validateTrigger: 'blur',
            },
            colProps: {
              span: 24,
            },
            rules: [
              {
                required: true,
                message: `${t('common.inputText')} ${t('routes.corporation.device')} ID`,
              },
              {
                validator: handlevalidator,
              },
            ],
          };
        });
      }

      async function deviceMapping() {
        const values = getFieldsValue();
        const devices: number = clamp(values.deviceNumber, 0, 20);
        console.log('deviceNumber', devices);
        const currentLength = unref(modelRef).mappingLength;

        const rest = devices - currentLength;
        if (rest > 0) {
          //plus
          const schemas = setMappingDevice(rest, currentLength);
          console.log('schemas', schemas);
          const patchs = schemas.map((i: FormSchema) => {
            return appendSchemaByField(i, '');
          });
          await Promise.all(patchs);
          unref(modelRef).mappingLength = devices;
          console.log('patch in');
        } else {
          // minus
          const startIndex = currentLength + rest;
          console.log('rest', rest);
          console.log('currentLength', currentLength);
          console.log('startIndex', startIndex);
          const ranges = range(startIndex + 1, currentLength + 1, 1).map((i) => {
            return `ID${i}`;
          });
          console.log('ranges', ranges);
          removeSchemaByFiled(ranges);
          unref(modelRef).mappingLength = devices;
        }
      }
      async function handlePlusDevice() {
        const values = getFieldsValue();
        const currentsubNum = values.deviceNumber;
        const currentDevice = clamp(currentsubNum + 1, 0, 20);
        await setFieldsValue({
          deviceNumber: currentDevice,
        });
        deviceMapping();
      }
      async function handleMinusDevice() {
        const values = getFieldsValue();
        const currentsubNum = values.deviceNumber;
        const currentDevice = clamp(currentsubNum - 1, 0, 20);
        await setFieldsValue({
          deviceNumber: currentDevice,
        });
        deviceMapping();
      }

      return {
        register,
        submitModal,
        schemas,
        registerForm,
        // numOnChange,
        modelRef,
        handleVisibleChange,
        // num,
        errorMsg: error,
        handleCloseModal,
        deviceMapping,
        t,
        handlePlusDevice,
        handleMinusDevice,
      };
    },
  });
</script>
<style lang="less">
  .suNum .ant-input-number-input {
    text-align: center;
  }
</style>