@truenewx/tnxvue3 2.6.0

package/src/percent/Percent.vue

@@ -0,0 +1,12 @@
+<template>
+    <span v-if="value !== undefined && value !== null && !isNaN(value)">{{ value * 100 }}%</span>
+</template>
+
+<script>
+export default {
+    name: 'TnxvuePercent',
+    props: {
+        value: Number,
+    }
+}
+</script>

package/src/text/Text.vue

@@ -0,0 +1,33 @@
+<template>
+    <span v-if="text">{{ prepend }}{{ text }}{{ append }}</span>
+    <span v-else-if="emptyText">{{ emptyText }}</span>
+</template>
+
+<script>
+export default {
+    name: 'TnxvueText',
+    props: {
+        value: [String, Number, Boolean, Function],
+        prepend: String,
+        append: String,
+        emptyText: {
+            type: String,
+            default: '-',
+        },
+    },
+    computed: {
+        text() {
+            if (this.value !== undefined && this.value !== null) {
+                if (typeof this.value === 'function') {
+                    return this.value();
+                }
+                if (typeof this.value === 'boolean') {
+                    return this.value.toText();
+                }
+                return this.value;
+            }
+            return '';
+        }
+    }
+}
+</script>

package/src/tnxvue-cli.js

@@ -0,0 +1,64 @@
+// tnxvue-cli.js
+const TerserPlugin = require('terser-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+module.exports = {
+    uglify(config, options) {
+        Object.assign(config, {
+            optimization: {
+                minimizer: [new TerserPlugin({
+                    terserOptions: Object.assign({
+                        compress: {
+                            warnings: false,
+                            drop_console: false,
+                            drop_debugger: true,
+                        }
+                    }, options)
+                })]
+            }
+        });
+    },
+    copy(config, dependencies, libs, patterns) {
+        let pluginPatterns = [];
+        for (let lib of libs) {
+            let from = lib.path;
+            let to = 'libs/js/' + lib.name;
+            if (config.mode === 'production') {
+                let version = dependencies[lib.name];
+                if (version) {
+                    to += '-' + version;
+                }
+                from += lib.prod;
+                to += lib.prod;
+            }
+            if (!from.endsWith('/')) {
+                from += '.js';
+            }
+            if (!to.endsWith('/')) {
+                to += '.js';
+            }
+            pluginPatterns.push({
+                from: './node_modules/' + from,
+                to: './' + to,
+            });
+            let globalVarName = config.externals[lib.name];
+            if (globalVarName) {
+                let baseUrl = process.env.VUE_APP_VIEW_BASE_URL;
+                if (!baseUrl.endsWith('/')) {
+                    baseUrl += '/';
+                }
+                process.env['VUE_APP_LIBS_' + globalVarName] = baseUrl + to;
+            }
+            if (lib.map) {
+                pluginPatterns.push({
+                    from: './node_modules/' + lib.path + lib.map,
+                    to: './libs/js/',
+                });
+            }
+        }
+        if (patterns?.length) {
+            pluginPatterns = pluginPatterns.concat(patterns);
+        }
+        config.plugins.push(new CopyWebpackPlugin({patterns: pluginPatterns}));
+    },
+}

package/src/tnxvue-router.js

