el-crud-page 1.0.0

package/src/table.vue

@@ -0,0 +1,159 @@
+<!-- crud table 组件 -->
+<template>
+    <el-table :data="data" class="crud-table" ref="table" v-bind="combinedProps" v-on="combinedEvents">
+        <crud-table-column v-for="column in columns" :indexMethod="(index)=>( baseIndex + 1 + index )"
+            v-if="!column[`v-hasPermi`] || !column[`v-hasPermi`].length || $auth.hasPermiOr(column[`v-hasPermi`] || [])"
+            :column="column" @action="onRowAction">
+        </crud-table-column>
+    </el-table>
+</template>
+<script>
+
+
+/**
+ * CRUD table组件
+ */
+
+import CrudTableColumn from "./tableColumn.js";
+
+export default {
+    name: "CrudTable",
+    components: {
+        CrudTableColumn
+    },
+    inject: ["crud"],
+    props: {
+        columns: {
+            type: Array,
+            default: () => []
+        },
+        on: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        },
+        data: {
+            type: Array,
+            default: () => {
+                return [];
+            }
+        }
+    },
+    data() {
+        return {
+            emit: {},
+            defaultProps: {
+                stripe: true,
+                size: "mini",
+            }
+        };
+    },
+    computed: {
+        // 将外部传入的 props 与 crud 内部样式合并
+        combinedProps() {
+            return Object.assign({}, this.defaultProps, this.$attrs);
+        },
+        // 将各事件处理函数合并，包括 emit 与 on 上的回调
+        combinedEvents() {
+            return Object.assign(
+                {},
+                {
+                    "selection-change": this.onSelectionChange,
+                    "sort-change": this.onSortChange,
+                    "row-contextmenu": this.onRowContextMenu
+                },
+                this.emit,
+                this.on
+            );
+        },
+        baseIndex(){
+            if( this.crud?.pagination ){
+                return (this.crud?.pagination?.pageNum-1) * this.crud?.pagination?.pageSize;
+            }else{
+                return 0;
+            }
+        }
+    },
+    mounted() {
+        this.bindEmits();
+        this.bindMethods();
+    },
+    methods: {
+        // 绑定 el-table 回调
+        bindEmits() {
+            const emits = [
+                "select",
+                "select-all",
+                "cell-mouse-enter",
+                "cell-mouse-leave",
+                "cell-click",
+                "cell-dblclick",
+                "row-click",
+                "row-contextmenu",
+                "row-dblclick",
+                "header-click",
+                "header-contextmenu",
+                "filter-change",
+                "current-change",
+                "header-dragend",
+                "expand-change"
+            ];
+
+            emits.forEach((name) => {
+                this.emit[name] = (...args) => {
+                    this.$emit(name, ...args);
+                };
+            });
+        },
+
+        // 绑定 el-table 事件
+        bindMethods() {
+            const methods = [
+                "clearSelection",
+                "toggleRowSelection",
+                "toggleAllSelection",
+                "toggleRowExpansion",
+                "setCurrentRow",
+                "clearSort",
+                "clearFilter",
+                "doLayout",
+                "sort"
+            ];
+
+            methods.forEach((n) => {
+                this[n] = this.$refs["table"][n];
+            });
+        },
+        onSelectionChange(selection) {
+            this.$emit("selection-change", selection);
+        },
+        onSortChange({ prop, order }) {
+            this.$emit("sort-change", { prop, order });
+        },
+        onRowContextMenu(row, column, event) {
+            this.$emit("row-contextmenu", row, column, event);
+        },
+        onRowAction(action, scope) {
+            this.$emit("row-action", action, scope);
+            this.$emit(`row-${action}`, scope);
+        }
+    }
+
+}
+</script>
+
+<style scoped lang="scss">
+.crud-table {
+    &::v-deep {
+        .el-table__body-wrapper {
+            .el-table__cell {
+                .cell:empty::after {
+                    content: '/';
+                    color: #c0c4cc;
+                }
+            }
+        }
+    }
+}
+</style>

package/src/tableColumn.js

