feat: 统一分页表格组件、修复系统配置无法配置单个属性

mayfly_go_web/src/components/pagetable/index.ts

@@ -0,0 +1,233 @@
+import { dateFormat } from '@/common/utils/date';
+
+export class TableColumn {
+
+    /**
+     * 属性字段
+     */
+    prop: string;
+
+    /**
+     * 显示表头
+     */
+    label: string;
+
+    /**
+     * 是否自动计算宽度
+     */
+    autoWidth: boolean = true;
+
+    /**      
+     * 最小宽度
+     */
+    minWidth: number | string;
+
+    /**
+     * 插槽名
+     */
+    slot: string;
+
+    showOverflowTooltip: boolean = true;
+
+    sortable: boolean = false;
+
+    type: string;
+
+    width: number | string;
+
+    fixed: any;
+
+    align: string = "center"
+
+    formatFunc: Function
+
+    show: boolean = true
+
+    constructor(prop: string, label: string) {
+        this.prop = prop;
+        this.label = label;
+    }
+
+    static new(prop: string, label: string): TableColumn {
+        return new TableColumn(prop, label)
+    }
+
+    setMinWidth(minWidth: number | string): TableColumn {
+        this.minWidth = minWidth
+        this.autoWidth = false;
+        return this;
+    }
+
+    setSlot(slot: string): TableColumn {
+        this.slot = slot
+        return this;
+    }
+
+    setFormatFunc(func: Function): TableColumn {
+        this.formatFunc = func;
+        return this;
+    }
+
+    /**
+     * 为时间字段，则使用默认时间格式函数
+     * @returns this
+     */
+    isTime(): TableColumn {
+        this.setFormatFunc(dateFormat)
+        return this;
+    }
+
+    fixedRight(): TableColumn {
+        this.fixed = "right";
+        return this;
+    }
+
+    fixedLeft(): TableColumn {
+        this.fixed = "left";
+        return this;
+    }
+
+
+    /**
+     * 
+     * @param str 字符串
+     * @param tableData 表数据
+     * @param label 表头label也参与宽度计算
+     * @returns 列宽度
+     */
+    static flexColumnWidth = (str: any, label: string, tableData: any) => {
+        // str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);
+
+        str = str + '';
+        let columnContent = '';
+        if (!tableData || !tableData.length || tableData.length === 0 || tableData === undefined) {
+            return;
+        }
+        if (!str || !str.length || str.length === 0 || str === undefined) {
+            return;
+        }
+        // 获取该列中最长的数据(内容)
+        let index = 0;
+        for (let i = 0; i < tableData.length; i++) {
+            if (!tableData[i][str]) {
+                continue;
+            }
+            const now_temp = tableData[i][str] + '';
+            const max_temp = tableData[index][str] + '';
+            if (now_temp.length > max_temp.length) {
+                index = i;
+            }
+        }
+        columnContent = tableData[index][str] + '';
+        const contentWidth: number = TableColumn.getContentWidth(columnContent);
+        // 获取label的宽度，取较大的宽度
+        const columnWidth: number = TableColumn.getContentWidth(label) + 30;
+        const flexWidth: number = contentWidth > columnWidth ? contentWidth : columnWidth;
+        return flexWidth + 'px';
+    };
+
+    /**
+     * 获取内容所需要占用的宽度
+    */
+    static getContentWidth = (content: any): number => {
+        if (!content) {
+            return 50;
+        }
+        // 以下分配的单位长度可根据实际需求进行调整
+        let flexWidth = 0;
+        for (const char of content) {
+            if (flexWidth > 500) {
+                break;
+            }
+            if ((char >= '0' && char <= '9') || (char >= 'a' && char <= 'z')) {
+                // 小写字母、数字字符
+                flexWidth += 9.3;
+                continue;
+            }
+            if (char >= 'A' && char <= 'Z') {
+                flexWidth += 9;
+                continue;
+            }
+            if (char >= '\u4e00' && char <= '\u9fa5') {
+                // 如果是中文字符，为字符分配16个单位宽度
+                flexWidth += 20;
+            } else {
+                // 其他种类字符
+                flexWidth += 8;
+            }
+        }
+        if (flexWidth > 400) {
+            // 设置最大宽度
+            flexWidth = 400;
+        }
+        return flexWidth;
+    };
+}
+
+
+export class TableQuery {
+
+    /**
+     * 属性字段
+     */
+    prop: string;
+
+    /**
+     * 显示表头
+     */
+    label: string;
+
+    /**
+     * 查询类型，text、select、date
+     */
+    type: string;
+
+    /**
+     * select可选值
+     */
+    options: any;
+
+    /**
+     * 插槽名
+     */
+    slot: string;
+
+
+    constructor(prop: string, label: string) {
+        this.prop = prop;
+        this.label = label;
+    }
+
+    static new(prop: string, label: string): TableQuery {
+        return new TableQuery(prop, label)
+    }
+
+    static text(prop: string, label: string): TableQuery {
+        const tq = new TableQuery(prop, label)
+        tq.type = 'text';
+        return tq;
+    }
+
+    static select(prop: string, label: string): TableQuery {
+        const tq = new TableQuery(prop, label)
+        tq.type = 'select';
+        return tq;
+    }
+
+    static date(prop: string, label: string): TableQuery {
+        const tq = new TableQuery(prop, label)
+        tq.type = 'date';
+        return tq;
+    }
+
+    static slot(prop: string, label: string, slotName: string): TableQuery {
+        const tq = new TableQuery(prop, label)
+        tq.slot = slotName;
+        return tq;
+    }
+
+    setOptions(options: any): TableQuery {
+        this.options = options;
+        return this
+    }
+}