@@ -0,0 +1,161 @@
+/**
+ * 基于Vue的路由器构建函数
+ */
+import {FunctionUtil, NetUtil} from '@truenewx/tnxcore/src/tnxcore-util';
+
+function addRoute(routes, superiorPath, item, fnImportPage) {
+    if (item && item.path) {
+        let page = item.page || item.path.replace(/\/:[a-zA-Z0-9_]+/g, '');
+        let route = {
+            path: item.path,
+            meta: {
+                superiorPath: superiorPath,
+                page: page,
+                cache: {}, // 路由级缓存
+                isHistory() { // 通过setTimeout()方式调用才能确保获得正确结果
+                    return this.historyFrom !== undefined;
+                }
+            },
+            component() {
+                return fnImportPage(page);
+            },
+        };
+        // 如果直接定义route的redirect/alias字段，则item的redirect/alias为undefined时，route仍然有redirect/alias字段，只是其值为undefined，这将导致VueRouter报错
+        if (item.redirect) {
+            route.redirect = item.redirect;
+        }
+        if (item.alias) {
+            route.alias = item.alias;
+        }
+        routes.push(route);
+    }
+}
+
+function applyItemsToRoutes(superiorPath, items, routes, fnImportPage) {
+    if (items && items.length) {
+        items.forEach(item => {
+            addRoute(routes, superiorPath, item, fnImportPage);
+            applyItemsToRoutes(item.path, item.subs, routes, fnImportPage);
+        });
+    }
+}
+
+function instantiatePath(path, params) {
+    if (path && path.contains('/:')) {
+        if (params) {
+            Object.keys(params).forEach(key => {
+                path = path.replace('/:' + key + '/', '/' + params[key] + '/');
+            });
+        }
+        if (path.contains('/:')) { // 参数替换完之后，还有路径参数，则为无效路径，返回首页
+            console.warn('路径中的参数无法获得参数值，请确保具有参数的路径所属菜单项的下级菜单路径包含相同的参数：' + path);
+            return '/';
+        }
+    }
+    return path;
+}
+
+function getCurrentRoute(router) {
+    return router.currentRoute._value;
+}
+
+export default function (VueRouter, menu, fnImportPage) {
+    let items;
+    if (Array.isArray(menu)) {
+        items = [];
+        menu.forEach(function (m) {
+            items = items.concat(m.items);
+        });
+    } else {
+        items = menu.items;
+    }
+
+    const routes = [];
+    applyItemsToRoutes(undefined, items, routes, fnImportPage);
+
+    const routerHistory = VueRouter.createHistory();
+    const router = VueRouter.createRouter({
+        history: routerHistory,
+        routes,
+    });
+    router.history = routerHistory;
+
+    // 浏览器的返回事件触发位于VueRouter的钩子执行和页面渲染之后，这意味着$route.meta.historyFrom必须在页面渲染完之后才具有正确的值
+    // if (window.history && window.history.pushState) {
+    //     window.history.pushState(null, null, document.URL);
+    // }
+    window.addEventListener('popstate', function () {
+        let $route = getCurrentRoute(router);
+        if ($route) {
+            $route.meta.historyFrom = router.history.state.forward;
+        }
+    }, false);
+
+    // 注册离开页面前事件处理支持
+    router.$beforeLeaveHandlers = {};
+    router.beforeLeave = function (handler) {
+        if (typeof handler === 'function') {
+            let $route = getCurrentRoute(router);
+            let path = $route.path;
+            router.$beforeLeaveHandlers[path] = handler;
+        }
+    };
+
+    router.beforeEach(function (to, from, next) {
+        if (typeof window.tnx.router.beforeLeave === 'function') {
+            window.tnx.router.beforeLeave(router, from);
+        }
+
+        let allow = true;
+        let beforeLeaveHandler = router.$beforeLeaveHandlers[from.path];
+        if (beforeLeaveHandler) {
+            if (beforeLeaveHandler(to) === false) {
+                allow = false;
+            }
+        }
+        if (allow) {
+            next();
+        }
+    });
+
+    router.afterEach(function (to, from) {
+        router.prev = from;
+        // 前后hash相同，但全路径不同（意味着参数不同），则需要刷新页面，否则页面不会刷新
+        if (to.href === from.href && to.fullPath !== from.fullPath) {
+            window.location.reload();
+        }
+    });
+
+    router.back = FunctionUtil.around(router.back, function (back, path) {
+        if (!router.prev?.href) { // 没有href，说明当前页面为刷新后进入的第一个页面，无法简单返回
+            let $route = getCurrentRoute(router);
+            if (!path) { // 未指定默认返回路径，则返回上一级页面
+                path = $route.meta.superiorPath;
+            }
+            path = instantiatePath(path, $route.params);
+            if (path) {
+                router.replace(path);
+                return;
+            }
+        }
+        back.call(router);
+    });
+
+    router.pushState = function (path) {
+        let success = NetUtil.pushState('#' + path);
+        if (!success) {
+            this.push(path);
+        }
+        return success;
+    }
+
+    router.replaceState = function (path) {
+        let success = NetUtil.replaceState('#' + path);
+        if (!success) {
+            this.replace(path);
+        }
+        return success;
+    }
+
+    return router;
+}

