优化组件

src/view/memberGroup/memberGroupEdit.vue

@@ -10,7 +10,7 @@
                 已选标签
                 <span class="color-c0c4cc font-14">（同一个输入框内标签关系为且）</span>
               </div>
-              <tags-group-list :selectedTagsData="ruleForm.selectedTags" v-model="ruleForm.selectedTags" :showAddMenu="true" />
+              <tags-group-list :selectedTagsData="ruleForm.selectedTags" :tagsGroupRelation="ruleForm.tagsGroupRelation" :showAddMenu="true" @addTags="addTags" @editTags="editTags" />
             </el-form-item>
             <el-form-item label="" prop="groupName" class="w-220">
               <div>分组名称</div>
@@ -105,6 +105,8 @@ export default {
             // }
           ]
         ],
+        // 标签组之间的关系
+        tagsGroupRelation: [],
         newTagVal: '',
         // 分组名称
         groupName: '',
@@ -224,6 +226,16 @@ export default {
       this.$router.push(route);
     },
 
+    // 添加标签
+    addTags(data) {
+      console.log(`添加标签，标签组的索引是${data.tagsGroupIndex}`);
+    },
+
+    // 编辑标签
+    editTags(data) {
+      console.log(`编辑标签，标签组的索引是${data.tagsGroupIndex}，标签的索引是${data.tagsIndex}`);
+    },
+
     /**
      * 计算输入内容的长度、限制输入的长度
      */

src/view/memberGroup/tags-group-list.vue

@@ -6,7 +6,7 @@
       :tagsData="item"
       :showTagsRelation="(index === 0 && selectedTagsData.length > 1) || (index === 1 && selectedTagsData.length > 2)"
       :tagsGroupIndex="index"
-      tagsRelation="or"
+      :tagsRelation="tagsGroupRelation[index]"
       :showAddMenu="showAddMenu"
       :active="activeTagsGroup === index"
       @addTags="addTags"
@@ -69,7 +69,11 @@ import { getMemberTagCount } from '@/request/memberGroup.js';
 export default {
   name: 'tags-detail',
   props: {
+    // 标签数据
     selectedTagsData: Array,
+    // 标签组之间的关系
+    tagsGroupRelation: Array,
+    // 是否显示下拉菜单的"添加标签"按钮
     showAddMenu: {
       type: Boolean,
       default: false
@@ -99,11 +103,16 @@ export default {
   methods: {
     // 添加一个标签组，最多只能有3个标签组
     addTagsGroup() {
-      this.selectedTagsData.length < 3 && this.selectedTagsData.push([]);
+      if (this.selectedTagsData.length < 3) {
+        this.selectedTagsData.push([]);
+        this.selectedTagsData.length > 1 && this.tagsGroupRelation.push('or');
+      }
+      // this.$emit('addTagsGroup');
       this.activeTagsGroup = this.selectedTagsData.length - 1;
     },
     // 删除一个标签组
     delTagsGroup(data) {
+      this.tagsGroupRelation.splice(data.tagsGroupIndex === this.selectedTagsData.length - 1 ? data.tagsGroupIndex - 1 : data.tagsGroupIndex, 1);
       this.selectedTagsData.splice(data.tagsGroupIndex, 1);
       this.activeTagsGroup = 0;
     },
@@ -112,6 +121,7 @@ export default {
       // 添加之前先判断已选中的标签中是否存在即将添加的标签
       this.activeTagsGroup = data.tagsGroupIndex;
       this.showAddTagPop = true;
+      this.$emit('addTags', { tagsGroupIndex: this.activeTagsGroup });
     },
     // 删除标签
     delTags(data) {
@@ -121,12 +131,12 @@ export default {
     // 编辑一个标签
     editTags(data) {
       // 保存之前先判断已选中的标签中是否存在即将添加的标签
-      this.selectedTagsData[data.tagsGroupIndex].splice(data.tagIndex, 1, data.tagData);
       this.activeTagsGroup = data.tagsGroupIndex;
+      this.$emit('editTags', { tagsGroupIndex: data.tagsGroupIndex, tagIndex: data.tagIndex });
     },
     // 修改两个标签组之间的关系
     changeTagsGroupRelation(data) {
-      alert('修改两个标签组之间的关系');
+      this.tagsGroupRelation[data.relationIndex] = this.tagsGroupRelation[data.relationIndex] === 'or' ? 'andNot' : 'or';
     },
     // 点击标签组切换标签组的选中状态
     checkTagsGroup(data) {

src/view/memberGroup/tags-group.vue

@@ -99,20 +99,13 @@ export default {
     editTags(tagIndex) {
       this.$emit('editTags', {
         tagsGroupIndex: this.tagsGroupIndex,
-        tagIndex,
-        tagData: {
-          tagId: 1,
-          tagName: '有车二族',
-          tagValue: '233',
-          newTagVal: '',
-          tagParams: '',
-          isActive: 0
-        }
+        tagIndex
       });
     },
     // 切换与下一个标签组之间的关系
     changeTagsGroupRelation() {
-      this.$emit('changeTagsGroupRelation');
+      this.tagsRelation = this.tagsRelation === 'or' ? 'andNot' : 'or';
+      this.$emit('changeTagsGroupRelation', { relationIndex: this.tagsGroupIndex });
     },
     // 选中当前标签组
     checkTagsGroup() {