@truenewx/tnxvue3 2.6.0

package/src/element-plus/avatar/Avatar.vue

@@ -0,0 +1,124 @@
+<template>
+    <el-image :class="shape === 'square' ? 'rounded' : 'rounded-circle'" :style="style" :src="src"
+              :preview-src-list="previewSrcList" v-if="preview && src">
+        <template #error>
+            <div class="text-muted h-100 flex-center">
+                <i class="el-icon-picture-outline"/>
+            </div>
+        </template>
+    </el-image>
+    <el-avatar :size="size" :style="style" :shape="shape" :src="src" v-else>
+        <tnxel-icon :value="icon" :size="size / 2" style="margin:0" v-if="!src && icon"/>
+    </el-avatar>
+</template>
+
+<script>
+import Icon from '../icon/Icon.vue';
+
+export default {
+    name: 'TnxelAvatar',
+    components: {
+        'tnxel-icon': Icon,
+    },
+    props: {
+        url: String,
+        shape: String,
+        size: {
+            type: Number,
+            required: true,
+        },
+        icon: {
+            type: String,
+            default: 'UserFilled',
+        },
+        preview: {
+            type: Boolean,
+            default: false,
+        }
+    },
+    data() {
+        return {
+            src: null,
+            previewSrcList: null,
+        }
+    },
+    computed: {
+        style() {
+            let style = {
+                'min-width': this.size + 'px',
+                'min-height': this.size + 'px',
+            };
+            if (this.preview && this.src) {
+                Object.assign(style, {
+                    width: this.size + 'px',
+                    height: this.size + 'px',
+                    'font-size': (this.size / 2) + 'px',
+                });
+            } else {
+                style['font-size'] = (this.size / 2) + 'px';
+                if (this.src) {
+                    style['background-color'] = 'transparent';
+                }
+            }
+            return style;
+        }
+    },
+    watch: {
+        url() {
+            this.load();
+        }
+    },
+    created() {
+        this.load();
+    },
+    methods: {
+        load() {
+            if (this.url && this.url.startsWith(window.tnx.fss.PROTOCOL)) {
+                let rpc = window.tnx.app.rpc;
+                let fssConfig = window.tnx.fss.getClientConfig();
+                let vm = this;
+                if (vm.preview) {
+                    rpc.get(fssConfig.contextUrl + '/meta', {
+                        locationUrl: vm.url
+                    }, function (meta) {
+                        vm.src = meta.thumbnailReadUrl;
+                        vm.previewSrcList = [meta.readUrl];
+                    }, {
+                        app: fssConfig.appName,
+                        error(errors) {
+                            console.error(errors[0].message);
+                        }
+                    });
+                } else {
+                    rpc.get(fssConfig.contextUrl + '/read/url', {
+                        locationUrl: vm.url,
+                        thumbnail: true,
+                    }, function (readUrl) {
+                        vm.src = readUrl;
+                    }, {
+                        app: fssConfig.appName,
+                        error(errors) {
+                            console.error(errors[0].message);
+                        }
+                    });
+                }
+            } else {
+                this.src = this.url;
+            }
+        }
+    }
+}
+</script>
+
+<style>
+.el-avatar,
+.el-avatar .el-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.el-avatar img {
+    background-color: white;
+}
+</style>

package/src/element-plus/button/Button.vue

