vue-super-crud 1.7.1

package/packages/crud/mixins/contextMenu.js

@@ -0,0 +1,98 @@
+import { batchMerge } from "utils/mergeTemp";
+import { isFunction } from "lodash-es";
+import { checkVisibility } from "utils";
+export default {
+  computed: {
+    ctxMenu() {
+      return this.crudOptions.contextMenu;
+    },
+  },
+  created() {
+    this.buttonList = [];
+  },
+  methods: {
+    contextMenuTemps(scope, divided) {
+      return {
+        copy: {
+          label: "复制内容",
+          icon: "el-icon-document-copy",
+          onClick: () => {
+            let save = function (e) {
+              e.clipboardData.setData(
+                "text/plain",
+                scope.event.target.innerText
+              );
+              e.preventDefault(); //阻止默认行为
+            };
+            document.addEventListener("copy", save); //添加一个copy事件
+            document.execCommand("copy"); //执行copy方法
+            document.removeEventListener("copy", save); //移除copy事件
+            this.$message.success("复制成功");
+          },
+        },
+        mock: {
+          label: "生成测试数据",
+          icon: "el-icon-magic-stick",
+          onClick: () => {
+            this.$emit("mockData");
+          },
+        },
+        reset: {
+          label: "重置",
+          icon: "el-icon-refresh",
+          onClick: () => {
+            this.reset();
+          },
+          divided,
+        },
+      };
+    },
+    openContextMenu(row, column, event) {
+      if (checkVisibility(this.ctxMenu) === false) return;
+      const items = [];
+      const scope = {
+        row,
+        $index: row.$index,
+        column,
+        ctx: this,
+        event,
+      };
+      const actionBtns = this.getActionButton(scope);
+      if (this.ctxMenu) {
+        let merges = batchMerge(
+          "btn.crud.contextMenu",
+          this.ctxMenu,
+          scope,
+          this.contextMenuTemps(scope, actionBtns.length)
+        );
+        merges = this.checkHiddenButtons("contextMenu", merges);
+        items.push(...merges);
+      }
+      if (this.ctxMenu.actionBtn) {
+        items.push(...actionBtns);
+      }
+      if (items.length === 0) return;
+      event.preventDefault();
+      event.stopPropagation();
+      this.$contextmenu({
+        items,
+        event,
+        minWidth: 100,
+      });
+    },
+    getActionButton(scope) {
+      let custom = this.buttonList[scope.$index] || [];
+      return custom.map(({ hidden, ...item }) => {
+        Object.keys(item).forEach((key) => {
+          if (key === "onClick") {
+            const rawClick = item[key];
+            item[key] = () => rawClick(scope);
+          } else if (isFunction(item[key]) && key !== "onClick") {
+            item[key] = item[key](scope);
+          }
+        });
+        return item;
+      });
+    },
+  },
+};

package/packages/crud/mixins/dataProcessor.js