package/src/tnxvue-validator.js

@@ -0,0 +1,365 @@
+// tnxvue-validator.js
+/**
+ * 校验规则转换器，将服务端元数据中的校验规则转换为async-validator组件的规则。
+ * async-validator组件详见：https://github.com/yiminghe/async-validator
+ */
+import validator from '@truenewx/tnxcore/src/tnxcore-validator';
+import AsyncValidator from 'async-validator';
+
+/**
+ * async-validator组件支持的类型清单
+ */
+const ruleTypes = ['string', 'number', 'boolean', 'method', 'regexp', 'integer', 'float', 'array', 'object', 'enum',
+    'date', 'url', 'hex', 'email', 'any'];
+
+function getRuleType(metaType) {
+    if (ruleTypes.contains(metaType)) {
+        return metaType;
+    }
+    switch (metaType) {
+        case 'decimal':
+            return 'float';
+        case 'regex':
+            return 'regexp';
+        case 'datetime':
+        case 'time':
+            return 'date';
+    }
+    return ruleTypes[0];
+}
+
+function getRule(validationName, validationValue, fieldMeta) {
+    let rule = undefined;
+    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(r, fieldValue, callback, source, options) {
+                        if (validationValue) {
+                            let blank = fieldValue === undefined || fieldValue === null;
+                            if (!blank) {
+                                if (Array.isArray(fieldValue)) {
+                                    blank = fieldValue.length === 0; // 数组长度为0视为空
+                                } else if (typeof fieldValue === 'string') {
+                                    blank = fieldValue.trim().length === 0; // 字符串去掉两端空格后长度为0视为空
+                                } else if (typeof fieldValue === 'number') {
+                                    blank = isNaN(fieldValue); // 非法的数字视为空
+                                } else if (typeof fieldValue === 'object') {
+                                    // 对象非日期，且没有字段的视为空
+                                    blank = !(fieldValue instanceof Date) && Object.keys(fieldValue).length === 0;
+                                    if (!blank) {
+                                        // 可永久的日期对象，非永久且日期值为空时视为空
+                                        if (typeof fieldValue.permanent === 'boolean') {
+                                            blank = !fieldValue.permanent && !fieldValue.value;
+                                        }
+                                    }
+                                }
+                            }
+                            if (blank) {
+                                let message = validator.getErrorMessage(validationName, fieldCaption);
+                                return callback(new Error(message));
+                            }
+                        }
+                        return callback();
+                    }
+                }
+            }
+            break;
+        case 'minLength':
+            rule = {
+                validator(r, fieldValue, callback, source, options) {
+                    if (typeof validationValue === 'number' && typeof fieldValue === 'string') {
+                        // 回车符计入长度
+                        let enterLength = fieldValue.indexOf('\n') < 0 ? 0 : fieldValue.match(/\n/g).length;
+                        let fieldLength = fieldValue.length + enterLength;
+                        if (fieldLength < validationValue) {
+                            let message = validator.getErrorMessage(validationName, fieldCaption,
+                                validationValue, validationValue - fieldLength);
+                            return callback(new Error(message));
+                        }
+                    }
+                    return callback();
+                }
+            };
+            break;
+        case 'maxLength':
+            rule = {
+                validator(r, fieldValue, callback, source, options) {
+                    if (typeof validationValue === 'number' && typeof fieldValue === 'string') {
+                        // 回车符计入长度
+                        let enterLength = fieldValue.indexOf('\n') < 0 ? 0 : fieldValue.match(/\n/g).length;
+                        let fieldLength = fieldValue.length + enterLength;
+                        if (fieldLength > validationValue) {
+                            let message = validator.getErrorMessage(validationName, fieldCaption,
+                                validationValue, fieldLength - validationValue);
+                            return callback(new Error(message));
+                        }
+                    }
+                    return callback();
+                }
+            };
+            break;
+        case 'number':
+            if (validationValue === true) {
+                rule = {
+                    validator(r, fieldValue, callback, source, options) {
+                        if (fieldValue && typeof fieldValue === 'string') {
+                            if (!/^[0-9]+$/.test(fieldValue)) {
+                                let message = validator.getErrorMessage(validationName, fieldCaption);
+                                return callback(new Error(message));
+                            }
+                        }
+                        return callback();
+                    }
+                };
+            }
+            break;
+        case 'notContainsHtmlChars':
+            if (validationValue === true) {
+                rule = {
+                    validator(r, fieldValue, callback, source, options) {
+                        if (fieldValue) {
+                            let limitedValues = ['<', '>', '\'', '"', '\\'];
+                            for (let i = 0; i < limitedValues.length; i++) {
+                                if (fieldValue.indexOf(limitedValues[i]) >= 0) {
+                                    let s = limitedValues.join(' ');
+                                    let message = validator.getErrorMessage('notContains', fieldCaption, s);
+                                    return callback(new Error(message));
+                                }
+                            }
+                        }
+                        return callback();
+                    }
+                };
+            }
+            break;
+        case 'notContainsIllegalFilenameChars':
+            if (validationValue === true) {
+                rule = {
+                    validator(r, fieldValue, callback, source, options) {
+                        if (fieldValue) {
+                            let limitedValues = ['/', '\\', ':', '*', '?', '"', '<', '>', '|'];
+                            for (let i = 0; i < limitedValues.length; i++) {
+                                if (fieldValue.indexOf(limitedValues[i]) >= 0) {
+                                    let s = limitedValues.join(' ');
+                                    let message = validator.getErrorMessage('notContains', fieldCaption, s);
+                                    return callback(new Error(message));
+                                }
+                            }
+                        }
+                        return callback();
+                    }
+                };
+            }
+            break;
+        case 'notContains':
+            if (validationValue) {
+                rule = {
+                    validator(r, fieldValue, callback, source, options) {
+                        if (fieldValue) {
+                            let limitedValues = validationValue.split(' ');
+                            for (let i = 0; i < limitedValues.length; i++) {
+                                if (fieldValue.indexOf(limitedValues[i]) >= 0) {
+                                    let message = validator.getErrorMessage('notContains', fieldCaption,
+                                        validationValue);
+                                    return callback(new Error(message));
+                                }
+                            }
+                        }
+                        return callback();
+                    }
+                };
+            }
+            break;
+        case 'rejectHtmlTags':
+            if (validationValue === true) {
+                rule = {
+                    validator(r, fieldValue, callback, source, options) {
+                        if (fieldValue) {
+                            if (/<[a-z]+[ ]*[/]?[ ]*>/gi.test(fieldValue)) {
+                                let message = validator.getErrorMessage(validationName, fieldCaption);
+                                return callback(new Error(message));
+                            }
+                        }
+                        return callback();
+                    }
+                };
+            }
+            break;
+        case 'allowedHtmlTags':
+            if (validationValue) {
+                rule = {
+                    validator(r, fieldValue, callback, source, options) {
+                        if (fieldValue) {
+                            let tags = validationValue.toLowerCase().split(',');
+                            if (tags.length) {
+                                fieldValue = fieldValue.toLowerCase();
+                                let leftIndex = fieldValue.indexOf('<');
+                                let rightIndex = leftIndex >= 0 ? fieldValue.indexOf('>', leftIndex) : -1;
+                                while (leftIndex >= 0 && rightIndex >= 0) {
+                                    let sub = fieldValue.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 = validator.getErrorMessage(validationName, fieldCaption,
+                                            tags.join(', '));
+                                        return callback(new Error(message)); // 存在不允许的标签，则报错
+                                    }
+                                    leftIndex = fieldValue.indexOf('<', rightIndex);
+                                    rightIndex = leftIndex >= 0 ? fieldValue.indexOf('>', leftIndex) : -1;
+                                }
+                            }
+                        }
+                        return callback();
+                    }
+                };
+            }
+            break;
+        case 'forbiddenHtmlTags':
+            if (validationValue) {
+                rule = {
+                    validator(r, fieldValue, callback, source, options) {
+                        if (fieldValue) {
+                            let tags = validationValue.toLowerCase().split(',');
+                            if (tags.length) {
+                                fieldValue = fieldValue.toLowerCase();
+                                for (let tag of tags) {
+                                    if (fieldValue.contains('<' + tag + '>') || fieldValue.contains('<' + tag + ' ')) {
+                                        let message = validator.getErrorMessage(validationName, fieldCaption,
+                                            tags.join(', '));
+                                        return callback(new Error(message));
+                                    }
+                                }
+                            }
+                        }
+                        return callback();
+                    }
+                };
+            }
+            break;
+        case 'email':
+            if (validationValue === true) {
+                rule = {
+                    type: validationName,
+                    message: validator.getErrorMessage(validationName, fieldCaption),
+                }
+            }
+            break;
+        case 'cellphone':
+        case 'idCardNo':
+        case 'url':
+        case 'opposableUrl':
+            rule = {
+                validator(r, fieldValue, callback, source, options) {
+                    if (validationValue) {
+                        let message = validator.validateRegExp(validationName, fieldValue, fieldCaption);
+                        if (message) {
+                            return callback(new Error(message));
+                        }
+                    }
+                    return callback();
+                }
+            };
+            break;
+        case 'regex':
+            rule = {
+                validator(r, fieldValue, callback, source, options) {
+                    if (fieldValue) {
+                        let pattern = validationValue[0];
+                        // 服务端正则表达式无需以^$作为首尾，客户端需确保以^$作为首尾
+                        if (!pattern.startsWith('^')) {
+                            pattern = '^' + pattern;
+                        }
+                        if (!pattern.endsWith('$')) {
+                            pattern += '$';
+                        }
+                        let regexp = new RegExp(pattern, 'gi');
+                        if (!regexp.test(fieldValue)) {
+                            let message = validationValue[1];
+                            if (message) {
+                                message = fieldCaption + message;
+                            } else {
+                                message = validator.getErrorMessage('regex', fieldCaption, '');
+                            }
+                            return callback(new Error(message));
+                        }
+                    }
+                    return callback();
+                }
+            }
+            break;
+        case 'custom':
+            if (typeof validationValue === 'function') {
+                rule = {
+                    validator(r, fieldValue, callback, source, options) {
+                        let message = validationValue(fieldValue);
+                        if (message) {
+                            return callback(new Error(message));
+                        }
+                        return callback();
+                    }
+                }
+            }
+            break;
+    }
+    if (rule) {
+        rule.name = validationName;
+        let metaType = 'text';
+        if (fieldMeta?.type) {
+            metaType = fieldMeta.type.toLowerCase();
+        }
+        rule.type = rule.type || getRuleType(metaType);
+        let optional = metaType === 'option' || metaType === 'datetime' || metaType === 'date' || metaType === 'time';
+        rule.trigger = optional ? 'change' : 'blur';
+    }
+    return rule;
+}
+
+/**
+ * 从服务端元数据中构建完整的规则集
+ * @param meta
+ * @returns {{}}
+ */
+export function getRules(meta) {
+    let rules = {};
+    Object.keys(meta).forEach(fieldName => {
+        let fieldMeta = meta[fieldName];
+        if (fieldMeta.validation) {
+            let fieldRules = [];
+            Object.keys(fieldMeta.validation).forEach(validationName => {
+                let validationValue = fieldMeta.validation[validationName];
+                let rule = getRule(validationName, validationValue, fieldMeta);
+                if (rule) {
+                    fieldRules.push(rule);
+                }
+            });
+            // 将可能包含的引用字段路径中的.替换为__，以符合async-validator规则名称的规范
+            let ruleName = fieldName.replace('.', '__');
+            rules[ruleName] = fieldRules;
+        }
+    });
+    return rules;
+}
+
+export default {
+    getErrorMessage: validator.getErrorMessage,
+    testRegExp: validator.testRegExp,
+    validateRegExp: validator.validateRegExp,
+    getRule,
+    getRules,
+    validate: function (rules, source, callback) {
+        return new AsyncValidator(rules).validate(source, callback);
+    },
+}

package/src/tnxvue.css

@@ -0,0 +1,12 @@
+/* tnxvue.css */
+tnxvue-div, tnxvue-span {
+    display: none;
+}
+
+tnxvue-div[mode='v'], tnxvue-span[mode='v'] {
+    visibility: hidden;
+}
+
+[v-if], [v-else-if], [v-else] {
+    display: none;
+}