From cd24c776d772c7ad797891afd779b3b072293ec2 Mon Sep 17 00:00:00 2001
From: zrlibs <jesting_rr@163.com>
Date: 星期五, 21 三月 2025 17:35:07 +0800
Subject: [PATCH] fixed
---
src/views/examples/master-slave.vue | 534 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 528 insertions(+), 6 deletions(-)
diff --git a/src/views/examples/master-slave.vue b/src/views/examples/master-slave.vue
index dc87588..eb8dfd1 100644
--- a/src/views/examples/master-slave.vue
+++ b/src/views/examples/master-slave.vue
@@ -1,15 +1,537 @@
<template>
- <div class="example-master-slave"></div>
+ <div class="example-master-slave">
+ <Split
+ v-model="split"
+ mode="vertical"
+ @on-moving="resize"
+ @on-move-end="resize"
+ >
+ <template #top>
+ <div class="top-view" ref="refTopView">
+ <DataTable
+ :buttons="topButtons"
+ :formObject="topFormObject"
+ :height="topHeight"
+ :columns="topColumns"
+ :data="topData"
+ :page="topPage"
+ :limit="topLimit"
+ :limits="topLimits"
+ :total="topTotal"
+ :loading="topLoading"
+ pagePlacement="top"
+ 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>
+ <template #bottom>
+ <div class="bottom-view" ref="refBottomView">
+ <DataTable
+ :showForm="false"
+ :showTopButtons="false"
+ :height="bottomHeight"
+ :columns="bottomColumns"
+ :data="bottomData"
+ :paged="false"
+ size="small"
+ @on-row-click="onBottomRowClick"
+ ></DataTable>
+ </div>
+ </template>
+ </Split>
+ <Drawer
+ title="婕旂ず"
+ closable
+ v-model="thirdDataDialog.visible"
+ :width="thirdDataDialog.width"
+ :mask-closable="false"
+ :mask="false"
+ draggable
+ >
+ <p>Some contents...</p>
+ <p>Some contents...</p>
+ <p>Some contents...</p>
+ </Drawer>
+ <Spin fix :show="loading" />
+ </div>
</template>
<script>
+import { ref } from "vue";
+import DataTable from "@/components/examples/data-table.vue";
export default {
- name:'ExampleMasterSlave'
-}
+ name: "ExampleMasterSlave",
+ components: {
+ DataTable,
+ },
+ data() {
+ return {
+ // 鍒嗛殧姣斾緥
+ split: 0.8,
+ topFormObject: {
+ options: {},
+ items: [],
+ },
+ // 涓昏〃鍙傛暟瀹氫箟
+ topButtons: [
+ {
+ showName: "娓呯┖鏌ヨ",
+ onClick: () => this.onClearClick(),
+ },
+ ],
+ topColumns: [],
+ topData: [],
+ topHeight: 0,
+ bottomHeight: 0,
+ topForm: {
+ code: "",
+ name: "",
+ leader: "",
+ tel: "",
+ topCode: "",
+ address: "",
+ isThisLevel: false,
+ isEscorw: false,
+ isEnable: false,
+ },
+ topPage: 1,
+ topLimit: 30,
+ topLimits: [10, 20, 30],
+ topTotal: 0,
+ topLoading: false,
+ currentRow: undefined,
+ // 浠庤〃鍙傛暟瀹氫箟
+ bottomColumns: [],
+ bottomData: [],
+ // 涓夌骇鏁版嵁婕旂ず
+ thirdDataDialog: {
+ visible: false,
+ width: 500,
+ },
+
+ loading: false,
+ };
+ },
+ methods: {
+ async loadTopForm() {
+ this.topFormObject.options = {
+ labelWidth: 110,
+ };
+ this.topFormObject.items = [
+ {
+ label: "浠撳簱缂栫爜锛�,
+ field: "SupplierCode",
+ value: "",
+ type: "input",
+ span: 6,
+ },
+ {
+ label: "浠撳簱鍚嶇О锛�,
+ field: "SupplierName",
+ value: "",
+ type: "input",
+ span: 6,
+ },
+ {
+ label: "浠撳簱璐熻矗浜猴細",
+ field: "ASNCode",
+ value: "",
+ type: "input",
+ span: 6,
+ },
+ {
+ label: "浠撳簱鐢佃瘽锛�,
+ field: "Invertory",
+ value: "",
+ type: "input",
+ span: 6,
+ },
+ {
+ label: "涓婄骇浠撳簱缂栫爜锛�,
+ field: "PurchaseOrderNo",
+ value: "",
+ type: "input",
+ span: 6,
+ },
+ {
+ label: "鍦板潃锛�,
+ field: "OrderDate",
+ value: "",
+ type: "input",
+ span: 18,
+ },
+ {
+ label: "鏄惁鏈骇",
+ field: "isThisLevel",
+ value: false,
+ type: "checkbox",
+ span: 6,
+ onChange: () => {},
+ },
+ {
+ label: "鏄惁浠ｇ",
+ field: "isEscorw",
+ value: false,
+ type: "checkbox",
+ span: 6,
+ onChange: () => {},
+ },
+ {
+ label: "鏄惁鍚敤",
+ field: "isEnable",
+ value: false,
+ type: "checkbox",
+ span: 6,
+ onChange: () => {},
+ },
+ ];
+ },
+ async loadTopColumns() {
+ this.topColumns = [
+ {
+ key: "index",
+ title: " ",
+ render: (h, { index }) => {
+ return h("div", (this.topPage - 1) * this.topLimit + index + 1);
+ },
+ width: 40,
+ align: "center",
+ },
+ {
+ key: "orderNo",
+ title: "鍒拌揣鍗曞彿",
+ width: 100,
+ },
+ {
+ key: "checkNo",
+ title: "妫�煡鍗曞彿",
+ width: 100,
+ },
+ {
+ key: "invertoryCode",
+ title: "瀛樿揣缂栫爜",
+ width: 100,
+ },
+ {
+ key: "invertoryName",
+ title: "瀛樿揣鍚嶇О",
+ width: 100,
+ },
+ {
+ key: "specModel",
+ title: "瑙勬牸鍨嬪彿",
+ width: 100,
+ },
+ {
+ key: "logo",
+ title: "鍝佺墝",
+ width: 100,
+ },
+ {
+ key: "desc",
+ title: "鍙傛暟鎻忚堪",
+ width: 100,
+ },
+ {
+ key: "material",
+ title: "鏉愭枡",
+ width: 100,
+ },
+ {
+ key: "unit",
+ title: "鍗曚綅",
+ width: 100,
+ },
+ {
+ key: "count",
+ title: "鍏ュ簱鏁伴噺",
+ width: 100,
+ },
+ {
+ key: "arriveDate",
+ title: "鍒拌揣鏃ユ湡",
+ width: 100,
+ },
+ {
+ key: "checkDate",
+ title: "妫�煡鏃ユ湡",
+ width: 100,
+ },
+ {
+ key: "business",
+ title: "涓氬姟绫诲瀷",
+ width: 100,
+ },
+ ];
+ },
+ // 鍔犺浇涓昏〃鏁版嵁
+ 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 + 1);
+ 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 = [
+ {
+ key: "index",
+ title: " ",
+ render: (h, { index }) => {
+ return h("div", index + 1);
+ },
+ width: 40,
+ align: "center",
+ },
+ {
+ key: "checkOrder",
+ title: "妫�獙鍗�,
+ width: 100,
+ },
+ {
+ key: "arriveOrder",
+ title: "鍒拌揣鍗�,
+ width: 100,
+ },
+ {
+ key: "location",
+ title: "寰呮璐т綅",
+ width: 100,
+ },
+ {
+ key: "supplier",
+ title: "渚涘簲鍟嗗悕绉�,
+ width: 100,
+ },
+ {
+ key: "asnCode",
+ title: "ASN鍗曞彿",
+ width: 100,
+ },
+ {
+ key: "supplierCode",
+ title: "渚涘簲鍟嗙紪鐮�,
+ width: 100,
+ },
+ {
+ key: "WHName",
+ title: "浠撳簱鍚嶇О",
+ width: 100,
+ },
+ {
+ key: "count",
+ title: "鏁伴噺",
+ width: 100,
+ },
+ {
+ key: "canUsedCount",
+ title: "鍙敤缁戝畾鏁伴噺",
+ width: 100,
+ },
+ {
+ key: "invertoryCode",
+ title: "瀛樿揣缂栫爜",
+ width: 100,
+ },
+ {
+ key: "invertoryName",
+ title: "瀛樿揣鍚嶇О",
+ width: 100,
+ },
+ {
+ key: "specModel",
+ title: "瑙勬牸鍨嬪彿",
+ width: 100,
+ },
+ {
+ key: "logo",
+ title: "鍝佺墝",
+ width: 100,
+ },
+ {
+ key: "wpn",
+ title: "WPN",
+ width: 100,
+ },
+ ];
+ },
+ // 鍔犺浇浠庤〃鏁版嵁
+ async loadBottomData() {
+ let { orderNo } = this.currentRow;
+ let data = await this.fakeBottomDataList(orderNo);
+ this.bottomData = data;
+ },
+ resize() {
+ this.$nextTick(() => {
+ this.topHeight = this.refTopView.clientHeight - 10;
+ let bottomHeight = this.refBottomView.clientHeight - 9;
+ this.bottomHeight = 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();
+ },
+ onClearClick() {
+ this.reset();
+ },
+ onBottomRowClick(row, index) {
+ this.showThirdData(row);
+ },
+ showThirdData() {
+ this.thirdDataDialog.visible = true;
+ },
+ reset() {
+ this.topForm.code = "";
+ this.topForm.name = "";
+ this.topForm.leader = "";
+ this.topForm.tel = "";
+ this.topForm.topCode = "";
+ this.topForm.address = "";
+ this.topForm.isThisLevel = false;
+ this.topForm.isEscorw = false;
+ this.topForm.isEnable = false;
+ },
+ },
+ async mounted() {
+ await this.loadTopForm();
+ await this.loadTopColumns();
+ await this.loadBottomColumns();
+ this.$nextTick(async () => {
+ await this.loadTopData();
+ this.resize();
+ });
+ },
+ setup() {
+ const refTopView = ref(null);
+ const refBottomView = ref(null);
+ const refTopTable = ref(null);
+ return { refTopView, refBottomView, refTopTable };
+ },
+};
</script>
-<style lang="less" scoped>
-.example-master-slave{
-
+<style lang="less">
+.example-master-slave {
+ height: 100%;
+ .top-view {
+ height: 100%;
+ .search-form {
+ margin-bottom: 9px;
+ }
+ }
+ .bottom-view {
+ margin-top: 9px;
+ height: 100%;
+ }
+ .ivu-form .ivu-form-item-label,
+ .ivu-checkbox-wrapper {
+ font-size: 12px;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.1