vue-super-crud 1.7.1

package/packages/crud/selectBanner.vue

@@ -0,0 +1,138 @@
+<template>
+  <div v-show="showBanner" :class="b()">
+    <div :class="b('banner-content')" v-if="ctx.showSelection">
+      <span>已选择 {{ selected.length }} 项</span>
+      <template v-if="selected.length <= selection.maxDisplay">
+        <span :class="b('selected-items')">
+          <el-tag
+            v-for="row in selected"
+            :key="row[ctx.operateKey]"
+            :class="b('remove-tag')"
+            size="small"
+            closable
+            disable-transitions
+            @close="ctx.removeSelection(row)"
+            >{{ row[labelKey] }}</el-tag
+          >
+        </span>
+      </template>
+      <template v-else>
+        <el-popover
+          placement="bottom"
+          trigger="hover"
+          :popper-class="b('popover')"
+        >
+          <template #reference>
+            <span :class="b('popover-selected-preview')">
+              <el-tag
+                v-for="row in selected.slice(0, selection.maxDisplay)"
+                :key="row[ctx.operateKey]"
+                :class="b('remove-tag')"
+                size="small"
+                closable
+                disable-transitions
+                @close="ctx.removeSelection(row)"
+                >{{ row[labelKey] }}</el-tag
+              >
+              等 {{ selected.length }} 项
+            </span>
+          </template>
+          <div :class="b('popover-list')">
+            <div
+              v-for="row in selected.slice(selection.maxDisplay)"
+              :key="row[ctx.operateKey]"
+              :class="b('popover-item')"
+            >
+              <span>{{ row[labelKey] }}</span>
+              <el-tag
+                :class="b('popover-remove-tag')"
+                size="small"
+                closable
+                disable-transitions
+                @close="ctx.removeSelection(row)"
+              />
+            </div>
+          </div>
+        </el-popover>
+      </template>
+      <div :class="b('banner-actions')">
+        <el-button
+          v-if="showClearAction"
+          type="text"
+          @click="ctx.clearSelection"
+        >
+          清空选择
+        </el-button>
+      </div>
+    </div>
+    <div :class="b('banner-content')" v-else-if="selected">
+      <span>已选择</span>
+      <span :class="b('selected-items')">
+        <el-tag
+          :class="b('remove-tag')"
+          size="small"
+          closable
+          disable-transitions
+          @close="ctx.removeSingleSelection"
+          >{{ selected[labelKey] }}</el-tag
+        >
+      </span>
+      <div :class="b('banner-actions')">
+        <el-button
+          v-if="showClearAction"
+          type="text"
+          @click="ctx.removeSingleSelection"
+        >
+          清空选择
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import create from "core/create";
+import { uniqBy } from "lodash-es";
+export default create({
+  name: "crud-select-banner",
+  inject: ["ctx"],
+  computed: {
+    selected() {
+      if (this.ctx.showSelection) {
+        return uniqBy(this.ctx.selected, this.ctx.operateKey);
+      }
+
+      if (this.ctx.showSingleSelection) {
+        return this.ctx.selected;
+      }
+    },
+    selection() {
+      return this.ctx.selection;
+    },
+    labelKey() {
+      return (
+        this.selection.labelKey || this.ctx.operateKey || this.ctx.valueKey
+      );
+    },
+    showClearAction() {
+      if (this.ctx.showSelection) {
+        return this.selection.clear;
+      }
+
+      if (this.ctx.showSingleSelection) {
+        return this.ctx.singleSelection.clear;
+      }
+    },
+    showBanner() {
+      if (this.ctx.showSelection) {
+        return this.selected.length > 0;
+      }
+
+      if (this.ctx.showSingleSelection) {
+        return this.selected;
+      }
+      return false;
+    },
+  },
+  methods: {},
+});
+</script>

package/packages/crud/utils/EditState.js

