@truenewx/tnxvue3 3.0.10 → 3.0.11

package/package.json

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

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

@@ -1,5 +1,5 @@
 <template>
-    <BButton class="tnxbsv-button" :variant="type || 'outline-secondary'" :loading="loading" :disabled="loading">
+    <BButton class="tnxbsv-button" :variant="type || 'light'" :loading="loading" :disabled="loading">
         <i class="me-1" :class="icon" v-if="icon"></i>
         <div>
             <slot></slot>

package/src/bootstrap-vue/cascader/Cascader.vue

@@ -10,7 +10,7 @@
                 @focus="handleFocus"
             />
             <template #append>
-                <BButton variant="outline-secondary" class="btn-append">
+                <BButton variant="light" class="btn-append">
                     <i v-if="clearable && !disabled && modelValue"
                         class="bi bi-x-circle me-1"
                         @click.stop="clearValue">

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

@@ -20,7 +20,7 @@
         <component ref="content" :is="content" v-bind="contentProps" v-else></component>
         <template #footer>
             <TnxbsvButton v-for="(button, index) in buttons" :key="index"
-                :type="button.type"
+                :type="button.type || 'light'"
                 :loading="buttonLoadings[index]"
                 @click="btnClick(index)"
             >

package/src/bootstrap-vue/progress/Progress.vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="tnxbs-progress">
+        <BProgress :variant="type" :key="type" :value="value" :max="max" :show-value="showValue">
+            <div class="progress-bar" :style="{width: percent}">
+                {{ showProgress ? percent : '' }}
+            </div>
+        </BProgress>
+        <span class="tnxbs-progress-value" v-if="showValue">{{ value }}/{{ max }}</span>
+    </div>
+</template>
+
+<script>
+import {BProgress} from 'bootstrap-vue-next';
+
+export default {
+    name: 'TnxbsvProgress',
+    components: {BProgress},
+    props: {
+        type: String,
+        value: {
+            type: Number,
+            default: 0
+        },
+        max: Number,
+        precision: {
+            type: Number,
+            default: 0,
+        },
+        showValue: Boolean,
+        showProgress: Boolean,
+    },
+    data() {
+        return {};
+    },
+    computed: {
+        percent() {
+            return (this.value / this.max).toPercent(this.precision);
+        }
+    },
+    methods: {}
+}
+</script>
+
+<style>
+.tnxbs-progress {
+    display: flex;
+    align-items: center;
+}
+
+.tnxbs-progress .progress {
+    flex-grow: 1;
+}
+
+.tnxbs-progress .tnxbs-progress-value {
+    margin-left: 0.5rem;
+    color: var(--bs-body-color);
+}
+</style>

package/src/bootstrap-vue/tnxbsv.css

@@ -10,6 +10,10 @@
     color: var(--bs-tertiary-color) !important;
 }
 
