吉安感知网项目-前端
shuishen
2026-02-03 89380e6260a75d1d3b94de687ebcc2f50d50659d
applications/drone-command/src/views/aICrudTemplate/FormDiaLog.vue
@@ -1,6 +1,31 @@
<template>
   <el-dialog v-model="visible" :title="dialogTitle" @closed="handleClosed" destroy-on-close>
      <el-form ref="formRef" :model="formData" :rules="rules" :disabled="dialogReadonly" label-width="100px">
   <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>
            </el-col>
            <el-col :span="12">
               <div>设备类型: {{ formData.deviceType }}</div>
            </el-col>
            <el-col :span="12">
               <div>设备属性: {{ formData.deviceAtt }}</div>
            </el-col>
            <el-col :span="12">
               <div>型号: {{ formData.deviceModel }}</div>
            </el-col>
            <el-col :span="12">
               <div>所属部门: {{ formData.belongDept }}</div>
            </el-col>
            <el-col :span="12">
               <div>负责人: {{ formData.charger }}</div>
            </el-col>
            <el-col :span="12">
               <div>联系电话: {{ formData.contactPhone }}</div>
            </el-col>
         </el-row>
      </div>
      <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">
@@ -37,26 +62,6 @@
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="规格" prop="deviceSpecification">
                  <el-input v-model="formData.deviceSpecification" maxlength="50" placeholder="请输入" clearable />
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="生产厂商" prop="manufacturer">
                  <el-input v-model="formData.manufacturer" maxlength="50" placeholder="请输入" clearable />
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="来源" prop="source">
                  <el-input v-model="formData.source" maxlength="50" placeholder="请输入" clearable />
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="用途" prop="purpose">
                  <el-input v-model="formData.purpose" maxlength="50" placeholder="请输入" clearable />
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="所属部门" prop="belongDept">
                  <el-tree-select
                     v-model="formData.belongDept"
@@ -64,7 +69,7 @@
                     :data="deptTree"
                     :props="treeProps"
                     check-strictly
                     @change="getUserList"
                     @change="belongDeptChange"
                     clearable
                  />
               </el-form-item>
@@ -72,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>
@@ -84,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>
@@ -103,7 +102,7 @@
import { ElMessage } from 'element-plus'
import { fwDeviceDetailApi, fwDeviceSubmitApi } from '@/views/aICrudTemplate/aICrudTemplateApi'
import { getUserListApi } from '@/api/system/user'
import { fieldRules } from '@ztzf/utils'
import { contactPhoneRules, fieldRules } from '@ztzf/utils'
const initForm = () => ({
   belongDept: '', // 所属部门
@@ -112,11 +111,7 @@
   deviceAtt: '', // 设备属性
   deviceType: '', // 设备类型
   deviceModel: '', // 型号
   deviceSpecification: '', // 规格
   deviceName: '', // 设备名称
   manufacturer: '', // 生产厂商
   purpose: '', // 用途
   source: '', // 来源
})
const treeProps = {
   label: 'name',
@@ -128,43 +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),
   deviceSpecification: fieldRules(true, 50),
   manufacturer: fieldRules(true, 50),
   source: fieldRules(true, 50),
   purpose: fieldRules(true, 50),
   belongDept: fieldRules(true, 50),
   contactPhone: fieldRules(true, 50),
   charger: fieldRules(true, 0),
   belongDept: fieldRules(true),
   contactPhone: contactPhoneRules(true, 50),
   charger: fieldRules(true),
}
function getUserList(val) {
// 部门重置
function belongDeptChange() {
   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 ?? []
   })
}
// 关闭弹框
@@ -194,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>