@@ -0,0 +1,330 @@
+// 组件说明：TableColumn 用于在 CRUD 表格中动态渲染列，支持嵌套子列，处理字典与格式化展示。
+import { renderNode } from "./utils/vnode.jsx";
+import { isFunction, isString, isArray, cloneDeep, isObject,isPromise } from "./utils";
+
+
+const TableColumn = {
+    // 组件名称
+    name: "TableColumn",
+    data() {
+        return {
+            // emit:{},
+            actionMap: {
+                info: {
+                    label: "详情",
+                    type: "text",
+                    action: "info",
+                    icon: "el-icon-document"
+                },
+                update: {
+                    label: "编辑",
+                    type: "text",
+                    action: "update",
+                    icon: "el-icon-edit"
+                },
+                delete: {
+                    label: "删除",
+                    type: "text",
+                    action: "delete",
+                    icon: "el-icon-delete"
+                },
+                 
+            }
+        }
+    },
+    props: {
+        // 列配置对象，包含列属性、子列、格式化函数等
+        column: {
+            type: Object,
+            required: true
+        },
+        // 行索引生成方法，用于动态生成行号
+        indexMethod: {
+            type: Function,
+            required: false
+        },
+    },
+    computed: {
+        // 判断当前列是否包含子列
+        hasChildren() {
+            return this.column.children && this.column.children.length > 0;
+        },
+        // 生成并返回列的属性集合，默认居中对齐
+        columnProps() {
+            return Object.assign({}, this.column, {
+                align: this.column.align || "center"
+            });
+        },
+        // 生成唯一的列 key，用于 Vue 渲染优化
+        columnKey() {
+            return "crud-table-column-" + (this.column.prop || Math.random());
+        },
+        
+    },
+    mounted() {
+    },
+    methods: {
+        // 根据传入值查找并返回字典中对应的对象
+        getDict(value) {
+            if( isPromise(this.column.dict)){
+                this.column.dict.then((dict)=>{
+                    this.column.dict = dict;
+                });
+                return null
+             }
+            // this.column.dict 如果 this.column.dict 是个 function
+            // 则调用 this.column.dict(value) 返回字典对象
+            if (typeof this.column.dict === "function") {
+                return this.column.dict(value).find(d => d.value == value);
+            }
+
+            if (this.column.dict) {
+                return this.column.dict?.find(d => d.value == value);
+            }
+            return null;
+        },
+        // 检查传入的值是否严格为 null
+        isNull(val) {
+            return val === null;
+        },
+        renderNode(vnode, options) {
+            return renderNode.call(this, vnode, options);
+        },
+        renderSelection(h) {
+            return h(
+                "el-table-column",
+                {
+                    key: this.columnKey,
+                    props: Object.assign({}, this.columnProps, { index: this.indexMethod })
+                },
+                []
+            );
+
+        },
+        // 渲染操作列
+        renderActions(h) {
+            return h(
+                "el-table-column",
+                {
+                    key: this.columnKey,
+                    props: Object.assign({}, this.columnProps, { index: this.indexMethod }),
+                    scopedSlots: {
+                        default: scope => {
+                            let actions = this.column.actions;
+                            if (isFunction(this.column.actions)) {
+                                actions = this.column.actions({ scope, h });
+                            }
+
+                            return actions?.map(action => {
+
+                                // 自定义渲染函数
+                                if (isFunction(action)) {
+                                    return action({ scope, h });
+                                }
+                                // 预设的操作映射
+                                if (isString(action)) {
+                                    action = this.actionMap[action];
+                                    if( !action){
+                                        return null;
+                                    }
+                                }
+                                // action 如果是数组 创建 更多 按钮列表
+                                if (isArray(action)) {
+                                    return h(
+                                        "el-dropdown",
+                                        {
+                                            props: {
+                                                trigger: "hover",
+                                                // size: "mini"
+                                            },
+                                            on: {
+                                                command: (e) => {
+                                                    this.$emit("action", e, scope);
+                                                }
+                                            },
+                                            style: {
+                                                right: "auto",
+                                                "margin-left":"10px"
+                                            }
+                                        },
+                                        [
+                                            h(
+                                                "span",
+                                                {
+                                                    class: "el-dropdown-link",
+                                                    style: "margin-left: 0",
+                                                },
+                                                [
+                                                    "更多",
+                                                    h("i", {
+                                                        class: "el-icon-arrow-down el-icon--right"
+                                                    })
+                                                ]
+                                            ),
+                                            h(
+                                                "el-dropdown-menu",
+                                                {
+                                                    slot: "dropdown"
+                                                },
+                                                action.map(item => {
+                                                    let _item = item 
+                                                    // 预设的操作映射
+                                                    if (isString(_item)) {
+                                                        _item = this.actionMap[_item];
+                                                        if( !_item){
+                                                            return null;
+                                                        }
+                                                    }
+                                                    return h(
+                                                        "el-dropdown-item",
+                                                        {
+                                                            props: {
+                                                                command: _item.action,
+                                                                icon: _item.icon,
+                                                                disabled: _item.disabled,
+                                                            },
+                                                        },
+                                                        _item.label
+                                                    );
+                                                })
+                                            )
+                                        ]
+                                    );
+                                }
+
+
+
+                                // 渲染 action 按钮
+                                return h(
+                                    "el-button",
+                                    {
+                                        props: {
+                                            type: action.type || "text",
+                                            size: action.size || "mini",
+                                            icon: action.icon || "",
+                                            disabled: action.disabled || false
+                                        },
+                                        on: {
+                                            click:(e)=> {
+                                                this.$emit("action", action.action, scope); 
+                                            }
+                                        }
+                                    },
+                                    action.label
+                                );
+                            }).filter(item=>item);
+                        }
+                    }
+                },
+                []
+            );
+        },
+         
+    },
+    // 动态渲染函数，根据列配置渲染 el-table-column
+    render(h) {
+        if ( this.column.hidden ){
+            if( typeof this.column.hidden === "function" ){
+                // 如果 hidden 是函数，则调用函数判断是否隐藏
+                if (this.column.hidden(this.column)) {
+                    return null;
+                }
+            }
+        }
+
+        if (this.column.visible === false) {
+            return null;
+        }
+        if (this.column.type === "selection" || this.column.type === "index") {
+            // 对于 selection 类型，直接传递 props 让 Element 内部处理选中状态
+            return this.renderSelection(h);
+        } else if (this.column.type === "action") {
+            // 对于 action 类型，渲染操作列
+            return this.renderActions(h);
+        }
+        return h(
+            "el-table-column",
+            {
+                key: this.columnKey,
+                props: Object.assign({}, this.columnProps, { index: this.indexMethod }),
+                scopedSlots: {
+                    // 自定义表头渲染：支持 slot 覆盖默认表头
+                    header: scope => {
+                        return this.$scopedSlots["header-" + this.column.prop]
+                            ? this.$scopedSlots["header-" + this.column.prop](scope)
+                            : scope.column.label;
+                    },
+                    // 自定义单元格渲染：支持 slot、组件、格式化函数或字典
+                    default: (scope) => {
+                        let content;
+                        // 检查是否有自定义 slot 渲染
+                        if (this.$scopedSlots["column-" + this.column.prop]) {
+                            content = this.$scopedSlots["column-" + this.column.prop]({
+                                scope: scope,
+                                column: this.column
+                            });
+                        } else if (this.column.component) {
+                            // 通过 renderNode 调用渲染组件，确保 this 指向当前实例
+                            content = this.renderNode(this.column.component, { prop: this.column.prop, scope: scope });
+                        } else if (this.column.formatter) {
+                            content = this.column.formatter(
+                                scope.row,
+                                scope.column,
+                                scope.row[this.column.prop],
+                                scope.$index
+                            );
+                        } else if (this.column.dict) {
+                            const dictItem = this.getDict(scope.row[this.column.prop]);
+                            if (dictItem?.label) {
+                                content = h(
+                                    "el-tag",
+                                    {
+                                        props: {
+                                            size: "mini",
+                                            disableTransitions: true,
+                                            type: dictItem.type 
+                                            // effect: "dark"
+                                        }
+                                    },
+                                    dictItem.label
+                                );
+                            } else {
+                                content = scope.row[this.column.prop];
+                            }
+                        } else if (this.isNull(scope.row[this.column.prop])) {
+                            content = scope.emptyText;
+                        } else {
+                            content = scope.row[this.column.prop];
+                        }
+                        return content;
+                    }
+                }
+            },
+            // 若有子列则递归渲染
+            this.hasChildren
+                ? this.column.children.map((child, idx) =>
+                    h(TableColumn, {
+                        key: idx,
+                        props: { 
+                            column: child, 
+                            indexMethod: this.indexMethod,
+
+                         },
+                         on: this.$listeners,
+
+                         
+
+                    })
+                )
+                : []
+        );
+    },
+
+};
+
+// 支持自身递归调用（递归组件）
+TableColumn.components = {
+    TableColumn
+};
+
+export default TableColumn;

