实现在会员标签页添加手工标签的功能

src/router/index.js

@@ -75,11 +75,11 @@ export const constantRouterMap = [
         }
       },
       {
-        path: '/manualTagEdit',
-        component: _import('manualTag', 'manualTagEdit'),
-        name: '编辑手工标签',
+        path: '/manualTagValueEdit',
+        component: _import('manualTag', 'manual-tag-value-edit'),
+        name: '标签值设置',
         meta: {
-          title: '会员标签-编辑手工标签'
+          title: '会员标签-标签值设置'
         }
       },
       {

src/view/manualTag/manualTagEdit.css

@@ -9,3 +9,9 @@
 .manualTagEdit-wrap .manualTagEdit-wrap__form .el-form-item__label {
   color: #606266;
 }
+.tag-value-table .tag-cell {
+  height: 70px;
+}
+.tag-value-table .tag-head {
+  height: 23px;
+}

src/view/platformTag/member-tag.vue

@@ -6,7 +6,7 @@
 
       <div class="member-box">
         <div class="tag-input">
-          <el-input placeholder="请输入关键词回车搜索标签" prefix-icon="el-icon-search" style="width: 348px" v-model="memberTag" @keyup.native.enter="searchMemberList" clearable></el-input>
+          <el-input placeholder="请输入关键词回车搜索标签" prefix-icon="el-icon-search" style="width: 348px" v-model="memberTag" @keyup.native.enter="searchMemberList" @clear="allTagList" clearable></el-input>
         </div>
         <div class="main-tag">
           <div class="tag-list">
@@ -21,10 +21,10 @@
             <p class="tag-name">
               <!--{{ tagName }}-->
               {{showSearchResult ? `【${tagName}】搜索结果` : tagName}}
-              <el-button type="primary" class="add-newtag" @click="addNewTag" v-show="handTag == 1">新增标签</el-button>
+              <el-button type="primary" class="add-newtag" @click="editHandTag()" v-show="handTag == 1">新增标签</el-button>
             </p>
 
-            <tag-container @deleteHandTag="deleteHandTag" :data="memberTagList" :handTag="handTag" :groupId="groupId" :refersh="refershList" @addTag="selectedTag" ref="tagContainer" />
+            <tag-container @deleteHandTag="deleteHandTag" :data="memberTagList" :handTag="handTag" :groupId="groupId" :refersh="refershList" @addTag="selectedTag" @editHandTag="editHandTag" ref="tagContainer" />
 
             <div class="page-box" v-if="total > 0">
               <el-pagination
@@ -109,6 +109,7 @@
       </div>
     </div>
     <edit-tag :showEditTagPop.sync="showEditTagPop" :tagData="tagData" :title="editPopType === 'add' ? '添加标签' : '编辑标签'" @returnTagData="returnTagData" @refersh="refersh"></edit-tag>
+    <manual-tag-edit :options="manualTagPop" :showPop.sync="manualTagPop.show" @save="addNewTag"></manual-tag-edit>
   </div>
 </template>
 
@@ -119,6 +120,7 @@ import navCrumb from '@/components/nav/nav.vue';
 import TagsGroupList from '../memberGroup/tags-group-list';
 import TagType from './tag-type';
 import TagContainer from './tag-container';
+import ManualTagEdit from '../manualTag/manualTagEdit';
 import { getMemberTag, getMemberTagList, addNewGroup } from '@/request/api';
 import EditTag from '../memberGroup/edit-tag';
 import { mapState } from 'vuex';
@@ -135,7 +137,8 @@ export default {
     TagType,
     TagContainer,
     TagsGroupList,
-    EditTag
+    EditTag,
+    ManualTagEdit
   },
 
   data() {
@@ -237,7 +240,16 @@ export default {
 
       showEditTagPop: false,
       tagData: {},
-      editPopType: 'add'
+      editPopType: 'add',
+      manualTagPop: {
+        show: false,
+        popTitle: '',
+        // popTitle: '编辑手工标签',
+        // tagId: '6285cee7e2e14dddae3e2322c6ef6089'
+        tagId: '',
+        tagLevelGroupId: '',
+        tagTwoLevelGroupId: ''
+      }
     };
   },
 
@@ -385,6 +397,22 @@ export default {
       this.tagData.editCondition = false;
       this.showEditTagPop = true;
     },
+    // 新增第三级手工标签
+    editHandTag(list) {
+      /**
+       * 第一级标签切换时，重置manualTagPop.tagTwoLevelGroupId和manualTagPop.tagLevelGroupId为空
+       * 第二级标签切换时，修改manualTagPop.tagTwoLevelGroupId为当前第二级标签的tagLevelGroupId，重置manualTagPop.tagLevelGroupId为空
+       * 第三级标签切换时，修改manualTagPop。tagLevelGroupId为当前第三级标签的tagLevelGroupId，修改manualTagPop.tagTwoLevelGroupId为parentLevelGroupId
+       *
+       * 编辑三级手工标签，修改manualTagPop.tagId为list.tagId
+       * 新增三级手工标签，重置manualTagPop.tagId为空
+       *
+       * 然后将manualTagPop传递给manualTagEdit组件
+       * */
+      this.manualTagPop.tagId = list ? list.tagId : '';
+      this.manualTagPop.popTitle = list ? '编辑手工标签' : '新增手工标签';
+      this.manualTagPop.show = true;
+    },
     async getTagList() {
       const Data = await getMemberTag();
       if (Data.result && Data.result.length) {
@@ -478,6 +506,8 @@ export default {
       this.loadMemberTagList(this.params);
       this.groupId = list.id;
       this.handTag = list.handTag;
+      this.manualTagPop.tagTwoLevelGroupId = '';
+      this.manualTagPop.tagLevelGroupId = '';
       this.changeTagTitle(list.name);
     },
     changeTagTitle(name) {
@@ -500,11 +530,9 @@ export default {
         localStorage.setItem('groupId', '');
       }
     },
-    // 添加手工标签
+    // 添加手工标签后刷新标签列表
     addNewTag() {
-      this.$router.push({
-        path: '/manualTagEdit'
-      });
+      this.loadMemberTagList(this.params);
     },
     // 删除手工
     deleteHandTag(id) {
@@ -589,6 +617,8 @@ export default {
       this.loadMemberTagList(this.params);
       this.groupId = list.id;
       this.handTag = list.handTag;
+      this.manualTagPop.tagTwoLevelGroupId = list.tagLevelGroupId;
+      this.manualTagPop.tagLevelGroupId = '';
       this.changeTagTitle(list.name);
     });
     // 处理三级标签
@@ -613,6 +643,8 @@ export default {
       this.loadMemberTagList(this.params);
       this.groupId = list.id;
       this.handTag = list.handTag;
+      this.manualTagPop.tagTwoLevelGroupId = list.parentLevelGroupId;
+      this.manualTagPop.tagLevelGroupId = list.tagLevelGroupId;
       this.changeTagTitle(list.name);
     });
     this.defaultDate();
@@ -692,6 +724,7 @@ export default {
   .member-box {
     padding-bottom: 20px;
     margin: 20px 32px 0;
+    min-width: 1500px;
     min-height: 70vh;
     background-color: #fff;
     .tag-input {

src/view/platformTag/tag-container.vue

@@ -7,7 +7,7 @@
           <span class="tag-name">{{ scope.row.tagName }}</span>
           <el-tooltip class="item" effect="dark" :content="scope.row.refersh ? '更新标签' : '添加标签'" placement="bottom">
             <!-- :class="{ 'icon-shoudonggengxin': scope.row.refersh }" -->
-            <i class="iconfont icon-jia icon-tag-name" @click="addTag(scope.row)"></i>
+            <i class="iconfont icon-tag-name" :class="scope.row.refersh ? 'icon-shoudonggengxin' : 'icon-jia'" @click="addTag(scope.row)"></i>
           </el-tooltip>
         </template>
       </el-table-column>
@@ -21,10 +21,11 @@
           <span> {{ scope.row.isActive == 1 ? '实时' : '非实时' }} </span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" v-if="handTag" min-width="150">
+      <el-table-column label="操作" v-if="handTag" min-width="200">
         <template slot-scope="scope">
           <!-- <span v-if="scope.row.tagType == 1"> -->
             <el-button type="text" @click="editHandTag(scope.row)">编辑</el-button>
+            <el-button type="text" @click="editHandTagValue(scope.row)">标签值设置</el-button>
             <el-button type="text" @click="deleteHandTag(scope.row)">删除</el-button>
           <!-- </span> -->
         </template>
@@ -67,16 +68,19 @@ export default {
   },
 
   methods: {
-    // 添加标签 弹框里面操作
+    // 将标签添加到已选标签 弹框里面操作
     addTag(list) {
       this.$emit('addTag', list);
     },
     editHandTag(list) {
+      this.$emit('editHandTag', list);
+    },
+    editHandTagValue(list) {
       localStorage.setItem('jumpTag', '');
       localStorage.setItem('jumpThirdTag', '');
-      this.dispatch('member-tag', 'edit-third-tag');
+      // this.dispatch('member-tag', 'edit-third-tag');
       this.$router.push({
-        path: '/manualTagEdit',
+        path: '/manualTagValueEdit',
         query: { tagId: list.tagId }
       });
     },