+.btn-light {
+    border-color: var(--bs-border-color);
+}
+
 .link {
     cursor: pointer;
     color: var(--bs-link-color);

package/src/bootstrap-vue/tnxbsv.js

@@ -15,12 +15,14 @@ import FormGroup from './form/FormGroup.vue';
 import LoadingIcon from './loading-icon/LoadingIcon.vue';
 import LoadingOverlay from './loading-overlay/LoadingOverlay.vue';
 import Paged from './paged/Paged.vue';
+import Progress from './progress/Progress.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';
+import Upload from './upload/Upload.vue';
 
 export const build = tnxvue.build;
 
@@ -34,12 +36,14 @@ export default build('tnxbsv', () => {
         FormGroup,
         LoadingIcon,
         Paged,
+        Progress,
         QueryForm,
         QueryTable,
         RegionCascader,
         Select,
         SubmitForm,
         TagsInput,
+        Upload,
     });
 
     const tnxbsv = Object.assign({}, tnxjq, tnxvue, {
@@ -51,7 +55,7 @@ export default build('tnxbsv', () => {
             let id = new Date().getTime();
             let containerId = 'dialog-container-' + id;
             let componentDefinition = Object.assign({}, Dialog,);
-            let dialogVm = window.tnx.createVueInstance(componentDefinition, null, {
+            let rootProps = Object.assign({}, options, {
                 modelValue: true,
                 id: id,
                 container: '#' + containerId,
@@ -60,6 +64,7 @@ export default build('tnxbsv', () => {
                 contentProps,
                 buttons,
             });
+            let dialogVm = window.tnx.createVueInstance(componentDefinition, null, rootProps);
             const dialogContainer = document.createElement('div');
             dialogContainer.className = 'tnxbsv-dialog-container';
             dialogContainer.id = containerId;

package/src/bootstrap-vue/upload/Upload.vue

@@ -0,0 +1,168 @@
+<template>
+    <div class="tnxbsv-upload">
+        <BOverlay :show="uploading" spinner-variant="primary" spinner-small>
+            <BInputGroup>
+                <BFormInput :value="file?.name" :placeholder="placeholder" tabindex="-1" readonly/>
+                <template #append>
+                    <div class="input-group-append">
+                        <i class="bi bi-x-circle icon-clear" @click="clear" v-if="empty"/>
+                        <BButton :variant="buttonType" @click="toSelect">{{ buttonText }}</BButton>
+                    </div>
+                </template>
+            </BInputGroup>
+            <BFormFile class="d-none" v-model="file" :accept="uploadOptions.extensions || accept"/>
+        </BOverlay>
+        <div class="tnxbsv-upload-error" v-if="errorMessage">{{ errorMessage }}</div>
+    </div>
+</template>
+
+<script>
+import {BOverlay, BInputGroup, BFormInput, BButton, BFormFile} from 'bootstrap-vue-next';
+
+export default {
+    name: 'TnxbsvUpload',
+    components: {BOverlay, BInputGroup, BFormInput, BButton, BFormFile,},
+    props: {
+        app: String, // 上传目标应用名称
+        action: {
+            type: String,
+            required: true,
+        },
+        accept: [String, Array],
+        uploadOptions: {
+            type: Object,
+            default: () => ({}),
+        },
+        placeholder: String,
+        buttonType: {
+            type: String,
+            default: 'light',
+        },
+        buttonText: {
+            type: String,
+            default: '选择文件',
+        },
+        empty: Boolean,
+        beforeUpload: Function,
+        onSuccess: Function,
+        onError: Function,
+    },
+    data() {
+        return {
+            file: null,
+            uploading: false,
+            errorMessage: null,
+        };
+    },
+    computed: {
+        actionUrl() {
+            let baseUrl;
+            if (this.app) {
+                baseUrl = window.tnx.app.rpc.getBaseUrl(this.app);
+            }
+            baseUrl = baseUrl || window.tnx.app.rpc.getDefaultBaseUrl();
+            return baseUrl + this.action;
+        },
+    },
+    watch: {
+        file(newFile, oldFile) {
+            if (newFile) {
+                if (!newFile.handled) {
+                    this.uploadFile();
+                }
+            } else if (!oldFile.handled) {
+                oldFile.handled = true;
+                this.file = oldFile;
+            }
+        }
+    },
+    methods: {
+        toSelect() {
+            const $ = window.tnx.libs.$;
+            $('.tnxbsv-upload input[type="file"]').trigger('click')
+        },
+        clear() {
+            this.file.handled = true;
+            this.$nextTick(() => {
+                this.file = null;
+            });
+        },
+        uploadFile() {
+            if (this.file) {
+                if (this.beforeUpload && this.beforeUpload(this.file) === false) {
+                    return;
+                }
+                const formData = new FormData();
+                formData.append('file', this.file);
+                this.uploading = true;
+                this.errorMessage = null;
+
+                window.tnx.app.rpc.request(this.actionUrl, {
+                    method: 'POST',
+                    body: formData,
+                    timeout: 0,  // 文件上传不设置超时
+                    app: this.app,  // 指定目标应用
+                    success: result => {
+                        if (this.onSuccess) {
+                            this.onSuccess(result);
+                        } else {
+                            console.log('文件上传成功:', result);
+                        }
+                        this.uploading = false;
+                    },
+                    error: error => {
+                        this.uploading = false;
+                        if (this.onError && this.onError(error) === false) {
+                            return;
+                        }
+                        this.errorMessage = error.message;
+                    }
+                });
+            }
+        }
+    }
+}
+</script>
+
+<style>
+.tnxbsv-upload input:focus {
+    outline: none;
+    box-shadow: none;
+    border-color: var(--bs-border-color);
+}
+
+.tnxbsv-upload .input-group-append {
+    position: relative;
+}
+
+.tnxbsv-upload .input-group-append .icon-clear {
+    position: absolute;
+    right: calc(100% + 0.75rem);
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+    z-index: 10;
+    color: var(--bs-tertiary-color);
+}
+
+.tnxbsv-upload .input-group-append .icon-clear:hover {
+    color: var(--bs-secondary-color);
+}
+
+.tnxbsv-upload .input-group-append .btn {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.tnxbsv-upload-error {
+    margin-top: 0.25rem;
+    color: var(--bs-danger);
+    font-size: 87.5%;
+}
+
+.tnxbsv-upload-placeholder {
+    margin-top: 0.25rem;
+    color: var(--bs-tertiary-color);
+    font-size: 87.5%;
+}
+</style>

package/src/tnxvue.js

@@ -175,7 +175,7 @@ export default build('tnxvue', () => {
                 } else if (type === 'close') {
                     return [{
                         text: '关闭',
-                        type: theme || 'default',
+                        type: theme,
                         click(close) {
                             if (typeof callback === 'function') {
                                 return callback.call(this, close);