169 lines
6.8 KiB
Vue
169 lines
6.8 KiB
Vue
<template>
|
|
<div style="padding: 20px;">
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<div>
|
|
<el-row>
|
|
<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" />
|
|
<el-pagination :current-page="queryParams.pageNum" :page-size="10" :total="total"
|
|
layout="prev, pager, next" />
|
|
</div>
|
|
</el-col>
|
|
|
|
<el-col :span="18">
|
|
<el-tabs v-if="currentOrder" v-model="activeTab">
|
|
<el-tab-pane label="订单信息" name="orderDetail">
|
|
<el-form>
|
|
<el-form-item label="订单ID">
|
|
<el-input v-model="currentOrder.orderId" disabled />
|
|
</el-form-item>
|
|
<el-form-item label="订单编号">
|
|
<el-input v-model="currentOrder.orderCode" disabled />
|
|
</el-form-item>
|
|
<el-form-item label="销售经理">
|
|
<el-input v-model="currentOrder.salesManager" disabled />
|
|
</el-form-item>
|
|
<el-form-item label="客户">
|
|
<el-input v-model="currentOrder.customerName" disabled />
|
|
</el-form-item>
|
|
<el-form-item label="含税金额">
|
|
<el-input v-model="currentOrder.taxAmount" disabled />
|
|
</el-form-item>
|
|
<el-form-item label="无税金额">
|
|
<el-input v-model="currentOrder.noTaxAmount" disabled />
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="订单明细" name="orderList">
|
|
<order-detail-list :orderId="currentOrder.orderId" />
|
|
</el-tab-pane>
|
|
<el-tab-pane label="应收明细" name="receivable">
|
|
<el-table v-loading="rightLoading" :data="currentOrder.receivables">
|
|
<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>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="应收金额" align="center" prop="amount" />
|
|
<el-table-column label="已收金额" align="center" prop="paidAmount" />
|
|
<el-table-column label="未收金额" align="center" prop="balanceAmount" />
|
|
<el-table-column label="状态" align="center" prop="status" />
|
|
<el-table-column label="备注" align="center" prop="remark" />
|
|
</el-table>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="应付明细" name="payable">
|
|
<el-table v-loading="rightLoading" :data="currentOrder.payables">
|
|
<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>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="应付金额" align="center" prop="amount" />
|
|
<el-table-column label="已付金额" align="center" prop="paidAmount" />
|
|
<el-table-column label="未付金额" align="center" prop="balanceAmount" />
|
|
<el-table-column label="状态" align="center" prop="status" />
|
|
<el-table-column label="备注" align="center" prop="remark" />
|
|
</el-table>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="凭证管理" name="document">
|
|
<el-table :data="currentOrder.documents" style="width: 100%">
|
|
<el-table-column prop="documentCode" label="凭证编号" />
|
|
<el-table-column prop="documentDate" label="凭证日期" />
|
|
<el-table-column prop="documentAmount" label="凭证金额" />
|
|
<el-table-column prop="documentStatus" label="凭证状态" />
|
|
</el-table>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
|
|
<el-empty v-else description="请选择订单" />
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { listOrder } from "@/api/wms/order";
|
|
import { listOrderDetail } from "@/api/wms/orderDetail";
|
|
import { listReceivable } from "@/api/finance/receivable";
|
|
import { listPayable } from "@/api/finance/payable";
|
|
import { listFinancialDocument } from "@/api/finance/financialDocument";
|
|
|
|
import OrderDetailList from '@/views/wms/order/panels/detail.vue'
|
|
|
|
export default {
|
|
name: "Order",
|
|
components: {
|
|
OrderDetailList
|
|
},
|
|
data() {
|
|
return {
|
|
activeTab: "orderDetail",
|
|
currentOrder: null,
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
orderCode: undefined
|
|
},
|
|
orderListLoading: false,
|
|
treeData: [],
|
|
total: 0,
|
|
defaultProps: {
|
|
children: 'children',
|
|
label: 'label'
|
|
},
|
|
rightLoading: false,
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getList();
|
|
},
|
|
methods: {
|
|
handleQuery() {
|
|
this.queryParams.pageNum = 1;
|
|
this.getList();
|
|
},
|
|
getList() {
|
|
this.orderListLoading = true;
|
|
listOrder(this.queryParams).then(response => {
|
|
this.treeData = response.rows.map(item => ({
|
|
label: item.orderCode,
|
|
value: item
|
|
}));
|
|
this.total = response.total;
|
|
}).finally(() => {
|
|
this.orderListLoading = false;
|
|
});
|
|
},
|
|
handleNodeClick(data) {
|
|
this.currentOrder = data.value;
|
|
this.fetchData(data.value.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
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script> |