package/src/utils/clone-deep.js

@@ -0,0 +1,42 @@
+'use strict';
+ 
+import clone from './shallow-clone';
+import typeOf from './kind-of';
+import {isPlainObject} from './is-plain-object';
+
+function cloneDeep(val, instanceClone) {
+  switch (typeOf(val)) {
+    case 'object':
+      return cloneObjectDeep(val, instanceClone);
+    case 'array':
+      return cloneArrayDeep(val, instanceClone);
+    default: {
+      return clone(val);
+    }
+  }
+}
+
+function cloneObjectDeep(val, instanceClone) {
+  if (typeof instanceClone === 'function') {
+    return instanceClone(val);
+  }
+  if (instanceClone || isPlainObject(val)) {
+    const res = (val.constructor !== undefined) ? new val.constructor() : Object.create(null);
+    for (let key in val) {
+      res[key] = cloneDeep(val[key], instanceClone);
+    }
+    return res;
+  }
+  return val;
+}
+
+function cloneArrayDeep(val, instanceClone) {
+  const res = new val.constructor(val.length);
+  for (let i = 0; i < val.length; i++) {
+    res[i] = cloneDeep(val[i], instanceClone);
+  }
+  return res;
+}
+
+
+export default cloneDeep;

package/src/utils/index.js

