样式优化
This commit is contained in:
parent
6926144ce1
commit
c076ab1edb
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
<el-card class="content-box">
|
||||
<div >
|
||||
<el-table :data="tableData" style="width: 100%" border stripe height="546" fit>
|
||||
<el-table :data="tableData" style="width: 100%" border stripe class="my-table" fit>
|
||||
<el-table-column align="center" show-overflow-tooltip type="index" label="序号" width="50" />
|
||||
<el-table-column align="center" show-overflow-tooltip prop="businessType" label="业务类型" width="120">
|
||||
<template slot-scope="scope">
|
||||
|
|
@ -152,7 +152,7 @@ export default {
|
|||
|
||||
.content-box {
|
||||
border-radius: 8px;
|
||||
height: calc(100vh - 260px);
|
||||
//height: calc(100vh - 260px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -89,26 +89,55 @@
|
|||
</el-col>
|
||||
<el-col :span="collapsed ? 1 : 6">
|
||||
<!-- 审批进度 -->
|
||||
<div v-if="showApprovalProgress && processConfig && processConfig.nodeList && !collapsed" style="margin-top: 30px">
|
||||
<div style="margin-bottom: 15px; font-weight: bold;">审批进度</div>
|
||||
<div class="approval-progress" v-if="showApprovalProgress && processConfig && processConfig.nodeList && !collapsed" >
|
||||
<div class="section-header">审批进度</div>
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-for="node in processConfig.nodeList"
|
||||
:key="node.id"
|
||||
:timestamp="getNodeRecord(node) ? getNodeRecord(node).approveTime : ''"
|
||||
placement="top"
|
||||
:type="getNodeTagType(node)"
|
||||
>
|
||||
<p>
|
||||
<strong>{{ node.nodeName }}</strong>
|
||||
<span style="margin-left: 20px">{{ getNodeStatusLabel(node) }}</span>
|
||||
</p>
|
||||
<p v-if="getNodeRecord(node)">
|
||||
审批人:{{ getNodeRecord(node).name }}
|
||||
</p>
|
||||
<p v-if="getNodeRecord(node)">
|
||||
审批意见:{{ getNodeRecord(node).approveOpinion }}
|
||||
</p>
|
||||
<!-- <p>-->
|
||||
<!-- <strong>{{ node.nodeName }}</strong>-->
|
||||
<!-- <span style="margin-left: 20px">{{ getNodeStatusLabel(node) }}</span>-->
|
||||
<!-- </p>-->
|
||||
<!-- <p v-if="getNodeRecord(node)">-->
|
||||
<!-- 审批人:{{ getNodeRecord(node).name }}-->
|
||||
<!-- </p>-->
|
||||
<!-- <p v-if="getNodeRecord(node)">-->
|
||||
<!-- 审批意见:{{ getNodeRecord(node).approveOpinion }}-->
|
||||
<!-- </p>-->
|
||||
|
||||
<div class="timeline-content">
|
||||
<div class="node-title">
|
||||
<span class="node-name">节点{{ node.nodeOrder }}:{{ node.nodeName }}</span>
|
||||
<el-tag :type="getNodeTagType(node)">
|
||||
{{ getNodeStatusLabel(node) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="node-info">
|
||||
<div>审批人:{{ node.name }}</div>
|
||||
<div v-if="getNodeRecord(node)">
|
||||
<div>审批结果:{{ getNodeRecord(node).approveResult === '1' ? '通过' : '驳回' }}</div>
|
||||
<div>审批意见:{{ getNodeRecord(node).approveOpinion }}</div>
|
||||
<div>审批时间:{{ getNodeRecord(node).approveTime }}</div>
|
||||
</div>
|
||||
<div v-else-if="node.nodeOrder === approvalInstance.currentNodeOrder">
|
||||
状态:待审批
|
||||
</div>
|
||||
<div v-else>
|
||||
状态:等待上一节点审批
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
|
|
@ -499,4 +528,29 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.approval-progress {
|
||||
::v-deep .el-timeline-item__wrapper {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
.node-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.node-name {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.node-info {
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
line-height: 1.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog :title="title" :visible.sync="visible" width="800px">
|
||||
<div v-if="processConfig && processConfig.nodeList" style="margin-top: 30px" v-loading="loading">
|
||||
<div style="margin-bottom: 15px; font-weight: bold">审批进度</div>
|
||||
<div v-if="processConfig && processConfig.nodeList" class="approval-progress" v-loading="loading">
|
||||
<div class="section-header">审批进度</div>
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-for="node in processConfig.nodeList"
|
||||
|
|
@ -11,12 +11,28 @@
|
|||
placement="top"
|
||||
:type="getNodeTagType(node)"
|
||||
>
|
||||
<p>
|
||||
<strong>{{ node.nodeName }}</strong>
|
||||
<span style="margin-left: 20px">{{ getNodeStatusLabel(node) }}</span>
|
||||
</p>
|
||||
<p v-if="getNodeRecord(node)"> 审批人:{{ getNodeRecord(node).name }} </p>
|
||||
<p v-if="getNodeRecord(node)"> 审批意见:{{ getNodeRecord(node).approveOpinion }} </p>
|
||||
<div class="timeline-content">
|
||||
<div class="node-title">
|
||||
<span class="node-name">节点{{ node.nodeOrder }}:{{ node.nodeName }}</span>
|
||||
<el-tag :type="getNodeTagType(node)">
|
||||
{{ getNodeStatusLabel(node) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="node-info">
|
||||
<div>审批人:{{ node.name }}</div>
|
||||
<div v-if="getNodeRecord(node)">
|
||||
<div>审批结果:{{ getNodeRecord(node).approveResult === '1' ? '通过' : '驳回' }}</div>
|
||||
<div>审批意见:{{ getNodeRecord(node).approveOpinion }}</div>
|
||||
<div>审批时间:{{ getNodeRecord(node).approveTime }}</div>
|
||||
</div>
|
||||
<div v-else-if="node.nodeOrder === approvalInstance.currentNodeOrder">
|
||||
状态:待审批
|
||||
</div>
|
||||
<div v-else>
|
||||
状态:等待上一节点审批
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
|
|
@ -107,4 +123,30 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.approval-progress {
|
||||
::v-deep .el-timeline-item__wrapper {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
.node-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.node-name {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.node-info {
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
line-height: 1.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -92,8 +92,8 @@
|
|||
</el-col>
|
||||
<el-col :span="collapsed ? 1 : 6">
|
||||
<!-- 审批进度 -->
|
||||
<div v-if="showApprovalProgress && processConfig && processConfig.nodeList && !collapsed" style="margin-top: 30px">
|
||||
<div style="margin-bottom: 15px; font-weight: bold;">审批进度</div>
|
||||
<div class="approval-progress" v-if="showApprovalProgress && processConfig && processConfig.nodeList && !collapsed" >
|
||||
<div class="section-header" >审批进度</div>
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-for="node in processConfig.nodeList"
|
||||
|
|
@ -102,16 +102,28 @@
|
|||
placement="top"
|
||||
:type="getNodeTagType(node)"
|
||||
>
|
||||
<p>
|
||||
<strong>{{ node.nodeName }}</strong>
|
||||
<span style="margin-left: 20px">{{ getNodeStatusLabel(node) }}</span>
|
||||
</p>
|
||||
<p v-if="getNodeRecord(node)">
|
||||
审批人:{{ getNodeRecord(node).name }}
|
||||
</p>
|
||||
<p v-if="getNodeRecord(node)">
|
||||
审批意见:{{ getNodeRecord(node).approveOpinion }}
|
||||
</p>
|
||||
<div class="timeline-content">
|
||||
<div class="node-title">
|
||||
<span class="node-name">节点{{ node.nodeOrder }}:{{ node.nodeName }}</span>
|
||||
<el-tag :type="getNodeTagType(node)">
|
||||
{{ getNodeStatusLabel(node) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="node-info">
|
||||
<div>审批人:{{ node.name }}</div>
|
||||
<div v-if="getNodeRecord(node)">
|
||||
<div>审批结果:{{ getNodeRecord(node).approveResult === '1' ? '通过' : '驳回' }}</div>
|
||||
<div>审批意见:{{ getNodeRecord(node).approveOpinion }}</div>
|
||||
<div>审批时间:{{ getNodeRecord(node).approveTime }}</div>
|
||||
</div>
|
||||
<div v-else-if="node.nodeOrder === approvalInstance.currentNodeOrder">
|
||||
状态:待审批
|
||||
</div>
|
||||
<div v-else>
|
||||
状态:等待上一节点审批
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
|
|
@ -525,4 +537,29 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.approval-progress {
|
||||
::v-deep .el-timeline-item__wrapper {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
.node-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.node-name {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.node-info {
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
line-height: 1.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -77,18 +77,30 @@
|
|||
:key="node.id"
|
||||
:timestamp="getNodeRecord(node) ? getNodeRecord(node).approveTime : ''"
|
||||
placement="top"
|
||||
:type="getNodeTagType(node)"
|
||||
|
||||
>
|
||||
<p>
|
||||
<strong>{{ node.nodeName }}</strong>
|
||||
<span style="margin-left: 20px">{{ getNodeStatusLabel(node) }}</span>
|
||||
</p>
|
||||
<p v-if="getNodeRecord(node)">
|
||||
审批人:{{ getNodeRecord(node).approverName }}
|
||||
</p>
|
||||
<p v-if="getNodeRecord(node)">
|
||||
审批意见:{{ getNodeRecord(node).approveOpinion }}
|
||||
</p>
|
||||
<div class="timeline-content">
|
||||
<div class="node-title">
|
||||
<span class="node-name">节点{{ node.nodeOrder }}:{{ node.nodeName }}</span>
|
||||
<el-tag :type="getNodeTagType(node)">
|
||||
{{ getNodeStatusLabel(node) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="node-info">
|
||||
<div>审批人:{{ node.name }}</div>
|
||||
<div v-if="getNodeRecord(node)">
|
||||
<div>审批结果:{{ getNodeRecord(node).approveResult === '1' ? '通过' : '驳回' }}</div>
|
||||
<div>审批意见:{{ getNodeRecord(node).approveOpinion }}</div>
|
||||
<div>审批时间:{{ getNodeRecord(node).approveTime }}</div>
|
||||
</div>
|
||||
<div v-else-if="node.nodeOrder === approvalInstance.currentNodeOrder">
|
||||
状态:待审批
|
||||
</div>
|
||||
<div v-else>
|
||||
状态:等待上一节点审批
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
|
|
@ -377,7 +389,29 @@ export default {
|
|||
}
|
||||
|
||||
.approval-progress {
|
||||
margin-top: 30px;
|
||||
::v-deep .el-timeline-item__wrapper {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
.node-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.node-name {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.node-info {
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
line-height: 1.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.approval-actions {
|
||||
|
|
|
|||
Loading…
Reference in New Issue