feat: 优化表单提交

罗广辉

2026-01-07 4818e3c2297adce040b7c22e774d8fa5a9fdb5dd

 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>
@@ -74,7 +82,7 @@
import { ElMessage } from 'element-plus'
import { fwDeviceDetailApi, fwDeviceSaveApi, fwDeviceUpdateApi } from '@/api/fwDevice'

const createEmptyForm = () => ({
const initForm = () => ({
   deviceModel: '',
   deviceName: '',
   deviceSpecification: '',
@@ -89,61 +97,59 @@

const emit = defineEmits(['success'])
const formRef = ref(null)
const formData = ref(createEmptyForm())
const formData = ref(initForm())
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 '新增'
   }
   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,38 @@

// 提交新增/编辑
async function handleSubmit() {
   if (dialogMode.value === 'view') {
      return
   }
   const isValid = await formRef.value?.validate().catch(() => false)
   if (!isValid) {
      return
   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
   }
   if (dialogMode.value === 'add') {
      await fwDeviceSaveApi({ ...formData.value })
      ElMessage.success('新增成功')
   }
   if (dialogMode.value === 'edit') {
      await fwDeviceUpdateApi({ ...formData.value })
      ElMessage.success('更新成功')
   }
   visible.value = false
   emit('success')
}

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

// 重置表单
function resetFormData() {
   formData.value = createEmptyForm()
   if (!formData.value.id) return
   const res = await fwDeviceDetailApi({ id: formData.value.id })
   formData.value = res?.data?.data ?? {}
}

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

// 打开弹框
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 = initForm()
   } else {
      await loadDetail()
   }