tenghui-ui 2.2.7 → 2.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tenghui-ui",
-  "version": "2.2.7",
+  "version": "2.2.9",
   "description": "vue 2x, tenghui-ui",
   "files": [
     "dist",

package/packages/search/src/Record.vue

@@ -12,9 +12,33 @@
                     <div class="ui-record__item" 
                         v-for="(item, index) in recordData.saves"
                         :key="index"
-                        :title="item.map(v => `${v.label}：${v.valueLabel || v.value}`).join('；')"
+                        :title="item.labels.map(v => `${v.label}：${v.valueLabel || v.value}`).join('；')"
                         @click="handleShortcut(item)">
-                        <span v-for="(v, index) in item" :key="index">{{v.label}}：{{v.valueLabel || v.value}}</span>
+                        <div style="position: absolute; z-index: -1;">
+                            <el-popover
+                                :ref="`EditLabelTitlePopover_${index}`"
+                                v-if="$refs[`EditLabelTitle_${index}`] && $refs[`EditLabelTitle_${index}`][0]"
+                                :reference="$refs[`EditLabelTitle_${index}`][0]"
+                                placement="top"
+                                width="160">
+                                <el-input style="margin-bottom: 10px;" size="mini" v-model="changeLabelTitleVal" placeholder="请输入筛选标题"></el-input>
+                                <div style="text-align: right; margin: 0">
+                                    <el-button size="mini" type="text" @click="$refs[`EditLabelTitlePopover_${index}`][0].doClose()">取消</el-button>
+                                    <el-button type="primary" size="mini" @click="handleConfirmChangeLabelTitle(index)">确定</el-button>
+                                </div>
+                            </el-popover>
+                        </div>
+                        <div>
+                            <div v-if="item.title">
+                                <span>{{ item.title }}</span>
+                            </div>
+                            <div v-else>
+                                <span v-for="(v, index) in item.labels" :key="index">{{v.label}}：{{v.valueLabel || v.value}}</span>
+                            </div>
+                        </div>
+                        <el-tooltip class="item" effect="dark" content="修改筛选标题" placement="top-start">
+                            <i class="el-icon-edit ui-flag--icon" @click.stop="handleShowChangeLabelTitle(item)" :ref="`EditLabelTitle_${index}`"></i>
+                        </el-tooltip>
                         <el-tooltip class="item" effect="dark" content="移除常用筛选" placement="top-start">
                             <i class="el-icon-remove ui-flag--icon" @click.stop="handleOperation(index, 'saves')"></i>
                         </el-tooltip>
@@ -58,21 +82,41 @@ export default {
             recordData: {
                 saves: [],
                 temps: []
-            }
+            },
+
+            changeLabelTitleShow: false,
+            changeLabelTitleVal: '',
+            changeLabelTitleItem: {}
         }
     },
     created() {
         let locData = localStorage.getItem(`SaveRecord_${this.configKey}`);
-        this.recordData = locData ? JSON.parse(locData) : {
+        const recordData = locData ? JSON.parse(locData) : {
             saves: [],
             temps: []
         }
+
+        if (recordData.saves[0] && Array.isArray(recordData.saves[0])) {
+            recordData.saves = recordData.saves.map(item => ({
+                labels: item,
+                title: ''
+            }));
+        }
+
+        this.recordData = recordData;
     },
     methods: {
         handleOperation(index, type) {
             if (type == 'temps') {
                 const addItem = this.recordData.temps[index];
-                this.recordData.saves.unshift(addItem);
+                this.recordData.saves.unshift({
+                    labels: addItem,
+                    title: ''
+                });
+
+                this.$nextTick().then(() => {
+                    this.$forceUpdate();
+                })
             } else {
                 this.recordData.saves.splice(index, 1);
             }
@@ -81,7 +125,7 @@ export default {
         },
         async handleShortcut(item) {
             this.$parent.$children.forEach(ref => {
-                const findItem = item.find(v => v.label == ref.label);
+                const findItem = (item.labels || item).find(v => v.label == ref.label);
                 if (findItem) {
                     ref.modelForm = findItem.value;
                 } else if (ref.label) {
@@ -105,6 +149,18 @@ export default {
                 this.recordData.temps.splice(10);
             }
             localStorage.setItem(`SaveRecord_${this.configKey}`, JSON.stringify(this.recordData));
+        },
+
+        // 修改标签名称
+        handleShowChangeLabelTitle(item) {
+            this.changeLabelTitleShow = true;
+            this.changeLabelTitleItem = item;
+        },
+        handleConfirmChangeLabelTitle(index) {
+            this.changeLabelTitleItem.title = this.changeLabelTitleVal;
+            this.changeLabelTitleVal = '';
+            this.$refs[`EditLabelTitlePopover_${index}`][0].doClose();
+            localStorage.setItem(`SaveRecord_${this.configKey}`, JSON.stringify(this.recordData));
         }
     },
     watch: {
@@ -195,6 +251,7 @@ export default {
 
         &:hover {
             border-color: #b2d8ff;
+            min-width: 100px;
             
             span {
                 background-color: #b2d8ff;
@@ -222,6 +279,11 @@ export default {
             text-align: center;
             box-shadow: 0 0 4px 1px #409EFF;
         }
+
+        .el-icon-edit {
+            right: 28px;
+            font-size: 12px;
+        }
     }
 }