@@ -0,0 +1,319 @@
+import { cloneDeep, uniqueId } from "lodash-es";
+import Vue from "vue";
+/**
+ * 表格编辑状态管理
+ */
+class EditState {
+  constructor(options = {}) {
+    this.valueKey = options.valueKey || "id";
+    this.editingRows = new Map(); // 存储正在编辑的行
+    this.currentEditCell = null; // 当前正在编辑的单元格列属性
+    this.columns = options.columns || []; // 表格列配置
+    this.mode = options.mode;
+    this.trigger = options.trigger;
+    this.isRowEdit = options.isRowEdit;
+    this.exclusive = options.exclusive || false;
+    this._internalIdCounter = 1; // 添加计数器用于生成唯一ID
+    this.eventBus = new Vue();
+  }
+
+  on(event, callback) {
+    this.eventBus.$on(event, callback);
+  }
+
+  off(event, callback) {
+    this.eventBus.$off(event, callback);
+  }
+  /**
+   * 验证单元格是否可编辑
+   * @param {Object} column 列配置
+   * @param {Object} scope 行作用域
+   * @returns {String|Boolean} 编辑模式或false
+   */
+  validateEdit(column, scope, canEdit) {
+    if (!scope || !column) return false;
+
+    const { row, $index } = scope;
+    if (!row) return false;
+
+    // 获取行的编辑信息
+    const rowEditInfo = this.getRowEditInfo(row);
+    const editMode = rowEditInfo.type || "edit";
+
+    // 检查列是否禁用了该编辑模式
+    if (column[editMode] === false) return false;
+
+    // 根据编辑模式判断
+    if (this.mode === "cell") {
+      return this.isCellEditing(row, column.prop) ? editMode : false;
+    }
+
+    if (this.mode === "row") {
+      return rowEditInfo.isEditing ? editMode : false;
+    }
+
+    // 自由编辑模式或列允许编辑
+    if (this.mode === "free" || canEdit) {
+      return editMode;
+    }
+
+    return false;
+  }
+  getRowKey(row) {
+    const valueKey = row[this.valueKey];
+    if (valueKey) return valueKey;
+    if (row._internalId) return row._internalId;
+    const internalId = `internalId_${this._internalIdCounter++}`;
+    Object.defineProperty(row, "_internalId", {
+      value: internalId,
+      enumerable: false, // 使该属性不可枚举，不会影响JSON序列化
+      configurable: true, // 允许后续删除该属性
+    });
+    return internalId;
+  }
+
+  /**
+   * 设置行的编辑状态
+   * @param {Object} row 行数据
+   * @param {Boolean} isEditing 是否处于编辑状态
+   * @param {String} type 编辑类型，'edit'或'add'
+   * @param {String} addType 新增类型，'first'或'last'
+   * @returns {Object} 更新后的行数据
+   */
+  setRowEditStatus(row, isEditing, type = "edit", { addType, prop } = {}) {
+    const rowKey = this.getRowKey(row);
+    const editInfo = this.getRowEditInfo(row);
+    if (this.isRowEdit) {
+      const disabled = this.isRowEdit({ row, $index: row.$index }) === false;
+      if (disabled) return;
+    }
+    if (isEditing) {
+      if (editInfo.isEditing && editInfo.type === type) return;
+
+      // 处理互斥编辑
+      if (this.exclusive && this.mode === "row" && type === "edit") {
+        this.clearOtherEditingRows(rowKey);
+      }
+
+      this.editingRows.set(rowKey, {
+        type,
+        data: cloneDeep(row),
+        row,
+        addType,
+      });
+
+      // 添加编辑状态标记
+      const propName = type === "add" ? "$add" : "$edit";
+      if (!row[propName]) {
+        Object.defineProperty(row, propName, {
+          value: true,
+          enumerable: false,
+          configurable: true,
+        });
+      }
+    } else {
+      this.editingRows.delete(rowKey);
+
+      // 移除编辑状态标记
+      if (row.$edit) {
+        delete row.$edit;
+      }
+      if (row.$add) {
+        delete row.$add;
+      }
+    }
+
+    this.notifyEditStatusChange({
+      mode: "row",
+      rowKey: rowKey,
+      row,
+      prop,
+      type,
+    });
+    this.isSetting();
+  }
+
+  clearOtherEditingRows(excludeRowKey) {
+    for (const [rowKey, editInfo] of this.editingRows.entries()) {
+      // 跳过新增的行和指定要排除的行
+      if (editInfo.type === "add" || rowKey === excludeRowKey) continue;
+      this.editingRows.delete(rowKey);
+      if (editInfo.row.$edit) {
+        delete editInfo.row.$edit;
+      }
+      if (editInfo.row.$add) {
+        delete editInfo.row.$add;
+      }
+    }
+  }
+
+  // 批量编辑
+  batchSetEditStatus(rows, isEditing, type = "edit") {
+    if (!Array.isArray(rows)) return;
+
+    rows.forEach((row) => {
+      this.setRowEditStatus(row, isEditing, type);
+    });
+
+    this.eventBus.$emit("batch-edit-status-change", {
+      rows: rows.map((row) => this.getRowKey(row)),
+      isEditing,
+      type,
+    });
+  }
+
+  /**
+   * 设置单元格的编辑状态
+   * @param {Object} row 行数据
+   * @param {String} prop 列属性名
+   * @returns {Object} 更新后的行数据
+   */
+  setCellEditStatus(row, prop) {
+    const rowKey = this.getRowKey(row);
+
+    if (this.isCellEditing(row, prop)) return;
+
+    if (this.isRowEdit) {
+      const disabled = this.isRowEdit({ row, $index: row.$index }) === false;
+      if (disabled) return;
+    }
+
+    // 设置当前编辑的单元格
+    this.currentEditCell = {
+      rowKey,
+      prop,
+      row,
+    };
+
+    // 通知状态更新
+    this.notifyEditStatusChange({
+      mode: "cell",
+      rowKey,
+      row,
+      prop,
+      type: "edit",
+    });
+    this.isSetting();
+  }
+
+  isSetting() {
+    this._isSetting = true;
+    setTimeout(() => {
+      this._isSetting = false;
+    }, 50);
+  }
+  /**
+   * 检查行是否处于编辑状态
+   * @param {Object} row 行数据
+   * @returns {Boolean} 是否处于编辑状态
+   */
+  isRowEditing(row) {
+    const rowKey = this.getRowKey(row);
+    return rowKey && this.editingRows.has(rowKey);
+  }
+
+  /**
+   * 获取行的编辑信息
+   * @param {Object} row 行数据
+   * @returns {Object|null} 行的编辑信息，包含 type 和原始数据
+   */
+  getRowEditInfo(row) {
+    const rowKey = this.getRowKey(row);
+    const nullObj = { isEditing: false, data: null, type: null };
+    const rowEditInfo = this.editingRows.get(rowKey);
+    if (!rowEditInfo) return nullObj;
+    return {
+      isEditing: true,
+      data: rowEditInfo.data, // 原始数据
+      row: rowEditInfo.row, // 当前行数据
+      type: rowEditInfo.type, // 编辑类型
+    };
+  }
+
+  getEditingCell() {
+    return this.currentEditCell;
+  }
+
+  /**
+   * 检查单元格是否处于编辑状态
+   * @param {Object} row 行数据
+   * @param {String} prop 列属性名
+   * @returns {Boolean} 是否处于编辑状态
+   */
+  isCellEditing(row, prop) {
+    const rowKey = this.getRowKey(row);
+    return (
+      rowKey &&
+      this.currentEditCell &&
+      this.currentEditCell.rowKey === rowKey &&
+      this.currentEditCell.prop === prop
+    );
+  }
+
+  /**
+   * 检查是否有任何行处于编辑状态
+   * @returns {Boolean} 是否有行处于编辑状态
+   */
+  hasEditingRows() {
+    return this.editingRows.size > 0;
+  }
+
+  /**
+   * 获取所有处于编辑状态的行的键
+   * @returns {Array} 处于编辑状态的行的键数组
+   */
+  getEditingRowKeys() {
+    return Array.from(this.editingRows.keys());
+  }
+
+  /**
+   * 清除所有编辑状态
+   */
+  clearAllEditStatus() {
+    if (this._isSetting) return;
+
+    // 移除所有行的编辑状态标记
+    this.editingRows.forEach((editInfo) => {
+      const row = editInfo.row;
+      if (row.$edit) {
+        delete row.$edit;
+      }
+      if (row.$add) {
+        delete row.$add;
+      }
+    });
+
+    this.editingRows.clear();
+    this.currentEditCell = null;
+    this._internalIdCounter = 1;
+  }
+
+  // 触发编辑状态更新事件
+  notifyEditStatusChange({ mode, rowKey, row, prop, type }) {
+    this.eventBus.$emit("edit-status-change", {
+      mode,
+      rowKey,
+      row,
+      prop,
+      type,
+      ...this.getRowEditInfo(row),
+    });
+  }
+
+  // 获取所有新增类型的行数据
+  getAddedRows() {
+    const addedRows = [];
+    this.editingRows.forEach((editInfo, rowKey) => {
+      if (editInfo.type === "add") {
+        addedRows.push(editInfo);
+      }
+    });
+    return addedRows;
+  }
+  // 获取所有处于编辑状态的行数据
+  getEditingRows() {
+    return Array.from(this.editingRows.values());
+  }
+}
+
+export default EditState;

