@truenewx/tnxvue3 3.0.4 → 3.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truenewx/tnxvue3",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "description": "互联网技术解决方案：Vue3扩展支持",
   "private": false,
   "publishConfig": {

package/src/bootstrap-vue/button/Button.vue

@@ -1,5 +1,5 @@
 <template>
-    <BButton class="tnxbsv-button" :loading="loading" :disabled="loading">
+    <BButton class="tnxbsv-button" :variant="type || 'outline-secondary'" :loading="loading" :disabled="loading">
         <i class="me-1" :class="icon" v-if="icon"></i>
         <div>
             <slot></slot>
@@ -21,6 +21,7 @@ export default {
     name: 'TnxbsvButton',
     components: {BButton, Loading},
     props: {
+        type: String,
         icon: String,
         loading: Boolean,
     },

package/src/bootstrap-vue/dialog/Dialog.vue

@@ -16,11 +16,11 @@
         <template #title>
             <div v-html="title" v-if="title"></div>
         </template>
-        <div v-html="content" v-if="typeof content === 'string'"></div>
-        <component :is="content" v-bind="contentProps" v-else></component>
+        <div ref="content" v-html="content" v-if="typeof content === 'string'"></div>
+        <component ref="content" :is="content" v-bind="contentProps" v-else></component>
         <template #footer>
             <TnxbsvButton v-for="(button, index) in buttons" :key="index"
-                :variant="button.type || 'outline-secondary'"
+                :type="button.type"
                 :loading="buttonLoadings[index]"
                 @click="btnClick(index)"
             >

package/src/bootstrap-vue/form/Form.vue

@@ -24,9 +24,20 @@ export default {
             type: Object, // key: 字段名，value: 验证规则数组
             default: () => ({}),
         },
+        disabled: Boolean,
     },
     data() {
-        return {};
+        return {
+            fieldEventListeners: {},
+        };
+    },
+    watch: {
+        rules() {
+            this.initRules();
+        },
+        disabled() {
+            this.updateElementsDisabled();
+        },
     },
     mounted() {
         window.addEventListener('resize', this.updateLabelWidth);
@@ -34,16 +45,18 @@ export default {
             setTimeout(() => {
                 this.initRules();
                 this.updateLabelWidth();
+                this.updateElementsDisabled();
             });
         });
     },
     beforeUnmount() {
         window.removeEventListener('resize', this.updateLabelWidth);
+        this.clearEventListeners();
     },
     methods: {
         getFieldGroupElements() {
             let elements = {};
-            let groups = this.$el.querySelectorAll(`#${this.id} .b-form-group[prop]`);
+            let groups = this.$el.querySelectorAll('.b-form-group[prop]');
             groups.forEach(label => {
                 let fieldName = label.getAttribute('prop');
                 if (fieldName) {
@@ -59,7 +72,34 @@ export default {
             }
             return fieldRules;
         },
+        addFieldEventListener(fieldName, element, eventType, handler) {
+            if (!this.fieldEventListeners[fieldName]) {
+                this.fieldEventListeners[fieldName] = {};
+            }
+            if (!this.fieldEventListeners[fieldName][eventType]) {
+                this.fieldEventListeners[fieldName][eventType] = [];
+            }
+            element.addEventListener(eventType, handler);
+            this.fieldEventListeners[fieldName][eventType].push(handler);
+        },
+        clearEventListeners() {
+            for (let fieldName in this.fieldEventListeners) {
+                let listeners = this.fieldEventListeners[fieldName];
+                for (let eventType in listeners) {
+                    let handlers = listeners[eventType];
+                    let fieldElement = this.getFieldElement(fieldName);
+                    if (fieldElement) {
+                        handlers.forEach(handler => {
+                            fieldElement.removeEventListener(eventType, handler);
+                        });
+                    }
+                }
+            }
+            this.fieldEventListeners = {}; // 清空映射表
+        },
         initRules() {
+            this.clearEventListeners();
+
             let fieldGroupElements = this.getFieldGroupElements();
             for (let fieldName in fieldGroupElements) {
                 let fieldGroupElement = fieldGroupElements[fieldName];
@@ -77,12 +117,12 @@ export default {
                         let fieldElement = fieldGroupElement.querySelector('input, select, textarea');
                         if (fieldElement) {
                             if (existsChangeValidator) {
-                                fieldElement.addEventListener('change', () => {
+                                this.addFieldEventListener(fieldName, fieldElement, 'change', () => {
                                     this.validateField(fieldName, 'change');
                                 });
                             }
                             if (existsBlurValidator) {
-                                fieldElement.addEventListener('blur', () => {
+                                this.addFieldEventListener(fieldName, fieldElement, 'blur', () => {
                                     this.validateField(fieldName, 'blur');
                                 });
                             }
@@ -114,22 +154,24 @@ export default {
             this.clearValidate(); // 清除之前的反馈信息
             this.$el.classList.remove('was-validated'); // 移除已验证样式
 
-            let valid = true;
-            let fieldGroupElements = this.getFieldGroupElements();
-            for (let fieldName in fieldGroupElements) {
-                if (!this.validateField(fieldName)) {
-                    valid = false;
+            return new Promise((resolve, reject) => {
+                let errors = {};
+                let fieldGroupElements = this.getFieldGroupElements();
+                for (let fieldName in fieldGroupElements) {
+                    let fieldErrorMessages = this.validateField(fieldName);
+                    if (fieldErrorMessages.length) {
+                        errors[fieldName] = fieldErrorMessages;
+                    }
                 }
-            }
-
-            if (!valid) {
-                this.$el.classList.add('was-validated'); // 添加已验证样式
-            }
-
-            return valid;
+                if (Object.keys(errors).length) {
+                    this.$el.classList.add('was-validated'); // 添加已验证样式
+                    reject(errors);
+                }
+                resolve();
+            });
         },
         getFieldElement(fieldName) {
-            let groupElement = this.$el.querySelector(`#${this.id} .b-form-group[prop="${fieldName}"]`);
+            let groupElement = this.$el.querySelector(`.b-form-group[prop="${fieldName}"]`);
             if (groupElement) {
                 return groupElement.querySelector('input, textarea, select');
             }
@@ -138,27 +180,26 @@ export default {
         validateField(fieldName, trigger) {
             const fieldValue = this.model[fieldName];
             const fieldRules = this.getFieldRules(fieldName);
-            const fieldErrors = [];
+            const fieldErrorMessages = [];
 
             fieldRules.forEach(fieldRule => {
                 if (typeof fieldRule.validator === 'function' && (!trigger || trigger === fieldRule.trigger)) {
                     fieldRule.validator(fieldRule, fieldValue, (error) => {
                         if (error) {
-                            fieldErrors.push(error.message);
+                            fieldErrorMessages.push(error.message);
                         }
                     });
                 }
                 // 没有validator()方法，则不进行校验
             });
 
-            if (fieldErrors.length > 0) {
-                this.setFieldInvalidFeedback(fieldName, fieldErrors);
-                return false;
+            if (fieldErrorMessages.length) {
+                this.setFieldInvalidFeedback(fieldName, fieldErrorMessages);
             } else {
                 // 清除错误状态
                 this.removeFieldInvalidFeedback(fieldName);
-                return true;
             }
+            return fieldErrorMessages;
         },
         setFieldInvalidFeedback(fieldName, messages) {
             let fieldElement = this.getFieldElement(fieldName);
@@ -199,6 +240,18 @@ export default {
             const invalidFeedbackElements = this.$el.querySelectorAll('.invalid-feedback');
             invalidFeedbackElements.forEach(el => el.remove());
         },
+        scrollToField(fieldName) {
+            let fieldElement = this.getFieldElement(fieldName);
+            if (fieldElement) {
+                fieldElement.scrollIntoView({behavior: 'smooth', block: 'center'});
+            }
+        },
+        updateElementsDisabled() {
+            let elements = this.$el.querySelectorAll('input, textarea, select, button');
+            elements.forEach(element => {
+                element.disabled = this.disabled;
+            });
+        },
     }
 }
 </script>

package/src/bootstrap-vue/submit-form/SubmitForm.vue

@@ -0,0 +1,176 @@
+<template>
+    <TnxbsvForm ref="form" :model="model" :rules="validationRules" :disabled="disabled">
+        <slot></slot>
+        <TnxbsvFormGroup v-if="submit !== undefined && submit !== null">
+            <div class="flex-v-center">
+                <TnxbsvButton :type="theme || 'primary'" :size="size" @click="toSubmit" v-if="submit !== false">
+                    {{ _submitText }}
+                </TnxbsvButton>
+                <TnxbsvButton class="ms-2" :size="size" @click="toCancel" v-if="cancel !== false">
+                    {{ cancelText }}
+                </TnxbsvButton>
+            </div>
+        </TnxbsvFormGroup>
+    </TnxbsvForm>
+</template>
+
+<script>
+import TnxbsvForm from '../form/Form.vue';
+import TnxbsvFormGroup from '../form/FormGroup.vue';
+import TnxbsvButton from '../button/Button.vue';
+
+export default {
+    name: 'TnxbsvSubmitForm',
+    components: {TnxbsvForm, TnxbsvFormGroup, TnxbsvButton},
+    props: {
+        model: Object,
+        rules: [String, Object], // 加载字段校验规则的URL地址，或规则集对象
+        rulesApp: { // 加载字段校验规则的应用名称
+            type: String,
+            default: () => window.tnx.componentDefaultApp, // 设置为方法以延时加载，确保更改的值生效
+        },
+        rulesLoaded: Function, // 规则集加载后的附加处理函数，仅在rules为字符串类型的URL地址时有效
+        submit: {
+            type: [Function, Boolean],
+            default: null,
+        },
+        submitText: String,
+        theme: String,
+        cancel: {
+            type: [String, Function, Boolean],
+            default: true
+        },
+        cancelText: {
+            type: String,
+            default: '取消'
+        },
+        errorFocus: {
+            type: Boolean,
+            default: false,
+        },
+        size: String,
+    },
+    emits: ['rules-loaded', 'meta'],
+    data() {
+        return {
+            validationRules: {},
+            disabled: false,
+            fieldNames: [],
+        };
+    },
+    computed: {
+        _submitText() {
+            if (this.submitText) {
+                return this.submitText;
+            }
+            return this.cancel === false ? '保存' : '提交';
+        }
+    },
+    watch: {
+        rules() {
+            this.initRules();
+        },
+    },
+    mounted() {
+        this.initRules();
+    },
+    methods: {
+        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;
+                        delete meta.$rules;
+                        this.$emit('meta', meta);
+                        this.fieldNames = Object.keys(meta);
+                    }, this.rulesApp);
+                } else {
+                    this.validationRules = {};
+                    Object.keys(this.rules).forEach(fieldName => {
+                        let fieldRules = this.rules[fieldName] || [];
+                        if (!Array.isArray(fieldRules)) {
+                            fieldRules = [fieldRules];
+                        }
+                        if (fieldRules.length) {
+                            this.validationRules[fieldName] = fieldRules.filter((rule, index) => {
+                                let valid = rule !== undefined && rule !== null;
+                                if (!valid) {
+                                    console.error(`invalid rules[${index}] for field "${fieldName}": `, rule);
+                                }
+                                return valid;
+                            });
+                        }
+                    });
+                }
+            } else {
+                this.validationRules = {};
+            }
+        },
+        validate(callback, errorFocus) {
+            this.$refs.form.validate().then(() => {
+                if (typeof callback === 'function') {
+                    callback(true);
+                }
+            }).catch(errors => {
+                if (this.errorFocus && errorFocus !== false) {
+                    this.$nextTick(() => {
+                        this.focusError.call(this, errors);
+                    });
+                }
+                if (typeof callback === 'function') {
+                    callback(false);
+                }
+            });
+        },
+        focusError(errors) {
+            let fieldNames = Object.keys(errors);
+            let fieldName = fieldNames[0];
+            if (fieldName) {
+                let fieldElement = this.$refs.form.getFieldElement(fieldName);
+                if (fieldElement) {
+                    fieldElement.focus();
+                    return;
+                }
+                // 没有找到错误字段输入框，则滚动到错误栏目处
+                this.$refs.form.scrollToField(fieldName);
+            }
+        },
+        disable(disabled) {
+            this.disabled = disabled !== false;
+        },
+        toSubmit(callback, disabled) {
+            this.validate(success => {
+                if (success) {
+                    if (typeof callback !== 'function') {
+                        callback = this.submit;
+                    }
+                    if (typeof callback === 'function') {
+                        if (disabled !== false) {
+                            this.disable();
+                        }
+                        callback(this);
+                    }
+                }
+            });
+        },
+        toCancel() {
+            if (typeof this.cancel === 'function') {
+                this.cancel();
+            } else if (typeof this.cancel === 'string') {
+                this.$router.back(this.cancel);
+            } else if (this.cancel !== false) {
+                this.$router.back();
+            }
+        },
+    }
+}
+</script>
+
+<style>
+
+</style>

package/src/bootstrap-vue/tnxbsv.js

@@ -15,12 +15,13 @@ import Loading from './loading/Loading.vue';
 import Paged from './paged/Paged.vue';
 import QueryTable from './query-table/QueryTable.vue';
 import Select from './select/Select.vue';
+import SubmitForm from './submit-form/SubmitForm.vue';
 
 export const build = tnxvue.build;
 
 export default build('tnxbsv', () => {
     const components = Object.assign({}, tnxvue.components, {
-        Button, Dialog, EnumSelect, Form, FormGroup, Loading, Paged, QueryTable, Select,
+        Button, Dialog, EnumSelect, Form, FormGroup, Loading, Paged, QueryTable, Select, SubmitForm,
     });
 
     const tnxbsv = Object.assign({}, tnxjq, tnxvue, {

package/src/tnxvue.js

@@ -2,8 +2,8 @@
 /**
  * 基于Vue 3的扩展支持
  */
-import tnxcore from '@truenewx/tnxcore';
-// import tnxcore from '../../core/src/tnxcore';
+// import tnxcore from '@truenewx/tnxcore';
+import tnxcore from '../../core/src/tnxcore';
 import validator from './tnxvue-validator';
 import createRouter from './tnxvue-router';
 import Text from './text/Text.vue';