@@ -0,0 +1,135 @@
+import cloneDeep from './clone-deep';
+import { scrollTo } from './scroll-to';
+
+
+export function isArray(value) {
+	if (typeof Array.isArray === "function") {
+		return Array.isArray(value);
+	} else {
+		return Object.prototype.toString.call(value) === "[object Array]";
+	}
+}
+
+export function isObject(value) {
+	return Object.prototype.toString.call(value) === "[object Object]";
+}
+
+export function isNumber(value) {
+	return !isNaN(Number(value));
+}
+
+export function isFunction(value) {
+	return typeof value === "function";
+}
+
+export function isString(value) {
+	return typeof value === "string";
+}
+
+export function isNull(value) {
+	return !value && value !== 0;
+}
+
+export function isBoolean(value) {
+	return typeof value === "boolean";
+}
+export function isPromise(value) {
+	return value && typeof value === 'object' && typeof value.then === 'function' && typeof value.catch === 'function';
+}
+
+export function isEmpty(value) {
+	if (isArray(value)) {
+		return value.length === 0;
+	}
+
+	if (isObject(value)) {
+		return Object.keys(value).length === 0;
+	}
+
+	return value === "" || value === undefined || value === null;
+}
+
+export function clone(obj) {
+	return Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj));
+}
+
+export function getParent(name) {
+	let parent = this.$parent;
+
+	while (parent) {
+		if (parent.$options.componentName !== name) {
+			parent = parent.$parent;
+		} else {
+			return parent;
+		}
+	}
+
+	return null;
+}
+
+
+
+export function deepMerge(a, b) {
+	let k;
+	for (k in b) {
+		a[k] =
+			a[k] && a[k].toString() === "[object Object]" ? deepMerge(a[k], b[k]) : (a[k] = b[k]);
+	}
+	return a;
+}
+
+export function contains(parent, node) {
+	if (document.documentElement.contains) {
+		return parent !== node && parent.contains(node);
+	} else {
+		while (node && (node = node.parentNode)) if (node === parent) return true;
+		return false;
+	}
+}
+
+/**
+ * @param {Function} func
+ * @param {number} wait
+ * @param {boolean} immediate
+ * @return {*}
+ */
+export function debounce(func, wait, immediate) {
+  let timeout, args, context, timestamp, result
+
+  const later = function() {
+    // 据上一次触发时间间隔
+    const last = +new Date() - timestamp
+
+    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
+    if (last < wait && last > 0) {
+      timeout = setTimeout(later, wait - last)
+    } else {
+      timeout = null
+      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
+      if (!immediate) {
+        result = func.apply(context, args)
+        if (!timeout) context = args = null
+      }
+    }
+  }
+
+  return function(...args) {
+    context = this
+    timestamp = +new Date()
+    const callNow = immediate && !timeout
+    // 如果延时不存在，重新设定延时
+    if (!timeout) timeout = setTimeout(later, wait)
+    if (callNow) {
+      result = func.apply(context, args)
+      context = args = null
+    }
+
+    return result
+  }
+}
+
+export function toLine(name) {
+  return name.replace(/([A-Z])/g, "_$1").toLowerCase();
+}
+
+export { cloneDeep,scrollTo };

package/src/utils/is-plain-object.js

@@ -0,0 +1,32 @@
+/*!
+ * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
+ *
+ * Copyright (c) 2014-2017, Jon Schlinkert.
+ * Released under the MIT License.
+ */
+
+function isObject(o) {
+  return Object.prototype.toString.call(o) === '[object Object]';
+}
+
+export function isPlainObject(o) {
+  var ctor,prot;
+
+  if (isObject(o) === false) return false;
+
+  // If has modified constructor
+  ctor = o.constructor;
+  if (ctor === undefined) return true;
+
+  // If has modified prototype
+  prot = ctor.prototype;
+  if (isObject(prot) === false) return false;
+
+  // If constructor does not have an Object-specific method
+  if (prot.hasOwnProperty('isPrototypeOf') === false) {
+    return false;
+  }
+
+  // Most likely a plain Object
+  return true;
+};