bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

样式优化

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/EquipmentRetireApply/todo.vue
View File

@ -29,7 +29,7 @@
<el-card class="content-box"> <el-card class="content-box">
<div > <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 type="index" label="序号" width="50" />
<el-table-column align="center" show-overflow-tooltip prop="businessType" label="业务类型" width="120"> <el-table-column align="center" show-overflow-tooltip prop="businessType" label="业务类型" width="120">
<template slot-scope="scope"> <template slot-scope="scope">
@ -152,7 +152,7 @@ export default {
.content-box { .content-box {
border-radius: 8px; border-radius: 8px;
height: calc(100vh - 260px); //height: calc(100vh - 260px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;

80
src/views/business/audit/addAudit.vue
View File

@ -89,26 +89,55 @@
</el-col> </el-col>
<el-col :span="collapsed ? 1 : 6"> <el-col :span="collapsed ? 1 : 6">
<!-- 审批进度 --> <!-- 审批进度 -->
<div v-if="showApprovalProgress && processConfig && processConfig.nodeList && !collapsed" style="margin-top: 30px"> <div class="approval-progress" v-if="showApprovalProgress && processConfig && processConfig.nodeList && !collapsed" >
<div style="margin-bottom: 15px; font-weight: bold;">审批进度</div> <div class="section-header">审批进度</div>
<el-timeline> <el-timeline>
<el-timeline-item <el-timeline-item
v-for="node in processConfig.nodeList" v-for="node in processConfig.nodeList"
:key="node.id" :key="node.id"
:timestamp="getNodeRecord(node) ? getNodeRecord(node).approveTime : ''" :timestamp="getNodeRecord(node) ? getNodeRecord(node).approveTime : ''"
placement="top" placement="top"
:type="getNodeTagType(node)"
> >
<p> <!-- <p>-->
<strong>{{ node.nodeName }}</strong> <!-- <strong>{{ node.nodeName }}</strong>-->
<span style="margin-left: 20px">{{ getNodeStatusLabel(node) }}</span> <!-- <span style="margin-left: 20px">{{ getNodeStatusLabel(node) }}</span>-->
</p> <!-- </p>-->
<p v-if="getNodeRecord(node)"> <!-- <p v-if="getNodeRecord(node)">-->
审批人：{{ getNodeRecord(node).name }} <!-- 审批人：{{ getNodeRecord(node).name }}-->
</p> <!-- </p>-->
<p v-if="getNodeRecord(node)"> <!-- <p v-if="getNodeRecord(node)">-->
审批意见：{{ getNodeRecord(node).approveOpinion }} <!-- 审批意见：{{ getNodeRecord(node).approveOpinion }}-->
</p> <!-- </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-item>
</el-timeline> </el-timeline>
</div> </div>
@ -499,4 +528,29 @@ export default {
</script> </script>
<style lang="scss" scoped> <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> </style>

60
src/views/business/components/ApproveDialog.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div> <div>
<el-dialog :title="title" :visible.sync="visible" width="800px"> <el-dialog :title="title" :visible.sync="visible" width="800px">
<div v-if="processConfig && processConfig.nodeList" style="margin-top: 30px" v-loading="loading"> <div v-if="processConfig && processConfig.nodeList" class="approval-progress" v-loading="loading">
<div style="margin-bottom: 15px; font-weight: bold">审批进度</div> <div class="section-header">审批进度</div>
<el-timeline> <el-timeline>
<el-timeline-item <el-timeline-item
v-for="node in processConfig.nodeList" v-for="node in processConfig.nodeList"
@ -11,12 +11,28 @@
placement="top" placement="top"
:type="getNodeTagType(node)" :type="getNodeTagType(node)"
> >
<p> <div class="timeline-content">
<strong>{{ node.nodeName }}</strong> <div class="node-title">
<span style="margin-left: 20px">{{ getNodeStatusLabel(node) }}</span> <span class="node-name">节点{{ node.nodeOrder }}：{{ node.nodeName }}</span>
</p> <el-tag :type="getNodeTagType(node)">
<p v-if="getNodeRecord(node)"> 审批人：{{ getNodeRecord(node).name }} </p> {{ getNodeStatusLabel(node) }}
<p v-if="getNodeRecord(node)"> 审批意见：{{ getNodeRecord(node).approveOpinion }} </p> </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-item>
</el-timeline> </el-timeline>
</div> </div>
@ -107,4 +123,30 @@ export default {
} }
</script> </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>

61
src/views/business/warehouse/auditDetails.vue
View File

@ -92,8 +92,8 @@
</el-col> </el-col>
<el-col :span="collapsed ? 1 : 6"> <el-col :span="collapsed ? 1 : 6">
<!-- 审批进度 --> <!-- 审批进度 -->
<div v-if="showApprovalProgress && processConfig && processConfig.nodeList && !collapsed" style="margin-top: 30px"> <div class="approval-progress" v-if="showApprovalProgress && processConfig && processConfig.nodeList && !collapsed" >
<div style="margin-bottom: 15px; font-weight: bold;">审批进度</div> <div class="section-header" >审批进度</div>
<el-timeline> <el-timeline>
<el-timeline-item <el-timeline-item
v-for="node in processConfig.nodeList" v-for="node in processConfig.nodeList"
@ -102,16 +102,28 @@
placement="top" placement="top"
:type="getNodeTagType(node)" :type="getNodeTagType(node)"
> >
<p> <div class="timeline-content">
<strong>{{ node.nodeName }}</strong> <div class="node-title">
<span style="margin-left: 20px">{{ getNodeStatusLabel(node) }}</span> <span class="node-name">节点{{ node.nodeOrder }}：{{ node.nodeName }}</span>
</p> <el-tag :type="getNodeTagType(node)">
<p v-if="getNodeRecord(node)"> {{ getNodeStatusLabel(node) }}
审批人：{{ getNodeRecord(node).name }} </el-tag>
</p> </div>
<p v-if="getNodeRecord(node)"> <div class="node-info">
审批意见：{{ getNodeRecord(node).approveOpinion }} <div>审批人：{{ node.name }}</div>
</p> <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-item>
</el-timeline> </el-timeline>
</div> </div>
@ -525,4 +537,29 @@ export default {
</script> </script>
<style lang="scss" scoped> <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> </style>

58
src/views/equipmentRepair/repairAudit/repairApprovalDetail.vue
View File

@ -77,18 +77,30 @@
:key="node.id" :key="node.id"
:timestamp="getNodeRecord(node) ? getNodeRecord(node).approveTime : ''" :timestamp="getNodeRecord(node) ? getNodeRecord(node).approveTime : ''"
placement="top" placement="top"
:type="getNodeTagType(node)"
> >
<p> <div class="timeline-content">
<strong>{{ node.nodeName }}</strong> <div class="node-title">
<span style="margin-left: 20px">{{ getNodeStatusLabel(node) }}</span> <span class="node-name">节点{{ node.nodeOrder }}：{{ node.nodeName }}</span>
</p> <el-tag :type="getNodeTagType(node)">
<p v-if="getNodeRecord(node)"> {{ getNodeStatusLabel(node) }}
审批人：{{ getNodeRecord(node).approverName }} </el-tag>
</p> </div>
<p v-if="getNodeRecord(node)"> <div class="node-info">
审批意见：{{ getNodeRecord(node).approveOpinion }} <div>审批人：{{ node.name }}</div>
</p> <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-item>
</el-timeline> </el-timeline>
</div> </div>
@ -377,7 +389,29 @@ export default {
} }
.approval-progress { .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 { .approval-actions {