优化员工花名册

pull/653/head
hky 2025-01-03 19:31:42 +08:00
parent 635a7891db
commit 697608b5bb
5 changed files with 246 additions and 84 deletions

View File

@ -1,42 +1,44 @@
import request from '@/config/axios'
// 岗位配置 VO
export interface StationVO {
id: number // 唯一标识符
stationCode: string // 岗位代码
stationName: string // 岗位名称
professionalSequence: string // 岗位序列
}
// 岗位配置 API
export const StationApi = {
// 查询岗位配置分页
getStationPage: async (params: any) => {
return await request.get({ url: `/salary/station/page`, params })
},
// 查询岗位配置详情
getStation: async (id: number) => {
return await request.get({ url: `/salary/station/get?id=` + id })
},
// 新增岗位配置
createStation: async (data: StationVO) => {
return await request.post({ url: `/salary/station/create`, data })
},
// 修改岗位配置
updateStation: async (data: StationVO) => {
return await request.put({ url: `/salary/station/update`, data })
},
// 删除岗位配置
deleteStation: async (id: number) => {
return await request.delete({ url: `/salary/station/delete?id=` + id })
},
// 导出岗位配置 Excel
exportStation: async (params) => {
return await request.download({ url: `/salary/station/export-excel`, params })
},
}
import request from '@/config/axios'
// 岗位配置 VO
export interface StationVO {
id: number // 唯一标识符
channelHierarchy: string, //通道层级
stationCode: string // 岗位代码
stationName: string // 岗位名称
professionalSequence: string // 岗位序列
accordingToQls: string // 比照区联社
}
// 岗位配置 API
export const StationApi = {
// 查询岗位配置分页
getStationPage: async (params: any) => {
return await request.get({ url: `/salary/station/page`, params })
},
// 查询岗位配置详情
getStation: async (id: number) => {
return await request.get({ url: `/salary/station/get?id=` + id })
},
// 新增岗位配置
createStation: async (data: StationVO) => {
return await request.post({ url: `/salary/station/create`, data })
},
// 修改岗位配置
updateStation: async (data: StationVO) => {
return await request.put({ url: `/salary/station/update`, data })
},
// 删除岗位配置
deleteStation: async (id: number) => {
return await request.delete({ url: `/salary/station/delete?id=` + id })
},
// 导出岗位配置 Excel
exportStation: async (params) => {
return await request.download({ url: `/salary/station/export-excel`, params })
},
}

View File

@ -17,19 +17,23 @@
<el-input v-model="formData.empNo" placeholder="请输入工号"/>
</el-form-item>
<el-form-item label="岗位" prop="station">
<el-select
v-model="formData.station"
placeholder="请选择岗位"
size="large"
style="width: 240px"
clearable
>
<el-option
v-for="item in stationOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-select v-model="formData.station" placeholder="请选择岗位" style="width: 240px">
<el-option-group
v-for="group in stationOptions"
:key="group.label"
:label="group.label"
>
<el-option
v-for="item in group.options"
:key="item.value"
: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 {
label: item.stationName,
value: item.stationCode
});
const stationList = response.list;
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 () => {
@ -237,4 +285,22 @@ const resetForm = () => {
}
formRef.value?.resetFields()
}
</script>
</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>

View File

@ -27,19 +27,23 @@
/>
</el-form-item>
<el-form-item label="岗位" prop="station">
<el-select
v-model="queryParams.station"
placeholder="请选择岗位"
size="large"
style="width: 240px"
clearable
>
<el-option
v-for="item in stationOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-select v-model="queryParams.station" placeholder="请选择岗位" style="width: 240px">
<el-option-group
v-for="group in stationOptions"
:key="group.label"
:label="group.label"
>
<el-option
v-for="item in group.options"
:key="item.value"
: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 {
label: item.stationName,
value: item.stationCode
});
const stationList = response.list;
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
@ -309,4 +365,22 @@ const handleExport = async () => {
onMounted(() => {
getList()
})
</script>
</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>

View File

@ -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()
}

View File

@ -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() //