分组管理模块调试完成

src/api/basicManage/groupManage.js

@@ -0,0 +1,38 @@
+import request from '@/utils/request'
+
+// 分组管理 - 查询列表
+export function listGroupAPI(query) {
+    return request({
+        url: '/group/getGroupList',
+        method: 'GET',
+        params: query,
+    })
+}
+
+// 分组管理 - 新增
+export function addGroupAPI(data) {
+    return request({
+        url: '/group/addGroup',
+        method: 'POST',
+        data,
+    })
+}
+
+// 分组管理 - 修改
+export function updateGroupAPI(data) {
+    return request({
+        url: '/group/updateGroup',
+        method: 'POST',
+        data,
+    })
+}
+
+// 分组管理 - 删除
+export function delGroupAPI(data) {
+    return request({
+        url: '/group/delGroup',
+        method: 'POST',
+        data,
+    })
+}
+

src/api/personManage/person.js

@@ -35,3 +35,11 @@ export function delPersonAPI(data) {
         data,
     })
 }
+
+// 获取人员全量
+export function getAllPersonAPI() {
+    return request({
+        url: '/worker/getWorkerSelect',
+        method: 'GET',
+    })
+}

src/assets/styles/index.scss

@@ -196,7 +196,7 @@ aside {
 
 .fixed-bottom {
     position: fixed;
-    bottom: 15px;
+    bottom: 10px;
     right: 15px;
     width: 100%;
     background-color: #fff;

src/views/basicManage/groupManage/addAndEditForm.vue

@@ -0,0 +1,502 @@
+<template>
+    <el-form
+        size="large"
+        label-width="auto"
+        :model="formData"
+        ref="formRef"
+        :rules="rules"
+        class="add-and-edit-form"
+    >
+        <el-form-item label="分组名称" prop="groupName">
+            <el-input
+                clearable
+                maxlength="50"
+                show-word-limit
+                placeholder="请输入分组名称"
+                v-model.trim="formData.groupName"
+            />
+        </el-form-item>
+
+        <el-form-item label="选择组员" prop="workerList" class="member-select-item">
+            <div class="member-select-container">
+                <!-- 左侧：可选人员列表 -->
+                <div class="member-list-left">
+                    <div class="search-bar">
+                        <el-row :gutter="10">
+                            <el-col :span="12">
+                                <el-input
+                                    v-model="searchDept"
+                                    placeholder="输入部门名称"
+                                    clearable
+                                    prefix-icon="Search"
+                                />
+                            </el-col>
+                            <el-col :span="12">
+                                <el-input
+                                    v-model="searchName"
+                                    placeholder="输入人员姓名"
+                                    clearable
+                                    prefix-icon="Search"
+                                />
+                            </el-col>
+                        </el-row>
+                    </div>
+                    <div class="table-container">
+                        <el-table
+                            ref="personTableRef"
+                            :data="filteredPersonList"
+                            height="300"
+                            @selection-change="handleSelectionChange"
+                        >
+                            <el-table-column type="selection" width="55" />
+                            <el-table-column prop="orgName" label="人员所属" width="150" />
+                            <el-table-column prop="workerName" label="姓名" width="120" />
+                            <el-table-column prop="sex" label="性别" width="80">
+                                <template #default="{ row }">
+                                    {{ row.sex == 1 ? '男' : '女' }}
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="phone" label="电话" />
+                        </el-table>
+                    </div>
+                </div>
+
+                <!-- 右侧：已选人员列表 -->
+                <div class="member-list-right">
+                    <div class="selected-header">
+                        <span>已选人员</span>
+                        <el-button
+                            type="text"
+                            size="small"
+                            @click="handleClearAll"
+                            :disabled="selectedMembers.length === 0"
+                        >
+                            清空
+                        </el-button>
+                    </div>
+                    <div class="selected-list">
+                        <div
+                            v-for="member in selectedMembers"
+                            :key="member.id"
+                            class="selected-item"
+                        >
+                            <span>{{ member.workerName }}</span>
+                            <el-icon class="remove-icon" @click="handleRemoveMember(member.id)">
+                                <Close />
+                            </el-icon>
+                        </div>
+                        <div v-if="selectedMembers.length === 0" class="empty-tip">
+                            暂无已选人员
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </el-form-item>
+
+        <el-form-item label="备注" prop="remark">
+            <el-input
+                type="textarea"
+                :rows="3"
+                maxlength="200"
+                show-word-limit
+                placeholder="请输入备注"
+                v-model.trim="formData.remark"
+            />
+        </el-form-item>
+    </el-form>
+</template>
+
+<script setup name="AddAndEditForm">
+import { ref, computed, watch, onMounted, nextTick } from 'vue'
+import { getAllPersonAPI } from '@/api/personManage/person.js'
+import { Close } from '@element-plus/icons-vue'
+
+const props = defineProps({
+    formData: {
+        type: Object,
+        default: () => ({}),
+    },
+})
+
+const formRef = ref(null)
+const personTableRef = ref(null)
+const searchDept = ref('') // 部门搜索关键词
+const searchName = ref('') // 姓名搜索关键词
+const personList = ref([])
+const selectedPersonList = ref([])
+// 标志位：是否正在同步选中状态，防止循环触发
+const isSyncing = ref(false)
+
+// 表单验证规则
+const rules = {
+    groupName: [{ required: true, message: '请输入分组名称', trigger: 'blur' }],
+    workerList: [
+        {
+            required: true,
+            message: '请至少选择一个组员',
+            trigger: 'change',
+            validator: (rule, value, callback) => {
+                if (!value || value.length === 0) {
+                    callback(new Error('请至少选择一个组员'))
+                } else {
+                    callback()
+                }
+            },
+        },
+    ],
+}
+
+// 过滤后的人员列表
+const filteredPersonList = computed(() => {
+    let filtered = personList.value
+
+    // 部门过滤
+    if (searchDept.value) {
+        const deptKeyword = searchDept.value.toLowerCase()
+        filtered = filtered.filter((item) => {
+            const org = (item.orgName || '').toLowerCase()
+            return org.includes(deptKeyword)
+        })
+    }
+
+    // 姓名过滤
+    if (searchName.value) {
+        const nameKeyword = searchName.value.toLowerCase()
+        filtered = filtered.filter((item) => {
+            const name = (item.workerName || '').toLowerCase()
+            return name.includes(nameKeyword)
+        })
+    }
+
+    return filtered
+})
+
+// 已选人员列表
+const selectedMembers = computed(() => {
+    if (!props.formData.workerList || props.formData.workerList.length === 0) {
+        return []
+    }
+    return personList.value.filter((item) => props.formData.workerList.includes(item.id))
+})
+
+// 获取人员列表
+const getPersonList = async () => {
+    try {
+        const result = await getAllPersonAPI()
+
+        if (result.code === 200) {
+            // 处理返回数据，可能是 result.rows 或 result.data 或直接是数组
+            const data = result.rows || result.data || result || []
+            personList.value = data.map((item) => ({
+                id: item.id,
+                workerName: item.workerName,
+                orgName: item.orgName,
+                sex: item.sex,
+                phone: item.phone,
+            }))
+            // 人员列表加载完成后，watch 监听器会自动处理选中状态同步
+            // 不需要在这里手动调用 syncTableSelection，避免循环触发
+        }
+    } catch (error) {
+        console.error('获取人员列表失败:', error)
+        // 重置同步标志，防止卡死
+        isSyncing.value = false
+    }
+}
+
+// 监听formData.workerList变化，同步表格选中状态
+watch(
+    () => props.formData.workerList,
+    (newVal, oldVal) => {
+        // 如果正在同步中，跳过，防止循环触发
+        if (isSyncing.value) {
+            return
+        }
+        // 只有当人员列表已加载且workerList有值时才同步
+        if (personList.value.length > 0 && newVal && newVal.length > 0) {
+            // 检查值是否真的变化了（避免不必要的同步）
+            const newValStr = JSON.stringify(newVal.sort())
+            const oldValStr = oldVal ? JSON.stringify(oldVal.sort()) : ''
+            if (newValStr !== oldValStr) {
+                nextTick(() => {
+                    syncTableSelection()
+                })
+            }
+        }
+    },
+    { deep: true },
+)
+
+// 监听人员列表加载完成，同步选中状态
+watch(
+    () => personList.value.length,
+    (newLength, oldLength) => {
+        // 如果正在同步中，跳过
+        if (isSyncing.value) {
+            return
+        }
+        // 当人员列表从0变为有数据时，如果有已选人员，同步选中状态
+        if (
+            oldLength === 0 &&
+            newLength > 0 &&
+            props.formData.workerList &&
+            props.formData.workerList.length > 0
+        ) {
+            nextTick(() => {
+                syncTableSelection()
+            })
+        }
+    },
+)
+
+// 同步表格选中状态
+const syncTableSelection = () => {
+    if (
+        !personTableRef.value ||
+        !props.formData.workerList ||
+        props.formData.workerList.length === 0
+    ) {
+        // 如果没有选中项，清空所有选中状态
+        if (personTableRef.value) {
+            isSyncing.value = true
+            personTableRef.value.clearSelection()
+            // 延迟重置标志位，确保 clearSelection 触发的事件被忽略
+            nextTick(() => {
+                isSyncing.value = false
+            })
+        }
+        return
+    }
+
+    // 设置同步标志，防止触发 watch 和 handleSelectionChange
+    isSyncing.value = true
+
+    // 确保 workerList 是数字数组
+    const selectedIds = props.formData.workerList.map((id) => Number(id))
+
+    nextTick(() => {
+        // 先清空所有选中状态（这会触发 selection-change，但由于 isSyncing=true，会被忽略）
+        personTableRef.value.clearSelection()
+
+        // 遍历当前过滤后的人员列表，只选中在当前过滤结果中的已选人员
+        // 这样可以确保即使搜索条件变化，已选中的行也能正确显示
+        filteredPersonList.value.forEach((row) => {
+            const rowId = Number(row.id)
+            if (selectedIds.includes(rowId)) {
+                personTableRef.value.toggleRowSelection(row, true)
+            }
+        })
+
+        // 同步完成后，延迟重置标志位，确保所有事件处理完成
+        nextTick(() => {
+            nextTick(() => {
+                isSyncing.value = false
+            })
+        })
+    })
+}
+
+// 表格选择变化
+const handleSelectionChange = (selection) => {
+    // 如果正在同步中，跳过，防止循环触发和误删已选项
+    if (isSyncing.value) {
+        return
+    }
+
+    selectedPersonList.value = selection
+    // 更新表单数据中的workerList
+    // 保留所有已选中的ID（包括不在当前过滤列表中的）
+    const allSelectedIds = new Set(props.formData.workerList || [])
+
+    // 获取当前过滤列表中所有人员的ID
+    const currentFilteredIds = new Set(filteredPersonList.value.map((item) => item.id))
+
+    // 移除当前过滤列表中未选中的项（只处理当前可见的过滤结果）
+    // 注意：不在当前过滤结果中的已选项不会被删除，因为它们不在 currentFilteredIds 中
+    currentFilteredIds.forEach((id) => {
+        if (!selection.find((s) => s.id === id)) {
+            allSelectedIds.delete(id)
+        }
+    })
+
+    // 添加当前过滤列表中选中的项
+    selection.forEach((item) => {
+        allSelectedIds.add(item.id)
+    })
+
+    // 设置同步标志，防止触发 watch
+    isSyncing.value = true
+    props.formData.workerList = Array.from(allSelectedIds)
+    nextTick(() => {
+        isSyncing.value = false
+    })
+}
+
+// 移除单个已选人员
+const handleRemoveMember = (memberId) => {
+    if (!props.formData.workerList) {
+        props.formData.workerList = []
+        return
+    }
+    // 设置同步标志，防止触发 watch
+    isSyncing.value = true
+    props.formData.workerList = props.formData.workerList.filter((id) => id !== memberId)
+    nextTick(() => {
+        // 同步更新表格选中状态
+        syncTableSelection()
+    })
+}
+
+// 清空所有已选人员
+const handleClearAll = () => {
+    // 设置同步标志，防止触发 watch
+    isSyncing.value = true
+    props.formData.workerList = []
+    if (personTableRef.value) {
+        personTableRef.value.clearSelection()
+    }
+    nextTick(() => {
+        isSyncing.value = false
+    })
+}
+
+// 监听搜索关键词变化，重新同步选中状态
+watch([() => searchDept.value, () => searchName.value], () => {
+    // 搜索关键词变化时，需要重新同步选中状态
+    // 因为表格数据源变化可能导致选中状态丢失
+    if (
+        personList.value.length > 0 &&
+        props.formData.workerList &&
+        props.formData.workerList.length > 0
+    ) {
+        // 设置同步标志，防止 handleSelectionChange 误删已选项
+        isSyncing.value = true
+
+        // 延迟一下，确保表格数据更新完成
+        nextTick(() => {
+            nextTick(() => {
+                syncTableSelection()
+            })
+        })
+    }
+})
+
+onMounted(() => {
+    getPersonList()
+})
+
+// 暴露校验方法和重置方法给父组件
+defineExpose({
+    validate: () => formRef.value.validate(),
+    resetFields: () => formRef.value.resetFields(),
+    clearValidate: () => formRef.value.clearValidate(),
+})
+</script>
+
+<style lang="scss" scoped>
+.add-and-edit-form {
+    padding: 10px 20px;
+
+    .member-select-item {
+        :deep(.el-form-item__content) {
+            width: 100%;
+        }
+    }
+
+    .member-select-container {
+        display: flex;
+        gap: 20px;
+        width: 100%;
+        border: 1px solid #dcdfe6;
+        border-radius: 4px;
+        padding: 15px;
+        background: #fafafa;
+    }
+
+    .member-list-left {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+
+        .search-bar {
+            margin-bottom: 10px;
+
+            :deep(.el-row) {
+                width: 100%;
+            }
+
+            :deep(.el-col) {
+                padding: 0;
+            }
+        }
+
+        .table-container {
+            flex: 1;
+            border: 1px solid #dcdfe6;
+            border-radius: 4px;
+            overflow: hidden;
+            background: #fff;
+        }
+    }
+
+    .member-list-right {
+        width: 200px;
+        display: flex;
+        flex-direction: column;
+        border: 1px solid #dcdfe6;
+        border-radius: 4px;
+        background: #fff;
+
+        .selected-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 15px;
+            border-bottom: 1px solid #dcdfe6;
+            font-weight: 500;
+        }
+
+        .selected-list {
+            flex: 1;
+            padding: 10px;
+            overflow-y: auto;
+            max-height: 300px;
+
+            .selected-item {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 2px 10px;
+                margin-bottom: 5px;
+                background: #f0f9ff;
+                border: 1px solid #b3d8ff;
+                border-radius: 4px;
+                cursor: pointer;
+                transition: all 0.3s;
+
+                &:hover {
+                    background: #e1f3ff;
+                    border-color: #409eff;
+                }
+
+                .remove-icon {
+                    color: #909399;
+                    cursor: pointer;
+                    font-size: 16px;
+
+                    &:hover {
+                        color: #f56c6c;
+                    }
+                }
+            }
+
+            .empty-tip {
+                text-align: center;
+                color: #909399;
+                padding: 20px;
+            }
+        }
+    }
+}
+</style>
+

src/views/basicManage/groupManage/config.js

@@ -0,0 +1,45 @@
+import { reactive } from 'vue'
+
+// 搜索表单配置
+export const buildFormColumns = () => [
+    {
+        type: 'input',
+        prop: 'groupName',
+        placeholder: '请输入分组名称',
+    },
+]
+
+// 表格列配置
+export const tableColumns = [
+    {
+        prop: 'groupName',
+        label: '分组名称',
+    },
+    {
+        prop: 'personCount',
+        label: '人员数量',
+        formatter: (row) => {
+            return row.workerList?.length || 0
+        },
+    },
+    {
+        prop: 'remark',
+        label: '备注',
+    },
+]
+
+// 弹窗配置
+export const dialogConfig = reactive({
+    outerVisible: false,
+    outerTitle: '新增分组',
+    outerWidth: '70%',
+    minHeight: '80vh',
+    maxHeight: '95vh',
+})
+
+export default {
+    tableColumns,
+    dialogConfig,
+    buildFormColumns,
+}
+

src/views/basicManage/groupManage/index.vue

@@ -0,0 +1,177 @@
+<template>
+    <div class="app-container">
+        <!-- 分组管理 -->
+        <ComTable
+            ref="comTableRef"
+            :form-columns="formColumns"
+            :table-columns="tableColumns"
+            :load-data="listGroupAPI"
+            :show-toolbar="true"
+            :show-action="true"
+            :action-columns="actionColumns"
+        >
+            <template #toolbar>
+                <ComButton
+                    type="primary"
+                    icon="Plus"
+                    @click="onHandleAdd"
+                    v-hasPermi="['group:group:add']"
+                >
+                    新建分组
+                </ComButton>
+            </template>
+        </ComTable>
+
+        <ComDialog :dialog-config="dialogConfig" @closeDialogOuter="onCloseDialogOuter">
+            <template #outerContent>
+                <!-- 将表单抽离到独立组件中，保持 index.vue 简洁 -->
+                <AddAndEditForm ref="formRef" :form-data="addAndEditForm" />
+
+                <el-row class="common-btn-row fixed-bottom">
+                    <ComButton plain type="info" @click="onHandleCancel">取消</ComButton>
+                    <ComButton @click="onHandleSave">保存</ComButton>
+                </el-row>
+            </template>
+        </ComDialog>
+    </div>
+</template>
+
+<script setup name="GroupManage">
+import { ref, nextTick, getCurrentInstance, computed } from 'vue'
+import {
+    listGroupAPI,
+    addGroupAPI,
+    updateGroupAPI,
+    delGroupAPI,
+} from '@/api/basicManage/groupManage.js'
+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'
+import AddAndEditForm from './addAndEditForm.vue'
+
+const { tableColumns, dialogConfig, buildFormColumns } = config
+const { proxy } = getCurrentInstance()
+
+const formRef = ref(null)
+const comTableRef = ref(null)
+const editId = ref(null)
+
+// 根据配置构建搜索表单
+const formColumns = computed(() => buildFormColumns())
+
+// 定义初始表单数据函数（优雅重置）——字段与表单保持同步
+const getInitFormData = () => ({
+    groupName: '', // 分组名称
+    workerList: [], // 组员ID列表
+    remark: '', // 备注
+})
+
+const addAndEditForm = ref(getInitFormData())
+
+// 操作列配置
+const actionColumns = [
+    {
+        label: '编辑',
+        type: 'primary',
+        link: true,
+        permission: ['group:group:edit'],
+        handler: (row) => {
+            editId.value = row.id
+            dialogConfig.outerTitle = '编辑分组'
+            dialogConfig.outerVisible = true
+            // 使用 nextTick 确保弹框和子组件挂载后再回显数据
+            nextTick(() => {
+                const { groupName, workerList, remark } = row
+                // 从workerList中提取人员ID数组
+                let workerIdList = []
+                if (workerList && Array.isArray(workerList) && workerList.length > 0) {
+                    workerIdList = workerList.map((worker) => worker.id).filter((id) => id != null)
+                }
+                Object.assign(addAndEditForm.value, {
+                    groupName: groupName || '',
+                    workerList: workerIdList,
+                    remark: remark || '',
+                })
+            })
+        },
+    },
+    {
+        label: '删除',
+        type: 'danger',
+        link: true,
+        permission: ['group:group:remove'],
+        handler: (row) => {
+            proxy.$modal.confirm('是否确认删除该分组？').then(async () => {
+                const result = await delGroupAPI({ id: row.id })
+                if (result.code === 200) {
+                    proxy.$modal.msgSuccess('删除成功')
+                    comTableRef.value?.refresh()
+                }
+            })
+        },
+    },
+]
+
+// 新增
+const onHandleAdd = () => {
+    editId.value = null
+    dialogConfig.outerTitle = '新增分组'
+    dialogConfig.outerVisible = true
+    addAndEditForm.value = getInitFormData()
+    nextTick(() => {
+        formRef.value?.clearValidate()
+    })
+}
+
+// 取消
+const onHandleCancel = () => {
+    dialogConfig.outerVisible = false
+}
+
+// 保存
+const onHandleSave = async () => {
+    try {
+        console.log(addAndEditForm.value)
+        // 调用子组件暴露的 validate 方法
+
+        await formRef.value.validate()
+        const API = editId.value ? updateGroupAPI : addGroupAPI
+        const params = JSON.parse(JSON.stringify(addAndEditForm.value))
+        params.workerList = params.workerList.map((item) => {
+            return { id: item }
+        })
+        if (editId.value) {
+            params.id = editId.value
+        }
+        const result = await API(params)
+        if (result.code === 200) {
+            proxy.$modal.msgSuccess(editId.value ? '编辑成功' : '新增成功')
+            dialogConfig.outerVisible = false
+            comTableRef.value?.refresh()
+        }
+    } catch (error) {
+        return Promise.reject(error)
+    }
+}
+
+// 关闭弹框统一处理
+const onCloseDialogOuter = (visible) => {
+    dialogConfig.outerVisible = visible
+    if (!visible) {
+        formRef.value?.resetFields()
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.common-btn-row {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 20px;
+    padding: 0 20px 20px;
+}
+</style>
+

src/views/basicManage/personManage/addAndEditForm.vue

@@ -7,40 +7,26 @@
         :rules="rules"
         class="add-and-edit-form"
     >
-        <el-form-item label="人员所属部门" prop="inspectionStationId">
+        <el-form-item label="人员所属部门" prop="orgId">
-            <!-- <el-select
-                filter
-                clearable
-                style="width: 100%"
-                v-model="formData.inspectionStationId"
-                placeholder="请选择人员所属部门"
-            >
-                <el-option
-                    v-for="item in inspectionStationOptions"
-                    :key="item.id"
-                    :value="item.id"
-                    :label="item.value"
-                />
-            </el-select> -->
-
             <el-tree-select
                 clearable
                 check-strictly
                 value-key="id"
                 :data="enabledDeptOptions"
-                v-model="formData.inspectionStationId"
+                v-model="formData.orgId"
                 placeholder="请选择归属部门"
                 :props="{ value: 'id', label: 'label', children: 'children' }"
+                @change="handleDeptChange"
             />
         </el-form-item>
 
-        <el-form-item label="姓名" prop="name">
+        <el-form-item label="姓名" prop="workerName">
             <el-input
                 clearable
                 maxlength="20"
                 show-word-limit
                 placeholder="请输入姓名"
-                v-model.trim="formData.name"
+                v-model.trim="formData.workerName"
             />
         </el-form-item>
 
@@ -66,35 +52,21 @@
 <script setup name="AddAndEditForm">
 import { ref, onMounted } from 'vue'
 import { deptTreeSelect } from '@/api/system/user'
+
 const props = defineProps({
     formData: {
         type: Object,
         default: () => ({}),
     },
-    inspectionStationOptions: {
-        type: Array,
-        default: () => [],
-    },
-    positionOptions: {
-        type: Array,
-        default: () => [],
-    },
-    natureOptions: {
-        type: Array,
-        default: () => [],
-    },
-    categoryOptions: {
-        type: Array,
-        default: () => [],
-    },
 })
+
 const deptOptions = ref(undefined)
 const enabledDeptOptions = ref(undefined)
 const formRef = ref(null)
 
 const rules = {
-    inspectionStationId: [{ required: true, message: '请选择人员所属', trigger: 'change' }],
+    orgId: [{ required: true, message: '请选择人员所属部门', trigger: 'change' }],
-    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
+    workerName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
     sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
     phone: [
         {
@@ -103,9 +75,6 @@ const rules = {
             trigger: 'blur',
         },
     ],
-    positionId: [{ required: true, message: '请选择岗位', trigger: 'change' }],
-    personnelNatureId: [{ required: true, message: '请选择人员性质', trigger: 'change' }],
-    personnelClassificationId: [{ required: true, message: '请选择人员分类', trigger: 'change' }],
 }
 
 /** 查询部门下拉树结构 */
@@ -129,6 +98,28 @@ const filterDisabledDept = (deptList) => {
     })
 }
 
+/** 部门选择变化时，更新部门名称 */
+const handleDeptChange = (value) => {
+    if (!value) {
+        props.formData.orgName = ''
+        return
+    }
+    // 查找选中的部门名称
+    const findDeptName = (list, id) => {
+        for (const item of list) {
+            if (item.id === id) {
+                return item.label
+            }
+            if (item.children && item.children.length) {
+                const found = findDeptName(item.children, id)
+                if (found) return found
+            }
+        }
+        return ''
+    }
+    props.formData.orgName = findDeptName(enabledDeptOptions.value, value)
+}
+
 onMounted(() => {
     getDeptTree()
 })

src/views/basicManage/personManage/config.js

@@ -8,44 +8,44 @@ export const buildFormColumns = (
     natureOptions = [],
     categoryOptions = [],
 ) => [
-    {
+        {
-        type: 'input',
+            type: 'input',
-        prop: 'name',
+            prop: 'name',
-        placeholder: '请输入姓名',
+            placeholder: '请输入姓名',
-    },
+        },
-    {
+        {
-        type: 'select',
+            type: 'select',
-        prop: 'sex',
+            prop: 'sex',
-        placeholder: '请选择性别',
+            placeholder: '请选择性别',
-        options: [
+            options: [
-            {
+                {
-                label: '男',
+                    label: '男',
-                value: 1,
+                    value: 1,
-            },
+                },
-            {
+                {
-                label: '女',
+                    label: '女',
-                value: 0,
+                    value: 0,
-            },
+                },
-        ],
+            ],
-    },
+        },
-    {
+        {
-        type: 'select',
+            type: 'select',
-        prop: 'positionId',
+            prop: 'positionId',
-        placeholder: '请选择部门',
+            placeholder: '请选择部门',
-        options: positionOptions.map((item) => ({
+            options: positionOptions.map((item) => ({
-            label: item.value,
+                label: item.value,
-            value: item.id,
+                value: item.id,
-        })),
+            })),
-    },
+        },
-]
+    ]
 
 export const tableColumns = [
     {
-        prop: 'inspectionStationName',
+        prop: 'orgName',
         label: '人员所属部门',
     },
     {
-        prop: 'name',
+        prop: 'workerName',
         label: '姓名',
     },
     {
@@ -56,9 +56,8 @@ export const tableColumns = [
     {
         prop: 'phone',
         label: '电话',
-        formatter: (row) => (CryptoUtil.decrypt(row.phone)),
+        // formatter: (row) => (CryptoUtil.decrypt(row.phone)),
     },
-   
 ]
 
 export const dialogConfig = reactive({

src/views/basicManage/personManage/index.vue

@@ -3,7 +3,7 @@
         <!-- 人员管理 -->
         <ComTable
             ref="comTableRef"
-            :form-columns="formColumns"
+            :form-columns="[]"
             :table-columns="tableColumns"
             :load-data="listPersonAPI"
             :show-toolbar="true"
@@ -43,14 +43,7 @@
         <ComDialog :dialog-config="dialogConfig" @closeDialogOuter="onCloseDialogOuter">
             <template #outerContent>
                 <!-- 将表单抽离到独立组件中，保持 index.vue 简洁 -->
-                <AddAndEditForm
+                <AddAndEditForm ref="formRef" :form-data="addAndEditForm" />
-                    ref="formRef"
-                    :form-data="addAndEditForm"
-                    :inspection-station-options="allPositionAndInspectionStationOptions"
-                    :position-options="positionOptions"
-                    :nature-options="natureOptions"
-                    :category-options="categoryOptions"
-                />
 
                 <el-row class="common-btn-row">
                     <ComButton plain type="info" @click="onHandleCancel">取消</ComButton>
@@ -110,11 +103,6 @@ import {
     updatePersonAPI,
     delPersonAPI,
 } from '@/api/personManage/person.js'
-import {
-    getInspectionStationSelectAPI,
-    getPersonNatureAndCategoryAndPositionSelectAPI,
-} from '@/api/common.js'
-import { useOptions } from '@/hooks/useOptions'
 import { bus, BUS_EVENTS } from '@/utils/bus'
 import { getToken } from '@/utils/auth'
 import config from './config'
@@ -124,7 +112,7 @@ import ComDialog from '@/components/ComDialog/index.vue'
 import AddAndEditForm from './addAndEditForm.vue'
 import CryptoUtil from '../../../api/crypto.js'
 
-const { tableColumns, dialogConfig, buildFormColumns } = config
+const { tableColumns, dialogConfig } = config
 const { proxy } = getCurrentInstance()
 
 const formRef = ref(null)
@@ -132,13 +120,6 @@ const comTableRef = ref(null)
 const editId = ref(null)
 const uploadRef = ref(null)
 
-// 使用通用 Hook 获取下拉数据（带缓存和自动刷新）
-// const { options: inspectionStationOptions } = useOptions(
-//     'inspectionStationOptions',
-//     getInspectionStationSelectAPI,
-//     {},
-// )
-
 // 人员导入弹框配置
 const uploadDialogConfig = reactive({
     outerVisible: false,
@@ -161,43 +142,13 @@ const upload = reactive({
     selectedFile: null,
 })
 
-const { options: allPositionAndInspectionStationOptions } = useOptions(
+// 定义初始表单数据函数（优雅重置）——字段与表单保持同步
-    'allPositionAndInspectionStationOptions',
-    getInspectionStationSelectAPI,
-    {},
-)
-
-const { options: positionOptions } = useOptions(
-    'positionOptions',
-    getPersonNatureAndCategoryAndPositionSelectAPI,
-    { category: 2 },
-)
-const { options: natureOptions } = useOptions(
-    'personNatureOptions',
-    getPersonNatureAndCategoryAndPositionSelectAPI,
-    { category: 1 },
-)
-const { options: categoryOptions } = useOptions(
-    'personCategoryOptions',
-    getPersonNatureAndCategoryAndPositionSelectAPI,
-    { category: 0 },
-)
-
-// 根据实时下拉数据构建搜索表单配置
-const formColumns = computed(() =>
-    buildFormColumns(positionOptions.value, natureOptions.value, categoryOptions.value),
-)
-
-// 1. 定义初始表单数据函数（优雅重置）——字段与表单保持同步
 const getInitFormData = () => ({
-    inspectionStationId: null, // 人员所属
+    orgId: null, // 人员所属部门id
-    name: '', // 姓名
+    orgName: '', // 人员所属部门名称
+    workerName: '', // 姓名
     sex: 1, // 性别：1 男，0 女（与表单单选保持一致）
     phone: '', // 电话
-    positionId: null, // 岗位
-    personnelNatureId: null, // 人员性质
-    personnelClassificationId: null, // 人员分类
-    longTermSecondment: 0, // 是否长期借调
 })
 
 const addAndEditForm = ref(getInitFormData())
@@ -214,25 +165,13 @@ const actionColumns = [
             dialogConfig.outerVisible = true
             // 2. 使用 nextTick 确保弹框和子组件挂载后再回显数据
             nextTick(() => {
-                const {
+                const { orgId, orgName, workerName, phone, sex } = row
-                    inspectionStationId,
-                    name,
-                    phone,
-                    sex,
-                    positionId,
-                    personnelNatureId,
-                    personnelClassificationId,
-                    longTermSecondment,
-                } = row
                 Object.assign(addAndEditForm.value, {
-                    inspectionStationId: inspectionStationId + '',
+                    orgId: orgId || null,
-                    name,
+                    orgName: orgName || '',
-                    phone: CryptoUtil.decrypt(phone),
+                    workerName: workerName || '',
-                    sex: sex * 1,
+                    phone: phone ? CryptoUtil.decrypt(phone) : '',
-                    positionId: positionId + '',
+                    sex: sex !== undefined ? sex * 1 : 1,
-                    personnelNatureId: personnelNatureId + '',
-                    personnelClassificationId: personnelClassificationId + '',
-                    longTermSecondment,
                 })
             })
         },