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

package/package.json

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

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

@@ -1,8 +1,8 @@
 <template>
     <el-tooltip :content="tooltipContent" :placement="tooltipPlacement" :disabled="disabled || !tooltipContent"
-                v-if="disabled === false || disabledTip !== false">
+        v-if="disabled === false || disabledTip !== false">
         <el-dropdown split-button :type="type" :class="className" :disabled="disabled" :title="title" :size="size"
-                     :style="$attrs.style" @click="clickButton" @command="clickItem" v-if="dropdownItems.length">
+            :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">
                 <slot v-if="$slots.default"></slot>
@@ -11,18 +11,18 @@
             <template #dropdown>
                 <el-dropdown-menu>
                     <el-dropdown-item v-for="dropdownItem of dropdownItems" :key="dropdownItem.path"
-                                      :icon="dropdownItem.icon" :disabled="dropdownItem.disabled"
-                                      :title="dropdownItem.title"
-                                      :command="dropdownItem">
+                        :icon="dropdownItem.icon" :disabled="dropdownItem.disabled"
+                        :title="dropdownItem.title"
+                        :command="dropdownItem">
                         {{ dropdownItem.caption || (dropdownItem.menuItem ? dropdownItem.menuItem.caption : '') }}
                     </el-dropdown-item>
                 </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" :text="text" :bg="bg" :autofocus="autofocus"
