Просмотр исходного кода

Merge branch 'V1.1.7' of http://git.tjyourong.com.cn/ctop/adsp-vue into V1.1.7

朱鑫波 4 лет назад
Родитель
Сommit
02d416b3ff

+ 18 - 7
src/views/modules/crowd-control/components/tree-select/tree-select.less

@@ -32,13 +32,24 @@
             padding: 0 10px;
             height: 348px;
             overflow-y: auto;
-            .left-content-p {
-                height: 25px;
-                line-height: 25px;
-                margin: 0;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
+            .apply-right-tree {
+                display: flex;
+                justify-content: space-between;
+                align-items: baseline;
+                .left-content-p {
+                    display: inline-block;
+                    width: 85%;
+                    height: 25px;
+                    line-height: 25px;
+                    margin: 0;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+                .delete-type-class {
+                    color: #1890ff;
+                    cursor: pointer;
+                }
             }
         }
         .no-data-class {

+ 52 - 8
src/views/modules/crowd-control/components/tree-select/tree-select.vue

@@ -34,14 +34,17 @@
                 </a-popover>
             </div>
             <div v-if="applyTypeOption.length" class="class-left-content">
-                <p v-for="item in applyTypeOption" class="left-content-p" :key="item.key">
-                    <a-tooltip placement="top">
-                        <template slot="title">
-                            <span>{{ item.title }}</span>
-                        </template>
-                        {{ item.title }}
-                    </a-tooltip>
-                </p>
+                <div class="apply-right-tree" v-for="item in applyTypeOption" :key="item.key">
+                    <p class="left-content-p">
+                        <a-tooltip placement="left">
+                            <template slot="title">
+                                <span>{{ item.title }}</span>
+                            </template>
+                            {{ item.title }}
+                        </a-tooltip>
+                    </p>
+                    <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item)" />
+                </div>
             </div>
             <div v-else class="no-data-class">暂无数据</div>
         </div>
@@ -109,6 +112,27 @@ export default {
                 }
             });
         },
+        handleDelTree(list) {
+            const defaultTypeOption = JSON.parse(JSON.stringify(this.applyTypeOption));
+            const defaultCheckKey = JSON.parse(JSON.stringify(this.checkedKeys));
+            const len = defaultTypeOption.length;
+            const keysLen = defaultCheckKey.length;
+            for(let i = len - 1; i >= 0; i--) {
+                if(defaultTypeOption[i].key === list.key) {
+                    defaultTypeOption.splice(i, 1);
+                }
+            }
+            this.applyTypeOption = defaultTypeOption;
+            for(let i = keysLen - 1; i >= 0; i--) {
+                if(defaultCheckKey[i] === list.key) {
+                    defaultCheckKey.splice(i, 1);
+                }
+            }
+            const txt = this.handleDelFindId(this.treeData, list.key);
+            const lastIndex = defaultCheckKey.findIndex(item => item === txt);
+            defaultCheckKey.splice(lastIndex, 1);
+            this.checkedKeys = defaultCheckKey;
+        },
         onChange(e) {
             const value = e.target.value;
             this.treeData = value !== '' ? this.getNewTreeData(this.updateTreeData, value) : [...this.updateTreeData];
@@ -120,6 +144,26 @@ export default {
                 this.leftTreeNoData = false;
             }
         },
+        handleDelFindId(treeData, value) {
+            if (!treeData) {
+                return null;
+            }
+            let node = null;
+            let children = null;
+            let text = '';
+            for (let i = 0; i < treeData.length; i++) {
+                node = treeData[i];
+                if (node.children) {
+                    children = node.children;
+                    text = node.key;
+                    for (let j = 0; j < children.length; j++) {
+                        if (children[j].key === value) {
+                            return text;
+                        }
+                    }
+                }
+            }
+        },
         // 根据关键词查询所有相关的tree节点
         getNewTreeData(treeData, value) {
             if (!treeData) {