@truenewx/tnxvue3 3.0.0-alpha.33 → 3.0.0-alpha.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truenewx/tnxvue3",
-  "version": "3.0.0-alpha.33",
+  "version": "3.0.0-alpha.35",
   "description": "互联网技术解决方案：Vue3扩展支持",
   "private": false,
   "publishConfig": {
@@ -24,7 +24,7 @@
     "vue-router": "~4.4.0"
   },
   "dependencies": {
-    "@truenewx/tnxcore": "3.0.0-alpha.19",
+    "@truenewx/tnxcore": "3.0.0-alpha.21",
     "@element-plus/icons-vue": "2.3.1",
     "async-validator": "4.2.5",
     "mitt": "3.0.1"
@@ -64,6 +64,8 @@
       ],
       "no-undef": "warn",
       "no-useless-escape": "warn",
+      "no-empty": "off",
+      "vue/no-mutating-props": "warn",
       "vue/no-v-model-argument": "off",
       "vue/multi-word-component-names": "off"
     }

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

@@ -30,6 +30,7 @@
             :loading="loading"
             :plain="plain"
             :link="link"
+            :text="text"
             :bg="bg"
             :autofocus="autofocus"
             :round="round"
@@ -75,6 +76,7 @@ export default {
         loading: Boolean,
         plain: Boolean,
         link: Boolean,
+        text: Boolean,
         bg: Boolean,
         autofocus: Boolean,
         round: Boolean,

package/src/element-plus/dialog/Dialog.vue

@@ -42,7 +42,10 @@ export default {
         'tnxel-dialog-content': DialogContent,
     },
     props: {
-        id: window.tnx.util.string.uuid32(),
+        id: {
+            type: String,
+            default: () => window.tnx.util.string.uuid32(),
+        },
         modelValue: Boolean,
         container: String,
         title: String,
@@ -153,7 +156,7 @@ export default {
                 }
             }
             if (!$dialog || !$dialog.length) {
-                $dialog = $('.el-dialog__wrapper[data-v-id="' + this.id + '"] .el-dialog:last');
+                $dialog = $('.tnxel-dialog[data-v-id="' + this.id + '"]');
             }
             if ($dialog.length) {
                 let top = window.tnx.util.dom.getTopVerticallyCenteredOnPage($dialog[0]);

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

@@ -3,37 +3,39 @@
         <el-table ref="table"
             class="tnxel-edit-table"
             :class="{'padding-none': !padding}"
-            :data="data"
+            :data="tableDataList"
+            :row-key="rowKey"
+            :row-class-name="tableRowClassName"
             :highlight-current-row="selectable"
             border
             @current-change="onSelectRow"
         >
             <slot></slot>
             <el-table-column label="排序" align="center" width="60px" v-if="sortable">
-                <template #default="scope">
+                <template #default="{row, $index}">
                     <tnxel-button
                         type="primary" link
                         icon="Top"
-                        :class="{'text-transparent': scope.$index === 0}"
-                        @click="sortUp(scope.$index)"
+                        :class="{'text-transparent': !isSortableRow(row, $index,true)}"
+                        @click="sortUp(row, $index)"
                     />
                     <tnxel-button
                         type="primary" link
                         icon="Bottom"
                         class="ms-0"
-                        :class="{'text-transparent': scope.$index === data.length - 1}"
-                        @click="sortDown(scope.$index)"
+                        :class="{'text-transparent': !isSortableRow(row, $index, false)}"
+                        @click="sortDown(row, $index)"
                     />
                 </template>
             </el-table-column>
             <el-table-column label="移除" align="center" width="60px" v-if="removable">
-                <template #default="scope">
+                <template #default="{row, $index}">
                     <tnxel-button
                         type="primary" link
                         icon="CircleClose"
-                        :tooltip="scope.row.removeTip"
-                        @click="toRemoveRow(scope.$index)"
-                    />
+                        :tooltip="row.removeTip"
+                        @click="removeRow(row, $index)"
+                        v-if="isRemovableRow(row, $index)"/>
                 </template>
             </el-table-column>
         </el-table>
@@ -61,7 +63,7 @@ export default {
             default: true,
         },
         removable: {
-            type: Boolean,
+            type: [Boolean, Function],
             default: true,
         },
         addText: {
@@ -76,9 +78,11 @@ export default {
                 }
             }
         },
+        rowKey: [Function, String],
+        rowClassName: [Function, String],
         selectable: Boolean, // 可否选择行
         padding: Boolean, // 单元格中是否有边距
-        sortable: Boolean, // 可否调整行的顺序
+        sortable: [Boolean, Function], // 可否调整行的顺序
         rules: [String, Object], // 加载字段校验规则的URL地址，或规则集对象
         rulesApp: { // 加载字段校验规则的应用名称
             type: String,
@@ -86,13 +90,30 @@ export default {
         },
         rulesLoaded: Function, // 规则集加载后的附加处理函数，仅在rule为字符串类型的URL地址时有效
     },
+    emits: ['sorted', 'removed'],
     data() {
         return {
             id: window.tnx.util.string.uuid32(),
             selectedRow: null,
             validationRules: {},
+            indexes: {}, // 附加索引映射集，key：row，value：一级节点为单个索引下标，多级节点为其在各级节点中的索引下标集合
         }
     },
+    computed: {
+        tableDataList() {
+            for (let rowIndex = 0; rowIndex < this.data.length; rowIndex++) {
+                let row = this.data[rowIndex];
+                this.indexes[this.getRowKey(row, rowIndex)] = rowIndex;
+                if (this.rowKey && row.children) {
+                    for (let j = 0; j < row.children.length; j++) {
+                        let child = row.children[j];
+                        this.indexes[this.getRowKey(child)] = [rowIndex, j];
+                    }
+                }
+            }
+            return this.data;
+        },
+    },
     watch: {
         data(newData, oldData) {
             if (!oldData) {
@@ -121,8 +142,11 @@ export default {
         });
     },
     methods: {
+        getRowKey(row, rowIndex) {
+            return this.rowKey ? row[this.rowKey] : (rowIndex + '');
+        },
         initElements() {
-            this.focusRowFirstInput(0);
+            this.focusRowFirstInput(this.tableDataList[0], 0);
             // 为富文本输入框添加默认title
             let table = this.$refs.table.$el;
             let textareas = table.getElementsByTagName('textarea');
@@ -280,23 +304,39 @@ export default {
                 this.selectedRow = row;
             }
         },
-        focusRowFirstInput(rowIndex) {
-            let table = this.$refs.table.$el;
-            let rows = table.getElementsByClassName('el-table__row');
-            if (rows.length) {
-                let row = rows[rowIndex];
-                if (row) {
-                    let cells = row.getElementsByClassName('cell');
-                    for (let cell of cells) {
-                        let input = cell.querySelector('input:first-child');
-                        if (input) {
-                            input.focus();
-                            return true;
-                        } else {
-                            let textarea = cell.querySelector('textarea:first-child');
-                            if (textarea) {
-                                textarea.focus();
+        tableRowClassName(data) {
+            let classNames = [this.getRowClassName(data.row, data.rowIndex)];
+            if (typeof this.rowClassName === 'function') {
+                classNames.push(this.rowClassName(data));
+            } else if (this.rowClassName) {
+                classNames.push(this.rowClassName);
+            }
+            return classNames.join(' ');
+        },
+        getRowClassName(row, rowIndex) {
+            let index = this.indexes[this.getRowKey(row, rowIndex)];
+            return 'tnxel-edit-table__row--' + (Array.isArray(index) ? index.join('_') : index);
+        },
+        focusRowFirstInput(row, rowIndex) {
+            if (row && this.$refs.table) {
+                let table = this.$refs.table.$el;
+                let rowClassName = this.getRowClassName(row, rowIndex);
+                let rowDoms = table.getElementsByClassName(rowClassName);
+                if (rowDoms.length) {
+                    let rowDom = rowDoms[0];
+                    if (rowDom) {
+                        let cells = rowDom.getElementsByClassName('cell');
+                        for (let cell of cells) {
+                            let input = cell.querySelector('input:first-child');
+                            if (input) {
+                                input.focus();
                                 return true;
+                            } else {
+                                let textarea = cell.querySelector('textarea:first-child');
+                                if (textarea) {
+                                    textarea.focus();
+                                    return true;
+                                }
                             }
                         }
                     }
@@ -306,33 +346,107 @@ export default {
         },
         toAddRow() {
             let row = this.newRow();
-            this.data.push(row);
-            this.$nextTick(() => {
-                this.bindElementRules();
-                this.focusRowFirstInput(this.data.length - 1);
-            });
+            if (row) {
+                let rowIndex = this.data.length;
+                this.indexes[this.getRowKey(row, rowIndex)] = rowIndex;
+                this.data.push(row);
+                this.$nextTick(() => {
+                    setTimeout(() => {
+                        this.bindElementRules();
+                        this.focusRowFirstInput(row, rowIndex);
+                    });
+                });
+            }
         },
-        toRemoveRow(index) {
-            let row = this.data[index];
-            this.data.splice(index, 1);
-            this.$emit('removed', row, index);
-            this.$nextTick(() => {
-                if (!this.focusRowFirstInput(index)) {
-                    this.focusRowFirstInput(index - 1);
+        isRemovableRow(row, rowIndex) {
+            if (typeof this.removable === 'function') {
+                let index = this.indexes[this.getRowKey(row, rowIndex)];
+                let removable = this.removable(row, index);
+                if (removable !== undefined) {
+                    return removable;
                 }
+                // 自定义函数如果返回undefined，则使用默认判断逻辑
+            }
+            return !!this.removable;
+        },
+        removeRow(row, rowIndex) {
+            this.locateRow(row, rowIndex, (dataList, index) => {
+                delete this.indexes[this.getRowKey(row, rowIndex)];
+                dataList.splice(index, 1);
+                this.$emit('removed', row, rowIndex);
+                this.$nextTick(() => {
+                    setTimeout(() => {
+                        let next = dataList[index];
+                        let nextIndex = rowIndex;
+                        if (!next) {
+                            next = dataList[index - 1];
+                            nextIndex = rowIndex - 1;
+                        }
+                        this.focusRowFirstInput(next, nextIndex);
+                    });
+                });
             });
         },
-        sortDown(index) {
-            if (0 <= index && index < this.data.length - 1) {
-                let deleted = this.data.splice(index, 1);
-                this.data.splice(index + 1, 0, deleted[0]);
+        locateRow(row, rowIndex, func) {
+            if (typeof rowIndex === 'function') {
+                func = rowIndex;
+                rowIndex = undefined;
+            }
+            let indexes = this.indexes[this.getRowKey(row, rowIndex)];
+            if (!Array.isArray(indexes)) {
+                indexes = [indexes];
             }
+            let dataList = this.tableDataList;
+            for (let i = 0; i < indexes.length - 1; i++) {
+                dataList = dataList[indexes[i]].children;
+            }
+            let index = indexes[indexes.length - 1];
+            return func(dataList, index);
         },
-        sortUp(index) {
-            if (0 < index && index < this.data.length) {
-                let deleted = this.data.splice(index, 1);
-                this.data.splice(index - 1, 0, deleted[0]);
+        isSortableRow(row, rowIndex, up) {
+            if (typeof this.sortable === 'function') {
+                let index = this.indexes[this.getRowKey(row, rowIndex)];
+                let sortable = this.sortable(row, index, up);
+                if (sortable !== undefined) {
+                    return sortable;
+                }
+                // 自定义函数如果返回undefined，则使用默认判断逻辑
+            }
+            if (this.sortable) {
+                if (up) {
+                    let index = this.indexes[this.getRowKey(row, rowIndex)];
+                    if (Array.isArray(index)) {
+                        index = index[index.length - 1];
+                    }
+                    return index > 0;
+                } else {
+                    return this.locateRow(row, rowIndex, (dataList, index) => {
+                        return index < dataList.length - 1;
+                    });
+                }
             }
+            return false;
+        },
+        sortUp(row, rowIndex) {
+            this.locateRow(row, rowIndex, (dataList, index) => {
+                if (index > 0) {
+                    let deleted = dataList.splice(index, 1);
+                    dataList.splice(index - 1, 0, deleted[0]);
+                    this.$emit('sorted', row, rowIndex, true);
+                }
+            });
+        },
+        sortDown(row, rowIndex) {
+            this.locateRow(row, rowIndex, (dataList, index) => {
+                if (index < dataList.length - 1) {
+                    let deleted = dataList.splice(index, 1);
+                    dataList.splice(index + 1, 0, deleted[0]);
+                    this.$emit('sorted', row, rowIndex, false);
+                }
+            });
+        },
+        toggleRowExpansion(row, expanded) {
+            this.$refs.table.toggleRowExpansion(row, expanded);
         },
     }
 }
@@ -351,6 +465,16 @@ export default {
     height: 32px;
 }
 
+.tnxel-edit-table-container .el-table.padding-none .el-table__body-wrapper .el-input-group__append,
+.tnxel-edit-table-container .el-table.padding-none .el-table__body-wrapper .el-input-group__prepend {
+    border-radius: 0;
+    padding: 0 16px;
+}
+
+.tnxel-edit-table-container .el-table.padding-none .el-table__body-wrapper .el-button {
+    border-radius: 0;
+}
+
 .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;
@@ -377,6 +501,45 @@ export default {
     text-align: left;
 }
 
+.tnxel-edit-table-container .el-table .cell {
+    display: flex;
+    align-items: center;
+}
+
+.tnxel-edit-table-container .el-table .is-center .cell {
+    justify-content: center;
+}
+
+.tnxel-edit-table-container .el-table .el-table__placeholder {
+    width: 20px;
+}
+
+.tnxel-edit-table-container .el-table .el-table__indent + .el-table__placeholder {
+    width: 16px;
+}
+
+.tnxel-edit-table-container .el-table .is-center .el-table__placeholder {
+    width: 16px;
+}
+
+.tnxel-edit-table-container .el-table .is-center .el-table__indent + .el-table__placeholder {
+    width: 24px;
+}
+
+.tnxel-edit-table-container .el-table [class*=el-table__row--level] .el-table__expand-icon {
+    margin-left: 4px;
+    margin-right: 4px;
+}
+
+.tnxel-edit-table-container .el-table [class*=el-table__row--level] .is-center .el-table__expand-icon {
+    margin-left: 0;
+}
+
+.tnxel-edit-table-container .tnxel-edit-table .el-table__expand-icon + div {
+    width: auto;
+    flex-grow: 1;
+}
+
 .tnxel-edit-table-container .el-table .is-error {
     box-shadow: 0 0 0 1px var(--el-color-danger) inset;
 }

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

@@ -38,9 +38,11 @@
         <Management v-else-if="value === 'Management'"/>
         <Memo v-else-if="value === 'Memo'"/>
         <Minus v-else-if="value === 'Minus'"/>
+        <More v-else-if="value === 'More'"/>
         <MoreFilled v-else-if="value === 'MoreFilled'"/>
         <Notebook v-else-if="value === 'Notebook'"/>
         <OfficeBuilding v-else-if="value === 'OfficeBuilding'"/>
+        <Operation v-else-if="value === 'Operation'"/>
         <Picture v-else-if="value === 'Picture'"/>
         <PictureFilled v-else-if="value === 'PictureFilled'"/>
         <Plus v-else-if="value === 'Plus'"/>
@@ -105,9 +107,11 @@ import {
     Management,
     Memo,
     Minus,
+    More,
     MoreFilled,
     Notebook,
     OfficeBuilding,
+    Operation,
     Picture,
     PictureFilled,
     Plus,
@@ -169,10 +173,12 @@ const components = {
     Management,
     Memo,
     Minus,
+    More,
     MoreFilled,
     Notebook,
     Loading,
     OfficeBuilding,
+    Operation,
     Picture,
     PictureFilled,
     Plus,

package/src/element-plus/input-number/InputNumber.vue

@@ -124,7 +124,7 @@ export default {
 }
 
 .tnxel-input-number .el-input__inner {
-    min-width: 50px;
+    min-width: 20px;
 }
 
 .tnxel-input-number .el-input-number.text-start .el-input__inner {

package/src/element-plus/tnxel.js

@@ -350,9 +350,14 @@ export default build('tnxel', () => {
                 text: message,
             });
             this._closeMessage();
-            window.tnx.loadingInstance = ElLoading.service(options);
-            this._handleZIndex('.el-loading-mask');
-            this.app.eventBus.emit('tnx.showLoading', options);
+            try {
+                window.tnx.loadingInstance = ElLoading.service(options);
+                this._handleZIndex('.el-loading-mask');
+                this.app.eventBus.emit('tnx.showLoading', options);
+            } catch (e) {
+                window.tnx.loadingInstance = null;
+                console.error(e);
+            }
             return window.tnx.loadingInstance;
         },
         closeLoading() {

package/src/tnxvue.js

@@ -38,6 +38,53 @@ export default build('tnxvue', () => {
                 window.tnx.app.page.stopCache(router, from.path);
             }
         },
+        /**
+         * 深度监听指定对象，在created()中调用才能生效
+         * @param vm 页面vue实例
+         * @param target 要监听的对象
+         * @param handler 处理函数
+         */
+        deepWatch(vm, target, handler) {
+            vm.$watch(() => {
+                try {
+                    return JSON.stringify(target);
+                } catch (e) {
+                    console.error(e);
+                }
+                return undefined;
+            }, (newValue, oldValue) => {
+                try {
+                    if (newValue !== oldValue) {
+                        const newObject = JSON.parse(newValue);
+                        const oldObject = JSON.parse(oldValue);
+                        this.deepCompare(newObject, oldObject, '', handler);
+                    }
+                } catch (e) {
+                    console.error(e);
+                }
+            }, {deep: true});
+        },
+        deepCompare(object1, object2, path = '', handler) {
+            if (object1) {
+                const keys = Object.keys(object1);
+                keys.forEach(key => {
+                    const fullPath = path ? `${path}.${key}` : key;
+                    if (object2) {
+                        if (Array.isArray(object1[key]) && Array.isArray(object2[key])) {
+                            object1[key].forEach((item, index) => {
+                                this.deepCompare(item, object2[key][index], `${fullPath}[${index}]`, handler);
+                            });
+                        } else if (typeof object1[key] === 'object' && typeof object2[key] === 'object') {
+                            this.deepCompare(object1[key], object2[key], fullPath, handler);
+                        } else if (object1[key] !== object2[key]) {
+                            handler(object1[key], object2[key], fullPath);
+                        }
+                    } else {
+                        handler(object1[key], undefined, fullPath);
+                    }
+                });
+            }
+        },
         createVueInstance(rootComponent, router, rootProps) {
             let vm = Vue.createApp(rootComponent, rootProps);
             vm.use(this);
@@ -49,7 +96,7 @@ export default build('tnxvue', () => {
                 vm.config.globalProperties.$router = window.tnx.router.instance;
             }
             // vm.config.unwrapInjectedRef = true;
-            window.tnx.app.eventBus = mitt();
+            window.tnx.app.eventBus = window.tnx.app.eventBus || mitt();
             window.tnx.app.eventBus.once = function (name, handler) {
                 this.all.set(name, [handler]);
             }