olp-table 5.3.1 → 5.3.4

package/src/mixins/VTMixin/OTMixinBody.js

@@ -0,0 +1,105 @@
+import {OTMixinBodyMethods} from "./OTMixinBodyMethods"
+import {OTMixinColumnMethod} from "@/mixins/VTMixin/OTMixinColumnMethod";
+import {OTMixinBodyFooter} from "@/mixins/VTMixin/OTMixinBodyFooter";
+
+export const OTMixinBody = {
+    name: 'OTMixinBody',
+    mixins: [OTMixinBodyMethods, OTMixinColumnMethod, OTMixinBodyFooter],
+    data() {
+        return {
+            components: undefined,
+            customUrl: undefined,
+            parameter: {},
+            parameterDefault: {},
+            orderByColumns: [],
+            loading: {},
+            deleteParameter: {},
+            tableConfig: {},
+            isMaximized: false,
+            operationBtn: [],
+            toolBtn: [],
+            formItem: [],
+            selectBox: "0",//0/无、1/单选、2/
+            table: {
+                sortable: false,
+                scrollX: {enabled: true, gt: 5},
+                scrollY: {enabled: true, gt: 5},
+                ref: 'vTable',
+                loading: false,
+                border: false,
+                align: 'center',
+                size: "mini",
+                height: 'auto',
+                "show-footer": false,
+                // 合并行字段
+                mergeFields: [],
+                loadingConfig: {
+                    text: '数据加载中..'
+                },
+                formConfig: {
+                    show: true,
+                    size: "medium",
+                    titleWidth: 100,
+                    titleAlign: 'right',
+                    titleOverflow: true,
+                    items: [],
+                    data: {},
+                },
+                columnConfig: {
+                    resizable: true
+                },
+                rowConfig: {
+                    isCurrent: true,
+                },
+                sortConfig: {
+                    defaultSort: []
+                },
+                columns: [],
+                columnSource: [],
+                data: [],
+                dataSource: [],
+                toolbarConfig: {
+                    slots: {
+                        buttons: 'header_left',
+                        tools: 'header_right'
+                    }
+                },
+                ...this.$attrs
+            },
+            search: {
+                show: false,
+                queryBtn: true,
+                resetBtn: true,
+            },
+            toolbar: {
+                show: false,//是否显示
+                addBtn: true,//添加按钮
+                batchDeleteBtn: true,//查询按钮
+                uploadBtn: true,//上传按钮
+                downloadBtn: true,//下载按钮
+                refresh: true, // 显示刷新按钮
+                import: true, // 显示导入按钮
+                export: true, // 显示导出按钮
+                print: true, // 显示打印按钮
+                zoom: true, // 显示全屏按钮
+                custom: true // 显示自定义列按钮
+            },
+            formMainList: [],
+            dialog: {
+                title: '弹窗',
+                width: '80%',
+                height: '',
+                form: [],
+                designer: '0'
+            },
+            formKey: 0,
+            dialogVisible: false,
+            events: {},
+        }
+    },
+    computed: {
+        $table() {
+            return this.$refs[this.table.ref]
+        }
+    },
+}

package/src/mixins/VTMixin/OTMixinBodyFooter.js

