158 lines
4.0 KiB
Vue
158 lines
4.0 KiB
Vue
<template>
|
||
<div class="geg-flow-history">
|
||
<div v-for="(item, index) in comments" :class="{ sep: index !== 0 }" class="item">
|
||
<template v-if="mode === 'simple'">
|
||
<div class="row">
|
||
<div class="col-node">{{ item.taskName }}</div>
|
||
<div class="col-1" style="display: flex;">
|
||
{{ item.approveUserName }}
|
||
<a-image v-if="item.approveStampUrl" class="signature" :src="item.approveStampUrl"></a-image>
|
||
</div>
|
||
<div class="col-2">{{ parseTime(item.approveTime) }}</div>
|
||
<div class="col-3">
|
||
<span :class="getTagCls(item)">
|
||
[{{ item.approveResult }}]
|
||
<template v-if="item.approveComment != '' && item.approveComment != null">
|
||
[补充意见]
|
||
</template>
|
||
</span>
|
||
{{ item.approveComment }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template v-if="mode === 'complex'">
|
||
<div class="row">
|
||
<div class="col-1">{{ item.approveUserName }}</div>
|
||
<div class="col-2">用时：1小时10分</div>
|
||
<div class="col-3 agree">{{ item.taskName }}</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-1 position"></div>
|
||
<div class="col-2">{{ parseTime(item.approveTime) }}</div>
|
||
<div class="col-3">{{ item.approveComment }}</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="less">
|
||
.geg-flow-history {
|
||
.signature {
|
||
height: 20px;
|
||
width: 50px;
|
||
}
|
||
.row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
margin: 6px 0;
|
||
line-height: 20px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.col-1 {
|
||
width: 160px;
|
||
}
|
||
|
||
.col-2 {
|
||
width: 130px;
|
||
color: #5a6875;
|
||
}
|
||
|
||
.col-3 {
|
||
flex: 1;
|
||
|
||
&.agree {
|
||
color: #52c41a;
|
||
}
|
||
}
|
||
|
||
.tag {
|
||
padding-right: 4px;
|
||
|
||
&.agree {
|
||
color: #52c41a;
|
||
}
|
||
|
||
&.reject {
|
||
color: #eaa63c;
|
||
}
|
||
}
|
||
|
||
.col-node {
|
||
width: 120px;
|
||
}
|
||
|
||
.position {
|
||
color: #90a0af;
|
||
}
|
||
|
||
.item {
|
||
padding: 8px 0;
|
||
|
||
&.sep {
|
||
border-top: 1px solid #e9e9e9;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<script setup>
|
||
import { defineProps, onMounted, ref, watch } from 'vue';
|
||
import dayjs from 'dayjs';
|
||
|
||
const props = defineProps({
|
||
mode: {
|
||
type: String,
|
||
default: 'simple'
|
||
},
|
||
items: Array,
|
||
autoHide: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
sort: {
|
||
type: String,
|
||
default: 'desc'
|
||
}
|
||
});
|
||
|
||
const comments = ref([]);
|
||
|
||
function parseTime(t) {
|
||
return dayjs(t).format('YYYY-MM-DD HH:mm');
|
||
}
|
||
|
||
onMounted(() => {
|
||
if (props.items?.length) {
|
||
sortList();
|
||
}
|
||
});
|
||
|
||
watch(
|
||
() => props.items,
|
||
() => {
|
||
sortList();
|
||
}
|
||
);
|
||
|
||
function sortList() {
|
||
const newList = props.items.map((item) => {
|
||
item.ts = dayjs(item.approveTime).valueOf();
|
||
return item;
|
||
});
|
||
newList.sort((item1, item2) => {
|
||
return props.sort === 'desc' ? item2.ts - item1.ts : item1.ts - item2.ts;
|
||
});
|
||
comments.value = newList;
|
||
}
|
||
|
||
function getTagCls(item) {
|
||
return {
|
||
agree: item.approveType === 0,
|
||
reject: item.approveType === 2,
|
||
tag: true
|
||
};
|
||
}
|
||
</script>
|