完成人员界面的信息展示
yzw
parent
452423967d
commit
f1f4752d82
|
|
@ -0,0 +1,9 @@
|
||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
export function getPersonData(params) {
|
||||||
|
return request({
|
||||||
|
url: '/person/person-information2',
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -209,6 +209,10 @@ export default {
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// admin
|
||||||
|
if (this.$store.state.user.is_admin) {
|
||||||
|
this.writePriority = true;
|
||||||
|
}
|
||||||
// this.intervalId = setInterval(() => {
|
// this.intervalId = setInterval(() => {
|
||||||
// if (this.jm) {
|
// if (this.jm) {
|
||||||
// // 绑定全局键盘输入事件
|
// // 绑定全局键盘输入事件
|
||||||
|
|
|
||||||
|
|
@ -87,8 +87,8 @@ export default {
|
||||||
};
|
};
|
||||||
return {
|
return {
|
||||||
loginForm: {
|
loginForm: {
|
||||||
username: "admin",
|
username: "422823198510203671",
|
||||||
password: "admin",
|
password: "123456",
|
||||||
},
|
},
|
||||||
loginRules: {
|
loginRules: {
|
||||||
username: [
|
username: [
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,196 @@
|
||||||
<template>
|
<template>
|
||||||
|
<div class="info-body">
|
||||||
|
<p class="item-title-p" style="margin-top: 10px">基本信息</p>
|
||||||
|
<div class="info-table-box">
|
||||||
|
<table class="info-table">
|
||||||
|
<tr>
|
||||||
|
<td class="text-key">姓名:</td>
|
||||||
|
<td class="text-value">{{ personData["姓名"] }}</td>
|
||||||
|
<td class="text-key">性别:</td>
|
||||||
|
<td class="text-value">{{ personData["性别"] }}</td>
|
||||||
|
<td class="text-key">{{ personData["证件类型"] }}号:</td>
|
||||||
|
<td class="text-value">{{ personData["证件号码"] }}</td>
|
||||||
|
<td class="text-key">出生日期:</td>
|
||||||
|
<td class="text-value">{{ personData["出生日期"] }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="text-key">民族:</td>
|
||||||
|
<td class="text-value">{{ personData["民族"] }}</td>
|
||||||
|
<td class="text-key">国籍:</td>
|
||||||
|
<td class="text-value">{{ personData["国籍"] }}</td>
|
||||||
|
<td class="text-key">政治面貌:</td>
|
||||||
|
<td class="text-value">{{ personData["政治面貌"] }}</td>
|
||||||
|
<td class="text-key">入党时间:</td>
|
||||||
|
<td class="text-value">{{ personData["入党时间"] }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="text-key">籍贯:</td>
|
||||||
|
<td class="text-value">{{ personData["籍贯"] }}</td>
|
||||||
|
<td class="text-key">出生地:</td>
|
||||||
|
<td class="text-value">{{ personData["出生地"] }}</td>
|
||||||
|
<td class="text-key">联系电话:</td>
|
||||||
|
<td class="text-value">{{ personData["联系电话"] }}</td>
|
||||||
|
<td class="text-key"></td>
|
||||||
|
<td class="text-value"></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="item-title-p">全日制学历</p>
|
||||||
|
<div class="info-box">
|
||||||
<div>
|
<div>
|
||||||
个人信息
|
<span class="text-key">最高全日制学历: </span>
|
||||||
|
<span class="text-value">{{ personData.最高全日制学历 }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="text-key">最高全日制学位: </span>
|
||||||
|
<span class="text-value">{{ personData.最高全日制学位 }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="text-key">全日制毕（肄）业学校（单位）名称: </span>
|
||||||
|
<span class="text-value">{{
|
||||||
|
personData["全日制毕（肄）业学校（单位）名称"]
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<span class="text-key">全日制毕（肄）业专业名称: </span>
|
||||||
|
<span class="text-value">{{
|
||||||
|
personData["全日制毕（肄）业专业名称"]
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="text-key">全日制学校所在国家: </span>
|
||||||
|
<span class="text-value">{{ personData.全日制学校所在国家 }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="item-title-p">在职学历</p>
|
||||||
|
<div class="info-box">
|
||||||
|
<div>
|
||||||
|
<span class="text-key">最高在职学历: </span>
|
||||||
|
<span class="text-value">{{ personData.最高在职学历 }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="text-key">最高在职学位: </span>
|
||||||
|
<span class="text-value">{{ personData.最高在职学位 }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="text-key">在职毕（肄）业学校（单位）名称: </span>
|
||||||
|
<span class="text-value">{{
|
||||||
|
personData["在职毕（肄）业学校（单位）名称"]
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="text-key">在职毕（肄）业专业名称: </span>
|
||||||
|
<span class="text-value">{{
|
||||||
|
personData["在职毕（肄）业专业名称"]
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="text-key">在职学校所在国家: </span>
|
||||||
|
<span class="text-value">{{ personData.在职学校所在国家 }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="item-title-p">技术技能</p>
|
||||||
|
<div class="info-table-box">
|
||||||
|
<table class="info-table">
|
||||||
|
<tr>
|
||||||
|
<td class="text-key" style="width: 160px">最高专业技术资格名: </td>
|
||||||
|
<td class="text-value">{{ personData["最高专业技术资格名称"] }}</td>
|
||||||
|
<td class="text-key">等级: </td>
|
||||||
|
<td class="text-value">{{ personData["最高专业技术资格等级"] }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="text-key" style="width: 160px">最高职业技能等级名: </td>
|
||||||
|
<td class="text-value">{{ personData["最高职业技能等级名称"] }}</td>
|
||||||
|
<td class="text-key">级别: </td>
|
||||||
|
<td class="text-value">{{ personData["最高职业技能等级级别"] }}</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="item-title-p">备注</p>
|
||||||
|
<p class="last-p">{{ personData["备注说明"] }}</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
props: ["data"],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
personData: this.data,
|
||||||
}
|
};
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.info-box {
|
||||||
|
border: 1px solid #ebebeb;
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 10px 20px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-box > div {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-body {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-key {
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-value {
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-table-box {
|
||||||
|
margin-top: 20px;
|
||||||
|
border: 1px solid #ebebeb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-table {
|
||||||
|
padding: 10px 20px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-table td {
|
||||||
|
border-width: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.info-table tr {
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-table tr td:nth-child(odd) {
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-table tr td:nth-child(even) {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-table tr td:nth-child(6) {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-title-p {
|
||||||
|
border-left: 4px solid #000;
|
||||||
|
padding-left: 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.last-p {
|
||||||
|
padding-left: 20px;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,29 +1,28 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="content-body">
|
<div class="content-body">
|
||||||
<div class="content-side"></div>
|
<div class="content-side">培训推荐</div>
|
||||||
<div class="content-main">
|
<div class="content-main">
|
||||||
<div>
|
<div>
|
||||||
<div class="pp-half-block1">技能地图</div>
|
<div class="pp-block1-left">
|
||||||
<div class="pp-half-block1">人才评价</div>
|
<div>
|
||||||
|
{{ personData["最高专业技术资格名称"] }}
|
||||||
|
{{ personData["最高专业技术资格等级"] }}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{{ personData["最高职业技能等级名称"] }}
|
||||||
|
{{ personData["最高职业技能等级级别"] }}
|
||||||
|
</div>
|
||||||
|
<div>待修改</div>
|
||||||
|
</div>
|
||||||
|
<div class="pp-block1-right" id="radar_chart">人才评价</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pp-block2">
|
<div class="pp-block2">
|
||||||
<div class="pp-half-block2">
|
<div class="pp-block2-left">
|
||||||
<p class="item-title-p">个人经历</p>
|
<p class="item-title-p">个人经历</p>
|
||||||
<div class="item-content-div" style="margin-right: 10px"></div>
|
<div class="item-content-div" style="margin-right: 10px"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pp-half-block2">
|
<div class="pp-block2-right">
|
||||||
<p class="item-title-p">绩效</p>
|
|
||||||
<div class="item-content-div"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="pp-block2">
|
|
||||||
<div class="pp-half-block2">
|
|
||||||
<p class="item-title-p">个人经历</p>
|
|
||||||
<div class="item-content-div" style="margin-right: 10px"></div>
|
|
||||||
</div>
|
|
||||||
<div class="pp-half-block2">
|
|
||||||
<p class="item-title-p">绩效</p>
|
<p class="item-title-p">绩效</p>
|
||||||
<div class="item-content-div"></div>
|
<div class="item-content-div"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -33,9 +32,60 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import * as echarts from "echarts";
|
||||||
export default {
|
export default {
|
||||||
|
props: ["data"],
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {
|
||||||
|
personData: this.data,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.showRadarChart();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
showRadarChart() {
|
||||||
|
let chartDom = document.getElementById("radar_chart");
|
||||||
|
let myChart = echarts.init(chartDom);
|
||||||
|
let option;
|
||||||
|
|
||||||
|
option = {
|
||||||
|
title: {
|
||||||
|
text: "Basic Radar Chart",
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ["Allocated Budget", "Actual Spending"],
|
||||||
|
},
|
||||||
|
radar: {
|
||||||
|
shape: 'circle',
|
||||||
|
indicator: [
|
||||||
|
{ name: "Sales", max: 6500 },
|
||||||
|
{ name: "Administration", max: 16000 },
|
||||||
|
{ name: "Information Technology", max: 30000 },
|
||||||
|
{ name: "Customer Support", max: 38000 },
|
||||||
|
{ name: "Development", max: 52000 },
|
||||||
|
{ name: "Marketing", max: 25000 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "Budget vs spending",
|
||||||
|
type: "radar",
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: [4200, 3000, 20000, 35000, 50000, 18000],
|
||||||
|
name: "Allocated Budget",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: [5000, 14000, 28000, 26000, 42000, 21000],
|
||||||
|
name: "Actual Spending",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -55,20 +105,42 @@ export default {
|
||||||
.content-side {
|
.content-side {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: 1100px;
|
height: 1100px;
|
||||||
background: #ffcccc;
|
border: 1px #e4e7ed solid;
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pp-half-block1 {
|
.pp-block1-left {
|
||||||
display: inline-block;
|
float: left;
|
||||||
|
margin-right: 1%;
|
||||||
border: 1px #e4e7ed solid;
|
border: 1px #e4e7ed solid;
|
||||||
/* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
|
height: 400px;
|
||||||
height: 200px;
|
width: 49%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pp-block1-right {
|
||||||
|
float: left;
|
||||||
|
border: 1px #e4e7ed solid;
|
||||||
|
height: 400px;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pp-block2 {
|
.pp-block2 {
|
||||||
margin-top: 10px;
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pp-block2-left {
|
||||||
|
float: left;
|
||||||
|
margin-right: 1%;
|
||||||
|
/* border: 1px #e4e7ed solid; */
|
||||||
|
height: 200px;
|
||||||
|
width: 49%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pp-block2-right {
|
||||||
|
float: left;
|
||||||
|
/* border: 1px #e4e7ed solid; */
|
||||||
|
height: 200px;
|
||||||
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pp-half-block2 {
|
.pp-half-block2 {
|
||||||
|
|
@ -86,7 +158,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-content-div {
|
.item-content-div {
|
||||||
/* width: 100%; */
|
width: 100%;
|
||||||
height: 80%;
|
height: 80%;
|
||||||
border: 1px #e4e7ed solid;
|
border: 1px #e4e7ed solid;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,232 @@
|
||||||
<template>
|
<template>
|
||||||
<div>在职信息</div>
|
<div class="info-body">
|
||||||
|
<div class="info-header">
|
||||||
|
<span v-if="personData.个人职级" class="header-left">
|
||||||
|
<span class="text-key">个人职级: </span>
|
||||||
|
<span class="text-value">{{ personData.个人职级 }} </span>
|
||||||
|
</span>
|
||||||
|
<span class="header-left">
|
||||||
|
<span class="text-key">用工形式: </span>
|
||||||
|
<span class="text-value">{{ personData.用工形式 }}</span>
|
||||||
|
</span>
|
||||||
|
<span class="header-right text-value"
|
||||||
|
>{{ personData.人员状态 }}
|
||||||
|
<span
|
||||||
|
class="point"
|
||||||
|
:style="{
|
||||||
|
borderColor: personData.人员状态 == '在职' ? '#09f175' : '#adadad',
|
||||||
|
}"
|
||||||
|
></span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="item-title-p">岗位信息</p>
|
||||||
|
<div class="info-box">
|
||||||
|
<div>
|
||||||
|
<span class="text-key">机构名称: </span>
|
||||||
|
<span class="text-value">{{ personData.机构名称 }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="text-key">部门名称: </span>
|
||||||
|
<span class="text-value">{{ personData.部门名称 }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="text-key">岗位名称: </span>
|
||||||
|
<span class="text-value">{{ personData.岗位名称 }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="text-key">岗位类别: </span>
|
||||||
|
<span class="text-value">{{ personData.岗位类别 }}</span>
|
||||||
|
</div>
|
||||||
|
<!-- <div>
|
||||||
|
<span class="text-key">现岗位起始时间: </span>
|
||||||
|
<span class="text-value">{{ personData.现岗位起始时间 }}</span>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="item-title-p">职务信息</p>
|
||||||
|
<div class="info-box" v-if="personData.任职单位">
|
||||||
|
<div>
|
||||||
|
<span class="text-key">任职单位: </span>
|
||||||
|
<span class="text-value">{{ personData.任职单位 }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="text-key">职务名称: </span>
|
||||||
|
<span class="text-value">{{ personData.职务名称 }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="text-key">职务属性: </span>
|
||||||
|
<span class="text-value">{{ personData.职务属性 }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="text-key">职务级别: </span>
|
||||||
|
<span class="text-value">{{ personData.职务级别 }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="text-key">任现职务级别时间: </span>
|
||||||
|
<span class="text-value">{{ personData.任现职务级别时间 }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="item-title-p">履历</p>
|
||||||
|
<div class="info-table-box">
|
||||||
|
<table class="info-table">
|
||||||
|
<tr>
|
||||||
|
<td class="text-key">参加工作时间:</td>
|
||||||
|
<td class="text-value">{{ personData.参加工作时间 }}</td>
|
||||||
|
<td class="text-key">预计退休年龄:</td>
|
||||||
|
<td class="text-value">{{ personData.预计退休年龄 }}</td>
|
||||||
|
<td class="text-key">工龄:</td>
|
||||||
|
<td class="text-value">{{ workAge }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="text-key">进入行业时间:</td>
|
||||||
|
<td class="text-value">{{ personData.进入行业时间 }}</td>
|
||||||
|
<td class="text-key">行业入职类别:</td>
|
||||||
|
<td class="text-value">{{ personData.行业入职类别 }}</td>
|
||||||
|
<td class="text-key"></td>
|
||||||
|
<td class="text-value"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="text-key">到本单位时间:</td>
|
||||||
|
<td class="text-value">{{ personData.到本单位时间 }}</td>
|
||||||
|
<td class="text-key">本单位入职类别:</td>
|
||||||
|
<td class="text-value">{{ personData.本单位入职类别 }}</td>
|
||||||
|
<td class="text-key">厂龄:</td>
|
||||||
|
<td class="text-value">{{ factoryAge }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="text-key">任现岗位时间:</td>
|
||||||
|
<td class="text-value">{{ personData.现岗位起始时间 }}</td>
|
||||||
|
<td class="text-key"></td>
|
||||||
|
<td class="text-value"></td>
|
||||||
|
<td class="text-key">岗龄:</td>
|
||||||
|
<td class="text-value">{{ jobAge }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="text-key">档案保管机构:</td>
|
||||||
|
<td class="text-value">{{ personData.档案保管机构 }}</td>
|
||||||
|
<td class="text-key"></td>
|
||||||
|
<td class="text-value"></td>
|
||||||
|
<td class="text-key"></td>
|
||||||
|
<td class="text-value"></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
props: ["data"],
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {
|
||||||
|
personData: this.data,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
computed: {
|
||||||
|
workAge: function () {
|
||||||
|
return this.getAge(this.personData.参加工作时间);
|
||||||
|
},
|
||||||
|
factoryAge: function () {
|
||||||
|
return this.getAge(this.personData.到本单位时间);
|
||||||
|
},
|
||||||
|
jobAge: function () {
|
||||||
|
return this.getAge(this.personData.现岗位起始时间);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getAge(birthday) {
|
||||||
|
//出生时间 毫秒
|
||||||
|
let birthDayTime = new Date(birthday).getTime();
|
||||||
|
if (birthDayTime !== birthDayTime) {
|
||||||
|
// NaN
|
||||||
|
return "-";
|
||||||
|
}
|
||||||
|
//当前时间 毫秒
|
||||||
|
let nowTime = new Date().getTime();
|
||||||
|
//一年毫秒数(365 * 86400000 = 31536000000)
|
||||||
|
return Math.ceil((nowTime - birthDayTime) / 31536000000);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.info-body {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-header {
|
||||||
|
/* height: 35px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
margin-right: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
float: right;
|
||||||
|
margin-right: 20px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-key {
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-value {
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.point {
|
||||||
|
content: " ";
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 3px;
|
||||||
|
border-radius: 3px; /*设置圆角*/
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1000;
|
||||||
|
right: 0;
|
||||||
|
margin-right: -8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-box {
|
||||||
|
border: 1px solid #ebebeb;
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 10px 20px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-box > div {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-table-box {
|
||||||
|
margin-top: 20px;
|
||||||
|
border: 1px solid #ebebeb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-table {
|
||||||
|
padding: 10px 20px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-table td {
|
||||||
|
border-width: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-table tr {
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-table td {
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-title-p {
|
||||||
|
border-left: 4px solid #000;
|
||||||
|
padding-left: 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -10,19 +10,20 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="basic-msg-box">
|
<div class="basic-msg-box">
|
||||||
<p>
|
<p>
|
||||||
<span class="basic-msg-item">{{ personData.name }}</span>
|
<span class="basic-msg-item">{{ personData["姓名"] }}</span>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<span class="basic-msg-item">{{ personData.sex }}</span>
|
<span class="basic-msg-item">{{ personData["性别"] }}</span>
|
||||||
<span class="basic-msg-item">{{ personData.age }}岁</span>
|
<span class="basic-msg-item">{{ personAge }}岁</span>
|
||||||
<span class="basic-msg-item">{{ personData.education }}</span>
|
<span class="basic-msg-item">{{ personEd }}</span>
|
||||||
<span class="basic-msg-item">{{
|
<span class="basic-msg-item">{{ personData["政治面貌"] }}</span>
|
||||||
personData.political_identity
|
|
||||||
}}</span>
|
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<span class="basic-msg-item">工号：{{ workData.person_id }}</span>
|
<span class="basic-msg-item">{{ personData["部门名称"] }}</span>
|
||||||
<span class="basic-msg-item">手机号：{{ personData.phone }}</span>
|
<span class="basic-msg-item">{{ personData["岗位名称"] }}</span>
|
||||||
|
<span class="basic-msg-item"
|
||||||
|
>手机号：{{ personData["联系电话"] }}</span
|
||||||
|
>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</el-header>
|
</el-header>
|
||||||
|
|
@ -33,7 +34,7 @@
|
||||||
<el-tab-pane label="人事变动记录" name="ComChange"></el-tab-pane>
|
<el-tab-pane label="人事变动记录" name="ComChange"></el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
|
|
||||||
<component :is="comName"></component>
|
<component :is="comName" :data="personData"></component>
|
||||||
</el-container>
|
</el-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -43,6 +44,8 @@ import ComWorkInformation from "./components/WorkInformation.vue";
|
||||||
import ComPersonInformation from "./components/PersonInformation.vue";
|
import ComPersonInformation from "./components/PersonInformation.vue";
|
||||||
import ComChange from "./components/Change.vue";
|
import ComChange from "./components/Change.vue";
|
||||||
|
|
||||||
|
import * as personApi from "@/api/person";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "person",
|
name: "person",
|
||||||
components: {
|
components: {
|
||||||
|
|
@ -55,33 +58,99 @@ export default {
|
||||||
return {
|
return {
|
||||||
comName: "ComPersonPicture",
|
comName: "ComPersonPicture",
|
||||||
personData: {
|
personData: {
|
||||||
age: 49,
|
机构名称: "湖北中烟工业有限责任公司恩施卷烟厂",
|
||||||
education: "大学",
|
部门名称: "厂办公室",
|
||||||
id_card: "422827197309031821",
|
岗位名称: "档案管理员",
|
||||||
major: "人力资源管理",
|
现岗位起始时间: "2008-12-01",
|
||||||
name: "杨秀芬",
|
姓名: "杨秀芬",
|
||||||
nation: "苗族",
|
用工形式: "劳动关系",
|
||||||
phone: "13986854131",
|
人员状态: "在职",
|
||||||
political_identity: "中共党员",
|
个人职级: "正科级",
|
||||||
sex: "女",
|
岗位类别: "专业技术类",
|
||||||
working_date: "1994-05-01",
|
任职单位: "1",
|
||||||
working_years: 28.24,
|
职务名称: "1",
|
||||||
},
|
职务属性: "1",
|
||||||
workData: {
|
职务级别: "1",
|
||||||
person_id: "1242280311961615",
|
任现职务级别时间: "1",
|
||||||
archives_unit: "恩施卷烟厂",
|
性别: "女",
|
||||||
department: "厂办公室",
|
出生日期: "1973-09-03",
|
||||||
employer: "恩施卷烟厂",
|
证件类型: "身份证",
|
||||||
employment_relationship: "在职",
|
证件号码: "422827197309031821",
|
||||||
job: "档案管理员",
|
民族: "苗族",
|
||||||
team: "",
|
籍贯: "湖北来凤",
|
||||||
wage_relation_unit: "恩施卷烟厂",
|
出生地: "湖北来凤",
|
||||||
|
参加工作时间: "1994-05-01",
|
||||||
|
进入行业时间: "1998-06-01",
|
||||||
|
到本单位时间: "1998-06-01",
|
||||||
|
行业入职类别: "社会招聘",
|
||||||
|
本单位入职类别: "社会招聘",
|
||||||
|
联系电话: "13986854131",
|
||||||
|
国籍: "中国",
|
||||||
|
预计退休年龄: "55",
|
||||||
|
是否本单位集中保管档案: "是",
|
||||||
|
档案保管机构: "本级人事部门",
|
||||||
|
政治面貌: "中共党员",
|
||||||
|
入党时间: "2012-12-18",
|
||||||
|
最高全日制学历: "初中",
|
||||||
|
最高全日制学位: "无",
|
||||||
|
"全日制毕（肄）业学校（单位）名称": "1",
|
||||||
|
全日制学校所在国家: "1",
|
||||||
|
"全日制毕（肄）业专业名称": "1",
|
||||||
|
最高在职学历: "大学",
|
||||||
|
最高在职学位: "无",
|
||||||
|
"在职毕（肄）业学校（单位）名称": "华中农业大学",
|
||||||
|
在职学校所在国家: "中国",
|
||||||
|
"在职毕（肄）业专业名称": "人力资源管理",
|
||||||
|
最高专业技术资格名称: "助理馆员",
|
||||||
|
最高专业技术资格等级: "初级",
|
||||||
|
最高职业技能等级名称: "1",
|
||||||
|
最高职业技能等级级别: "1",
|
||||||
|
备注说明: "1",
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
mounted() {
|
||||||
|
// 发送请求
|
||||||
|
personApi.getPersonData({
|
||||||
|
"id_card": this.$store.state.user.id_card
|
||||||
|
}).then(
|
||||||
|
(res)=> {
|
||||||
|
this.personData = res.data;
|
||||||
|
},
|
||||||
|
(err) => {
|
||||||
|
console.log('err:', err);
|
||||||
|
}
|
||||||
|
)
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
getPicUrl() {
|
getPicUrl() {
|
||||||
return require("@/assets/images/" + this.personData.sex + ".png");
|
return require("@/assets/images/" + this.personData["性别"] + ".png");
|
||||||
|
},
|
||||||
|
personAge() {
|
||||||
|
return this.getAge(this.personData["出生日期"]);
|
||||||
|
},
|
||||||
|
personEd() {
|
||||||
|
let education = "-";
|
||||||
|
if (this.personData["最高在职学历"]) {
|
||||||
|
education = this.personData["最高在职学历"];
|
||||||
|
} else if (this.personData["最高全日制学历"]) {
|
||||||
|
education = this.personData["最高全日制学历"];
|
||||||
|
}
|
||||||
|
return education;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getAge(birthday) {
|
||||||
|
//出生时间 毫秒
|
||||||
|
let birthDayTime = new Date(birthday).getTime();
|
||||||
|
if (birthDayTime !== birthDayTime) {
|
||||||
|
// NaN
|
||||||
|
return "-";
|
||||||
|
}
|
||||||
|
//当前时间 毫秒
|
||||||
|
let nowTime = new Date().getTime();
|
||||||
|
//一年毫秒数(365 * 86400000 = 31536000000)
|
||||||
|
return Math.ceil((nowTime - birthDayTime) / 31536000000);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
@ -109,6 +178,4 @@ export default {
|
||||||
.basic-msg-item {
|
.basic-msg-item {
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -38,8 +38,8 @@ module.exports = {
|
||||||
},
|
},
|
||||||
proxy: {
|
proxy: {
|
||||||
'/': {
|
'/': {
|
||||||
target: 'http://127.0.0.1:4523/m1/1256020-0-default/',
|
// target: 'http://127.0.0.1:4523/m1/1256020-0-default/',
|
||||||
// target: 'http://192.168.31.102:8000',
|
target: 'http://192.168.31.102:8000',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
pathRewrite: {
|
pathRewrite: {
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue