vue-super-crud 1.7.1 → 1.7.4

package/packages/crud/selectBanner.vue

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

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

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

@@ -1,112 +0,0 @@
-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();
-}