-                   :round="round"
-                   :circle="circle" :style="$attrs.style" v-else>
+            :loading="loading" :plain="plain" :link="link" :bg="bg" :autofocus="autofocus"
+            :round="round"
+            :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>
@@ -56,7 +56,6 @@ export default {
         loading: Boolean,
         plain: Boolean,
         link: Boolean,
-        text: Boolean,
         bg: Boolean,
         autofocus: Boolean,
         round: Boolean,

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

@@ -0,0 +1,405 @@
+<template>
+    <div class="tnxel-edit-table-container" :id="id">
+        <el-table ref="table"
+            class="tnxel-edit-table"
+            :class="{'padding-none': !padding}"
+            :data="data"
+            :highlight-current-row="selectable"
+            border
+            @current-change="onSelectRow"
+        >
+            <slot></slot>
+            <el-table-column label="排序" align="center" width="60px" v-if="sortable">
+                <template #default="scope">
+                    <tnxel-button
+                        type="primary" link
+                        icon="Top"
+                        :class="{'text-transparent': scope.$index === 0}"
+                        @click="sortUp(scope.$index)"
+                    />
+                    <tnxel-button
+                        type="primary" link
+                        icon="Bottom"
+                        class="ms-0"
+                        :class="{'text-transparent': scope.$index === data.length - 1}"
+                        @click="sortDown(scope.$index)"
+                    />
+                </template>
+            </el-table-column>
+            <el-table-column label="移除" align="center" width="60px" v-if="removable">
+                <template #default="scope">
+                    <tnxel-button
+                        type="primary" link
+                        icon="CircleClose"
+                        :tooltip="scope.row.removeTip"
+                        @click="toRemoveRow(scope.$index)"
+                    />
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="tnxel-edit-table-footer" v-if="addable">
+            <tnxel-button type="primary" link icon="Plus" @click="toAddRow">{{ addText }}</tnxel-button>
+        </div>
+    </div>
+</template>
+
+<script>
+import Button from '../button/Button.vue';
+
+export default {
+    components: {
+        'tnxel-button': Button,
+    },
+    name: 'TnxelEditTable',
+    props: {
+        data: Array,
+        addable: {
+            type: Boolean,
+            default: true,
+        },
+        removable: {
+            type: Boolean,
+            default: true,
+        },
+        addText: {
+            type: String,
+            default: '添加行',
+        },
+        newRow: {
+            type: Function,
+            default() {
+                return () => {
+                    return {};
+                }
+            }
+        },
+        selectable: Boolean, // 可否选择行
+        padding: Boolean, // 单元格中是否有边距
+        sortable: Boolean, // 可否调整行的顺序
+        rules: [String, Object], // 加载字段校验规则的URL地址，或规则集对象
+        rulesApp: { // 加载字段校验规则的应用名称
+            type: String,
+            default: () => window.tnx.componentDefaultApp, // 设置为方法以延时加载，确保更改的值生效
+        },
+        rulesLoaded: Function, // 规则集加载后的附加处理函数，仅在rule为字符串类型的URL地址时有效
+    },
+    data() {
+        return {
+            id: window.tnx.util.string.uuid32(),
+            selectedRow: null,
+            validationRules: {},
+        }
+    },
+    watch: {
+        data(newData, oldData) {
+            if (!oldData) {
+                this.$nextTick(() => {
+                    this.initElements();
+                });
+            }
+        },
+        rules() {
+            this.initRules();
+        },
+    },
+    mounted() {
+        if (this.selectable) {
+            window.tnx.util.dom.replaceKeyEvent(document, () => {
+                if (this.selectedRow) {
+                    this.data.remove(record => record === this.selectedRow);
+                }
+            }, {key: 'Delete'});
+        }
+        this.$nextTick(() => {
+            setTimeout(() => {
+                this.initElements();
+                this.initRules();
+            });
+        });
+    },
+    methods: {
+        initElements() {
+            this.focusRowFirstInput(0);
+            // 为富文本输入框添加默认title
+            let table = this.$refs.table.$el;
+            let textareas = table.getElementsByTagName('textarea');
+            for (let textarea of textareas) {
+                if (!textarea.title) {
+                    textarea.addEventListener('input', event => {
+                        event.target.title = event.target.value;
+                    });
+                }
+            }
+        },
+        initRules() {
+            if (this.rules) {
+                if (typeof this.rules === 'string') {
+                    window.tnx.app.rpc.getMeta(this.rules, meta => {
+                        if (this.rulesLoaded) {
+                            this.rulesLoaded(meta.$rules);
+                        } else {
+                            this.$emit('rules-loaded', meta.$rules);
+                        }
+                        this.validationRules = meta.$rules;
+                        this.bindRules();
+                    }, this.rulesApp);
+                } else {
+                    this.validationRules = this.rules;
+                    this.bindRules();
+                }
+            } else {
+                this.validationRules = {};
+                this.bindRules();
+            }
+        },
+        loopColumns(consumer) {
+            let columns = this.$slots.default();
+            if (Array.isArray(columns)) {
+                let containers = document.getElementsByClassName('tnxel-edit-table-container');
+                for (let container of containers) {
+                    if (container.id === this.id) {
+                        let cols = container.querySelectorAll('.el-table__header colgroup col');
+                        if (cols.length >= columns.length) {
+                            for (let i = 0; i < columns.length; i++) {
+                                let column = columns[i];
+                                let props = column.props;
+                                let fieldName = props.prop;
+                                let columnName = cols[i].getAttribute('name');
+                                consumer(fieldName, columnName);
+                            }
+                            return true;
+                        }
+                        break;
+                    }
+                }
+            }
+            return false;
+        },
+        loopValidatableElements(consumer) {
+            this.loopColumns((fieldName, columnName) => {
+                if (this.validationRules[fieldName]) {
+                    let tds = this.$refs.table.$el.getElementsByClassName(columnName);
+                    for (let td of tds) {
+                        let elements = td.getElementsByTagName('input');
+                        if (elements.length === 0) {
+                            elements = td.getElementsByTagName('textarea');
+                        }
+                        for (let element of elements) {
+                            consumer(fieldName, element);
+                        }
+                    }
+                }
+            });
+        },
+        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.loopColumns((fieldName, columnName) => {
+                let rules = this.validationRules[fieldName];
+                if (rules) {
+                    for (let rule of rules) {
+                        if (rule.required) {
+                            let th = this.$refs.table.$el.querySelector('th.' + columnName);
+                            if (th) {
+                                th.classList.add('is-required');
+                            }
+                            break;
+                        }
+                    }
+                }
+            });
+        },
+        validateElement(fieldName, element) {
+            this.removeErrorIcon(element);
+            element.parentElement.classList.remove('is-error');
+
+            let rules = {};
+            rules[fieldName] = this.validationRules[fieldName];
+            let model = {};
+            model[fieldName] = element.value;
+            let successful = true;
+            window.tnx.app.validator.validate(rules, model, errors => {
+                if (errors) {
+                    successful = false;
+                    let message = '';
+                    for (let error of errors) {
+                        message += error.message + '\n';
+                    }
+                    message = message.trim();
+                    element.parentElement.classList.add('is-error');
+                    let icon = document.createElement('i');
+                    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';
+                    element.parentElement.appendChild(icon);
+                }
+            });
+            return successful;
+        },
+        validateTable() {
+            let successful = true;
+            this.loopValidatableElements((fieldName, element) => {
+                let validated = this.validateElement(fieldName, element);
+                successful = validated && successful;
+            });
+            return successful;
+        },
+        removeErrorIcon(inputElement) {
+            let sibling = inputElement.nextSibling;
+            while (sibling) {
+                if (sibling.classList && sibling.classList.contains('error-icon')) {
+                    sibling.remove();
+                }
+                sibling = sibling.nextSibling;
+            }
+        },
+        onSelectRow(row) {
+            if (this.selectable) {
+                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();
+                                return true;
+                            }
+                        }
+                    }
+                }
+            }
+            return false;
+        },
+        toAddRow() {
+            let row = this.newRow();
+            this.data.push(row);
+            this.$nextTick(() => {
+                this.focusRowFirstInput(this.data.length - 1);
+            });
+        },
+        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);
+                }
+            });
+        },
+        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]);
+            }
+        },
+        sortUp(index) {
+            if (0 < index && index < this.data.length) {
+                let deleted = this.data.splice(index, 1);
+                this.data.splice(index - 1, 0, deleted[0]);
+            }
+        },
+    }
+}
+</script>
+
+<style>
+.tnxel-edit-table-container .el-table.padding-none .el-table__body-wrapper .el-table__cell,
+.tnxel-edit-table-container .el-table.padding-none .el-table__body-wrapper td .cell,
+.tnxel-edit-table-container .el-table--border.padding-none .el-table__body-wrapper td.el-table__cell:first-child .cell {
+    padding: 0;
+}
+
+.tnxel-edit-table-container .el-table.padding-none .el-table__body-wrapper .el-input__wrapper,
+.tnxel-edit-table-container .el-table.padding-none .el-table__body-wrapper .el-select__wrapper {
+    border-radius: 0;
+    height: 32px;
+}
+
+.tnxel-edit-table-container .el-table.padding-none .el-table__body-wrapper .el-textarea__wrapper {
+    border-radius: 0;
+    height: 40px;
+}
+
+.tnxel-edit-table-container .tnxel-edit-table .is-center .el-input__inner {
+    text-align: center;
+}
+
+.tnxel-edit-table-container .tnxel-edit-table .is-right .el-input__inner {
+    text-align: right;
+}
+
+.tnxel-edit-table-container .tnxel-edit-table .el-cascader .el-input__inner {
+    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 th.is-required:not(.is-no-asterisk) .cell:after {
+    content: "*";
+    color: var(--el-color-danger);
+    margin-left: 4px;
+}
+
+.tnxel-edit-table-container .el-table .is-error .error-icon {
+    position: absolute;
+    top: 12px;
+    right: 10px;
+    font-size: 16px;
+}
+
+.tnxel-edit-table-container .el-table .el-input__inner:focus + .error-icon,
+.tnxel-edit-table-container .el-table .el-textarea__inner:focus + .error-icon {
+    display: none;
+}
+
+.tnxel-edit-table-container .el-table .el-button.text-transparent {
+    cursor: default;
+}
+
+.tnxel-edit-table-container .el-table .disabled {
+    cursor: not-allowed;
+}
+
+.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);
+    height: 32px;
+    display: flex;
+    align-items: center;
+}
+
+.tnxel-edit-table-container .tnxel-edit-table-footer .el-button {
+    width: 100%;
+}
+</style>

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