@@ -0,0 +1,93 @@
+export const OTMixinBodyFooter = {
+    methods: {
+        footerMethod() {
+            if(!this.table['show-footer']){
+                return
+            }
+            // 获取原始列定义
+            const originalColumns = getTableColumns(this.table.columns);
+            // 初始化页脚数据数组，长度与列数相同，初始值都为 null
+            const footerData = [new Array(originalColumns.length).fill(null)];
+
+            // 遍历原始列定义，计算每个列对应的页脚数据
+            originalColumns.forEach((column, _columnIndex) => {
+                if (_columnIndex === 0) {
+                    footerData[0][_columnIndex] = '合计';
+                } else if (column.totalToOtherProp) {
+                    const operation = column.totalToOtherProp.toLowerCase();
+                    switch (operation) {
+                        case 'avg':
+                            footerData[0][_columnIndex] = (sumNum(this.table.data, column.field) / this.table.data.length).toFixed(3);
+                            break;
+                        case'sum':
+                            footerData[0][_columnIndex] = sumNum(this.table.data, column.field).toFixed(3);
+                            break;
+                        case'max':
+                            footerData[0][_columnIndex] = maxOrMin(this.table.data, column.field, true).toFixed(3);
+                            break;
+                        case'min':
+                            footerData[0][_columnIndex] = maxOrMin(this.table.data, column.field, false).toFixed(3);
+                            break;
+                        default:
+                            break;
+                    }
+                }
+            });
+
+            return footerData;
+        }
+    }
+}
+
+function getTableColumns(columns) {
+    // 分离固定在左侧、右侧和不固定的列
+    const fixedLeftColumns = [];
+    const nonFixedColumns = [];
+    const fixedRightColumns = [];
+
+    columns.forEach(column => {
+        if (column.visible != false) {
+            if (column.fixed === 'left') {
+                fixedLeftColumns.push(column);
+            } else if (column.fixed === 'right') {
+                fixedRightColumns.push(column);
+            } else {
+                nonFixedColumns.push(column);
+            }
+        }
+    });
+
+// 对非固定列按照 sort 属性排序
+    nonFixedColumns.sort((a, b) => {
+        const sortA = a.sort || 0;
+        const sortB = b.sort || 0;
+        return sortA - sortB;
+    });
+
+// 合并排序后的列
+    return [...fixedLeftColumns, ...nonFixedColumns, ...fixedRightColumns];
+}
+
+// 计算总和的函数
+function sumNum(data, field) {
+    return data.reduce((acc, item) => {
+        const value = parseFloat(item[field]);
+        return isNaN(value) ? acc : acc + value;
+    }, 0);
+}
+
+// 计算最大值或最小值的函数
+function maxOrMin(data, field, isMax) {
+    let result = isMax ? -Infinity : Infinity;
+    data.forEach(item => {
+        const value = parseFloat(item[field]);
+        if (!isNaN(value)) {
+            if (isMax && value > result) {
+                result = value;
+            } else if (!isMax && value < result) {
+                result = value;
+            }
+        }
+    });
+    return result;
+}

package/src/mixins/VTMixin/OTMixinBodyMethods.js

