From 306856c9e3234ec9986d027d8c9873588068857e Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Wed, 07 Jan 2026 18:27:35 +0800
Subject: [PATCH] feat: 优化表单提交
---
applications/drone-command/src/views/basicManage/deviceStock/DeviceStockFormDialog.vue | 89 +++++++++++++++++++++-----------------------
1 files changed, 43 insertions(+), 46 deletions(-)
diff --git a/applications/drone-command/src/views/basicManage/deviceStock/DeviceStockFormDialog.vue b/applications/drone-command/src/views/basicManage/deviceStock/DeviceStockFormDialog.vue
index 7654931..d508d12 100644
--- a/applications/drone-command/src/views/basicManage/deviceStock/DeviceStockFormDialog.vue
+++ b/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 '新增'
}
- 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 (!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 })
+ 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()
}
--
Gitblit v1.9.3