@truenewx/tnxvue3 2.6.0

package/src/element-plus/input-number/InputNumber.vue

@@ -0,0 +1,150 @@
+<template>
+    <div class="tnxel-input-number" :class="containerClassObject">
+        <el-input-number ref="input" class="flex-grow-1" :class="{'rounded-end-0': suffix, 'text-start': !controls}"
+                         v-model="model"
+                         :min="min" :max="max"
+                         :controls="controls" controls-position="right"
+                         :placeholder="placeholderText" :disabled="disabled"
+                         :step="step || Math.pow(10, -this.scale)" step-strictly
+                         :precision="scale"
+                         :value-on-clear="null"
+                         :size="size"
+                         @change="onChange"
+                         @blur="$emit('blur', $event)"/>
+        <div class="el-input-group__append" v-if="suffix">{{ suffix }}</div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TnxelInputNumber',
+    props: {
+        modelValue: [Number, String],
+        span: Number,
+        min: Number,
+        max: Number,
+        placeholder: {
+            type: String,
+            default: () => '请设置',
+        },
+        disabled: Boolean,
+        append: String,
+        controls: {
+            type: Boolean,
+            default: true,
+        },
+        step: Number,
+        scale: {
+            type: Number,
+            default: 0,
+        },
+        required: Boolean,
+        size: String,
+    },
+    emits: ['update:modelValue', 'blur'],
+    data() {
+        return {
+            model: typeof this.modelValue === 'string' ? Number(this.modelValue) : this.modelValue,
+            showRequiredError: false,
+        }
+    },
+    computed: {
+        placeholderText() {
+            if (this.placeholder) {
+                return this.placeholder;
+            }
+            let text = this.disabled ? '未' : '请';
+            text += this.controls ? '设置' : '输入';
+            return text;
+        },
+        containerClassObject() {
+            let classObject = {
+                'is-error': this.showRequiredError,
+            };
+            if (this.span) {
+                classObject['el-col'] = true;
+                classObject['el-col-' + this.span] = true;
+            }
+            return classObject;
+        },
+        suffix() {
+            if (this.append) {
+                return this.append;
+            }
+            if (this.$slots?.append) {
+                let append = this.$slots.append();
+                if (append?.length) {
+                    return append[0].text;
+                }
+            }
+            return null;
+        }
+    },
+    watch: {
+        model(value) {
+            this.$emit('update:modelValue', value);
+        },
+        modelValue(value) {
+            this.model = typeof value === 'string' ? Number(value) : value;
+        }
+    },
+    methods: {
+        validateRequired(focusError) {
+            if (this.required) {
+                this.showRequiredError = this.model === undefined || this.model === null || this.model === '';
+                if (this.showRequiredError && focusError) {
+                    this.focus();
+                }
+                return !this.showRequiredError;
+            }
+            return true;
+        },
+        focus() {
+            this.$refs.input.focus();
+        },
+        onChange() {
+            this.validateRequired(false);
+        },
+    }
+}
+</script>
+
+<style>
+.tnxel-input-number {
+    display: flex;
+}
+
+.tnxel-input-number .el-input-number {
+    width: auto;
+    line-height: 1;
+}
+
+.tnxel-input-number .el-input__inner {
+    min-width: 50px;
+}
+
+.tnxel-input-number .el-input-number.text-start .el-input__inner {
+    text-align: left;
+}
+
+.tnxel-input-number .el-input-number.is-controls-right .el-input__wrapper {
+    padding-left: 8px;
+}
+
+.tnxel-input-number .el-input-number .el-input__wrapper .el-input__suffix {
+    display: none;
+}
+
+.tnxel-input-number .el-input-number.rounded-end-0 .el-input__wrapper {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.tnxel-input-number .el-input-group__append {
+    border: 1px solid var(--el-border-color);
+    border-left: none;
+    line-height: 1;
+    border-top-right-radius: var(--el-input-border-radius, var(--el-border-radius-base));
+    border-bottom-right-radius: var(--el-input-border-radius, var(--el-border-radius-base));
+}
+</style>

package/src/element-plus/paged/Paged.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class="tnxel-pagination-container"
+         :class="{'justify-content-center': align === 'center', 'justify-content-end': align === 'right'}" v-if="model">
+        <slot :paged="value" :change="change" :background="background">
+            <el-pagination layout="total, slot, prev, pager, next" :background="background" @current-change="change"
+                           v-model:page-size="model.pageSize" v-model:current-page="model.pageNo"
+                           :total="model.total || 0">
+                <span class="el-pagination__page-size" v-if="pageSizeItems.length <= 1">{{ model.pageSize }}条/页</span>
+                <tnxel-select class="el-pagination__page-size" v-model="model.pageSize" :items="pageSizeItems" v-else/>
+            </el-pagination>
+        </slot>
+    </div>
+</template>
+
+<script>
+import Select from '../select/Select.vue';
+
+export default {
+    name: 'TnxelPaged',
+    components: {
+        'tnxel-select': Select,
+    },
+    props: {
+        value: Object,
+        change: {
+            type: Function
+        },
+        background: {
+            type: Boolean,
+            default: true,
+        },
+        align: String,
+        pageSizes: Array,
+    },
+    data() {
+        return {
+            model: this.value,
+        }
+    },
+    watch: {
+        value() {
+            this.model = this.value;
+        }
+    },
+    computed: {
+        pageSizeItems() {
+            let pageSizeItems = [];
+            if (this.pageSizes) {
+                for (let pageSize of this.pageSizes) {
+                    pageSizeItems.push({
+                        value: pageSize,
+                        text: pageSize + '条/页',
+                    });
+                }
+            }
+            return pageSizeItems;
+        }
+    },
+}
+</script>
+
+<style>
+.tnxel-pagination-container {
+    display: flex;
+    padding: 0.5rem 0;
+}
+
+.tnxel-pagination-container .el-pagination {
+    padding: 0;
+}
+
+.tnxel-pagination-container .el-pagination__page-size {
+    color: var(--el-text-color-regular);
+    margin-right: 1rem;
+}
+</style>

package/src/element-plus/permission-tree/PermissionTree.vue

@@ -0,0 +1,184 @@
+<template>
+    <el-tree class="permission-tree"
+        ref="tree"
+        :data="nodes"
+        :default-expand-all="true"
+        :expand-on-click-node="false"
+        node-key="id"
+        :style="{'max-height': maxHeight}"
+    >
+        <template #default="{node, data}">
+            <div class="permission-node">
+                <el-checkbox v-model="data.checked" v-if="data.permission" @change="()=>{
+                    onCheckChange(data);
+                }">{{ data.label }}
+                </el-checkbox>
+                <span v-else-if="node">{{ data.label }}</span>
+                <span class="text-muted" :class="{'d-none': !data.remark}">({{ data.remark }})</span>
+            </div>
+        </template>
+    </el-tree>
+</template>
+
+<script>
+function isChecked(app, permissions, permission) {
+    if (permission && permissions) {
+        if (app) {
+            permission = app + '.' + permission;
+        }
+        return permissions.contains(permission);
+    }
+    return false;
+}
+
+function addMenuItemToTreeNodes(app, parentId, menuItems, treeNodes, permissions) {
+    for (let i = 0; i < menuItems.length; i++) {
+        const item = menuItems[i];
+        if (item.caption) { // 有显示名称才可进行权限分配，否则只是一个隐藏的菜单项
+            let node = {
+                id: (parentId || 'node') + '-' + i,
+                parentId: parentId,
+                label: item.caption,
+                path: item.path,
+                permission: item.permission,
+                checked: isChecked(app, permissions, item.permission),
+                remark: item.desc || item.permissionCaption,
+            };
+            if (item.subs && item.subs.length) {
+                node.children = node.children || [];
+                addMenuItemToTreeNodes(app, node.id, item.subs, node.children, permissions);
+            }
+            treeNodes.push(node);
+        }
+    }
+}
+
+function getTreeNodes(menu, permissions) {
+    const nodes = [];
+    if (menu) {
+        let items = menu.getAssignableItems();
+        addMenuItemToTreeNodes(menu.app, undefined, items, nodes, permissions);
+    }
+    return nodes;
+}
+
+function addCheckedNodePermissionTo(app, nodes, permissions) {
+    for (let node of nodes) {
+        if (node.checked && node.permission) {
+            let permission = node.permission;
+            if (app) {
+                permission = app + '.' + permission;
+            }
+            permissions.push(permission);
+        }
+        if (node.children) {
+            addCheckedNodePermissionTo(app, node.children, permissions);
+        }
+    }
+}
+
+function setCheckdByPermission(nodes, permission, checked) {
+    if (nodes && permission) {
+        for (let node of nodes) {
+            if (node.permission === permission) {
+                node.checked = checked;
+            }
+            setCheckdByPermission(node.children, permission, checked);
+        }
+    }
+}
+
+export default {
+    name: 'TnxelPermissionTree',
+    props: {
+        menu: {
+            type: Object,
+            required: true,
+        },
+        permissions: Array,
+        maxHeight: String,
+    },
+    data() {
+        return {
+            nodes: getTreeNodes(this.menu, this.permissions)
+        };
+    },
+    watch: {
+        menu(menu) {
+            this.nodes = getTreeNodes(menu, this.permissions);
+        },
+        permissions(permissions) {
+            this.nodes = getTreeNodes(this.menu, permissions);
+        }
+    },
+    methods: {
+        getNode(nodeId, nodes) {
+            if (nodeId) {
+                nodes = nodes || this.nodes;
+                for (let node of nodes) {
+                    if (node.id === nodeId) {
+                        return node;
+                    }
+                    if (node.children) {
+                        let child = this.getNode(nodeId, node.children);
+                        if (child) {
+                            return child;
+                        }
+                    }
+                }
+            }
+            return undefined;
+        },
+        onCheckChange(node) {
+            if (node.checked) { // 节点被选中，则上级节点必须选中
+                let parentNode = this.getNode(node.parentId);
+                if (parentNode) {
+                    parentNode.checked = true;
+                    setCheckdByPermission(this.nodes, parentNode.permission, true);
+                }
+            } else { // 节点未选中，则下级节点必须全部未选中
+                if (node.children) {
+                    node.children.forEach(child => {
+                        child.checked = false;
+                        setCheckdByPermission(this.nodes, child.permission, false);
+                    });
+                }
+            }
+            setCheckdByPermission(this.nodes, node.permission, node.checked);
+        },
+        getPermissions(withApp) {
+            // 除非指定不附带app，否则默认根据菜单中配置的app进行附带
+            let app = this.menu.app;
+            if (withApp === false) {
+                app = null;
+            }
+
+            const permissions = [];
+            addCheckedNodePermissionTo(app, this.nodes, permissions);
+            return permissions;
+        }
+    }
+}
+</script>
+
+<style>
+.permission-tree {
+    overflow-y: auto;
+    padding: 4px;
+}
+
+.permission-tree .permission-node {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.permission-tree .permission-node > :last-child {
+    margin-left: 6px;
+    margin-right: 6px;
+    white-space: normal;
+    line-height: 1;
+    text-align: right;
+}
+</style>

package/src/element-plus/query-form/QueryForm.vue

@@ -0,0 +1,138 @@
+<template>
+    <el-form :id="id" :inline="inline" :model="params" :class="theme ? ('theme-' + theme) : null">
+        <slot></slot>
+        <el-form-item class="me-0" v-if="queryText || clearText">
+            <tnxel-button :type="theme || 'primary'" icon="Search" @click="toQuery" :plain="plain"
+                          v-if="queryText">
+                {{ queryText }}
+            </tnxel-button>
+            <el-button @click="toClear" :plain="plain" title="清空查询条件" v-if="clearText">{{ clearText }}</el-button>
+        </el-form-item>
+    </el-form>
+</template>
+
+<script>
+import {ObjectUtil} from '@truenewx/tnxcore/src/tnxcore-util';
+import Button from '../button/Button.vue';
+
+export default {
+    name: 'TnxelQueryForm',
+    components: {
+        'tnxel-button': Button,
+    },
+    props: {
+        id: String,
+        modelValue: {
+            type: Object,
+            default() {
+                return {};
+            },
+        },
+        theme: String,
+        query: Function,
+        queryText: {
+            type: String,
+            default: '查询',
+        },
+        clearText: {
+            type: String,
+            default: '清空',
+        },
+        clear: Function,
+        plain: {
+            type: Boolean,
+            default: true,
+        },
+        init: { // 是否初始化执行查询
+            type: Boolean,
+            default: false,
+        },
+        inline: {
+            type: Boolean,
+            default: true,
+        }
+    },
+    emits: ['update:modelValue'],
+    data() {
+        return {
+            params: this.modelValue,
+        }
+    },
+    computed: {
+        cacheKey() {
+            let key = this.$options.name;
+            if (this.id) {
+                key += '-' + this.id;
+            }
+            return key;
+        }
+    },
+    watch: {
+        modelValue() {
+            this.params = this.modelValue;
+            this.cacheParams();
+        }
+    },
+    mounted() {
+        let vm = this;
+        setTimeout(function () {
+            let queryable = vm.init;
+            if (vm.$route.meta.isHistory()) {
+                queryable = true; // 历史性访问均需要执行查询
+                let params = vm.$route.meta.cache[vm.cacheKey];
+                if (params) {
+                    let keys = Object.keys(vm.params);
+                    for (let key of keys) {
+                        let value = params[key];
+                        if (value !== undefined) {
+                            vm.params[key] = value;
+                        }
+                    }
+                }
+            }
+            if (queryable) {
+                vm.toQuery();
+            }
+        });
+    },
+    methods: {
+        cacheParams() {
+            if (typeof this.params.pageNo === 'string') {
+                this.params.pageNo = parseInt(this.params.pageNo);
+            }
+            this.$route.meta.cache[this.cacheKey] = this.params;
+        },
+        toQuery(event) { // 为了避免传递事件参数，不直接使用query()
+            if (this.query) {
+                // event不为空，说明方法调用来自于查询按钮点击，此时如果查询参数中有页码，则需重置页码为1
+                if (event && this.params.pageNo !== undefined) {
+                    this.params.pageNo = 1;
+                }
+                this.cacheParams();
+                this.query();
+            }
+        },
+        toClear() {
+            if (Object.keys(this.params).length) {
+                if (this.clear) {
+                    if (this.clear(this.params) === false) {
+                        return;
+                    }
+                } else {
+                    ObjectUtil.clear(this.params, ['pageSize', 'pageNo', 'ignoring', 'orderBy']);
+                    if (ObjectUtil.isNotNull(this.params.pageNo)) {
+                        this.params.pageNo = 1;
+                    }
+                }
+                this.$emit('update:modelValue', this.params);
+                let parameters = window.tnx.util.net.getParameters();
+                if (Object.keys(parameters).length) {
+                    this.$router.replace(this.$route.path);
+                } else {
+                    this.toQuery();
+                }
+            }
+        }
+    }
+}
+</script>