@truenewx/tnxvue3 3.4.0 → 3.4.2

package/src/element-plus/select/Select.vue

@@ -101,11 +101,9 @@
         :size="size"
         @command="onDropdownCommand"
         v-else-if="selector === 'dropdown'">
-        <el-button style="width: 100%" :type="theme">
-            <div class="d-flex justify-content-between">
-                <span class="me-2">{{ currentText }}</span>
-                <tnxel-icon value="ArrowDown"/>
-            </div>
+        <el-button style="max-width: 100%" :type="theme" :title="currentText">
+            <span class="flex-1 overflow-ellipsis me-2">{{ currentText }}</span>
+            <tnxel-icon value="ArrowDown"/>
         </el-button>
         <template #dropdown v-if="items && items.length">
             <el-dropdown-menu>
@@ -273,7 +271,7 @@ export default {
                 if (util.object.isNotEmpty(newValue) || util.object.isNotEmpty(oldValue)) {
                     let vm = this;
                     // 确保变更事件在值变更应用后再触发
-                    this.$nextTick(function () {
+                    this.$nextTick(() => {
                         vm.triggerChange(newValue);
                     });
                 }
@@ -414,7 +412,7 @@ export default {
             if (this.isMulti()) {
                 let index = this.model.indexOf(value);
                 if (index >= 0) {
-                    this.model = this.model.filter(function (e, i) {
+                    this.model = this.model.filter((e, i) => {
                         return i !== index;
                     });
                 } else {
@@ -542,4 +540,10 @@ export default {
     color: var(--el-color-primary);
     font-weight: 600;
 }
+
+.tnxel-dropdown .el-button > span {
+    max-width: 100%;
+    display: flex;
+    align-items: center;
+}
 </style>

package/src/element-plus/steps-nav/StepsNav.vue

@@ -34,10 +34,9 @@ export default {
     },
     mounted() {
         this.topOffset = $('#' + this.id).offset().top - $(this.container).offset().top - 16;
-        let vm = this;
-        $('#' + this.id + ' .el-step').each(function (index, step) {
-            $(step).click(function () {
-                vm.navTo(index);
+        $('#' + this.id + ' .el-step').each((index, step) => {
+            $(step).click(() => {
+                this.navTo(index);
             });
         });
     },

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

@@ -7,6 +7,7 @@ import ElementPlus_zh_CN from 'element-plus/es/locale/lang/zh-cn';
 import tnxbs from '@truenewx/tnxcore/src/tnxbs'; // 二次封装组件中使用了Bootstrap的基础样式
 import tnxvue from '../tnxvue.js';
 
+import CaptchaVerify from './aj-captcha/Verify.vue';
 import Avatar from './avatar/Avatar.vue';
 import Alert from './alert/Alert.vue';
 import Button from './button/Button.vue';
@@ -53,8 +54,10 @@ export const build = tnxvue.build;
 
 export default build('tnxel', () => {
     const components = Object.assign({}, tnxvue.components, {
-        Avatar,
+        CaptchaVerify, // 只使用了ElementPlus的图标
+
         Alert,
+        Avatar,
         Button,
         CheckIcon,
         CloseErrorButton,
@@ -142,22 +145,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 +207,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 +250,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 +260,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 +319,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 +343,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);
+    }
+
+}