hbte-saas-ui 0.0.2 → 1.0.0

package/examples/views/HBFullTable.vue

@@ -1,751 +0,0 @@
-<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>