@truenewx/tnxvue3 3.0.4 → 3.0.6

package/src/bootstrap-vue/loading-overlay/LoadingOverlay.vue

@@ -0,0 +1,60 @@
+<template>
+    <div class="loading-overlay">
+        <LoadingIcon theme="primary" :small="false" :text="message"/>
+        <span class="loading-message text-primary" v-if="message">{{ message }}</span>
+    </div>
+</template>
+
+<script>
+import LoadingIcon from "../loading-icon/LoadingIcon.vue";
+
+export default {
+    name: 'TnxbsvLoadingMask',
+    components: {LoadingIcon},
+    props: {
+        message: {
+            type: String,
+            default: '',
+        },
+    },
+    data() {
+        return {};
+    },
+    mounted() {
+        document.body.classList.add('no-scroll')
+    },
+    beforeUnmount() {
+        document.body.classList.remove('no-scroll');
+    },
+    methods: {}
+}
+</script>
+
+<style>
+.no-scroll {
+    overflow: hidden !important;
+}
+
+.loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(var(--bs-white-rgb), 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    z-index: 2147483647; /* 浏览器支持的最大值 */
+}
+
+.loading-overlay .spinner-border {
+    opacity: 0.7;
+}
+
+.loading-overlay .loading-message {
+    margin-top: 0.25rem;
+    opacity: 0.7;
+}
+</style>

package/src/bootstrap-vue/region-cascader/RegionCascader.vue

