feat:调整加载

张含笑

2026-01-27 dd57e0e9a989e7ee8b3e3473a7ee6a1dff06a4ae

 applications/drone-command/src/views/aICrudTemplate/FormDiaLog.vue

@@ -1,6 +1,6 @@
<template>
   <el-dialog v-model="visible" :title="dialogTitle" @closed="handleClosed" destroy-on-close>
      <div v-if="dialogReadonly">
   <el-dialog v-model="visible" :title="titleEnum[dialogMode]" :close-on-click-modal="false">
      <div v-if="readonly">
         <el-row>
            <el-col :span="12">
               <div>设备信息: {{ formData.deviceName }}</div>
@@ -25,7 +25,7 @@
            </el-col>
         </el-row>
      </div>
      <el-form v-else ref="formRef" :model="formData" :rules="rules" :disabled="dialogReadonly" label-width="100px">
      <el-form v-else ref="formRef" :model="formData" :rules="rules" :disabled="readonly" label-width="100px">
         <el-row>
            <el-col :span="12">
               <el-form-item label="设备名称" prop="deviceName">
@@ -69,7 +69,7 @@
                     :data="deptTree"
                     :props="treeProps"
                     check-strictly
                     @change="getUserList"
                     @change="belongDeptChange"
                     clearable
                  />
               </el-form-item>
@@ -77,7 +77,7 @@
            <el-col :span="12">
               <el-form-item label="负责人" prop="charger">
                  <el-select v-model="formData.charger" placeholder="请选择" :disabled="!formData.belongDept" clearable>
                     <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id" />
                     <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.name" />
                  </el-select>
               </el-form-item>
            </el-col>
@@ -89,14 +89,8 @@
         </el-row>
      </el-form>
      <template #footer>
         <el-button @click="handleCancel">{{ dialogReadonly ? '关闭' : '取消' }}</el-button>
         <el-button
            v-if="!dialogReadonly"
            type="primary"
            :loading="submitting"
            :disabled="submitting"
            @click="handleSubmit"
         >
         <el-button @click="handleCancel">{{ readonly ? '关闭' : '取消' }}</el-button>
         <el-button v-if="!readonly" type="primary" :loading="submitting" :disabled="submitting" @click="handleSubmit">
            确定
         </el-button>
      </template>
@@ -129,40 +123,33 @@
const emit = defineEmits(['success'])
const formRef = ref(null) // 表单实例
const formData = ref(initForm()) // 表单数据
const visible = ref(false) // 弹框显隐
const visible = defineModel() // 弹框显隐
const dialogMode = ref('add') // 弹框模式
const submitting = ref(false) // 提交中
const userList = ref([]) // 用户列表

const dialogReadonly = computed(() => dialogMode.value === 'view')
const dialogTitle = computed(() => {
   if (dialogMode.value === 'edit') {
      return '编辑'
   } else if (dialogMode.value === 'view') {
      return '查看'
   } else {
      return '新增'
   }
})
const readonly = computed(() => dialogMode.value === 'view')
const titleEnum = ref({ edit: '编辑', view: '查看', add: '新增' })

const rules = {
   deviceName: fieldRules(true, 50),
   deviceType: fieldRules(true, 0),
   deviceAtt: fieldRules(true, 0),
   deviceType: fieldRules(true),
   deviceAtt: fieldRules(true),
   deviceModel: fieldRules(true, 50),
   belongDept: fieldRules(true, 50),
   belongDept: fieldRules(true),
   contactPhone: fieldRules(true, 50),
   charger: fieldRules(true, 0),
   charger: fieldRules(true),
}

// 部门重置
function belongDeptChange() {
   formData.value.charger = ''
}

// 获取用户列表
function getUserList(val) {
   formData.value.charger = ''
   if (val) {
      getUserListApi(val).then(res => {
         userList.value = res.data.data.records
      })
   }
function getUserList() {
   getUserListApi(formData.value.belongDept).then(res => {
      userList.value = res.data.data.records ?? []
   })
}

// 关闭弹框
@@ -192,22 +179,14 @@
   formData.value = res?.data?.data ?? {}
}

// 关闭后重置
function handleClosed() {
   formData.value = initForm()
}

// 打开弹框
async function open({ mode, row } = {}) {
   dialogMode.value = mode || 'add'
   formData.value = row
   visible.value = true
   if (dialogMode.value === 'add') {
      formData.value = initForm()
   } else {
      await loadDetail()
   }
   formData.value = dialogMode.value === 'add' ? initForm() : row
   dialogMode.value !== 'add' && (await loadDetail())
}

watch(() => formData.value.belongDept, getUserList)

defineExpose({ open })
</script>