VUE_Template.git

<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>