@@ -24,14 +24,17 @@
         <DocumentCopy v-else-if="value === 'DocumentCopy'"/>
         <Download v-else-if="value === 'Download'"/>
         <Edit v-else-if="value === 'Edit'"/>
+        <Files v-else-if="value === 'Files'"/>
         <Finished v-else-if="value === 'Finished'"/>
         <Folder v-else-if="value === 'Folder'"/>
+        <Histogram v-else-if="value === 'Histogram'"/>
         <HomeFilled v-else-if="value === 'HomeFilled'"/>
         <InfoFilled v-else-if="value === 'InfoFilled'"/>
         <List v-else-if="value === 'List'"/>
         <Memo v-else-if="value === 'Memo'"/>
         <Minus v-else-if="value === 'Minus'"/>
         <MoreFilled v-else-if="value === 'MoreFilled'"/>
+        <Notebook v-else-if="value === 'Notebook'"/>
         <OfficeBuilding v-else-if="value === 'OfficeBuilding'"/>
         <Picture v-else-if="value === 'Picture'"/>
         <PictureFilled v-else-if="value === 'PictureFilled'"/>
@@ -83,8 +86,10 @@ import {
     DocumentCopy,
     Download,
     Edit,
+    Files,
     Finished,
     Folder,
+    Histogram,
     HomeFilled,
     InfoFilled,
     List,
@@ -92,6 +97,7 @@ import {
     Memo,
     Minus,
     MoreFilled,
+    Notebook,
     OfficeBuilding,
     Picture,
     PictureFilled,
@@ -141,14 +147,17 @@ const components = {
     DocumentCopy,
     Download,
     Edit,
+    Files,
     Finished,
     Folder,
+    Histogram,
     HomeFilled,
     InfoFilled,
     List,
     Memo,
     Minus,
     MoreFilled,
+    Notebook,
     Loading,
     OfficeBuilding,
     Picture,

package/src/element-plus/tnxel.js

@@ -20,6 +20,7 @@ import DetailForm from './detail-form/DetailForm.vue';
 import Dialog from './dialog/Dialog.vue';
 import Drawer from './drawer/Drawer.vue';
 import DropdownItem from './dropdown-item/DropdownItem.vue';
+import EditTable from './edit-table/EditTable.vue';
 import EnumSelect from './enum-select/EnumSelect.vue';
 import EnumView from './enum-view/EnumView.vue';
 import FetchCascader from './fetch-cascader/FetchCascader.vue';
@@ -64,6 +65,7 @@ export default build('tnxel', () => {
         Dialog,
         Drawer,
         DropdownItem,
+        EditTable,
         EnumSelect,
         EnumView,
         FetchCascader,

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

@@ -519,7 +519,8 @@ export default {
             }
         },
         _onError(error, file, fileList) {
-            $('#' + this.id + ' .el-upload').show();
+            this.files.remove(f => f.uid === file.uid);
+            $('#' + this.id + ' .el-upload').removeClass('d-none');
             let message;
             try {
                 message = JSON.parse(error.message);
@@ -662,7 +663,7 @@ export default {
     display: flex;
     align-items: center;
     min-height: 32px;
-    color: var(--el-text-color-regular);
+    color: var(--el-text-color-placeholder);
 }
 
 .tnxel-upload-container div.upload-trigger {