tenghui-ui 2.3.2 → 2.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tenghui-ui",
-  "version": "2.3.2",
+  "version": "2.3.4",
   "description": "vue 2x, tenghui-ui",
   "files": [
     "dist",
@@ -37,6 +37,7 @@
     "vue-tsc": "^0.29.8"
   },
   "dependencies": {
+    "axios": "^1.6.2",
     "draggabilly": "^3.0.0",
     "element-ui": "^2.15.8",
     "qs": "^6.11.0",

package/packages/search/src/Record.vue

@@ -29,10 +29,10 @@
                             </el-popover>
                         </div>
                         <div>
-                            <div v-if="item.title">
+                            <div v-if="item.title" class="ui-desc__title">
                                 <span>{{ item.title }}</span>
                             </div>
-                            <div v-else>
+                            <div v-else class="ui-desc__title">
                                 <span v-for="(v, index) in item.labels" :key="index">{{v.prependLabel || v.label}}：{{v.valueLabel || v.value}}</span>
                             </div>
                         </div>
@@ -50,7 +50,9 @@
                         :key="index"
                         :title="item.map(v => `${v.prependLabel || v.label}：${v.valueLabel || v.value}`).join('；')" 
                         @click="handleShortcut(item, index)">
-                        <span v-for="(v, i) in item" :key="i">{{v.prependLabel || v.label}}：{{v.valueLabel || v.value}}</span>
+                        <div class="ui-desc__title">
+                            <span v-for="(v, i) in item" :key="i">{{v.prependLabel || v.label}}：{{v.valueLabel || v.value}}</span>
+                        </div>
                         <el-tooltip class="item" effect="dark" content="添加到常用筛选" placement="top-start">
                             <i class="el-icon-circle-plus ui-flag--icon" @click.stop="handleOperation(index, 'temps')"></i>
                         </el-tooltip>
@@ -89,21 +91,24 @@ export default {
             changeLabelTitleItem: {}
         }
     },
