vent-template/src/views/vent/deviceManager/equipManager/component/DeviceModal.vue

<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="title"
    width="1000px"
    :showCancelBtn="false"
    :showOkBtn="false"
    :footer="null"
    destroyOnClose
  > 
    <a-tabs v-if="isEditParent" v-model:activeKey="activeKey" @change="changeTab">
      <a-tab-pane key="1" tab="基本信息" force-render>
        <FormModal  v-if="activeKey == '1'" :record="record" :formSchema="formSchema" @saveOrUpdate="saveOrUpdate" />
      </a-tab-pane>
      <a-tab-pane key="2" tab="密码设置" force-render>
        <FormModal v-if="activeKey == '2'" :record="passwordRecord" :formSchema="passwordFormSchema" @saveOrUpdate="savePassword" />
      </a-tab-pane>
    </a-tabs>
    <FormModal v-else :record="record"  :formSchema="formSchema" @saveOrUpdate="saveOrUpdate" />
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref, onMounted, reactive } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import FormModal from './FormModal.vue';
  import { formSchema, passwordFormSchema } from '../equip.data.ts';
  import { passwordList, editPassword } from '../equip.api.ts'

  // 声明Emits
  const emit = defineEmits(['saveOrUpdate', 'register']);
  const title = ref('')
  const record = ref({})
  const passwordRecord = ref({})
  const isEditParent = ref(false)
  const activeKey = ref('1')
  //表单赋值
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    //重置表单
    setModalProps({ confirmLoading: true });
    if(data.record){
      title.value = '编辑'
      record.value = data.record
      if(data.record['itemValue'].split('_')[1]){
        isEditParent.value = false
      }else{
        isEditParent.value = true
        // 查询密码record
        const result = await passwordList({ devicekind: data.record['itemValue']})
        passwordRecord.value = Object.assign(result, { itemText: data.record['itemText'], devicekind: data.record['itemValue'] })
      }
    }else{
      title.value = '新增'
      record.value = {}
      isEditParent.value = false
    }
    setModalProps({ confirmLoading: false });
  });

  function changeTab(key) {
    if(key == '2' && !record.value['itemValue']){
      activeKey.value = '1'
    }
  }
  function saveOrUpdate(record) {
    emit('saveOrUpdate', record)
  }
  function savePassword(data) {
    editPassword(data)
  }
</script>
<style scoped lang="less">
  ::v-deep .suffix {
    height: 32px;
    line-height: 32px;
    margin-left: 5px;
    color: #fff;
  }
</style>