Skip to content

梁建民 / scm_app

Go to a project
Commit e05fb9d3 by liangjianmin
Options

feat(classify-price): 添加关务价格审批详情页面 

- 新增关务价格审批详情页面，展示申请信息、订单信息、货物明细、附件和审批日志。
- 实现加载状态、审核功能及历史价格对比弹窗。
- 更新审批列表页面，优化列表项的唯一键获取方式。
- 更新 API 接口，添加订单审批详情和历史单价接口。
parent b444b6cf
Expand all
Inline Side-by-side
Showing with 576 additions and 12 deletions
assets/css/classify-price/detail.scss
.classify-price-detail-page {
min-height: 100vh;
background: #f3f6fb;
background: linear-gradient(180deg, #f2f6ff 0, #f7f9fc 220rpx, #f4f6fa 100%);
padding: 16rpx 16rpx 168rpx;
box-sizing: border-box;
.section {
margin-bottom: 12rpx;
background: rgba(255, 255, 255, 0.98);
border-radius: 18rpx;
box-shadow: 0 8rpx 22rpx rgba(15, 23, 42, 0.035);
overflow: hidden;
}
.section-title {
display: flex;
align-items: center;
padding: 20rpx 20rpx 6rpx;
font-size: 28rpx;
font-weight: 700;
color: #1e293b;
letter-spacing: 0.5rpx;
&::before {
content: '';
width: 6rpx;
height: 24rpx;
margin-right: 14rpx;
border-radius: 999rpx;
background: linear-gradient(180deg, #5a7fff 0, #3467ff 100%);
}
}
.section-body {
padding: 8rpx 20rpx 20rpx;
}
.info-list {
display: flex;
flex-direction: column;
}
.info-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14rpx 16rpx;
border-radius: 12rpx;
background: #f7faff;
& + .info-item {
margin-top: 8rpx;
}
}
.info-item-order {
align-items: flex-start;
}
.info-label {
font-size: 24rpx;
color: #5f6f86;
line-height: 32rpx;
flex-shrink: 0;
}
.info-value {
font-size: 25rpx;
color: #0f172a;
line-height: 32rpx;
text-align: right;
word-break: break-all;
}
.align-right {
max-width: 68%;
}
.warning-text {
color: #ec7935;
}
.info-value-box {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.link-text {
margin-top: 2rpx;
font-size: 24rpx;
color: #316cff;
line-height: 30rpx;
}
.metric-list {
display: flex;
margin-top: 8rpx;
}
.metric-card {
flex: 1;
padding: 14rpx 16rpx;
border-radius: 12rpx;
background: #f7faff;
& + .metric-card {
margin-left: 8rpx;
}
}
.metric-label {
display: block;
font-size: 24rpx;
color: #5f6f86;
line-height: 30rpx;
}
.metric-value {
display: block;
margin-top: 4rpx;
font-size: 26rpx;
font-weight: 600;
color: #18263c;
line-height: 32rpx;
}
.reason-box {
margin-top: 8rpx;
padding: 16rpx;
border-radius: 12rpx;
background: #f7faff;
}
.reason-label {
display: block;
font-size: 24rpx;
color: #5f6f86;
line-height: 30rpx;
}
.reason-text {
display: block;
margin-top: 6rpx;
font-size: 25rpx;
color: #18263c;
line-height: 34rpx;
word-break: break-all;
}
.goods-list {
padding: 8rpx 20rpx 20rpx;
}
.goods-card {
padding: 16rpx;
border-radius: 12rpx;
background: #f7faff;
& + .goods-card {
margin-top: 12rpx;
}
}
.goods-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12rpx;
}
.goods-title-box {
display: flex;
align-items: flex-start;
flex: 1;
min-width: 0;
}
.goods-index {
width: 34rpx;
height: 34rpx;
margin-right: 10rpx;
border-radius: 50%;
background: #316cff;
color: #ffffff;
font-size: 22rpx;
line-height: 34rpx;
text-align: center;
flex-shrink: 0;
}
.goods-title {
font-size: 27rpx;
font-weight: 600;
color: #18263c;
line-height: 36rpx;
word-break: break-all;
}
.goods-grid {
display: flex;
flex-wrap: wrap;
}
.goods-cell {
width: 50%;
padding: 8rpx 0;
box-sizing: border-box;
}
.goods-label {
display: block;
font-size: 23rpx;
color: #5f6f86;
line-height: 30rpx;
}
.goods-value {
display: block;
margin-top: 2rpx;
padding-right: 12rpx;
font-size: 24rpx;
color: #18263c;
line-height: 32rpx;
word-break: break-all;
}
.price-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8rpx;
padding-top: 12rpx;
border-top: 1rpx dashed #d9e2f1;
}
.price-value {
min-width: 170rpx;
padding: 4rpx 10rpx;
border-radius: 4rpx;
font-size: 25rpx;
font-weight: 600;
color: #316cff;
line-height: 34rpx;
text-align: right;
}
.goods-desc {
margin-top: 10rpx;
padding-top: 10rpx;
border-top: 1rpx dashed #d9e2f1;
}
.desc-text {
display: block;
margin-top: 4rpx;
font-size: 24rpx;
color: #18263c;
line-height: 34rpx;
word-break: break-all;
}
.file-title {
font-size: 25rpx;
color: #18263c;
line-height: 34rpx;
}
.file-list {
display: flex;
flex-wrap: wrap;
margin-top: 14rpx;
}
.file-item {
width: 96rpx;
height: 96rpx;
margin: 0 16rpx 16rpx 0;
border-radius: 12rpx;
overflow: hidden;
background: #f7faff;
border: 1rpx solid #e5ebf5;
}
.file-image {
width: 100%;
height: 100%;
}
.pdf-file {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: #fff5f5;
}
.pdf-text {
padding: 4rpx 8rpx;
border-radius: 6rpx;
background: #dc2626;
font-size: 22rpx;
font-weight: 700;
color: #ffffff;
line-height: 26rpx;
}
.empty-inline {
margin-top: 12rpx;
font-size: 24rpx;
color: #9aa7b8;
line-height: 32rpx;
}
.timeline-wrap {
padding: 8rpx 20rpx 20rpx;
}
.timeline-item {
position: relative;
padding-left: 26rpx;
& + .timeline-item {
margin-top: 10rpx;
}
&::before {
content: '';
position: absolute;
left: 7rpx;
top: 18rpx;
bottom: -14rpx;
width: 1rpx;
background: rgba(191, 219, 254, 0.9);
}
&:last-child::before {
display: none;
}
}
.timeline-dot {
position: absolute;
left: 0;
top: 10rpx;
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background: #3d6dff;
}
.timeline-content {
padding: 14rpx 16rpx;
border-radius: 12rpx;
background: #f7faff;
}
.log-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.log-time,
.log-user {
font-size: 24rpx;
color: #5f6f86;
line-height: 32rpx;
}
.log-user {
color: #475569;
}
.log-body {
margin-top: 6rpx;
}
.log-footer {
display: flex;
align-items: center;
margin-top: 6rpx;
}
.log-label {
font-size: 24rpx;
color: #5f6f86;
line-height: 34rpx;
}
.log-text {
display: block;
margin-top: 4rpx;
font-size: 24rpx;
color: #18263c;
line-height: 36rpx;
}
.log-status,
.log-node {
margin-left: 12rpx;
font-size: 24rpx;
font-weight: 600;
line-height: 34rpx;
}
.log-node {
color: #475569;
word-break: break-all;
}
.log-status {
&.approved {
color: #16a34a;
}
&.rejected {
color: #dc2626;
}
&.pending {
color: #316cff;
}
}
.bottom-actions {
position: fixed;
left: 16rpx;
right: 16rpx;
bottom: 0;
display: flex;
align-items: center;
padding: 16rpx;
padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
background: rgba(255, 255, 255, 0.96);
border-radius: 18rpx 18rpx 0 0;
box-shadow: 0 -6rpx 20rpx rgba(15, 23, 42, 0.05);
z-index: 100;
}
.approve-modal,
.price-modal {
padding: 40rpx 32rpx;
padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
background: #ffffff;
}
.price-modal {
max-height: 86vh;
overflow-y: auto;
}
.modal-title {
margin-bottom: 32rpx;
font-size: 34rpx;
font-weight: 700;
color: #1e293b;
text-align: center;
}
.modal-body,
.price-summary {
margin-bottom: 40rpx;
padding: 24rpx;
border-radius: 18rpx;
background: #f8fafc;
}
.modal-textarea-wrap {
margin-top: 28rpx;
}
.modal-footer {
display: flex;
align-items: center;
}
.price-summary {
margin-bottom: 20rpx;
}
.price-summary-item {
display: flex;
justify-content: space-between;
& + .price-summary-item {
margin-top: 12rpx;
}
}
.summary-label {
font-size: 24rpx;
color: #5f6f86;
line-height: 32rpx;
}
.summary-value {
max-width: 58%;
font-size: 25rpx;
font-weight: 600;
color: #18263c;
line-height: 32rpx;
text-align: right;
word-break: break-all;
}
.history-block {
margin-bottom: 24rpx;
}
.history-title {
margin-bottom: 12rpx;
font-size: 26rpx;
font-weight: 700;
color: #1e293b;
line-height: 34rpx;
}
.history-scroll {
width: 100%;
height: 360rpx;
border: 1rpx solid #e5ebf5;
border-radius: 12rpx;
}
.history-table {
min-width: 980rpx;
background: #ffffff;
}
.history-tr {
display: flex;
min-height: 72rpx;
border-bottom: 1rpx solid #edf1f7;
}
.history-head {
background: #f7faff;
font-weight: 700;
}
.history-td {
width: 160rpx;
padding: 18rpx 14rpx;
border-right: 1rpx solid #edf1f7;
box-sizing: border-box;
font-size: 24rpx;
color: #18263c;
line-height: 34rpx;
word-break: break-all;
}
.history-empty {
padding: 28rpx;
font-size: 24rpx;
color: #9aa7b8;
text-align: center;
}
}
pages/classify-price/index.vue
......@@ -26,7 +26,7 @@
</view>
<template v-else>
<view class="classify-card" v-for="item in currentList" :key="getItemKey(item)">
<view class="classify-card" v-for="item in currentList" :key="item.approve_id">
<view class="card-header row bothSide verCenter">
<text class="card-title">关务价格审批</text>
<view v-if="currentTab !== 0" :class="['status-badge', getStatusClass(item)]">
......@@ -343,14 +343,6 @@
}
},
/**
* 获取列表唯一键
* @param {Object} item - 审批项
* @return {string|number} 唯一键
*/
getItemKey(item) {
return item.bill_id || item.order_id || item.order_sn;
},
/**
* 获取状态样式
* @param {Object} item - 审批项
* @return {string} 样式名
......@@ -364,8 +356,12 @@
* @return {void}
*/
handleDetail(item) {
if (!item.order_id) {
uni.showToast({ title: '缺少订单ID', icon: 'none' });
return;
}
uni.navigateTo({
url: `/pages/classify-price/detail?order_id=${item.order_id || ''}&bill_id=${item.bill_id || ''}`
url: `/pages/classify-price/detail?order_id=${item.order_id}&bill_id=${item.bill_id || ''}`
});
}
}
......
util/api.js
......@@ -85,7 +85,19 @@ const API = {
/**
* 猎芯供应链SCM审批列表
*/
orderApproveList: API_BASE_SCM + '/approve/orderApproveList'
orderApproveList: API_BASE_SCM + '/approve/orderApproveList',
/**
* 猎芯供应链SCM订单审批详情
*/
orderApproveDetail: API_BASE_SCM + '/approve/orderDetail',
/**
* 猎芯供应链SCM订单审批
*/
approveOrder: API_BASE_SCM + '/approve/approveOrder',
/**
* 猎芯供应链SCM历史单价
*/
goodsHistoryPriceList: API_BASE_SCM + '/approve/goodsHistoryPriceList'
}
......
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