Skip to content

梁建民 / scm_app

Go to a project
Commit d77abe86 by liangjianmin
Options

feat(approve): 优化审批进度展示和增加驳回节点处理逻辑 

- 修改审批进度的滚动视图，隐藏滚动条
- 增加审批人标签，提升用户体验
- 添加驳回节点的判断逻辑，优化节点样式
parent a95a4525
Inline Side-by-side
Showing with 147 additions and 47 deletions
assets/css/approve/detail.scss
...@@ -172,7 +172,7 @@ ...@@ -172,7 +172,7 @@
.process-scroll { .process-scroll {
width: 100%; width: 100%;
padding: 8rpx 0 20rpx; padding: 4rpx 0 22rpx;
box-sizing: border-box; box-sizing: border-box;
white-space: nowrap; white-space: nowrap;
} }
...@@ -180,7 +180,7 @@ ...@@ -180,7 +180,7 @@
.process-list { .process-list {
display: inline-flex; display: inline-flex;
min-width: 100%; min-width: 100%;
padding: 20rpx 20rpx 6rpx; padding: 22rpx 18rpx 8rpx 36rpx;
box-sizing: border-box; box-sizing: border-box;
} }
...@@ -188,55 +188,92 @@ ...@@ -188,55 +188,92 @@
position: relative; position: relative;
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
width: 238rpx; width: 280rpx;
white-space: normal; white-space: normal;
& + .process-item { & + .process-item {
margin-left: 24rpx; margin-left: 20rpx;
} }
&.current { &.current {
.process-node { .process-node {
background: #2563eb; background: #2f6bff;
border-color: #bfdbfe; border-color: #dbeafe;
box-shadow: 0 0 0 8rpx rgba(37, 99, 235, 0.12); box-shadow: 0 0 0 8rpx rgba(47, 107, 255, 0.13), 0 12rpx 24rpx rgba(47, 107, 255, 0.24);
} }
.process-card { .process-card {
background: #eff6ff; background: linear-gradient(160deg, #f7fbff 0, #eaf2ff 100%);
border-color: #93c5fd; border-color: rgba(47, 107, 255, 0.45);
box-shadow: 0 16rpx 34rpx rgba(47, 107, 255, 0.14);
}
.process-card::before {
opacity: 1;
}
.process-name {
color: #174ed9;
} }
.process-name,
.process-status { .process-status {
color: #1d4ed8; background: #e0ecff;
color: #1e5bff;
} }
} }
&.finished { &.finished {
.process-node { .process-node {
background: #16a34a; background: #21b96b;
border-color: #bbf7d0; border-color: #d7f8e6;
box-shadow: 0 8rpx 18rpx rgba(33, 185, 107, 0.2);
}
.process-line {
background: linear-gradient(90deg, #35c777 0, #45a3ff 100%);
}
.process-status {
background: #e7f8ee;
color: #16a05a;
}
}
&.rejected {
.process-node {
background: #ef4444;
border-color: #fee2e2;
box-shadow: 0 8rpx 18rpx rgba(239, 68, 68, 0.2);
} }
.process-line { .process-line {
background: #93c5fd; background: linear-gradient(90deg, #35c777 0, #ef4444 100%);
}
.process-card {
background: linear-gradient(160deg, #ffffff 0, #fff5f5 100%);
border-color: rgba(239, 68, 68, 0.32);
}
.process-name {
color: #b91c1c;
} }
.process-status { .process-status {
color: #16a34a; background: #fee2e2;
color: #dc2626;
} }
} }
} }
.process-line { .process-line {
position: absolute; position: absolute;
left: -148rpx; left: -281rpx;
top: 15rpx; top: 17rpx;
width: 160rpx; width: 300rpx;
height: 4rpx; height: 6rpx;
border-radius: 999rpx; border-radius: 999rpx;
background: #dbe4f0; background: #e2e8f0;
} }
.process-node { .process-node {
...@@ -245,67 +282,117 @@ ...@@ -245,67 +282,117 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 32rpx; width: 38rpx;
height: 32rpx; height: 38rpx;
margin-left: 4rpx; margin-left: 0;
border: 6rpx solid #e2e8f0; border: 8rpx solid #edf2f7;
border-radius: 50%; border-radius: 50%;
background: #cbd5e1; background: #aebdce;
color: #ffffff; color: #ffffff;
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0 8rpx 18rpx rgba(100, 116, 139, 0.18);
} }
.process-index, .process-index,
.process-check { .process-check {
font-size: 18rpx; font-size: 19rpx;
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
} }
.process-card { .process-card {
margin-top: 14rpx; position: relative;
padding: 14rpx; min-height: 196rpx;
border: 1rpx solid transparent; margin-top: 16rpx;
border-radius: 12rpx; padding: 16rpx;
background: #f7faff; border: 1rpx solid rgba(226, 232, 240, 0.88);
border-radius: 16rpx;
background: linear-gradient(160deg, #ffffff 0, #f6f9ff 100%);
box-sizing: border-box; box-sizing: border-box;
overflow: hidden;
box-shadow: 0 10rpx 26rpx rgba(15, 23, 42, 0.045);
}
.process-card::before {
content: '';
position: absolute;
right: -24rpx;
top: -28rpx;
width: 92rpx;
height: 92rpx;
border-radius: 50%;
background: radial-gradient(circle, rgba(47, 107, 255, 0.22) 0, rgba(47, 107, 255, 0) 68%);
opacity: 0;
} }
.process-head { .process-head {
position: relative;
z-index: 1;
display: flex; display: flex;
flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: space-between; min-height: 86rpx;
} }
.process-name { .process-name {
max-width: 128rpx; max-width: 100%;
font-size: 25rpx; font-size: 25rpx;
font-weight: 600; font-weight: 700;
color: #18263c; color: #18263c;
line-height: 32rpx; line-height: 32rpx;
word-break: break-all; word-break: break-all;
} }
.process-status { .process-status {
margin-left: 8rpx; display: inline-flex;
align-items: center;
margin-top: 10rpx;
padding: 5rpx 12rpx;
border-radius: 999rpx;
background: #eef2f7;
font-size: 22rpx; font-size: 22rpx;
color: #64748b; color: #64748b;
line-height: 32rpx; line-height: 26rpx;
text-align: center;
white-space: nowrap;
}
.process-user-row {
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
margin-top: 10rpx;
}
.process-user-label {
margin-right: 10rpx;
padding: 2rpx 8rpx;
border-radius: 6rpx;
background: rgba(148, 163, 184, 0.14);
font-size: 20rpx;
color: #64748b;
line-height: 28rpx;
flex-shrink: 0; flex-shrink: 0;
} }
.process-user, .process-user {
.process-time {
display: block;
margin-top: 6rpx;
font-size: 23rpx; font-size: 23rpx;
color: #64748b; font-weight: 500;
line-height: 30rpx; color: #334155;
line-height: 32rpx;
word-break: break-all; word-break: break-all;
} }
.process-time { .process-time {
color: #94a3b8; position: relative;
z-index: 1;
display: block;
margin-top: 8rpx;
font-size: 23rpx;
color: #7b8ca5;
line-height: 30rpx;
word-break: break-all;
} }
.timeline-wrap { .timeline-wrap {
......
pages/approve/detail.vue
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
<view class="section" v-if="approveProcess.length > 0"> <view class="section" v-if="approveProcess.length > 0">
<view class="section-title">审批进度</view> <view class="section-title">审批进度</view>
<scroll-view class="process-scroll" scroll-x> <scroll-view class="process-scroll" scroll-x :show-scrollbar="false">
<view class="process-list"> <view class="process-list">
<view :class="['process-item', getProcessClass(item, index)]" v-for="(item, index) in approveProcess" :key="index"> <view :class="['process-item', getProcessClass(item, index)]" v-for="(item, index) in approveProcess" :key="index">
<view class="process-line" v-if="index > 0"></view> <view class="process-line" v-if="index > 0"></view>
...@@ -94,7 +94,10 @@ ...@@ -94,7 +94,10 @@
<text class="process-name">{{ item.node_name }}</text> <text class="process-name">{{ item.node_name }}</text>
<text class="process-status">{{ item.approval_status_text }}</text> <text class="process-status">{{ item.approval_status_text }}</text>
</view> </view>
<text class="process-user">{{ item.approval_names }}</text> <view class="process-user-row">
<text class="process-user-label">审批人</text>
<text class="process-user">{{ item.approval_names }}</text>
</view>
<text class="process-time">{{ item.approval_time || '等待处理' }}</text> <text class="process-time">{{ item.approval_time || '等待处理' }}</text>
</view> </view>
</view> </view>
...@@ -270,7 +273,15 @@ ...@@ -270,7 +273,15 @@
* @return {boolean} 判断结果 * @return {boolean} 判断结果
*/ */
isFinishedProcess(item) { isFinishedProcess(item) {
return !!item.approval_time; return item.approval_status_text === '审核通过';
},
/**
* 是否驳回节点
* @param {Object} item - 审批节点
* @return {boolean} 判断结果
*/
isRejectedProcess(item) {
return item.approval_status_text === '审核拒绝';
}, },
/** /**
* 获取审批节点样式 * 获取审批节点样式
...@@ -279,8 +290,10 @@ ...@@ -279,8 +290,10 @@
* @return {string} 样式名称 * @return {string} 样式名称
*/ */
getProcessClass(item, index) { getProcessClass(item, index) {
if (Number(item.is_current) === 1) return 'current';
if (this.isFinishedProcess(item)) return 'finished'; if (this.isFinishedProcess(item)) return 'finished';
if (this.isRejectedProcess(item)) return 'rejected';
var currentClass = Number(item.is_current) === 1 ? ' current' : '';
if (currentClass) return 'current';
return index === 0 ? 'pending first' : 'pending'; return index === 0 ? 'pending first' : 'pending';
}, },
/** /**
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment