增加示例页、组件、样式

zrlibs

2025-03-17 7ae689ef9495232756023f0177683e80615e13aa

 src/views/examples/master-slave.vue

@@ -1,15 +1,351 @@
<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">
          <div class="search-form">
            <Form :model="topForm" :label-width="110">
              <Row>
                <Col span="6">
                  <FormItem label="仓库编码：">
                    <Input
                      v-model="topForm.WH_Code"
                      placeholder="Enter something..."
                      size="small"
                    ></Input>
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem label="仓库名称：">
                    <Input
                      v-model="topForm.WH_Code"
                      placeholder="Enter something..."
                      size="small"
                    ></Input>
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem label="仓库负责人：">
                    <Input
                      v-model="topForm.WH_Code"
                      placeholder="Enter something..."
                      size="small"
                    ></Input>
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem label="仓库电话：">
                    <Input
                      v-model="topForm.WH_Code"
                      placeholder="Enter something..."
                      size="small"
                    ></Input>
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col span="6">
                  <FormItem label="上级仓库编码：">
                    <Input
                      v-model="topForm.WH_Code"
                      placeholder="Enter something..."
                      size="small"
                    ></Input>
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem label="地址：">
                    <Input
                      v-model="topForm.WH_Code"
                      placeholder="Enter something..."
                      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"
            :columns="topColumns"
            :data="topData"
          ></DataTable>
        </div>
      </template>
      <template #bottom>
        <div class="bottom-view" ref="refBottomView">
          <DataTable
            :tableHeight="tableBottomHeight"
            :columns="bottomColumns"
            :data="bottomData"
            :paged="false"
          ></DataTable>
        </div>
      </template>
    </Split>
  </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 {
      topColumns: [],
      topData: [],
      tableTopHeight: 0,
      tableBottomHeight: 0,
      topForm: {
        WH_Code: "",
      },
      bottomColumns: [],
      bottomData: [],
      split: 0.6,
    };
  },
  methods: {
    async loadTopColumns() {
      this.topColumns = [
        {
          type: "index",
          title: " ",
          render: (h, { index }) => {
            return h(index);
          },
          width: 50,
        },
        {
          key: "",
          title: "到货单号",
          width: 100,
        },
        {
          key: "",
          title: "检查单号",
          width: 100,
        },
        {
          key: "",
          title: "存货编码",
          width: 100,
        },
        {
          key: "",
          title: "存货名称",
          width: 100,
        },
        {
          key: "",
          title: "规格型号",
          width: 100,
        },
        {
          key: "",
          title: "品牌",
          width: 100,
        },
        {
          key: "",
          title: "参数描述",
          width: 100,
        },
        {
          key: "",
          title: "材料",
          width: 100,
        },
        {
          key: "",
          title: "单位",
          width: 100,
        },
        {
          key: "",
          title: "入库数量",
          width: 100,
        },
        {
          key: "",
          title: "到货日期",
          width: 100,
        },
        {
          key: "",
          title: "检查日期",
          width: 100,
        },
        {
          key: "",
          title: "业务类型",
          width: 100,
        },
      ];
    },
    async loadTopData() {},
    loadBottomColumns() {
      this.bottomColumns = [
        {
          type: "index",
          title: " ",
          render: (h, { index }) => {
            return h(index);
          },
          width: 50,
        },
        {
          key: "",
          title: "检验单",
          width: 100,
        },
        {
          key: "",
          title: "到货单",
          width: 100,
        },
        {
          key: "",
          title: "待检货位",
          width: 100,
        },
        {
          key: "",
          title: "供应商名称",
          width: 100,
        },
        {
          key: "",
          title: "ASN单号",
          width: 100,
        },
        {
          key: "",
          title: "供应商编码",
          width: 100,
        },
        {
          key: "",
          title: "仓库名称",
          width: 100,
        },
        {
          key: "",
          title: "数量",
          width: 100,
        },
        {
          key: "",
          title: "可用绑定数量",
          width: 100,
        },
        {
          key: "",
          title: "存货编码",
          width: 100,
        },
        {
          key: "",
          title: "存货名称",
          width: 100,
        },
        {
          key: "",
          title: "规格型号",
          width: 100,
        },
        {
          key: "",
          title: "品牌",
          width: 100,
        },
        {
          key: "",
          title: "WPN",
          width: 100,
        },
      ];
    },
    async loadBottomData() {},
    resize() {
      this.$nextTick(() => {
        let topHeight =
          this.refTopView.clientHeight -
          this.$el.querySelector(".search-form").clientHeight -
          this.$el.querySelector(".buttons").clientHeight -
          9;
        this.tableTopHeight = topHeight;
        let bottomHeight = this.refBottomView.clientHeight - 9;
        this.tableBottomHeight = bottomHeight;
      });
    },
  },
  async mounted() {
    await this.loadTopColumns();
    await this.loadTopData();
    await this.loadBottomColumns();
    await this.loadBottomData();
    this.$nextTick(() => {
      this.resize();
    });
  },
  setup() {
    const refTopView = ref(null);
    const refBottomView = ref(null);
    return { refTopView, refBottomView };
  },
};
</script>

<style lang="less" scoped>
.example-master-slave{
    
<style lang="less">
.example-master-slave {
  height: 100%;
  .top-view {
    height: 100%;
    .search-form,
    .buttons {
      margin-bottom: 9px;
    }
  }
  .bottom-view {
    margin-top: 9px;
    height: 100%;
  }
  .ivu-form .ivu-form-item-label,
  .ivu-checkbox-wrapper {
    font-size: 12px;
  }
}
</style>