@truenewx/tnxvue3 3.0.0-alpha.27 → 3.0.0-alpha.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truenewx/tnxvue3",
-  "version": "3.0.0-alpha.27",
+  "version": "3.0.0-alpha.29",
   "description": "互联网技术解决方案：Vue3扩展支持",
   "private": false,
   "publishConfig": {
@@ -24,7 +24,7 @@
     "vue-router": "~4.4.0"
   },
   "dependencies": {
-    "@truenewx/tnxcore": "3.0.0-alpha.15",
+    "@truenewx/tnxcore": "3.0.0-alpha.16",
     "@element-plus/icons-vue": "2.3.1",
     "async-validator": "4.2.5",
     "mitt": "3.0.1"

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

@@ -1,7 +1,9 @@
 <template>
-    <el-tooltip :content="tooltipContent" :placement="tooltipPlacement" :disabled="disabled || !tooltipContent"
-        v-if="disabled === false || disabledTip !== false">
-        <el-dropdown split-button :type="type" :class="className" :disabled="disabled" :title="title" :size="size"
+    <el-tooltip
+        :content="tooltipContent"
+        :placement="tooltipPlacement"
+        :disabled="finalDisabled || !tooltipContent">
+        <el-dropdown split-button :type="type" :class="className" :disabled="finalDisabled" :title="title" :size="size"
             :style="$attrs.style" @click="clickButton" @command="clickItem" v-if="dropdownItems.length">
             <i :class="icon" style="margin-right: 0.5rem;" v-if="icon"></i>
             <template v-if="!hiddenCaption">
@@ -19,10 +21,21 @@
                 </el-dropdown-menu>
             </template>
         </el-dropdown>
-        <el-button :type="type" :class="className" :disabled="disabled" :title="title" @click="clickButton" :size="size"
-            :loading="loading" :plain="plain" :link="link" :bg="bg" :autofocus="autofocus"
+        <el-button :type="type"
+            :class="className"
+            :disabled="finalDisabled"
+            :title="title"
+            @click="clickButton"
+            :size="size"
+            :loading="loading"
+            :plain="plain"
+            :link="link"
+            :bg="bg"
+            :autofocus="autofocus"
             :round="round"
-            :circle="circle" :style="$attrs.style" v-else>
+            :circle="circle"
+            :style="$attrs.style"
+            v-else>
             <tnxel-icon :value="icon" v-if="icon"/>
             <span v-if="!hiddenCaption && ($slots.default || menuItem)">
                 <slot>{{ menuItem ? menuItem.caption : '' }}</slot>
@@ -52,7 +65,13 @@ export default {
         },
         type: String,
         icon: String,
-        size: String,
+        size: {
+            type: String,
+            validator: value => {
+                return ['small', 'default', 'large'].includes(value);
+            },
+            default: 'default',
+        },
         loading: Boolean,
         plain: Boolean,
         link: Boolean,
@@ -68,6 +87,10 @@ export default {
             type: String,
             default: 'top',
         },
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
         disabledTip: {
             type: [String, Boolean],
             default: '没有操作权限',
@@ -83,7 +106,7 @@ export default {
         }
         return {
             menuItem: menuItem,
-            disabled: null,
+            finalDisabled: this.disabled,
             dropdownItems: [],
         }
     },
@@ -105,7 +128,13 @@ export default {
             return undefined;
         },
         title() {
-            return this.disabled ? this.disabledTip : this.$attrs.title;
+            if (this.finalDisabled) {
+                if (this.disabledTip === false) {
+                    return undefined;
+                }
+                return this.disabledTip;
+            }
+            return this.$attrs.title;
         }
     },
     created() {
@@ -122,11 +151,11 @@ export default {
     methods: {
         init() {
             if (this.granted !== null) {
-                this.disabled = !this.granted;
+                this.finalDisabled = this.disabled || !this.granted;
             } else if (this.menu && this.path) {
                 let vm = this;
                 this.menu.loadGrantedItems(function () {
-                    vm.disabled = !vm.menu.isGranted(vm.path);
+                    vm.finalDisabled = this.disabled || !vm.menu.isGranted(vm.path);
                     vm.buildDropdownItems();
                 });
             }

package/src/element-plus/edit-table/EditTable.vue

@@ -40,15 +40,18 @@
         <div class="tnxel-edit-table-footer" v-if="addable">
             <tnxel-button type="primary" link icon="Plus" @click="toAddRow">{{ addText }}</tnxel-button>
         </div>
+        <tnxel-icon class="d-none icon-warning" value="WarningFilled"/>
     </div>
 </template>
 
 <script>
 import Button from '../button/Button.vue';
+import Icon from '../icon/Icon.vue';
 
 export default {
     components: {
         'tnxel-button': Button,
+        'tnxel-icon': Icon,
     },
     name: 'TnxelEditTable',
     props: {
@@ -192,15 +195,7 @@ export default {
             });
         },
         bindRules() {
-            this.loopValidatableElements((fieldName, element) => {
-                element.addEventListener('blur', event => {
-                    let element = event.target;
-                    this.validateElement(fieldName, element);
-                });
-                element.addEventListener('focus', event => {
-                    this.removeErrorIcon(event.target);
-                });
-            });
+            this.bindElementRules();
             this.loopColumns((fieldName, columnName) => {
                 let rules = this.validationRules[fieldName];
                 if (rules) {
@@ -216,6 +211,20 @@ export default {
                 }
             });
         },
+        bindElementRules() {
+            this.loopValidatableElements((fieldName, element) => {
+                let blurEventHandler = event => {
+                    this.validateElement(fieldName, event.target);
+                };
+                element.removeEventListener('blur', blurEventHandler);
+                element.addEventListener('blur', blurEventHandler);
+                let focusEventHandler = event => {
+                    this.removeErrorIcon(event.target);
+                };
+                element.removeEventListener('focus', focusEventHandler);
+                element.addEventListener('focus', focusEventHandler);
+            });
+        },
         validateElement(fieldName, element) {
             this.removeErrorIcon(element);
             element.parentElement.classList.remove('is-error');
@@ -234,9 +243,13 @@ export default {
                     }
                     message = message.trim();
                     element.parentElement.classList.add('is-error');
-                    let icon = document.createElement('i');
+
+                    let container = document.getElementById(this.id);
+                    let icon = container.getElementsByClassName('icon-warning')[0];
+                    icon = icon.cloneNode(true);
+                    icon.classList.remove('d-none');
+                    icon.classList.remove('icon-warning');
                     icon.classList.add('error-icon');
-                    icon.classList.add('el-icon'); // TODO
                     icon.classList.add('text-danger');
                     icon.title = message;
                     icon.style.top = (element.parentElement.offsetHeight - 16) / 2 + 'px';
@@ -295,6 +308,7 @@ export default {
             let row = this.newRow();
             this.data.push(row);
             this.$nextTick(() => {
+                this.bindElementRules();
                 this.focusRowFirstInput(this.data.length - 1);
             });
         },
@@ -337,11 +351,20 @@ export default {
     height: 32px;
 }
 
+.tnxel-edit-table-container .el-table.padding-none .el-table__body-wrapper .el-input--small .el-input__wrapper,
+.tnxel-edit-table-container .el-table.padding-none .el-table__body-wrapper .el-input--small .el-select__wrapper {
+    height: 24px;
+}
+
 .tnxel-edit-table-container .el-table.padding-none .el-table__body-wrapper .el-textarea__wrapper {
     border-radius: 0;
     height: 40px;
 }
 
+.tnxel-edit-table-container .el-table.padding-none .el-table__body-wrapper .el-input--small .el-textarea__wrapper {
+    height: 32px;
+}
+
 .tnxel-edit-table-container .tnxel-edit-table .is-center .el-input__inner {
     text-align: center;
 }
@@ -354,14 +377,8 @@ export default {
     text-align: left;
 }
 
-.tnxel-edit-table-container .el-table.padding-none .el-table__body-wrapper .el-input__inner:focus,
-.tnxel-edit-table-container .el-table.padding-none .el-table__body-wrapper .el-textarea__inner:focus {
-    border-color: var(--el-color-primary);
-}
-
-.tnxel-edit-table-container .el-table .is-error .el-input__inner,
-.tnxel-edit-table-container .el-table .is-error .el-textarea__inner {
-    border-color: var(--el-color-danger);
+.tnxel-edit-table-container .el-table .is-error {
+    box-shadow: 0 0 0 1px var(--el-color-danger) inset;
 }
 
 .tnxel-edit-table-container .el-table th.is-required:not(.is-no-asterisk) .cell:after {
@@ -375,6 +392,7 @@ export default {
     top: 12px;
     right: 10px;
     font-size: 16px;
+    cursor: default;
 }
 
 .tnxel-edit-table-container .el-table .el-input__inner:focus + .error-icon,
@@ -391,9 +409,9 @@ export default {
 }
 
 .tnxel-edit-table-container .tnxel-edit-table-footer {
-    border-left: 1px solid var(--el-border-color);
-    border-right: 1px solid var(--el-border-color);
-    border-bottom: 1px solid var(--el-border-color);
+    border-left: 1px solid var(--el-border-color-lighter);
+    border-right: 1px solid var(--el-border-color-lighter);
+    border-bottom: 1px solid var(--el-border-color-lighter);
     height: 32px;
     display: flex;
     align-items: center;

package/src/element-plus/icon/Icon.vue

@@ -14,6 +14,7 @@
         <CircleCheckFilled v-else-if="value === 'CircleCheckFilled'"/>
         <CircleClose v-else-if="value === 'CircleClose'"/>
         <CircleCloseFilled v-else-if="value === 'CircleCloseFilled'"/>
+        <CirclePlus v-else-if="value === 'CirclePlus'"/>
         <Close v-else-if="value === 'Close'"/>
         <CloseBold v-else-if="value === 'CloseBold'"/>
         <CopyDocument v-else-if="value === 'CopyDocument'"/>
@@ -27,10 +28,13 @@
         <Files v-else-if="value === 'Files'"/>
         <Finished v-else-if="value === 'Finished'"/>
         <Folder v-else-if="value === 'Folder'"/>
+        <FolderOpened v-else-if="value === 'FolderOpened'"/>
+        <Grid v-else-if="value === 'Grid'"/>
         <Histogram v-else-if="value === 'Histogram'"/>
         <HomeFilled v-else-if="value === 'HomeFilled'"/>
         <InfoFilled v-else-if="value === 'InfoFilled'"/>
         <List v-else-if="value === 'List'"/>
+        <Management v-else-if="value === 'Management'"/>
         <Memo v-else-if="value === 'Memo'"/>
         <Minus v-else-if="value === 'Minus'"/>
         <MoreFilled v-else-if="value === 'MoreFilled'"/>
@@ -76,6 +80,7 @@ import {
     CircleCheckFilled,
     CircleClose,
     CircleCloseFilled,
+    CirclePlus,
     Close,
     CloseBold,
     CopyDocument,
@@ -89,11 +94,14 @@ import {
     Files,
     Finished,
     Folder,
+    FolderOpened,
+    Grid,
     Histogram,
     HomeFilled,
     InfoFilled,
     List,
     Loading,
+    Management,
     Memo,
     Minus,
     MoreFilled,
@@ -137,6 +145,7 @@ const components = {
     CircleCheckFilled,
     CircleClose,
     CircleCloseFilled,
+    CirclePlus,
     Close,
     CloseBold,
     CopyDocument,
@@ -150,10 +159,13 @@ const components = {
     Files,
     Finished,
     Folder,
+    FolderOpened,
+    Grid,
     Histogram,
     HomeFilled,
     InfoFilled,
     List,
+    Management,
     Memo,
     Minus,
     MoreFilled,

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

@@ -142,8 +142,8 @@
             {{ emptyText }}
         </el-option>
         <template v-for="item in items">
-            <el-option :key="item[valueName]" :value="item[valueName]" :data-value="item[valueName]"
-                :disabled="item.disabled === true || typeof item.disabled === 'string'"
+            <el-option :key="item[valueName]" :value="item[valueName]" :label="item[textName]"
+                :data-value="item[valueName]" :disabled="item.disabled === true || typeof item.disabled === 'string'"
                 :title="typeof item.disabled === 'string' ? item.disabled : item.title"
                 v-if="!hiddenValues.contains(item[valueName])">
                 <slot name="option" :item="item" v-if="$slots.option"></slot>
@@ -321,6 +321,17 @@ export default {
                 if (!Array.isArray(model)) {
                     model = [model];
                 }
+                if (items && items.length) {
+                    // 多选时，如果model中有值不在items中，则去掉
+                    for (let i = model.length - 1; i >= 0; i--) {
+                        let item = this.getItem(model[i]);
+                        if (!item) {
+                            model.splice(i, 1);
+                        }
+                    }
+                } else {
+                    model = [];
+                }
                 return model;
             }
             if (util.object.isNull(model)) {

package/src/element-plus/tnxel.js

@@ -247,6 +247,7 @@ export default build('tnxel', () => {
                 type: 'warning',
                 confirmButtonText: '确定',
             }, options);
+            this.closeLoading();
             ElMessageBox.alert(message, title, options).then(callback);
             this._handleZIndex('.el-message-box__wrapper:last');
             this.app.eventBus.emit('tnx.alert', options);
@@ -258,6 +259,7 @@ export default build('tnxel', () => {
                 type: 'success',
                 confirmButtonText: '确定',
             });
+            this.closeLoading();
             ElMessageBox.alert(message, '成功', options).then(callback);
             this._handleZIndex('.el-message-box__wrapper:last');
             this.app.eventBus.emit('tnx.success', options);
@@ -269,6 +271,7 @@ export default build('tnxel', () => {
                 type: 'error',
                 confirmButtonText: '确定',
             });
+            this.closeLoading();
             ElMessageBox.alert(message, '错误', options).then(callback);
             this._handleZIndex('.el-message-box__wrapper:last');
             this.app.eventBus.emit('tnx.error', options);
@@ -308,6 +311,7 @@ export default build('tnxel', () => {
                     callback(yes);
                 }
             }
+            this.closeLoading();
             ElMessageBox.confirm(message, title, options);
             this._handleZIndex('.el-message-box__wrapper:last');
             this.app.eventBus.emit('tnx.confirm', options);

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

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

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

@@ -0,0 +1,43 @@
+<template>
+    <Button type="default" link
+        :icon="item.icon"
+        :tooltip="item.caption" tooltip-placement="bottom"
+        :disabled="item.disabled"
+        :key="item.disabled"
+        :disabled-tip="false"
+        :size="size"
+        @click="item.click"/>
+</template>
+
+<script>
+import ToolBarItem from './ToolBarItem.js';
+import Button from '../button/Button.vue';
+
+export default {
+    name: 'TnxelToolBarItem',
+    components: {Button},
+    props: {
+        item: {
+            type: ToolBarItem,
+            required: true,
+        },
+        size: {
+            type: String,
+            validator: value => {
+                return ['small', 'default', 'large'].includes(value);
+            },
+            default: 'default',
+        },
+    },
+    data() {
+        return {
+            model: {},
+        };
+    },
+    methods: {}
+}
+</script>
+
+<style>
+
+</style>

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

@@ -0,0 +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>

package/src/tnxvue-router.js

@@ -37,8 +37,10 @@ function addRoute(routes, superiorPath, item, fnImportPage) {
 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);
+            if (item) {
+                addRoute(routes, superiorPath, item, fnImportPage);
+                applyItemsToRoutes(item.path, item.subs, routes, fnImportPage);
+            }
         });
     }
 }
@@ -68,7 +70,11 @@ export default function (VueRouter, menu, fnImportPage) {
     if (Array.isArray(menu)) {
         items = [];
         menu.forEach(function (m) {
-            items = items.concat(m.items);
+            if (Array.isArray(m.items)) {
+                items = items.concat(m.items);
+            } else { // menu实际上是items
+                items.push(m);
+            }
         });
     } else {
         items = menu.items;
@@ -124,8 +130,8 @@ export default function (VueRouter, menu, fnImportPage) {
 
     router.afterEach(function (to, from) {
         router.prev = from;
-        // 前后hash相同，但全路径不同（意味着参数不同），则需要刷新页面，否则页面不会刷新
-        if (to.href === from.href && to.fullPath !== from.fullPath) {
+        // 前后路径相同，但全路径不同（意味着参数不同），则需要刷新页面，否则页面不会刷新
+        if (to.path === from.path && to.fullPath !== from.fullPath) {
             window.location.reload();
         }
     });

package/src/tnxvue.js

@@ -126,6 +126,16 @@ export default build('tnxvue', () => {
                             }
                         }
                     }];
+                } else if (type === 'close') {
+                    return [{
+                        text: '关闭',
+                        type: theme || 'default',
+                        click(close) {
+                            if (typeof callback === 'function') {
+                                return callback.call(this, close);
+                            }
+                        }
+                    }];
                 } else {
                     return [{
                         text: '确定',