增加示例页、组件、样式

zrlibs

2025-03-17 7ae689ef9495232756023f0177683e80615e13aa

增加示例页、组件、样式

 src/components/examples/data-table.vue

@@ -5,11 +5,12 @@
      :row-class-name="() => ['no-wrap', 'col-gap-none']"
      :columns="columns"
      :data="data"
      :height="tableHeight - 70"
      :height="paged ? tableHeight - 70 : tableHeight"
      border
      ref="refTable"
    ></Table>
    <Page
      v-if="paged"
      class="text-center"
      :model-value="page"
      :total="total"
@@ -34,6 +35,10 @@
  name: "DataTable",
  props: {
    tableHeight: Number | String,
    paged: {
      type: Boolean,
      default: () => true,
    },
    columns: {
      type: Array,
      default: () => [],
@@ -127,6 +132,7 @@

<style lang="less" scoped>
.data-table {
  height: 100%;
  .text-center {
    text-align: center;
  }

 src/layout/index.vue

@@ -135,8 +135,19 @@
    },
  },
  mounted() {
    let firstRoute = this.viewList[0];
    this.onMenuClick(firstRoute.id);
    // 指定了正确的url参数时，跳转至指定页(刷新)
    // 否则跳转至首页
    let id = this.$route.query.menuId;
    if (
      this.viewList.map((v) => v.name).includes(this.$route.name) &&
      this.viewList.map((v) => v.id).includes(id)
    ) {
      let route = this.viewList.find((v) => v.id == id);
      this.onMenuClick(route.id);
    } else {
      let firstRoute = this.viewList[0];
      this.onMenuClick(firstRoute.id);
    }
  },
  setup() {
    let refMenu = ref(null);
@@ -215,6 +226,10 @@
          display: none;
        }
      }
      .view {
        width: calc(100% - 240px);
        height: 100%;
      }
    }
  }
}

 src/less/examples.less

@@ -76,4 +76,53 @@
            white-space: nowrap;
        }
    }
}

.ivu-form {
    &.ivu-form-label-right {
        .ivu-form-item-label {
            padding-right: 5px;
        }

        .ivu-form-item {
            margin-bottom: 0px;
        }
    }
}

.ivu-split-trigger-horizontal {
    height: 10px;
    width: 100px;
    border: 1px solid #dcdee2;
    margin-left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    box-shadow: 0px 1px 1px 1px #0001;

    .ivu-split-trigger-bar-con.horizontal {
        width: 16px;

        .ivu-split-trigger-bar {
            height: 3px;
        }
    }
}

.ivu-split-trigger-vertical {
    width: 10px;
    height: 100px;
    border: 1px solid #dcdee2;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    box-shadow: 0px 1px 1px 1px #0001;

    .ivu-split-trigger-bar-con.vertical {
        height: 31px;

        .ivu-split-trigger-bar {
            width: 5px;
        }
    }
}

 src/router/routes.js

