dshclm
3 weeks ago
parent
fef92d181e
commit
2dcc2e2eeb
@ -0,0 +1,171 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
|
||||
<head>
|
||||
<th:block th:include="include :: header('调岗记录')" />
|
||||
<th:block th:include="include :: element-css" />
|
||||
</head>
|
||||
<style>
|
||||
.ibox-content{
|
||||
height: 100%;
|
||||
}
|
||||
.max-box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.min-box{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.left-card{
|
||||
width: 48%;
|
||||
height: 100%;
|
||||
}
|
||||
.right-card{
|
||||
width: 48%;
|
||||
height: 100%;
|
||||
}
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 480px;
|
||||
}
|
||||
.weight{
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.diff { color: red; }
|
||||
.same { color: green; }
|
||||
</style>
|
||||
<body class="white-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight ibox-content" id="app">
|
||||
<div class="max-box">
|
||||
<div class="min-box">
|
||||
<el-card class="left-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span style="font-size: 16px;font-weight: bold">修改前</span>
|
||||
</div>
|
||||
<div v-if="userBeforeList.length > 0">
|
||||
<div v-for="(item, index) in userBeforeList" :key="item.userId" class="text item">
|
||||
<p class="rightCard">
|
||||
<span class="weight">姓名: </span>
|
||||
<span :class="getDiffClass(item.name, 'name', index)">{{ item.name }}</span>
|
||||
</p>
|
||||
<p class="rightCard">
|
||||
<span class="weight">身份证号: </span>
|
||||
<span :class="getDiffClass(item.cerno, 'cerno', index)">{{ item.cerno }}</span>
|
||||
</p>
|
||||
<p class="rightCard">
|
||||
<span class="weight">联系方式: </span>
|
||||
<span :class="getDiffClass(item.phone, 'phone', index)">{{ item.phone }}</span>
|
||||
</p>
|
||||
<p class="rightCard">
|
||||
<span class="weight">已（拟）任涉密岗位: </span>
|
||||
<span :class="getDiffClass(item.smPost, 'smPost', index)">{{ item.smPost }}</span>
|
||||
</p>
|
||||
<p class="rightCard">
|
||||
<span class="weight">涉密等级: </span>
|
||||
<span :class="getDiffClass(item.smGrade, 'smGrade', index)">{{ item.smGrade }}</span>
|
||||
</p>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty v-else description="暂无数据"></el-empty>
|
||||
</el-card>
|
||||
|
||||
<el-card class="right-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span style="font-size: 16px;font-weight: bold">修改后</span>
|
||||
</div>
|
||||
<div v-if="userBeforeList.length > 0">
|
||||
<div v-for="(item, index) in userAfterList" :key="item.userId" class="text item">
|
||||
<p class="rightCard">
|
||||
<span class="weight">姓名: </span>
|
||||
<span :class="getDiffClass(item.name, 'name', index)">{{ item.name }}</span>
|
||||
</p>
|
||||
<p class="rightCard">
|
||||
<span class="weight">身份证号: </span>
|
||||
<span :class="getDiffClass(item.cerno, 'cerno', index)">{{ item.cerno }}</span>
|
||||
</p>
|
||||
<p class="rightCard">
|
||||
<span class="weight">联系方式: </span>
|
||||
<span :class="getDiffClass(item.phone, 'phone', index)">{{ item.phone }}</span>
|
||||
</p>
|
||||
<p class="rightCard">
|
||||
<span class="weight">已（拟）任涉密岗位: </span>
|
||||
<span :class="getDiffClass(item.smPost, 'smPost', index)">{{ item.smPost }}</span>
|
||||
</p>
|
||||
<p class="rightCard">
|
||||
<span class="weight">涉密等级: </span>
|
||||
<span :class="getDiffClass(item.smGrade, 'smGrade', index)">{{ item.smGrade }}</span>
|
||||
</p>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty v-else description="暂无数据"></el-empty>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: element-js" />
|
||||
<script th:inline="javascript">
|
||||
var app = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
userAfterList:[],
|
||||
userBeforeList:[],
|
||||
diffData: [],
|
||||
},
|
||||
mounted(){
|
||||
this.userAfterList = [[${userRecordDTO}]].applyAfterList
|
||||
this.userBeforeList = [[${userRecordDTO}]].applyBeforeList
|
||||
console.log(this.userAfterList)
|
||||
console.log(this.userBeforeList)
|
||||
this.findDifferences()
|
||||
},
|
||||
methods:{
|
||||
findDifferences() {
|
||||
// 将差异数据初始化为空数组
|
||||
this.diffData = this.userBeforeList.map((beforeItem, index) => {
|
||||
let afterItem = this.userAfterList[index];
|
||||
let diff = {};
|
||||
|
||||
for (let key in beforeItem) {
|
||||
if (beforeItem[key] !== afterItem[key]) {
|
||||
diff[key] = {
|
||||
before: beforeItem[key],
|
||||
after: afterItem[key]
|
||||
};
|
||||
}
|
||||
}
|
||||
return diff;
|
||||
});
|
||||
},
|
||||
getDiffClass(value, key, index) {
|
||||
if (this.diffData[index] && this.diffData[index][key]) {
|
||||
return value === this.diffData[index][key].after ? 'diff' : 'same';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in new issue