人员详情开发
This commit is contained in:
QuAoLi
parent
5c3c8179c5
commit
d0e56e7b99
|
|
@ -9,6 +9,7 @@ const personApi = {
|
||||||
quit: 'person/quit',
|
quit: 'person/quit',
|
||||||
resetPwd: 'person/resetPwd',
|
resetPwd: 'person/resetPwd',
|
||||||
setAdmin: 'person/setAdmin',
|
setAdmin: 'person/setAdmin',
|
||||||
|
changeLogPage: '/person/changeLog/pageList'
|
||||||
}
|
}
|
||||||
|
|
||||||
export function personAddOrUpdate (params) {
|
export function personAddOrUpdate (params) {
|
||||||
|
|
@ -67,3 +68,10 @@ export function personSetAdmin (params) {
|
||||||
params: params
|
params: params
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
export function personChangeLogPage (params) {
|
||||||
|
return request({
|
||||||
|
url: personApi.changeLogPage,
|
||||||
|
method: 'get',
|
||||||
|
params: params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,368 @@
|
||||||
<template>
|
<template>
|
||||||
|
<a-modal
|
||||||
|
:title="modalTitle"
|
||||||
|
:width="900"
|
||||||
|
:visible="visible"
|
||||||
|
:confirmLoading="confirmLoading"
|
||||||
|
@ok="handleCancel"
|
||||||
|
@cancel="handleCancel"
|
||||||
|
>
|
||||||
|
<a-spin :spinning="confirmLoading">
|
||||||
|
<a-divider orientation="left">基本信息</a-divider>
|
||||||
|
<a-row :gutter="24">
|
||||||
|
<a-col :md="12" :sm="24">
|
||||||
|
<a-form :form="form">
|
||||||
|
<a-form-item style="display: none;">
|
||||||
|
<a-input v-decorator="['id']" />
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item style="display: none;">
|
||||||
|
<a-input v-decorator="['userId']" />
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item
|
||||||
|
label="用户名"
|
||||||
|
:labelCol="labelCol"
|
||||||
|
:wrapperCol="wrapperCol"
|
||||||
|
has-feedback
|
||||||
|
>
|
||||||
|
<a-input placeholder="请输入用户名" readOnly v-decorator="['userName', {rules: [{required: true, min: 5, message: '请输入至少五个字符的账号！'}]}]" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
<a-col :md="12" :sm="24" >
|
||||||
|
<a-form :form="form">
|
||||||
|
<a-form-item
|
||||||
|
label="姓名"
|
||||||
|
:labelCol="labelCol"
|
||||||
|
:wrapperCol="wrapperCol"
|
||||||
|
has-feedback
|
||||||
|
>
|
||||||
|
<a-input placeholder="请输入姓名" readOnly v-decorator="['name', {rules: [{required: true, message: '请输入姓名！'}]}]" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row :gutter="24">
|
||||||
|
<a-col :md="12" :sm="24">
|
||||||
|
<a-form :form="form">
|
||||||
|
<a-form-item
|
||||||
|
label="身份证"
|
||||||
|
:labelCol="labelCol"
|
||||||
|
:wrapperCol="wrapperCol"
|
||||||
|
has-feedback
|
||||||
|
>
|
||||||
|
<a-input placeholder="请输入身份证" readOnly v-decorator="['idCardNo', {rules: [{required: true, message: '请输入身份证！'}]}]" @blur="idCardNoBlur"/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
<a-col :md="12" :sm="24">
|
||||||
|
<a-form :form="form">
|
||||||
|
<a-form-item
|
||||||
|
label="年龄"
|
||||||
|
:labelCol="labelCol"
|
||||||
|
:wrapperCol="wrapperCol"
|
||||||
|
has-feedback
|
||||||
|
>
|
||||||
|
<a-input readOnly v-decorator="['age']" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row :gutter="24">
|
||||||
|
<a-col :md="12" :sm="24">
|
||||||
|
<a-form :form="form">
|
||||||
|
<a-form-item
|
||||||
|
label="性别"
|
||||||
|
:labelCol="labelCol"
|
||||||
|
:wrapperCol="wrapperCol"
|
||||||
|
>
|
||||||
|
<a-radio-group disabled v-decorator="['sex',{rules: [{ required: true, message: '请选择性别！' }]}]" >
|
||||||
|
<a-radio :value="1">男</a-radio>
|
||||||
|
<a-radio :value="2">女</a-radio>
|
||||||
|
</a-radio-group>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
<a-col :md="12" :sm="24">
|
||||||
|
<a-form :form="form">
|
||||||
|
<a-form-item
|
||||||
|
label="手机号"
|
||||||
|
:labelCol="labelCol"
|
||||||
|
:wrapperCol="wrapperCol"
|
||||||
|
has-feedback
|
||||||
|
>
|
||||||
|
<a-input placeholder="请输入手机号" readOnly v-decorator="['phone',{rules: [{ required: true, message: '请输入手机号！' }]}]" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row :gutter="24">
|
||||||
|
<a-col :md="24" :sm="24">
|
||||||
|
<a-form :form="form">
|
||||||
|
<a-form-item
|
||||||
|
label="岗位"
|
||||||
|
:labelCol="{span: 3}"
|
||||||
|
:wrapperCol="{span: 20}"
|
||||||
|
has-feedback
|
||||||
|
>
|
||||||
|
<a-select style="width: 100%" disabled placeholder="请选择岗位" v-decorator="['jobs',{rules: [{ required: true, message: '请选择岗位！' }]}]" >
|
||||||
|
<a-select-option v-for="(item,index) in jobsData" :key="index" :value="item.value" >{{ item.name }}</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row :gutter="24">
|
||||||
|
<a-col :md="12" :sm="24">
|
||||||
|
<a-form :form="form">
|
||||||
|
<a-form-item
|
||||||
|
label="工种"
|
||||||
|
:labelCol="labelCol"
|
||||||
|
:wrapperCol="wrapperCol"
|
||||||
|
has-feedback
|
||||||
|
>
|
||||||
|
<a-select style="width: 100%" disabled placeholder="请选择工种" v-decorator="['workType',{rules: [{ required: true, message: '请选择工种！' }]}]" >
|
||||||
|
<a-select-option v-for="(item,index) in workTypeData" :key="index" :value="item.value" >{{ item.name }}</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
<a-col :md="12" :sm="24">
|
||||||
|
<a-form :form="form">
|
||||||
|
<a-form-item
|
||||||
|
label="学历"
|
||||||
|
:labelCol="labelCol"
|
||||||
|
:wrapperCol="wrapperCol"
|
||||||
|
has-feedback
|
||||||
|
>
|
||||||
|
<a-select style="width: 100%" disabled placeholder="请选择学历" v-decorator="['degreeId',{rules: [{ required: true, message: '请选择学历！' }]}]" >
|
||||||
|
<a-select-option v-for="(item,index) in degreeData" :key="index" :value="item.value" >{{ item.name }}</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row :gutter="24">
|
||||||
|
<a-col :md="24" :sm="24">
|
||||||
|
<a-form :form="form">
|
||||||
|
<a-form-item
|
||||||
|
label="人员类型"
|
||||||
|
:labelCol="{span: 3}"
|
||||||
|
:wrapperCol="{span: 20}"
|
||||||
|
>
|
||||||
|
<a-checkbox-group disabled v-decorator="['type',{rules: [{ required: true, message: '请选择人员类型！' }]}]">
|
||||||
|
<a-checkbox name="type" v-for="(item,index) in typeData" :key="index" :value="item.value" >
|
||||||
|
{{ item.name }}
|
||||||
|
</a-checkbox>
|
||||||
|
</a-checkbox-group>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row :gutter="24">
|
||||||
|
<a-col :md="12" :sm="24">
|
||||||
|
<a-form :form="form">
|
||||||
|
<a-form-item
|
||||||
|
label="部门信息"
|
||||||
|
:labelCol="labelCol"
|
||||||
|
:wrapperCol="wrapperCol"
|
||||||
|
has-feedback
|
||||||
|
>
|
||||||
|
<a-input readOnly v-decorator="['orgName',{rules: [{ required: true, message: '请选择机构！' }]}]" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item style="display: none;">
|
||||||
|
<a-input v-decorator="['orgId']" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
|
<a-divider orientation="left">变动信息</a-divider>
|
||||||
|
<s-table
|
||||||
|
ref="table"
|
||||||
|
:columns="columns"
|
||||||
|
:data="loadData"
|
||||||
|
:rowKey="(record) => record.id"
|
||||||
|
:pagination="{ pageSize: 5 }"
|
||||||
|
:showSizeChanger="false"
|
||||||
|
>
|
||||||
|
<template slot="createTime" slot-scope="text, record">
|
||||||
|
{{ record.createTime | moment('YYYY-MM-DD') }}
|
||||||
|
</template>
|
||||||
|
</s-table>
|
||||||
|
</a-spin>
|
||||||
|
|
||||||
|
|
||||||
|
</a-modal>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
</script>
|
import { STable } from '@/components'
|
||||||
|
import { personGet, personChangeLogPage } from '@/api/person/person'
|
||||||
|
import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
STable
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
labelCol: {
|
||||||
|
xs: { span: 24 },
|
||||||
|
sm: { span: 6 }
|
||||||
|
},
|
||||||
|
wrapperCol: {
|
||||||
|
xs: { span: 24 },
|
||||||
|
sm: { span: 16 }
|
||||||
|
},
|
||||||
|
modalTitle: '人员详情',
|
||||||
|
visible: false,
|
||||||
|
confirmLoading: false,
|
||||||
|
form: this.$form.createForm(this),
|
||||||
|
jobsData: [],
|
||||||
|
workTypeData: [],
|
||||||
|
degreeData: [],
|
||||||
|
typeData: [],
|
||||||
|
// 查询参数
|
||||||
|
queryParam: { },
|
||||||
|
// 表头
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: '日期',
|
||||||
|
dataIndex: 'createTime',
|
||||||
|
scopedSlots: { customRender: 'createTime' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '人员变动信息',
|
||||||
|
dataIndex: 'changeType'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '部门信息',
|
||||||
|
dataIndex: 'orgName'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// 加载数据方法 必须为 Promise 对象
|
||||||
|
loadData: parameter => {
|
||||||
|
return personChangeLogPage(Object.assign(parameter, this.queryParam)).then((res) => {
|
||||||
|
return res
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.dictionaryDropDown()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 编辑初始化方法
|
||||||
|
detail (record) {
|
||||||
|
this.confirmLoading = true
|
||||||
|
this.visible = true
|
||||||
|
|
||||||
<style>
|
this.queryParam.userId = record.userId
|
||||||
</style>
|
this.queryParam.orgId = record.orgId
|
||||||
|
|
||||||
|
|
||||||
|
// 基本信息加入表单
|
||||||
|
personGet({ id: record.id }).then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
const data = res.data
|
||||||
|
|
||||||
|
// 默认选中的多选框
|
||||||
|
const type = data.type.split(',')
|
||||||
|
const typeIntArr = []// 保存转换后的整型字符串
|
||||||
|
type.forEach(item => {
|
||||||
|
typeIntArr.push(+item)
|
||||||
|
})
|
||||||
|
this.form.getFieldDecorator('type', { valuePropName: 'checked', initialValue: typeIntArr })
|
||||||
|
|
||||||
|
console.log(data)
|
||||||
|
this.form.setFieldsValue(
|
||||||
|
{
|
||||||
|
id: data.id,
|
||||||
|
userId: data.userId,
|
||||||
|
name: data.name,
|
||||||
|
userName: data.userName,
|
||||||
|
idCardNo: data.idCardNo,
|
||||||
|
// age: data.age,
|
||||||
|
// sex: data.sex,
|
||||||
|
phone: data.phone,
|
||||||
|
jobs: parseInt(data.jobs),
|
||||||
|
workType: parseInt(data.workType),
|
||||||
|
degreeId: data.degreeId,
|
||||||
|
orgId: data.orgId,
|
||||||
|
orgName: data.orgName
|
||||||
|
}
|
||||||
|
)
|
||||||
|
// 动态赋值年龄和性别
|
||||||
|
this.analyzeIdCardNo(data.idCardNo)
|
||||||
|
} else {
|
||||||
|
this.$message.error('查询失败：' + res.msg)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.confirmLoading = false
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取字典数据
|
||||||
|
*/
|
||||||
|
dictionaryDropDown () {
|
||||||
|
this.formLoading = true
|
||||||
|
// 岗位
|
||||||
|
dictionaryDropDown({ dictionaryCode: '0002' }).then((res) => {
|
||||||
|
this.jobsData = res.data
|
||||||
|
})
|
||||||
|
// 工种
|
||||||
|
dictionaryDropDown({ dictionaryCode: '0003' }).then((res) => {
|
||||||
|
this.workTypeData = res.data
|
||||||
|
})
|
||||||
|
// 学历
|
||||||
|
dictionaryDropDown({ dictionaryCode: '0004' }).then((res) => {
|
||||||
|
this.degreeData = res.data
|
||||||
|
})
|
||||||
|
// 人员类型
|
||||||
|
dictionaryDropDown({ dictionaryCode: '0005' }).then((res) => {
|
||||||
|
this.typeData = res.data
|
||||||
|
this.formLoading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
idCardNoBlur (event) {
|
||||||
|
const idCardNo = event.target.value
|
||||||
|
this.analyzeIdCardNo(idCardNo)
|
||||||
|
},
|
||||||
|
analyzeIdCardNo (idCardNo) {
|
||||||
|
// 如果用户身份证号码为undefined则返回空
|
||||||
|
if (!idCardNo) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取性别
|
||||||
|
if (parseInt(idCardNo.substr(16, 1)) % 2 === 1) {
|
||||||
|
this.form.setFieldsValue({ sex: 1 })
|
||||||
|
} else {
|
||||||
|
console.log('sex 2')
|
||||||
|
this.form.setFieldsValue({ sex: 2 })
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取出生日期
|
||||||
|
var yearBirth = idCardNo.substring(6, 10)
|
||||||
|
var monthBirth = idCardNo.substring(10, 12)
|
||||||
|
var dayBirth = idCardNo.substring(12, 14)
|
||||||
|
// 获取当前年月日并计算年龄
|
||||||
|
var myDate = new Date()
|
||||||
|
var monthNow = myDate.getMonth() + 1
|
||||||
|
var dayNow = myDate.getDate()
|
||||||
|
var age = myDate.getFullYear() - yearBirth
|
||||||
|
if (monthNow < monthBirth || (monthNow === monthBirth && dayNow < dayBirth)) {
|
||||||
|
age--
|
||||||
|
}
|
||||||
|
console.log(age)
|
||||||
|
// 得到年龄
|
||||||
|
this.form.setFieldsValue({ age })
|
||||||
|
},
|
||||||
|
handleCancel () {
|
||||||
|
this.form.resetFields()
|
||||||
|
this.visible = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -72,7 +72,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<span slot="action" slot-scope="text, record">
|
<span slot="action" slot-scope="text, record">
|
||||||
<a v-if="hasPerm('person:detail')" @click="$refs.personDetail.detial(record)">详情</a>
|
<a v-if="hasPerm('person:detail')" @click="$refs.personDetail.detail(record)">详情</a>
|
||||||
<a-divider type="vertical" v-if="hasPerm('person:detail')" />
|
<a-divider type="vertical" v-if="hasPerm('person:detail')" />
|
||||||
<a-dropdown v-if="hasPerm('person:edit') || hasPerm('person:resetPwd') || hasPerm('person:del')">
|
<a-dropdown v-if="hasPerm('person:edit') || hasPerm('person:resetPwd') || hasPerm('person:del')">
|
||||||
<a class="ant-dropdown-link">
|
<a class="ant-dropdown-link">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue