优化员工花名册

src/api/arcb/salary/station/index.ts

@@ -3,9 +3,11 @@ import request from '@/config/axios'
 // 岗位配置 VO
 export interface StationVO {
   id: number // 唯一标识符
+  channelHierarchy: string, //通道层级
   stationCode: string // 岗位代码
   stationName: string // 岗位名称
   professionalSequence: string // 岗位序列
+  accordingToQls: string // 比照区联社
 }
 
 // 岗位配置 API

src/views/arcb/salary/employee/EmployeeForm.vue

@@ -17,19 +17,23 @@
         <el-input v-model="formData.empNo" placeholder="请输入工号"/>
       </el-form-item>
       <el-form-item label="岗位" prop="station">
-        <el-select
+        <el-select v-model="formData.station" placeholder="请选择岗位" style="width: 240px">
-          v-model="formData.station"
+          <el-option-group
-          placeholder="请选择岗位"
+            v-for="group in stationOptions"
-          size="large"
+            :key="group.label"
-          style="width: 240px"
+            :label="group.label"
-          clearable
+          >
-        >
+            <el-option
-          <el-option
+              v-for="item in group.options"
-            v-for="item in stationOptions"
+              :key="item.value"
-            :key="item.value"
+              :value="item.value"
-            :label="item.label"
+            >
-            :value="item.value"
+              <span class="custom-option">
-          />
+                <span class="label">{{ item.label }}({{ getSequenceLabel(item.key) }})</span>
+                <span class="according-to-qls">比照区联社: {{ item.accordingToQls }}</span>
+              </span>
+            </el-option>
+          </el-option-group>
         </el-select>
       </el-form-item>
       <el-form-item label="银行卡号" prop="bankNo">
