fixed

zrlibs

2025-03-21 cd24c776d772c7ad797891afd779b3b072293ec2

 src/views/examples/master-slave.vue

@@ -8,70 +8,10 @@
    >
      <template #top>
        <div class="top-view" ref="refTopView">
          <div class="search-form">
            <Form :model="topForm" :label-width="110">
              <Row>
                <Col span="6">
                  <FormItem label="仓库编码：">
                    <Input v-model="topForm.WH_Code" size="small"></Input>
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem label="仓库名称：">
                    <Input v-model="topForm.WH_Code" size="small"></Input>
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem label="仓库负责人：">
                    <Input v-model="topForm.WH_Code" size="small"></Input>
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem label="仓库电话：">
                    <Input v-model="topForm.WH_Code" size="small"></Input>
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col span="6">
                  <FormItem label="上级仓库编码：">
                    <Input v-model="topForm.WH_Code" size="small"></Input>
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem label="地址：">
                    <Input v-model="topForm.WH_Code" size="small"></Input>
                  </FormItem>
                </Col>
                <Col span="4">
                  <FormItem :label-width="34">
                    <Checkbox v-model="topForm.WH_Code" size="small"
                      >是否本级</Checkbox
                    >
                  </FormItem>
                </Col>
                <Col span="4">
                  <FormItem :label-width="34">
                    <Checkbox v-model="topForm.WH_Code" size="small"
                      >是否代管</Checkbox
                    >
                  </FormItem>
                </Col>
                <Col span="4">
                  <FormItem :label-width="34">
                    <Checkbox v-model="topForm.WH_Code" size="small"
                      >是否启用</Checkbox
                    >
                  </FormItem>
                </Col>
              </Row>
            </Form>
          </div>
          <div class="buttons">
            <Button type="warning" size="small">清空查询</Button>
          </div>
          <DataTable
            :tableHeight="tableTopHeight"
            :buttons="topButtons"
            :formObject="topFormObject"
            :height="topHeight"
            :columns="topColumns"
            :data="topData"
            :page="topPage"
@@ -79,6 +19,7 @@
            :limits="topLimits"
            :total="topTotal"
            :loading="topLoading"
            pagePlacement="top"
            highlight-row
            @on-current-change="onCurrentChange"
            @on-change="onPageChange"
@@ -92,14 +33,31 @@
      <template #bottom>
        <div class="bottom-view" ref="refBottomView">
          <DataTable
            :tableHeight="tableBottomHeight"
            :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>
@@ -115,14 +73,32 @@
  data() {
    return {
      // 分隔比例
      split: 0.6,
      split: 0.8,
      topFormObject: {
        options: {},
        items: [],
      },
      // 主表参数定义
      topButtons: [
        {
          showName: "清空查询",
          onClick: () => this.onClearClick(),
        },
      ],
      topColumns: [],
      topData: [],
      tableTopHeight: 0,
      tableBottomHeight: 0,
      topHeight: 0,
      bottomHeight: 0,
      topForm: {
        WH_Code: "",
        code: "",
        name: "",
        leader: "",
        tel: "",
        topCode: "",
        address: "",
        isThisLevel: false,
        isEscorw: false,
        isEnable: false,
      },
      topPage: 1,
      topLimit: 30,
@@ -133,11 +109,89 @@
      // 从表参数定义
      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 = [
        {
@@ -278,7 +332,7 @@
    // 从表测试数据列表
    fakeBottomDataList(topDataId) {
      return new Promise((resolve) => {
        let total = Math.floor(Math.random() * 10);
        let total = Math.floor(Math.random() * 10 + 1);
        let fakeList = [];
        for (let i = 0; i < total; i++) {
          let row = {
@@ -395,14 +449,9 @@
    },
    resize() {
      this.$nextTick(() => {
        let topHeight =
          this.refTopView.clientHeight -
          this.$el.querySelector(".search-form").clientHeight -
          this.$el.querySelector(".buttons").clientHeight -
          9;
        this.tableTopHeight = topHeight;
        this.topHeight = this.refTopView.clientHeight - 10;
        let bottomHeight = this.refBottomView.clientHeight - 9;
        this.tableBottomHeight = bottomHeight;
        this.bottomHeight = bottomHeight;
      });
    },
    // 主表切换选择行时触发
@@ -428,8 +477,29 @@
      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 () => {
@@ -451,8 +521,7 @@
  height: 100%;
  .top-view {
    height: 100%;
    .search-form,
    .buttons {
    .search-form {
      margin-bottom: 9px;
    }
  }