-    created() {
-        let locData = localStorage.getItem(`SaveRecord_${this.configKey}`);
-        const recordData = locData ? JSON.parse(locData) : {
-            saves: [],
-            temps: []
-        }
+    async mounted() {
+        // let locData = localStorage.getItem(`SaveRecord_${this.configKey}`);
+        setTimeout(async () => {
+            let locData = await this.$parent.getConfigCache(`SaveRecord_${this.configKey}`);
+            const recordData = !!Object.entries(locData).length ? locData : {
+                saves: [],
+                temps: []
+            }
 
-        if (recordData.saves[0] && Array.isArray(recordData.saves[0])) {
-            recordData.saves = recordData.saves.map(item => ({
-                labels: item,
-                title: ''
-            }));
-        }
+            if (recordData.saves[0] && Array.isArray(recordData.saves[0])) {
+                recordData.saves = recordData.saves.map(item => ({
+                    labels: item,
+                    title: ''
+                }));
+            }
 
-        this.recordData = recordData;
+            this.recordData = recordData;
+        }, 500);
     },
     methods: {
         handleOperation(index, type) {
@@ -173,7 +178,8 @@ export default {
             if (this.recordData.temps.length > 10) {
                 this.recordData.temps.splice(10);
             }
-            localStorage.setItem(`SaveRecord_${this.configKey}`, JSON.stringify(this.recordData));
+            
+            this.$parent.setConfigCache(`SaveRecord_${this.configKey}`, this.recordData);
         },
 
         // 修改标签名称
@@ -185,7 +191,7 @@ export default {
             this.changeLabelTitleItem.title = this.changeLabelTitleVal;
             this.changeLabelTitleVal = '';
             this.$refs[`EditLabelTitlePopover_${index}`][0].doClose();
-            localStorage.setItem(`SaveRecord_${this.configKey}`, JSON.stringify(this.recordData));
+            this.$parent.setConfigCache(`SaveRecord_${this.configKey}`, this.recordData);
         }
     },
     watch: {
@@ -251,9 +257,6 @@ export default {
         font-size: 12px;
         margin-right: 8px;
         margin-bottom: 8px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
         border: 1px solid #f1f1f1;
         padding: 5px;
         background: #fefefe;
@@ -262,6 +265,13 @@ export default {
         align-self: flex-end;
         cursor: pointer;
         position: relative;
+        max-width: 99%;
+
+        .ui-desc__title {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+        }
 
         span {
             background-color: #f1f1f1;
@@ -276,7 +286,7 @@ export default {
 
         &:hover {
             border-color: #b2d8ff;
-            min-width: 100px;
+            // min-width: 100px;
             
             span {
                 background-color: #b2d8ff;
@@ -290,9 +300,8 @@ export default {
 
         .ui-flag--icon {
             position: absolute;
-            right: 5px;
-            top: 50%;
-            margin-top: -8px;
+            left: 2px;
+            top: -8px;
             font-size: 16px;
             color: #409EFF;
             display: none;
@@ -306,7 +315,7 @@ export default {
         }
 
         .el-icon-edit {
-            right: 28px;
+            left: 26px;
             font-size: 12px;
         }
     }

package/packages/search/src/index.vue

@@ -1,6 +1,11 @@
 <template>
     <div class="ui-search" ref="Search" v-loading="loadSearch">
-        <div class="ui-search__main" v-show="collspase">
+        <div class="ui-search--mask" 
+            v-loading="true" 
+            element-loading-text="加载配置中"
+            element-loading-background="rgba(255, 255, 255, 1)"
+            v-if="loadingConfig"></div>
+        <div class="ui-search__main" :class="{ 'loaddone': loadingConfig == false }" v-show="collspase">
             <slot v-if="!useConfig"></slot>
             <div v-else v-show="false"><slot></slot></div>
             <template v-if="!loadSearch && useConfig">
@@ -146,7 +151,10 @@ export default {
             searchHeight: '',
             listenerSearchTimes: '',
             collspase: true,
-            showTip: false
+            showTip: false,
+
+            localConfig: null,
+            loadingConfig: null
         }
     },
     computed: {
@@ -329,7 +337,8 @@ export default {
                 checkItems: this.checkItems,
                 sortItems: this.sortItems
             }
-            localStorage.setItem(`SearchCfg__${this.configKey}`, JSON.stringify(saveConfig));
+
+            this.setConfigCache(`SearchCfg__${this.configKey}`, saveConfig);
 
             const sortItems = this.sortItems.map(item => {
                 const findItem = this.childItems.find(v => v.$options.propsData.label == item);
@@ -354,6 +363,54 @@ export default {
                     findTableRes && findTableRes.handleRefreshHeight();
                 }
             }, 200);
+        },
+
+
+        async setConfigCache(key, value) {
+
+            if (!this.$UICONFIG.setCacheApi) {
+
+                localStorage.setItem(key, JSON.stringify(value));
+                return;
+            }
+
+            this.localConfig[key] = JSON.stringify(value);
+            const { data:res } = await this.$http.post(this.$UICONFIG.setCacheApi, {
+                code: this.configKey,
+                datas: this.localConfig
+            });
+        },
+
+        async getConfigCache(key) {
+
+            if (!this.$UICONFIG.getCacheApi) {
+                this.loadingConfig = false;
+                return JSON.parse(localStorage.getItem(key) || "{}");
+            }
+
+            // if (this.loadingConfig) {
+            //     await (() => {
+            //         return new Promise(resolve => {
+            //             let waitLoad = setTimeout(() => {
+            //                 resolve(true);
+            //             }, 500);
+            //         })
+            //     })();
+            // }
+            
+            if (!this.localConfig) {
+                this.loadingConfig = true;
+                const { data:res } = await this.$http.post(this.$UICONFIG.getCacheApi, {
+                    code: this.configKey
+                });
+
+                setTimeout(() => {
+                    this.loadingConfig = false;
+                }, 200)
+                this.localConfig = !Object.entries(res.data).length ? {} : res.data;
+            }
+
+            return JSON.parse(this.localConfig[key] || "{}");
         }
     },
     async mounted() {
@@ -382,11 +439,20 @@ export default {
 
             
             // 读取缓存配置
-            const locConfig = JSON.parse(localStorage.getItem(`SearchCfg__${this.configKey}`) || "{}");
+            const locConfig = await this.getConfigCache(`SearchCfg__${this.configKey}`);
             if (locConfig.checkItems) {
                 await this.$nextTick();
-                this.checkItems = locConfig.checkItems;
-                this.sortItems = locConfig.sortItems;
+
+                // 处理搜索条件发生变更
+                const newItemInx = this.sortItems.findIndex(v => !locConfig.sortItems.includes(v));
+                if (newItemInx > -1) {
+                    const newItem = this.sortItems[newItemInx];
+                    locConfig.checkItems.push(newItem);
+                    locConfig.sortItems.splice(newItemInx, 0, newItem);
+                }
+
+                this.checkItems = locConfig.checkItems.filter(v => this.sortItems.includes(v));
+                this.sortItems = locConfig.sortItems.filter(v => this.sortItems.includes(v));
                 this.handleRenderConfig();
             }
         } else {
@@ -436,6 +502,7 @@ export default {
 </script>
 <style lang="less" scoped>
     .ui-search {
+        overflow: hidden;
         // height: 138px;
         box-sizing: border-box;
         margin: 10px 10px 0 10px;
@@ -454,6 +521,12 @@ export default {
 
         &__main {
             display: flex;
+            opacity: 0;
+            transition: all .2s linear;
+
+            &.loaddone {
+                opacity: 1;
+            }
         }
 
         &__footer {
@@ -612,4 +685,13 @@ export default {
             width: 100%;
         }
     }
+
+    .ui-search--mask {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 2;
+    }
 </style>