人员管理页面优化

src/components/ComSearchForm/FormItem/ItemInput.vue

@@ -37,7 +37,7 @@ const props = defineProps({
     },
     style: {
         type: Object,
-        default: () => ({ width: '200px' }),
+        default: () => ({ width: '180px' }),
     },
 })
 

src/components/ComSearchForm/FormItem/ItemIpt.vue

@@ -1 +0,0 @@
-<!-- 已废弃，请使用 ItemInput.vue -->

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>

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' }],

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,
+// 注意：这里不直接发请求，只依赖调用方传入的 options，避免在模块顶层使用组合式 API
-        outerTitle: '新增人员',
+export const buildFormColumns = (
-        outerWidth: '640px', // 根据图片缩小宽度更美观
+    positionOptions = [],
-        minHeight: '400px',
+    natureOptions = [],
-        maxHeight: '80vh',
+    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,
 }

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, // 人员所属