From 4818e3c2297adce040b7c22e774d8fa5a9fdb5dd Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Wed, 07 Jan 2026 18:34:57 +0800
Subject: [PATCH] feat: 优化表单提交
---
applications/drone-command/src/views/basicManage/deviceStock/DeviceStockFormDialog.vue | 92 +++++++++++++++++++++------------------------
1 files changed, 43 insertions(+), 49 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..5fc6022 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>
@@ -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()
}
--
Gitblit v1.9.3