hbte-saas-ui 0.0.1

package/examples/views/HBFullTable.vue

@@ -0,0 +1,751 @@
+<template>
+  <div class="hb-testtable">
+    <hb-advquery
+      class="hb-testtable-header"
+      :qryFormProps="qryFormProps"
+      :qryFormData="qryFormData"
+      :customQueryData="customQueryData"
+      @AdvQuery="handleAdvSearch"
+      :showCusQuery="false"
+    >
+      <el-dropdown trigger="click" size="small" slot="cusBtn">
+        <el-button size="mini" class="el-dropdown-link">
+          按钮插槽<i class="el-icon-arrow-down el-icon--right"></i>
+        </el-button>
+
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item>全部</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+
+      <hb-toolgroup
+        slot="tools"
+        :icons="['add']"
+        @search="handleSearch"
+        @event="handleTools"
+      >
+        <p>
+          此页面不止调用一个组件，仅再现业务场景的布局实现方案,包含多个组件具体业务自行控制
+          <el-button size="mini" @click="handleValidDoubleRow"
+            >手动校验编辑列</el-button
+          >
+          <el-button size="mini" @click="handleChangeColumns"
+            >主动切换列配置</el-button
+          >
+        </p>
+      </hb-toolgroup>
+
+      <div slot="dropdownSlot">
+        <span>12345678</span>
+      </div>
+    </hb-advquery>
+    <div class="hb-testtable-body">
+      <hb-fulltable
+        ref="table"
+        class="hb-testtable-body__inner"
+        :tableData="tableData"
+        :columns="columns"
+        :pageData="pageData"
+        :pageSizes="pageSizes"
+        :select="true"
+        :selectable="
+          (row) => {
+            return row.id % 2 === 1;
+          }
+        "
+        @pageSizeChange="handlePageSizeChange"
+        @pageNumChange="handlePageNumChange"
+        @columnsChange="handleColumnsChange"
+      >
+        <el-table-column
+          slot="company"
+          slot-scope="{ column, align }"
+          :label="column.label"
+          :key="column.prop"
+          :minWidth="column.minWidth"
+          :align="align"
+          :show-overflow-tooltip="false"
+        >
+          <template #header>
+            <!-- 排序方案 -->
+            <span @click="handleClickTop"
+              >公司
+              <i v-if="column.sort === 0" class="el-icon-caret-bottom"></i>
+              <i v-else-if="column.sort === 1" class="el-icon-caret-top"></i>
+              <i
+                v-else
+                class="el-icon-caret-bottom"
+                style="color: #999 !important"
+              ></i>
+            </span>
+          </template>
+          <template v-slot="{ row }">
+            <span>公司名：{{ row.company }}</span>
+          </template>
+        </el-table-column>
+      </hb-fulltable>
+    </div>
+  </div>
+</template>
+
+<script>
+// 测试数据
+import json from "../mock/fulltable";
+export default {
+  data() {
+    return {
+      // 高级查询数据
+      customQueryData: [
+        {
+          label: "aaa",
+          value: "aaa",
+        },
+        {
+          label: "bbb",
+          value: "bbb",
+        },
+      ],
+      qryFormData: {
+        a: "",
+        b: false,
+        c: "",
+        d: "",
+        e: "",
+        f: "",
+        g: [],
+        h: "",
+        all: [],
+      },
+      qryFormProps: [
+        {
+          type: "input",
+          label: "求助事项",
+          prop: "a",
+          placeholder: "请输入求助事项",
+          maxlength: "64",
+        },
+        {
+          type: "switch",
+          label: "负责部门",
+          prop: "b",
+        },
+        {
+          type: "radio",
+          label: "事项分类",
+          prop: "c",
+          placeholder: "请输入作业名称",
+          optList: [
+            {
+              label: "a",
+              value: "1",
+            },
+            {
+              label: "b",
+              value: "2",
+            },
+          ],
+        },
+        {
+          type: "select",
+          label: "重要程度",
+          prop: "d",
+          multiple: true,
+          placeholder: "请选择重要程度",
+          optList: [
+            {
+              label: "a",
+              value: "1",
+            },
+            {
+              label: "b",
+              value: "2",
+            },
+          ],
+        },
+        {
+          type: "selectAll",
+          label: "重要程度",
+          prop: "all",
+          multiple: true,
+          placeholder: "请选择重要程度",
+          optList: [
+            {
+              label: "a",
+              value: "1",
+            },
+            {
+              label: "b",
+              value: "2",
+            },
+          ],
+        },
+        {
+          type: "daterange",
+          label: "日期",
+          prop: "e",
+          placeholder: "请选择日期",
+        },
+        {
+          type: "date",
+          label: "日期",
+          prop: "f",
+          placeholder: "请选择日期",
+        },
+        {
+          type: "checkbox",
+          label: "多选",
+          prop: "g",
+          placeholder: "多选",
+          optList: [
+            {
+              label: "a",
+              value: "1",
+            },
+            {
+              label: "b",
+              value: "2",
+            },
+          ],
+        },
+        {
+          label: "插槽",
+          prop: "h",
+          slot: true,
+        },
+      ],
+      // 列表数据
+      tableData: [],
+      params: { kw: "" }, // 额外params
+      columns: [
+        {
+          prop: "edit1",
+          label: "编辑列1",
+          minWidth: 200,
+          edit: {
+            keepEdit: true,
+            type: "input",
+            validate(next, value) {
+              if (value && value.length > 2) {
+                next(new Error("不能大于2个字"));
+              } else {
+                next();
+              }
+            },
+          },
+          currentSelect: true,
+        },
+        {
+          prop: "edit2",
+          label: "编辑列2",
+          minWidth: 200,
+          editCondition: function (rowIndex) {
+            return rowIndex % 2 === 0;
+          },
+          edit: {
+            keepEdit: true,
+            type: "select",
+            insert: "edit2",
+            multiple: true,
+            validate(next, value) {
+              if (value && value.length > 2) {
+                next(new Error("最多只能选择2项"));
+              } else {
+                next();
+              }
+            },
+            optList: [
+              {
+                label: "值1",
+                value: "1",
+              },
+              {
+                label: "值2",
+                value: "2",
+              },
+              {
+                label: "值3",
+                value: "3",
+              },
+            ],
+          },
+          currentSelect: true,
+        },
+        {
+          prop: "edit3",
+          label: "编辑列3",
+          minWidth: 200,
+          edit: {
+            keepEdit: true,
+            type: "input",
+            validate(next, value) {
+              if (value === "") {
+                next(new Error("不能为空"));
+              } else {
+                next();
+              }
+            },
+          },
+          currentSelect: true,
+        },
+        {
+          prop: "name",
+          label: "名称",
+          minWidth: 150,
+          slot: false,
+          fixed: "left",
+          always: "true",
+          edit: {
+            type: "input",
+            validate(next, value) {
+              if (value && value.length > 5) {
+                next(new Error("不能大于5个字"));
+              } else {
+                next();
+              }
+            },
+          },
+          currentSelect: true,
+        },
+        {
+          prop: "code",
+          label: "编码",
+          minWidth: 240,
+          slot: false,
+          edit: {
+            type: "select",
+            multiple: true,
+            insert: (row) => {
+              return row.code ? row.code.split(",") : [];
+            },
+            change: (next, row, value) => {
+              // 请求修改列数据
+              if (value) {
+                const optItem = [
+                  {
+                    label: "编码123",
+                    value: "123",
+                  },
+                  {
+                    label: "编码456",
+                    value: "456",
+                  },
+                  {
+                    label: "编码789",
+                    value: "789",
+                  },
+                ].filter((item) => value.indexOf(item.value) !== -1);
+                // 模拟修改cell内容
+                this.setProp(
+                  row.id,
+                  "code",
+                  optItem.map((item) => item.value).join(","),
+                  next
+                );
+              } else {
+                next();
+              }
+            },
+            validate(next, value) {
+              if (value && value.length > 2) {
+                next(new Error("最多只能选择2项"));
+              } else {
+                next();
+              }
+            },
+            optList: [
+              {
+                label: "编码123",
+                value: "123",
+              },
+              {
+                label: "编码456",
+                value: "456",
+              },
+              {
+                label: "编码789",
+                value: "789",
+              },
+            ],
+          },
+          currentSelect: true,
+        },
+        {
+          prop: "open",
+          label: "开关",
+          minWidth: 150,
+          sort: null,
+          edit: {
+            type: "switch",
+            change: (next, row, value) => {
+              console.log("开关", value);
+              this.setProp(row.id, "open", value, next);
+            },
+            optList: ["开", "关"],
+          },
+          currentSelect: true,
+        },
+        {
+          prop: "size",
+          label: "大小",
+          minWidth: 200,
+          sort: null,
+          edit: {
+            type: "radio",
+            change: (next, row, value) => {
+              this.setProp(row.id, "size", value, next);
+            },
+            optList: [
+              {
+                label: "大",
+                value: "big",
+              },
+              {
+                label: "中",
+                value: "middle",
+              },
+              {
+                label: "小",
+                value: "small",
+              },
+            ],
+          },
+          currentSelect: true,
+        },
+        {
+          prop: "color",
+          label: "颜色",
+          minWidth: 210,
+          sort: null,
+          edit: {
+            type: "checkbox",
+            insert: (row) => {
+              return row.color
+                ? [
+                    {
+                      label: "红",
+                      value: "red",
+                    },
+                    {
+                      label: "蓝",
+                      value: "blue",
+                    },
+                    {
+                      label: "绿",
+                      value: "green",
+                    },
+                  ]
+                    .filter((item) => row.color.indexOf(item.label) !== -1)
+                    .map((item) => item.value)
+                : [];
+            },
+            change: (next, row, value) => {
+              this.setProp(
+                row.id,
+                "color",
+                [
+                  {
+                    label: "红",
+                    value: "red",
+                  },
+                  {
+                    label: "蓝",
+                    value: "blue",
+                  },
+                  {
+                    label: "绿",
+                    value: "green",
+                  },
+                ]
+                  .filter((item) => value.indexOf(item.value) !== -1)
+                  .map((item) => item.label)
+                  .join(","),
+                next
+              );
+            },
+            optList: [
+              {
+                label: "红",
+                value: "red",
+              },
+              {
+                label: "蓝",
+                value: "blue",
+              },
+              {
+                label: "绿",
+                value: "green",
+              },
+            ],
+          },
+          currentSelect: true,
+        },
+        {
+          prop: "addr",
+          label: "地址",
+          minWidth: 150,
+          slot: false,
+          edit: {
+            type: "select",
+            change: (next, row, value) => {
+              // 请求修改列数据
+              if (value) {
+                const optItem = [
+                  {
+                    label: "测试",
+                    value: "test",
+                  },
+                ].find((item) => item.value === value);
+                // 模拟修改cell内容
+                this.setProp(row.id, "addrId", optItem.value, () => {
+                  this.setProp(row.id, "addr", optItem.label, next);
+                });
+              } else {
+                next();
+              }
+            },
+            insert: (row) => {
+              return row.addrId;
+            },
+            optList: [
+              {
+                label: "测试",
+                value: "test",
+              },
+            ],
+          },
+          currentSelect: true,
+        },
+        {
+          prop: "company",
+          label: "公司",
+          minWidth: 150,
+          slot: true,
+          sort: null,
+          currentSelect: true,
+        },
+        {
+          prop: "date",
+          label: "时间",
+          minWidth: 180,
+          slot: false,
+          edit: {
+            type: "date",
+            change: (next, row, value) => {
+              this.setProp(row.id, "date", value, next);
+            },
+          },
+          currentSelect: true,
+        },
+        {
+          prop: "daterange",
+          label: "时间范围",
+          minWidth: 380,
+          slot: false,
+          edit: {
+            type: "daterange",
+            insert: (row) => {
+              return row.daterange ? row.daterange.split(",") : [];
+            },
+            change: (next, row, value) => {
+              this.setProp(
+                row.id,
+                "daterange",
+                Array.isArray(value) ? value.join(",") : "",
+                next
+              );
+            },
+          },
+          currentSelect: true,
+        },
+        {
+          prop: "remark",
+          label: "说明",
+          minWidth: 800,
+          slot: false,
+          currentSelect: true,
+        },
+      ],
+      // 分页数据
+      pageData: {
+        pageSize: 5,
+        pageNum: 1,
+        total: 0,
+      },
+      pageSizes: [5, 10, 15],
+    };
+  },
+  methods: {
+    /**
+     * @function loadList 模拟加载列表请求
+     */
+    loadList() {
+      this.$refs.table.openLoading();
+      setTimeout(() => {
+        // const tableData = json.getTableData(
+        //   this.pageData.pageNum,
+        //   this.pageData.pageSize,
+        //   this.params.kw
+        // );
+        const tableData = json.getTableDataEmpty(
+          this.pageData.pageNum,
+          this.pageData.pageSize,
+          this.params.kw
+        );
+
+        const serverColumns = json.getColumns();
+        const localColumms = this.$lodash.cloneDeep(this.columns);
+        // 处理tableData
+        this.tableData = tableData.list;
+        // 处理columns：选中状态同步,prop以当前页面为准
+        const columnsStep1 = localColumms.map((item) => {
+          const serverCol = serverColumns.find((col) => item.prop === col.prop);
+          if (serverCol) {
+            this.$set(item, "currentSelect", serverCol.currentSelect);
+          }
+          return item;
+        });
+        // 处理columns：顺序同步
+        let columnsStep2 = [];
+        const indexMap = serverColumns.map((item) => item.prop);
+        indexMap.forEach((prop) => {
+          let indexCache = null;
+          const col = columnsStep1.find((item, index) => {
+            if (item.prop === prop) {
+              indexCache = index;
+              return true;
+            }
+          });
+          if (col) {
+            columnsStep2.push(columnsStep1.splice(indexCache, 1)[0]);
+          }
+        });
+        columnsStep2 = columnsStep2.concat(columnsStep1);
+        this.columns = this.$lodash.cloneDeep(columnsStep2);
+        // 设置页码
+        this.$set(this.pageData, "total", tableData.total);
+        this.$refs.table.closeLoading();
+      }, 800);
+    },
+    /**
+     * @event setProp 模拟修改字段请求
+     * @param {String} id 该行id
+     * @param {String} prop 该行的字段
+     * @param {*} value 要修改的值
+     * @param {Function} callback 回调
+     */
+    setProp(id, prop, value, callback) {
+      setTimeout(() => {
+        json.setTableCell(id, prop, value);
+        callback();
+      }, 720);
+    },
+    /** events */
+
+    /**
+     * @event handleTools 点击tools
+     */
+    handleTools(event) {
+      this.$message.success(`点击了按钮${event}`);
+    },
+    /**
+     * @event handleSearch 关键字搜索
+     */
+    handleSearch(kw) {
+      this.$set(this.params, "kw", kw);
+      this.$set(this.pageData, "pageNum", 1);
+      this.loadList();
+    },
+    /**
+     * @function handleAdvSearch 高级查询搜索
+     * 高级查询使用prop传值，直接进行查询
+     */
+    handleAdvSearch() {
+      this.$$message.success("高级查询，太麻烦懒得模拟数据了,只重置了页码");
+      this.$set(this.pageData, "pageNum", 1);
+      this.loadList();
+    },
+    /**
+     * @event handlePageChange 切换页数
+     */
+    handlePageSizeChange(size) {
+      this.$message.success("切换了页数");
+      this.$set(this.pageData, "pageSize", size);
+      this.$set(this.pageData, "pageNum", 1);
+      this.loadList();
+    },
+    /**
+     * @event handlePageNumChange 切换页码
+     */
+    handlePageNumChange(num) {
+      this.$message.success("切换了页码");
+      this.$set(this.pageData, "pageNum", num);
+      this.loadList();
+    },
+    /**
+     * @event handleColumnsChange 切换列配置
+     */
+    handleColumnsChange(newColumns) {
+      this.$message.success("切换了列配置");
+      json.setColumns(newColumns);
+      this.loadList();
+    },
+    /**
+     * @event handleClickTop 保存列排序
+     */
+    handleClickTop() {
+      const columns = this.columns.find((item) => item.prop === "company");
+      const num = columns.sort ? 0 : 1;
+      this.$set(columns, "sort", num);
+      console.log("静态排序", columns);
+    },
+    /**
+     * @event handleChangeColumns 主动切换列
+     */
+    handleChangeColumns() {
+      const newCol = this.$lodash
+        .cloneDeep(this.columns)
+        .slice(0, 4)
+        .reverse()
+        .map((item) => {
+          item.currentSelect = true;
+          return item;
+        });
+      this.columns = newCol;
+    },
+    /**
+     * @event handleValidDoubleRow 校验偶数列
+     */
+    handleValidDoubleRow() {
+      this.$refs.table.validateEdit((res) => {
+        console.log("校验结果", res);
+      });
+    },
+  },
+  mounted() {
+    this.loadList();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.hb-testtable {
+  height: calc(100vh);
+  display: flex;
+  flex-direction: column;
+  .hb-testtable-header {
+    transition: height 0.15s ease-out;
+  }
+  .hb-testtable-body {
+    position: relative;
+    flex: 1;
+    transition: height 0.15s ease-out;
+    .hb-testtable-body__inner {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      left: 0;
+      top: 0;
+    }
+  }
+}
+</style>