mirror of https://gitee.com/xiaonuobase/snowy
552 lines
17 KiB
Vue
552 lines
17 KiB
Vue
<template>
|
|
<a-drawer
|
|
:title="formData.id ? '编辑人员' : '增加人员'"
|
|
:width="620"
|
|
:visible="visible"
|
|
:destroy-on-close="true"
|
|
:body-style="{ paddingBottom: '80px', 'padding-top': '0px' }"
|
|
:footer-style="{ textAlign: 'right' }"
|
|
@close="onClose"
|
|
>
|
|
<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
|
|
<a-tabs v-model:activeKey="activeTabsKey">
|
|
<a-tab-pane key="1" tab="基础信息" force-render>
|
|
<a-row :gutter="16">
|
|
<a-col :span="12">
|
|
<a-form-item label="账号：" name="account">
|
|
<a-input v-model:value="formData.account" placeholder="请输入账号" allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="姓名：" name="name">
|
|
<a-input v-model:value="formData.name" placeholder="请输入姓名" allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="16">
|
|
<a-col :span="12">
|
|
<a-form-item label="性别：" name="gender">
|
|
<a-radio-group v-model:value="formData.gender" :options="genderOptions"> </a-radio-group>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="昵称：" name="nickname">
|
|
<a-input v-model:value="formData.nickname" placeholder="请输入昵称" allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="16">
|
|
<a-col :span="12">
|
|
<a-form-item label="手机号：" name="phone">
|
|
<a-input v-model:value="formData.phone" placeholder="请输入手机" allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="邮箱：" name="email">
|
|
<a-input v-model:value="formData.email" placeholder="请输入邮箱" allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="16">
|
|
<a-col :span="12">
|
|
<a-form-item label="出生日期：" name="birthday">
|
|
<a-date-picker v-model:value="formData.birthday" value-format="YYYY-MM-DD" style="width: 100%" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="16">
|
|
<a-col :span="8">
|
|
<a-form-item label="选择组织：" name="orgId">
|
|
<a-tree-select
|
|
v-model:value="formData.orgId"
|
|
style="width: 100%"
|
|
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
|
placeholder="请选择组织"
|
|
allow-clear
|
|
tree-default-expand-all
|
|
:tree-data="treeData"
|
|
:tree-default-expanded-keys="treeDefaultExpandedKeys"
|
|
:field-names="{
|
|
children: 'children',
|
|
label: 'name',
|
|
value: 'id'
|
|
}"
|
|
@change="selePositionData(formData.orgId, 0)"
|
|
></a-tree-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-form-item label="选择职位：" name="positionId">
|
|
<a-select
|
|
v-model:value="formData.positionId"
|
|
:options="positionData"
|
|
:field-names="{ label: 'name', value: 'id' }"
|
|
style="width: 100%"
|
|
placeholder="请选择职位"
|
|
allow-clear
|
|
>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-form-item label="选择主管：" name="directorId">
|
|
<a-select
|
|
v-model:value="formData.directorId"
|
|
:options="directorData"
|
|
:field-names="{ label: 'name', value: 'id' }"
|
|
style="width: 100%"
|
|
placeholder="请选择主管"
|
|
allow-clear
|
|
>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="16">
|
|
<a-col :span="8">
|
|
<a-form-item label="员工编号：" name="empNo">
|
|
<a-input v-model:value="formData.empNo" placeholder="请输入员工编号" allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-form-item label="职级：" name="positionLevel">
|
|
<a-input v-model:value="formData.positionLevel" placeholder="请输入职级" allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-form-item label="入职日期：" name="entryDate">
|
|
<a-date-picker v-model:value="formData.entryDate" value-format="YYYY-MM-DD" style="width: 100%" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-form-item label="任职信息" name="positionJson">
|
|
<a-button type="primary" class="childAddButton" @click="addDomains()">
|
|
<PlusOutlined />
|
|
增加任职
|
|
</a-button>
|
|
<a-row :gutter="10" class="form-row">
|
|
<a-col :span="7" class="form-row-con"> 机构 </a-col>
|
|
<a-col :span="7" class="form-row-con"> 职位 </a-col>
|
|
<a-col :span="7" class="form-row-con"> 主管 </a-col>
|
|
<a-col :span="3" class="form-row-con"> 操作 </a-col>
|
|
</a-row>
|
|
<div v-for="(positionInfo, index) in formData.positionJson" class="form-div">
|
|
<a-row :gutter="10">
|
|
<a-col :span="7">
|
|
<a-form-item
|
|
:name="['positionJson', index, 'orgId']"
|
|
:rules="{ required: true, message: '请选择机构' }"
|
|
>
|
|
<a-tree-select
|
|
v-model:value="positionInfo.orgId"
|
|
show-search
|
|
style="width: 100%"
|
|
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
|
placeholder="请选择机构"
|
|
allow-clear
|
|
tree-default-expand-all
|
|
:tree-data="treeData"
|
|
:tree-default-expanded-keys="treeDefaultExpandedKeys"
|
|
:field-names="{ children: 'children', label: 'name', value: 'id' }"
|
|
@select="childOrgSelect(positionInfo, 0)"
|
|
></a-tree-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="7">
|
|
<a-form-item
|
|
:name="['positionJson', index, 'positionId']"
|
|
:rules="{ required: true, message: '请选择岗位' }"
|
|
>
|
|
<a-select
|
|
v-model:value="positionInfo.positionId"
|
|
:options="childPosData(positionInfo.orgId)"
|
|
:field-names="{ label: 'name', value: 'id' }"
|
|
style="width: 100%"
|
|
placeholder="请选择职位"
|
|
allow-clear
|
|
>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="7">
|
|
<a-form-item :name="['positionJson', index, 'directorId']">
|
|
<a-select
|
|
v-model:value="positionInfo.directorId"
|
|
:options="childUserData(positionInfo.orgId)"
|
|
:field-names="{ label: 'name', value: 'id' }"
|
|
style="width: 100%"
|
|
placeholder="请选择主管"
|
|
allow-clear
|
|
>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="3" style="margin-top: 4px">
|
|
<a-button size="small" type="primary" danger ghost @click="delDomains(index)">移除</a-button>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
</a-form-item>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="2" tab="更多信息" force-render>
|
|
<a-row :gutter="16">
|
|
<a-col :span="12">
|
|
<a-form-item label="民族：" name="nation">
|
|
<a-select v-model:value="formData.nation" placeholder="请选择民族" :options="nationOptions"> </a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="籍贯：" name="nativePlace">
|
|
<a-input v-model:value="formData.nativePlace" placeholder="请输入籍贯" allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="16">
|
|
<a-col :span="12">
|
|
<a-form-item label="家庭住址：" name="homeAddress">
|
|
<a-textarea
|
|
v-model:value="formData.homeAddress"
|
|
placeholder="请输入家庭住址"
|
|
:auto-size="{ minRows: 2, maxRows: 5 }"
|
|
allow-clear
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="通信地址：" name="mailingAddress">
|
|
<a-textarea
|
|
v-model:value="formData.mailingAddress"
|
|
placeholder="请输入通信地址"
|
|
:auto-size="{ minRows: 2, maxRows: 5 }"
|
|
allow-clear
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="16">
|
|
<a-col :span="12">
|
|
<a-form-item label="证件类型：" name="idCardType">
|
|
<a-select v-model:value="formData.idCardType" placeholder="请选择证件类型" :options="idcardTypeOptions">
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="证件号码：" name="idCardNumber">
|
|
<a-input v-model:value="formData.idCardNumber" placeholder="请输入证件号码" allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="16">
|
|
<a-col :span="12">
|
|
<a-form-item label="文化程度：" name="cultureLevel">
|
|
<a-select
|
|
v-model:value="formData.cultureLevel"
|
|
placeholder="请选择文化程度"
|
|
:options="cultureLevelOptions"
|
|
>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="政治面貌：" name="politicalOutlook">
|
|
<a-input v-model:value="formData.politicalOutlook" placeholder="请输入政治面貌" allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="16">
|
|
<a-col :span="12">
|
|
<a-form-item label="毕业学校：" name="college">
|
|
<a-input v-model:value="formData.college" placeholder="请输入毕业学校" allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="学历：" name="education">
|
|
<a-input v-model:value="formData.education" placeholder="请输入学历" allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row :gutter="16">
|
|
<a-col :span="12">
|
|
<a-form-item label="学制：" name="eduLength">
|
|
<a-input v-model:value="formData.eduLength" placeholder="请输入学制" allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="学位：" name="degree">
|
|
<a-input v-model:value="formData.degree" placeholder="请输入学位" allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row :gutter="16">
|
|
<a-col :span="12">
|
|
<a-form-item label="家庭电话：" name="homeTel">
|
|
<a-input v-model:value="formData.homeTel" placeholder="请输入家庭电话" allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="办公电话：" name="officeTel">
|
|
<a-input v-model:value="formData.officeTel" placeholder="请输入办公电话" allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row :gutter="16">
|
|
<a-col :span="12">
|
|
<a-form-item label="紧急联系人：" name="emergencyContact">
|
|
<a-input v-model:value="formData.emergencyContact" placeholder="请输入紧急联系人" allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="紧急联系电话：" name="emergencyPhone">
|
|
<a-input v-model:value="formData.emergencyPhone" placeholder="请输入紧急联系电话" allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row :gutter="16">
|
|
<a-col :span="12">
|
|
<a-form-item label="紧急联系人地址：" name="emergencyAddress">
|
|
<a-textarea
|
|
v-model:value="formData.emergencyAddress"
|
|
placeholder="请输入紧急联系人地址"
|
|
:auto-size="{ minRows: 2, maxRows: 5 }"
|
|
allow-clear
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</a-form>
|
|
<template #footer>
|
|
<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
|
|
<a-button type="primary" :loading="formLoading" @click="onSubmit">保存</a-button>
|
|
</template>
|
|
</a-drawer>
|
|
</template>
|
|
|
|
<script setup>
|
|
import bizUserApi from '@/api/biz/bizUserApi'
|
|
import { required } from '@/utils/formRules'
|
|
import tool from '@/utils/tool'
|
|
// 默认是关闭状态
|
|
let visible = $ref(false)
|
|
const formRef = ref()
|
|
const activeTabsKey = ref('1')
|
|
const emit = defineEmits({ successful: null })
|
|
const formLoading = ref(false)
|
|
const treeData = ref([])
|
|
const treeDefaultExpandedKeys = ref([])
|
|
// 主职职位数据
|
|
let positionData = ref([])
|
|
// 主职主管人员数据
|
|
let directorData = ref([])
|
|
|
|
// 定义一个装机构跟职位的壳
|
|
let childrenOrgPosArray = ref([])
|
|
// 表单数据
|
|
let formData = ref({})
|
|
|
|
// 打开抽屉
|
|
const onOpen = (record) => {
|
|
visible = true
|
|
formData.value = {
|
|
gender: '男',
|
|
positionJson: []
|
|
}
|
|
if (record) {
|
|
convertFormData(record)
|
|
}
|
|
// 机构选择器数据
|
|
bizUserApi.userOrgTreeSelector().then((res) => {
|
|
if (res !== null) {
|
|
treeData.value = res
|
|
// 默认展开2级
|
|
treeData.value.forEach((item) => {
|
|
// 因为0的顶级
|
|
if (item.parentId === '0') {
|
|
treeDefaultExpandedKeys.value.push(item.id)
|
|
// 取到下级ID
|
|
if (item.children) {
|
|
item.children.forEach((items) => {
|
|
treeDefaultExpandedKeys.value.push(items.id)
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
// 关闭抽屉
|
|
const onClose = () => {
|
|
treeData.value = []
|
|
treeDefaultExpandedKeys.value = []
|
|
positionData.value = []
|
|
directorData.value = []
|
|
visible = false
|
|
}
|
|
// 回显数据
|
|
const convertFormData = (record) => {
|
|
const param = {
|
|
id: record.id
|
|
}
|
|
// 查询详情
|
|
bizUserApi.userDetail(param).then((data) => {
|
|
if (data.positionJson) {
|
|
const positionJsonLocal = JSON.parse(data.positionJson).map((item) => {
|
|
childOrgSelect(item)
|
|
return item
|
|
})
|
|
// 替换表单中的格式与后端查到的
|
|
data.positionJson = positionJsonLocal
|
|
}
|
|
formData.value = Object.assign(formData.value, data)
|
|
selePositionData(formData.value.orgId)
|
|
})
|
|
}
|
|
// 默认要校验的
|
|
const formRules = {
|
|
account: [required('请输入账号')],
|
|
name: [required('请输入姓名')],
|
|
sex: [required('请选择性别')],
|
|
orgId: [required('请选择组织')],
|
|
positionId: [required('请选择岗位')]
|
|
}
|
|
// 机构选择后查询对应的职位
|
|
const selePositionData = (orgId, type) => {
|
|
if (orgId) {
|
|
const param = {
|
|
orgId: orgId
|
|
}
|
|
bizUserApi.userPositionSelector(param).then((res) => {
|
|
positionData.value = res
|
|
})
|
|
bizUserApi.userSelector(param).then((res) => {
|
|
directorData.value = res
|
|
})
|
|
// 此类型代表选择的时候重置后面的职位
|
|
if (type === 0) {
|
|
formData.value.positionId = undefined
|
|
formData.value.directorId = undefined
|
|
}
|
|
} else {
|
|
formData.value.positionId = undefined
|
|
formData.value.directorId = undefined
|
|
}
|
|
}
|
|
// 附属职位信息增行
|
|
const addDomains = () => {
|
|
if (formData.value.positionJson === null) {
|
|
formData.value.positionJson = []
|
|
}
|
|
formData.value.positionJson.push({
|
|
orgId: undefined,
|
|
positionId: undefined,
|
|
directorId: undefined
|
|
})
|
|
}
|
|
// 删减行
|
|
const delDomains = (index) => {
|
|
formData.value.positionJson.splice(index, 1)
|
|
}
|
|
// 子表行内选择机构
|
|
const childOrgSelect = async (data, type) => {
|
|
// 说明正在切换机构，我们就将他的后面的设置空
|
|
if (type === 0) {
|
|
formData.value.positionJson.filter((item) => {
|
|
if (item.orgId === data.orgId) {
|
|
item.positionId = undefined
|
|
item.directorId = undefined
|
|
}
|
|
})
|
|
}
|
|
const param = {
|
|
orgId: data.orgId
|
|
}
|
|
// 查询职位
|
|
const posList = await bizUserApi.userPositionSelector(param)
|
|
// 查询人员
|
|
const userList = await bizUserApi.userSelector(param)
|
|
const obj = {
|
|
orgId: data.orgId,
|
|
posList: posList,
|
|
userList: userList
|
|
}
|
|
childrenOrgPosArray.value.push(obj)
|
|
}
|
|
// 获取行内职位数据
|
|
const childPosData = (value) => {
|
|
const resultData = childrenOrgPosArray.value.filter((item) => item.orgId === value)
|
|
if (resultData.length > 0) {
|
|
return resultData[0].posList
|
|
}
|
|
}
|
|
// 获取行内人员数据
|
|
const childUserData = (value) => {
|
|
const resultData = childrenOrgPosArray.value.filter((item) => item.orgId === value)
|
|
if (resultData.length > 0) {
|
|
return resultData[0].userList
|
|
}
|
|
}
|
|
// 验证并提交数据
|
|
const onSubmit = () => {
|
|
formRef.value.validate().then(() => {
|
|
// 因为不切断，我下面转换数据格式，影响上面表单会报错
|
|
let formDatas = JSON.parse(JSON.stringify(formData.value))
|
|
if (formDatas.positionJson && formDatas.positionJson.length > 0) {
|
|
formDatas.positionJson = JSON.stringify(formDatas.positionJson)
|
|
} else {
|
|
delete formDatas.positionJson
|
|
}
|
|
formLoading.value = true
|
|
bizUserApi
|
|
.submitForm(formDatas, !formDatas.id)
|
|
.then(() => {
|
|
onClose()
|
|
emit('successful')
|
|
})
|
|
.finally(() => {
|
|
formLoading.value = false
|
|
})
|
|
})
|
|
}
|
|
// 性别
|
|
const genderOptions = tool.dictList('GENDER')
|
|
// 民族
|
|
const nationOptions = tool.dictList('NATION')
|
|
// 身份证件
|
|
const idcardTypeOptions = tool.dictList('IDCARD_TYPE')
|
|
// 文化程度
|
|
const cultureLevelOptions = tool.dictList('CULTURE_LEVEL')
|
|
|
|
// 调用这个函数将子组件的一些数据和方法暴露出去
|
|
defineExpose({
|
|
onOpen
|
|
})
|
|
</script>
|
|
|
|
<style scoped type="less">
|
|
.childAddButton {
|
|
margin-bottom: 10px;
|
|
}
|
|
.form-row {
|
|
background-color: var(--item-hover-bg);
|
|
margin-left: 0px !important;
|
|
}
|
|
.form-row-con {
|
|
padding-bottom: 5px;
|
|
padding-top: 5px;
|
|
padding-left: 15px;
|
|
}
|
|
.dashedButton {
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
}
|
|
.form-div {
|
|
padding-top: 10px;
|
|
}
|
|
</style>
|