update: 标签

src/components/Trash.vue

@@ -2,7 +2,8 @@
   <div id="trash">
     <el-popover placement="top-start" trigger="hover" content="一键清除废弃标签值">
       <div slot="reference" class="trash" @click="dialogVisible = true">
-        <el-badge :value="trashList.length > 99 ? '99+' : trashList.length" class="badge">
+        <!-- $store.state.delTrashNum 该值在活动标签和手工标签列表删除里也有更新 -->
+        <el-badge :value="$store.state.delTrashNum > 99 ? '99+' : $store.state.delTrashNum" class="badge">
           <i class="iconfont icon-delete trashIcon"></i>
         </el-badge>
       </div>
@@ -12,8 +13,8 @@
       <header>已选择待删除的标签/标签值</header>
       <ul class="tagBox">
         <li v-for="item in trashList" :key="item.tagItemId" class="tagItem">
-          {{ item.tagItemName }}
-          <i class="iconfont icon-guanbi1 delIcon" @click="delCheckTag(item.tagItemId)"></i>
+          {{ item.tagItemId == null ? item.tagName : item.tagItemName }}
+          <i class="iconfont icon-guanbi1 delIcon" @click="delCheckTag(item.tagItemId, item.tagId)"></i>
         </li>
       </ul>
       <span slot="footer">
@@ -53,6 +54,7 @@ export default {
         const { errorCode, message, result = [] } = res;
         if (errorCode != 1) return this.$message.error(message);
         this.trashList = result;
+        this.$store.commit('changeDelTrashNum', result.length);
         this.progress = result.length;
       });
     },
@@ -89,8 +91,9 @@ export default {
         this.$emit('beginClean')
       });
     },
