185 lines
4.1 KiB
Vue
185 lines
4.1 KiB
Vue
<template>
|
||
<div class="finish-detail">
|
||
<div class="card">
|
||
<u-row justify="between">
|
||
<div class="left">
|
||
<u-avatar :src="detail.avatar" v-if="detail.avatar"></u-avatar>
|
||
<div class="avatar" v-else>{{detail.name && detail.name.substr(-2)}}</div>
|
||
<div class="info">
|
||
<div class="name">{{detail.name}}</div>
|
||
<div class="status">{{$dict.getLabel("workTaskRole",detail.taskRole)}}</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="btn">-->
|
||
<!-- <img src="../static/tx.png" alt="">催办提醒-->
|
||
<!-- </div>-->
|
||
</u-row>
|
||
<u-gap height="32"></u-gap>
|
||
<u-row>
|
||
<div class="label">完成时间：</div>
|
||
<div class="value">{{detail.finishTime}}</div>
|
||
</u-row>
|
||
<u-gap height="16"></u-gap>
|
||
<u-row>
|
||
<div class="label">逾期时间：</div>
|
||
<div class="value" style="color: #FF4466">{{detail.overTimeStatus}}</div>
|
||
</u-row>
|
||
<u-gap height="30"></u-gap>
|
||
</div>
|
||
|
||
<div class="card" v-if="detail.processList && detail.processList.length">
|
||
<u-collapse v-for="(item,index) in detail.processList" :key="index">
|
||
<u-collapse-item :title="item.createDate && item.createDate.split(' ')[0]">
|
||
<template slot="info">
|
||
完成到<em>{{item.percent}}%</em>
|
||
</template>
|
||
{{item.remarks}}
|
||
</u-collapse-item>
|
||
</u-collapse>
|
||
</div>
|
||
<ai-back></ai-back>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
export default {
|
||
name: "finishDetail",
|
||
data() {
|
||
return {
|
||
id: null,
|
||
detail: {},
|
||
}
|
||
},
|
||
onLoad(opt) {
|
||
this.id = opt.id
|
||
this.$dict.load("workTaskRole").then(_=>this.getDetail())
|
||
},
|
||
methods: {
|
||
getDetail() {
|
||
this.$http.post("/app/appworktaskuserinfo/queryDetailById", null, {
|
||
params: {
|
||
id: this.id
|
||
}
|
||
}).then(res => {
|
||
if (res && res.data) {
|
||
this.detail = res.data;
|
||
}
|
||
})
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.finish-detail {
|
||
min-height: 100%;
|
||
background-color: #F5F5F5;
|
||
|
||
.card {
|
||
box-sizing: border-box;
|
||
padding: 18px 32px;
|
||
background-color: #FFFFFF;
|
||
margin-bottom: 8px;
|
||
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.avatar {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 50%;
|
||
font-size: 28px;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #2266FF;
|
||
}
|
||
|
||
.info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-left: 16px;
|
||
|
||
.name {
|
||
font-size: 32px;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
line-height: 44px;
|
||
}
|
||
|
||
.status {
|
||
font-size: 24px;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
line-height: 34px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28px;
|
||
font-weight: 400;
|
||
color: #1365DD;
|
||
|
||
& > img {
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
}
|
||
|
||
.label {
|
||
font-size: 30px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
color: #999999;
|
||
line-height: 42px;
|
||
}
|
||
|
||
.value {
|
||
font-size: 30px;
|
||
font-weight: 400;
|
||
color: #343D65;
|
||
line-height: 48px;
|
||
}
|
||
|
||
em {
|
||
font-style: normal;
|
||
font-size: 28px;
|
||
color: #1365DD;
|
||
}
|
||
|
||
::v-deep .u-collapse {
|
||
position: relative;
|
||
|
||
&:after {
|
||
content: "";
|
||
width: 718px;
|
||
height: 1px;
|
||
background-color: rgba(216, 221, 230, 0.5);
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
}
|
||
|
||
.u-collapse-head {
|
||
padding: 40px 0;
|
||
}
|
||
|
||
.u-collapse-content {
|
||
font-size: 32px;
|
||
color: #333333;
|
||
line-height: 48px;
|
||
letter-spacing: 1px;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
</style>
|