样式优化

This commit is contained in:
itcast 2025-12-29 18:09:21 +08:00
parent 6926144ce1
commit c076ab1edb
5 changed files with 215 additions and 48 deletions

View File

@ -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;

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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 {