DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎈 perf: 处理一些细节问题

Browse Source
This commit is contained in:
砂糖
2025-08-27 16:25:52 +08:00
parent cd822d4296
commit 278b0c8258
12 changed files with 484 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
klp-ui/src/views/finance/order/index.vue
View File

@@ -4,10 +4,36 @@
<el-col :span="6">
<div>
<el-row>
<el-input v-model="queryParams.orderCode" placeholder="请输入单据编号" clearable
@keyup.enter.native="handleQuery" />
<el-input
v-model="queryParams.orderCode"
placeholder="请输入单据编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-row>
<el-tree v-loading="orderListLoading" :data="treeData" :props="defaultProps" @node-click="handleNodeClick" />
<!-- 使用klp-list组件替换el-tree -->
<klp-list
v-loading="orderListLoading"
:list-data="orderList"
list-key="orderId"
title-label="订单编号"
title-field="orderCode"
:title-max-width="180"
@item-click="handleItemClick"
>
<!-- 操作按钮插槽 -->
<!-- <template #actions="{ item, isSelected }">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click.stop="handleViewDetail(item)"
title="查看详情"
></el-button>
</template> -->
</klp-list>
<pagination
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@@ -47,14 +73,15 @@
</el-tab-pane>
<el-tab-pane label="应收明细" name="receivable">
<el-table v-loading="rightLoading" :data="currentOrder.receivables" empty-text="暂无数据">
<el-table-column label="应收ID" align="center" prop="receivableId" v-if="false" />
<el-table-column label="客户" align="center" prop="customerName" />
<el-table-column label="订单ID" align="center" prop="orderId" />
<el-table-column label="到期日" align="center" prop="dueDate" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
<el-tag v-if="new Date(scope.row.dueDate) < new Date()" type="danger">过期</el-tag>
<el-tag v-else-if="new Date(scope.row.dueDate) > new Date()" type="success">还剩{{ parseInt((new Date(scope.row.dueDate) - new Date()) / (1000 * 60 * 60 * 24)) }}天</el-tag>
<el-tag v-else-if="new Date(scope.row.dueDate) > new Date()" type="success">
还剩{{ parseInt((new Date(scope.row.dueDate) - new Date()) / (1000 * 60 * 60 * 24)) }}天
</el-tag>
</template>
</el-table-column>
<el-table-column label="应收金额" align="center" prop="amount" />
@@ -66,14 +93,15 @@
</el-tab-pane>
<el-tab-pane label="应付明细" name="payable">
<el-table v-loading="rightLoading" :data="currentOrder.payables" empty-text="暂无数据">
<el-table-column label="应付ID" align="center" prop="payableId" v-if="false" />
<el-table-column label="供应商" align="center" prop="supplierName" />
<el-table-column label="订单ID" align="center" prop="orderId" />
<el-table-column label="到期日" align="center" prop="dueDate" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
<el-tag v-if="new Date(scope.row.dueDate) < new Date()" type="danger">过期</el-tag>
<el-tag v-else-if="new Date(scope.row.dueDate) > new Date()" type="success">还剩{{ parseInt((new Date(scope.row.dueDate) - new Date()) / (1000 * 60 * 60 * 24)) }}天</el-tag>
<el-tag v-else-if="new Date(scope.row.dueDate) > new Date()" type="success">
还剩{{ parseInt((new Date(scope.row.dueDate) - new Date()) / (1000 * 60 * 60 * 24)) }}天
</el-tag>
</template>
</el-table-column>
<el-table-column label="应付金额" align="center" prop="amount" />
@@ -97,7 +125,6 @@
</el-col>
</el-row>
</div>
</template>
<script>
@@ -108,11 +135,13 @@ import { listPayable } from "@/api/finance/payable";
import { listFinancialDocument } from "@/api/finance/financialDocument";
import OrderDetailList from '@/views/wms/order/panels/detail.vue'
import klpList from "@/components/KLPUI/KLPList/index.vue"; // 引入klp-list组件
export default {
name: "Order",
components: {
OrderDetailList
OrderDetailList,
klpList // 注册klp-list组件
},
data() {
return {
@@ -124,12 +153,8 @@ export default {
orderCode: undefined
},
orderListLoading: false,
treeData: [],
orderList: [], // 用于klp-list的列表数据
total: 0,
defaultProps: {
children: 'children',
label: 'label'
},
rightLoading: false,
}
},
@@ -144,39 +169,62 @@ export default {
getList() {
this.orderListLoading = true;
listOrder(this.queryParams).then(response => {
this.treeData = response.rows.map(item => ({
label: item.orderCode,
value: item
}));
this.orderList = response.rows; // 直接使用原始数据
this.total = response.total;
}).finally(() => {
this.orderListLoading = false;
});
},
handleNodeClick(data) {
// 处理列表项点击事件
handleItemClick(selectedItem) {
if (!selectedItem) {
this.currentOrder = null;
return;
}
if (this.rightLoading) {
this.$message.warning('请等待当前订单加载完成');
return;
}
this.currentOrder = data.value;
this.fetchData(data.value.orderId);
this.currentOrder = selectedItem;
this.fetchData(selectedItem.orderId);
},
// 查看详情按钮点击事件
handleViewDetail(item) {
this.currentOrder = item;
this.fetchData(item.orderId);
},
async fetchData(orderId) {
this.rightLoading = true;
// 需要逐个获取订单明细、应收明细、应付明细、凭证管理
const orderDetail = (await listOrderDetail({ orderId, pageSize: 1000 })).rows;
const receivableDetail = (await listReceivable({ orderId, pageSize: 1000 })).rows;
const payableDetail = (await listPayable({ orderId, pageSize: 1000 })).rows;
const documentDetail = (await listFinancialDocument({ orderId, pageSize: 1000 })).rows;
this.rightLoading = false;
this.currentOrder = {
...this.currentOrder,
details: orderDetail,
receivables: receivableDetail,
payables: payableDetail,
documents: documentDetail
try {
// 并行请求提高性能
const [
orderDetailRes,
receivableRes,
payableRes,
documentRes
] = await Promise.all([
listOrderDetail({ orderId, pageSize: 1000 }),
listReceivable({ orderId, pageSize: 1000 }),
listPayable({ orderId, pageSize: 1000 }),
listFinancialDocument({ orderId, pageSize: 1000 })
]);
this.currentOrder = {
...this.currentOrder,
details: orderDetailRes.rows,
receivables: receivableRes.rows,
payables: payableRes.rows,
documents: documentRes.rows
};
} catch (error) {
this.$message.error('数据加载失败，请重试');
console.error(error);
} finally {
this.rightLoading = false;
}
}
}
}
</script>
</script>