@@ -0,0 +1,119 @@
+<template>
+    <TnxbsvCascader v-model="model"
+        :options="region.subs"
+        :props="{
+            value: 'code',
+            label: 'caption',
+            children: 'subs',
+        }"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :clearable="empty"
+        :parent-selectable="parentSelectable"
+    />
+</template>
+
+<script>
+import TnxbsvCascader from '../cascader/Cascader.vue';
+
+export default {
+    name: 'TnxbsvRegionCascader',
+    components: {TnxbsvCascader},
+    props: {
+        modelValue: String,
+        scope: {
+            type: String,
+            default: () => 'CN',
+        },
+        maxLevel: {
+            type: [Number, String],
+            default: 3,
+        },
+        minLevel: {
+            type: [Number, String],
+            default: 3,
+        },
+        empty: {
+            type: Boolean,
+            default: false,
+        },
+        placeholder: String,
+        disabled: Boolean,
+        change: Function, // 选中值变化后的事件处理函数，由于比element的change事件传递更多参数，所以以prop的形式指定，以尽量节省性能
+        app: {
+            type: String,
+            default: () => window.tnx.componentDefaultApp,
+        },
+        parentSelectable: Boolean,
+    },
+    data() {
+        return {
+            model: this.modelValue,
+            region: {},
+        };
+    },
+    watch: {
+        model(value) {
+            this.$emit('update:modelValue', value);
+            this.triggerChange(value);
+        },
+        modelValue() {
+            this.model = this.getModel();
+        }
+    },
+    mounted() {
+        window.tnx.app.rpc.loadRegion(this.scope, parseInt(this.maxLevel), region => {
+            this.region = region;
+            this.model = this.getModel();
+        }, {
+            app: this.app,
+        });
+    },
+    methods: {
+        triggerChange(value) {
+            if (this.change) {
+                let item = this.getItem(this.region.subs, value);
+                this.change(item);
+            }
+        },
+        getItem(items, value) {
+            if (items && value !== undefined) {
+                for (let item of items) {
+                    if (item.code === value) {
+                        return item;
+                    }
+                    let sub = this.getItem(item.subs, value);
+                    if (sub) {
+                        return sub;
+                    }
+                }
+            }
+            return undefined;
+        },
+        getModel() {
+            if (this.region) {
+                let items = this.region.subs;
+                if (items && items.length) {
+                    let item = this.getItem(items, this.modelValue);
+                    if (item) {
+                        return item.code;
+                    } else { // 如果当前值找不到匹配的选项，则需要考虑是设置为空还是默认选项
+                        if (!this.empty) { // 如果不能为空，则默认选中第一个叶子节点选项
+                            let firstItem = items[0];
+                            while (firstItem.subs && firstItem.subs.length) {
+                                firstItem = firstItem.subs[0];
+                            }
+                            return firstItem ? firstItem.code : null;
+                        }
+                    }
+                }
+            }
+            return null;
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>

package/src/bootstrap-vue/select/Select.vue

@@ -1,10 +1,18 @@
 <template>
+    <BFormRadioGroup class="tnxbsv-select tnxbsv-radio-group"
+        v-model="model"
+        :options="items"
+        :value-field="valueName"
+        :text-field="textName"
+        :buttons="selector === 'radio-button'"
+        button-variant="outline-primary"
+        v-if="items && (selector==='radio' || selector === 'radio-button')"/>
     <BDropdown class="tnxbsv-select tnxbsv-dropdown"
         :key="groupKey"
         :text="currentText"
         :variant="theme"
         :size="size"
-        v-if="selector==='dropdown'">
+        v-else-if="selector==='dropdown'">
         <BDropdownItem :active="isSelected(emptyValue)" @click="select(emptyValue)" v-if="empty">
             <span>{{ emptyText || '&nbsp;' }}</span>
         </BDropdownItem>
@@ -21,7 +29,7 @@
             </BDropdownItem>
         </template>
         <BDropdownItem v-else>
-            <Loading/>
+            <LoadingIcon/>
         </BDropdownItem>
     </BDropdown>
     <BFormSelect class="tnxbsv-select"
@@ -49,20 +57,20 @@
         </template>
     </BFormSelect>
     <div class="flex-v-center" v-else>
-        <Loading/>
+        <LoadingIcon/>
     </div>
 </template>
 
 <script>
-import {BDropdown, BDropdownItem, BFormSelect, BFormSelectOption} from 'bootstrap-vue-next';
-import Loading from '../loading/Loading.vue';
+import {BFormRadioGroup, BDropdown, BDropdownItem, BFormSelect, BFormSelectOption} from 'bootstrap-vue-next';
+import LoadingIcon from '../loading-icon/LoadingIcon.vue';
 
 export const isMultiSelector = function (selector) {
     return selector === 'checkbox' || selector === 'tags' || selector === 'multi-select' || selector === 'texts';
 }
 export default {
     name: 'TnxbsvSelect',
-    components: {BDropdown, BDropdownItem, BFormSelect, BFormSelectOption, Loading},
+    components: {BFormRadioGroup, BDropdown, BDropdownItem, BFormSelect, BFormSelectOption, LoadingIcon},
     props: {
         id: [Number, String],
         modelValue: {
@@ -349,4 +357,9 @@ export default {
 .tnxbsv-select[variant="danger"]:focus {
     box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
 }
+
+.tnxbsv-radio-group.btn-group > .btn {
+    flex: none;
+    --bs-btn-padding-x: 1rem;
+}
 </style>

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/tags-input/TagsInput.vue

@@ -0,0 +1,64 @@
+<template>
+    <BFormTags class="tnxbsv-tags-input"
+        v-model="model"
+        :placeholder="placeholder"
+        :separator="separator"
+        :tag-variant="tagVariant || 'light'"
+        add-button-text="+"
+        :duplicate-tag-text="duplicateTagText"
+        remove-on-delete
+    />
+</template>
+
+<script>
+import {BFormTags} from 'bootstrap-vue-next';
+
+export default {
+    name: 'TnxbsvTagsInput',
+    components: {BFormTags},
+    props: {
+        modelValue: {
+            type: Array,
+            default: () => [],
+        },
+        placeholder: {
+            type: String,
+            default: '输入后回车以添加',
+        },
+        separator: {
+            type: String,
+            default: ','
+        },
+        tagVariant: String,
+        duplicateTagText: {
+            type: String,
+            default: '标签重复',
+        },
+    },
+    data() {
+        return {
+            model: this.modelValue,
+        };
+    },
+    watch: {
+        modelValue() {
+            this.model = this.modelValue;
+        },
+        model() {
+            this.$emit('update:modelValue', this.model);
+        },
+    },
+    methods: {}
+}
+</script>
+
+<style>
+.tnxbsv-tags-input .b-form-tag + .b-from-tags-field > div {
+    padding-left: 0.25rem;
+}
+
+.tnxbsv-tags-input .btn.b-form-tags-button {
+    --bs-btn-padding-x: 0.5rem;
+    margin-left: 0.5rem;
+}
+</style>

package/src/bootstrap-vue/tnxbsv.css

@@ -1,3 +1,15 @@
+::placeholder {
+    color: var(--bs-tertiary-color) !important;
+}
+
+::-webkit-input-placeholder {
+    color: var(--bs-tertiary-color) !important;
+}
+
+::-moz-placeholder {
+    color: var(--bs-tertiary-color) !important;
+}
+
 .link {
     cursor: pointer;
     color: var(--bs-link-color);
@@ -34,3 +46,27 @@
 .accordion-body {
     padding: 1rem;
 }
+
+.toast {
+    width: fit-content;
+    min-width: 5rem;
+    text-align: center;
+}
+
+.toast::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.3);
+}
+
+.form-check {
+    margin-top: 0.125rem;
+}
+
+.form-check > * {
+    cursor: pointer;
+}

package/src/bootstrap-vue/tnxbsv.js

@@ -7,20 +7,37 @@ import 'bootstrap-vue-next/dist/bootstrap-vue-next.css';
 import './tnxbsv.css';
 
 import Button from './button/Button.vue';
+import Cascader from './cascader/Cascader.vue';
 import Dialog from './dialog/Dialog.vue';
 import EnumSelect from './enum-select/EnumSelect.vue';
 import Form from './form/Form.vue';
 import FormGroup from './form/FormGroup.vue';
-import Loading from './loading/Loading.vue';
+import LoadingIcon from './loading-icon/LoadingIcon.vue';
+import LoadingOverlay from './loading-overlay/LoadingOverlay.vue';
 import Paged from './paged/Paged.vue';
 import QueryTable from './query-table/QueryTable.vue';
+import RegionCascader from './region-cascader/RegionCascader.vue';
 import Select from './select/Select.vue';
+import SubmitForm from './submit-form/SubmitForm.vue';
+import TagsInput from './tags-input/TagsInput.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,
+        Cascader,
+        Dialog,
+        EnumSelect,
+        Form,
+        FormGroup,
+        LoadingIcon,
+        Paged,
+        QueryTable,
+        RegionCascader,
+        Select,
+        SubmitForm,
+        TagsInput,
     });
 
     const tnxbsv = Object.assign({}, tnxjq, tnxvue, {
@@ -54,6 +71,98 @@ export default build('tnxbsv', () => {
             this._dialogs.push(dialog);
             return dialogVm;
         },
+        _closeMessage() {
+            this.hideLoading();
+            this.removeToast();
+        },
+        toast(message, timeout, callback, options = {}) {
+            if (typeof timeout === 'function') {
+                options = callback || {};
+                callback = timeout;
+                timeout = undefined;
+            }
+
+            this._closeMessage();
+
+            const div = document.createElement('div');
+            document.body.appendChild(div);
+
+            const Vue = window.tnx.libs.Vue;
+            const ToastComponent = {
+                components: {
+                    BToast: BootstrapVue.BToast
+                },
+                setup() {
+                    const visible = Vue.ref(true);
+                    Vue.onMounted(() => {
+                        setTimeout(() => {
+                            visible.value = false;
+                            // 延迟移除组件，确保动画效果完成
+                            setTimeout(() => {
+                                window.tnx.toastInstance?.unmount();
+                                try {
+                                    document.body.removeChild(div);
+                                } catch (e) {
+                                    // 忽略异常
+                                }
+                            }, 500);
+                        }, timeout || 1500);
+                    });
+                    return {visible};
+                },
+                render() {
+                    return Vue.h(BootstrapVue.BToast, {
+                        modelValue: this.visible,
+                        variant: options.type || 'success',
+                        static: true,
+                        noCloseButton: true,
+                        class: 'position-fixed',
+                        style: {
+                            top: '50%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            zIndex: window.tnx.util.dom.minTopZIndex(),
+                        }
+                    }, () => message);
+                }
+            };
+
+            const instance = window.tnx.createVueInstance(ToastComponent);
+            instance.mount(div);
+            window.tnx.toastInstance = instance;
+        },
+        removeToast() {
+            if (window.tnx.toastInstance) {
+                window.tnx.toastInstance.unmount();
+                try {
+                    document.body.removeChild(window.tnx.toastInstance._container);
+                } catch (e) {
+                    // 忽略异常
+                }
+                window.tnx.toastInstance = null;
+            }
+        },
+        showLoading(message = '', options) {
+            this._closeMessage();
+
+            let div = document.createElement('div');
+            document.body.appendChild(div);
+            let instance = window.tnx.createVueInstance(LoadingOverlay, null, {message});
+            let component = instance.mount(div);
+            window.tnx.loadingInstance = instance;
+            window.tnx.app.eventBus.emit('tnx.showLoading', options);
+            return component;
+        },
+        hideLoading() {
+            if (window.tnx.loadingInstance) {
+                window.tnx.loadingInstance.unmount();
+                document.body.removeChild(window.tnx.loadingInstance._container);
+                window.tnx.loadingInstance = null;
+            }
+        },
+        closeLoading() {
+            this.hideLoading();
+        },
     });
 
     tnxbsv.install = tnxbsv.util.function.around(tnxbsv.install, function (install, vm) {

package/src/element-plus/tnxel.js

@@ -218,9 +218,8 @@ export default build('tnxel', () => {
             this.closeLoading();
         },
         _handleZIndex(selector) {
-            const util = this.util;
             setTimeout(function () {
-                const topZIndex = util.dom.minTopZIndex(2);
+                const topZIndex = window.tnx.util.dom.minTopZIndex(2);
                 if (selector.endsWith(':last')) {
                     selector = selector.substring(0, selector.length - ':last'.length);
                 }
@@ -355,7 +354,7 @@ export default build('tnxel', () => {
             try {
                 window.tnx.loadingInstance = ElLoading.service(options);
                 this._handleZIndex('.el-loading-mask');
-                this.app.eventBus.emit('tnx.showLoading', options);
+                window.tnx.app.eventBus.emit('tnx.showLoading', options);
             } catch (e) {
                 window.tnx.loadingInstance = null;
                 console.error(e);