yn_digital_gadgets_web/src/views/basicManage/inspectionStation/index.vue

<template>
    <div class="app-container">
        <!-- 运检站管理 -->
        <ComTable
            ref="comTableRef"
            :form-columns="formColumns"
            :table-columns="tableColumns"
            :load-data="listInspectionStationAPI"
            :show-toolbar="true"
            :show-action="true"
            :action-columns="actionColumns"
            :default-query-params="{
                category: 0, // 0: 运检站, 1: 项目部
            }"
        >
            <!-- 工具栏插槽 -->
            <template #toolbar>
                <ComButton type="primary" icon="Plus" @click="onHandleAdd">新建运检站</ComButton>
            </template>
        </ComTable>

        <ComDialog :dialog-config="dialogConfig" @closeDialogOuter="onCloseDialogOuter">
            <template #outerContent>
                <el-form
                    size="large"
                    label-width="auto"
                    :model="addAndEditForm"
                    ref="addAndEditFormRef"
                    :rules="addAndEditRules"
                >
                    <el-form-item label="运检站名称" prop="inspectionStationName">
                        <el-input
                            clearable
                            maxlength="50"
                            show-word-limit
                            placeholder="请输入运检站名称"
                            v-model.trim="addAndEditForm.inspectionStationName"
                        />
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input
                            type="textarea"
                            maxlength="200"
                            show-word-limit
                            placeholder="请输入备注"
                            v-model="addAndEditForm.remark"
                            :autosize="{ minRows: 4, maxRows: 8 }"
                        />
                    </el-form-item>
                </el-form>

                <el-row class="common-btn-row">
                    <ComButton plain type="info" @click="onHandleCancel">取消</ComButton>
                    <ComButton @click="onHandleSave">保存</ComButton>
                </el-row>
            </template>
        </ComDialog>
    </div>
</template>

<script setup name="inspectionStation">
import { ref, nextTick } from 'vue'
import {
    listInspectionStationAPI,
    addInspectionStationAPI,
    delInspectionStationAPI,
    updateInspectionStationAPI,
} from '@/api/basicManage/inspectionStation'
import config from './config'
import ComTable from '@/components/ComTable/index.vue'
import ComButton from '@/components/ComButton/index.vue'
import ComDialog from '@/components/ComDialog/index.vue'

const { formColumns, tableColumns, dialogConfig } = config
const { proxy } = getCurrentInstance()

const addAndEditFormRef = ref(null)
const comTableRef = ref(null)
const editId = ref(null)

// 定义初始表单数据函数
const getInitFormData = () => ({
    inspectionStationName: '',
    remark: '',
    category: 0,
})

const addAndEditForm = ref(getInitFormData())

const addAndEditRules = ref({
    inspectionStationName: [{ required: true, message: '请输入运检站名称', trigger: 'blur' }],
})

const actionColumns = [
    {
        label: '编辑',
        type: 'primary',
        link: true,
        handler: (row) => {
            const { inspectionStationId, inspectionStationName, remark } = row
            editId.value = inspectionStationId
            dialogConfig.outerTitle = '编辑运检站'
            dialogConfig.outerVisible = true
            // 使用 nextTick 确保在弹框渲染、表单组件挂载后再赋值
            // 这样 el-form 记录的 "initial value" 才是空值，resetFields 才能生效
            nextTick(() => {
                addAndEditForm.value.inspectionStationName = inspectionStationName
                addAndEditForm.value.remark = remark
            })
        },
    },
    {
        label: '删除',
        type: 'danger',
        link: true,
        handler: (row) => {
            proxy.$modal.confirm('是否确认删除该运检站？').then(async () => {
                const result = await delInspectionStationAPI({
                    inspectionStationId: row.inspectionStationId,
                })
                if (result.code === 200) {
                    proxy.$modal.msgSuccess('删除成功')
                    comTableRef.value?.refresh() // 刷新表格
                }
            })
        },
    },
]

// 新增
const onHandleAdd = () => {
    editId.value = null
    dialogConfig.outerTitle = '新增运检站'
    dialogConfig.outerVisible = true
    // 重置表单数据
    addAndEditForm.value = getInitFormData()
    // 清除之前的校验信息
    nextTick(() => {
        addAndEditFormRef.value?.clearValidate()
    })
}

// 取消
const onHandleCancel = () => {
    addAndEditFormRef?.value?.resetFields() // 重置表单
    dialogConfig.outerVisible = false
}

// 保存
const onHandleSave = async () => {
    try {
        await addAndEditFormRef.value.validate()
        const API = editId.value ? updateInspectionStationAPI : addInspectionStationAPI
        const params = JSON.parse(JSON.stringify(addAndEditForm.value))
        editId.value ? (params.inspectionStationId = editId.value) : null

        const result = await API(params)
        if (result.code === 200) {
            proxy.$modal.msgSuccess(editId.value ? '编辑成功' : '新增成功')
            addAndEditFormRef.value.resetFields() // 重置表单
            dialogConfig.outerVisible = false
            comTableRef.value?.refresh() // 刷新表格
        }
    } catch (error) {
        console.error('表单校验失败或请求错误:', error)
        // 必须抛出错误或返回 Promise.reject()，ComButton 才能捕获并结束 loading 状态
        return Promise.reject(error)
    }
}

const onCloseDialogOuter = (visible) => {
    dialogConfig.outerVisible = visible
    if (!visible) {
        addAndEditFormRef.value?.resetFields()
    }
}
</script>