dshclm
8 months ago
parent
c3909964c3
commit
090e552374
@ -0,0 +1,179 @@
|
||||
<!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-for="(item, index) in userBeforeList" :key="item.userId" class="text item">
|
||||
<p class="leftCard">
|
||||
<span class="weight">人员姓名: </span>
|
||||
<span :class="getDiffClass(item.userName, 'userName', index)">{{ item.userName }}</span>
|
||||
</p>
|
||||
<p class="leftCard">
|
||||
<span class="weight">身份证号: </span>
|
||||
<span :class="getDiffClass(item.cerno, 'cerno', index)">{{ item.cerno }}</span>
|
||||
</p>
|
||||
<p class="leftCard">
|
||||
<span class="weight">手机: </span>
|
||||
<span :class="getDiffClass(item.phonenumber, 'phonenumber', index)">{{ item.phonenumber }}</span>
|
||||
</p>
|
||||
<p class="leftCard">
|
||||
<span class="weight">性别: </span>
|
||||
<span :class="getDiffClass(item.sex, 'sex', index)">{{ item.sex == '0' ? '男' : '女' }}</span>
|
||||
</p>
|
||||
<p class="leftCard">
|
||||
<span class="weight">籍贯: </span>
|
||||
<span :class="getDiffClass(item.userarea, 'userarea', index)">{{ item.userarea }}</span>
|
||||
</p>
|
||||
<p class="leftCard">
|
||||
<span class="weight">是否具有出入境备案: </span>
|
||||
<span :class="getDiffClass(item.entryexitFiling, 'entryexitFiling', index)">{{ item.entryexitFiling == '1' ? '是' : '否' }}</span>
|
||||
</p>
|
||||
<p class="leftCard">
|
||||
<span class="weight">是否持有护照或港澳通行证: </span>
|
||||
<span :class="getDiffClass(item.havePassport, 'havePassport', index)">{{ item.havePassport == '1' ? '是' : '否' }}</span>
|
||||
</p>
|
||||
<hr>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="right-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span style="font-size: 16px;font-weight: bold">修改后</span>
|
||||
</div>
|
||||
<div v-for="(item, index) in userAfterList" :key="item.userId" class="text item">
|
||||
<p class="rightCard">
|
||||
<span class="weight">人员姓名: </span>
|
||||
<span :class="getDiffClass(item.userName, 'userName', index)">{{ item.userName }}</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.phonenumber, 'phonenumber', index)">{{ item.phonenumber }}</span>
|
||||
</p>
|
||||
<p class="rightCard">
|
||||
<span class="weight">性别: </span>
|
||||
<span :class="getDiffClass(item.sex, 'sex', index)">{{ item.sex == '0' ? '男' : '女' }}</span>
|
||||
</p>
|
||||
<p class="rightCard">
|
||||
<span class="weight">籍贯: </span>
|
||||
<span :class="getDiffClass(item.userarea, 'userarea', index)">{{ item.userarea }}</span>
|
||||
</p>
|
||||
<p class="rightCard">
|
||||
<span class="weight">是否具有出入境备案: </span>
|
||||
<span :class="getDiffClass(item.entryexitFiling, 'entryexitFiling', index)">{{ item.entryexitFiling == '1' ? '是' : '否' }}</span>
|
||||
</p>
|
||||
<p class="rightCard">
|
||||
<span class="weight">是否持有护照或港澳通行证: </span>
|
||||
<span :class="getDiffClass(item.havePassport, 'havePassport', index)">{{ item.havePassport == '1' ? '是' : '否' }}</span>
|
||||
</p>
|
||||
<hr>
|
||||
</div>
|
||||
</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}]].userAfterList
|
||||
this.userBeforeList = [[${userRecordDTO}]].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