@truenewx/tnxvue3 3.0.0-alpha.9 → 3.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truenewx/tnxvue3",
-  "version": "3.0.0-alpha.9",
+  "version": "3.0.1",
   "description": "互联网技术解决方案：Vue3扩展支持",
   "private": false,
   "publishConfig": {
@@ -20,14 +20,14 @@
   },
   "peerDependencies": {
     "element-plus": "~2.8.0",
-    "vue": "~3.4.0",
+    "bootstrap-vue-next": "~0.26.0",
+    "vue": "~3.5.0",
     "vue-router": "~4.4.0"
   },
   "dependencies": {
-    "@truenewx/tnxcore": "3.0.0-alpha.4",
+    "@truenewx/tnxcore": "3.0.1",
     "@element-plus/icons-vue": "2.3.1",
     "async-validator": "4.2.5",
-    "crypto-js": "4.2.0",
     "mitt": "3.0.1"
   },
   "devDependencies": {
@@ -65,6 +65,9 @@
       ],
       "no-undef": "warn",
       "no-useless-escape": "warn",
+      "no-empty": "off",
+      "vue/no-side-effects-in-computed-properties": "warn",
+      "vue/no-mutating-props": "warn",
       "vue/no-v-model-argument": "off",
       "vue/multi-word-component-names": "off"
     }

package/src/aj-captcha/utils/ase.js

@@ -1,11 +1,12 @@
-import CryptoJS from 'crypto-js'
+import CryptoES from 'crypto-es';
+
 /**
  * @word 要加密的内容
  * @keyWord String  服务器随机返回的关键字
  *  */
-export function aesEncrypt(word,keyWord="XwKsGlMcdPMEhR1B"){
-  let key = CryptoJS.enc.Utf8.parse(keyWord);
-  let srcs = CryptoJS.enc.Utf8.parse(word);
-  let encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
-  return encrypted.toString();
+export function aesEncrypt(word, keyWord = "XwKsGlMcdPMEhR1B") {
+    let key = CryptoES.enc.Utf8.parse(keyWord);
+    let srcs = CryptoES.enc.Utf8.parse(word);
+    let encrypted = CryptoES.AES.encrypt(srcs, key, {mode: CryptoES.mode.ECB, padding: CryptoES.pad.Pkcs7});
+    return encrypted.toString();
 }

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

@@ -0,0 +1,26 @@
+<template>
+    <BButton>
+        <i :class="icon" v-if="icon"></i>
+        <span><slot></slot></span>
+    </BButton>
+</template>
+
+<script>
+import {BButton} from 'bootstrap-vue-next';
+
+export default {
+    name: 'TnxbsvButton',
+    components: {BButton},
+    props: {
+        icon: String,
+    },
+    data() {
+        return {};
+    },
+    methods: {}
+}
+</script>
+
+<style>
+
+</style>

package/src/bootstrap-vue/enum-select/EnumSelect.vue

@@ -0,0 +1,133 @@
+<template>
+    <Select v-model="model"
+        :id="id"
+        :selector="selector"
+        :items="items"
+        value-name="key" text-name="caption" index-name="searchIndex"
+        :default-value="defaultValue"
+        :empty="empty"
+        :empty-value="emptyValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :filterable="filterable"
+        :theme="theme"
+        :size="size"
+        :tag-click="tagClick"
+        :change="change"
+    />
+</template>
+
+<script>
+import Select, {isMultiSelector} from '../select/Select.vue';
+
+export default {
+    name: 'TnxbsvEnumSelect',
+    components: {Select},
+    props: {
+        id: [Number, String],
+        modelValue: [String, Number, Boolean, Array],
+        selector: String,
+        type: {
+            type: String,
+            required: true,
+        },
+        subtype: String,
+        defaultValue: String,
+        empty: {
+            type: [Boolean, String],
+            default: false,
+        },
+        emptyValue: {
+            type: [String, Number, Boolean, Array],
+            default: '', // 设为null会告警，暂时先设为空字符，在非字符串类型的情况下是否有问题，有待检验
+        },
+        placeholder: String,
+        disabled: Boolean,
+        tagClick: Function,
+        change: Function,
+        grouped: {
+            type: Boolean,
+            default: false,
+        },
+        filterable: Boolean,
+        theme: String,
+        size: String,
+        app: {
+            type: String,
+            default: () => window.tnx.componentDefaultApp, // 设置为方法以延时加载，确保更改的值生效
+        },
+    },
+    emits: ['update:modelValue'],
+    data() {
+        return {
+            model: this.modelValue,
+            items: null,
+        };
+    },
+    watch: {
+        model(value) {
+            this.$emit('update:modelValue', value);
+        },
+        modelValue() {
+            this.initModel();
+        },
+        type() {
+            this.init();
+        },
+        subtype() {
+            this.init();
+        }
+    },
+    mounted() {
+        this.init();
+    },
+    methods: {
+        init() {
+            if (typeof this.type === 'string') {
+                if (this.type.toLowerCase() === 'boolean') {
+                    this.items = [{
+                        key: true,
+                        caption: true.toText(),
+                    }, {
+                        key: false,
+                        caption: false.toText(),
+                    }];
+                    this.initModel();
+                } else {
+                    let vm = this;
+                    window.tnx.app.rpc.loadEnumItems(this.type, this.subtype, function (items) {
+                        vm.items = items;
+                        vm.initModel();
+                    }, {
+                        app: this.app,
+                    });
+                }
+            }
+        },
+        initModel() {
+            let oldModel = this.model;
+            this.model = this.modelValue;
+            if (isMultiSelector(this.selector)) {
+                return;
+            }
+            if ((this.model === undefined || this.model === null) && !this.empty && this.items && this.items.length) {
+                let item = this.items[0];
+                this.model = item.key;
+                if (this.model !== oldModel && this.change) {
+                    this.change(item);
+                }
+            }
+        },
+        getText(value) {
+            // 暂不支持分组枚举类型
+            if (this.$refs.select) {
+                return this.$refs.select.getText(value);
+            }
+            return undefined;
+        },
+        disableItem(itemKey, disabled, reverseOther) {
+            this.$refs.select.disableItem(itemKey, disabled, reverseOther);
+        },
+    }
+}
+</script>

package/src/bootstrap-vue/loading/Loading.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="spinner-border" :class="extraClass" role="status">
+        <span class="visually-hidden">{{ text }}</span>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'TnxbsvLoading',
+    props: {
+        small: {
+            type: Boolean,
+            default: true,
+        },
+        theme: {
+            type: String,
+            default: 'secondary',
+        },
+        text: {
+            type: String,
+            default: '加载中...',
+        }
+    },
+    data() {
+        return {};
+    },
+    computed: {
+        extraClass() {
+            let extraClass = 'text-' + this.theme;
+            if (this.small) {
+                extraClass += ' spinner-border-sm';
+            }
+            return extraClass;
+        },
+    },
+    methods: {}
+}
+</script>
+
+<style>
+
+</style>

