leisure-core 0.6.66 → 0.6.67

package/index.js

@@ -46,6 +46,7 @@ import LeInputAdvanced from "./le-input-advanced/index.js";
 // import LeButtonAudit from "./le-button-audit/index.js";
 import LeInputValidate from "./le-input-validate/index.js";
 import LeDatePickerAuto from "./le-date-picker-auto/index.js";
+import LeTableEdit from "./le-table-edit/index.js";
 
 const components = [
   LeArea,
@@ -90,6 +91,7 @@ const components = [
   // LeButtonAudit,
   LeInputValidate,
   LeDatePickerAuto,
+  LeTableEdit,
 ];
 
 const install = function (Vue) {
@@ -203,4 +205,5 @@ export default {
   leMixins,
   LeInputValidate,
   LeDatePickerAuto,
+  LeTableEdit,
 };

package/le-table-edit/index.js

@@ -0,0 +1,6 @@
+import LeTableEdit from "./src/main.vue";
+
+LeTableEdit.install = function (Vue) {
+  Vue.component(LeTableEdit.name, LeTableEdit);
+};
+export default LeTableEdit;

package/le-table-edit/src/main.vue

@@ -0,0 +1,689 @@
+<template>
+  <div class="editable-table">
+    <el-table
+      :data="internalTableData"
+      :border="border"
+      :stripe="stripe"
+      :size="size"
+      @cell-click="handleCellClick"
+      @cell-dblclick="handleCellDblClick"
+      style="width: 100%"
+      ref="tableRef"
+    >
+      <!-- 序号列 -->
+      <el-table-column
+        v-if="showIndex"
+        type="index"
+        :width="indexWidth"
+        :label="indexLabel"
+        align="center"
+      ></el-table-column>
+
+      <!-- 多选列 -->
+      <el-table-column
+        v-if="showSelection"
+        type="selection"
+        :width="selectionWidth"
+        align="center"
+      ></el-table-column>
+
+      <!-- 数据列 -->
+      <el-table-column
+        v-for="column in columns"
+        :key="column.prop"
+        :prop="column.prop"
+        :label="column.label"
+        :width="column.width"
+        :align="column.align || 'center'"
+        :min-width="column.minWidth"
+        :fixed="column.fixed"
+      >
+        <template slot-scope="scope">
+          <!-- 编辑状态 -->
+          <template v-if="isEditing(scope.$index, column.prop)">
+            <!-- 文本输入框 -->
+            <el-input
+              v-if="column.editType === 'input' || !column.editType"
+              v-model="scope.row[column.prop]"
+              :size="size"
+              @blur="handleInputBlur(scope.$index, column.prop)"
+              @keyup.enter.native="handleInputBlur(scope.$index, column.prop)"
+              ref="inputRef"
+            ></el-input>
+
+            <!-- 数字输入框 -->
+            <el-input-number
+              v-else-if="column.editType === 'number'"
+              v-model="scope.row[column.prop]"
+              :size="size"
+              :min="column.min || 0"
+              :max="column.max"
+              :step="column.step || 1"
+              @blur="handleInputBlur(scope.$index, column.prop)"
+              controls-position="right"
+            ></el-input-number>
+
+            <!-- 下拉选择器 -->
+            <el-select
+              v-else-if="column.editType === 'select'"
+              v-model="scope.row[column.prop]"
+              :size="size"
+              @change="handleInputBlur(scope.$index, column.prop)"
+              :placeholder="column.placeholder || '请选择'"
+            >
+              <el-option
+                v-for="item in column.options"
+                :key="item[column.valueKey]"
+                :label="item[column.labelKey]"
+                :value="item[column.valueKey]"
+              ></el-option>
+            </el-select>
+
+            <!-- 日期选择器 -->
+            <le-date-picker-auto
+              v-else-if="column.editType === 'date'"
+              v-model="scope.row[column.prop]"
+              :size="size"
+              :type="column.dateType || 'date'"
+              :format="'yyyy-MM-dd'"
+              :value-format="column.valueFormat || 'timestamp'"
+              @blur="handleInputBlur(scope.$index, column.prop)"
+              placeholder="选择日期"
+            ></le-date-picker-auto>
+
+            <!-- 开关 -->
+            <el-switch
+              v-else-if="column.editType === 'switch'"
+              v-model="scope.row[column.prop]"
+              @change="handleInputBlur(scope.$index, column.prop)"
+              :active-text="column.activeText"
+              :inactive-text="column.inactiveText"
+            ></el-switch>
+          </template>
+
+          <!-- 非编辑状态 -->
+          <template v-else>
+            <!-- 自定义渲染 -->
+            <template v-if="column.render">
+              <div v-html="column.render(scope.row, scope.$index)"></div>
+            </template>
+
+            <!-- 默认渲染 -->
+            <template v-else>
+              <span>{{ formatCellValue(scope.row[column.prop], column) }}</span>
+            </template>
+
+            <!-- 编辑图标 -->
+            <i
+              v-if="column.editable && editMode === 'icon'"
+              class="el-icon-edit edit-icon"
+              @click="startEdit(scope.$index, column.prop)"
+            ></i>
+          </template>
+        </template>
+      </el-table-column>
+
+      <!-- 操作列 -->
+      <el-table-column
+        v-if="showOperation"
+        :label="operationLabel"
+        :width="operationWidth"
+        :fixed="operationFixed"
+        align="center"
+      >
+        <template slot-scope="scope">
+          <!-- 编辑状态操作 -->
+          <template
+            v-if="editingRowIndex === scope.$index && editMode === 'button'"
+          >
+            <el-button
+              :size="size"
+              type="success"
+              @click="saveRow(scope.$index)"
+              >保存</el-button
+            >
+            <el-button :size="size" @click="cancelEdit(scope.$index)"
+              >取消</el-button
+            >
+          </template>
+
+          <!-- 非编辑状态操作 -->
+          <template v-else>
+            <el-button
+              v-if="showEditButton"
+              :size="size"
+              type="primary"
+              @click="startRowEdit(scope.$index)"
+              >编辑</el-button
+            >
+
+            <el-button
+              v-if="showDeleteButton"
+              :size="size"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)"
+              >删除</el-button
+            >
+
+            <slot
+              name="operation"
+              :row="scope.row"
+              :index="scope.$index"
+            ></slot>
+          </template>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <div class="pagination-wrapper" v-if="showPagination">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="pageSizes"
+        :page-size="pageSize"
+        :layout="paginationLayout"
+        :total="total"
+      ></el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "le-table-edit",
+  props: {
+    // 表格数据
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    // 列配置
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    // 表格边框
+    border: {
+      type: Boolean,
+      default: true,
+    },
+    // 斑马纹
+    stripe: {
+      type: Boolean,
+      default: true,
+    },
+    // 尺寸
+    size: {
+      type: String,
+      default: "small",
+    },
+    // 显示序号列
+    showIndex: {
+      type: Boolean,
+      default: false,
+    },
+    // 序号列宽度
+    indexWidth: {
+      type: [Number, String],
+      default: 60,
+    },
+    // 序号列标题
+    indexLabel: {
+      type: String,
+      default: "序号",
+    },
+    // 显示多选列
+    showSelection: {
+      type: Boolean,
+      default: false,
+    },
+    // 多选列宽度
+    selectionWidth: {
+      type: [Number, String],
+      default: 60,
+    },
+    // 显示操作列
+    showOperation: {
+      type: Boolean,
+      default: true,
+    },
+    // 操作列标题
+    operationLabel: {
+      type: String,
+      default: "操作",
+    },
+    // 操作列宽度
+    operationWidth: {
+      type: [Number, String],
+      default: 180,
+    },
+    // 操作列固定
+    operationFixed: {
+      type: String,
+      default: "right",
+    },
+    // 显示编辑按钮
+    showEditButton: {
+      type: Boolean,
+      default: true,
+    },
+    // 显示删除按钮
+    showDeleteButton: {
+      type: Boolean,
+      default: true,
+    },
+    // 编辑模式: 'click' | 'dblclick' | 'icon' | 'button'
+    editMode: {
+      type: String,
+      default: "click",
+    },
+    // 是否同步数据到父组件
+    syncData: {
+      type: Boolean,
+      default: true,
+    },
+    // 分页配置
+    showPagination: {
+      type: Boolean,
+      default: false,
+    },
+    currentPage: {
+      type: Number,
+      default: 1,
+    },
+    pageSize: {
+      type: Number,
+      default: 10,
+    },
+    pageSizes: {
+      type: Array,
+      default: () => [10, 20, 50, 100],
+    },
+    total: {
+      type: Number,
+      default: 0,
+    },
+    paginationLayout: {
+      type: String,
+      default: "total, sizes, prev, pager, next, jumper",
+    },
+  },
+  data() {
+    return {
+      internalTableData: [],
+      editingCell: null, // 当前编辑的单元格 {rowIndex, prop}
+      editingRowIndex: -1, // 当前编辑的行索引（按钮模式）
+      originalData: {}, // 原始数据，用于取消编辑时恢复
+    };
+  },
+  watch: {
+    data: {
+      immediate: true,
+      deep: true,
+      handler(newVal) {
+        if (newVal && newVal.length > 0) {
+          this.internalTableData = JSON.parse(JSON.stringify(newVal));
+        } else {
+          this.internalTableData = [];
+        }
+      },
+    },
+  },
+  methods: {
+    // 判断单元格是否处于编辑状态
+    isEditing(rowIndex, prop) {
+      if (this.editMode === "button") {
+        return this.editingRowIndex === rowIndex;
+      } else {
+        return (
+          this.editingCell &&
+          this.editingCell.rowIndex === rowIndex &&
+          this.editingCell.prop === prop
+        );
+      }
+    },
+
+    // 开始编辑单元格
+    startEdit(rowIndex, prop) {
+      // 保存原始数据
+      this.originalData = JSON.parse(
+        JSON.stringify(this.internalTableData[rowIndex])
+      );
+
+      if (this.editMode === "button") {
+        this.editingRowIndex = rowIndex;
+      } else {
+        this.editingCell = { rowIndex, prop };
+
+        // 聚焦输入框
+        this.$nextTick(() => {
+          const input = this.$refs.inputRef;
+          if (input && input.focus) {
+            input.focus();
+          }
+        });
+      }
+    },
+
+    // 开始编辑整行（按钮模式）
+    startRowEdit(rowIndex) {
+      this.startEdit(rowIndex, null);
+    },
+
+    // 单元格点击事件
+    handleCellClick(row, column, cell, event) {
+      if (
+        this.editMode === "click" &&
+        column.property &&
+        this.isColumnEditable(column.property)
+      ) {
+        const rowIndex = this.internalTableData.indexOf(row);
+        this.startEdit(rowIndex, column.property);
+      }
+    },
+
+    // 单元格双击事件
+    handleCellDblClick(row, column, cell, event) {
+      if (
+        this.editMode === "dblclick" &&
+        column.property &&
+        this.isColumnEditable(column.property)
+      ) {
+        const rowIndex = this.internalTableData.indexOf(row);
+        this.startEdit(rowIndex, column.property);
+      }
+    },
+
+    // 判断列是否可编辑
+    isColumnEditable(prop) {
+      const column = this.columns.find((col) => col.prop === prop);
+      return column && column.editable !== false;
+    },
+
+    // 格式化单元格显示值
+    formatCellValue(value, column) {
+      if (column.formatter) {
+        return column.formatter(value);
+      }
+
+      // 处理日期类型 - 时间戳转 yyyy-MM-dd
+      if (column.editType === "date" && value) {
+        if (typeof value === "string" && value.includes(" ")) {
+          // 如果包含空格，说明有时间部分，只取日期部分
+          return value.split(" ")[0];
+        }
+        return this.formatDate(value);
+      }
+
+      // 处理下拉选择器的显示
+      if (column.editType === "select" && column.options) {
+        const valueKey = column.valueKey || "value"; // 使用配置的 valueKey，默认为 'value'
+        const labelKey = column.labelKey || "label"; // 使用配置的 labelKey，默认为 'label'
+        const option = column.options.find((opt) => {
+          const optValue = opt[valueKey];
+          // 处理数字和字符串的匹配
+          if (typeof optValue === "number" && typeof value === "string") {
+            return optValue.toString() === value;
+          } else if (
+            typeof optValue === "string" &&
+            typeof value === "number"
+          ) {
+            return optValue === value.toString();
+          }
+          return optValue === value;
+        });
+        return option ? option[labelKey] : value;
+      }
+
+      // 处理开关的显示
+      if (column.editType === "switch") {
+        return value ? column.activeText || "是" : column.inactiveText || "否";
+      }
+
+      return value;
+    },
+
+    // 输入框失去焦点
+    handleInputBlur(rowIndex, prop) {
+      if (this.editMode !== "button") {
+        this.saveCell(rowIndex, prop);
+      }
+    },
+
+    // 保存单元格
+    saveCell(rowIndex, prop) {
+      const newValue = this.internalTableData[rowIndex][prop];
+
+      // 验证
+      const column = this.columns.find((col) => col.prop === prop);
+      if (column && column.rules) {
+        const valid = this.validateCell(newValue, column.rules);
+        if (!valid) {
+          // 验证失败，恢复原始值
+          this.internalTableData[rowIndex][prop] = this.originalData[prop];
+          this.editingCell = null;
+          return;
+        }
+      }
+
+      // 同步数据到父组件
+      if (this.syncData) {
+        this.syncDataToParent();
+      }
+
+      // 触发保存事件
+      this.$emit("cell-save", {
+        rowIndex,
+        prop,
+        newValue,
+        oldValue: this.originalData[prop],
+        row: this.internalTableData[rowIndex],
+      });
+
+      this.editingCell = null;
+    },
+
+    // 保存整行（按钮模式）
+    saveRow(rowIndex) {
+      // 验证所有可编辑列
+      const editableColumns = this.columns.filter(
+        (col) => col.editable !== false
+      );
+      let isValid = true;
+
+      for (const column of editableColumns) {
+        if (column.rules) {
+          const value = this.internalTableData[rowIndex][column.prop];
+          if (!this.validateCell(value, column.rules)) {
+            isValid = false;
+            break;
+          }
+        }
+      }
+
+      if (!isValid) {
+        this.$message.error("数据验证失败，请检查输入");
+        return;
+      }
+
+      // 同步数据到父组件
+      if (this.syncData) {
+        this.syncDataToParent();
+      }
+
+      // 触发保存事件
+      this.$emit("row-save", {
+        rowIndex,
+        newData: this.internalTableData[rowIndex],
+        oldData: this.originalData,
+      });
+
+      this.editingRowIndex = -1;
+    },
+
+    // 同步数据到父组件
+    syncDataToParent() {
+      this.$emit(
+        "update:data",
+        JSON.parse(JSON.stringify(this.internalTableData))
+      );
+      this.$emit(
+        "data-change",
+        JSON.parse(JSON.stringify(this.internalTableData))
+      );
+    },
+
+    // 取消编辑
+    cancelEdit(rowIndex) {
+      // 恢复原始数据
+      if (this.editMode === "button") {
+        this.$set(
+          this.internalTableData,
+          rowIndex,
+          JSON.parse(JSON.stringify(this.originalData))
+        );
+      } else {
+        this.internalTableData[rowIndex] = JSON.parse(
+          JSON.stringify(this.originalData)
+        );
+      }
+
+      this.editingCell = null;
+      this.editingRowIndex = -1;
+
+      this.$emit("edit-cancel", {
+        rowIndex,
+        data: this.internalTableData[rowIndex],
+      });
+    },
+
+    // 验证单元格
+    validateCell(value, rules) {
+      for (const rule of rules) {
+        if (rule.required && !value && value !== 0) {
+          this.$message.error(rule.message || "该字段为必填项");
+          return false;
+        }
+
+        if (rule.pattern && !rule.pattern.test(value)) {
+          this.$message.error(rule.message || "格式不正确");
+          return false;
+        }
+
+        if (rule.validator && !rule.validator(value)) {
+          this.$message.error(rule.message || "验证失败");
+          return false;
+        }
+      }
+
+      return true;
+    },
+
+    // 删除行
+    handleDelete(rowIndex, row) {
+      this.$confirm("确定删除该行数据吗？", "提示", {
+        type: "warning",
+      })
+        .then(() => {
+          this.internalTableData.splice(rowIndex, 1);
+
+          // 同步数据到父组件
+          if (this.syncData) {
+            this.syncDataToParent();
+          }
+
+          this.$emit("row-delete", {
+            rowIndex,
+            row,
+          });
+        })
+        .catch(() => {});
+    },
+
+    // 分页大小改变
+    handleSizeChange(size) {
+      this.$emit("size-change", size);
+    },
+
+    // 当前页改变
+    handleCurrentChange(page) {
+      this.$emit("current-change", page);
+    },
+
+    // 获取表格数据
+    getTableData() {
+      return JSON.parse(JSON.stringify(this.internalTableData));
+    },
+
+    // 设置表格数据
+    setTableData(data) {
+      this.internalTableData = JSON.parse(JSON.stringify(data));
+      if (this.syncData) {
+        this.syncDataToParent();
+      }
+    },
+
+    // 获取选中的行（多选模式）
+    getSelection() {
+      return this.$refs.tableRef ? this.$refs.tableRef.selection : [];
+    },
+
+    // 添加新行
+    addRow(rowData = {}) {
+      const newRow = {};
+      this.columns.forEach((column) => {
+        if (column.prop) {
+          newRow[column.prop] =
+            rowData[column.prop] !== undefined
+              ? rowData[column.prop]
+              : column.defaultValue || "";
+        }
+      });
+      this.internalTableData.push(newRow);
+
+      // 同步数据到父组件
+      if (this.syncData) {
+        this.syncDataToParent();
+      }
+
+      return this.internalTableData.length - 1;
+    },
+
+    // 清除所有数据
+    clearData() {
+      this.internalTableData = [];
+      if (this.syncData) {
+        this.syncDataToParent();
+      }
+    },
+    formatDate(timestamp) {
+      if (!timestamp) return "";
+      return this.parseTime(timestamp, "{y}-{m}-{d}");
+      // return dayjs(Number(timestamp)).format("YYYY-MM-DD");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.editable-table {
+  width: 100%;
+}
+
+.edit-icon {
+  margin-left: 8px;
+  color: #409eff;
+  cursor: pointer;
+}
+
+.edit-icon:hover {
+  color: #66b1ff;
+}
+
+.pagination-wrapper {
+  margin-top: 20px;
+  text-align: right;
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leisure-core",
-  "version": "0.6.66",
+  "version": "0.6.67",
   "description": "leisure-core是京心数据基于vue2.x开发的一套后台管理系统桌面端组件库，封装了大量实用的UI控件模板,非常方便开发者快速搭建前端应用",
   "private": false,
   "author": "北方乐逍遥(zcx7878)",