fixed

zrlibs

2025-03-19 dad44b84ab21f9d1f860760a045015f1cab0aaec

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

@@ -5,73 +5,51 @@
        <Row>
          <Col span="6">
            <FormItem label="仓库编码：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
              <Input v-model="form.code" size="small"></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="仓库名称：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
              <Input v-model="form.name" size="small"></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="仓库负责人：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
              <Input v-model="form.leader" size="small"></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="仓库电话：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
              <Input v-model="form.tel" size="small"></Input>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="6">
            <FormItem label="上级仓库编码：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
              <Input v-model="form.topCode" size="small"></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="地址：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
              <Input v-model="form.address" size="small"></Input>
            </FormItem>
          </Col>
          <Col span="4">
            <FormItem :label-width="34">
              <Checkbox v-model="form.WH_Code" size="small">是否本级</Checkbox>
              <Checkbox v-model="form.isThisLevel" size="small"
                >是否本级</Checkbox
              >
            </FormItem>
          </Col>
          <Col span="4">
            <FormItem :label-width="34">
              <Checkbox v-model="form.WH_Code" size="small">是否代管</Checkbox>
              <Checkbox v-model="form.isEscrow" size="small">是否代管</Checkbox>
            </FormItem>
          </Col>
          <Col span="4">
            <FormItem :label-width="34">
              <Checkbox v-model="form.WH_Code" size="small">是否启用</Checkbox>
              <Checkbox v-model="form.isEnable" size="small">是否启用</Checkbox>
            </FormItem>
          </Col>
        </Row>
@@ -89,6 +67,16 @@
      :tableHeight="tableHeight"
      :columns="columns"
      :data="data"
      :page="page"
      :limit="limit"
      :limits="limits"
      :total="total"
      :loading="loading"
      @on-selection-change="onSelectionChange"
      @on-change="onPageChange"
      @on-page-size-change="onPageSizeChange"
      @on-prev="onPrev"
      @on-next="onNext"
    ></DataTable>
    <DataTableInfo
      v-model="infoDialog.visible"
@@ -113,9 +101,26 @@
      columns: [],
      data: [],
      tableHeight: 0,
      // 分页信息
      page: 1,
      limit: 30,
      limits: [10, 20, 30],
      total: 0,
      selection: [],
      loading: false,
      // 查询表单定义
      form: {
        WH_Code: "",
        code: "",
        name: "",
        leader: "",
        tel: "",
        topCode: "",
        address: "",
        isThisLevel: false,
        isEscrow: false,
        isEnable: false,
      },
      // 弹框参数定义
      infoDialog: {
        model: "info",
        visible: false,
@@ -127,13 +132,20 @@
    async loadColumns() {
      this.columns = [
        {
          type: "index",
          type: "selection",
          width: 40,
          fixed: "left",
          align: "center",
        },
        {
          key: "index",
          title: " ",
          render: (h, { index }) => {
            return h(index);
            return h("div", (this.page - 1) * this.limit + index + 1);
          },
          width: 50,
          width: 40,
          fixed: "left",
          align: "center",
        },
        {
          key: "row_button",
@@ -159,7 +171,7 @@
                            type: "md-build",
                            size: 14,
                            color: "#f90",
                            onClick: () => {},
                            onClick: () => this.onEditRowClick(index),
                          }),
                      }
                    ),
