标签删除优化

src/App.vue

@@ -24,7 +24,7 @@
                 </div>
                 <div style="display: flex;flex-direction: column;">
                     <el-button size="mini" style="width: 60px;height: 25px;margin-bottom: 5px;margin-left: 10px;"
-                        @click="submitForm">保存任务</el-button>
+                        @click="submitPlan">保存任务</el-button>
                     <el-button size="mini" style="width: 60px;height: 25px;" @click="newAction">新建动作</el-button>
                 </div>
             </div>
@@ -40,17 +40,17 @@
             </div>
             <!-- 动作标签 -->
             <div
-                style="margin-bottom: 5px;margin-left: 15px;margin-right: 15px;width: 470px;overflow: auto;white-space: nowrap;display: flex;">
+                style="margin-bottom: 5px;margin-left: 15px;margin-right: 15px;width: 470px;overflow: auto;white-space: nowrap;display: flex;padding-top: 5px;">
                 <!-- <el-button @click="goback">返回</el-button> -->
                 <draggable v-model="treeNode" chosenClass="chosen" forceFallback="true" group="people" animation="1000"
                     @start="onStart" @end="onEnd" v-if="isChildrenTree == false">
                     <transition-group>
                         <!-- <div class="item" v-for="element in myArray" :key="element.id">{{ element.name }}</div> -->
                         <el-tag class="boxtags" :key="tag.tagId" v-for="(tag, index) in treeNode" @click="selectTag(tag)">
-                            <div style="display: flex;align-items: center;">
-                                <span style="margin-left: 3px;">{{ tag.actionName }}</span>
-                                <img id="closeimg" @click="handleClose(index)" style="width: 15px;"
-                                    src="./assets/close.png">
+                            <div style="display: flex;align-items: center;height: 30px;position: relative;">
+                                <span style="margin-left: 3px;min-width: 20px;">{{ tag.actionName }}</span>
+                                <img id="closeimg" @click="handleClose(tag)"
+                                    style="width: 20px;position: absolute;top: -8px;right: -18px;" src="./assets/close.png">
                             </div>
                         </el-tag>
                     </transition-group>
@@ -60,10 +60,10 @@
                     <transition-group>
                         <el-tag class="boxtags" :key="item.tagId" v-for="(item, index) in childrenTreeNode"
                             @click="selectTag(item)">
-                            <div style="display: flex;align-items: center;">
+                            <div style="display: flex;align-items: center;height: 30px;position: relative;">
                                 <span style="margin-left: 3px;">{{ item.actionName }}</span>
-                                <img id="closeimg" @click="handleClose(index)" style="width: 15px;"
-                                    src="./assets/close.png">
+                                <img id="closeimg" @click="handleClose(item)"
+                                    style="width: 20px;position: absolute;top: -8px;right: -18px;" src="./assets/close.png">
                             </div>
                         </el-tag>
                     </transition-group>
@@ -312,6 +312,7 @@ export default {
                     obj.name = activeItem.actionName
                     obj.Kvid = activeItem.Kvid
                     obj.children = []
+                    console.log(this.treeNode)
                     for (let i = 0; i < this.treeNode.length; i++) {
                         this.actionAll[0].children.push(this.treeNode[i])
 
@@ -413,14 +414,55 @@ export default {
         },
         // 删除标签
         handleClose (tag) {
+            let _this = this
+            if (_this.childrenTreeNode.length > 0 && _this.isChildrenTree == true) {
+                let filteredArray = _this.childrenTreeNode.filter(item => item.Kvid !== tag.Kvid);
+                _this.childrenTreeNode = []
+                for (let i = 0; i < filteredArray.length; i++) {
+                    _this.childrenTreeNode.push(filteredArray[i])
+                }
+                let activeItem = _this.findObjectByKvid(_this.actionAll[0].children, tag.Kvid);
+                let activeParentItem = null
+                // 根目录下处理
+                if (activeItem !== null) {
+                    activeParentItem = _this.findObjectByKvid(_this.actionAll[0].children, activeItem.parentKvid);
+                } else {
+                    let filteredArray = _this.treeNode.filter(item => item.Kvid !== tag.Kvid);
+                    _this.treeNode = []
+                    for (let i = 0; i < filteredArray.length; i++) {
+                        _this.treeNode.push(filteredArray[i])
+                    }
+                }
+                if (activeParentItem == null) {
+                    let filteredArray = _this.childrenTreeNode.filter(item => item.Kvid !== tag.Kvid);
+                    _this.childrenTreeNode = []
+                    for (let i = 0; i < filteredArray.length; i++) {
+                        _this.childrenTreeNode.push(filteredArray[i])
+                    }
+                } else {
+                    let filteredArray = activeParentItem.children.filter(item => item.Kvid !== tag.Kvid);
+                    activeParentItem.children = []
+                    for (let i = 0; i < filteredArray.length; i++) {
+                        activeParentItem.children.push(filteredArray[i])
 
-            if (this.childrenTreeNode.length > 0) {
-                this.childrenTreeNode.splice(this.childrenTreeNode.indexOf(tag), 1);
-            } else {
-                this.treeNode.splice(this.treeNode.indexOf(tag), 1);
+                    }
+                }
+            } else if (_this.treeNode.length > 0 && _this.isChildrenTree == false) {
+                let filteredArray = _this.treeNode.filter(item => item.Kvid !== tag.Kvid);
+                _this.treeNode = []
+                for (let i = 0; i < filteredArray.length; i++) {
+                    _this.treeNode.push(filteredArray[i])
+                }
+                let activeItem = _this.findObjectByKvid(_this.childrenTreeNode, tag.parentKvid);
+                if (activeItem == null) {
+                    let filteredArray = _this.childrenTreeNode.filter(item => item.Kvid !== tag.Kvid);
+                    _this.childrenTreeNode = []
+                    for (let i = 0; i < filteredArray.length; i++) {
+                        _this.childrenTreeNode.push(filteredArray[i])
+                    }
+                }
             }
-            this.isShowAction = false
-
+            _this.isShowAction = false
         },
         // 根据 Kvid 找到对应的对象，并将匹配到的对象后面的所有对象数据删除
         deleteObjectsAfterKvid (dataArray, targetKvid) {
@@ -486,7 +528,7 @@ export default {
             }
         },
         // 计划任务提交
-        submitForm (formName) {
+        submitPlan (formName) {
             this.isShowAction = true
         },
         // 根据parentKvid找当前节点
@@ -559,8 +601,6 @@ export default {
             // 拖拽完最终结果
             console.log(this.treeNode)
         },
-
-
     },
 }
 </script>