@@ -173,16 +177,60 @@ const open = async (type: string, id?: number) => {
 defineExpose({open}) // 提供 open 方法，用于打开弹窗
 
 // 获取岗位下拉框
+// const getStationOptions = async () => {
+//   stationOptions.value = (await StationApi.getStationPage({
+//     pageNo: 1,
+//     pageSize: 100
+//   })).list.map((item: StationVO) => {
+//     return {
+//       label: item.stationName,
+//       value: item.stationCode
+//     }
+//   })
+// }
 const getStationOptions = async () => {
-  stationOptions.value = (await StationApi.getStationPage({
+  const response = await StationApi.getStationPage({
     pageNo: 1,
     pageSize: 100
-  })).list.map((item: StationVO) => {
+  });
-    return {
+  const stationList = response.list;
-      label: item.stationName,
+
-      value: item.stationCode
+  const groupedStations = stationList.reduce((acc, item: StationVO) => {
+    const group = item.channelHierarchy;
+    if (!acc[group]) {
+      acc[group] = [];
     }
-  })
+    acc[group].push({
+      label: item.stationName,
+      value: item.stationCode,
+      key: item.professionalSequence,
+      accordingToQls: item.accordingToQls
+    });
+    return acc;
+  }, {} as Record<string, { label: string, value: string, key: string, accordingToQls: string }[]>);
+
+  stationOptions.value = Object.keys(groupedStations).map(group => ({
+    label: `通道层级: ${group}`,
+    options: groupedStations[group].map(option => ({
+      ...option,
+      key: option.key,
+      accordingToQls: option.accordingToQls
+    }))
+  }));
+}
+
+/** 根据 professionalSequence 获取序列标签 */
+const getSequenceLabel = (sequence: string): string => {
+  switch (sequence) {
+    case '0':
+      return '管理序列';
+    case '1':
+      return '专业序列';
+    case '2':
+      return '非领导职务';
+    default:
+      return '未知序列';
+  }
 }
 
 const getOrgNo = async () => {
@@ -238,3 +286,21 @@ const resetForm = () => {
   formRef.value?.resetFields()
 }
 </script>
+<style scoped>.custom-option {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.label {
+  white-space: normal;
+  word-break: break-all;
+  flex: 1;
+}
+
+.according-to-qls {
+  margin-left: auto;
+  text-align: right;
+}
+</style>

src/views/arcb/salary/employee/index.vue

@@ -27,19 +27,23 @@
         />
       </el-form-item>
       <el-form-item label="岗位" prop="station">
-        <el-select
+        <el-select v-model="queryParams.station" placeholder="请选择岗位" style="width: 240px">
-          v-model="queryParams.station"
+          <el-option-group
-          placeholder="请选择岗位"
+            v-for="group in stationOptions"
-          size="large"
+            :key="group.label"
-          style="width: 240px"
+            :label="group.label"
-          clearable
+          >
-        >
+            <el-option
-          <el-option
+              v-for="item in group.options"
-            v-for="item in stationOptions"
+              :key="item.value"
-            :key="item.value"
+              :value="item.value"
-            :label="item.label"
+            >
-            :value="item.value"
+              <span class="custom-option">
-          />
+                <span class="label">{{ item.label }}({{ getSequenceLabel(item.key) }})</span>
+                <span class="according-to-qls">比照区联社: {{ item.accordingToQls }}</span>
+              </span>
+            </el-option>
+          </el-option-group>
         </el-select>
       </el-form-item>
       <el-form-item label="所属机构" prop="orgNo">
@@ -132,11 +136,13 @@
       <el-table-column label="岗位" align="center" prop="station">
         <template #default="scope">
           <el-tag
-            v-for="item in stationOptions.filter(option => option.value === scope.row.station)"
+            v-for="item in stationOptions
+              .flatMap(group => group.options)
+              .filter(option => option.value === scope.row.station)"
             :key="item.value"
             :type="item.value === scope.row.station ? 'primary' : 'info'"
           >
-            {{ item.label }}
+            {{ item.label }}({{ getSequenceLabel(item.key) }})(比照区联社:{{item.accordingToQls}})
           </el-tag>
         </template>
       </el-table-column>
@@ -241,18 +247,68 @@ const getList = async () => {
   }
 }
 
+// const getStationOptions = async () => {
+//   stationOptions.value = (await StationApi.getStationPage({
+//     pageNo: 1,
+//     pageSize: 100
+//   })).list.map((item: StationVO) => {
+//     return {
+//       label: item.stationName,
+//       value: item.stationCode
+//     }
+//   })
+// }
+
 const getStationOptions = async () => {
-  stationOptions.value = (await StationApi.getStationPage({
+  const response = await StationApi.getStationPage({
     pageNo: 1,
     pageSize: 100
-  })).list.map((item: StationVO) => {
+  });
-    return {
+  const stationList = response.list;
-      label: item.stationName,
+
-      value: item.stationCode
+  const groupedStations = stationList.reduce((acc, item: StationVO) => {
+    const group = item.channelHierarchy;
+    if (!acc[group]) {
+      acc[group] = [];
     }
-  })
+    acc[group].push({
+      label: item.stationName,
+      value: item.stationCode,
+      key: item.professionalSequence,
+      accordingToQls: item.accordingToQls
+    });
+    return acc;
+  }, {} as Record<string, { label: string, value: string, key: string, accordingToQls: string }[]>);
+
+  stationOptions.value = Object.keys(groupedStations).map(group => ({
+    label: `通道层级: ${group}`,
+    options: groupedStations[group].map(option => ({
+      ...option,
+      key: option.key,
+      accordingToQls: option.accordingToQls
+    }))
+  }));
 }
 
+/** 根据 professionalSequence 获取序列标签 */
+const getSequenceLabel = (sequence: string): string => {
+  switch (sequence) {
+    case '0':
+      return '管理序列';
+    case '1':
+      return '专业序列';
+    case '2':
+      return '非领导职务';
+    default:
+      return '未知序列';
+  }
+}
+// const getSequenceLabel = (sequence: string): string => {
+//   const dictOptions = getStrDictOptions(DICT_TYPE.ARCB_POSITION_CATEGORY);
+//   const dictOption = dictOptions.find(option => option.value === sequence);
+//   return dictOption ? dictOption.label : '未知序列';
+// }
+
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
@@ -310,3 +366,21 @@ onMounted(() => {
   getList()
 })
 </script>
+<style scoped>.custom-option {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.label {
+  white-space: normal;
+  word-break: break-all;
+  flex: 1;
+}
+
+.according-to-qls {
+  margin-left: auto;
+  text-align: right;
+}
+</style>

src/views/arcb/salary/station/StationForm.vue

@@ -7,6 +7,9 @@
       label-width="100px"
       v-loading="formLoading"
     >
+      <el-form-item label="通道层级" prop="channelHierarchy">
+        <el-input v-model="formData.channelHierarchy" placeholder="请输入通道层级" />
+      </el-form-item>
       <el-form-item label="岗位代码" prop="stationCode">
         <el-input v-model="formData.stationCode" placeholder="请输入岗位代码" />
       </el-form-item>
@@ -23,6 +26,9 @@
           />
         </el-select>
       </el-form-item>
+      <el-form-item label="比照区联社" prop="accordingToQls">
+        <el-input v-model="formData.accordingToQls" placeholder="请输入比照区联社" />
+      </el-form-item>
     </el-form>
     <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
@@ -46,11 +52,16 @@ const formLoading = ref(false) // 表单的加载中：1）修改时的数据加
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
   id: undefined,
+  channelHierarchy: undefined,
   stationCode: undefined,
   stationName: undefined,
   professionalSequence: undefined,
+  accordingToQls: undefined
 })
 const formRules = reactive({
+  channelHierarchy: [
+    { required: true, message: '通道层级不能为空', trigger: 'blur' }
+  ],
   stationCode: [
     { required: true, message: '岗位代码不能为空', trigger: 'blur' }
   ],
@@ -59,6 +70,9 @@ const formRules = reactive({
   ],
   professionalSequence: [
     { required: true, message: '岗位序列不能为空', trigger: 'blur' },
+  ],
+  accordingToQls: [
+    { required: true, message: '比照区联社不能为空', trigger: 'blur' }
   ]
 })
 const formRef = ref() // 表单 Ref
@@ -110,9 +124,11 @@ const submitForm = async () => {
 const resetForm = () => {
   formData.value = {
     id: undefined,
+    channelHierarchy: undefined,
     stationCode: undefined,
     stationName: undefined,
     professionalSequence: undefined,
+    accordingToQls: undefined
   }
   formRef.value?.resetFields()
 }

src/views/arcb/salary/station/index.vue

@@ -93,6 +93,7 @@
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
       <!--      <el-table-column label="通道层级" align="center" prop="id" />-->
       <el-table-column label="岗位代码" align="center" prop="stationCode"/>
+      <el-table-column label="通道层级" align="center" prop="channelHierarchy"/>
       <el-table-column label="岗位名称" align="center" prop="stationName"/>
       <el-table-column label="岗位序列" align="center" prop="professionalSequence">
         <template #default="scope">
@@ -100,6 +101,7 @@
                     :value="scope.row.professionalSequence"/>
         </template>
       </el-table-column>
+      <el-table-column label="比照区联社" align="center" prop="accordingToQls"/>
       <el-table-column
         label="创建时间"
         align="center"
@@ -160,9 +162,11 @@ const total = ref(0) // 列表的总页数
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
+  channelHierarchy: undefined,
   stationCode: undefined,
   stationName: undefined,
   professionalSequence: undefined,
+  accordingToQls: undefined,
   createTime: [],
 })
 const queryFormRef = ref() // 搜索的表单