@@ -0,0 +1,184 @@
+<template>
+    <el-tooltip :content="tooltipContent" :placement="tooltipPlacement" :disabled="disabled || !tooltipContent"
+                v-if="disabled === false || disabledTip !== false">
+        <el-dropdown split-button :type="type" :class="className" :disabled="disabled" :title="title" :size="size"
+                     :style="$attrs.style" @click="clickButton" @command="clickItem" v-if="dropdownItems.length">
+            <i :class="icon" style="margin-right: 0.5rem;" v-if="icon"></i>
+            <template v-if="!hiddenCaption">
+                <slot v-if="$slots.default"></slot>
+                <template v-else-if="menuItem">{{ menuItem.caption }}</template>
+            </template>
+            <template #dropdown>
+                <el-dropdown-menu>
+                    <el-dropdown-item v-for="dropdownItem of dropdownItems" :key="dropdownItem.path"
+                                      :icon="dropdownItem.icon" :disabled="dropdownItem.disabled"
+                                      :title="dropdownItem.title"
+                                      :command="dropdownItem">
+                        {{ dropdownItem.caption || (dropdownItem.menuItem ? dropdownItem.menuItem.caption : '') }}
+                    </el-dropdown-item>
+                </el-dropdown-menu>
+            </template>
+        </el-dropdown>
+        <el-button :type="type" :class="className" :disabled="disabled" :title="title" @click="clickButton" :size="size"
+                   :loading="loading" :plain="plain" :link="link" :text="text" :bg="bg" :autofocus="autofocus"
+                   :round="round"
+                   :circle="circle" :style="$attrs.style" v-else>
+            <tnxel-icon :value="icon" v-if="icon"/>
+            <span v-if="!hiddenCaption && ($slots.default || menuItem)">
+                <slot>{{ menuItem ? menuItem.caption : '' }}</slot>
+            </span>
+        </el-button>
+    </el-tooltip>
+</template>
+
+<script>
+import Icon from '../icon/Icon.vue';
+
+export default {
+    name: 'TnxelButton',
+    components: {
+        'tnxel-icon': Icon,
+    },
+    props: {
+        menu: Object,
+        path: String,
+        granted: { // 是否已授权可用，默认不指定，如果指定值，则不再根据menu和path判断是否授权可用
+            type: Boolean,
+            default: null,
+        },
+        click: {
+            type: [Function, Boolean],
+            default: false,
+        },
+        type: String,
+        icon: String,
+        size: String,
+        loading: Boolean,
+        plain: Boolean,
+        link: Boolean,
+        text: Boolean,
+        bg: Boolean,
+        autofocus: Boolean,
+        round: Boolean,
+        circle: Boolean,
+        tooltip: {
+            type: [String, Boolean],
+            default: '',
+        },
+        tooltipPlacement: {
+            type: String,
+            default: 'top',
+        },
+        disabledTip: {
+            type: [String, Boolean],
+            default: '没有操作权限',
+        },
+        hiddenCaption: Boolean,
+        dropdown: [Object, Array],
+    },
+    emits: ['click'],
+    data() {
+        let menuItem = null;
+        if (this.menu && this.path) {
+            menuItem = this.menu.getItemByPath(this.path);
+        }
+        return {
+            menuItem: menuItem,
+            disabled: null,
+            dropdownItems: [],
+        }
+    },
+    computed: {
+        className() {
+            return this.$attrs.class;
+        },
+        tooltipContent() {
+            let content = this.tooltip;
+            if (content === false) {
+                return undefined;
+            }
+            if (typeof content === 'string' && content) {
+                return content;
+            }
+            if (content === true && this.menuItem) {
+                return this.menuItem.desc || this.menuItem.caption;
+            }
+            return undefined;
+        },
+        title() {
+            return this.disabled ? this.disabledTip : this.$attrs.title;
+        }
+    },
+    created() {
+        this.init();
+    },
+    watch: {
+        granted() {
+            this.init();
+        },
+        dropdown() {
+            this.buildDropdownItems();
+        },
+    },
+    methods: {
+        init() {
+            if (this.granted !== null) {
+                this.disabled = !this.granted;
+            } else if (this.menu && this.path) {
+                let vm = this;
+                this.menu.loadGrantedItems(function () {
+                    vm.disabled = !vm.menu.isGranted(vm.path);
+                    vm.buildDropdownItems();
+                });
+            }
+        },
+        buildDropdownItems() {
+            let dropdownItems = [];
+            if (this.dropdown) {
+                let dropdowns = Array.isArray(this.dropdown) ? this.dropdown : [this.dropdown];
+                for (let dropdown of dropdowns) {
+                    let dropdownItem = typeof dropdown === 'string' ? {
+                        path: dropdown
+                    } : (dropdown || {});
+
+                    if (this.menu && dropdownItem.path) {
+                        dropdownItem.disabled = !this.menu.isGranted(dropdownItem.path);
+                        if (dropdownItem.disabled && typeof this.disabledTip === 'string') {
+                            dropdownItem.title = this.disabledTip;
+                        }
+                        dropdownItem.menuItem = this.menu.getItemByPath(dropdownItem.path);
+                    }
+
+                    dropdownItems.push(dropdownItem);
+                }
+            }
+            this.dropdownItems = dropdownItems;
+        },
+        clickButton() {
+            this.clickItem(this);
+        },
+        clickItem(item) {
+            if (!item.disabled) {
+                if (typeof this.click === 'function') {
+                    this.click(item.path);
+                } else if (this.$router && this.click !== true && item.menuItem && item.menuItem.path) {
+                    // click属性为true时执行点击动作而不是跳转
+                    let vm = this;
+                    this.$router.push(item.path).catch(function () {
+                        // 指定路径无法跳转，则触发点击事件
+                        vm.$emit('click', item.path);
+                    });
+                } else { // 触发点击事件兜底
+                    this.$emit('click', item.path);
+                }
+            }
+        }
+    }
+}
+</script>
+
+<style>
+tnxel-button {
+    visibility: hidden;
+}
+</style>