@@ -0,0 +1,420 @@
+import {storeDict} from "@/store/dict";
+import {storeDictType} from "@/store/dictType";
+import {toCamelCase} from "@/utils/util";
+import {useMessage} from "@/utils/message";
+import {post, get, del, put, request} from "@/utils/http/httpUtils";
+import {markRaw} from "vue";
+import {getNewArrDataToolBtn, updateSortRowCall} from "@/utils/TableSortUtil";
+import {DefaultMethods} from "@/mixins/VTMixin/DefaultMethods";
+import {doPermission} from "@/directives/permission/hasPermi";
+
+const message = useMessage() // 消息弹窗
+const dict = storeDict();
+const dictType = storeDictType();
+export const OTMixinBodyMethods = {
+    mixins: [DefaultMethods],
+    emits: ['handleOperationClick', 'toolbarBtnClick', 'initComponents', 'selectRowChange'],
+    methods: {
+        /**
+         * 自定义表单方法
+         * @returns {*}
+         */
+        customerForm(show) {
+            this.toggleFormDisplay()
+            this.table.formConfig.show = show == true;
+            return this.table.formConfig;
+        }, /**
+         * 搜索隐藏/显示
+         */
+        toggleFormDisplay() {
+            // 获取组件的根 DOM 元素
+            const rootEl = this.$refs[this.table.ref].$el;
+
+            // 查询第一个子标签是否为 vxe-grid--form-wrapper
+            const formWrapperEl = rootEl.querySelector('.vxe-grid--form-wrapper');
+            if (formWrapperEl) {
+                // 查询 formWrapperEl 下的第一个 form 标签
+                const formEl = formWrapperEl.querySelector('form');
+                if (formEl) {
+                    // 获取 form 标签的当前 display 样式
+                    const currentDisplay = window.getComputedStyle(formEl).display;
+
+                    // 根据当前 display 样式设置新的样式
+                    if (currentDisplay === 'none') {
+                        // 如果当前是 none，则移除 display 样式（设置为空字符串）
+                        formEl.style.display = '';
+                    } else {
+                        // 否则设置为 none
+                        formEl.style.display = 'none';
+                    }
+                }
+            }
+        }, /**
+         * 选中回调
+         */
+        selectRowChange() {
+            let rows = this.getSelectRows();
+            if (!rows) {
+                return;
+            }
+            this.pagination.selectionRowsLength = rows.length;
+            this.setToolBtn('batchDelete', 'disabled', rows.length == 0)
+            rows = this.selectBox == 1 ? rows[0] : rows;
+            if (this.events['selectRowChange']) {
+                this.events['selectRowChange'](rows)
+            }
+            this.$emit("selectRowChange", rows)
+        }, /**
+         * 切换表格最大化/还原
+         */
+        zoomEvent() {
+            if (this.$table) {
+                this.$table.zoom()
+                this.isMaximized = this.$table.isMaximized()
+            }
+        },
+        initToolBtn(toolBut) {
+            let obj = undefined;
+            for (let i = 0; i < toolBut.length; i++) {
+                let toolButElement = toolBut[i];
+                toolButElement.disabled = toolButElement.defaultDisabled == 1
+                toolButElement.show = toolButElement.defaultShow == 1
+                if (toolButElement.code == 'sortable') {
+                    toolButElement.values = false;
+                    obj = JSON.parse(JSON.stringify(toolButElement))
+                    obj.id = obj.id + "_sortable";
+                    obj.name = "调整完成";
+                    obj.code = "sortableOk";
+                    obj.icon = "vxe-icon-check";
+                    obj.show = false;
+                    obj.disabled = true;
+                    obj.index = i + 1;
+                }
+            }
+            if (obj) {
+                toolBut.splice(obj.index, 0, obj)
+            }
+            this.toolBtn = toolBut;
+        },
+        initOperationBtn(operationBtn) {
+            this.operationBtn = operationBtn;
+            if(this.operationBtn.length!=0){
+                let okBut = []
+                for (let i = 0; i < this.operationBtn.length; i++) {
+                    let flag = doPermission({parentNode:false},[this.uuid+':'+this.theme+':'+this.operationBtn[i].code]);
+                    // console.info(this.operationBtn[i].name+'--按钮'+this.operationBtn[i].code,flag)
+                    if(flag){
+                        okBut.push(this.operationBtn[i])
+                    }
+                }
+                this.operationBtn = okBut;
+            }
+
+            let length = this.operationBtn.length;
+            if (length != 0) {
+                let width = 35;
+                if (this.table.operationWidth) {
+                    width = this.table.operationWidth;
+                } else {
+                    for (let o of this.operationBtn) {
+                        width += (o.name.length * (35 - length) + (o.icon !== undefined ? 5 : 0));
+                    }
+                }
+                this.table.columns.push({
+                    title: '操作', width: width, fixed: "right", slots: {default: 'operate'}
+                })
+            }
+        },
+        initTree({tree, treeId, treeParentId}) {
+            if (tree == 1) {
+                this.table.treeConfig = {
+                    show: true,
+                    transform: false,
+                    indent: 15,
+                    reserve: tree,
+                    rowField: treeId,
+                    parentField: treeParentId,
+                    treeId: treeId,
+                    treeParentId: treeParentId,
+                    iconClose: "vxe-icon-arrow-right",
+                    iconOpen: "vxe-icon-arrow-down"
+                }
+                this.table.rowConfig.keyField = treeId;
+            }
+        },
+        initFormMainList(formMainList) {
+            this.formMainList = formMainList
+        },
+        async doSetComponents(customUrl, method, props, multipleProps) {
+            this.customUrl = markRaw(customUrl);
+            await this.$nextTick(async () => {
+                if (multipleProps == '1' || multipleProps == true) {
+                    doCallback(this.$refs.components[method], props)
+                } else if (multipleProps == '2') {
+                    doCallback2(this.$refs.components[method], props)
+                } else {
+                    this.$refs.components[method](props)
+                }
+            })
+        },
+        setComponent(url, method, props, multipleProps) {
+            if (url.indexOf("@") == 0) {
+                this.$emit('initComponents', {url: url, method: method, props: props, multipleProps: multipleProps})
+            } else {
+                this.doSetComponents(require(`@/${url}`).default, method, props, multipleProps)
+            }
+        },
+        async toolbarBtnClick(code) {
+            if (code == "batchDelete") {
+                this.batchRemove();
+                this.$emit('toolbarBtnClick', code)
+                return
+            } else if (code == 'download') {
+                this.setComponent("components/ol-dialog-excel", "open", {
+                    id: this.tableConfig.id, selectData: this.pagination.selectionRowsLength >= 1 ? '2' : '1'
+                })
+                return
+            } else if (code == 'upload') {
+                this.setComponent("components/ol-dialog-import", "open", {
+                    id: this.tableConfig.id
+                })
+                return
+            } else if (code == 'sortable') {
+                this.sortableClick();
+                return;
+            } else if (code == 'sortableOk') {
+                this.loading['sortableOk'] = true;
+                this.sortableOkClick();
+                return;
+            }
+            let customFunction = undefined;
+            for (const toolBtn of this.toolBtn) {
+                if (toolBtn.code == code && toolBtn.customFunction) {
+                    customFunction = toolBtn.customFunction;
+                    break;
+                }
+            }
+            let param = this.getSubParamByBtn(code);
+            if (customFunction != undefined) {
+                eval(customFunction);
+            } else if (code == 'add' && param && param.type == '1') {
+                this.showSubForm(code, param)
+            } else if (code == 'add') {
+                this.showForm(code);
+            }
+            this.$emit('toolbarBtnClick', code)
+
+        },
+        getSubParamByBtn(code) {
+            for (const toolBtn of this.toolBtn) {
+                if (toolBtn.code == code) {
+                    return this.getSubParam(toolBtn.json);
+                }
+            }
+        },
+        getDeleteId(param) {
+            for (let key of Object.keys(param)) {
+                if (key != '$parentId') {
+                    return key;
+                }
+            }
+        },
+        sortableClick() {
+            for (let toolBtn of this.toolBtn) {
+                if (toolBtn.code == 'sortable') {
+                    toolBtn.values = !toolBtn.values;
+                    this.loading['sortableOk'] = false;
+                    this.setToolBtn('sortableOk', 'show', toolBtn.values);
+                    toolBtn.start = 999999;
+                    toolBtn.end = -1;
+                    if (toolBtn.values) {
+                        if (toolBtn.beforeFunction == undefined || toolBtn.beforeFunction == '' || toolBtn.beforeFunction.split(",") < 2) {
+                            message.error("排序字段未配置,请在做工具栏按钮配置中配置参数1(sort,id)");
+                            return;
+                        }
+                        toolBtn.updateData = {};
+                        toolBtn.$elm = updateSortRowCall(this.$table, (oldIndex, newIndex) => {
+                            let start = Math.min(oldIndex, newIndex)
+                            let end = Math.max(oldIndex, newIndex)
+                            toolBtn.start = Math.min(start, toolBtn.start)
+                            toolBtn.end = Math.max(end, toolBtn.end)
+                            this.setToolBtn('sortableOk', 'disabled', false)
+                            this.table.data = getNewArrDataToolBtn(oldIndex, newIndex, this.table.data, toolBtn)
+                        })
+                    } else if (toolBtn.$elm) {
+                        this.setToolBtn('sortableOk', 'disabled', true)
+                        toolBtn.$elm.destroy();
+                        toolBtn.$elm = undefined;
+                        this.query();
+                    }
+                    return;
+                }
+            }
+        },
+        sortableOkClick() {
+            for (let toolBtn of this.toolBtn) {
+                if (toolBtn.code == 'sortable') {
+                    let url;
+                    this.loading['sortableOk'] = true;
+                    this.table.loading = true;
+                    let params = {
+                        updateList: []
+                    };
+                    //sort,id  排序字段,更新主键
+                    let kw = toolBtn.beforeFunction.split(",");
+                    if (toolBtn.alterFunction) {
+                        url = toolBtn.alterFunction;
+                    } else {
+                        url = '/online/crud/batchModify';
+                        params.tableConfigId = this.tableConfig.id;
+                    }
+                    //这里肯定只有一个值
+                    for (let key of Object.keys(toolBtn.updateData)) {
+
+                        if (toolBtn.alterFunction) {
+                            let kv = {};
+                            kv[kw[1]] = key
+                            kv[kw[0]] = toolBtn.updateData[key]
+                            params.updateList.push(kv);
+                        } else {
+                            let columnAndValueMap = {};
+                            let whereMap = {};
+                            whereMap[kw[1]] = key
+                            columnAndValueMap[kw[0]] = toolBtn.updateData[key]
+                            params.updateList.push({
+                                columnAndValueMap, whereMap
+                            });
+                        }
+                    }
+                    post(this.http, url, params).then((status) => {
+                        if (status) {
+                            this.query();
+                            this.setToolBtn('sortableOk', 'disabled', true);
+                        }
+                    }).finally(() => {
+                        this.loading['sortableOk'] = false;
+                        this.table.loading = false;
+                    })
+                }
+            }
+        }, showRender(descCode, url, title) {
+            get(this.http, '/online/formDesigner/getOne', {descCode: descCode}, undefined, true).then(d => {
+                let data = {
+                    type: 1,
+                    saveUrl: url,
+                    title: title,
+                    form: JSON.parse(d.formJson),
+                    tableConfigId: this.tableConfig.id
+                }
+                this.$refs["form"].init(data, false)
+            });
+        },
+        showSubForm(code, subData, formData) {
+            if (!formData) {
+                formData = {};
+            }
+            let form = this.formMainList[code];
+            if (!form) {
+                return;
+            }
+            let formJsonStr = form.formJson[form.formMain.designer == 0 ? 'optionJson' : 'customJson'];
+            let data = {
+                type: form.formMain.designer,
+                saveUrl: form.formMain.saveUrl,
+                requestType: form.formMain.requestType,
+                updateKey: form.formMain.updateKey,
+                formData: formData,
+                theme: this.theme,
+                code: code,
+                uuid: subData.subUuid,
+                deleteId: subData.deleteId,
+                foreignKey: subData.subForeignKey,
+                form: JSON.parse(formJsonStr),
+                tableConfigId: this.tableConfig.id,
+                dbName: this.tableConfig.dbName,
+                tableName: this.tableConfig.mainTable
+            }
+            if (subData) {
+                this.$refs["subForm"].init(data)
+            }
+        },
+        showForm(code, formData) {
+            if (!formData) {
+                formData = {};
+            }
+            let form = this.formMainList[code];
+            if (!form) {
+                return;
+            }
+            let formJsonStr = form.formJson[form.formMain.designer == 0 ? 'optionJson' : 'customJson'];
+            let data = {
+                type: form.formMain.designer,
+                saveUrl: form.formMain.saveUrl,
+                requestType: form.formMain.requestType,
+                updateKey: form.formMain.updateKey,
+                formData: formData,
+                theme: this.theme,
+                code: code,
+                form: JSON.parse(formJsonStr),
+                tableConfigId: this.tableConfig.id,
+                dbName: this.tableConfig.dbName,
+                tableName: this.tableConfig.mainTable
+            }
+            this.$refs["form"].init(data)
+        },
+        async handleOperationClick(o) {
+            let {obj, row} = o;
+            let param = this.getSubParam(obj.json);
+            if (obj.customFunction) {
+                eval(obj.customFunction);
+            } else if (obj.code == "delete") {
+                this.remove(o);
+            } else if (obj.code == 'edit' && param && param.type == '1') {
+                this.showSubForm(obj.code, param, row)
+            } else if (obj.code == 'edit') {
+                this.showForm(obj.code, row)
+            }
+            this.$emit("handleOperationClick", o)
+        },
+        getSubParam(json) {
+            let obj = {deleteId: this.getDeleteId(this.deleteParameter)}; // 初始化为空对象
+            if (json) {
+                return {...obj, ...JSON.parse(json)}
+            }
+        }
+    },
+    created() {
+        dict.init(this.http)
+        dictType.init(this.http)
+    }
+}
+
+function rowCamelCase(o) {
+    let obj = {};
+    for (let key of Object.keys(o)) {
+        if (key == 'XROWKEY') {
+            continue;
+        }
+        let k = key;
+        if (re(key)) {
+            k = key.substring(3)
+        }
+        obj[toCamelCase(k)] = o[key];
+    }
+    return obj;
+}
+
+function re(k) {
+    let reg = /^t\d_/;
+    return reg.test(k)
+}
+
+function doCallback(fn, args) {
+    for (let arg of args) {
+        fn.apply(this, arg);
+    }
+}
+
+function doCallback2(fn, args) {
+    fn.apply(this, args);
+}