|
|
|
|
@ -1,65 +1,88 @@
|
|
|
|
|
<template> |
|
|
|
|
<div |
|
|
|
|
class="card-info mb-10" |
|
|
|
|
v-if="extensionApply.id" |
|
|
|
|
> |
|
|
|
|
<div class="card-info mb-10" v-if="extensionApply.approveSteps"> |
|
|
|
|
<header class="flex"> |
|
|
|
|
<span class="primary">延期申请中</span> |
|
|
|
|
<div class="step-item flex v-center"> |
|
|
|
|
<div class="number" :active="true">1</div> |
|
|
|
|
<span>延期申请</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="step-item flex v-center"> |
|
|
|
|
<div |
|
|
|
|
class="step-item flex v-center" |
|
|
|
|
v-for="(item, index) in extensionApply.approveSteps" |
|
|
|
|
:key="index" |
|
|
|
|
> |
|
|
|
|
<el-tooltip |
|
|
|
|
effect="dark" |
|
|
|
|
:content="extensionApply.approves[extensionApply.approves.length - 1].comments" |
|
|
|
|
:content="item.comments" |
|
|
|
|
raw-content |
|
|
|
|
placement="top" |
|
|
|
|
v-if="extensionApply.approves.length > 0" |
|
|
|
|
v-if="item.comments" |
|
|
|
|
> |
|
|
|
|
<div class="number" :active="extensionApply.approves.length > 0">2</div> |
|
|
|
|
<div |
|
|
|
|
class="number" |
|
|
|
|
:active="item.state === ApproveState.APPROVED" |
|
|
|
|
:danger="item.state === ApproveState.REJECTED" |
|
|
|
|
> |
|
|
|
|
{{ index + 1 }} |
|
|
|
|
</div> |
|
|
|
|
</el-tooltip> |
|
|
|
|
<div class="number" :active="extensionApply.approves.length > 0" v-else>2</div> |
|
|
|
|
<span>二级机构专班审批</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="step-item flex v-center"> |
|
|
|
|
<el-tooltip |
|
|
|
|
effect="dark" |
|
|
|
|
:content="extensionApply.approves[extensionApply.approves.length - 2].comments" |
|
|
|
|
raw-content |
|
|
|
|
placement="top" |
|
|
|
|
v-if="extensionApply.approves.length > 1" |
|
|
|
|
<div |
|
|
|
|
class="number" |
|
|
|
|
:active="item.state === ApproveState.APPROVED" |
|
|
|
|
:danger="item.state === ApproveState.REJECTED" |
|
|
|
|
v-else |
|
|
|
|
> |
|
|
|
|
<div class="number" :active="extensionApply.approves.length === 2">3</div> |
|
|
|
|
</el-tooltip> |
|
|
|
|
<div class="number" :active="extensionApply.approves.length === 2" v-else>3</div> |
|
|
|
|
<span>市局专班审批</span> |
|
|
|
|
{{ index + 1 }} |
|
|
|
|
</div> |
|
|
|
|
<span>{{ item.title }}</span> |
|
|
|
|
</div> |
|
|
|
|
</header> |
|
|
|
|
<div class="flex"> |
|
|
|
|
<div class="flex mb-10"> |
|
|
|
|
<div class="col col-6"> |
|
|
|
|
<label>延期时长</label> |
|
|
|
|
<span>{{ extensionApply.extensionDays }}天</span> |
|
|
|
|
<span class="text-primary text-bold">{{ extensionApply.extensionDays }}天</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="col col-18"> |
|
|
|
|
<label>延期理由</label> |
|
|
|
|
<span class="content" style="padding: 0">{{ extensionApply.comments }}</span> |
|
|
|
|
<div class="col col-6"> |
|
|
|
|
<label>申请时间</label> |
|
|
|
|
<span>{{ extensionApply.createTime }}</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<!-- <div class="flex mt-20"> |
|
|
|
|
<div class="col" style="width: 100%"> |
|
|
|
|
<label>驳回理由</label> |
|
|
|
|
<span style="width: calc(100% - 74px)">{{ }}</span> |
|
|
|
|
<div class="col col-24"> |
|
|
|
|
<label>延期理由</label> |
|
|
|
|
<span class="content" style="padding: 0">{{ |
|
|
|
|
extensionApply.comments |
|
|
|
|
}}</span> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
class="mt-10 rejected-box" |
|
|
|
|
v-if=" |
|
|
|
|
extensionApply.approveSteps?.filter( |
|
|
|
|
(item) => item.state === ApproveState.REJECTED |
|
|
|
|
).length |
|
|
|
|
" |
|
|
|
|
> |
|
|
|
|
<div class="mb-4">申请延期驳回</div> |
|
|
|
|
<div class="rejected-body text-wrap"> |
|
|
|
|
{{ |
|
|
|
|
extensionApply.approveSteps.filter( |
|
|
|
|
(item) => item.state === ApproveState.REJECTED |
|
|
|
|
)[0].comments |
|
|
|
|
}} |
|
|
|
|
</div> |
|
|
|
|
</div> --> |
|
|
|
|
<div class="text-right rejected-footer">{{ |
|
|
|
|
extensionApply.approveSteps.filter( |
|
|
|
|
(item) => item.state === ApproveState.REJECTED |
|
|
|
|
)[0].createTime |
|
|
|
|
}}</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<script setup> |
|
|
|
|
import { ApproveState } from "@/enums/flowEnums"; |
|
|
|
|
|
|
|
|
|
const extensionApply = inject('extensionApply') |
|
|
|
|
console.log('extensionApply', extensionApply) |
|
|
|
|
const extensionApply = inject("extensionApply"); |
|
|
|
|
console.log("extensionApply", extensionApply); |
|
|
|
|
</script> |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.col { |
|
|
|
|
--label-width: 60px; |
|
|
|
|
} |
|
|
|
|
.card-info { |
|
|
|
|
background: #f4f5ff; |
|
|
|
|
border: 1px solid rgba(195, 202, 245, 1); |
|
|
|
|
@ -102,12 +125,22 @@ console.log('extensionApply', extensionApply)
|
|
|
|
|
background: var(--primary-color); |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
&[return="true"] { |
|
|
|
|
&[danger="true"] { |
|
|
|
|
background: var(--danger-color); |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.rejected-box { |
|
|
|
|
background-color: #FEEDED; |
|
|
|
|
padding: 8px; |
|
|
|
|
.rejected-body { |
|
|
|
|
color: #333; |
|
|
|
|
} |
|
|
|
|
.rejected-footer { |
|
|
|
|
font-size: 12px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |