fixed

zrlibs

2025-03-21 cd24c776d772c7ad797891afd779b3b072293ec2

 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>