mirror of
https://gitee.com/myxzgzs/boyue_jnpf.git
synced 2025-08-09 15:52:42 +08:00
490 lines
14 KiB
Vue
490 lines
14 KiB
Vue
<template>
|
||
<view>
|
||
<u-time-line>
|
||
<u-time-line-item nodeTop="2" class="u-p-b-20" v-for="item,index in list" :key="index">
|
||
<template v-slot:node>
|
||
<view class="u-node" :style="{ background: getTimeLineTagColor(item.type) }"></view>
|
||
</template>
|
||
<template v-slot:content>
|
||
<view class="u-font-24 content">
|
||
<view class="start" v-if="item.type == '0'">
|
||
<view class="u-m-b-20 u-p-l-8 log-title u-flex">
|
||
<text>创建</text>
|
||
<text>{{item.creatorTime ? $u.timeFormat(item.creatorTime, 'yyyy-mm-dd hh:MM:ss'):''}}</text>
|
||
</view>
|
||
<view class="u-flex avatar-box" style="background-color: #F5F5F5;">
|
||
<u-avatar :src="baseURL + item.headIcon" size="mini" mode="circle"
|
||
class="avatar"></u-avatar>
|
||
<text class="u-m-l-8">{{item.creatorUserName}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="avatar-block" v-else>
|
||
<view class="u-m-b-20 u-p-l-8 u-flex log-title">
|
||
<text>编辑</text>
|
||
<text>{{item.creatorTime ? $u.timeFormat(item.creatorTime, 'yyyy-mm-dd hh:MM:ss'):''}}</text>
|
||
</view>
|
||
<view class="u-flex avatar-box ">
|
||
<view class="u-flex">
|
||
<u-avatar :src="baseURL + item.headIcon" size="mini" mode="circle"
|
||
class="avatar"></u-avatar>
|
||
<text class="u-m-l-8">{{item.creatorUserName}}</text>
|
||
</view>
|
||
<view>
|
||
<text class="u-m-l-8">{{`有`}}</text>
|
||
<text class="u-m-l-8" style="color: red;">{{item.dataLog.length}}</text>
|
||
<text class="u-m-l-8">处更改</text>
|
||
</view>
|
||
</view>
|
||
<view class="dataLog-child">
|
||
<view class="dataLog-item" v-for="child,i in item.dataLog" :key="i">
|
||
<!-- 子表 -->
|
||
<view class="child-line" v-if="child.jnpfKey === 'table'">
|
||
<view class="field-child">
|
||
<text class="table-name">{{child.fieldName}}：</text>
|
||
<view class="u-flex table-detail">
|
||
<text>已修改</text>
|
||
<view class="u-m-l-20 approver-list-r u-flex" @click="openChild(child)">
|
||
<view class="txt">详情</view>
|
||
<text class="icon-ym icon-ym-right"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 主表 -->
|
||
<view class="ordinary-field" v-else>
|
||
<view class="u-m-b-10 left">{{child.fieldName}}：</view>
|
||
<view class="right">
|
||
<view class="val" v-if="child.nameModified">
|
||
<text style="color: #efbd47;">已修改</text>
|
||
</view>
|
||
<view class="val" v-else>
|
||
<template v-if="child.jnpfKey === 'sign'">
|
||
<view v-if="child.oldData !== child.newData">
|
||
<text v-if="child.oldData" class="u-m-r-8 txt line-through"
|
||
@click="previewImage(child.oldData,child.jnpfKey)">
|
||
旧签名
|
||
</text>
|
||
<text v-if="child.newData">
|
||
<text>修改为</text>
|
||
<text class="u-m-l-8 txt"
|
||
@click="previewImage(child.newData,child.jnpfKey)">
|
||
新签名
|
||
</text>
|
||
</text>
|
||
</view>
|
||
<text v-if="child.oldData === child.newData"
|
||
@click="previewImage(child.oldData,child.jnpfKey)">签名</text>
|
||
</template>
|
||
<template v-else-if="child.jnpfKey === 'signature'">
|
||
<view v-if="child.oldData !== child.newData">
|
||
<text v-if="child.oldData" class="u-m-r-8 txt line-through"
|
||
@click="previewImage(child.oldData)">
|
||
旧签章
|
||
</text>
|
||
<text v-if="child.newData">
|
||
<text>修改为</text>
|
||
<text class="u-m-l-8 txt"
|
||
@click="previewImage(child.newData)">
|
||
新签章
|
||
</text>
|
||
</text>
|
||
</view>
|
||
<text v-if="child.oldData === child.newData"
|
||
@click="previewImage(child.oldData)">签章</text>
|
||
</template>
|
||
<template v-else>
|
||
<text v-if="child.oldData !== child.newData">
|
||
<text class="line-through">{{child.oldData}}</text>
|
||
<text class="u-m-l-16 u-m-r-16"
|
||
v-if="!child.oldData || child.newData ">修改为</text>
|
||
<text>{{child.newData}}</text>
|
||
</text>
|
||
<text v-if="child.oldData === child.newData">未修改</text>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</u-time-line-item>
|
||
</u-time-line>
|
||
</view>
|
||
<uni-popup ref="flowStepPopup" background-color="#fff" border-radius="8rpx 8rpx 0 0" :is-mask-click="false">
|
||
<view class="timeLine-popup-content u-flex-col">
|
||
<view class="u-flex head-title notice-warp">
|
||
<text class="text">修改详情</text>
|
||
<text class="text icon-ym icon-ym-fail" @click="popupClose"></text>
|
||
</view>
|
||
<view class="table-content">
|
||
<view class="table-content-inner" v-for="(item,index) in chidData">
|
||
<view class="table-content-title">
|
||
{{item.jnpf_type == '0' ? '新增' : item.jnpf_type == '2' ? '删除' : '编辑'}}
|
||
</view>
|
||
<view class="table-field u-flex-col">
|
||
<view class="u-flex table-field-item" v-for="(field,i) in item.chidField" :key="i"
|
||
:style="{backgroundColor:item.jnpf_type == '0'?'#defee9':item.jnpf_type == '2'?'#ffd2d2':''}">
|
||
<view class="label">{{field.label}}</view>
|
||
<!-- 显示已修改，未修改 -->
|
||
<view class="val" v-if="field.nameModified">
|
||
<text v-if="field.oldData !== field.newData" style="color: #efbd47;"
|
||
:class="item.jnpf_type == '2' ? 'line-through' : ''">已修改</text>
|
||
<text v-if="field.oldData === field.newData"
|
||
:class="item.jnpf_type == '2' ? 'line-through' : ''">{{item.jnpf_type == 0 ? '' : '未修改'}}</text>
|
||
</view>
|
||
<view class="val" v-else>
|
||
<!-- 签名，电子签章 -->
|
||
<template v-if="field.jnpfKey === 'sign'">
|
||
<view v-if="field.oldData !== field.newData" class="val">
|
||
<text v-if="field.oldData" class="u-m-r-8 txt"
|
||
:class="item.jnpf_type == '2' || item.jnpf_type == '1' ? 'line-through' : ''"
|
||
@click="previewImage(field.oldData,field.jnpfKey)">
|
||
旧签名
|
||
</text>
|
||
<template class="" v-if="item.jnpf_type != 2">
|
||
<text v-if="field.newData && field.oldData">修改为</text>
|
||
<text class="u-m-l-8 txt"
|
||
@click="previewImage(field.newData,field.jnpfKey)">
|
||
新签名
|
||
</text>
|
||
</template>
|
||
</view>
|
||
<text @click="previewImage(field.oldData,field.jnpfKey)" class="txt"
|
||
v-if="field.oldData === field.newData">{{item.jnpf_type == 0 ||(!field.oldData && !field.newData)? '' : '签名'}}</text>
|
||
</template>
|
||
<template v-else-if="field.jnpfKey === 'signature'">
|
||
<view v-if="field.oldData !== field.newData" class="val">
|
||
<text v-if="field.oldData" class="u-m-r-8 txt txt-left"
|
||
:class="item.jnpf_type == '2' || item.jnpf_type == '1' ? 'line-through' : ''"
|
||
@click="previewImage(field.oldData)">
|
||
旧签章
|
||
</text>
|
||
<template class="" v-if="item.jnpf_type != 2">
|
||
<text v-if="field.newData && field.oldData">修改为</text>
|
||
<text class="u-m-l-8 txt text-right" @click="previewImage(field.newData)">
|
||
新签章
|
||
</text>
|
||
</template>
|
||
</view>
|
||
<text @click="previewImage(field.oldData)" class="txt"
|
||
v-if="field.oldData === field.newData">{{item.jnpf_type == 0 ||(!field.oldData && !field.newData) ? '' : '签章'}}</text>
|
||
</template>
|
||
<!-- 签名，电子签章end -->
|
||
<template v-else>
|
||
<view class="u-flex modify-box" v-if="field.oldData !== field.newData ">
|
||
<view class="modify modify-left"
|
||
:style="{'text-align':item.jnpf_type == '2'? 'end' : 'center'}"
|
||
:class=" item.jnpf_type == '2' || item.jnpf_type == '1' ? 'line-through' : ''"
|
||
v-if="field.oldData">
|
||
{{field.oldData}}
|
||
</view>
|
||
<view v-if="field.newData && field.oldData" class="modify-center">修改为
|
||
</view>
|
||
<view class="modify modify-right"
|
||
:style="{'text-align': item.jnpf_type == '0'? 'end' : 'center'}"
|
||
:class="item.jnpf_type == '2' ? 'line-through' : ''" v-if="field.newData">
|
||
{{field.newData}}
|
||
</view>
|
||
</view>
|
||
<view v-if="field.oldData === field.newData" class="modify-else"
|
||
:class="item.jnpf_type == '2' ? 'line-through' : ''">
|
||
{{field.oldData}}
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</template>
|
||
<script>
|
||
import {
|
||
recordList
|
||
} from '@/api/workFlow/flowBefore'
|
||
|
||
|
||
import {
|
||
useDefineSetting
|
||
} from '@/utils/useDefineSetting';
|
||
export default {
|
||
props: {
|
||
dataLogList: {
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
useDefine: useDefineSetting(),
|
||
recordList: [],
|
||
chidData: [],
|
||
chidField: [],
|
||
childItem: {}
|
||
}
|
||
},
|
||
computed: {
|
||
baseURL() {
|
||
return this.define.baseURL
|
||
},
|
||
list() {
|
||
let dataLogList = JSON.parse(JSON.stringify(this.dataLogList))
|
||
if (dataLogList.length) {
|
||
let dataLogData = dataLogList.map(o => ({
|
||
...o,
|
||
dataLog: JSON.parse(o.dataLog)
|
||
}))
|
||
return dataLogData
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
previewImage(url, jnpfKey) {
|
||
// #ifndef MP
|
||
let baseURL = jnpfKey == 'sign' ? url : (this.baseURL + url)
|
||
uni.previewImage({
|
||
urls: [baseURL]
|
||
});
|
||
// #endif
|
||
},
|
||
openChild(child) {
|
||
this.childItem = child || {}
|
||
let chidData = this.childItem.chidData || [];
|
||
let chidField = this.childItem.chidField || [];
|
||
let data = chidData.map(o => {
|
||
let item = {
|
||
jnpf_type: o.jnpf_type,
|
||
chidField: []
|
||
};
|
||
chidField.forEach(chid => {
|
||
if (o.hasOwnProperty(chid.prop)) {
|
||
let val = o[chid.prop]
|
||
if (chid.jnpfKey === "calculate" && !chid.prop) return
|
||
let newData = {
|
||
...chid,
|
||
newData: val,
|
||
oldData: o[`jnpf_old_${chid.prop}`] ? o[`jnpf_old_${chid.prop}`] : ''
|
||
};
|
||
item.chidField.push(newData);
|
||
} else {
|
||
item.chidField.push({
|
||
...chid,
|
||
newData: '',
|
||
oldData: ''
|
||
});
|
||
}
|
||
});
|
||
return item;
|
||
});
|
||
this.chidData = data
|
||
this.$nextTick(() => {
|
||
this.$refs.flowStepPopup.open('bottom')
|
||
})
|
||
},
|
||
getTimeLineTagColor(status) {
|
||
return status == 0 ? '#08AF28' : '#0177FF';
|
||
},
|
||
popupClose() {
|
||
this.$refs.flowStepPopup.close()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.line-through {
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.modify-else {
|
||
overflow: hidden;
|
||
word-break: break-all;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.timeLine-popup-content {
|
||
height: 1200rpx;
|
||
overflow-y: scroll;
|
||
|
||
.head-title {
|
||
justify-content: space-between;
|
||
color: #333333;
|
||
padding: 0 20rpx;
|
||
/* #ifdef APP */
|
||
// padding: 20rpx 0;
|
||
/* #endif */
|
||
height: 80rpx;
|
||
}
|
||
|
||
.notice-warp {
|
||
top: -2rpx;
|
||
height: 80rpx;
|
||
// border-bottom: 1rpx solid #ececec;
|
||
}
|
||
|
||
.table-content {
|
||
padding: 0 20rpx;
|
||
margin-top: 80rpx;
|
||
|
||
.table-content-inner {
|
||
margin-bottom: 40rpx;
|
||
|
||
.table-content-title {
|
||
min-height: 80rpx;
|
||
background-color: #f5f5f5;
|
||
padding: 16rpx 20rpx;
|
||
border-radius: 8rpx 8rpx 0 0;
|
||
color: #303133;
|
||
}
|
||
|
||
.table-field {
|
||
.table-field-item {
|
||
min-height: 80rpx;
|
||
padding: 16rpx 20rpx;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 1rpx solid #ececec;
|
||
color: #606266;
|
||
|
||
&:last-child {
|
||
border-radius: 0rpx 0rpx 8rpx 8rpx;
|
||
}
|
||
|
||
.label {
|
||
flex: 0.3;
|
||
}
|
||
|
||
.val {
|
||
font-size: 24rpx;
|
||
text-align: right;
|
||
flex: 0.7;
|
||
|
||
.txt {
|
||
color: #4aa8ff;
|
||
}
|
||
|
||
.modify-box {
|
||
justify-content: flex-end;
|
||
|
||
.modify {
|
||
padding: 8rpx;
|
||
border-radius: 8rpx;
|
||
color: #606266;
|
||
}
|
||
|
||
.modify-center {
|
||
width: 100rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.modify-right {
|
||
width: 200rpx;
|
||
word-wrap: break-word;
|
||
background-color: #defee9;
|
||
text-align: center;
|
||
}
|
||
|
||
.modify-left {
|
||
width: 200rpx;
|
||
word-wrap: break-word;
|
||
background-color: #ffd2d2;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.u-node {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.content {
|
||
.start {
|
||
.log-title {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
// box-shadow: 0 6rpx 12rpx rgba(2, 7, 28, 0.16);
|
||
.avatar-box {
|
||
padding: 20rpx;
|
||
}
|
||
}
|
||
|
||
.avatar-block {
|
||
.log-title {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
border-radius: 8rpx;
|
||
// box-shadow: 0 6rpx 12rpx rgba(2, 7, 28, 0.16);
|
||
|
||
.avatar-box {
|
||
justify-content: space-between;
|
||
background-color: #F5F5F5;
|
||
border-bottom: 1rpx solid #ececec;
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.dataLog-child {
|
||
background-color: #F5F5F5;
|
||
// padding: 0 20rpx;
|
||
|
||
.dataLog-item {
|
||
padding: 20rpx;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.ordinary-field {
|
||
align-items: flex-start;
|
||
|
||
.left {
|
||
flex: 0.2;
|
||
}
|
||
|
||
.right {
|
||
flex: 0.8;
|
||
|
||
.val {
|
||
font-size: 24rpx;
|
||
flex: 0.8;
|
||
|
||
.txt {
|
||
color: #4aa8ff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.child-line {
|
||
.field-child {
|
||
justify-content: space-between;
|
||
|
||
.table-detail {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.approver-list-r {
|
||
height: 46rpx;
|
||
|
||
.txt {
|
||
height: 36rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |