fixed

zrlibs

2025-03-19 dad44b84ab21f9d1f860760a045015f1cab0aaec

 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>