@truenewx/tnxvue3 3.0.5 → 3.0.7

package/src/bootstrap-vue/query-form/QueryForm.vue

@@ -0,0 +1,41 @@
+<template>
+    <TnxbsvForm class="tnxbsv-query-form" :model="params" inline>
+        <slot></slot>
+        <slot name="actions">
+            <div class="tnxbsv-query-form-actions">
+                <TnxbsvButton variant="outline-primary" icon="bi bi-search" @click="query" v-if="query">
+                    {{ queryText }}
+                </TnxbsvButton>
+            </div>
+        </slot>
+    </TnxbsvForm>
+</template>
+
+<script>
+import TnxbsvForm from '../form/Form.vue';
+import TnxbsvButton from '../button/Button.vue';
+
+export default {
+    name: 'TnxbsvQueryForm',
+    components: {TnxbsvForm, TnxbsvButton},
+    props: {
+        params: {
+            type: Object,
+            default: () => ({}),
+        },
+        query: Function,
+        queryText: {
+            type: String,
+            default: '查询',
+        },
+    },
+    data() {
+        return {};
+    },
+    methods: {}
+}
+</script>
+
+<style>
+
+</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,11 +1,19 @@
 <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'">
-        <BDropdownItem :active="isSelected(emptyValue)" @click="select(emptyValue)" v-if="empty">
+        v-else-if="selector==='dropdown'">
+        <BDropdownItem class="empty-item" :active="isSelected(emptyValue)" @click="select(emptyValue)" v-if="empty">
             <span>{{ emptyText || '&nbsp;' }}</span>
         </BDropdownItem>
         <template v-if="items">
@@ -21,10 +29,11 @@
             </BDropdownItem>
         </template>
         <BDropdownItem v-else>
-            <Loading/>
+            <LoadingIcon/>
         </BDropdownItem>
     </BDropdown>
     <BFormSelect class="tnxbsv-select"
+        :class="{'is-empty': model === emptyValue}"
         v-model="model"
         :key="groupKey"
         :variant="theme"
@@ -32,13 +41,9 @@
         :value-field="valueName"
         :text-field="textName"
         :size="size"
-        :required="!empty"
         v-else-if="items">
-        <template #default>
-            {{ currentText || placeholder }}
-        </template>
         <template #first v-if="empty">
-            <BFormSelectOption :value="emptyValue">{{ emptyText || '&nbsp;' }}</BFormSelectOption>
+            <BFormSelectOption class="empty-item" :value="emptyValue">{{ emptyText || '&nbsp;' }}</BFormSelectOption>
         </template>
         <template #option="{value, text}">
             <slot name="option" :item="getItem(value)" v-if="$slots.option"></slot>
@@ -49,20 +54,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: {
@@ -97,10 +102,9 @@ export default {
         },
         emptyValue: {
             type: [String, Number, Boolean, Array],
-            default: '', // 设为null会告警，暂时先设为空字符，在非字符串类型的情况下是否有问题，有待检验
+            default: null,
         },
         emptyClass: String,
-        placeholder: String,
         disabled: Boolean,
         tagClick: Function, // 点击一个标签选项时调用，如果返回false，则选项不会被选中
         change: Function, // 选中值变化后的事件处理函数，比change事件传递更多参数数据
@@ -349,4 +353,18 @@ export default {
 .tnxbsv-select[variant="danger"]:focus {
     box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
 }
+
+select.tnxbsv-select.is-empty,
+.tnxbsv-select .empty-item {
+    color: var(--bs-tertiary-color);
+}
+
+select.tnxbsv-select.is-empty option:not(.empty-item) {
+    color: var(--bs-body-color);
+}
+
+.tnxbsv-radio-group.btn-group > .btn {
+    flex: none;
+    --bs-btn-padding-x: 1rem;
+}
 </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);
@@ -6,22 +18,17 @@
 .form-inline {
     display: flex;
     flex-wrap: wrap;
-    align-items: center;
 }
 
-.form-inline-group {
+.form-inline .b-form-group {
     display: flex;
     flex-wrap: nowrap;
     height: fit-content;
+    margin-right: 1.5rem;
     margin-bottom: 1rem;
     width: fit-content;
 }
 
-.form-inline-group .col-form-label {
-    white-space: nowrap;
-    margin-right: 1rem;
-}
-
 .badge {
     border: 1px solid transparent;
 }
@@ -34,3 +41,36 @@
 .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;
+}
+
+.tnxbsv-dialog-confirm {
+    display: flex;
+}
+
+.tnxbsv-dialog-confirm i {
+    color: var(--bs-secondary-color);
+    margin-right: 0.5rem;
+}

package/src/bootstrap-vue/tnxbsv.js

@@ -7,21 +7,39 @@ 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 QueryForm from './query-form/QueryForm.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, SubmitForm,
+        Button,
+        Cascader,
+        Dialog,
+        EnumSelect,
+        Form,
+        FormGroup,
+        LoadingIcon,
+        Paged,
+        QueryForm,
+        QueryTable,
+        RegionCascader,
+        Select,
+        SubmitForm,
+        TagsInput,
     });
 
     const tnxbsv = Object.assign({}, tnxjq, tnxvue, {
@@ -55,6 +73,109 @@ export default build('tnxbsv', () => {
             this._dialogs.push(dialog);
             return dialogVm;
         },
+        _closeMessage() {
+            this.hideLoading();
+            this.removeToast();
+        },
+        confirm(message, title, callback, options) {
+            if (typeof title === 'function') {
+                options = callback;
+                callback = title;
+                title = '确认';
+            }
+            let buttons = tnxvue.getDefaultDialogButtons('confirm', callback);
+            message =
+                `<div class="tnxbsv-dialog-confirm"><i class="bi bi-question-circle-fill"></i><div>${message}</div></div>`;
+            return this.dialog(message, title, buttons, options);
+        },
+        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);

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';