From dad44b84ab21f9d1f860760a045015f1cab0aaec Mon Sep 17 00:00:00 2001
From: zrlibs <jesting_rr@163.com>
Date: 星期三, 19 三月 2025 10:57:14 +0800
Subject: [PATCH] fixed
---
src/views/examples/master-slave.vue | 257 +++++++++++++++++++++++++++++++++++++--------------
1 files changed, 187 insertions(+), 70 deletions(-)
diff --git a/src/views/examples/master-slave.vue b/src/views/examples/master-slave.vue
index 0c3fa1a..a359d56 100644
--- a/src/views/examples/master-slave.vue
+++ b/src/views/examples/master-slave.vue
@@ -13,58 +13,34 @@
<Row>
<Col span="6">
<FormItem label="浠撳簱缂栫爜锛�>
- <Input
- v-model="topForm.WH_Code"
- placeholder="Enter something..."
- size="small"
- ></Input>
+ <Input v-model="topForm.WH_Code" size="small"></Input>
</FormItem>
</Col>
<Col span="6">
<FormItem label="浠撳簱鍚嶇О锛�>
- <Input
- v-model="topForm.WH_Code"
- placeholder="Enter something..."
- size="small"
- ></Input>
+ <Input v-model="topForm.WH_Code" size="small"></Input>
</FormItem>
</Col>
<Col span="6">
<FormItem label="浠撳簱璐熻矗浜猴細">
- <Input
- v-model="topForm.WH_Code"
- placeholder="Enter something..."
- size="small"
- ></Input>
+ <Input v-model="topForm.WH_Code" size="small"></Input>
</FormItem>
</Col>
<Col span="6">
<FormItem label="浠撳簱鐢佃瘽锛�>
- <Input
- v-model="topForm.WH_Code"
- placeholder="Enter something..."
- size="small"
- ></Input>
+ <Input v-model="topForm.WH_Code" size="small"></Input>
</FormItem>
</Col>
</Row>
<Row>
<Col span="6">
<FormItem label="涓婄骇浠撳簱缂栫爜锛�>
- <Input
- v-model="topForm.WH_Code"
- placeholder="Enter something..."
- size="small"
- ></Input>
+ <Input v-model="topForm.WH_Code" size="small"></Input>
</FormItem>
</Col>
<Col span="6">
<FormItem label="鍦板潃锛�>
- <Input
- v-model="topForm.WH_Code"
- placeholder="Enter something..."
- size="small"
- ></Input>
+ <Input v-model="topForm.WH_Code" size="small"></Input>
</FormItem>
</Col>
<Col span="4">
@@ -98,6 +74,18 @@
:tableHeight="tableTopHeight"
:columns="topColumns"
:data="topData"
+ :page="topPage"
+ :limit="topLimit"
+ :limits="topLimits"
+ :total="topTotal"
+ :loading="topLoading"
+ highlight-row
+ @on-current-change="onCurrentChange"
+ @on-change="onPageChange"
+ @on-page-size-change="onPageSizeChange"
+ @on-prev="onPrev"
+ @on-next="onNext"
+ ref="refTopTable"
></DataTable>
</div>
</template>
@@ -112,6 +100,7 @@
</div>
</template>
</Split>
+ <Spin fix :show="loading" />
</div>
</template>
@@ -125,6 +114,9 @@
},
data() {
return {
+ // 鍒嗛殧姣斾緥
+ split: 0.6,
+ // 涓昏〃鍙傛暟瀹氫箟
topColumns: [],
topData: [],
tableTopHeight: 0,
@@ -132,173 +124,275 @@
topForm: {
WH_Code: "",
},
+ topPage: 1,
+ topLimit: 30,
+ topLimits: [10, 20, 30],
+ topTotal: 0,
+ topLoading: false,
+ currentRow: undefined,
+ // 浠庤〃鍙傛暟瀹氫箟
bottomColumns: [],
bottomData: [],
- split: 0.6,
+
+ loading: false,
};
},
methods: {
async loadTopColumns() {
this.topColumns = [
{
- type: "index",
+ key: "index",
title: " ",
render: (h, { index }) => {
- return h(index);
+ return h("div", (this.topPage - 1) * this.topLimit + index + 1);
},
- width: 50,
+ width: 40,
+ align: "center",
},
{
- key: "",
+ key: "orderNo",
title: "鍒拌揣鍗曞彿",
width: 100,
},
{
- key: "",
+ key: "checkNo",
title: "妫�煡鍗曞彿",
width: 100,
},
{
- key: "",
+ key: "invertoryCode",
title: "瀛樿揣缂栫爜",
width: 100,
},
{
- key: "",
+ key: "invertoryName",
title: "瀛樿揣鍚嶇О",
width: 100,
},
{
- key: "",
+ key: "specModel",
title: "瑙勬牸鍨嬪彿",
width: 100,
},
{
- key: "",
+ key: "logo",
title: "鍝佺墝",
width: 100,
},
{
- key: "",
+ key: "desc",
title: "鍙傛暟鎻忚堪",
width: 100,
},
{
- key: "",
+ key: "material",
title: "鏉愭枡",
width: 100,
},
{
- key: "",
+ key: "unit",
title: "鍗曚綅",
width: 100,
},
{
- key: "",
+ key: "count",
title: "鍏ュ簱鏁伴噺",
width: 100,
},
{
- key: "",
+ key: "arriveDate",
title: "鍒拌揣鏃ユ湡",
width: 100,
},
{
- key: "",
+ key: "checkDate",
title: "妫�煡鏃ユ湡",
width: 100,
},
{
- key: "",
+ key: "business",
title: "涓氬姟绫诲瀷",
width: 100,
},
];
},
- async loadTopData() {},
+ // 鍔犺浇涓昏〃鏁版嵁
+ async loadTopData() {
+ let msg = this.$Message.loading("姝ｅ湪鍔犺浇鏁版嵁...");
+ this.topLoading = true;
+
+ this.bottomData = [];
+
+ let { data, total } = await this.fakeTopDataList();
+
+ msg();
+
+ this.topData = data;
+ this.topTotal = total;
+ this.topLoading = false;
+
+ this.$nextTick(() => {
+ let firstRow = this.refTopTable.refTable.objData[0];
+ if (firstRow) {
+ firstRow._isHighlight = true;
+ this.currentRow = this.topData[0];
+ this.loadBottomData();
+ }
+ });
+ },
+ // 涓昏〃娴嬭瘯鏁版嵁鍒楄〃
+ fakeTopDataList() {
+ return new Promise((resolve) => {
+ let total = 99;
+ let fakeList = [];
+ for (let i = 0; i < this.topLimit; i++) {
+ let row = {
+ orderNo: `鍒拌揣鍗曞彿-${(this.topPage - 1) * this.topLimit + i + 1}`,
+ checkNo: `妫�煡鍗曞彿-${(this.topPage - 1) * this.topLimit + i + 1}`,
+ invertoryCode: `瀛樿揣缂栫爜-${
+ (this.topPage - 1) * this.topLimit + i + 1
+ }`,
+ invertoryName: `瀛樿揣鍚嶇О-${
+ (this.topPage - 1) * this.topLimit + i + 1
+ }`,
+ specModel: `瑙勬牸鍨嬪彿-${(this.topPage - 1) * this.topLimit + i + 1}`,
+ logo: `鍝佺墝-${(this.topPage - 1) * this.topLimit + i + 1}`,
+ desc: `鍙傛暟鎻忚堪-${(this.topPage - 1) * this.topLimit + i + 1}`,
+ material: `鏉愭枡-${(this.topPage - 1) * this.topLimit + i + 1}`,
+ unit: `鍗曚綅-${(this.topPage - 1) * this.topLimit + i + 1}`,
+ count: `鍏ュ簱鏁伴噺-${(this.topPage - 1) * this.topLimit + i + 1}`,
+ arriveDate: `鍒拌揣鏃ユ湡-${
+ (this.topPage - 1) * this.topLimit + i + 1
+ }`,
+ checkDate: `妫�煡鏃ユ湡-${(this.topPage - 1) * this.topLimit + i + 1}`,
+ business: `涓氬姟绫诲瀷-${(this.topPage - 1) * this.topLimit + i + 1}`,
+ };
+ if ((this.topPage - 1) * this.topLimit + i + 1 < 100)
+ fakeList.push(row);
+ }
+ setTimeout(() => {
+ resolve({ data: fakeList, total });
+ }, 1 * 1000);
+ });
+ },
+ // 浠庤〃娴嬭瘯鏁版嵁鍒楄〃
+ fakeBottomDataList(topDataId) {
+ return new Promise((resolve) => {
+ let total = Math.floor(Math.random() * 10);
+ let fakeList = [];
+ for (let i = 0; i < total; i++) {
+ let row = {
+ checkOrder: `${topDataId}-${i + 1}`,
+ arriveOrder: `${topDataId}-${i + 1}`,
+ location: `${topDataId}-${i + 1}`,
+ supplier: `${topDataId}-${i + 1}`,
+ asnCode: `${topDataId}-${i + 1}`,
+ supplierCode: `${topDataId}-${i + 1}`,
+ WHName: `${topDataId}-${i + 1}`,
+ count: `${topDataId}-${i + 1}`,
+ canUsedCount: `${topDataId}-${i + 1}`,
+ invertoryCode: `${topDataId}-${i + 1}`,
+ invertoryName: `${topDataId}-${i + 1}`,
+ specModel: `${topDataId}-${i + 1}`,
+ logo: `${topDataId}-${i + 1}`,
+ wpn: `${topDataId}-${i + 1}`,
+ };
+ fakeList.push(row);
+ }
+ setTimeout(() => {
+ resolve(fakeList);
+ }, 1 * 1000);
+ });
+ },
loadBottomColumns() {
this.bottomColumns = [
{
- type: "index",
+ key: "index",
title: " ",
render: (h, { index }) => {
- return h(index);
+ return h("div", index + 1);
},
- width: 50,
+ width: 40,
+ align: "center",
},
{
- key: "",
+ key: "checkOrder",
title: "妫�獙鍗�,
width: 100,
},
{
- key: "",
+ key: "arriveOrder",
title: "鍒拌揣鍗�,
width: 100,
},
{
- key: "",
+ key: "location",
title: "寰呮璐т綅",
width: 100,
},
{
- key: "",
+ key: "supplier",
title: "渚涘簲鍟嗗悕绉�,
width: 100,
},
{
- key: "",
+ key: "asnCode",
title: "ASN鍗曞彿",
width: 100,
},
{
- key: "",
+ key: "supplierCode",
title: "渚涘簲鍟嗙紪鐮�,
width: 100,
},
{
- key: "",
+ key: "WHName",
title: "浠撳簱鍚嶇О",
width: 100,
},
{
- key: "",
+ key: "count",
title: "鏁伴噺",
width: 100,
},
{
- key: "",
+ key: "canUsedCount",
title: "鍙敤缁戝畾鏁伴噺",
width: 100,
},
{
- key: "",
+ key: "invertoryCode",
title: "瀛樿揣缂栫爜",
width: 100,
},
{
- key: "",
+ key: "invertoryName",
title: "瀛樿揣鍚嶇О",
width: 100,
},
{
- key: "",
+ key: "specModel",
title: "瑙勬牸鍨嬪彿",
width: 100,
},
{
- key: "",
+ key: "logo",
title: "鍝佺墝",
width: 100,
},
{
- key: "",
+ key: "wpn",
title: "WPN",
width: 100,
},
];
},
- async loadBottomData() {},
+ // 鍔犺浇浠庤〃鏁版嵁
+ async loadBottomData() {
+ let { orderNo } = this.currentRow;
+ let data = await this.fakeBottomDataList(orderNo);
+ this.bottomData = data;
+ },
resize() {
this.$nextTick(() => {
let topHeight =
@@ -311,20 +405,43 @@
this.tableBottomHeight = bottomHeight;
});
},
+ // 涓昏〃鍒囨崲閫夋嫨琛屾椂瑙﹀彂
+ async onCurrentChange(row) {
+ this.currentRow = row;
+ this.loading = true;
+ await this.loadBottomData();
+ this.loading = false;
+ },
+ onPageChange(page) {
+ this.topPage = page;
+ this.loadTopData();
+ },
+ onPageSizeChange(limit) {
+ this.topLimit = limit;
+ this.loadTopData();
+ },
+ onPrev(page) {
+ this.topPage = page;
+ this.loadTopData();
+ },
+ onNext(page) {
+ this.topPage = page;
+ this.loadTopData();
+ },
},
async mounted() {
await this.loadTopColumns();
- await this.loadTopData();
await this.loadBottomColumns();
- await this.loadBottomData();
- this.$nextTick(() => {
+ this.$nextTick(async () => {
+ await this.loadTopData();
this.resize();
});
},
setup() {
const refTopView = ref(null);
const refBottomView = ref(null);
- return { refTopView, refBottomView };
+ const refTopTable = ref(null);
+ return { refTopView, refBottomView, refTopTable };
},
};
</script>
--
Gitblit v1.9.1