104 lines
2.2 KiB
Vue
104 lines
2.2 KiB
Vue
<template>
|
|
<div class="task-process-panel">
|
|
<el-row :gutter="10">
|
|
<el-col :span="24" v-for="member in memberList" :key="member.id">
|
|
<div class="process-item">
|
|
<div class="user-info">
|
|
<avatar :size="24" :src="member.userAvatar" :name="member.userName" :id="member.userId" :char-index="-1" />
|
|
<span class="user-name">{{ member.userName }}</span>
|
|
<div class="status-tag">
|
|
<dict-tag :value="member.status" :options="dict.type.task_member_status" size="mini" />
|
|
</div>
|
|
</div>
|
|
<div class="process-info">
|
|
<div class="info-item">
|
|
<span class="label">接收时间</span>
|
|
<span class="value">{{member.receiveTime | dv}}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="label">提交时间</span>
|
|
<span class="value">{{member.submitTime | dv}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Avatar from '@/components/Avatar'
|
|
|
|
export default {
|
|
name: 'TaskProcessPanel',
|
|
dicts: ['task_member_status'],
|
|
components: {
|
|
Avatar
|
|
},
|
|
props: {
|
|
detail: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
computed: {
|
|
memberList() {
|
|
return this.detail.memberList || []
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.task-process-panel {
|
|
.process-item {
|
|
padding: 8px 12px;
|
|
margin-bottom: 4px;
|
|
border: 1px solid #ebeef5;
|
|
border-radius: 4px;
|
|
transition: all 0.3s;
|
|
|
|
&:hover {
|
|
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 6px;
|
|
|
|
.user-name {
|
|
margin-left: 6px;
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
flex: 1;
|
|
}
|
|
|
|
.status-tag {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
.process-info {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
|
|
.info-item {
|
|
font-size: 12px;
|
|
flex: 1;
|
|
min-width: 120px;
|
|
|
|
.label {
|
|
color: #909399;
|
|
}
|
|
|
|
.value {
|
|
color: #303133;
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |