@truenewx/tnxvue3 3.0.0-alpha.32 → 3.0.0-alpha.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truenewx/tnxvue3",
-  "version": "3.0.0-alpha.32",
+  "version": "3.0.0-alpha.34",
   "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.20",
     "@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/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]);
             // 为富文本输入框添加默认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.$index)];
+            if (typeof this.rowClassName === 'function') {
+                classNames.push(this.rowClassName(data));
+            } else {
+                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) {
+            if (row) {
+                let table = this.$refs.table.$el;
+                let rowClassName = this.getRowClassName(row);
+                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,102 @@ 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);
+                    });
+                });
+            }
         },
-        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] || dataList[index - 1];
+                        this.focusRowFirstInput(next);
+                    });
+                });
             });
         },
-        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 +460,12 @@ 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-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 +492,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/input-number/InputNumber.vue

@@ -1,16 +1,16 @@
 <template>
     <div class="tnxel-input-number" :class="containerClassObject">
         <el-input-number ref="input" class="flex-grow-1" :class="{'rounded-end-0': suffix, 'text-start': !controls}"
-                         v-model="model"
-                         :min="min" :max="max"
-                         :controls="controls" controls-position="right"
-                         :placeholder="placeholderText" :disabled="disabled"
-                         :step="step || Math.pow(10, -this.scale)" step-strictly
-                         :precision="scale"
-                         :value-on-clear="null"
-                         :size="size"
-                         @change="onChange"
-                         @blur="$emit('blur', $event)"/>
+            v-model="model"
+            :min="min" :max="max"
+            :controls="controls" controls-position="right"
+            :placeholder="placeholderText" :disabled="disabled"
+            :step="step || Math.pow(10, -this.scale)" step-strictly
+            :precision="scale"
+            :value-on-clear="null"
+            :size="size"
+            @change="onChange"
+            @blur="$emit('blur', $event)"/>
         <div class="el-input-group__append" v-if="suffix">{{ suffix }}</div>
     </div>
 </template>
@@ -41,7 +41,7 @@ export default {
         required: Boolean,
         size: String,
     },
-    emits: ['update:modelValue', 'blur'],
+    emits: ['update:modelValue', 'blur', 'change'],
     data() {
         return {
             model: typeof this.modelValue === 'string' ? Number(this.modelValue) : this.modelValue,
@@ -103,7 +103,11 @@ export default {
             this.$refs.input.focus();
         },
         onChange() {
-            this.validateRequired(false);
+            if (this.validateRequired(false)) {
+                this.$nextTick(() => {
+                    this.$emit('change', this.modelValue);
+                });
+            }
         },
     }
 }

package/src/tnxvue.js

@@ -38,6 +38,42 @@ 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(() => JSON.stringify(target), (newValue, oldValue) => {
+                if (newValue !== oldValue) {
+                    const newObject = JSON.parse(newValue);
+                    const oldObject = JSON.parse(oldValue);
+                    this.deepCompare(newObject, oldObject, '', handler);
+                }
+            }, {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);