hsq-pro/src/views/vent/deviceManager/tableReport/components/DeviceModal.vue

<template>
    <BasicModal
      v-bind="$attrs"
      @register="registerModal"
      :title="title"
      width="1000px"
      :showCancelBtn="false"
      :showOkBtn="false"
      :footer="null"
      :destroyOnClose="true"
      :mask-closable="false"
      @cancel="closeModalFn"
    >
      <FormModal  :record="record" @saveOrUpdate="(values) => emit('saveOrUpdate', values)" />
    </BasicModal>
  </template>
  <script lang="ts" setup>
    import { computed, unref, inject, reactive, ref, watch } from 'vue';
    import { BasicModal, useModalInner } from '/@/components/Modal';
    import FormModal from './FormModal.vue';
  
    const props = defineProps({
      showTab: { type: Boolean, required: true },
    });
    // 声明Emits
    const emit = defineEmits(['saveOrUpdate', 'register', 'closeModal']);
    const isUpdate = inject('isUpdate');
    const deviceData = inject('formData') as any;
    const record = reactive({});
    const activeKey = ref('1');
  
    //表单赋值
    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
      //重置表单
      setModalProps({ confirmLoading: false });
      Object.assign(deviceData, data.record);
      // 判断是否是关键阻力路线
    });
  
    //设置标题
    const title = computed(() => {
      if (!unref(isUpdate)) {
        if (deviceData.strname || deviceData.systemname) {
          return `新增（${deviceData.strname || deviceData.systemname}）`;
        }
        return `新增`;
      } else {
        return `编辑`;
      }
    });
  
    const closeModalFn = () => {
      activeKey.value = '1';
      closeModal();
      emit('closeModal');
    };
  </script>
  <style scoped lang="less">
    ::v-deep .suffix {
      height: 32px;
      line-height: 32px;
      margin-left: 5px;
      color: #fff;
    }
  </style>