package/src/element-plus/check-icon/CheckIcon.vue

@@ -0,0 +1,61 @@
+<template>
+    <tnxel-icon :value="checked ? trueIcon : falseIcon" class="tnxel-check-icon"
+        :class="'text-' + (checked ? trueTheme : falseTheme)" :size="size" @click="click"/>
+</template>
+
+<script>
+export default {
+    name: 'TnxelCheckIcon',
+    props: {
+        modelValue: Boolean,
+        size: Number,
+        trueIcon: {
+            type: String,
+            default: 'CircleCheckFilled',
+        },
+        falseIcon: {
+            type: String,
+            default: 'CircleCheck',
+        },
+        trueTheme: {
+            type: String,
+            default: 'primary',
+        },
+        falseTheme: {
+            type: String,
+            default: 'secondary',
+        },
+        trigger: {
+            type: Boolean,
+            default: true,
+        }
+    },
+    emits: ['update:modelValue'],
+    data() {
+        return {
+            checked: this.modelValue,
+        }
+    },
+    watch: {
+        modelValue(value) {
+            this.checked = value;
+        },
+        checked(value) {
+            this.$emit('update:modelValue', value);
+        }
+    },
+    methods: {
+        click() {
+            if (this.trigger) {
+                this.checked = !this.checked;
+            }
+        }
+    }
+}
+</script>
+
+<style>
+.tnxel-check-icon {
+    cursor: pointer;
+}
+</style>

package/src/element-plus/close-error-button/CloseErrorButton.vue

@@ -0,0 +1,45 @@
+<template>
+    <el-button type="danger" @click="close()" v-if="text">{{ text }}</el-button>
+</template>
+
+<script>
+export default {
+    name: 'TnxelCloseErrorButton',
+    props: {
+        prev: String,
+    },
+    data() {
+        return {};
+    },
+    computed: {
+        backable() {
+            return this.prev || window.history.length > 2; // 前两个为新标签页和当前页，需排除
+        },
+        closeable() {
+            return window.opener !== undefined && window.opener !== null;
+        },
+        text() {
+            if (this.backable) {
+                return '返回';
+            }
+            if (this.closeable) {
+                return '关闭';
+            }
+            return undefined;
+        },
+    },
+    methods: {
+        close() {
+            if (this.backable) {
+                if (this.prev) {
+                    window.location.href = this.prev;
+                } else {
+                    window.history.back();
+                }
+            } else if (this.closeable) {
+                window.close();
+            }
+        },
+    }
+}
+</script>

package/src/element-plus/curd/Curd.vue