-    delCheckTag(tagItemId) {
-      delTrashList({ tagItemId }).then(res => {
+    delCheckTag(tagItemId, tagId) {
+      const type = tagItemId == null ? 1 : 0;
+      delTrashList({ tagItemId: type ? tagId : tagItemId, type }).then(res => {
         const { errorCode, message } = res;
         if (errorCode != 1) return this.$message.error(message);
         this.getTrashList();
@@ -143,7 +146,6 @@ export default {
 }
 header {
   color: #303133;
-  font-weight: 700;
 }
 .tagBox {
   display: flex;
@@ -153,7 +155,6 @@ header {
     margin-top: 16px;
     margin-right: 8px;
     padding: 3px 8px;
-    border: 1px solid #dcdfe6;
     border-radius: 2px;
     font-size: 13px;
     color: #2f54eb;

src/components/tag/tag-config-options.vue

@@ -257,7 +257,7 @@
         <div :key="'tag11' + pindex">
           <template v-if="loadSelector">
             <!--scenes服务门店查上线，其余门店查所有-->
-            <dm-store-selector :options="parent.uuidOptions" :creatorId="creatorId" :uuid.sync="parent.uuid" ref="storeNew" :isAdd="!parent.uuid" :scenes="tagId == 'd568b880d8464a9b9365b9861828f587' ? '': 'auth'" :scenesVal="tagId == 'd568b880d8464a9b9365b9861828f587' ? '': 'auth'" />
+            <dm-store-selector :options="parent.uuidOptions" :creatorId="creatorId" :uuid.sync="parent.uuid" ref="storeNew" :isAdd="!parent.uuid" :scenes="tagId == 'd568b880d8464a9b9365b9861828f587' ? '': 'tagScenes'" :scenesVal="tagId == 'd568b880d8464a9b9365b9861828f587' ? '': 'tagScenes'" />
           </template>
           <!-- <vue-gic-store-new :options="parent.uuidOptions" :creatorId="creatorId" :uuid.sync="parent.uuid" ref="storeNew" :isAdd="!parent.uuid"> </vue-gic-store-new> -->
         </div>
@@ -2561,7 +2561,7 @@ export default {
     .flex-direction {
       display: flex;
       flex-direction: column;
-      padding-left: 110px;
+      padding-left: 118px;
       box-shadow: border-box;
       /deep/ .el-checkbox {
         margin: 0;

src/router/index.js

 import Router from 'vue-router';
 import _import from './_import.js';
+import delCache from '@/utils/router-utils.js';
 const errorPage = r => {
   import('view/errorPage/index.vue').then(module => {
     r(module);
@@ -19,7 +20,10 @@ export const constantRouterMap = [
         name: '会员标签',
         component: _import('platformTag', 'member-tag'),
         meta: {
-          title: '会员标签'
+          title: '会员标签',
+          keepAlive: true,
+          componentName: 'member-tag',
+          fromPath: ['/manualTagValueEdit']
         }
       },
       {
@@ -126,7 +130,10 @@ export const constantRouterMap = [
             component: _import('memberGroup', 'memberGroupList'),
             name: '会员分组',
             meta: {
-              title: '会员标签-会员分组'
+              title: '会员标签-会员分组',
+              keepAlive: true,
+              componentName: 'memberGroupList',
+              fromPath: ['/memberGroupEdit','/memberLevelDetail', '/memberGroupDetail']
             }
           },
           {
@@ -190,9 +197,18 @@ export const constantRouterMap = [
   },
   { path: '*', redirect: '/404', hidden: true }
 ];
-
-export default new Router({
+const router = new Router({
   routes: constantRouterMap,
   base: '/member-tag/',
   scrollBehavior: () => ({ y: 0 })
-});
+})
+router.beforeEach((to, from, next) => {
+  const { keepAlive, componentName, fromPath = [] } = to.meta || {};
+  fromPath.push('/');
+  // 当前路径的keepAlive为true而且from.path不在fromPath中时，将清除to.path的缓存
+  if (keepAlive && fromPath.every(el => el != from.path)) {
+    delCache(this.a.apps, componentName);
+  }
+  next();
+})
+export default router;

src/store/store.js

@@ -11,7 +11,8 @@ export default new Vuex.Store({
     show: false,
     tagRealName: '',
     uniqueId: '',
-    isSuperAdmin: 0
+    isSuperAdmin: 0,
+    delTrashNum: 0
   },
   mutations: {
     [types.LOGIN]: (state, data) => {
@@ -36,6 +37,9 @@ export default new Vuex.Store({
     },
     ['changeSuperAdmin'](state, data) {
       state.isSuperAdmin = data;
+    },
+    ['changeDelTrashNum'](state, data) {
+      state.delTrashNum = data;
     }
   }
 });

src/utils/router-utils.js

+/**
+ * 需求分析
+ * A是列表页，B是详情页，C是另一个列表页
+ * A=>B=>A A的状态不变
+ * A=>C=>A A为初始状态
+ * A=>B=>C=>A A为初始状态
+ * A=>B=>A=>C=>A A为初始状态
+ * A=>B=>A=>C=>A=>B=>A A的状态不变（保持A最新的状态）
+ * A=>B=>A=>C=>A=>B=>C=>A A为初始状态
+ */
+
+/**
+ * 查找指定的组件实例
+ * @param {array} components 组件树
+ * @param {string} componentName 指定的组件name
+ * @returns 找到的组件实例
+ */
+function getComponent(components, componentName) {
+  let result = {};
+  components.some(el => {
+    if (el.$options.name == componentName) {
+      result = el;
+    } else if (Array.isArray(el.$children)) {
+      result = getComponent(el.$children, componentName);
+    }
+    return result.$el;
+  });
+  return result;
+}
+
+/**
+ * 清除指定组件的缓存
+ * @param {object} vm 组件实例
+ */
+function delCache(vm) {
+  let { componentOptions, parent = {}, key } = vm.$vnode || {};
+  let { cache, keys } = parent.componentInstance || {};
+  cache = cache || {};
+  keys = Array.isArray(keys) ? keys : [];
+
+  if (!componentOptions) return;
+
+  if (!key) {
+    const { Ctor, tag } = componentOptions;
+    key = Ctor.cid + (tag ? `::${tag}` : '');
+  }
+  if (cache[key]) {
+    if (Array.isArray(keys)) {
+      vm.$vnode.parent.componentInstance.keys = keys.filter(v => v != key);
+    }
+    delete vm.$vnode.parent.componentInstance.cache[key];
+  }
+}
+
+export default (components, componentName) => {
+  delCache(getComponent(components, componentName));
+};

src/view/layout/layout.vue

 <template>
   <dm-layout project-name="report">
     <keep-alive>
-        <router-view :key="$route.fullPath"></router-view>
+        <router-view v-if="$route.meta.keepAlive" :key="$route.fullPath"></router-view>
     </keep-alive>
+    <router-view v-if="!$route.meta.keepAlive" />
   </dm-layout>
 </template>
 
 <script>
 export default {
-  name: 'layout'
+  name: 'layout',
 }
 </script>

src/view/manualTag/manual-tag-value-edit-info.vue

@@ -51,57 +51,6 @@
                   <!-- 基本信息 -->
                   <template v-if="item.code == 'name'">
                     <div @click="linkDetail(scope.row.memberId, scope.row.isWeixinMember)" style="cursor: pointer;" class="tablecontent-cell">
-                      <!-- <el-popover placement="top-start" width="400" height="180" trigger="hover" @show="showSingleInfo(scope.row.memberId)">
-                        <div class="pointer" @click="linkDetail(scope.row.memberId, scope.row.isWeixinMember)">
-                          <div class="singelinfo flex">
-                            <div class="singelinfo-img">
-                              <img width="100" height="100" :src="scope.row.thirdImgUrl ? scope.row.thirdImgUrl : require('../../assets/group/member_img.png')" alt="" />
-                            </div>
-                            <div class="singelinfo-content flex-1 pLeft10 pRight10">
-                              <span class="lheigth0">
-                                {{ scope.row.memberName }}
-                                <span
-                                  :title="singleInfo.status == 0 ? '取消关注公众号' : singleInfo.status == 1 ? '已关注公众号' : '未关注公众号'"
-                                  class="channelicon fr"
-                                  :class="singleInfo.status == 0 ? 'gzhiconcanclegray' : singleInfo.status == 1 ? 'gzhicon' : 'gzhicongray'"
-                                ></span>
-                                <span
-                                  :title="singleInfo.wxStatus == 0 ? '未使用小程序' : singleInfo.wxStatus == 1 ? '使用过小程序' : ''"
-                                  class="channelicon fr m-r-6"
-                                  :class="singleInfo.wxStatus == 0 ? 'xcxicongray' : singleInfo.wxStatus == 1 ? 'xcxicon' : ''"
-                                ></span>
-                              </span>
-                              <p class="lheigth0">
-                                <span class="evl-right">{{ singleInfo.sex }}</span>
-                                <span class="evl-right">{{ singleInfo.age }}</span>
-                                <span :title="singleInfo.cardNo">{{ singleInfo.cardNo }}</span>
-                              </p>
-                              <p class="lheigth0">
-                                <span>{{ singleInfo.mainStoreName }}</span>
-                              </p>
-                              <div class="singelinfo-cost flex">
-                                <div class="singelinfo-costitem flex-1">
-                                  <p>{{ singleInfo.costFee }}</p>
-                                  <p>消费总额</p>
-                                </div>
-                                <div class="singelinfo-costitem flex-1">
-                                  <p>{{ singleInfo.costTimes }}</p>
-                                  <p>消费次数</p>
-                                </div>
-                                <div class="singelinfo-costitem">
-                                  <p>{{ singleInfo.lastCost }}</p>
-                                  <p>最近消费</p>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                          <div class="singelinfo-jl flex mBottom20 mTop20">
-                            <a class="singelinfo-jlitem flex-1">消费记录 ({{ singleInfo.numOfSale }})</a>
-                            <a class="singelinfo-jlitem flex-1">营销记录 ({{ singleInfo.numOfmarket }})</a>
-                            <a class="singelinfo-jlitem flex-1">卡券记录 ({{ singleInfo.couponCount }})</a>
-                          </div>
-                        </div>
-                      </el-popover> -->
                         <span>
                           <div class="flex">
                             <span class="table-member__img inline-block middle border-box m-r-10">
@@ -115,6 +64,10 @@
                         </span>
                     </div>
                   </template>
+                  <!-- 会员卡号 -->
+                  <template v-if="item.code == 'cardNo'">
+                    {{ scope.row.cardNo }}
+                  </template>
                   <!-- 会员等级 -->
                   <template v-if="item.code == 'grade'">
                     {{ scope.row.gradeName }}
@@ -220,10 +173,6 @@
                   <template v-if="item.code == 'createCardStoreName'">
                     {{ scope.row.openStoreName }}
                   </template>
-                  <!-- 会员卡号 -->
-                  <template v-if="item.code == 'cardNo'">
-                    {{ scope.row.cardNo }}
-                  </template>
                   <!-- 开卡导购 -->
                   <template v-if="item.code == 'openClerkId'">
                     {{ scope.row.openClerkId }}
@@ -277,6 +226,7 @@
                     :limit-code="$buttonCode.memberTagRecordObserve"
                     :href="'/member/#/wechatmemberDetail?memberId=' + scope.row.memberId + '&channel=wxMember&fromPage=memberGroup'"
                     class="el-button el-button--text"
+                    style="fontWeight: normal"
                     >查看</a
                   >
                   <a
@@ -286,6 +236,7 @@
                     :limit-code="$buttonCode.memberTagRecordObserve"
                     :href="'/member/#/posmemberDetail?memberId=' + scope.row.memberId + '&channel=posMember&fromPage=memberGroup'"
                     class="el-button el-button--text"
+                    style="fontWeight: normal"
                     >查看</a
                   >
                 </template>

src/view/manualTag/manual-tag-value-edit.vue

@@ -234,7 +234,8 @@ export default {
         };
         this.refreshTag.push({
           tagItemIndex: index,
-          tagItemId: item.tagItemId
+          tagItemId: item.tagItemId,
+          type: 0
         });
         this.tagValTableData[index].showDelPopOver = false;
         getRequest('/delTagItem/add', para).then(res => {
@@ -443,7 +444,7 @@ export default {
               // 已删除
               if (this.tagValTableData[tagItemIndex].tagItemId === tagItemId) {
                 this.refreshTag = this.refreshTag.filter(item => item.tagItemId !== tagItemId)
-                this.getValueData();
+                // this.getValueData();
               }
               break;
             case 5:

src/view/manualTag/manualTagEdit.vue

@@ -3,8 +3,7 @@
     <div class="manualTagEdit-wrap">
       <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
         <el-form-item label="标签名称：" prop="tagName">
-          <el-input class="w-full" placeholder="请输入内容" v-model="ruleForm.tagName" :maxlength="15"></el-input>
-          <label class="input-label">{{ ruleForm.tagName.length }}/15</label>
+          <el-input class="w-full" placeholder="请输入标签名称" v-model="ruleForm.tagName" :maxlength="15" show-word-limit></el-input>
         </el-form-item>
         <el-form-item label="所属分类：" prop="tagLevel">
           <el-form-item prop="tagTwoLevelGroupId" class="fl">
@@ -39,7 +38,7 @@
       </el-form>
       <div class="manualTagEdit-btns">
         <el-button @click="$emit('update:showPop', false)">取消</el-button>
-        <el-button type="primary" @click="confirmSave">保存</el-button>
+        <el-button type="primary" @click="confirmSave">确定</el-button>
       </div>
     </div>
   </el-dialog>

src/view/memberGroup/index.vue

@@ -2,9 +2,7 @@
   <div id="index">
         <transition name="fade" mode="out-in">
           <!-- 缓存已经填好内容的页面 -->
-          <keep-alive include="memberGroupList">
-          <router-view></router-view>
-          </keep-alive >
+            <router-view></router-view>
         </transition>
   </div>
 </template>

src/view/platformTag/member-tag.vue

@@ -65,7 +65,7 @@
               @remote-sort="remoteSort"
             />
             <tag-container-system v-show="activeTag == 'system'" :data="memberTagList" :refersh="refershList" @addTag="selectedTag" @change="searchMemberList" />
-            <tag-container-active v-show="activeTag == 'active'" :data="memberTagList" :refersh="refershList" @addTag="selectedTag" @change="searchMemberList" @ediActiveTag="editHandTag" />
+            <tag-container-active v-show="activeTag == 'active'" :data="memberTagList" :refersh="refershList" @addTag="selectedTag" @change="searchMemberList" @ediActiveTag="editHandTag" @deleteHandTag="deleteHandTag" />
 
             <div class="page-box" v-if="total > 0">
               <dm-pagination

src/view/platformTag/second-tag.vue

@@ -30,18 +30,18 @@
     <!-- 编辑子分类 -->
     <el-dialog :title="newName" :visible.sync="editVisiable" :close-on-click-modal="false" width="600px">
       <el-table :data="editData" height="400">
-        <el-table-column label="子分类名称" prop="levelName">
+        <el-table-column label="子分类名称" prop="levelName" min-width="90">
           <template slot-scope="scope">
             <el-input v-model="scope.row.levelName" v-if="scope.row.editName"></el-input>
             <span v-else>{{ scope.row.levelName }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="标签数量" prop="count">
+        <el-table-column label="标签数量" prop="count" min-width="50">
           <template slot-scope="scope">
             <span>{{ scope.row.count == null ?  '--' : scope.row.count }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作">
+        <el-table-column label="操作" min-width="50">
           <template slot-scope="scope">
             <div class="btn-group">
               <el-button :disabled="scope.row.levelName.indexOf('未分类') > -1"  @click="handleEdit(scope.row, scope.$index)" type="text">{{ scope.row.editText }}</el-button>
@@ -59,11 +59,11 @@
     <el-dialog :title="newName" :visible.sync="dialogVisible" width="600px" top="20%" :close-on-click-modal="false" custom-class="add-tag-dialog">
       <div class="newtype">
         <p class="name"><span class="required">*</span>子分类 </p>
-        <el-input style="width: 100%" placeholder="请输入分类名称" maxlength="10" v-model="typeName" show-word-limit> </el-input>
+        <el-input style="width: 100%" placeholder="请输入子分类名称" maxlength="10" v-model="typeName" show-word-limit> </el-input>
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="newTag">添 加</el-button>
+        <el-button type="primary" @click="newTag">确 定</el-button>
       </span>
     </el-dialog>
   </div>
@@ -412,17 +412,19 @@ export default {
   }
 }
 .more {
-  line-height: 26px;
+  line-height: 34px;
   text-align: center;
   cursor: pointer;
   &:hover {
     color: #2f54eb;
+    background-color: #f7f8fa;
   }
 }
 .add-tag-dialog {
   .newtype {
     .name {
       margin-bottom: 10px;
+      color: #303133;
     }
   }
   .required {
@@ -453,6 +455,8 @@ export default {
 }
 .btn-group {
   font-size: 0;
+  display: flex;
+  align-items: center;
 }
 .menu-icon {
     width: 16px; height: 16px;

src/view/platformTag/tag-container-active.vue

@@ -2,7 +2,7 @@
   <!-- 具体标签 -->
   <div class="tag-some-list">
     <el-table :data="tableData" style="width: 100%">
-      <el-table-column label="标签名称" prop="tagName" min-width="130" fixed="left">
+      <el-table-column label="标签名称" prop="tagName" min-width="230" fixed="left">
         <template slot-scope="scope">
           <span class="tag-name">{{ scope.row.tagName }}</span>
           <el-tooltip class="item" effect="dark" content="添加标签" placement="bottom">
@@ -44,11 +44,13 @@
           <span v-else>--</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" fixed="right" min-width="140" >
-        <template slot-scope="{ row }">
-          <el-button type="text" @click="editActiveTag(row)">编辑</el-button>
-          <el-button type="text" @click="editActiveTagValue(row)">详情</el-button>
-          <el-button type="text" @click="deleteActiveTag(row)">删除</el-button>
+      <el-table-column label="操作" fixed="right" min-width="200">
+        <template slot-scope="scope">
+          <div class="font-0">
+            <el-button class="m-r-12" type="text" @click="editActiveTag(scope.row)">编辑</el-button>
+            <el-button class="m-r-12" type="text" @click="editActiveTagValue(scope.row)">详情</el-button>
+            <el-button class="m-r-12" type="text" @click="deleteActiveTag(scope.row, scope.$index, e)">删除</el-button>
+          </div>
         </template>
       </el-table-column>
     </el-table>
@@ -62,6 +64,8 @@ import tagDetails from '@/components/tagDetail/mixin/index';
 import { dateformat } from '@/utils/formatTime';
 import { delThirdHandTag } from '@/request/api';
 import DeleteTagDialog from '../manualTag/delete-tag-dialog.vue';
+import errMsg from '@/common/js/error';
+import { getRequest } from '@/api/api';
 export default {
   name: 'tag-container',
 
@@ -114,11 +118,24 @@ export default {
         query: { tagId: list.tagId, type: 'active' }
       });
     },
-    deleteActiveTag(list) {
+    deleteActiveTag(list, index, e) {
       this.deleteTagDialog.visible = true;
-      this.deleteTagDialog.deleteData = list;
+      this.deleteTagDialog.deleteData = {
+        ...list,
+        currentIndex: index,
+        e
+      };
     },
     doDelete(list) {
+      const { currentIndex: index, e, memberCount } = list;
+      // memberCount为0时不加入垃圾桶,直接删除
+      if (memberCount == 0) {
+        this.directDelTag(list);
+      } else {
+        this.intoTrash(list, index, e);
+      }
+    },
+    directDelTag(list) {
       const param = {
         tagId: list.tagId,
         requestProject: 'gic-member-tag-web'
@@ -131,10 +148,33 @@ export default {
               type: 'success',
               duration: 1000
             });
-            this.$emit('deleteActiveTag', this.groupId);
+            this.$emit('deleteHandTag', this.groupId);
           }
         })
     },
+    // 加入到垃圾桶
+    intoTrash(item, index, e) {
+      const para = {
+        itemId: item.tagId,
+        type: 1
+      };
+      getRequest('/delTagItem/add', para).then(res => {
+        const { errorCode } = res.data;
+        if (errorCode === 1) {
+          item.delStatus = 0;
+          this.$store.commit('changeDelTrashNum', this.$store.state.delTrashNum + 1);
+          this.$message.success('添加成功，请点击右侧「垃圾桶」图标进行删除');
+          // this.startAnimation(e)
+          return;
+        }
+        errMsg.errorMsg(res.data);
+      }).catch(error => {
+        this.$message.error({
+          duration: 1000,
+          message: error.message
+        });
+      });
+    },
   },
   watch: {
     data: {
@@ -185,9 +225,6 @@ export default {
   }
 }
 .refresh {
-  color: #909399;
-  &:hover {
-    color: #2f54eb;
-  }
+  color: #606266;
 }
 </style>

src/view/platformTag/tag-container-system.vue

@@ -2,7 +2,7 @@
   <!-- 具体标签 -->
   <div class="tag-some-list">
     <el-table :data="tableData" style="width: 100%">
-      <el-table-column label="标签名称" prop="tagName" min-width="130">
+      <el-table-column label="标签名称" prop="tagName" min-width="230" fixed>
         <template slot-scope="scope">
           <span class="tag-name">{{ scope.row.tagName }}</span>
           <el-tooltip class="item" effect="dark" content="添加标签" placement="top">
@@ -10,12 +10,12 @@
           </el-tooltip>
         </template>
       </el-table-column>
-      <el-table-column label="是否实时" prop="isActive" min-width="60">
+      <el-table-column label="是否实时" prop="isActive" min-width="70">
         <template slot-scope="scope">
           <span :class="['base', scope.row.isActive == 1 ? 'keep-active' : 'no-active']"> {{ scope.row.isActive == 1 ? '实时' : '非实时' }} </span>
         </template>
       </el-table-column>
-      <el-table-column label="上级分类名称" min-width="90">
+      <el-table-column label="上级分类名称" min-width="100">
         <template slot-scope="{ row }">
           <span>{{ row.tagLevelGroupName || '--' }}</span>
         </template>
@@ -76,7 +76,7 @@ export default {
     changeMoreUse(row) {
       const params = { tagId: row.tagId, isMoreUse: row.isMoreUse ? 0 : 1 };
       updateMoreUse(params).then(() => {
-        this.$message.success('设置成功');
+        this.$message.success(params.isMoreUse ? '已设为"常用标签"' : '已取消"设为常用标签"');
         row.isMoreUse = row.isMoreUse ? 0 : 1;
       })
     }
@@ -142,6 +142,6 @@ export default {
   display: inline-block;
   text-align: center;
   line-height: 22px;
-  font-size: 12px;
+  font-size: 14px;
 }
 </style>

src/view/platformTag/tag-container.vue

@@ -2,7 +2,7 @@
   <!-- 具体标签 -->
   <div class="tag-some-list">
     <el-table :data="tableData" style="width: 100%" @sort-change="sortChange">
-      <el-table-column label="标签名称" prop="tagName" min-width="140" fixed>
+      <el-table-column label="标签名称" prop="tagName" min-width="230" fixed>
         <template slot-scope="scope">
           <span class="tag-name">{{ scope.row.tagName }}</span>
           <el-tooltip class="item" effect="dark" content="添加标签" placement="bottom">
@@ -30,7 +30,7 @@
           {{ scope.row.memberCount ? (scope.row.memberCount | formatNum) + '人' : '--' }}
         </template>
       </el-table-column>
-      <el-table-column label="标签类型" prop="isMultiple" min-width="150">
+      <el-table-column label="标签类型" prop="isMultiple" min-width="100">
         <template slot-scope="{ row }">
           <div>{{ row.isMultiple ? '多选': '单选' }}</div>
         </template>
@@ -66,9 +66,11 @@
       </el-table-column>
       <el-table-column label="操作" v-if="(getCodeAuth('edit') || getCodeAuth('setValue') || getCodeAuth('delete'))" min-width="200" fixed="right">
         <template slot-scope="scope">
-          <el-button type="text" v-if="!isWeim && getCodeAuth('edit')" :limit-code="getCode('edit')" @click="editHandTag(scope.row)">编辑</el-button>
-          <el-button type="text" v-if="getCodeAuth('setValue')" :limit-code="getCode('setValue')" @click="editHandTagValue(scope.row)">详情</el-button>
-          <el-button type="text" v-if="!isWeim && getCodeAuth('delete')" :limit-code="getCode('delete')" @click="deleteHandTag(scope.row)">删除</el-button>
+          <div class="font-0">
+          <el-button class="m-r-12" type="text" v-if="!isWeim && getCodeAuth('edit')" :limit-code="getCode('edit')" @click="editHandTag(scope.row)">编辑</el-button>
+          <el-button class="m-r-12" type="text" v-if="getCodeAuth('setValue')" :limit-code="getCode('setValue')" @click="editHandTagValue(scope.row)">详情</el-button>
+          <el-button class="m-r-12" type="text" v-if="!isWeim && getCodeAuth('delete')" :limit-code="getCode('delete')" @click="deleteHandTag(scope.row, scope.$index, $event)">删除</el-button>
+          </div>
         </template>
       </el-table-column>
     </el-table>
@@ -82,8 +84,8 @@ import tagDetails from '@/components/tagDetail/mixin/index';
 import DeleteTagDialog from '../manualTag/delete-tag-dialog.vue';
 import { delThirdHandTag, changeTagSort } from '@/request/api';
 import { dateformat } from '@/utils/formatTime';
-
-
+import errMsg from '@/common/js/error';
+import { getRequest } from '@/api/api';
 export default {
   name: 'tag-container',
 
@@ -128,11 +130,24 @@ export default {
         query: { tagId: list.tagId, type: 'manual' }
       });
     },
-    deleteHandTag(list) {
+    deleteHandTag(list, index, e) {
       this.deleteTagDialog.visible = true;
-      this.deleteTagDialog.deleteData = list;
+      this.deleteTagDialog.deleteData = {
+        ...list,
+        currentIndex: index,
+        e
+      };
     },
     doDelete(list) {
+      const { currentIndex: index, e, memberCount } = list;
+      // memberCount为0时不加入垃圾桶,直接删除
+      if (memberCount == 0) {
+        this.directDelTag(list);
+      } else {
+        this.intoTrash(list, index, e);
+      }
+    },
+    directDelTag(list) {
       const param = {
         tagId: list.tagId,
         requestProject: 'gic-member-tag-web'
@@ -149,6 +164,31 @@ export default {
           }
         })
     },
+    // 加入到垃圾桶
+    intoTrash(item, index, e) {
+      console.log(item);
+      const para = {
+        itemId: item.tagId,
+        type: 1
+      };
+      getRequest('/delTagItem/add', para).then(res => {
+        const { errorCode } = res.data;
+        if (errorCode === 1) {
+          item.delStatus = 0;
+          console.log(this.$store.state.delTrashNum + 1);
+          this.$store.commit('changeDelTrashNum', this.$store.state.delTrashNum + 1);
+          this.$message.success('添加成功，请点击右侧「垃圾桶」图标进行删除');
+          // this.startAnimation(e)
+          return;
+        }
+        errMsg.errorMsg(res.data);
+      }).catch(error => {
+        this.$message.error({
+          duration: 1000,
+          message: error.message
+        });
+      });
+    },
     handleTrackParam(type, data) {
       let fn = {
         addTag: () => {
@@ -242,12 +282,9 @@ export default {
   }
 }
 .refresh {
-  color: #909399;
+  color: #606266;
   position: relative;
   top: 1px;
-  &:hover {
-    color: #2f54eb;
-  }
 }
 .sort {
   // /deep/ .el-input__inner {

static/css/public.css

@@ -349,6 +349,9 @@ input:focus {
 .m-r-10 {
   margin-right: 10px;
 }
+.m-r-12 {
+  margin-right: 12px;
+}
 .m-r-20 {
   margin-right: 20px;
 }
@@ -540,6 +543,9 @@ i {
   font-style: normal;
   font-weight: normal;
 }
+.font-0 {
+  font-size: 0;
+}
 .font-10 {
   font-size: 10px;
 }