109 lines
2.5 KiB
Vue
109 lines
2.5 KiB
Vue
<template>
|
|
<div>
|
|
<div v-for="(item, index) in list" :key="index" class="wrapper">
|
|
<div>
|
|
<div class="left-icon" v-if="item.time">
|
|
<u-icon name="/static/images/imgs/blue.png" size="16"></u-icon>
|
|
<u-line v-if="index != list.length - 1" direction="col" color="#3888FF" length="170px"></u-line>
|
|
</div>
|
|
<div class="left-icon" v-else>
|
|
<u-icon name="/static/images/imgs/grey.png" size="16"></u-icon>
|
|
<u-line v-if="index != list.length - 1" direction="col" color="#DBDBDB" length="170px"></u-line>
|
|
</div>
|
|
</div>
|
|
<div class="content-wrapper">
|
|
<div class="time">{{ item.time }}</div>
|
|
<div class="content-item">
|
|
<div class="item">审批部门：{{ item.section }}</div>
|
|
<div class="item">审批人：{{ item.name }}</div>
|
|
</div>
|
|
<div>
|
|
审批意见：
|
|
<br />
|
|
<div class="opinion">{{ item.reason }}</div>
|
|
</div>
|
|
<div v-if="item.turnDownReason">
|
|
驳回原因：
|
|
<br />
|
|
<div class="opinion">{{ item.turnDownReason }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
data: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
userId: uni.getStorageSync('userInfo').userId,
|
|
list: []
|
|
}
|
|
},
|
|
mounted() {
|
|
console.log('🚀 ~ mounted ~ this.data:', this.userId)
|
|
setTimeout(() => {
|
|
this.list = this.data
|
|
console.log('🚀 ~ mounted ~ this.list:', this.list)
|
|
}, 1000)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.wrapper {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
|
|
.left-icon {
|
|
margin-right: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.content-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
color: #494949;
|
|
|
|
.time {
|
|
margin-bottom: 8px;
|
|
color: rgba(15, 39, 75, 0.5);
|
|
}
|
|
.content-item {
|
|
.item {
|
|
margin-bottom: 8px;
|
|
width: 80vw;
|
|
white-space: normal;
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
|
|
.opinion {
|
|
margin: 8px 0;
|
|
max-height: 50px;
|
|
overflow: auto;
|
|
color: rgba(15, 39, 75, 0.5);
|
|
text-indent: 1em;
|
|
white-space: normal;
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
}
|
|
</style>
|