@@ -203,54 +215,140 @@
          fixed: "left",
        },
        {
          key: "WH_Code",
          key: "code",
          title: "仓库编码",
          width: 150,
          fixed: "left",
          sortable: true,
          resizable: true,
        },
        {
          key: "WH_Name",
          key: "name",
          title: "仓库名称",
          width: 200,
          sortable: true,
          resizable: true,
        },
        {
          key: "WH_Leader",
          key: "leader",
          title: "仓库负责人",
          width: 100,
          width: 150,
          sortable: true,
          resizable: true,
        },
        {
          key: "WH_Tel",
          key: "tel",
          title: "仓库电话",
          width: 100,
          width: 150,
          sortable: true,
          resizable: true,
        },
        {
          key: "Address",
          key: "address",
          title: "地址",
          width: 100,
          width: 150,
          sortable: true,
          resizable: true,
        },
        {
          key: "TopLevelWH_Code",
          key: "topCode",
          title: "上级仓库编码",
          width: 100,
          sortable: true,
          resizable: true,
        },
        {
          key: "IsThisLevel",
          key: "isThisLevel",
          title: "是否本级",
          width: 70,
          render: (h, { row }) => {
            return h(
              "div",
              h(resolveComponent("Checkbox"), {
                modelValue: row.isThisLevel,
                disabled: true,
                size: "small",
              })
            );
          },
          width: 80,
          align: "center",
          sortable: true,
        },
        {
          key: "IsEscrow",
          key: "isEscrow",
          title: "是否代管",
          width: 70,
          render: (h, { row }) => {
            return h(
              "div",
              h(resolveComponent("Checkbox"), {
                modelValue: row.isEscrow,
                disabled: true,
                size: "small",
              })
            );
          },
          width: 80,
          align: "center",
          sortable: true,
        },
        {
          key: "IsEnable",
          key: "isEnable",
          title: "是否启用",
          width: 70,
          render: (h, { row }) => {
            return h(
              "div",
              h(resolveComponent("Checkbox"), {
                modelValue: row.isEnable,
                disabled: true,
                size: "small",
              })
            );
          },
          width: 80,
          align: "center",
          sortable: true,
        },
      ];
    },
    // 加载数据行
    async loadData() {
      this.data = [{}];
      let msg = this.$Message.loading("正在加载数据...");
      this.loading = true;

      let { data, total } = await this.fakeDataList();

      msg();

      this.data = data;
      this.total = total;
      this.loading = false;
    },
    // 测试数据列表
    fakeDataList(limit) {
      return new Promise((resolve) => {
        let total = 99;
        let fakeList = [];
        for (let i = 0; i < (limit || this.limit); i++) {
          let row = {
            code: `仓库编码-${(this.page - 1) * this.limit + i + 1}`,
            name: `仓库名称-${(this.page - 1) * this.limit + i + 1}`,
            leader: `仓库负责人-${(this.page - 1) * this.limit + i + 1}`,
            tel: `仓库电话-${(this.page - 1) * this.limit + i + 1}`,
            address: `地址-${(this.page - 1) * this.limit + i + 1}`,
            topCode: `上级仓库编码-${(this.page - 1) * this.limit + i + 1}`,
            isThisLevel:
              ((this.page - 1) * this.limit + i + 1) % 2 == 0 ? true : false,
            isEscrow:
              ((this.page - 1) * this.limit + i + 1) % 2 == 0 ? true : false,
            isEnable:
              ((this.page - 1) * this.limit + i + 1) % 2 == 0 ? true : false,
          };
          if ((this.page - 1) * this.limit + i + 1 < 100) fakeList.push(row);
        }
        setTimeout(() => {
          resolve({ data: fakeList, total });
        }, 1 * 1000);
      });
    },
    resize() {
      let height =
@@ -267,14 +365,35 @@
      this.infoDialog.visible = true;
    },
    onEditClick() {
      if (this.selection.length == 0) return this.showWarning("未选择操作项");
      else if (this.selection.length > 1)
        return this.showWarning("只能选择一项进行编辑");
      let code = this.selection[0].code;
      this.infoDialog.model = "edit";
      this.infoDialog.dataId = "";
      this.infoDialog.dataId = code;
      this.infoDialog.visible = true;
    },
    onEditRowClick(index) {
      let code = this.data[index].code;
      this.infoDialog.model = "edit";
      this.infoDialog.dataId = code;
      this.infoDialog.visible = true;
    },
    onViewClick() {
      if (this.selection.length == 0) return this.showWarning("未选择操作项");
      else if (this.selection.length > 1)
        return this.showWarning("只能选择一项查看");
      let code = this.selection[0].code;
      this.infoDialog.model = "info";
      this.infoDialog.dataId = "";
      this.infoDialog.dataId = code;
      this.infoDialog.visible = true;
    },
    showWarning(tip) {
      this.$Message.warning({
        content: tip,
        duration: 0,
        closable: true,
      });
    },
    async onDelClick() {
      this.$Modal.confirm({
@@ -300,12 +419,31 @@
        this.$Message.success("删除成功！");
      }, 2000);
    },
    onSelectionChange(selection) {
      this.selection = selection;
    },
    onPageChange(page) {
      this.page = page;
      this.loadData();
    },
    onPageSizeChange(limit) {
      this.limit = limit;
      this.loadData();
    },
    onPrev(page) {
      this.page = page;
      this.loadData();
    },
    onNext(page) {
      this.page = page;
      this.loadData();
    },
  },
  async mounted() {
    await this.loadColumns();
    await this.loadData();
    this.$nextTick(() => {
      this.resize();
      this.loadData();
    });
  },
  setup() {
@@ -315,16 +453,34 @@
};
</script>

<style lang="less" scoped>
<style lang="less">
.example-data-table {
  height: 100%;
  .search-form,
  .buttons {
    margin-bottom: 9px;
  }
  .table {
    height: calc(100% - 170px);
  }
  .ivu-form .ivu-form-item-label,
  .ivu-checkbox-wrapper {
    font-size: 12px;
  }
  .ivu-input-wrapper {
    .ivu-icon {
      cursor: pointer;
    }
  }
  .ivu-checkbox-input[disabled] {
    cursor: default;
  }
  .ivu-checkbox-disabled .ivu-checkbox-inner {
    border-color: #666;
    background-color: #fff;
  }
  .ivu-checkbox-disabled.ivu-checkbox-checked .ivu-checkbox-inner:after {
    border-color: #666;
  }
}
</style>