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