You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<template> |
|
|
<view class="wrapper"> |
|
|
<view v-for="item in approvals" class="approval" :approved="item.approved"> |
|
|
<view> |
|
|
<view class="title mb-6">{{ item.approved ? '审批通过' : '待审批' }}</view> |
|
|
<view class="mb-12" v-if="item.approved">{{ item.handlerDeptName + ' ' + item.handlerName }}</view> |
|
|
</view> |
|
|
<view class="comment" v-if="item.comment"> |
|
|
<view class="mb-12"> |
|
|
<text class="info">{{ item.handlerDeptName + item.handlerName }}意见</text> |
|
|
</view> |
|
|
<view class="content">{{ item.comment }}</view> |
|
|
</view> |
|
|
</view> |
|
|
<view style="font-size: 12px;" v-if="!approvals.length"> |
|
|
<text class="info">无审批意见</text> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
</template> |
|
|
|
|
|
<script setup> |
|
|
import { inject } from 'vue' |
|
|
const approvals = inject("approvals"); |
|
|
console.log(approvals) |
|
|
</script> |
|
|
|
|
|
<style lang="scss" scoped> |
|
|
.wrapper { |
|
|
padding: 12px 18px; |
|
|
} |
|
|
.approval { |
|
|
background-color: #fff; |
|
|
margin-left: 30px; |
|
|
margin-bottom: 12px; |
|
|
padding: 12px 15px; |
|
|
position: relative; |
|
|
font-size: 14px; |
|
|
&::after { |
|
|
position: absolute; |
|
|
top: 12px; |
|
|
left: -18px; |
|
|
content: ''; |
|
|
display: block; |
|
|
height: 12px; |
|
|
width: 12px; |
|
|
transform: translateX(-50%); |
|
|
border: 2px solid #E0E0E0; |
|
|
border-radius: 50%; |
|
|
} |
|
|
&::before { |
|
|
position: absolute; |
|
|
top: 30px; |
|
|
left: -18px; |
|
|
content: ''; |
|
|
display: block; |
|
|
height: calc(100% - 8px); |
|
|
width: 1px; |
|
|
border-radius: 50%; |
|
|
background-color: #D8D8D8; |
|
|
} |
|
|
&:last-child::before { |
|
|
display: none; |
|
|
} |
|
|
&[approved=true] { |
|
|
&::after { |
|
|
height: 22px; |
|
|
width: 22px; |
|
|
border-color: var(--primary-color); |
|
|
content: ''; |
|
|
font-family: fuiFont; |
|
|
color: var(--primary-color); |
|
|
font-size: 22px; |
|
|
} |
|
|
.title { |
|
|
color: var(--primary-color); |
|
|
} |
|
|
} |
|
|
.title { |
|
|
font-size: 16px; |
|
|
} |
|
|
.comment { |
|
|
background: #F5F6FF; |
|
|
padding: 12px; |
|
|
font-size: 11px; |
|
|
.content { |
|
|
font-size: 12px; |
|
|
color: #333; |
|
|
} |
|
|
} |
|
|
} |
|
|
</style> |
