hsq-pro/src/views/vent/performance/comment/DeviceModal.vue

<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="title"
    width="900px"
    :showCancelBtn="false"
    :showOkBtn="false"
    :footer="null"
    destroyOnClose
  >
    <FormModal :record="record" @saveOrUpdate="(values) => emit('saveOrUpdate', values)" />
  </BasicModal>
</template>
<script lang="ts" setup>
  import { computed, unref, inject, reactive } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import FormModal from './FormModal.vue';
  // 声明Emits
  const emit = defineEmits(['saveOrUpdate', 'register']);
  const isUpdate = inject('isUpdate');
  const record = reactive({ strtype: '', strname: '' });

  //表单赋值
  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
    //重置表单
    setModalProps({ confirmLoading: false });
    Object.assign(record, data.record);
  });

  //设置标题
  const title = computed(
    () => {
      if (!unref(isUpdate)) {
        if (record.strname || record.systemname) {
          return `新增（${record.strname || record.systemname}）`;
        }
        return `新增`;
      } else {
        if (record.strname || record.systemname) {
          return `编辑（${record.strname || record.systemname}）`;
        }
        return `编辑`;
      }
    }

    // !unref(isUpdate) ? `新增（${record.strname || record.systemname}）` : `编辑（${record.strname || record.systemname}）`
  );
</script>
<style scoped lang="less">
  ::v-deep .suffix {
    height: 32px;
    line-height: 32px;
    margin-left: 5px;
    color: #fff;
  }
</style>