|
|
@@ -0,0 +1,496 @@
|
|
|
+<template>
|
|
|
+ <el-dialog :title="dialogInfo.title"
|
|
|
+ :visible.sync="dialogInfo.visible"
|
|
|
+ :show-close="false"
|
|
|
+ top="5vh"
|
|
|
+ width="35%"
|
|
|
+ v-dialogDrag
|
|
|
+ class="personnel_history">
|
|
|
+ <div class="container">
|
|
|
+ <div class="item" v-for="(item,index) of dialogInfo.data" :key="index">
|
|
|
+ <div class="heade">
|
|
|
+ <div class="title_state">{{ item.status }}</div>
|
|
|
+ <div class="date">{{ item.createTime }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="card_content">
|
|
|
+ <div class="row">
|
|
|
+ <label class="label">提交人</label>
|
|
|
+ <div class="content">{{ item.createBy }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <label class="label" :title="'修改内容'">修改内容</label>
|
|
|
+ <div class="content">
|
|
|
+ <div class="edit_item" v-for="(row, index) in item.list" :key="index">
|
|
|
+ <div class="oldValue">
|
|
|
+ <div class="oldState">修改前</div>
|
|
|
+ <div class="key" :title="translate(row.propertyName)">{{ translate(row.propertyName) }}</div>
|
|
|
+ <div class="value" v-if="row.propertyName == 'isSpeciality'">{{ row.oldValue == 1 ? '是' : row.oldValue == 2 ? '否' : '' }}</div>
|
|
|
+ <div class="value" v-else-if="row.propertyName == 'realName'">{{ row.oldValue == 'true' ? '是' : row.oldValue == 'false' ? '否' : '' }}</div>
|
|
|
+ <div class="value" v-else-if="row.propertyName == 'bankAuthentication'">{{ row.oldValue == 'true' ? '是' : row.oldValue == 'false' ? '否' : '' }}</div>
|
|
|
+ <div class="value" v-else-if="row.propertyName == 'sex'">{{ translateSex(row.oldValue) }}</div>
|
|
|
+ <div class="value" v-else>{{ row.oldValue == 'null' ? '--' : row.oldValue }}</div>
|
|
|
+ <div class="oldLine"></div>
|
|
|
+ </div>
|
|
|
+ <div class="newValue">
|
|
|
+ <div class="newState">修改后</div>
|
|
|
+ <div class="key" :title="translate(row.propertyName)">{{ translate(row.propertyName) }}</div>
|
|
|
+ <div class="value" v-if="row.propertyName == 'isSpeciality'">{{ row.newValue == 1 ? '是' : row.newValue == 2 ? '否' : '' }}</div>
|
|
|
+ <div class="value" v-else-if="row.propertyName == 'realName'">{{ row.newValue == 'true' ? '是' : row.newValue == 'false' ? '否' : '' }}</div>
|
|
|
+ <div class="value" v-else-if="row.propertyName == 'bankAuthentication'">{{ row.newValue == 'true' ? '是' : row.newValue == 'false' ? '否' : '' }}</div>
|
|
|
+ <div class="value" v-else-if="row.propertyName == 'sex'">{{ translateSex(row.newValue) }}</div>
|
|
|
+ <div class="value" v-else :title="row.newValue">{{ row.newValue == 'null' ? '--' : row.newValue }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="step-line"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="handler">
|
|
|
+ <el-button size="small" type="primary" class="closeBtn" @click="close">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import mixa from "@/views/PeopleManage/mixin";
|
|
|
+const mixin = new mixa({
|
|
|
+ treeTypeNum: null,
|
|
|
+});
|
|
|
+export default {
|
|
|
+ props:{
|
|
|
+ isBusiness: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ mixins: [mixin],
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ dialogInfo: {
|
|
|
+ title: '人员轨迹',
|
|
|
+ visible: false,
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ translations: {
|
|
|
+ pdeptId: '机构名称',
|
|
|
+ deptId: '机构名称',
|
|
|
+ positionId: '岗位',
|
|
|
+ id: '工号',
|
|
|
+ name: '姓名',
|
|
|
+ mobile: '手机号',
|
|
|
+ entryTime: '入司时间',
|
|
|
+ status: '状态',
|
|
|
+ roleId: '角色',
|
|
|
+ leaderId: '管理人',
|
|
|
+ leaderName: '管理人工号',
|
|
|
+ agentQualificationCode: '代理人资格证号',
|
|
|
+ referrerId: '推荐人',
|
|
|
+ referrerName: '推荐人工号',
|
|
|
+ identity: '身份证号',
|
|
|
+ sex: '性别',
|
|
|
+ birthday: '出生日期',
|
|
|
+ nations: '民族',
|
|
|
+ koseki: '户籍',
|
|
|
+ maritalStatus: '婚姻状况',
|
|
|
+ politicsStatus: '政治面貌',
|
|
|
+ health: '健康状况',
|
|
|
+ liveAddress: '居住地址',
|
|
|
+ address: '详细地址',
|
|
|
+ postalCode: '邮政编码',
|
|
|
+ education: '学历',
|
|
|
+ school: '毕业院校',
|
|
|
+ graduationTime: '毕业时间',
|
|
|
+ formerEmployer: '原工作单位',
|
|
|
+ password: '密码',
|
|
|
+ emergencyContactName: '紧急联系人姓名',
|
|
|
+ emergencyContactTel: '紧急联系人电话',
|
|
|
+ isSpeciality: '是否计算机专业',
|
|
|
+ salary: '工资',
|
|
|
+ salaryLevel: '工资等级',
|
|
|
+ performance: '绩效方案',
|
|
|
+ accountno: '开户账号',
|
|
|
+ bankName: '开户行',
|
|
|
+ // referrerId: '推荐人',
|
|
|
+ // referrerName: '推荐人工号',
|
|
|
+ status: '状态',
|
|
|
+ // entryTime: '入司时间',
|
|
|
+ logoutTime: '离职时间',
|
|
|
+ weChat: '微信绑定',
|
|
|
+ alipay: '支付宝绑定',
|
|
|
+ realName: '是否实名认证',
|
|
|
+ bankAuthentication: '银行卡是否认证',
|
|
|
+ approvalOpinion: '备注'
|
|
|
+ },
|
|
|
+ regionalTree: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ this.selectTree();
|
|
|
+ },
|
|
|
+ mounted(){},
|
|
|
+ methods: {
|
|
|
+ // 查询人员修改历史
|
|
|
+ async getHistory(userId){
|
|
|
+ const data = await this.$api.user.queryHistory({userId})
|
|
|
+ if(data.code == 200){
|
|
|
+ if(data.data.length){
|
|
|
+ data.data.forEach(item => {
|
|
|
+ item.list = item.user.concat(item.userInfo);
|
|
|
+ item.list.forEach(val =>{
|
|
|
+ if(val.propertyName == 'liveAddress'){
|
|
|
+ if(val.newValue){
|
|
|
+ val.newValue = this.getVal(val.newValue.split(','), this.regionalTree, []);
|
|
|
+ }
|
|
|
+ if(val.oldValue){
|
|
|
+ val.oldValue = this.getVal(val.oldValue.split(','), this.regionalTree, []);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ this.dialogInfo.data = data.data;
|
|
|
+ this.dialogInfo.visible = true;
|
|
|
+ }else{
|
|
|
+ this.$message.warning('暂无修改记录');
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ this.$message({
|
|
|
+ message: `${data.msg}`,
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //字段翻译
|
|
|
+ translate(key) {
|
|
|
+ if(this.translations[key] == 'referrerId' && this.isBusiness){
|
|
|
+ return '业务员';
|
|
|
+ }else{
|
|
|
+ return this.translations[key] || 'No translation found';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //性别翻译
|
|
|
+ translateSex(value){
|
|
|
+ let label = '--';
|
|
|
+ if(value != 'null'){
|
|
|
+ this.sexoptions.forEach((val) => {
|
|
|
+ if(value == val.value){
|
|
|
+ label = val.label;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+
|
|
|
+ }
|
|
|
+ return label;
|
|
|
+ },
|
|
|
+ //查询树结构
|
|
|
+ selectTree(){
|
|
|
+ this.$api.dept.queryTree().then((response) =>{
|
|
|
+ this.regionalTree = this.recursion(response.data);
|
|
|
+ }).catch((error) =>{
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //递归
|
|
|
+ recursion(data){
|
|
|
+ if(data.length){
|
|
|
+ data.forEach(item => {
|
|
|
+ if(item.child.length){
|
|
|
+ this.recursion(item.child);
|
|
|
+ }else{
|
|
|
+ delete item.child
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return data;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //翻译省市区
|
|
|
+ getVal(data, options, arr) {
|
|
|
+ options.forEach((e) => {
|
|
|
+ data.forEach((i) => {
|
|
|
+ if (i == e.areaCode) {
|
|
|
+ arr.push(e.areaCname);
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ if (e.child) {
|
|
|
+ this.getVal([i], e.child, arr);
|
|
|
+ } else {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ return arr.join('/');
|
|
|
+ },
|
|
|
+ //关闭弹窗
|
|
|
+ close(){
|
|
|
+ this.dialogInfo.visible = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.personnel_history{
|
|
|
+ >>>.el-dialog{
|
|
|
+ min-width: 550px;
|
|
|
+ max-width: 800px;
|
|
|
+ max-height: 650px;
|
|
|
+ .el-dialog__header{
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0 24px;
|
|
|
+ text-align: center;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ .el-dialog__title{
|
|
|
+ font-size: 18px;
|
|
|
+ color: #333;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-dialog__body{
|
|
|
+ padding: 24px;
|
|
|
+ padding-bottom: 0px;
|
|
|
+ .container{
|
|
|
+ max-height: calc(650px - 64px - 48px - 50px);
|
|
|
+ overflow: auto;
|
|
|
+ .item{
|
|
|
+ padding-left: 28px;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ position: relative;
|
|
|
+ .heade{
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ height: 22px;
|
|
|
+ line-height: 22px;
|
|
|
+ .title_state{
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .date{
|
|
|
+ margin-left: 14px;
|
|
|
+ font-size: 10px;
|
|
|
+ color: #999;
|
|
|
+ font-weight: 300;
|
|
|
+ letter-spacing: 0.5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card_content{
|
|
|
+ height: 178px;
|
|
|
+ margin-top: 7px;
|
|
|
+ margin-right: 10px;
|
|
|
+ padding: 16px;
|
|
|
+ padding-right: 6px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
|
|
|
+ border-radius: 6px 6px 6px 6px;
|
|
|
+ .row{
|
|
|
+ display: flex;
|
|
|
+ height: 22px;
|
|
|
+ line-height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ .label{
|
|
|
+ width: 60px;
|
|
|
+ margin-right: 18px;
|
|
|
+ white-space: nowrap; /* 确保文本在一行内显示 */
|
|
|
+ overflow: hidden; /* 超出容器部分隐藏 */
|
|
|
+ text-overflow: ellipsis; /* 超出部分显示打点 */
|
|
|
+ }
|
|
|
+ .content{
|
|
|
+ width: calc(100% - 82px);
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ min-height: 140px;
|
|
|
+ overflow-y: auto;
|
|
|
+ .edit_item{
|
|
|
+ margin-bottom: 12px;
|
|
|
+ padding-left: 5px;
|
|
|
+ .oldValue{
|
|
|
+ margin-bottom: 8px;
|
|
|
+ margin-left: 15px;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .oldState{
|
|
|
+ min-width: 36px;
|
|
|
+ color: #F63B3D;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 0 3px;
|
|
|
+ border-radius: 2px 2px 2px 2px;
|
|
|
+ border: 1px solid #F63B3D;
|
|
|
+ margin-right: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .key{
|
|
|
+ max-width: 160px;
|
|
|
+ // min-width: 60px;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-right: 5px;
|
|
|
+ white-space: nowrap; /* 确保文本在一行内显示 */
|
|
|
+ overflow: hidden; /* 超出容器部分隐藏 */
|
|
|
+ text-overflow: ellipsis; /* 超出部分显示打点 */
|
|
|
+ }
|
|
|
+ .newValue{
|
|
|
+ position: relative;
|
|
|
+ margin-left: 15px;
|
|
|
+ display: flex;
|
|
|
+ .newState{
|
|
|
+ min-width: 36px;
|
|
|
+ color: #1DD07A;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 0 3px;
|
|
|
+ border-radius: 2px 2px 2px 2px;
|
|
|
+ border: 1px solid #1DD07A;
|
|
|
+ margin-right: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .value{
|
|
|
+ max-width: 400px;
|
|
|
+ min-width: calc(100% - 36px - 160px);
|
|
|
+ display: inline-block;
|
|
|
+ white-space: nowrap; /* 确保文本在一行内显示 */
|
|
|
+ overflow: hidden; /* 超出容器部分隐藏 */
|
|
|
+ text-overflow: ellipsis; /* 超出部分显示打点 */
|
|
|
+ }
|
|
|
+ .oldValue::before{
|
|
|
+ content: ''; /* 生成伪元素的内容，但这里不需要实际文本，所以为空 */
|
|
|
+ display: inline-block; /* 使伪元素以行内块级元素显示 */
|
|
|
+ width: 6px; /* 小圆点的宽度 */
|
|
|
+ height: 6px; /* 小圆点的高度 */
|
|
|
+ background-color: #F63B3D; /* 小圆点的颜色 */
|
|
|
+ border-radius: 50%; /* 将方形变成圆形 */
|
|
|
+ vertical-align: middle; /* 垂直居中，如果需要的话 */
|
|
|
+ position: absolute;
|
|
|
+ left: -16px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ .newValue::before{
|
|
|
+ content: ''; /* 生成伪元素的内容，但这里不需要实际文本，所以为空 */
|
|
|
+ display: inline-block; /* 使伪元素以行内块级元素显示 */
|
|
|
+ width: 6px; /* 小圆点的宽度 */
|
|
|
+ height: 6px; /* 小圆点的高度 */
|
|
|
+ background-color: #1DD07A; /* 小圆点的颜色 */
|
|
|
+ border-radius: 50%; /* 将方形变成圆形 */
|
|
|
+ vertical-align: middle; /* 垂直居中，如果需要的话 */
|
|
|
+ position: absolute;
|
|
|
+ left: -16px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ .oldLine{
|
|
|
+ position: absolute;
|
|
|
+ top: 10px; /* 根据圆点的尺寸调整 */
|
|
|
+ left: -14px; /* 将竖线居中对齐 */
|
|
|
+ bottom: -20px; /* 调整竖线的长度 */
|
|
|
+ width: 1px;
|
|
|
+ background: linear-gradient(to bottom, rgba(246, 59, 61, 1), rgba(29, 208, 122, 1));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .heade::before {
|
|
|
+ content: ''; /* 生成伪元素的内容，但这里不需要实际文本，所以为空 */
|
|
|
+ display: inline-block; /* 使伪元素以行内块级元素显示 */
|
|
|
+ width: 10px; /* 小圆点的宽度 */
|
|
|
+ height: 10px; /* 小圆点的高度 */
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #E5E5E5; /* 小圆点的颜色 */
|
|
|
+ border-radius: 50%; /* 将方形变成圆形 */
|
|
|
+ vertical-align: middle; /* 垂直居中，如果需要的话 */
|
|
|
+ position: absolute;
|
|
|
+ left: -25px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 2;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .item:first-child .heade{
|
|
|
+ .title_state{
|
|
|
+ font-size: 16px;
|
|
|
+ color: #D42426;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .date{
|
|
|
+ margin-left: 14px;
|
|
|
+ font-size: 10px;
|
|
|
+ color: #D42426;
|
|
|
+ font-weight: 300;
|
|
|
+ }
|
|
|
+ &::before{
|
|
|
+ content: ''; /* 生成伪元素的内容，但这里不需要实际文本，所以为空 */
|
|
|
+ display: inline-block; /* 使伪元素以行内块级元素显示 */
|
|
|
+ width: 16px; /* 小圆点的宽度 */
|
|
|
+ height: 16px; /* 小圆点的高度 */
|
|
|
+ background: url('~@/assets/image/people/state.svg') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ vertical-align: middle; /* 垂直居中，如果需要的话 */
|
|
|
+ position: absolute;
|
|
|
+ left: -28px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .step-line {
|
|
|
+ position: absolute;
|
|
|
+ top: 10px; /* 根据圆点的尺寸调整 */
|
|
|
+ left: 8px; /* 将竖线居中对齐 */
|
|
|
+ bottom: -40px; /* 调整竖线的长度 */
|
|
|
+ width: 1px;
|
|
|
+ background-color: #e5e5e5;
|
|
|
+ }
|
|
|
+ .item:last-child .step-line{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .handler{
|
|
|
+ height: 64px;
|
|
|
+ line-height: 64px;
|
|
|
+ border-top: 1px solid #eee;
|
|
|
+ text-align: right;
|
|
|
+ .el-button{
|
|
|
+ width: 90px;
|
|
|
+ height: 36px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #D42426;
|
|
|
+ border-radius: 2px 2px 2px 2px;
|
|
|
+ border: 1px solid #D42426;
|
|
|
+ font-weight: 300 !important;
|
|
|
+ background: #fff;
|
|
|
+ &:hover{
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-cascader{
|
|
|
+ min-width: 175px;
|
|
|
+ height: 22px;
|
|
|
+ line-height: 22px;
|
|
|
+ cursor: auto;
|
|
|
+ .el-input__suffix{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .el-input__inner{
|
|
|
+ padding: 0;
|
|
|
+ border: 0;
|
|
|
+ height: 16px;
|
|
|
+ color: #333;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ cursor: auto;
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
ChengHongYu
