@truenewx/tnxvue3 3.4.0 → 3.4.2

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],
                 });
             });
         });

package/src/element-plus/upload/Upload.vue

@@ -293,7 +293,7 @@ export default {
             this.files = [].concat(this.fileList);
             let vm = this;
             // 需在vue渲染之后才可正常操作dom元素
-            this.$nextTick(function () {
+            this.$nextTick(() => {
                 // 初始化显示尺寸
                 let width = vm.uploadSize.width;
                 if (width) {
@@ -360,7 +360,7 @@ export default {
             }
             // 校验文件重复
             const vm = this;
-            if (this.files.contains(function (f) {
+            if (this.files.contains((f) => {
                 const raw = f.raw ? f.raw : f;
                 return file.uid !== raw.uid && vm.getFileId(file) === vm.getFileId(raw);
             })) {
@@ -430,7 +430,7 @@ export default {
 
             const vm = this;
             const rpc = this.tnx.app.rpc;
-            return new Promise(function (resolve, reject) {
+            return new Promise((resolve, reject) => {
                 if (vm.validate(file)) {
                     let $upload = $('#' + vm.id + ' .el-upload');
                     if (vm.showFileList && vm.fileNumExceed) {
@@ -438,29 +438,12 @@ export default {
                     }
 
                     // 上传前需确保用户在fss应用中已登录
-                    rpc.ensureLogined(function () {
-                        if (vm.beforeUpload) {
-                            let promise = vm.beforeUpload(file);
-                            if (promise instanceof Promise) {
-                                promise.then(function () {
-                                    resolve(file);
-                                }).catch(function () {
-                                    reject(file);
-                                });
-                            } else if (promise === false) {
-                                reject(file);
-                            } else {
-                                resolve(file);
-                            }
-                        } else {
-                            resolve(file);
-                        }
-                    }, {
+                    rpc.ensureLogined({
                         app: vm.app,
                         toLogin(loginFormUrl, originalUrl, originalMethod) {
                             $upload.css('visibility', 'unset');
                             // 从当前应用登录表单地址
-                            rpc.get('/authentication/login-url', function (loginUrl) {
+                            rpc.get('/authentication/login-url').then(loginUrl => {
                                 if (loginUrl) {
                                     // 默认登录后跳转回当前页面
                                     loginUrl += loginUrl.contains('?') ? '&' : '?';
@@ -473,6 +456,23 @@ export default {
                             });
                             return true;
                         }
+                    }).then(() => {
+                        if (vm.beforeUpload) {
+                            let promise = vm.beforeUpload(file);
+                            if (promise instanceof Promise) {
+                                promise.then(() => {
+                                    resolve(file);
+                                }).catch(() => {
+                                    reject(file);
+                                });
+                            } else if (promise === false) {
+                                reject(file);
+                            } else {
+                                resolve(file);
+                            }
+                        } else {
+                            resolve(file);
+                        }
                     });
                 } else {
                     reject(file);
@@ -557,14 +557,14 @@ export default {
             }
         },
         removeFile(file) {
-            this.files.remove(function (f) {
+            this.files.remove((f) => {
                 return file.uid === f.uid;
             });
             this.$refs.upload.handleRemove(file);
             if (!this.fileNumExceed) {
                 this.handleErrors([]); // 移除一个文件后，此时如果有错误提示则一定为数量超限，需清空错误提示
                 let container = $('#' + this.id);
-                this.$nextTick(function () {
+                this.$nextTick(() => {
                     // 去掉文件列表的样式，以免其占高度
                     $('.el-upload-list', container).removeAttr('style');
                     // 恢复添加框默认样式

package/src/tdesign/desktop/tnxtdd.ts

@@ -0,0 +1,16 @@
+import { App, Component } from 'vue';
+import { Router } from 'vue-router';
+import TnxTd from '../tnxtd';
+import TDesign from 'tdesign-vue-next';
+
+export default class TnxTdd extends TnxTd {
+
+    constructor(apiBaseUrl: string) {
+        super(apiBaseUrl);
+    }
+
+    createVueApp(rootComponent: Component, router: Router, rootProps?: Record<string, any>): App {
+        return super.createVueApp(rootComponent, router, rootProps).use(TDesign);
+    }
+
+}

package/src/tdesign/foundation/validator.ts

@@ -0,0 +1,367 @@
+/**
+ * 校验规则转换器，将服务端元数据中的校验规则转换为validator组件的规则。
+ * validator组件详见：https://github.com/validatorjs/validator.js
+ */
+import validator from 'validator';
+import {Validator} from '../../../../tnxcore/src/tnxcore';
+import {ApiModelPropertyMeta, ApiModelMeta} from '../../../../tnxcore/src/api/meta';
+
+export type ValidateResultType = 'error' | 'warning' | 'success';
+
+export type ValidateResult = {
+    result: boolean;
+    message?: string;
+    type?: ValidateResultType;
+}
+
+export type ValidatorRule = {
+    name?: string;
+    required?: boolean;
+    message?: string;
+    type?: ValidateResultType;
+    trigger?: 'blur' | 'change';
+    validator?: (fieldValue: string) => ValidateResult;
+}
+
+export default class TnxTdValidator extends Validator {
+
+    getRule(validationName: string, validationValue: any, fieldMeta: ApiModelPropertyMeta): ValidatorRule | undefined {
+        let rule: ValidatorRule;
+        let fieldCaption = '';
+        // 据目前观察，字段格式校验的错误消息均显示在字段旁，无需显示字段名称，未来如果出现不在字段旁显示的场景，再考虑扩展
+        // if (fieldMeta && fieldMeta.caption) {
+        //     fieldCaption = fieldMeta.caption;
+        // }
+        switch (validationName) {
+            case 'required':
+            case 'notNull':
+            case 'notEmpty':
+            case 'notBlank':
+                if (validationValue === true) {
+                    rule = {
+                        required: true,
+                        validator(fieldValue: string): ValidateResult {
+                            if (validationValue) {
+                                let blank = fieldValue === undefined || fieldValue === null;
+                                if (!blank && typeof fieldValue === 'string') {
+                                    blank = fieldValue.trim().length === 0;
+                                }
+                                if (blank) {
+                                    let message = this.getErrorMessage(validationName, fieldCaption);
+                                    return {result: false, message, type: 'error'};
+                                }
+                            }
+                            return {result: true};
+                        }
+                    }
+                }
+                break;
+            case 'minLength':
+                rule = {
+                    validator(fieldValue: string): ValidateResult {
+                        if (typeof validationValue === 'number' && typeof fieldValue === 'string') {
+                            let enterLength = fieldValue.indexOf('\n') < 0 ? 0 : (fieldValue.match(/\n/g) as any).length;
+                            let fieldLength = fieldValue.length + enterLength;
+                            if (fieldLength < validationValue) {
+                                let message = this.getErrorMessage(validationName, fieldCaption,
+                                    validationValue, validationValue - fieldLength);
+                                return {result: false, message, type: 'error'};
+                            }
+                        }
+                        return {result: true};
+                    }
+                };
+                break;
+            case 'maxLength':
+                rule = {
+                    validator(fieldValue: string): ValidateResult {
+                        if (typeof validationValue === 'number' && typeof fieldValue === 'string') {
+                            let enterLength = fieldValue.indexOf('\n') < 0 ? 0 : (fieldValue.match(/\n/g) as any).length;
+                            let fieldLength = fieldValue.length + enterLength;
+                            if (fieldLength > validationValue) {
+                                let message = this.getErrorMessage(validationName, fieldCaption,
+                                    validationValue, fieldLength - validationValue);
+                                return {result: false, message, type: 'error'};
+                            }
+                        }
+                        return {result: true};
+                    }
+                };
+                break;
+            case 'number':
+                if (validationValue === true) {
+                    rule = {
+                        validator(fieldValue: string): ValidateResult {
+                            if (fieldValue && typeof fieldValue === 'string') {
+                                if (!validator.isNumeric(fieldValue, {no_symbols: true})) {
+                                    let message = this.getErrorMessage(validationName, fieldCaption);
+                                    return {result: false, message, type: 'error'};
+                                }
+                            }
+                            return {result: true};
+                        }
+                    };
+                }
+                break;
+            case 'notContainsHtmlChars':
+                if (validationValue === true) {
+                    rule = {
+                        validator(fieldValue: string): ValidateResult {
+                            if (typeof fieldValue === 'string') {
+                                let limitedValues = ['<', '>', "'", '"', '\\'];
+                                for (let i = 0; i < limitedValues.length; i++) {
+                                    if (fieldValue.indexOf(limitedValues[i]) >= 0) {
+                                        let s = limitedValues.join(' ');
+                                        let message = this.getErrorMessage('notContains', fieldCaption, s);
+                                        return {result: false, message, type: 'error'};
+                                    }
+                                }
+                            }
+                            return {result: true};
+                        }
+                    };
+                }
+                break;
+            case 'notContainsIllegalFilenameChars':
+                if (validationValue === true) {
+                    rule = {
+                        validator(fieldValue: string): ValidateResult {
+                            if (typeof fieldValue === 'string') {
+                                let limitedValues = ['/', '\\', ':', '*', '?', '"', '<', '>', '|'];
+                                for (let i = 0; i < limitedValues.length; i++) {
+                                    if (fieldValue.indexOf(limitedValues[i]) >= 0) {
+                                        let s = limitedValues.join(' ');
+                                        let message = this.getErrorMessage('notContains', fieldCaption, s);
+                                        return {result: false, message, type: 'error'};
+                                    }
+                                }
+                            }
+                            return {result: true};
+                        }
+                    };
+                }
+                break;
+            case 'notContains':
+                if (validationValue) {
+                    rule = {
+                        validator(fieldValue: string): ValidateResult {
+                            if (typeof fieldValue === 'string') {
+                                let limitedValues = (validationValue as string).split(' ');
+                                for (let i = 0; i < limitedValues.length; i++) {
+                                    if (validator.contains(fieldValue, limitedValues[i])) {
+                                        let message = this.getErrorMessage('notContains', fieldCaption,
+                                            validationValue);
+                                        return {result: false, message, type: 'error'};
+                                    }
+                                }
+                            }
+                            return {result: true};
+                        }
+                    };
+                }
+                break;
+            case 'rejectHtmlTags':
+                if (validationValue === true) {
+                    rule = {
+                        validator(fieldValue: string): ValidateResult {
+                            if (fieldValue) {
+                                if (/<[a-z]+[ ]*[/]?[ ]*>/gi.test(fieldValue)) {
+                                    let message = this.getErrorMessage(validationName, fieldCaption);
+                                    return {result: false, message, type: 'error'};
+                                }
+                            }
+                            return {result: true};
+                        }
+                    };
+                }
+                break;
+            case 'allowedHtmlTags':
+                if (validationValue) {
+                    rule = {
+                        validator(fieldValue: string): ValidateResult {
+                            if (typeof fieldValue === 'string') {
+                                let tags = (validationValue as string).toLowerCase().split(',');
+                                if (tags.length) {
+                                    let value = fieldValue.toLowerCase();
+                                    let leftIndex = value.indexOf('<');
+                                    let rightIndex = leftIndex >= 0 ? value.indexOf('>', leftIndex) : -1;
+                                    while (leftIndex >= 0 && rightIndex >= 0) {
+                                        let sub = value.substring(leftIndex + 1, rightIndex);
+                                        let spaceIndex = sub.indexOf(' ');
+                                        let tag = spaceIndex >= 0 ? sub.substring(0, spaceIndex) : sub;
+                                        if (tag.startsWith('/')) {
+                                            tag = tag.substring(1);
+                                        }
+                                        if (!tags.contains(tag.toLowerCase())) {
+                                            let message = this.getErrorMessage(validationName, fieldCaption,
+                                                tags.join(', '));
+                                            return {result: false, message, type: 'error'};
+                                        }
+                                        leftIndex = value.indexOf('<', rightIndex);
+                                        rightIndex = leftIndex >= 0 ? value.indexOf('>', leftIndex) : -1;
+                                    }
+                                }
+                            }
+                            return {result: true};
+                        }
+                    };
+                }
+                break;
+            case 'forbiddenHtmlTags':
+                if (validationValue) {
+                    rule = {
+                        validator(fieldValue: string): ValidateResult {
+                            if (fieldValue) {
+                                let tags = (validationValue as string).toLowerCase().split(',');
+                                if (tags.length) {
+                                    let value = fieldValue.toLowerCase();
+                                    for (let tag of tags) {
+                                        if (value.includes('<' + tag + '>') || value.includes('<' + tag + ' ')) {
+                                            let message = this.getErrorMessage(validationName, fieldCaption,
+                                                tags.join(', '));
+                                            return {result: false, message, type: 'error'};
+                                        }
+                                    }
+                                }
+                            }
+                            return {result: true};
+                        }
+                    };
+                }
+                break;
+            case 'email':
+                if (validationValue === true) {
+                    rule = {
+                        validator(fieldValue: string): ValidateResult {
+                            if (typeof fieldValue === 'string' && fieldValue) {
+                                if (!validator.isEmail(fieldValue)) {
+                                    let message = this.getErrorMessage(validationName, fieldCaption);
+                                    return {result: false, message, type: 'error'};
+                                }
+                            }
+                            return {result: true};
+                        }
+                    }
+                }
+                break;
+            case 'cellphone':
+            case 'idCardNo':
+            case 'url':
+            case 'opposableUrl':
+                rule = {
+                    validator(fieldValue: string): ValidateResult {
+                        if (validationValue) {
+                            let message = this.validateRegExp(validationName, fieldValue, fieldCaption);
+                            if (message) {
+                                return {result: false, message, type: 'error'};
+                            }
+                        }
+                        return {result: true};
+                    }
+                };
+                break;
+            case 'regex':
+                rule = {
+                    validator(fieldValue: string): ValidateResult {
+                        if (fieldValue) {
+                            let pattern = (validationValue as any).pattern;
+                            if (!pattern.startsWith('^')) {
+                                pattern = '^' + pattern;
+                            }
+                            if (!pattern.endsWith('$')) {
+                                pattern += '$';
+                            }
+                            let regexp = new RegExp(pattern, 'gi');
+                            if (!regexp.test(fieldValue)) {
+                                let message = (validationValue as any).message;
+                                if (message) {
+                                    message = fieldCaption + message;
+                                } else {
+                                    message = this.getErrorMessage('regex', fieldCaption, '');
+                                }
+                                return {result: false, message, type: 'error'};
+                            }
+                        }
+                        return {result: true};
+                    }
+                }
+                break;
+            case 'custom':
+                if (typeof validationValue === 'function') {
+                    rule = {
+                        validator(fieldValue: string): ValidateResult {
+                            let message = validationValue(fieldValue);
+                            if (message) {
+                                return {result: false, message, type: 'error'};
+                            }
+                            return {result: true};
+                        }
+                    }
+                }
+                break;
+        }
+        if (rule) {
+            rule.name = validationName;
+            let metaType = 'text';
+            if (fieldMeta && fieldMeta.type) {
+                metaType = fieldMeta.type.toLowerCase();
+            }
+            let optional = metaType === 'option' || metaType === 'datetime' || metaType === 'date' || metaType === 'time';
+            rule.trigger = optional ? 'change' : 'blur';
+        }
+        return rule;
+    }
+
+    getRules(meta: ApiModelMeta): Record<string, ValidatorRule[]> {
+        let rules: Record<string, ValidatorRule[]> = {};
+        Object.keys(meta).forEach(fieldName => {
+            let fieldMeta = meta[fieldName];
+            if (fieldMeta.validation) {
+                let fieldRules: ValidatorRule[] = [];
+                Object.keys(fieldMeta.validation).forEach(validationName => {
+                    let validationValue = fieldMeta.validation[validationName];
+                    let rule = this.getRule(validationName, validationValue, fieldMeta);
+                    if (rule) {
+                        fieldRules.push(rule);
+                    }
+                });
+                // 将可能包含的引用字段路径中的.替换为__，以符合async-validator规则名称的规范
+                let ruleName = fieldName.replace('.', '__');
+                rules[ruleName] = fieldRules;
+            }
+        });
+        return rules;
+    }
+
+    /**
+     * 用指定规则集校验指定模型中的所有字符串值字段
+     * @return 校验结果错误消息集映射，key-字段名，value-错误消息集，校验通过的不包含在内
+     */
+    validate(rules: Record<string, ValidatorRule[]>, model: Record<string, any>): Record<string, string[]> {
+        let result: Record<string, string[]> = {};
+        if (rules && model) {
+            Object.keys(rules).forEach(fieldName => {
+                const fieldRules = rules[fieldName];
+                if (Array.isArray(fieldRules) && fieldRules.length) {
+                    const messages: string[] = [];
+                    const fieldValue = model[fieldName];
+                    if (typeof fieldValue === 'string') {
+                        for (let rule of fieldRules) {
+                            if (typeof rule.validator === 'function') {
+                                const r = rule.validator(fieldValue);
+                                if (r && r.result !== true && r.message) {
+                                    messages.push(r.message);
+                                }
+                            }
+                        }
+                        if (messages.length > 0) {
+                            result[fieldName] = messages;
+                        }
+                    }
+                }
+            });
+        }
+        return result;
+    }
+
+}

package/src/tdesign/mobile/tnxtdm.ts

@@ -0,0 +1,16 @@
+import { App, Component } from 'vue';
+import { Router } from 'vue-router';
+import TnxTd from '../tnxtd';
+import TDesign from 'tdesign-mobile-vue';
+
+export default class TnxTdm extends TnxTd {
+
+    constructor(apiBaseUrl: string) {
+        super(apiBaseUrl);
+    }
+
+    createVueApp(rootComponent: Component, router: Router, rootProps?: Record<string, any>): App {
+        return super.createVueApp(rootComponent, router, rootProps).use(TDesign);
+    }
+
+}

package/src/tdesign/tnxtd.ts

@@ -0,0 +1,20 @@
+import TnxVue from '../tnxvue';
+import {Icon} from 'tdesign-icons-vue-next';
+import Validator from './foundation/validator';
+
+export {Validator};
+
+export default class TnxTd extends TnxVue {
+
+    static {
+        TnxTd.Foundations.Validator = Validator;
+    }
+
+    constructor(apiBaseUrl: string) {
+        super(apiBaseUrl);
+        Object.assign(this.components, {
+            Icon,
+        });
+    }
+
+}