package/src/bootstrap-vue/pagination/Pagination.vue

@@ -0,0 +1,102 @@
+<template>
+    <div class="tnxbsv-pagination" :class="'justify-content-' + align" v-if="paged">
+        <div class="pagination-text">
+            <span>每页</span>
+            <Select v-model="pageSize" :items="pageSizeItems" v-if="pageSizeChangeable"/>
+            <span class="mx-1" v-else>{{ pageSize }}</span>
+            <span>条，共</span>
+            <span class="mx-1">{{ paged.total }}</span>
+            <span>条</span>
+        </div>
+        <BPagination v-model="pageNo"
+            :total-rows="paged.total"
+            :per-page="paged.pageSize"
+            :aria-controls="ariaControls"
+            :aria-label="ariaLabel"
+        />
+    </div>
+</template>
+
+<script>
+import {BPagination} from 'bootstrap-vue-next';
+import Select from '../select/Select.vue';
+
+export default {
+    name: 'TnxbsvPagination',
+    components: {BPagination, Select},
+    props: {
+        paged: Object,
+        pageSizeChangeable: Boolean,
+        align: {
+            type: String,
+            default: 'end', // start | center | end
+        },
+        ariaControls: String,
+        ariaLabel: String,
+        query: Function,
+    },
+    data() {
+        return {
+            pageSize: this.paged?.pageSize || 20,
+            pageNo: this.paged?.pageNo || 1,
+        };
+    },
+    computed: {
+        pageSizeItems() {
+            return [{
+                value: 10,
+                text: '10',
+            }, {
+                value: 20,
+                text: '20',
+            }, {
+                value: 50,
+                text: '50',
+            }];
+        },
+    },
+    watch: {
+        pageNo() {
+            this.toQuery();
+        },
+        pageSize() {
+            this.toQuery();
+        },
+    },
+    methods: {
+        toQuery() {
+            if (this.query) {
+                this.query({
+                    pageSize: this.pageSize,
+                    pageNo: this.pageNo,
+                });
+            }
+        },
+    }
+}
+</script>
+
+<style>
+.tnxbsv-pagination {
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.tnxbsv-pagination .pagination-text {
+    display: flex;
+    align-items: center;
+    color: var(--bs-secondary-color);
+    margin: 0 0.5rem;
+    white-space: nowrap;
+}
+
+.tnxbsv-pagination .form-select {
+    width: 4.5rem;
+    margin: 0 0.5rem;
+}
+
+.tnxbsv-pagination ul {
+    margin-bottom: 0;
+}
+</style>

package/src/bootstrap-vue/query-table/QueryTable.vue

@@ -0,0 +1,84 @@
+<template>
+    <BTable class="tnxbsv-query-table"
+        :id="id"
+        :items="result.records || []"
+        :fields="fields"
+        :busy="result.records === null"
+    >
+        <template v-for="(_, slot) of $slots" v-slot:[slot]="scope">
+            <slot :name="slot" v-bind="scope"></slot>
+        </template>
+        <template #custom-foot>
+            <tr>
+                <td colspan="100%">
+                    <Pagination :paged="result.paged"
+                        :query="query"
+                        :page-size-changeable="pageSizeChangeable"
+                        :aria-controls="id"
+                    />
+                </td>
+            </tr>
+        </template>
+    </BTable>
+</template>
+
+<script>
+import {BTable} from 'bootstrap-vue-next';
+import Pagination from '../pagination/Pagination.vue';
+
+export default {
+    name: 'TnxbsvQueryTable',
+    components: {BTable, Pagination},
+    props: {
+        id: {
+            type: String,
+            default: () => {
+                return 'query-table-' + window.tnx.util.string.uuid32();
+            },
+        },
+        url: {
+            type: String,
+            required: true,
+        },
+        params: {
+            type: Object,
+            required: true,
+        },
+        fields: {
+            type: Array,
+            required: true,
+        },
+        init: Boolean,
+        pageSizeChangeable: Boolean,
+    },
+    data() {
+        return {
+            result: {
+                records: null,
+                paged: null,
+            },
+        };
+    },
+    mounted() {
+        if (this.init) {
+            this.query();
+        }
+    },
+    methods: {
+        query(paging) {
+            let params = Object.assign({}, this.params, paging);
+            this.result.records = null;
+            window.tnx.app.rpc.get(this.url, params, result => {
+                this.result = result;
+            });
+        },
+    }
+}
+</script>
+
+<style>
+.tnxbsv-query-table th,
+.tnxbsv-query-table td {
+    vertical-align: middle;
+}
+</style>