人员管理页面优化

2025-12-18 16:08:12 +08:00 · 2025-12-18 16:08:12 +08:00 · 61344a1943
parent bd1faac676
commit 61344a1943
6 changed files with 179 additions and 97 deletions
--- a/src/components/ComSearchForm/FormItem/ItemInput.vue
+++ b/src/components/ComSearchForm/FormItem/ItemInput.vue
@ -37,7 +37,7 @@ const props = defineProps({
    },
    style: {
        type: Object,
-        default: () => ({ width: '200px' }),
+        default: () => ({ width: '180px' }),
    },
 })

--- a/src/components/ComSearchForm/FormItem/ItemIpt.vue
+++ b/src/components/ComSearchForm/FormItem/ItemIpt.vue
@ -1 +0,0 @@
-<!-- 已废弃，请使用 ItemInput.vue -->
--- a/src/components/ComSearchForm/index.vue
+++ b/src/components/ComSearchForm/index.vue
@ -49,7 +49,7 @@ const props = defineProps({
    // 表单标签宽度
    labelWidth: {
        type: String,
-        default: '100px',
+        default: 'auto',
    },
    // 默认表单数据
    defaultFormData: {
@ -96,7 +96,7 @@ const getComponentProps = (item) => {
        clearable: item.clearable !== false,
        disabled: item.disabled || false,
        style: item.style || {
-            width: '240px',
+            width: '200px',
        },
    }

@ -166,4 +166,8 @@ watch(
 .search-form-card :deep(.el-card__body) {
    padding: 18px 20px 0;
 }
+
+.el-form--inline .el-form-item {
+    margin-right: 10px;
+}
 </style>
--- a/src/views/personManage/Person/addAndEditForm.vue
+++ b/src/views/personManage/Person/addAndEditForm.vue
@ -28,6 +28,7 @@
            <el-input
                clearable
                maxlength="20"
+                show-word-limit
                placeholder="请输入姓名"
                v-model.trim="formData.name"
            />
@ -44,6 +45,7 @@
            <el-input
                clearable
                maxlength="11"
+                show-word-limit
                placeholder="请输入电话"
                v-model.trim="formData.phone"
            />
@ -104,59 +106,43 @@

 <script setup name="AddAndEditForm">
 import { ref } from 'vue'
-import { useOptions } from '@/hooks/useOptions'
-import {
-    getInspectionStationSelectAPI,
-    getPersonNatureAndCategoryAndPositionSelectAPI,
-} from '@/api/common.js'

 const props = defineProps({
    formData: {
        type: Object,
        default: () => ({}),
    },
+    inspectionStationOptions: {
+        type: Array,
+        default: () => [],
+    },
+    positionOptions: {
+        type: Array,
+        default: () => [],
+    },
+    natureOptions: {
+        type: Array,
+        default: () => [],
+    },
+    categoryOptions: {
+        type: Array,
+        default: () => [],
+    },
 })

 const formRef = ref(null)

-// 使用 Hook 统一管理下拉数据，自带缓存和刷新机制
-// 人员所属
-const { options: inspectionStationOptions } = useOptions(
-    'inspectionStationOptions',
-    getInspectionStationSelectAPI,
-    {
-        category: 0,
-    },
-)
-// 岗位
-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 rules = {
    inspectionStationId: [{ required: true, message: '请选择人员所属', trigger: 'change' }],
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
+    phone: [
+        {
+            pattern: /^1[3-9]\d{9}$/,
+            message: '请输入正确的手机号码',
+            trigger: 'blur',
+        },
+    ],
    positionId: [{ required: true, message: '请选择岗位', trigger: 'change' }],
    personnelNatureId: [{ required: true, message: '请选择人员性质', trigger: 'change' }],
    personnelClassificationId: [{ required: true, message: '请选择人员分类', trigger: 'change' }],
--- a/src/views/personManage/Person/config.js
+++ b/src/views/personManage/Person/config.js
@ -1,54 +1,108 @@
 import { reactive } from 'vue'
-export default {
-    formColumns: [
-        {
-            type: 'input',
-            prop: 'personName',
-            placeholder: '请输入姓名',
-        },
-    ],
-    tableColumns: [
-        {
-            prop: 'inspectionStationName',
-            label: '人员所属',
-        },
-        {
-            prop: 'name',
-            label: '姓名',
-        },
-        {
-            prop: 'sex',
-            label: '性别',
-            formatter: (row) => (row.sex == 1 ? '男' : '女'),
-        },
-        {
-            prop: 'phone',
-            label: '电话',
-        },
-        {
-            prop: 'positionName',
-            label: '岗位',
-        },
-        {
-            prop: 'personnelNatureName',
-            label: '人员性质',
-        },
-        {
-            prop: 'personnelClassificationName',
-            label: '人员分类',
-        },
-        {
-            prop: 'longTermSecondment',
-            label: '是否长期借调',
-            slot: 'longTermSecondment',
-        },
-    ],

-    dialogConfig: reactive({
-        outerVisible: false,
-        outerTitle: '新增人员',
-        outerWidth: '640px', // 根据图片缩小宽度更美观
-        minHeight: '400px',
-        maxHeight: '80vh',
-    }),
+// 根据下拉数据构建搜索表单配置
+// 注意：这里不直接发请求，只依赖调用方传入的 options，避免在模块顶层使用组合式 API
+export const buildFormColumns = (
+    positionOptions = [],
+    natureOptions = [],
+    categoryOptions = [],
+) => [
+    {
+        type: 'input',
+        prop: 'personName',
+        placeholder: '请输入姓名',
+    },
+    {
+        type: 'select',
+        prop: 'sex',
+        placeholder: '请选择性别',
+        options: [
+            {
+                label: '男',
+                value: 1,
+            },
+            {
+                label: '女',
+                value: 0,
+            },
+        ],
+    },
+    {
+        type: 'select',
+        prop: 'positionId',
+        placeholder: '请选择岗位',
+        options: positionOptions.map((item) => ({
+            label: item.value,
+            value: item.id,
+        })),
+    },
+    {
+        type: 'select',
+        prop: 'personnelNatureId',
+        placeholder: '请选择人员性质',
+        options: natureOptions.map((item) => ({
+            label: item.value,
+            value: item.id,
+        })),
+    },
+    {
+        type: 'select',
+        prop: 'personnelClassificationId',
+        placeholder: '请选择人员分类',
+        options: categoryOptions.map((item) => ({
+            label: item.value,
+            value: item.id,
+        })),
+    },
+]
+
+export const tableColumns = [
+    {
+        prop: 'inspectionStationName',
+        label: '人员所属',
+    },
+    {
+        prop: 'name',
+        label: '姓名',
+    },
+    {
+        prop: 'sex',
+        label: '性别',
+        formatter: (row) => (row.sex == 1 ? '男' : '女'),
+    },
+    {
+        prop: 'phone',
+        label: '电话',
+    },
+    {
+        prop: 'positionName',
+        label: '岗位',
+    },
+    {
+        prop: 'personnelNatureName',
+        label: '人员性质',
+    },
+    {
+        prop: 'personnelClassificationName',
+        label: '人员分类',
+    },
+    {
+        prop: 'longTermSecondment',
+        label: '是否长期借调',
+        slot: 'longTermSecondment',
+    },
+]
+
+export const dialogConfig = reactive({
+    outerVisible: false,
+    outerTitle: '新增人员',
+    outerWidth: '640px', // 根据图片缩小宽度更美观
+    minHeight: '400px',
+    maxHeight: '80vh',
+})
+
+export default {
+    tableColumns,
+    dialogConfig,
+    buildFormColumns,
 }
--- a/src/views/personManage/Person/index.vue
+++ b/src/views/personManage/Person/index.vue
@ -26,7 +26,14 @@
        <ComDialog :dialog-config="dialogConfig" @closeDialogOuter="onCloseDialogOuter">
            <template #outerContent>
                <!-- 将表单抽离到独立组件中，保持 index.vue 简洁 -->
-                <AddAndEditForm ref="formRef" :form-data="addAndEditForm" />
+                <AddAndEditForm
+                    ref="formRef"
+                    :form-data="addAndEditForm"
+                    :inspection-station-options="inspectionStationOptions"
+                    :position-options="positionOptions"
+                    :nature-options="natureOptions"
+                    :category-options="categoryOptions"
+                />

                <el-row class="common-btn-row">
                    <ComButton plain type="info" @click="onHandleCancel">取消</ComButton>
@ -38,26 +45,58 @@
 </template>

 <script setup name="Person">
-import { ref, nextTick, getCurrentInstance } from 'vue'
+import { ref, nextTick, getCurrentInstance, computed } from 'vue'
 import {
    listPersonAPI,
    addPersonAPI,
    updatePersonAPI,
    delPersonAPI,
 } from '@/api/personManage/person.js'
+import {
+    getInspectionStationSelectAPI,
+    getPersonNatureAndCategoryAndPositionSelectAPI,
+} from '@/api/common.js'
 import config from './config'
+import { useOptions } from '@/hooks/useOptions'
 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 { formColumns, tableColumns, dialogConfig } = config
+const { tableColumns, dialogConfig, buildFormColumns } = config
 const { proxy } = getCurrentInstance()

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

+// 使用通用 Hook 获取下拉数据（带缓存和自动刷新）
+const { options: inspectionStationOptions } = useOptions(
+    'inspectionStationOptions',
+    getInspectionStationSelectAPI,
+    { category: 0 },
+)
+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, // 人员所属
				`@ -1 +0,0 @@`
				`<!-- 已废弃，请使用 ItemInput.vue -->`