package/packages/crud/utils/excelExport.js

@@ -0,0 +1,112 @@
+import * as XLSX from "xlsx";
+
+/**
+ * 将数据导出为Excel文件
+ * @param {Array} data 要导出的数据
+ * @param {Array} columns 表格列配置
+ * @param {Object} options 导出选项
+ * @returns {void}
+ */
+export function exportToExcel(data, columns, options = {}) {
+  if (!data || !data.length || !columns || !columns.length) {
+    console.warn("导出数据或列配置为空");
+    return;
+  }
+
+  const {
+    filename = "表格数据",
+    sheetName = "Sheet1",
+    includeHidden = false,
+    onlySelected = false,
+    selectedData = [],
+    formatter = null,
+  } = options;
+
+  // 过滤要导出的列
+  const exportColumns = columns.filter((col) => {
+    // 排除不需要导出的列
+    if (col.type || col.export === false) return false;
+    // 排除隐藏列（如果不包含隐藏列）
+    if (!includeHidden && col.hide) return false;
+    return col.prop && col.label;
+  });
+
+  // 确定要导出的数据
+  const exportData = onlySelected && selectedData.length ? selectedData : data;
+
+  // 准备表头行
+  const headers = exportColumns.map((col) => col.label);
+
+  // 准备数据行
+  const rows = exportData.map((row) => {
+    return exportColumns.map((col) => {
+      let value = row[col.prop];
+
+      // 使用格式化函数处理值
+      if (formatter && typeof formatter === "function") {
+        value = formatter(value, col, row);
+      } else if (col.formatter && typeof col.formatter === "function") {
+        value = col.formatter(row, row, value, null);
+      }
+
+      return value !== undefined && value !== null ? value : "";
+    });
+  });
+
+  // 创建工作表数据
+  const worksheet = XLSX.utils.aoa_to_sheet([headers, ...rows]);
+
+  // 设置列宽
+  const colWidths = exportColumns.map((col) => ({
+    wch: Math.max(
+      (col.label || "").toString().length * 2,
+      col.width ? parseInt(col.width) / 8 : 10
+    ),
+  }));
+  worksheet["!cols"] = colWidths;
+
+  // 创建工作簿
+  const workbook = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
+
+  // 导出文件
+  XLSX.writeFile(workbook, `${filename}.xlsx`);
+}
+
+/**
+ * 获取可导出的列
+ * @param {Array} columns 表格列配置
+ * @param {Boolean} includeHidden 是否包含隐藏列
+ * @returns {Array} 可导出的列
+ */
+export function getExportableColumns(columns, includeHidden = false) {
+  return columns.filter((col) => {
+    if (col.type || col.export === false) return false;
+    if (!includeHidden && col.hide) return false;
+    return col.prop && col.label;
+  });
+}
+
+/**
+ * 格式化导出数据
+ * @param {Array} data 原始数据
+ * @param {Array} columns 列配置
+ * @returns {Array} 格式化后的数据
+ */
+export function formatExportData(data, columns) {
+  if (!data || !data.length) return [];
+
+  const exportColumns = getExportableColumns(columns);
+
+  return data.map((row) => {
+    const exportRow = {};
+    exportColumns.forEach((col) => {
+      let value = row[col.prop];
+      if (col.formatter && typeof col.formatter === "function") {
+        value = col.formatter(row, row, value, null);
+      }
+      exportRow[col.label] = value !== undefined && value !== null ? value : "";
+    });
+    return exportRow;
+  });
+}

