feat: 优化表单提交

罗广辉

2026-01-07 4818e3c2297adce040b7c22e774d8fa5a9fdb5dd

feat: 优化表单提交

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

@@ -82,7 +82,7 @@
import { ElMessage } from 'element-plus'
import { fwDeviceDetailApi, fwDeviceSaveApi, fwDeviceUpdateApi } from '@/api/fwDevice'

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

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 submitting = ref(false)
@@ -165,9 +165,7 @@
    if (!isValid) return
    submitting.value = true
    try {
        dialogMode.value === 'add'
            ? await fwDeviceSaveApi({ ...formData.value })
            : await fwDeviceUpdateApi({ ...formData.value })
        dialogMode.value === 'add' ? await fwDeviceSaveApi(formData.value) : await fwDeviceUpdateApi(formData.value)
        ElMessage.success(dialogMode.value === 'add' ? '新增成功' : '更新成功')
        visible.value = false
        emit('success')
@@ -180,13 +178,12 @@
async function loadDetail() {
    if (!formData.value.id) return
    const res = await fwDeviceDetailApi({ id: formData.value.id })
    const data = res?.data?.data ?? {}
    formData.value = { ...createEmptyForm(), ...data }
    formData.value = res?.data?.data ?? {}
}

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

// 打开弹框
@@ -195,7 +192,7 @@
    formData.value = row
    visible.value = true
    if (dialogMode.value === 'add') {
        formData.value = createEmptyForm()
        formData.value = initForm()
    } else {
        await loadDetail()
    }

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

@@ -8,8 +8,8 @@
                <el-input v-model="searchParams.deviceType" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button @click="resetForm">重置</el-button>
                <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
        </el-form>
        <div>
@@ -44,17 +44,18 @@
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { onMounted, ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { fwDeviceListApi, fwDeviceRemoveApi } from '@/api/fwDevice'
import DeviceStockFormDialog from './DeviceStockFormDialog.vue'

const searchParams = reactive({
const initSearchParams = () => ({
    deviceName: '',
    deviceType: '',
    current: 1,
    size: 10,
})
const searchParams = ref(initSearchParams())
const total = ref(0)
const list = ref([])
const queryParamsRef = ref(null)
@@ -63,21 +64,21 @@

// 获取列表
async function getList() {
    const res = await fwDeviceListApi({ ...searchParams })
    const res = await fwDeviceListApi(searchParams.value)
    list.value = res?.data?.data?.records ?? []
    total.value = res?.data?.data?.total ?? 0
}

// 查询
function handleSearch() {
    searchParams.current = 1
    searchParams.value.current = 1
    getList()
}

// 重置查询
function resetForm() {
    queryParamsRef.value?.resetFields()
    searchParams.current = 1
    searchParams.value.current = 1
    getList()
}