feat: 优化表单提交

罗广辉

2026-01-07 306856c9e3234ec9986d027d8c9873588068857e

 applications/drone-command/src/views/basicManage/deviceStock/DeviceStockFormDialog.vue

@@ -63,8 +63,16 @@
         </el-row>
      </el-form>
      <template #footer>
         <el-button @click="handleCancel">{{ dialogShowSubmit ? '取消' : '关闭' }}</el-button>
         <el-button v-if="dialogShowSubmit" type="primary" @click="handleSubmit">确定</el-button>
         <el-button @click="handleCancel">{{ dialogReadonly ? '关闭' : '取消' }}</el-button>
         <el-button
            v-if="!dialogReadonly"
            type="primary"
            :loading="submitting"
            :disabled="submitting"
            @click="handleSubmit"
         >
            确定
         </el-button>
      </template>
   </el-dialog>
</template>
@@ -92,58 +100,56 @@
const formData = ref(createEmptyForm())
const visible = ref(false)
const dialogMode = ref('add')
const dialogRowId = ref(null)

const submitting = ref(false)
const dialogReadonly = computed(() => dialogMode.value === 'view')
const dialogTitle = computed(() => {
   if (dialogMode.value === 'edit') {
      return '编辑'
   }
   if (dialogMode.value === 'view') {
   } else if (dialogMode.value === 'view') {
      return '查看'
   }
   } else {
   return '新增'
   }
})
const dialogShowSubmit = computed(() => dialogMode.value !== 'view')
const dialogReadonly = computed(() => dialogMode.value === 'view')
const rules = {
   deviceName: [
      { required: true, message: '请输入设备名称', trigger: 'blur' },
      { required: true, message: '请输入', trigger: 'blur' },
      { max: 50, message: '长度不超过50', trigger: 'blur' },
   ],
   deviceType: [
      { required: true, message: '请输入设备类型', trigger: 'blur' },
      { required: true, message: '请输入', trigger: 'blur' },
      { max: 50, message: '长度不超过50', trigger: 'blur' },
   ],
   deviceModel: [
      { required: true, message: '请输入型号', trigger: 'blur' },
      { required: true, message: '请输入', trigger: 'blur' },
      { max: 50, message: '长度不超过50', trigger: 'blur' },
   ],
   deviceSpecification: [
      { required: true, message: '请输入规格', trigger: 'blur' },
      { required: true, message: '请输入', trigger: 'blur' },
      { max: 50, message: '长度不超过50', trigger: 'blur' },
   ],
   manufacturer: [
      { required: true, message: '请输入生产厂商', trigger: 'blur' },
      { required: true, message: '请输入', trigger: 'blur' },
      { max: 50, message: '长度不超过50', trigger: 'blur' },
   ],
   stockOutDestination: [
      { required: true, message: '请输入出库去向', trigger: 'blur' },
      { required: true, message: '请输入', trigger: 'blur' },
      { max: 50, message: '长度不超过50', trigger: 'blur' },
   ],
   source: [
      { required: true, message: '请输入来源', trigger: 'blur' },
      { required: true, message: '请输入', trigger: 'blur' },
      { max: 50, message: '长度不超过50', trigger: 'blur' },
   ],
   purpose: [
      { required: true, message: '请输入用途', trigger: 'blur' },
      { required: true, message: '请输入', trigger: 'blur' },
      { max: 50, message: '长度不超过50', trigger: 'blur' },
   ],
   ownerDept: [
      { required: true, message: '请输入所属部门', trigger: 'blur' },
      { required: true, message: '请输入', trigger: 'blur' },
      { max: 50, message: '长度不超过50', trigger: 'blur' },
   ],
   ownerUser: [
      { required: true, message: '请输入负责人', trigger: 'blur' },
      { required: true, message: '请输入', trigger: 'blur' },
      { max: 50, message: '长度不超过50', trigger: 'blur' },
   ],
}
@@ -155,50 +161,41 @@

// 提交新增/编辑
async function handleSubmit() {
   if (dialogMode.value === 'view') {
      return
   }
   const isValid = await formRef.value?.validate().catch(() => false)
   if (!isValid) {
      return
   }
   if (dialogMode.value === 'add') {
      await fwDeviceSaveApi({ ...formData.value })
      ElMessage.success('新增成功')
   }
   if (dialogMode.value === 'edit') {
      await fwDeviceUpdateApi({ ...formData.value })
      ElMessage.success('更新成功')
   }
   if (!isValid) return
   submitting.value = true
   try {
      dialogMode.value === 'add'
         ? await fwDeviceSaveApi({ ...formData.value })
         : await fwDeviceUpdateApi({ ...formData.value })
      ElMessage.success(dialogMode.value === 'add' ? '新增成功' : '更新成功')
   visible.value = false
   emit('success')
   } finally {
      submitting.value = false
   }
}

// 加载详情
async function loadDetail() {
   if (!dialogRowId.value) return
   const res = await fwDeviceDetailApi({ id: dialogRowId.value })
   if (!formData.value.id) return
   const res = await fwDeviceDetailApi({ id: formData.value.id })
   const data = res?.data?.data ?? {}
   formData.value = { ...createEmptyForm(), ...data }
}

// 重置表单
function resetFormData() {
// 关闭后重置
function handleClosed() {
   formData.value = createEmptyForm()
}

// 关闭后重置
function handleClosed() {
   resetFormData()
}

// 打开弹框
async function open({ mode, id } = {}) {
async function open({ mode, row } = {}) {
   dialogMode.value = mode || 'add'
   dialogRowId.value = id ?? null
   formData.value = row
   visible.value = true
   if (dialogMode.value === 'add') {
      resetFormData()
      formData.value = createEmptyForm()
   } else {
      await loadDetail()
   }