@@ -25,7 +25,7 @@
            {
                path: 'example-data-table',
                name: 'example-data-table',
                component: () => import('@/views/examples/data-table.vue'),
                component: () => import('@/views/examples/data-table/index.vue'),
                meta: { title: '数据报表' }
            },
            {

 src/views/examples/data-table.vue

File was deleted

 src/views/examples/data-table/dialogs/info.vue

New file
@@ -0,0 +1,129 @@
<template>
  <Modal
    :model-value="modelValue"
    title="Common Modal dialog box title"
    class-name="data-table-add"
    @update:model-value="(v) => this.$emit('update:modelValue', v)"
  >
    <Form :model="form" :label-width="110">
      <template v-if="model != 'info'">
        <FormItem label="仓库编码：">
          <Input
            v-model="form.WH_Code"
            placeholder="Enter something..."
            size="small"
          ></Input>
        </FormItem>
        <FormItem label="仓库名称：">
          <Input
            v-model="form.WH_Code"
            placeholder="Enter something..."
            size="small"
          ></Input>
        </FormItem>
        <FormItem label="仓库负责人：">
          <Input
            v-model="form.WH_Code"
            placeholder="Enter something..."
            size="small"
          ></Input>
        </FormItem>
        <FormItem label="仓库电话：">
          <Input
            v-model="form.WH_Code"
            placeholder="Enter something..."
            size="small"
          ></Input>
        </FormItem>
        <FormItem label="上级仓库编码：">
          <Input
            v-model="form.WH_Code"
            placeholder="Enter something..."
            size="small"
          ></Input>
        </FormItem>
        <FormItem label="地址：">
          <Input
            v-model="form.WH_Code"
            placeholder="Enter something..."
            size="small"
          ></Input>
        </FormItem>
        <FormItem>
          <Checkbox v-model="form.WH_Code" size="small">是否本级</Checkbox>
        </FormItem>
        <FormItem>
          <Checkbox v-model="form.WH_Code" size="small">是否代管</Checkbox>
        </FormItem>
        <FormItem>
          <Checkbox v-model="form.WH_Code" size="small">是否启用</Checkbox>
        </FormItem>
      </template>
      <template v-else>
        <FormItem label="仓库编码："> 仓库编码 </FormItem>
        <FormItem label="仓库名称："> 仓库名称 </FormItem>
        <FormItem label="仓库负责人："> 仓库负责人 </FormItem>
        <FormItem label="仓库电话："> 仓库电话 </FormItem>
        <FormItem label="上级仓库编码："> 上级仓库编码 </FormItem>
        <FormItem label="地址："> 地址 </FormItem>
        <FormItem>
          <Checkbox v-model="form.WH_Code" size="small" disabled
            >是否本级</Checkbox
          >
        </FormItem>
        <FormItem>
          <Checkbox v-model="form.WH_Code" size="small" disabled
            >是否代管</Checkbox
          >
        </FormItem>
        <FormItem>
          <Checkbox v-model="form.WH_Code" size="small" disabled
            >是否启用</Checkbox
          >
        </FormItem>
      </template>
    </Form>
    <template #footer>
      <template v-if="model != 'info'">
        <Space>
          <Button type="text" @click="onCancel">取消</Button>
          <Button type="primary" @click="onOk">确定</Button>
        </Space>
      </template>
      <template v-else>
        <Button type="primary" @click="onClose">关闭</Button>
      </template>
    </template>
  </Modal>
</template>

<script>
export default {
  name: "ExampleDataTableAdd",
  props: {
    modelValue: Boolean,
    model: {
      type: String,
      default: () => "info",
    },
  },
  data() {
    return {
      form: {},
    };
  },
  methods: {
    onOk() {},
    onCancel() {},
    onClose() {},
  },
};
</script>

<style lang="less">
.data-table-add {
  .ivu-modal {
    top: 40px;
  }
}
</style>

 src/views/examples/data-table/index.vue

New file
@@ -0,0 +1,330 @@
<template>
  <div class="example-data-table" ref="refView">
    <div class="search-form">
      <Form :model="form" :label-width="110">
        <Row>
          <Col span="6">
            <FormItem label="仓库编码：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="仓库名称：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="仓库负责人：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="仓库电话：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="6">
            <FormItem label="上级仓库编码：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="地址：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
            </FormItem>
          </Col>
          <Col span="4">
            <FormItem :label-width="34">
              <Checkbox v-model="form.WH_Code" size="small">是否本级</Checkbox>
            </FormItem>
          </Col>
          <Col span="4">
            <FormItem :label-width="34">
              <Checkbox v-model="form.WH_Code" size="small">是否代管</Checkbox>
            </FormItem>
          </Col>
          <Col span="4">
            <FormItem :label-width="34">
              <Checkbox v-model="form.WH_Code" size="small">是否启用</Checkbox>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </div>
    <div class="buttons">
      <Space>
        <Button type="success" size="small" @click="onAddClick">新增</Button>
        <Button type="warning" size="small" @click="onEditClick">修改</Button>
        <Button type="error" size="small" @click="onDelClick">删除</Button>
        <Button type="primary" size="small" @click="onViewClick">查看</Button>
      </Space>
    </div>
    <DataTable
      :tableHeight="tableHeight"
      :columns="columns"
      :data="data"
    ></DataTable>
    <DataTableInfo
      v-model="infoDialog.visible"
      :model="infoDialog.model"
      :dataId="infoDialog.dataId"
    ></DataTableInfo>
  </div>
</template>

<script>
import { ref, resolveComponent } from "vue";
import DataTable from "@/components/examples/data-table.vue";
import DataTableInfo from "./dialogs/info.vue";
export default {
  name: "ExampleDataTable",
  components: {
    DataTable,
    DataTableInfo,
  },
  data() {
    return {
      columns: [],
      data: [],
      tableHeight: 0,
      form: {
        WH_Code: "",
      },
      infoDialog: {
        model: "info",
        visible: false,
        dataId: "",
      },
    };
  },
  methods: {
    async loadColumns() {
      this.columns = [
        {
          type: "index",
          title: " ",
          render: (h, { index }) => {
            return h(index);
          },
          width: 50,
          fixed: "left",
        },
        {
          key: "row_button",
          title: " ",
          render: (h, { row, index }) => {
            return h(
              resolveComponent("Space"),
              {},
              {
                default: () => [
                  h("a", [
                    h(
                      resolveComponent("Tooltip"),
                      {
                        content: "修改",
                        style: {
                          marginRight: "3px",
                        },
                      },
                      {
                        default: () =>
                          h(resolveComponent("icon"), {
                            type: "md-build",
                            size: 14,
                            color: "#f90",
                            onClick: () => {},
                          }),
                      }
                    ),
                    h(
                      resolveComponent("Tooltip"),
                      {
                        content: "删除",
                        transfer: true,
                        style: {
                          verticalAlign: "-1px",
                        },
                      },
                      {
                        default: () =>
                          h(
                            resolveComponent("Poptip"),
                            {
                              title: "是否确定删除此项？",
                              transfer: true,
                              confirm: true,
                              onOnOk: () => this.onDelClickItem(index),
                              onOnCancel: () => {},
                            },
                            {
                              default: () =>
                                h(resolveComponent("icon"), {
                                  type: "ios-trash-outline",
                                  size: 18,
                                  color: "#ed4014",
                                }),
                            }
                          ),
                      }
                    ),
                  ]),
                ],
              }
            );
          },
          width: 50,
          fixed: "left",
        },
        {
          key: "WH_Code",
          title: "仓库编码",
          width: 150,
          fixed: "left",
        },
        {
          key: "WH_Name",
          title: "仓库名称",
        },
        {
          key: "WH_Leader",
          title: "仓库负责人",
          width: 100,
        },
        {
          key: "WH_Tel",
          title: "仓库电话",
          width: 100,
        },
        {
          key: "Address",
          title: "地址",
          width: 100,
        },
        {
          key: "TopLevelWH_Code",
          title: "上级仓库编码",
          width: 100,
        },
        {
          key: "IsThisLevel",
          title: "是否本级",
          width: 70,
        },
        {
          key: "IsEscrow",
          title: "是否代管",
          width: 70,
        },
        {
          key: "IsEnable",
          title: "是否启用",
          width: 70,
        },
      ];
    },
    async loadData() {
      this.data = [{}];
    },
    resize() {
      let height =
        this.refView.clientHeight -
        this.$el.querySelector(".search-form").clientHeight -
        this.$el.querySelector(".buttons").clientHeight -
        9 -
        9;
      this.tableHeight = height;
    },
    onAddClick() {
      this.infoDialog.model = "add";
      this.infoDialog.dataId = "";
      this.infoDialog.visible = true;
    },
    onEditClick() {
      this.infoDialog.model = "edit";
      this.infoDialog.dataId = "";
      this.infoDialog.visible = true;
    },
    onViewClick() {
      this.infoDialog.model = "info";
      this.infoDialog.dataId = "";
      this.infoDialog.visible = true;
    },
    async onDelClick() {
      this.$Modal.confirm({
        title: "提示",
        content: "是否确认删除这些条目",
        loading: true,
        onOk: () => {
          setTimeout(() => {
            this.$Modal.remove();
            this.$Message.success("删除成功！");
          }, 2000);
        },
      });
    },
    async onDelClickItem(index) {
      const msg = this.$Message.loading({
        content: "删除中...",
        duration: 0,
      });
      setTimeout(() => {
        this.data.splice(index, 1);
        msg();
        this.$Message.success("删除成功！");
      }, 2000);
    },
  },
  async mounted() {
    await this.loadColumns();
    await this.loadData();
    this.$nextTick(() => {
      this.resize();
    });
  },
  setup() {
    const refView = ref(null);
    return { refView };
  },
};
</script>

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

 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>

 src/views/examples/report.vue

@@ -1,5 +1,137 @@
<template>
  <div class="example-report-view" ref="refView">
    <div class="search-form">
      <Form :model="form" :label-width="110">
        <Row>
          <Col span="6">
            <FormItem label="供应商编码：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="供应商名称：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="ASN单号：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="存货：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="6">
            <FormItem label="代购订单号：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="订单交期：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="状态：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="6">
            <FormItem label="采购员：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="采购类型：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="单据类型：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="关闭状态：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="6">
            <FormItem label="是否到货完成：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="ASN创建日期：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </div>
    <div class="buttons">
      <Button type="success" size="small" @click="onExportClick">导出</Button>
    </div>
    <DataTable
      :tableHeight="tableHeight"
      :columns="columns"
@@ -21,6 +153,9 @@
      columns: [],
      data: [],
      tableHeight: 0,
      form: {
        WH_Code: "",
      },
    };
  },
  methods: {
@@ -35,55 +170,78 @@
          width: 50,
        },
        {
          key: "WH_Code",
          title: "仓库编码",
          width: 150,
        },
        {
          key: "WH_Name",
          title: "仓库名称",
        },
        {
          key: "WH_Leader",
          title: "仓库负责人",
          key: "",
          title: "ASN单号",
          width: 100,
        },
        {
          key: "WH_Tel",
          title: "仓库电话",
          key: "",
          title: "关闭状态",
          width: 100,
        },
        {
          key: "Address",
          title: "地址",
          key: "",
          title: "存货状态",
          width: 100,
        },
        {
          key: "TopLevelWH_Code",
          title: "上级仓库编码",
          key: "",
          title: "存货名称",
          width: 100,
        },
        {
          key: "IsThisLevel",
          title: "是否本级",
          width: 70,
          key: "",
          title: "规格型号",
          width: 100,
        },
        {
          key: "IsEscrow",
          title: "是否代管",
          width: 70,
          key: "",
          title: "审核状态",
          width: 100,
        },
        {
          key: "IsEnable",
          title: "是否启用",
          width: 70,
          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 loadData() {},
    resize() {
      this.tableHeight = this.refView.clientHeight;
      let height =
        this.refView.clientHeight -
        this.$el.querySelector(".search-form").clientHeight -
        this.$el.querySelector(".buttons").clientHeight -
        9 -
        9;
      this.tableHeight = height;
    },
    onExportClick() {},
  },
  async mounted() {
    await this.loadColumns();
@@ -99,8 +257,16 @@
};
</script>

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