feat: 优化表单提交

罗广辉

2026-01-07 306856c9e3234ec9986d027d8c9873588068857e

feat: 优化表单提交

 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()
    }

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

@@ -30,12 +30,14 @@
            </el-table-column>
        </el-table>

        <el-pagination
            v-model:current-page="searchParams.current"
            v-model:page-size="searchParams.size"
            :total="total"
            @change="getList"
        />
        <div>
            <el-pagination
                v-model:current-page="searchParams.current"
                v-model:page-size="searchParams.size"
                :total="total"
                @change="getList"
            />
        </div>

        <DeviceStockFormDialog ref="dialogRef" @success="getList" />
    </basic-container>
@@ -81,12 +83,12 @@

// 查看
function handleView(row) {
    dialogRef.value?.open({ mode: 'view', id: row.id })
    dialogRef.value?.open({ mode: 'view', row: { ...row } })
}

// 编辑
function handleEdit(row) {
    dialogRef.value?.open({ mode: 'edit', id: row.id })
    dialogRef.value?.open({ mode: 'edit', row: { ...row } })
}

// 删除