vue-super-crud 1.7.1

package/packages/crud/mixins/select.js

@@ -0,0 +1,359 @@
+import { checkVisibility } from "utils";
+import { isFunction, merge } from "lodash-es";
+
+export default {
+  props: {
+    selected: {
+      type: [Object, Array],
+    },
+  },
+  data() {
+    return {
+      singleSelect: null,
+      selectionRow: [],
+      shiftOrAltDown: false,
+      CtrlDown: false,
+    };
+  },
+  mounted() {
+    if (this.selection) {
+      window.addEventListener("keydown", this.keyDown, false);
+      window.addEventListener("keyup", this.keyUp, false);
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener("keydown", this.keyDown);
+    window.removeEventListener("keyup", this.keyUp);
+  },
+  watch: {
+    // 监听外部传入的选中值变化
+    selected: {
+      handler(newVal, oldVal) {
+        // 是否完全更新数据
+        const isUpdated = newVal !== oldVal;
+        if (isUpdated && this.showSelection) {
+          this.$nextTick(() => {
+            this.updateSelection();
+          });
+        } else if (newVal && this.showSingleSelection) {
+          this.singleSelect = newVal[this.operateKey];
+        }
+      },
+      immediate: true,
+    },
+  },
+  computed: {
+    showSelection() {
+      return checkVisibility(this.crudOptions.selection);
+    },
+    showSingleSelection() {
+      return checkVisibility(this.crudOptions.singleSelection);
+    },
+    selection() {
+      return this.crudOptions.selection;
+    },
+    singleSelection() {
+      return this.crudOptions.singleSelection;
+    },
+    maxSelectionRow() {
+      if (this.selectionRow.length == 0) return null;
+      return this.selectionRow.reduce((start, end) => {
+        return start.$index > end.$index ? start : end;
+      });
+    },
+    minSelectionRow() {
+      if (this.selectionRow.length == 0) return null;
+      return this.selectionRow.reduce((start, end) => {
+        return start.$index < end.$index ? start : end;
+      });
+    },
+    operateKey() {
+      return this.selection.spanProp || this.valueKey;
+    },
+    selectedOperateKeys() {
+      return this.selected.map((item) => item[this.operateKey]);
+    },
+  },
+  methods: {
+    keyDown(event) {
+      let key = event.keyCode;
+      switch (key) {
+        case 17:
+          this.CtrlDown = true;
+          // 改变鼠标样式为指针
+          document.body.style.cursor = "pointer";
+          break;
+        case 16 || 18:
+          this.shiftOrAltDown = true;
+          // 改变鼠标样式为多选
+          document.body.style.cursor = "cell";
+          // 禁止文本选中
+          document.onselectstart = () => false;
+          document.body.style.userSelect = "none";
+          break;
+        case 27:
+          this.EscDown = true;
+          break;
+      }
+    },
+
+    keyUp(event) {
+      let key = event.keyCode;
+      switch (key) {
+        case 17:
+          this.CtrlDown = false;
+          // 恢复默认鼠标样式
+          document.body.style.cursor = "";
+          break;
+        case 16 || 18:
+          this.shiftOrAltDown = false;
+          // 恢复默认鼠标样式
+          document.body.style.cursor = "";
+          // 恢复文本选中
+          document.onselectstart = null;
+          document.body.style.userSelect = "";
+          break;
+        case 27:
+          this.EscDown = false;
+          break;
+      }
+    },
+    rowClassName_({ row, rowIndex, column, columnIndex }) {
+      let rowName = this.crudOptions.rowClassName
+        ? this.crudOptions.rowClassName.call(null, {
+            row,
+            column,
+            rowIndex,
+            columnIndex,
+          })
+        : "";
+      // var findRow = this.selectionRow.find((c) => c.$index == row.$index);
+      // if (findRow) {
+      //   rowName = "current-row " + rowName;
+      // }
+      return rowName;
+    },
+    selectRowClick(row, column, event) {
+      if (
+        this.showSingleSelection &&
+        this.singleSelection.ctrlSelect !== false &&
+        this.CtrlDown
+      ) {
+        if (isFunction(this.singleSelection.selectable)) {
+          const selectable = this.singleSelection.selectable(row, row.$index);
+          if (!selectable) {
+            return;
+          }
+        }
+        this.singleSelect = row[this.operateKey];
+        this.$emit("update:selected", row);
+        return;
+      }
+      if (!this.showSelection) return;
+
+      if (!this.selectionSelectable(row, row.$index)) {
+        return;
+      }
+
+      let refsElTable = this.$refs.tableRef;
+      if (this.selection.ctrlSelect !== false && this.CtrlDown) {
+        refsElTable.toggleRowSelection(row);
+        this.select(this.selectionRow, row);
+        return;
+      }
+
+      if (this.selection.shiftSelect !== false && this.shiftOrAltDown) {
+        let maxAndmin = this.getmaxAndminObj(
+          row.$index,
+          this.maxSelectionRow?.$index ?? row.$index,
+          this.minSelectionRow?.$index ?? 0
+        );
+        refsElTable.clearSelection();
+        this.clearSelection();
+        for (let index = maxAndmin.min; index <= maxAndmin.max; index++) {
+          refsElTable.toggleRowSelection(this.list[index], true);
+        }
+        this.select(this.selectionRow, row);
+        this.shiftOrAltDown = false;
+      }
+    },
+    getmaxAndminObj(cur = 0, max, min) {
+      let n = cur,
+        mx = max,
+        mi = min;
+      if (n > mx) {
+        return {
+          min: mi,
+          max: n,
+        };
+      } else if (n < mx && n > mi) {
+        return {
+          min: mi,
+          max: n,
+        };
+      } else if (n < mi) {
+        return {
+          min: n,
+          max: mx,
+        };
+      } else if (n == mi || n == mx) {
+        return {
+          min: mi,
+          max: mx,
+        };
+      }
+    },
+    // 更新选中状态
+    updateSelection() {
+      if (!this.$refs.tableRef) return;
+
+      // this.$refs.tableRef.clearSelection();
+      if (!this.selected?.length) return;
+
+      const updatedSelected = [];
+      this.list.forEach((row, index) => {
+        const selectedIndex = this.selectedOperateKeys.indexOf(
+          row[this.operateKey]
+        );
+        if (selectedIndex > -1) {
+          if (this.crudOptions.dataSyncSelected) {
+            merge(row, this.selected[selectedIndex]);
+          }
+          updatedSelected.push(row);
+          // 同步选中状态
+          this.$refs.tableRef.toggleRowSelection(row, true);
+        }
+      });
+
+      // 保留不在当前页的选中项
+      this.selected.forEach((item) => {
+        const inCurrentPage = this.list.some(
+          (row) => row[this.operateKey] === item[this.operateKey]
+        );
+        if (!inCurrentPage) {
+          updatedSelected.push(item);
+        }
+      });
+
+      // 更新选中数组
+      this.selected.splice(0, this.selected.length, ...updatedSelected);
+    },
+    selectionChange(arr) {
+      this.selectionRow = arr;
+    },
+    select(selection, row) {
+      if (!this.selected) return;
+      if (row[this.operateKey] === undefined) {
+        console.error(
+          `[CRUD Error] row.${this.operateKey}不存在，没有唯一值无法进行选中数据绑定，请设置正确的valueKey`
+        );
+        return;
+      }
+      if (selection.indexOf(row) > -1) {
+        this.addSelection(row);
+      } else {
+        this.removeSelection(row);
+      }
+    },
+    selectAll(selection) {
+      if (!this.selected) return;
+      const isAllSelected = this.$refs.tableRef.store.states.isAllSelected;
+      const currentPageKeys = new Set(
+        this.list.map((item) => item[this.operateKey])
+      );
+      if (isAllSelected) {
+        selection.forEach((row) => {
+          if (this.selected.indexOf(row) === -1) {
+            this.selected.push(row);
+          }
+        });
+      }
+      // 取消全选当前页
+      else {
+        // 只移除当前页的数据
+        for (let i = this.selected.length - 1; i >= 0; i--) {
+          if (currentPageKeys.has(this.selected[i][this.operateKey])) {
+            if (
+              this.selectionSelectable(
+                this.selected[i],
+                this.selected[i].$index
+              )
+            ) {
+              this.selected.splice(i, 1);
+            }
+          }
+        }
+      }
+    },
+    addSelection(row) {
+      if (!this.selected) return;
+      if (this.selection.spanProp) {
+        this.removeSelection(row);
+        this.list.forEach((item) => {
+          if (item[this.operateKey] === row[this.operateKey]) {
+            this.selected.push(item);
+            this.$refs.tableRef.toggleRowSelection(item, true);
+          }
+        });
+      } else {
+        if (this.selectedOperateKeys.indexOf(row[this.operateKey]) === -1) {
+          this.selected.push(row);
+          this.$refs.tableRef.toggleRowSelection(row, true);
+        }
+      }
+    },
+    removeSelection(row) {
+      if (!this.selectionSelectable(row, row.$index)) {
+        return;
+      }
+      if (!this.selected) return;
+      if (this.selection.spanProp) {
+        for (let i = this.selected.length - 1; i >= 0; i--) {
+          const item = this.selected[i];
+          if (item[this.operateKey] === row[this.operateKey]) {
+            this.selected.splice(i, 1);
+            this.$refs.tableRef.toggleRowSelection(item, false);
+          }
+        }
+      } else {
+        const index = this.selectedOperateKeys.indexOf(row[this.operateKey]);
+        if (index > -1) {
+          this.selected.splice(index, 1);
+          this.$refs.tableRef.toggleRowSelection(row, false);
+        }
+      }
+    },
+    removeSingleSelection() {
+      this.$emit("update:selected", null);
+      this.singleSelect = null;
+    },
+    clearSelection() {
+      this.$refs.tableRef.clearSelection();
+      this.selectionRow = [];
+      if (!this.selected) return;
+      // 获取禁用的选中数据
+      const disabledSelection = this.selected.filter((item) => {
+        if (!this.selectionSelectable(item, item.$index)) {
+          return true;
+        }
+      });
+      this.selected.splice(0, this.selected.length, ...disabledSelection);
+
+      // 恢复禁用的选中数据
+      if (disabledSelection.length) {
+        disabledSelection.forEach((item) => {
+          this.$refs.tableRef.toggleRowSelection(item, true);
+        });
+      }
+    },
+    selectionSelectable(row, index) {
+      if (isFunction(this.selection.selectable)) {
+        const selectable = this.selection.selectable(row, index);
+        if (!selectable) {
+          return false;
+        }
+      }
+      return true;
+    },
+  },
+};

package/packages/crud/mixins/spanMethod.js

@@ -0,0 +1,288 @@
+import { isFunction } from "lodash-es";
+
+export default {
+  computed: {
+    sameRowMap() {
+      const sameRowSpans = Array.from(new Set(this.sameRowSpans));
+      if (!sameRowSpans.length) return {};
+      const map = {};
+      sameRowSpans.forEach((field) => {
+        const groupMap = this.createGroupMap(this.list, field, sameRowSpans);
+        this.addSpanIndex(groupMap);
+        map[field] = groupMap;
+      });
+      return map;
+    },
+    sumColumnList() {
+      return this.trueRenderColumns.filter((item) => item.summary);
+    },
+    showSummary() {
+      return (
+        this.crudOptions.showSummary ||
+        this.crudOptions.showSummary === "" ||
+        this._showSummary ||
+        isFunction(this.crudOptions.summaryMethod)
+      );
+    },
+  },
+  methods: {
+    // 分组排序索引
+    addSpanIndex(groupMap) {
+      if (!groupMap) return;
+
+      // 收集所有分组
+      const allGroups = [];
+      Object.keys(groupMap).forEach((key) => {
+        groupMap[key].forEach((group) => {
+          allGroups.push(group);
+        });
+      });
+
+      // 按 firstIndex 排序
+      allGroups.sort((a, b) => a.firstIndex - b.firstIndex);
+
+      // 添加 spanIndex
+      allGroups.forEach((group, index) => {
+        group.spanIndex = index;
+      });
+    },
+    // 多级排序实现
+    _sortedData(data, props) {
+      const sortProps = [
+        ...(props || this.crudOptions.sortProps || this.sameRowSpans),
+      ];
+      if (!sortProps.length) return;
+
+      // 逐级排序
+      sortProps.forEach((currentProp, index) => {
+        // 获取当前级别之前的所有字段
+        const previousFields = sortProps
+          .slice(0, index)
+          .map((prop) => (typeof prop === "string" ? prop : prop.prop));
+
+        // 获取当前字段
+        const currentField =
+          typeof currentProp === "string" ? currentProp : currentProp.prop;
+
+        // 对数据进行分组排序
+        this.sortByFieldWithinGroups(
+          currentField,
+          previousFields,
+          currentProp,
+          data
+        );
+      });
+    },
+
+    // 在已有分组内进行排序
+    sortByFieldWithinGroups(currentField, previousFields, currentProp, data) {
+      if (!previousFields.length) {
+        // 第一个字段直接排序
+        this.sortByField(currentField, currentProp, data);
+        return;
+      }
+
+      // 根据之前的字段分组
+      const groups = this.groupByFields(data, previousFields);
+
+      // 记录每组的起始索引
+      let currentIndex = 0;
+
+      // 对每个分组内部进行排序并更新原数组
+      Object.values(groups).forEach((group) => {
+        // 对当前组按字段排序
+        group.sort((a, b) =>
+          this.compareValue(
+            a,
+            b,
+            currentField,
+            this.getSortOptions(currentField, currentProp)
+          )
+        );
+
+        // 将排序后的组数据写回原数组
+        group.forEach((item, i) => {
+          data[currentIndex + i] = item;
+        });
+
+        currentIndex += group.length;
+      });
+    },
+
+    // 根据多个字段进行分组
+    groupByFields(data, fields) {
+      return data.reduce((groups, item) => {
+        // 使用所有分组字段的值组合作为key
+        const groupKey = fields.map((field) => item[field]).join("_");
+        if (!groups[groupKey]) {
+          groups[groupKey] = [];
+        }
+        groups[groupKey].push(item);
+        return groups;
+      }, {});
+    },
+
+    // 单字段排序 - 直接修改原数组
+    sortByField(field, propConfig, data) {
+      const sortOptions = this.getSortOptions(field, propConfig);
+      data.sort((a, b) => this.compareValue(a, b, field, sortOptions));
+    },
+
+    // 获取字段的排序选项
+    getSortOptions(field, propConfig) {
+      // 如果传入了配置对象，从中获取排序选项
+      if (typeof propConfig === "object" && propConfig !== null) {
+        return {
+          order: propConfig.order || "asc",
+          nullsPosition: propConfig.nullsPosition || "last",
+          ...propConfig,
+        };
+      }
+    },
+    // 通用比较函数
+    compareValue(a, b, field, sortOptions = {}) {
+      // 检查是否有自定义排序
+      const sortMethod = sortOptions.sortMethod;
+      if (sortMethod) {
+        const result = sortMethod(a, b, sortOptions);
+        if (result !== undefined) return result;
+      }
+
+      const { order = "asc", nullsPosition = "last" } = sortOptions;
+      const aValue = a[field];
+      const bValue = b[field];
+
+      // 处理空值
+      const aIsEmpty = aValue === null || aValue === undefined || aValue === "";
+      const bIsEmpty = bValue === null || bValue === undefined || bValue === "";
+
+      if (aIsEmpty && bIsEmpty) return 0;
+      if (aIsEmpty) return nullsPosition === "first" ? -1 : 1;
+      if (bIsEmpty) return nullsPosition === "first" ? 1 : -1;
+
+      // 数字比较
+      if (!isNaN(aValue) && !isNaN(bValue)) {
+        return order === "asc"
+          ? Number(aValue) - Number(bValue)
+          : Number(bValue) - Number(aValue);
+      }
+
+      // 字符串比较
+      return order === "asc"
+        ? String(aValue).localeCompare(String(bValue))
+        : String(bValue).localeCompare(String(aValue));
+    },
+    spanMethod(params) {
+      const { row, column, rowIndex } = params;
+      const col = column.col;
+      const options = column.options;
+      if (!col && !options) return;
+
+      if (options?.spanMethod) {
+        const result = options.spanMethod(params);
+        if (result) return result;
+      }
+
+      if (col.spanMethod) {
+        return col.spanMethod(params);
+      }
+      const span = col.spanProp || col.sameRowSpan;
+      if (span) {
+        const field = typeof span === "string" ? span : col.prop;
+        const map = this.sameRowMap[field];
+
+        if (map) {
+          // 查找当前行所在的分组
+          const groupKey = row[field];
+          const groups = map[groupKey] || [];
+
+          // 查找包含当前行索引的分组
+          const group = groups.find(
+            (g) => rowIndex >= g.firstIndex && rowIndex < g.firstIndex + g.span
+          );
+
+          if (group) {
+            if (rowIndex === group.firstIndex) {
+              // 分组的第一行显示,并跨越整个分组
+              return {
+                rowspan: group.span,
+                colspan: 1,
+              };
+            } else {
+              // 其他行隐藏
+              return {
+                rowspan: 0,
+                colspan: 0,
+              };
+            }
+          }
+        }
+      }
+    },
+    // 创建分组映射
+    createGroupMap(data, currentField, allFields) {
+      const map = {};
+      let currentGroup = [];
+      let currentValues = {};
+
+      // 遍历数据,按照所有合并字段的值组合来分组
+      data.forEach((item, index) => {
+        const groupChanged = this.isGroupChanged(
+          item,
+          currentValues,
+          allFields,
+          currentField
+        );
+
+        if (groupChanged) {
+          // 如果组发生变化,处理前一组数据
+          if (currentGroup.length > 0) {
+            this.processGroup(map, currentGroup, currentValues[currentField]);
+          }
+          // 开始新的一组
+          currentGroup = [{ item, index }];
+          // 更新当前值
+          allFields.forEach((field) => {
+            currentValues[field] = item[field];
+          });
+        } else {
+          // 继续添加到当前组
+          currentGroup.push({ item, index });
+        }
+      });
+
+      // 处理最后一组
+      if (currentGroup.length > 0) {
+        this.processGroup(map, currentGroup, currentValues[currentField]);
+      }
+
+      return map;
+    },
+    // 判断是否需要开始新的分组
+    isGroupChanged(item, currentValues, allFields, currentField) {
+      if (Object.keys(currentValues).length === 0) return true;
+
+      // 检查当前字段之前的所有字段值是否相同
+      const fieldIndex = allFields.indexOf(currentField);
+      for (let i = 0; i <= fieldIndex; i++) {
+        const field = allFields[i];
+        if (item[field] !== currentValues[field]) {
+          return true;
+        }
+      }
+      return false;
+    },
+
+    // 处理分组数据
+    processGroup(map, group, key) {
+      if (!map[key]) {
+        map[key] = [];
+      }
+      map[key].push({
+        firstIndex: group[0].index,
+        span: group.length,
+        items: group.map((g) => g.item),
+      });
+    },
+  },
+};