@@ -0,0 +1,224 @@
+<template>
+    <el-col :span="span">
+        <el-button :type="btnType" :icon="btnIcon" @click="toAdd" v-if="addable">{{ addText }}</el-button>
+        <el-table :data="list" border stripe v-if="showEmpty || (list && list.length)">
+            <slot></slot>
+            <el-table-column label="操作" header-align="center" align="center"
+                :width="util.string.getPixelString(actionWidth)" v-if="updatable || removable">
+                <template #default="scope">
+                    <slot name="actionPrepend" :$index="scope.$index" :row="scope.row" :column="scope.column"></slot>
+                    <el-button type="primary" link @click="toUpdate(scope.$index)" v-if="updatable">
+                        {{ updateText }}
+                    </el-button>
+                    <el-button type="primary" link @click="toRemove(scope.$index)" v-if="removable">
+                        {{ removeText }}
+                    </el-button>
+                    <slot name="actionAppend" :$index="scope.$index" :row="scope.row" :column="scope.column"></slot>
+                </template>
+            </el-table-column>
+        </el-table>
+    </el-col>
+</template>
+
+<script>
+export default {
+    name: 'TnxelCurd',
+    props: {
+        page: {
+            type: Object,
+            required: true,
+        },
+        pageProps: Object,
+        modelValue: Array,
+        modelName: String,
+        span: Number,
+        btnType: {
+            type: String,
+            default: 'primary',
+        },
+        btnIcon: String,
+        addable: {
+            type: Boolean,
+            default: true,
+        },
+        addText: {
+            type: String,
+            default: '新增',
+        },
+        add: Function,
+        updatable: {
+            type: Boolean,
+            default: true,
+        },
+        updateText: {
+            type: String,
+            default: '修改',
+        },
+        update: Function,
+        removable: {
+            type: Boolean,
+            default: true,
+        },
+        removeText: {
+            type: String,
+            default: '移除',
+        },
+        remove: Function,
+        formatter: Function,
+        order: [String, Function],
+        showEmpty: {
+            type: Boolean,
+            default: false,
+        },
+        toast: {
+            type: Boolean,
+            default() {
+                return null;
+            }
+        },
+        actionWidth: {
+            type: [String, Number],
+            default() {
+                return '100px';
+            }
+        }
+    },
+    emits: ['update:modelValue'],
+    data() {
+        return {
+            util: window.tnx.util,
+            list: this.modelValue,
+        }
+    },
+    watch: {
+        list() {
+            this.format();
+            this.$emit('update:modelValue', this.list);
+        },
+        modelValue(modelValue) {
+            this.list = modelValue;
+            this.format();
+        }
+    },
+    methods: {
+        format() {
+            if (this.formatter && this.list && this.list.length) {
+                for (let i = 0; i < this.list.length; i++) {
+                    this.list[i] = this.formatter(this.list[i]);
+                }
+            }
+        },
+        toAdd() {
+            let vm = this;
+            window.tnx.open(this.page, this.pageProps, {
+                title: vm.addText + (vm.modelName || ''),
+                click: function(yes, close) {
+                    if (yes) {
+                        if (typeof this.validateForm === 'function') {
+                            this.validateForm(function(model) {
+                                if (vm.add) {
+                                    vm.add(model, function() {
+                                        vm._onAdded(model, close);
+                                    });
+                                } else {
+                                    vm._onAdded(model, close);
+                                }
+                            });
+                            return false;
+                        }
+                    }
+                }
+            });
+        },
+        _onAdded(model, close) {
+            this.list = this.list || [];
+            this.list.push(model);
+            this._sort();
+            if (this.toast === true || (this.toast !== false && this.add)) {
+                window.tnx.toast(this.addText + '成功');
+            }
+            close();
+        },
+        _sort() {
+            let sort = this.order;
+            if (typeof sort === 'string') {
+                let array = sort.split(' ');
+                let orderBy = array[0].trim();
+                let desc = array[1] === 'desc';
+                sort = function(o1, o2) {
+                    let v1 = o1[orderBy];
+                    let v2 = o2[orderBy];
+                    if (v1 < v2) {
+                        return desc ? 1 : -1;
+                    } else if (v1 === v2) {
+                        return 0;
+                    } else {
+                        return desc ? -1 : 1;
+                    }
+                }
+            }
+            if (typeof sort === 'function') {
+                this.list.sort(sort);
+            }
+        },
+        toUpdate(index) {
+            let model = Object.assign({}, this.list[index]);
+            if (model) {
+                let vm = this;
+                window.tnx.open(this.page, {
+                    modelValue: model
+                }, {
+                    title: vm.updateText + (vm.modelName || ''),
+                    click: function(yes, close) {
+                        if (yes) {
+                            if (typeof this.validateForm === 'function') {
+                                this.validateForm(function(model) {
+                                    if (vm.update) {
+                                        vm.update(index, model, function() {
+                                            vm._onUpdated(index, model, close);
+                                        });
+                                    } else {
+                                        vm._onUpdated(index, model, close);
+                                    }
+                                });
+                                return false;
+                            } else {
+                                vm._onUpdated(index, model, close);
+                            }
+                        }
+                    }
+                });
+            }
+        },
+        _onUpdated(index, model, close) {
+            Object.assign(this.list[index], model);
+            this._sort();
+            if (this.toast === true || (this.toast !== false && this.update)) {
+                window.tnx.toast(this.updateText + '成功');
+            }
+            close();
+        },
+        toRemove(index) {
+            let vm = this;
+            let modelName = this.modelName ? ('该' + this.modelName) : '';
+            window.tnx.confirm('确定要' + this.removeText + modelName + '吗？', function(yes) {
+                if (yes) {
+                    if (vm.remove) {
+                        vm.remove(index, function() {
+                            vm._onRemoved(index);
+                        });
+                    } else {
+                        vm._onRemoved(index);
+                    }
+                }
+            });
+        },
+        _onRemoved(index) {
+            this.list.splice(index, 1);
+            if (this.toast === true || (this.toast !== false && this.remove)) {
+                window.tnx.toast(this.removeText + '成功');
+            }
+        }
+    }
+}
+</script>