人员管理列表和新增接口调试
This commit is contained in:
BianLzhaoMin
parent
4d2b6a245c
commit
bd1faac676
|
|
@ -1,24 +1,16 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 公共下拉选数据 - 获取人员所属
|
||||
export function getInspectionStationSelectAPI(query = { category: 0 }) {
|
||||
export function getInspectionStationSelectAPI(data) {
|
||||
return request({
|
||||
url: '/personnel/getInspectionStationSelect',
|
||||
method: 'GET',
|
||||
params: query,
|
||||
})
|
||||
}
|
||||
// 公共下拉选数据 - 获取岗位
|
||||
export function getPositionSelectAPI(query = { category: 0 }) {
|
||||
return request({
|
||||
url: '/personnel/getInspectionStationSelect',
|
||||
method: 'GET',
|
||||
params: query,
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
|
||||
// 公共下拉选数据 - 获取人员性质和人员分类
|
||||
export function getPersonNatureAndCategorySelectAPI(data) {
|
||||
// 公共下拉选数据 - 获取人员性质、人员分类、岗位
|
||||
export function getPersonNatureAndCategoryAndPositionSelectAPI(data) {
|
||||
return request({
|
||||
url: '/personnel/getPersonnelClassificationSelect',
|
||||
method: 'GET',
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
:show-action="true"
|
||||
:action-columns="actionColumns"
|
||||
:default-query-params="{
|
||||
category: 1, // 0：人员分类 1：人员性质 2：岗位列表
|
||||
category: 0, // 0：人员分类 1：人员性质 2：岗位列表
|
||||
}"
|
||||
>
|
||||
<!-- 工具栏插槽 -->
|
||||
|
|
@ -83,7 +83,7 @@ const editId = ref(null)
|
|||
const getInitFormData = () => ({
|
||||
personnelClassificationName: '',
|
||||
remark: '',
|
||||
category: 1,
|
||||
category: 0,
|
||||
})
|
||||
|
||||
const addAndEditForm = ref(getInitFormData())
|
||||
|
|
|
|||
|
|
@ -7,91 +7,95 @@
|
|||
:rules="rules"
|
||||
class="add-and-edit-form"
|
||||
>
|
||||
<el-form-item label="人员所属" prop="orgId">
|
||||
<el-form-item label="人员所属" prop="inspectionStationId">
|
||||
<el-select
|
||||
v-model="formData.orgId"
|
||||
placeholder="请选择人员所属"
|
||||
filter
|
||||
clearable
|
||||
style="width: 100%"
|
||||
v-model="formData.inspectionStationId"
|
||||
placeholder="请选择人员所属"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in orgOptions"
|
||||
:key="item.inspectionStationId"
|
||||
:label="item.inspectionStationName"
|
||||
:value="item.inspectionStationId"
|
||||
v-for="item in inspectionStationOptions"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="姓名" prop="personName">
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input
|
||||
v-model.trim="formData.personName"
|
||||
placeholder="请输入姓名"
|
||||
clearable
|
||||
maxlength="20"
|
||||
placeholder="请输入姓名"
|
||||
v-model.trim="formData.name"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="性别" prop="gender">
|
||||
<el-radio-group v-model="formData.gender">
|
||||
<el-radio-button :label="0">男性 ♂</el-radio-button>
|
||||
<el-radio-button :label="1">女性 ♀</el-radio-button>
|
||||
<el-form-item label="性别" prop="sex">
|
||||
<el-radio-group v-model="formData.sex">
|
||||
<el-radio-button :label="1">男性 ♂</el-radio-button>
|
||||
<el-radio-button :label="0">女性 ♀</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电话" prop="phone">
|
||||
<el-input
|
||||
v-model.trim="formData.phone"
|
||||
placeholder="请输入电话"
|
||||
clearable
|
||||
maxlength="11"
|
||||
placeholder="请输入电话"
|
||||
v-model.trim="formData.phone"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="岗位" prop="positionId">
|
||||
<el-select
|
||||
v-model="formData.positionId"
|
||||
placeholder="请选择岗位"
|
||||
clearable
|
||||
filter
|
||||
style="width: 100%"
|
||||
placeholder="请选择岗位"
|
||||
v-model="formData.positionId"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in positionOptions"
|
||||
:key="item.personnelClassificationId"
|
||||
:label="item.personnelClassificationName"
|
||||
:value="item.personnelClassificationId"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="人员性质" prop="natureId">
|
||||
<el-form-item label="人员性质" prop="personnelNatureId">
|
||||
<el-select
|
||||
v-model="formData.natureId"
|
||||
placeholder="请选择人员性质"
|
||||
clearable
|
||||
filter
|
||||
style="width: 100%"
|
||||
v-model="formData.personnelNatureId"
|
||||
placeholder="请选择人员性质"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in natureOptions"
|
||||
:key="item.personnelClassificationId"
|
||||
:label="item.personnelClassificationName"
|
||||
:value="item.personnelClassificationId"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="人员分类" prop="categoryId">
|
||||
<el-form-item label="人员分类" prop="personnelClassificationId">
|
||||
<el-select
|
||||
v-model="formData.categoryId"
|
||||
placeholder="请选择人员分类"
|
||||
clearable
|
||||
filter
|
||||
style="width: 100%"
|
||||
placeholder="请选择人员分类"
|
||||
v-model="formData.personnelClassificationId"
|
||||
>
|
||||
<el-option
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.value"
|
||||
v-for="item in categoryOptions"
|
||||
:key="item.personnelClassificationId"
|
||||
:label="item.personnelClassificationName"
|
||||
:value="item.personnelClassificationId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
|
@ -103,8 +107,7 @@ import { ref } from 'vue'
|
|||
import { useOptions } from '@/hooks/useOptions'
|
||||
import {
|
||||
getInspectionStationSelectAPI,
|
||||
getPositionSelectAPI,
|
||||
getPersonNatureAndCategorySelectAPI,
|
||||
getPersonNatureAndCategoryAndPositionSelectAPI,
|
||||
} from '@/api/common.js'
|
||||
|
||||
const props = defineProps({
|
||||
|
|
@ -121,15 +124,22 @@ const formRef = ref(null)
|
|||
const { options: inspectionStationOptions } = useOptions(
|
||||
'inspectionStationOptions',
|
||||
getInspectionStationSelectAPI,
|
||||
{
|
||||
category: 0,
|
||||
},
|
||||
)
|
||||
// 岗位
|
||||
// const { options: positionOptions } = useOptions('positionOptions', getPositionSelectAPI, {
|
||||
// category: 2,
|
||||
// })
|
||||
const { options: positionOptions } = useOptions(
|
||||
'positionOptions',
|
||||
getPersonNatureAndCategoryAndPositionSelectAPI,
|
||||
{
|
||||
category: 2,
|
||||
},
|
||||
)
|
||||
// 人员性质
|
||||
const { options: natureOptions } = useOptions(
|
||||
'personNatureOptions',
|
||||
getPersonNatureAndCategorySelectAPI,
|
||||
getPersonNatureAndCategoryAndPositionSelectAPI,
|
||||
{
|
||||
category: 1,
|
||||
},
|
||||
|
|
@ -137,19 +147,19 @@ const { options: natureOptions } = useOptions(
|
|||
// 人员分类
|
||||
const { options: categoryOptions } = useOptions(
|
||||
'personCategoryOptions',
|
||||
getPersonNatureAndCategorySelectAPI,
|
||||
getPersonNatureAndCategoryAndPositionSelectAPI,
|
||||
{
|
||||
category: 0,
|
||||
},
|
||||
)
|
||||
|
||||
const rules = {
|
||||
orgId: [{ required: true, message: '请选择人员所属', trigger: 'change' }],
|
||||
personName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
|
||||
gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
|
||||
inspectionStationId: [{ required: true, message: '请选择人员所属', trigger: 'change' }],
|
||||
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
|
||||
sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
|
||||
positionId: [{ required: true, message: '请选择岗位', trigger: 'change' }],
|
||||
natureId: [{ required: true, message: '请选择人员性质', trigger: 'change' }],
|
||||
categoryId: [{ required: true, message: '请选择人员分类', trigger: 'change' }],
|
||||
personnelNatureId: [{ required: true, message: '请选择人员性质', trigger: 'change' }],
|
||||
personnelClassificationId: [{ required: true, message: '请选择人员分类', trigger: 'change' }],
|
||||
}
|
||||
|
||||
// 暴露校验方法和重置方法给父组件
|
||||
|
|
|
|||
|
|
@ -9,21 +9,17 @@ export default {
|
|||
],
|
||||
tableColumns: [
|
||||
{
|
||||
prop: 'orgName',
|
||||
prop: 'inspectionStationName',
|
||||
label: '人员所属',
|
||||
},
|
||||
{
|
||||
prop: 'personName',
|
||||
prop: 'name',
|
||||
label: '姓名',
|
||||
},
|
||||
{
|
||||
prop: 'gender',
|
||||
prop: 'sex',
|
||||
label: '性别',
|
||||
type: 'dict', // 假设有字典处理
|
||||
dictData: [
|
||||
{ label: '男', value: 0 },
|
||||
{ label: '女', value: 1 },
|
||||
],
|
||||
formatter: (row) => (row.sex == 1 ? '男' : '女'),
|
||||
},
|
||||
{
|
||||
prop: 'phone',
|
||||
|
|
@ -34,13 +30,18 @@ export default {
|
|||
label: '岗位',
|
||||
},
|
||||
{
|
||||
prop: 'natureName',
|
||||
prop: 'personnelNatureName',
|
||||
label: '人员性质',
|
||||
},
|
||||
{
|
||||
prop: 'categoryName',
|
||||
prop: 'personnelClassificationName',
|
||||
label: '人员分类',
|
||||
},
|
||||
{
|
||||
prop: 'longTermSecondment',
|
||||
label: '是否长期借调',
|
||||
slot: 'longTermSecondment',
|
||||
},
|
||||
],
|
||||
|
||||
dialogConfig: reactive({
|
||||
|
|
|
|||
|
|
@ -13,6 +13,14 @@
|
|||
<template #toolbar>
|
||||
<ComButton type="primary" icon="Plus" @click="onHandleAdd">新建人员</ComButton>
|
||||
</template>
|
||||
<template #longTermSecondment="{ row }">
|
||||
<el-switch
|
||||
active-value="1"
|
||||
inactive-value="0"
|
||||
v-model="row.longTermSecondment"
|
||||
@change="onHandleLongTermSecondmentChange(row)"
|
||||
/>
|
||||
</template>
|
||||
</ComTable>
|
||||
|
||||
<ComDialog :dialog-config="dialogConfig" @closeDialogOuter="onCloseDialogOuter">
|
||||
|
|
@ -31,20 +39,18 @@
|
|||
|
||||
<script setup name="Person">
|
||||
import { ref, nextTick, getCurrentInstance } from 'vue'
|
||||
// TODO: 替换为实际的人员管理 API
|
||||
// import { listPersonAPI, addPersonAPI, updatePersonAPI, delPersonAPI } from '@/api/personManage'
|
||||
import {
|
||||
listPersonAPI,
|
||||
addPersonAPI,
|
||||
updatePersonAPI,
|
||||
delPersonAPI,
|
||||
} from '@/api/personManage/person.js'
|
||||
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'
|
||||
|
||||
// 临时占位 API，实际开发时请替换
|
||||
const listPersonAPI = () => Promise.resolve({ rows: [], total: 0 })
|
||||
const addPersonAPI = () => Promise.resolve({ code: 200 })
|
||||
const updatePersonAPI = () => Promise.resolve({ code: 200 })
|
||||
const delPersonAPI = () => Promise.resolve({ code: 200 })
|
||||
|
||||
const { formColumns, tableColumns, dialogConfig } = config
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
|
|
@ -52,15 +58,16 @@ const formRef = ref(null)
|
|||
const comTableRef = ref(null)
|
||||
const editId = ref(null)
|
||||
|
||||
// 1. 定义初始表单数据函数（优雅重置）
|
||||
// 1. 定义初始表单数据函数（优雅重置）——字段与表单保持同步
|
||||
const getInitFormData = () => ({
|
||||
orgId: null,
|
||||
personName: '',
|
||||
gender: 0,
|
||||
phone: '',
|
||||
positionId: null,
|
||||
natureId: null,
|
||||
categoryId: null,
|
||||
inspectionStationId: null, // 人员所属
|
||||
name: '', // 姓名
|
||||
sex: 1, // 性别：1 男，0 女（与表单单选保持一致）
|
||||
phone: '', // 电话
|
||||
positionId: null, // 岗位
|
||||
personnelNatureId: null, // 人员性质
|
||||
personnelClassificationId: null, // 人员分类
|
||||
longTermSecondment: 0, // 是否长期借调
|
||||
})
|
||||
|
||||
const addAndEditForm = ref(getInitFormData())
|
||||
|
|
@ -137,4 +144,9 @@ const onCloseDialogOuter = (visible) => {
|
|||
formRef.value?.resetFields()
|
||||
}
|
||||
}
|
||||
|
||||
// 是否长期借调
|
||||
const onHandleLongTermSecondmentChange = (row) => {
|
||||
console.log(row)
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue