@truenewx/tnxvue3 3.4.0 → 3.4.1

package/src/element-plus/submit-form/SubmitForm.vue

@@ -100,11 +100,10 @@ export default {
     mounted() {
         this.initRules();
 
-        let vm = this;
-        this.$nextTick(function () {
-            let container = $(vm.container);
+        this.$nextTick(() => {
+            let container = $(this.container);
             if (container.length) {
-                vm.topOffset = $('#' + vm.id).offset().top - container.offset().top - 16;
+                this.topOffset = $('#' + this.id).offset().top - container.offset().top - 16;
             }
         });
     },
@@ -112,18 +111,17 @@ export default {
         initRules() {
             if (this.rules) {
                 if (typeof this.rules === 'string') {
-                    const vm = this;
-                    window.tnx.app.rpc.getMeta(this.rules, meta => {
-                        if (vm.rulesLoaded) {
-                            vm.rulesLoaded(meta.$rules);
+                    window.tnx.app.rpc.getMeta(this.rules, this.rulesApp).then(meta => {
+                        if (this.rulesLoaded) {
+                            this.rulesLoaded(meta.$rules);
                         } else {
-                            vm.$emit('rules-loaded', meta.$rules);
+                            this.$emit('rules-loaded', meta.$rules);
                         }
-                        vm.validationRules = meta.$rules;
+                        this.validationRules = meta.$rules;
                         delete meta.$rules;
                         this.$emit('meta', meta);
-                        vm.fieldNames = Object.keys(meta);
-                    }, this.rulesApp);
+                        this.fieldNames = Object.keys(meta);
+                    });
                 } else {
                     this.validationRules = {};
                     Object.keys(this.rules).forEach(fieldName => {
@@ -166,28 +164,29 @@ export default {
                 this.$refs.form.scrollToField(fieldName);
             }
         },
-        validate(callback, errorFocus) {
-            let _this = this;
-            this.$refs.form.validate().then(function () {
-                if (typeof callback === 'function') {
-                    callback(true);
-                }
-            }).catch(function (errors) {
-                if (_this.errorFocus && errorFocus !== false) {
-                    _this.$nextTick(function () {
-                        _this.focusError.call(_this, errors);
+        validate() {
+            return new Promise((resolve) => {
+                if (this.$refs.form) {
+                    this.$refs.form.validate((valid) => {
+                        resolve(valid);
                     });
-                }
-                if (typeof callback === 'function') {
-                    callback(false);
+                } else if (this.rules) {
+                    const validator = new AsyncValidator(this.rules);
+                    validator.validate(this.model).then(() => {
+                        resolve(true);
+                    }).catch(() => {
+                        resolve(false);
+                    });
+                } else {
+                    resolve(true);
                 }
             });
         },
         validateField(props, callback, errorFocus) {
             let _this = this;
-            this.$refs.form.validateField(props, function (errorMessage) {
+            this.$refs.form.validateField(props, (errorMessage) => {
                 if (errorMessage && _this.errorFocus && errorFocus !== false) {
-                    _this.$nextTick(function () {
+                    _this.$nextTick(() => {
                         _this.focusError.call(_this);
                     });
                 }
@@ -200,17 +199,16 @@ export default {
             this.$refs.form.clearValidate(props);
         },
         toSubmit(callback, disabled) {
-            const vm = this;
-            this.validate(function (success) {
+            this.validate().then(success => {
                 if (success) {
                     if (typeof callback !== 'function') {
-                        callback = vm.submit;
+                        callback = this.submit;
                     }
                     if (typeof callback === 'function') {
                         if (disabled !== false) {
-                            vm.disable();
+                            this.disable();
                         }
-                        callback(vm);
+                        callback(this);
                     }
                 }
             });
@@ -229,12 +227,14 @@ export default {
         },
         /**
          * 执行所有的校验规则，以自定义方式处理错误
-         * @param callback 校验后的回调函数，首个参数为错误消息字符串数组，没有错误时为null
          * @param fieldLabels 字段标签，可以是一个函数，也可以是一个对象，用于自定义错误消息中的字段标签
+         * @returns Promise<string[]|null> 错误消息字符串数组，没有错误时为null
          */
-        validateRules(callback, fieldLabels) {
+        validateRules(fieldLabels) {
             let validator = new AsyncValidator(this.validationRules);
-            validator.validate(this.model, function (errors) {
+            return validator.validate(this.model).then(() => {
+                return null;
+            }).catch((errors) => {
                 let messages = [];
                 if (errors) {
                     for (let error of errors) {
@@ -248,10 +248,7 @@ export default {
                         messages.push(fieldLabel + error.message);
                     }
                 }
-                if (messages.length === 0) {
-                    messages = null;
-                }
-                callback(messages);
+                return messages.length === 0 ? null : messages;
             });
         }
     }

package/src/element-plus/tabs/Tabs.vue

@@ -64,7 +64,7 @@ export default {
             let cache = this.getCache();
             if (cache) {
                 let vm = this;
-                setTimeout(function () {
+                setTimeout(() => {
                     if (vm.$route.meta.isHistory()) {
                         let model = cache[vm.id];
                         if (model) {

package/src/element-plus/tnxel.css

@@ -882,3 +882,25 @@ i svg {
     word-break: break-all;
     overflow-wrap: break-word;
 }
+
+.link {
+    color: var(--el-color-primary);
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.link:hover {
+    color: var(--el-color-primary-light-5);
+}
+
+.is-disabled .link {
+    color: var(--el-color-primary-light-5);
+    cursor: not-allowed;
+}
+
+.el-input-group__append div.el-select .el-select__wrapper,
+.el-input-group__append div.el-select:hover .el-select__wrapper,
+.el-input-group__prepend div.el-select .el-select__wrapper,
+.el-input-group__prepend div.el-select:hover .el-select__wrapper {
+    background-color: var(--el-color-white);
+}

package/src/element-plus/tnxel.js

@@ -142,22 +142,24 @@ export default build('tnxel', () => {
             window.tnx.dialogInstances.push(dialog);
             return dialog;
         },
-        closeDialog(all, callback) {
-            if (typeof all === 'function') {
-                callback = all;
-                all = false;
-            }
-            if (window.tnx.dialogInstances.length) {
-                let dialog = window.tnx.dialogInstances.pop();
-                while (dialog) {
-                    dialog.close(callback);
-                    if (all) {
-                        dialog = window.tnx.dialogInstances.pop();
-                    } else {
-                        break;
+        closeDialog(all) {
+            return new Promise((resolve) => {
+                if (window.tnx.dialogInstances.length) {
+                    let dialog = window.tnx.dialogInstances.pop();
+                    let promises = [];
+                    while (dialog) {
+                        promises.push(dialog.close());
+                        if (all) {
+                            dialog = window.tnx.dialogInstances.pop();
+                        } else {
+                            break;
+                        }
                     }
+                    Promise.all(promises).then(resolve);
+                } else {
+                    resolve();
                 }
-            }
+            });
         },
         drawerInstances: [], // 抽屉堆栈
         drawer(content, title, buttons, options, contentProps) {
@@ -202,29 +204,31 @@ export default build('tnxel', () => {
             window.tnx.drawerInstances.push(drawer);
             return drawer;
         },
-        closeDrawer(all, callback) {
-            if (typeof all === 'function') {
-                callback = all;
-                all = false;
-            }
-            if (window.tnx.drawerInstances.length) {
-                let drawer = window.tnx.drawerInstances.pop();
-                while (drawer) {
-                    drawer.close(callback);
-                    if (all) {
-                        drawer = window.tnx.drawerInstances.pop();
-                    } else {
-                        break;
+        closeDrawer(all) {
+            return new Promise((resolve) => {
+                if (window.tnx.drawerInstances.length) {
+                    let drawer = window.tnx.drawerInstances.pop();
+                    let promises = [];
+                    while (drawer) {
+                        promises.push(drawer.close());
+                        if (all) {
+                            drawer = window.tnx.drawerInstances.pop();
+                        } else {
+                            break;
+                        }
                     }
+                    Promise.all(promises).then(resolve);
+                } else {
+                    resolve();
                 }
-            }
+            });
         },
         _closeMessage() {
             ElMessage.closeAll();
             this.closeLoading();
         },
         _handleZIndex(selector) {
-            setTimeout(function () {
+            setTimeout(() => {
                 const topZIndex = window.tnx.util.dom.minTopZIndex(2);
                 if (selector.endsWith(':last')) {
                     selector = selector.substring(0, selector.length - ':last'.length);
@@ -243,11 +247,9 @@ export default build('tnxel', () => {
                 }
             });
         },
-        alert(message, title, callback, options) {
-            this.closeLoading();
-            if (typeof title === 'function') {
-                options = callback;
-                callback = title;
+        alert(message, title, options) {
+            if (typeof title === 'object') {
+                options = title;
                 title = '提示';
             }
             options = Object.assign({
@@ -255,46 +257,45 @@ export default build('tnxel', () => {
                 type: 'warning',
                 confirmButtonText: '确定',
             }, options);
-            this.closeLoading();
-            ElMessageBox.alert(message, title || '提示', options).then(callback);
+            this._closeMessage();
+            const promise = ElMessageBox.alert(message, title || '提示', options);
             this._handleZIndex('.el-message-box__wrapper:last');
             this.app.eventBus.emit('tnx.alert', options);
+            return promise;
         },
-        success(message, callback, options) {
-            this.closeLoading();
+        success(message, options) {
             options = Object.assign({
                 dangerouslyUseHTMLString: true,
             }, options, {
                 type: 'success',
                 confirmButtonText: '确定',
             });
-            this.closeLoading();
-            ElMessageBox.alert(message, '成功', options).then(callback);
+            this._closeMessage();
+            const promise = ElMessageBox.alert(message, '成功', options);
             this._handleZIndex('.el-message-box__wrapper:last');
             this.app.eventBus.emit('tnx.success', options);
+            return promise;
         },
-        error(message, callback, options) {
-            this.closeLoading();
+        error(message, options) {
             options = Object.assign({
                 dangerouslyUseHTMLString: true,
             }, options, {
                 type: 'error',
                 confirmButtonText: '确定',
             });
-            this.closeLoading();
-            ElMessageBox.alert(message, '错误', options).then(callback);
+            this._closeMessage();
+            const promise = ElMessageBox.alert(message, '错误', options);
             this._handleZIndex('.el-message-box__wrapper:last');
             this.app.eventBus.emit('tnx.error', options);
             // 打印TypeError对象，便于调试
             if (typeof message === 'object' && message.name === 'TypeError') {
                 console.error(message);
             }
+            return promise;
         },
-        confirm(message, title, callback, options) {
-            this.closeLoading();
-            if (typeof title === 'function') {
-                options = callback;
-                callback = title;
+        confirm(message, title = '确认', options) {
+            if (typeof title === 'object') {
+                options = title;
                 title = '确认';
             }
             options = Object.assign({
@@ -315,29 +316,20 @@ export default build('tnxel', () => {
                 options.confirmButtonText = options.cancelButtonText;
                 options.cancelButtonText = buttonText;
             }
-            if (typeof callback === 'function') {
-                options.callback = function (action) {
-                    let yes = undefined;
-                    if (action === 'confirm') {
-                        yes = !options.reverse;
-                    } else if (action === 'cancel') {
-                        yes = !!options.reverse;
-                    }
-                    callback(yes);
-                }
-            }
-            this.closeLoading();
-            ElMessageBox.confirm(message, title, options);
-            this._handleZIndex('.el-message-box__wrapper:last');
-            this.app.eventBus.emit('tnx.confirm', options);
+
+            this._closeMessage();
+            return new Promise(resolve => {
+                ElMessageBox.confirm(message, title, options).then(() => {
+                    resolve(true);
+                }).catch(() => {
+                    resolve(false);
+                });
+                this._handleZIndex('.el-message-box__wrapper:last');
+                this.app.eventBus.emit('tnx.confirm', options);
+            })
+
         },
-        toast(message, timeout, callback, options) {
-            this.closeLoading();
-            if (typeof timeout === 'function') {
-                options = callback;
-                callback = timeout;
-                timeout = undefined;
-            }
+        toast(message, timeout, options) {
             options = Object.assign({
                 type: 'success', // 默认为成功主题，可更改为其它主题
                 offset: this.util.dom.getDocHeight() * 0.4,
@@ -348,46 +340,62 @@ export default build('tnxel', () => {
                 message: message,
                 duration: timeout || 1500,
                 customClass: 'tnxel-toast',
-                onClose: callback,
             });
+
             this._closeMessage();
-            ElMessage(options);
+            const messageInstance = ElMessage(options);
             this._handleZIndex('.el-message:last');
             this.app.eventBus.emit('tnx.toast', options);
+
+            // 创建一个Promise，在消息关闭时resolve
+            return new Promise((resolve) => {
+                const originalOnClose = options.onClose;
+                options.onClose = () => {
+                    if (originalOnClose) {
+                        originalOnClose();
+                    }
+                    resolve();
+                };
+                // 如果消息实例有close方法，重新设置onClose
+                if (messageInstance && messageInstance.close) {
+                    const originalClose = messageInstance.close;
+                    messageInstance.close = () => {
+                        originalClose.call(messageInstance);
+                        options.onClose();
+                    };
+                }
+            });
         },
-        showLoading(message, callback, options) {
+        showLoading(message, options) {
             if (typeof message !== 'string') {
-                options = callback;
-                callback = message;
+                options = message;
                 message = undefined;
             }
-            if (typeof callback !== 'function') {
-                options = callback;
-                callback = undefined;
-            }
             options = Object.assign({
                 dangerouslyUseHTMLString: true,
             }, options, {
                 text: message,
             });
-            this._closeMessage();
-            try {
-                window.tnx.loadingInstance = ElLoading.service(options);
-                this._handleZIndex('.el-loading-mask');
-                window.tnx.app.eventBus.emit('tnx.showLoading', options);
-                if (callback) {
+            return new Promise((resolve, reject) => {
+                window.tnx._closeMessage();
+                try {
+                    window.tnx.loadingInstance = ElLoading.service(options);
+                    this._handleZIndex('.el-loading-mask');
+                    window.tnx.app.eventBus.emit('tnx.showLoading', options);
                     let vm = window.tnx.loadingInstance.vm;
                     if (vm) {
-                        this.nextTickTimeout(vm, callback, 500);
+                        window.tnx.nextTickTimeout(vm, () => {
+                            resolve(window.tnx.loadingInstance);
+                        }, 500);
                     } else {
-                        callback();
+                        resolve(window.tnx.loadingInstance);
                     }
+                } catch (e) {
+                    window.tnx.loadingInstance = null;
+                    console.error(e);
+                    reject(e);
                 }
-            } catch (e) {
-                window.tnx.loadingInstance = null;
-                console.error(e);
-            }
-            return window.tnx.loadingInstance;
+            });
         },
         closeLoading() {
             if (window.tnx.loadingInstance) { // 确保绝对的单例

package/src/element-plus/toolbar/ToolBarItem.js

@@ -1,15 +1,15 @@
-/**
- * 工具栏项
- */
-export default class ToolBarItem {
-
-    icon = '';
-    caption = '';
-    disabled = false;
-    click = null;
-
-    static from(object) {
-        return Object.assign(new ToolBarItem(), object);
-    }
-
-}
+/**
+ * 工具栏项
+ */
+export default class ToolBarItem {
+
+    icon = '';
+    caption = '';
+    disabled = false;
+    click = null;
+
+    static from(object) {
+        return Object.assign(new ToolBarItem(), object);
+    }
+
+}

package/src/element-plus/toolbar/Toolbar.vue

@@ -1,56 +1,56 @@
-<template>
-    <div class="tnxel-toolbar">
-        <div class="flex-v-center">
-            <template v-for="(item, index) of leftItems" :key="index">
-                <el-divider direction="vertical" v-if="item === '|'"/>
-                <ToolBarItem
-                    :item="Item.from(item)"
-                    :size="size"
-                    v-else-if="typeof item ==='object'"/>
-            </template>
-        </div>
-        <div class="flex-v-center">
-            <ToolBarItem v-for="(item, index) of rightItems" :key="index"
-                :item="Item.from(item)"
-                :size="size"/>
-        </div>
-    </div>
-</template>
-
-<script>
-import ToolBarItem from './ToolBarItem.vue';
-import Item from './ToolBarItem.js';
-
-export default {
-    name: 'TnxelToolbar',
-    components: {ToolBarItem},
-    props: {
-        leftItems: Array,
-        rightItems: Array,
-        size: {
-            type: String,
-            validator: value => {
-                return ['small', 'default', 'large'].includes(value);
-            },
-            default: 'default',
-        },
-    },
-    data() {
-        return {
-            Item,
-            model: {},
-        };
-    },
-    methods: {}
-}
-</script>
-
-<style>
-.tnxel-toolbar {
-    height: 32px;
-    padding: 0 8px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-</style>
+<template>
+    <div class="tnxel-toolbar">
+        <div class="flex-v-center">
+            <template v-for="(item, index) of leftItems" :key="index">
+                <el-divider direction="vertical" v-if="item === '|'"/>
+                <ToolBarItem
+                    :item="Item.from(item)"
+                    :size="size"
+                    v-else-if="typeof item ==='object'"/>
+            </template>
+        </div>
+        <div class="flex-v-center">
+            <ToolBarItem v-for="(item, index) of rightItems" :key="index"
+                :item="Item.from(item)"
+                :size="size"/>
+        </div>
+    </div>
+</template>
+
+<script>
+import ToolBarItem from './ToolBarItem.vue';
+import Item from './ToolBarItem.js';
+
+export default {
+    name: 'TnxelToolbar',
+    components: {ToolBarItem},
+    props: {
+        leftItems: Array,
+        rightItems: Array,
+        size: {
+            type: String,
+            validator: value => {
+                return ['small', 'default', 'large'].includes(value);
+            },
+            default: 'default',
+        },
+    },
+    data() {
+        return {
+            Item,
+            model: {},
+        };
+    },
+    methods: {}
+}
+</script>
+
+<style>
+.tnxel-toolbar {
+    height: 32px;
+    padding: 0 8px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+</style>

package/src/element-plus/transfer/Transfer.vue

@@ -59,23 +59,22 @@ export default {
         }
     },
     created() {
-        let vm = this;
         let params;
         if (typeof this.params === 'function') {
             params = this.params();
         } else {
             params = this.params;
         }
-        window.tnx.app.rpc.get(this.url, params, function(list) {
-            vm.selectable = [];
+        window.tnx.app.rpc.get(this.url, params).then((list) => {
+            this.selectable = [];
             list.forEach(item => {
-                if (vm.formatter) {
-                    vm.formatter(item);
+                if (this.formatter) {
+                    this.formatter(item);
                 }
-                vm.selectable.push({
-                    key: item[vm.keyName],
-                    label: item[vm.labelName],
-                    index: item[vm.indexName],
+                this.selectable.push({
+                    key: item[this.keyName],
+                    label: item[this.labelName],
+                    index: item[this.indexName],
                 });
             });
         });