@@ -0,0 +1,202 @@
+import { isFunction, cloneDeep, uniqueId } from "lodash-es";
+
+export default {
+  data() {
+    return {
+      loadingStatus: false,
+      localFilteredData: undefined, // 存储过滤后的数据
+    };
+  },
+
+  computed: {
+    list() {
+      return this.filterData();
+    },
+  },
+  watch: {
+    data: {
+      handler(newVal, oldVal) {
+        // 是否完全更新数据
+        const isUpdated = newVal !== oldVal;
+        if (isUpdated) {
+          this.transformData(this.list);
+        }
+      },
+      immediate: true,
+    },
+    loading: {
+      handler(val) {
+        val !== undefined && (this.loadingStatus = val);
+      },
+      immediate: true,
+    },
+    loadingStatus(val) {
+      this.$emit("update:loading", val);
+    },
+  },
+
+  methods: {
+    // 过滤数据
+    filterData() {
+      let data = this.data;
+      if (this.localFilteredData !== undefined) {
+        data = this.localFilteredData;
+      }
+
+      if (this.crudOptions.localPagination) {
+        return this.getLocalPaginationData(data);
+      }
+      return data;
+    },
+    // 完全更新时数据转换
+    transformData(list) {
+      // 检查数据唯一性
+      this.validateUniqueValues(list);
+
+      // 处理行数据
+      this.processRowData(list);
+
+      // 恢复新增状态
+      this.restoreEditState(list);
+
+      // 处理树形数据
+      this.processTreeData(list);
+
+      // 处理动态列数据
+      this.processDynamicColumns(list);
+
+      // 数据排序
+      this.sortedData();
+
+      // 更新表格状态
+      this.updateTableState();
+    },
+    // 检查数据唯一性
+    validateUniqueValues(list) {
+      if (this._hasCheckedUnique) return;
+
+      const valueMap = new Map();
+      list.some((row) => {
+        const key = row[this.valueKey];
+        if (!key) {
+          console.error(
+            `[CRUD Error] 数据中存在缺失的 ${this.valueKey} 值`,
+            row
+          );
+          this._hasCheckedUnique = true;
+          return true;
+        }
+        if (valueMap.has(key)) {
+          console.error(
+            `[CRUD Error] 数据中存在重复的 ${this.valueKey} 值`,
+            row
+          );
+          this._hasCheckedUnique = true;
+          return true;
+        }
+        valueMap.set(key, true);
+        return false;
+      });
+    },
+
+    // 处理行数据
+    processRowData(list) {
+      const isGenUniqueId = this.crudOptions.uniqueId;
+
+      list.forEach((item) => {
+        // 生成唯一ID
+        if (isGenUniqueId && !item.$uniqueId) {
+          item.$uniqueId = uniqueId();
+        }
+        // 检查并添加缺失的列字段
+        this.trueRenderColumns.forEach((column) => {
+          if (column.prop && !(column.prop in item)) {
+            this.$set(item, column.form?.prop || column.prop, "");
+          }
+        });
+      });
+    },
+
+    // 恢复新增状态
+    restoreEditState(list) {
+      const addedRows = this.editState?.getAddedRows() || [];
+
+      if (addedRows.length > 0) {
+        addedRows.forEach((item) => {
+          const { addType, row } = item;
+          if (addType === "first") {
+            list.unshift(row);
+          } else if (addType === "last") {
+            list.push(row);
+          }
+        });
+      }
+
+      const editingRows = this.editState.editingRows || [];
+      list.forEach((row) => {
+        const key = row[this.valueKey];
+        const editInfo = editingRows.get(key);
+        if (editInfo) {
+          Object.defineProperty(row, "$edit", {
+            value: true,
+            enumerable: false,
+            configurable: true,
+          });
+        }
+      });
+    },
+
+    // 处理树形数据
+    processTreeData(list) {
+      if (!this.isTree || !this.crudOptions.autoLazy) return;
+
+      this.lazyTreeData = cloneDeep(list);
+      this.handleLocalLazy(list);
+
+      // 更新懒加载的节点
+      this.treeNodeMap.forEach((value, key) => {
+        const { tree, treeNode, resolve } = value;
+        this.lazyLoad(tree, treeNode, resolve);
+      });
+    },
+
+    // 处理动态列数据
+    processDynamicColumns(list) {
+      if (!this.crudOptions.flattenConfig && !this.crudOptions.dynamicConfig)
+        return;
+
+      this.transformToTree(
+        list,
+        this.crudOptions.flattenConfig || this.crudOptions.dynamicConfig
+      );
+    },
+
+    // 更新表格状态
+    updateTableState() {
+      this.$nextTick(() => {
+        this.$refs.tableRef.layout.updateElsHeight();
+        this.updateSelection();
+      });
+    },
+    // 获取本地分页数据
+    getLocalPaginationData(data) {
+      const { pageNum, pageSize } = this.crudOptions.props;
+      const start = (this.query[pageNum] - 1) * this.query[pageSize];
+      const end = start + this.query[pageSize];
+      return data.slice(start, end);
+    },
+
+    // 数据加载相关
+    changeLoading(bool = false) {
+      if (this.crudOptions.disableLoading) return;
+      this.loadingStatus = bool;
+    },
+    initQuery() {
+      this.query = Object.assign({}, this.query, this.searchParams);
+      this.getList();
+    },
+    getList() {
+      this.$emit("getList");
+    },
+  },
+};

package/packages/crud/mixins/dialog.js

@@ -0,0 +1,109 @@
+import { cloneDeep } from "lodash-es";
+import formComp from "../form";
+import dialog from "pak/dialog";
+export default {
+  data() {
+    this.title = {
+      add: "新增",
+      edit: "编辑",
+      view: "查看",
+    };
+    return {
+      dialogLoading: false, //弹窗与内部表单loading
+    };
+  },
+  computed: {
+    dialogOptions() {
+      return this.crudOptions.dialog;
+    },
+  },
+  watch: {
+    dialogLoading(val) {
+      this.$refs.dialogVm && (this.$refs.dialogVm.loading = val);
+    },
+  },
+  methods: {
+    changeDialogLoading(bool = false) {
+      this.dialogLoading = bool;
+    },
+    handleAdd(addType) {
+      this.runBefore(
+        ["add"],
+        (data = {}) => {
+          this.form = data;
+          this.openDialogForm("add", {}, addType);
+        },
+        { mode: "add" }
+      );
+    },
+    handleView(scope) {
+      const callBack = (data) => {
+        this.openDialogForm("view", scope);
+        this.getDetail(scope, data);
+      };
+      this.runBefore(["view"], callBack, { ...scope, mode: "view" });
+    },
+    getDetail(scope, data) {
+      this.changeDialogLoading(true);
+      const callBack = (dataNew) => {
+        this.form = data || dataNew || cloneDeep(scope.row);
+
+        this.changeDialogLoading();
+      };
+      this.runBefore("getDetail", callBack, scope, this.changeDialogLoading);
+    },
+    handleEdit(scope) {
+      const callBack = (data) => {
+        this.openDialogForm("edit", scope);
+        this.getDetail(scope, data);
+      };
+      this.runBefore(["edit"], callBack, { ...scope, mode: "view" });
+    },
+    handleSave(scope, done, addType) {
+      this.$refs.crudForm.validate().then(() => {
+        this.changeDialogLoading(true);
+        const callBack = (row) => {
+          if (scope.mode === "add") {
+            if (addType === "first") {
+              this.list.unshift(row || this.form);
+            } else {
+              this.list.push(row || this.form);
+            }
+          } else {
+            this.$set(this.list, scope.$index, row || this.form);
+          }
+
+          done();
+          this.changeDialogLoading();
+          this.getList();
+        };
+        this.runBefore(["save"], callBack, scope, this.changeDialogLoading);
+      });
+    },
+
+    openDialogForm(mode, scope = {}, addType) {
+      scope = { ...scope, row: this.form, mode };
+      this.$refs.dialogVm = dialog({
+        title: this.title[mode],
+        render: () => (
+          <formComp
+            loading={this.dialogLoading}
+            ctx={this}
+            mode={mode}
+            scope={scope}
+          />
+        ),
+        confirm: (done) => {
+          const params = {
+            ...scope,
+            formRef: this.$refs.crudForm,
+          };
+          this.handleSave(params, done, addType);
+        },
+        footer: mode === "view" ? false : true,
+        ...this.dialogOptions,
+      });
+      this.$refs.dialogVm.show();
+    },
+  },
+};

package/packages/crud/mixins/excelHandler.js

@@ -0,0 +1,150 @@
+// ... 现有代码 ...
+import {
+  parseExcel,
+  getHeaderColumnMap,
+  convertExcelDataToTableData,
+  createFileInput,
+} from "../utils/excelImport";
+import { exportToExcel, formatExportData } from "../utils/excelExport";
+
+export default {
+  methods: {
+    /**
+     * 处理Excel导入
+     * @param {File} file Excel文件
+     */
+    handleExcelImport(file) {
+      if (!file) return;
+      this.changeLoading(true);
+
+      // 读取Excel文件
+      parseExcel(file)
+        .then((data) => {
+          if (!data || !data.length) {
+            this.$message.warning("导入的Excel文件不包含有效数据");
+            this.changeLoading(false);
+            return;
+          }
+
+          // 获取表头映射关系
+          const headerMap = getHeaderColumnMap(this.trueRenderColumns);
+
+          // 转换Excel数据为表格数据
+          const importedRows = convertExcelDataToTableData(
+            data,
+            headerMap,
+            this.valueKey,
+            this.trueRenderColumns
+          );
+
+          // 处理导入数据
+          this.processImportedData(importedRows);
+
+          this.changeLoading(false);
+        })
+        .catch((error) => {
+          console.error("Excel导入失败:", error);
+          this.$message.error(
+            "Excel导入失败: " + (error.message || "未知错误")
+          );
+          this.changeLoading(false);
+        });
+    },
+
+    /**
+     * 根据编辑模式处理导入的数据
+     * @param {Array} importedRows 导入的行数据
+     */
+    processImportedData(importedRows) {
+      if (!importedRows || !importedRows.length) return;
+
+      this.runBefore(
+        ["importExcel"],
+        (data) => {
+          const rows = data || importedRows;
+
+          if (this.editConfig.mode === "row") {
+            // 行编辑模式：添加所有行并设置为编辑状态
+            rows.forEach((row) => {
+              this.list.push(row);
+              this.editState.setRowEditStatus(row, true, "add");
+            });
+            this.$message.success(`成功导入 ${rows.length} 条数据`);
+          } else if (this.editConfig.mode === "cell") {
+            // 单元格编辑模式：仅添加行
+            rows.forEach((row) => {
+              this.list.push(row);
+            });
+            this.$message.success(`成功导入 ${rows.length} 条数据`);
+          } else if (this.editConfig.mode === "free") {
+            // 自由编辑模式：直接添加行
+            rows.forEach((row) => {
+              this.list.push(row);
+            });
+            this.$message.success(`成功导入 ${rows.length} 条数据`);
+          } else if (this.editConfig.mode === "dialog") {
+            // 弹窗编辑模式：不直接添加，提示用户使用新增按钮
+            this.$message.info("弹窗编辑模式下，请使用新增按钮添加数据");
+          }
+
+          setTimeout(() => {
+            this.$refs.tableFormRef && this.$refs.tableFormRef.clearValidate();
+          }, 0);
+        },
+        { rows: importedRows }
+      );
+    },
+
+    /**
+     * 显示Excel导入对话框
+     */
+    showExcelImportDialog() {
+      createFileInput(this.handleExcelImport.bind(this));
+    },
+
+    /**
+     * 导出表格数据到Excel
+     * @param {Object} options 导出选项
+     */
+    exportToExcel(options = {}) {
+      const defaultOptions = {
+        filename: this.crudOptions.title || "表格数据",
+        sheetName: "Sheet1",
+        includeHidden: false,
+        onlySelected: false,
+        selectedData: this.selectionRow,
+        formatter: null,
+      };
+
+      const exportOptions = { ...defaultOptions, ...options };
+
+      // 运行前置钩子
+      this.runBefore(
+        ["exportExcel"],
+        (data) => {
+          const exportData = data || this.list;
+
+          // 导出Excel
+          exportToExcel(exportData, this.trueRenderColumns, exportOptions);
+
+          // 触发导出成功事件
+          this.$emit("exportSuccess", exportData);
+        },
+        { data: this.list, options: exportOptions }
+      );
+    },
+
+    /**
+     * 获取格式化后的导出数据
+     * @param {Boolean} onlySelected 是否只导出选中数据
+     * @returns {Array} 格式化后的数据
+     */
+    getExportData(onlySelected = false) {
+      const data =
+        onlySelected && this.selectionRow.length
+          ? this.selectionRow
+          : this.list;
+      return formatExportData(data, this.trueRenderColumns);
+    },
+  },
+};

package/packages/crud/mixins/exposeMethods.js

@@ -0,0 +1,107 @@
+// TODO: 暴露外部方法
+export default {
+  methods: {
+    resetBatchEdit() {
+      this.$refs.menuBar && this.$refs.menuBar.resetBatchEdit();
+    },
+    /**
+     * 重置表单
+     * @param {String} prop 列属性
+     */
+    resetField(prop) {
+      // 通知子组件执行重置
+      this.$emit("handleChild", "resetField", prop);
+    },
+    // 重置表单
+    reset() {
+      this.$refs.tableFormRef && this.$refs.tableFormRef.resetFields();
+      this.$emit("reset");
+    },
+    /**
+     * 手动排序
+     * @param {Array} data 数据
+     * @param {Array} props 排序字段
+     */
+    sortedData(data, props) {
+      this._sortedData(data || this.list, props);
+    },
+    /**
+     * 新增表格行
+     * @param {Object} params 行数据参数
+     * @param {String} type 新增位置类型: 'first' | 'last'
+     */
+    addRow(params = {}, type = "last") {
+      this.handleRowAdd(params, type);
+    },
+    /**
+     * 设置行编辑状态
+     * @param {Object|Array} rows 行数据或行数据数组
+     * @param {Object} options 配置选项
+     * @param {String} options.type 操作类型: 'edit' | 'cancel' | 'save'
+     * @param {String} options.prop 列属性(可选,用于聚焦)
+     * @returns {void}
+     */
+    setRowEdit(rows, options = {}) {
+      const { type = "edit", prop } = options;
+      const rowArray = Array.isArray(rows) ? rows : [rows];
+
+      rowArray.forEach((row) => {
+        const scope = { row, $index: row.$index };
+        switch (type) {
+          case "edit":
+            this.handleRowEdit(scope, prop);
+            break;
+          case "cancel":
+            this.handleRowCancel(scope);
+            break;
+          case "save":
+            this.handleRowSave(scope);
+            break;
+        }
+      });
+    },
+
+    /**
+     * 批量设置行编辑状态
+     * @param {String} type 操作类型: 'edit'  | 'save' | 'cancel'
+     * @param {Array} rows 行数据数组
+     */
+    setBatchEdit(type = "edit", rows) {
+      if (type === "edit") {
+        this.handleBatchRowEdit(rows);
+      } else if (type === "save") {
+        this.handleBatchRowSave(undefined, rows);
+      } else if (type === "cancel") {
+        this.handleBatchRowCancel(rows);
+      }
+    },
+    /**
+     * 设置单元格编辑状态
+     * @param {Object|Array} rows 行数据或行数据数组
+     * @param {String} prop 列属性
+     */
+    setCellEdit(row, prop) {
+      if (!prop) return;
+      const column = this.columnsMap[prop];
+      if (!column) return;
+      const scope = { row, $index: row.$index };
+      this.handleCellEdit(scope, column);
+    },
+
+    // 获取当前所有处于编辑状态的行
+    getEditingRows() {
+      return this.editState?.getEditingRows().map((item) => item.row) || [];
+    },
+
+    // 清除所有编辑状态
+    clearAllEdit() {
+      this.editState?.clearAllEditStatus();
+      this.resetBatchEdit();
+      this.forceUpdate();
+    },
+    // 强制更新表格
+    forceUpdate() {
+      this._forceUpdate();
+    },
+  },
+};