package/packages/crud/utils/excelImport.js

@@ -0,0 +1,112 @@
+import * as XLSX from "xlsx";
+import { uniqueId } from "lodash-es";
+
+/**
+ * 解析Excel文件
+ * @param {File} file Excel文件
+ * @returns {Promise<Array>} 解析后的数据
+ */
+export function parseExcel(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      try {
+        const data = e.target.result;
+        const workbook = XLSX.read(data, { type: "array" });
+        const firstSheetName = workbook.SheetNames[0];
+        const worksheet = workbook.Sheets[firstSheetName];
+        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
+
+        if (jsonData.length < 2) {
+          // 至少需要表头和一行数据
+          reject(new Error("Excel文件格式不正确或没有数据"));
+          return;
+        }
+
+        resolve(jsonData);
+      } catch (error) {
+        reject(error);
+      }
+    };
+    reader.onerror = (error) => reject(error);
+    reader.readAsArrayBuffer(file);
+  });
+}
+
+/**
+ * 获取表头与列的映射关系
+ * @param {Array} columns 表格列配置
+ * @returns {Object} 表头与列属性的映射
+ */
+export function getHeaderColumnMap(columns) {
+  const headerMap = {};
+  columns.forEach((column) => {
+    if (column.label && column.prop) {
+      headerMap[column.label] = column.prop;
+    }
+  });
+  return headerMap;
+}
+
+/**
+ * 将Excel数据转换为表格数据
+ * @param {Array} excelData Excel解析后的数据
+ * @param {Object} headerMap 表头映射
+ * @param {String} valueKey 行唯一标识字段
+ * @param {Array} columns 表格列配置
+ * @returns {Array} 转换后的表格数据
+ */
+export function convertExcelDataToTableData(
+  excelData,
+  headerMap,
+  valueKey,
+  columns
+) {
+  const headers = excelData[0]; // 第一行是表头
+  const rows = excelData.slice(1); // 剩余行是数据
+
+  return rows.map((row) => {
+    const rowData = {
+      [valueKey]: "temp_" + uniqueId(),
+    };
+
+    // 根据表头映射设置属性值
+    headers.forEach((header, index) => {
+      const prop = headerMap[header];
+      if (prop) {
+        rowData[prop] = row[index] !== undefined ? row[index] : "";
+      }
+    });
+
+    // 设置未匹配到的列为默认值
+    columns.forEach((column) => {
+      if (rowData[column.prop] === undefined && column.prop) {
+        rowData[column.prop] = column.initValue ?? "";
+      }
+    });
+
+    return rowData;
+  });
+}
+
+/**
+ * 创建文件选择器并处理文件选择
+ * @param {Function} callback 文件选择后的回调
+ */
+export function createFileInput(callback) {
+  const input = document.createElement("input");
+  input.type = "file";
+  input.accept = ".xlsx,.xls";
+  input.style.display = "none";
+
+  input.onchange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      callback(file);
+    }
+    document.body.removeChild(input);
+  };
+
+  document.body.appendChild(input);
+  input.click();
+}