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

<template>
    <div class="app-container">
        <!-- 岗位管理 -->
        <ComTable
            ref="comTableRef"
            :form-columns="formColumns"
            :table-columns="tableColumns"
            :load-data="listPositionAPI"
            :show-toolbar="true"
            :show-action="true"
            :action-columns="actionColumns"
            :default-query-params="{
                category: 2, // 0：人员分类  1：人员性质  2：岗位列表
            }"
        >
            <!-- 工具栏插槽 -->
            <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="personnelClassificationName">
                        <el-input
                            clearable
                            maxlength="50"
                            show-word-limit
                            placeholder="请输入岗位名称"
                            v-model.trim="addAndEditForm.personnelClassificationName"
                        />
                    </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="Position">
import { ref, nextTick } from 'vue'
import {
    listPositionAPI,
    addPositionAPI,
    delPositionAPI,
    updatePositionAPI,
} from '@/api/basicManage/position'
import { bus, BUS_EVENTS } from '@/utils/bus'
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 = () => ({
    personnelClassificationName: '',
    remark: '',
    category: 2,
})

const addAndEditForm = ref(getInitFormData())

const addAndEditRules = ref({
    personnelClassificationName: [{ required: true, message: '请输入岗位名称', trigger: 'blur' }],
})

const actionColumns = [
    {
        label: '编辑',
        type: 'primary',
        link: true,
        handler: (row) => {
            const { personnelClassificationId, personnelClassificationName, remark } = row
            editId.value = personnelClassificationId
            dialogConfig.outerTitle = '编辑岗位'
            dialogConfig.outerVisible = true
            // 使用 nextTick 确保在弹框渲染、表单组件挂载后再赋值
            nextTick(() => {
                addAndEditForm.value.personnelClassificationName = personnelClassificationName
                addAndEditForm.value.remark = remark
            })
        },
    },
    {
        label: '删除',
        type: 'danger',
        link: true,
        handler: (row) => {
            proxy.$modal.confirm('是否确认删除该岗位？').then(async () => {
                const result = await delPositionAPI({
                    personnelClassificationId: row.personnelClassificationId,
                })
                if (result.code === 200) {
                    proxy.$modal.msgSuccess('删除成功')
                    bus.emit(BUS_EVENTS.REFRESH_OPTIONS, 'positionOptions')
                    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 ? updatePositionAPI : addPositionAPI
        const params = JSON.parse(JSON.stringify(addAndEditForm.value))
        editId.value ? (params.personnelClassificationId = editId.value) : null

        const result = await API(params)
        if (result.code === 200) {
            proxy.$modal.msgSuccess(editId.value ? '编辑成功' : '新增成功')
            bus.emit(BUS_EVENTS.REFRESH_OPTIONS, 'positionOptions') // 刷新岗位下拉缓存
            addAndEditFormRef.value.resetFields() // 重置表单
            dialogConfig.outerVisible = false
            comTableRef.value?.refresh() // 刷新表格
        }
    } catch (error) {
        console.error('表单校验失败或请求错误:', error)
        return Promise.reject(error)
    }
}

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