Skip to content

梁建民 / scm_app

Go to a project
Commit 5a434d79 by liangjianmin
Options

feat(approve): refactor list display and integrate API data fetching 

- Replace separate pending and done list views with unified list component using computed property
- Update field mappings to match API response schema (applicant_name, customer_name, order_sn, create_time_cn, relief_detail, status_cn)
- Remove static mock data and implement dynamic data fetching via API.feeApproveList
- Add getData method to fetch approval lists based on tab status (0 for pending, 1,2 for completed)
- Simplify tab labels by removing hardcoded counts
- Consolidate card rendering logic to reduce code duplication
- Add onShow lifecycle hook to refresh data when page becomes visible
- Update status display logic to use numeric status values (1 for approved, others for rejected)
- Improve empty state messaging with dynamic text based on current tab
parent db154520
Inline Side-by-side
Showing with 48 additions and 89 deletions
pages/approve/index.vue
...@@ -8,141 +8,96 @@ ...@@ -8,141 +8,96 @@
<u-tabs :list="tabList" :current="currentTab" @click="onTabChange" :scrollable="false" lineColor="#3b82f6" lineWidth="50" lineHeight="4" :activeStyle="{ color: '#3b82f6', fontWeight: '600', fontSize: '32rpx' }" :inactiveStyle="{ color: '#909399', fontSize: '28rpx', fontWeight: '400' }" itemStyle="padding: 24rpx 40rpx"></u-tabs> <u-tabs :list="tabList" :current="currentTab" @click="onTabChange" :scrollable="false" lineColor="#3b82f6" lineWidth="50" lineHeight="4" :activeStyle="{ color: '#3b82f6', fontWeight: '600', fontSize: '32rpx' }" :inactiveStyle="{ color: '#909399', fontSize: '28rpx', fontWeight: '400' }" itemStyle="padding: 24rpx 40rpx"></u-tabs>
</view> </view>
<!-- 待处理列表 --> <view class="list-wrap">
<view class="list-wrap" v-if="currentTab === 0"> <view class="approve-card" v-for="item in currentList" :key="item.id">
<view class="approve-card" v-for="item in pendingList" :key="item.id"> <view class="card-title">{{ item.apply_type }}</view>
<view class="card-title">{{ item.title }}</view>
<view class="card-body"> <view class="card-body">
<view class="card-row row"> <view class="card-row row">
<text class="card-label">申请人：</text> <text class="card-label">申请人：</text>
<text class="card-value">{{ item.applicant }}</text> <text class="card-value">{{ item.applicant_name }}</text>
</view> </view>
<view class="card-row row"> <view class="card-row row">
<text class="card-label">客户名称：</text> <text class="card-label">客户名称：</text>
<text class="card-value">{{ item.customerName }}</text> <text class="card-value">{{ item.customer_name }}</text>
</view> </view>
<view class="card-row row"> <view class="card-row row">
<text class="card-label">订单号：</text> <text class="card-label">订单号：</text>
<text class="card-value">{{ item.orderNo }}</text> <text class="card-value">{{ item.order_sn }}</text>
</view> </view>
<view class="card-row row verCenter bothSide"> <view class="card-row row verCenter bothSide">
<view class="row verCenter"> <view class="row verCenter">
<u-icon name="info-circle-fill" color="#3b82f6"></u-icon> <u-icon name="info-circle-fill" color="#3b82f6"></u-icon>
<text class="card-time">{{ item.time }}</text> <text class="card-time">{{ item.create_time_cn }}</text>
</view> </view>
<text class="card-tag">{{ item.tag }}</text> <text class="card-tag">{{ item.relief_detail }}</text>
</view> </view>
</view> </view>
<view class="card-footer row rowCenter"> <view class="card-footer row rowCenter" v-if="currentTab === 0">
<view class="action-btn approve" @click="handleApprove(item)">审批</view> <view class="action-btn approve" @click="handleApprove(item)">审批</view>
</view> </view>
</view> <view class="card-status-bar row rowCenter" v-else>
<text :class="['status-text', item.status === 1 ? 'approved' : 'rejected']">
<u-empty v-if="!pendingList.length" mode="data" text="暂无待处理审批"></u-empty> {{ item.status_cn }}
</view>
<!-- 已处理列表 -->
<view class="list-wrap" v-if="currentTab === 1">
<view class="approve-card" v-for="item in doneList" :key="item.id">
<view class="card-title">{{ item.title }}</view>
<view class="card-body">
<view class="card-row row">
<text class="card-label">申请人：</text>
<text class="card-value">{{ item.applicant }}</text>
</view>
<view class="card-row row">
<text class="card-label">客户名称：</text>
<text class="card-value">{{ item.customerName }}</text>
</view>
<view class="card-row row">
<text class="card-label">订单号：</text>
<text class="card-value">{{ item.orderNo }}</text>
</view>
<view class="card-row row verCenter bothSide">
<view class="row verCenter">
<u-icon name="info-circle-fill" color="#3b82f6"></u-icon>
<text class="card-time">{{ item.time }}</text>
</view>
<text class="card-tag">{{ item.tag }}</text>
</view>
</view>
<view class="card-status-bar row rowCenter">
<text :class="['status-text', item.status === 'approved' ? 'approved' : item.status === 'reviewing' ? 'reviewing' : 'rejected']">
{{ item.statusText }}
</text> </text>
</view> </view>
</view> </view>
<u-empty v-if="!doneList.length" mode="data" text="暂无已处理审批"></u-empty> <u-empty v-if="!currentList.length" mode="data" :text="currentTab === 0 ? '暂无待处理审批' : '暂无已处理审批'"></u-empty>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import { API } from '@/util/api';
export default { export default {
data() { data() {
return { return {
keyword: '', keyword: '',
currentTab: 0, currentTab: 0,
tabList: [ tabList: [
{ name: '待处理(2)' }, { name: '待处理' },
{ name: '已处理' } { name: '已处理' }
], ],
// 静态演示数据 pendingList: [],
pendingList: [ doneList: []
{ };
id: 1,
title: '费用减免申请',
applicant: '陈小将',
customerName: '深圳市海克斯科技有限公司',
orderNo: 'B123456',
time: '2026-04-10 14:01',
tag: '代理费减免'
}, },
{ computed: {
id: 2, currentList() {
title: '费用减免申请', return this.currentTab === 0 ? this.pendingList : this.doneList;
applicant: '$_发起人姓名',
customerName: '$_客户名称',
orderNo: '$_关联客户名称',
time: '2026-04-10 14:04',
tag: '代理费减免'
} }
],
doneList: [
{
id: 3,
title: '费用减免申请',
applicant: '陈小将',
customerName: '深圳市海克斯科技有限公司',
orderNo: 'B123456',
time: '2026-04-10 14:01',
tag: '代理费减免',
status: 'reviewing',
statusText: '审批中'
}, },
{ onShow() {
id: 4, this.getData();
title: '费用减免申请',
applicant: '陈小将',
customerName: '深圳市海克斯科技有限公司',
orderNo: 'B123456',
time: '2026-04-10 14:01',
tag: '代理费减免',
status: 'approved',
statusText: '已通过'
}
]
};
}, },
methods: { methods: {
/** /**
* 获取审批列表，根据当前 Tab 传不同 status
* @return {void}
*/
getData() {
var statusVal = this.currentTab === 0 ? '0' : '1,2';
this.request(API.feeApproveList, 'GET', { status: statusVal }, true).then(res => {
if (res.code === 0) {
var { list = [], total = 0 } = res.data || {};
if (this.currentTab === 0) {
this.pendingList = list;
this.$set(this.tabList, 0, { name: total ? `待处理(${total})` : '待处理' });
} else {
this.doneList = list;
}
}
});
},
/**
* Tab 切换 * Tab 切换
* @param {Object} item - 选中的 tab 项 * @param {Object} item - 选中的 tab 项
* @return {void} * @return {void}
*/ */
onTabChange(item) { onTabChange(item) {
this.currentTab = item.index; this.currentTab = item.index;
this.getData();
}, },
/** /**
* 审批 * 审批
......
util/api.js
...@@ -54,7 +54,11 @@ const API = { ...@@ -54,7 +54,11 @@ const API = {
/** /**
* 根据订单号获取客户名称 * 根据订单号获取客户名称
*/ */
getCustomerName: API_BASE + '/ajax/customerNameOption' getCustomerName: API_BASE + '/ajax/customerNameOption',
/**
* 获取审批列表
*/
feeApproveList: API_BASE + '/api/approve/feeApproveList'
} }
......
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