开发标签管理

project/src/assets/config/interface_api.js

@@ -53,6 +53,10 @@ var api = {
   customer_setCustomerTag: "/api/customer/setCustomerTag",
   customer_batchMarkTagResult: "/api/customer/batchMarkTagResult",
   departmentList: "/api/user/departments",
+  add_tag: "/api/tag/addSingleTag",
+  add_tag_group: "/api/tag/addTagGroup",
+  order_tag_group: "/api/tag/updateTagGroupOrder",
+  dele_tag_group: "/api/tag/deleteTagGroup",
 };
 
 export { api };

project/src/components/assembly/tagGroup.vue

@@ -36,9 +36,17 @@
           <div v-for="(m,mIdx) in moreLable" :key="m.id" class="flex">
             <el-input class="ipt_group tMar10" v-model="m.name" placeholder="请输入标签名称"></el-input>
             <span v-if="moreLable&&moreLable.length>1" class="flex">
+               <el-tooltip effect="light" content="删除该标签" placement="top-start">
                 <span class="minusIptGroup" @click="moreLable.splice(mIdx,1)">-</span>
-                <i class="el-icon-top f18 lMar8 pointer" :class="mIdx == 0 ? 'disCss' : ''" @click="upClick(mIdx)"></i>
-                <i class="el-icon-bottom f18 lMar8 pointer" :class="mIdx == moreLable.length-1 ? 'disCss' : ''" @click="downClick(mIdx)"></i>
+               </el-tooltip>
+                <img src="../../assets/img/upNone.png" alt="" v-if="mIdx == 0" style="width: 20px;margin: 0 8px;cursor: pointer">
+               <el-tooltip effect="light" content="上移" placement="top-start">
+                 <img src="../../assets/img/up.png" alt="" v-if="mIdx > 0" @click="upClick(mIdx)" style="width: 20px;margin: 0 8px;cursor: pointer">
+               </el-tooltip>
+                <img src="../../assets/img/downNone.png" alt="" v-if="mIdx == moreLable.length-1" style="width: 20px;cursor: pointer">
+               <el-tooltip effect="light" content="下移" placement="top-start">
+                 <img src="../../assets/img/down.png" alt="" v-if="mIdx < moreLable.length-1" @click="downClick(mIdx)" style="width: 20px;cursor: pointer">
+               </el-tooltip>
               </span>
           </div>
           <div class="addIptGroup" @click="moreLable.push({id:moreLable.length,name:''})">+ 添加标签</div>
@@ -47,7 +55,7 @@
     </div>
     <div slot="footer">
       <el-button size="mini" @click="lableGroup = false">取 消</el-button>
-      <el-button size="mini" type="primary" @click="lableGroup = false">确 定</el-button>
+      <el-button size="mini" type="primary" @click="addTagGroup()">确 定</el-button>
     </div>
   </el-dialog>
 </template>
@@ -55,31 +63,45 @@
 <script>
 export default {
   name: "tagGroup",
+  props:['source'],
   data(){
     return{
       lableGroup:false,
       groupName:'',
-      moreLable:[
-        {id:0,name:''}
-      ],
+      moreLable:[{id:0,name:''}],//添加标签组时,新增标签的数据列表,传给后台
     }
   },
   methods:{
-    addTag(){
-      this.$axios.post(this.URL.BASEURL + this.URL.addTag, {
+    addTagGroup(){
+      this.$axios.post(this.URL.BASEURL + this.URL.add_tag_group, {
         group_name: this.groupName,
-        tag_list:[]
+        tag_list:this.moreLable
       }).then((res) => {
         var res = res.data
         if (res && res.errno == 0) {
-
+          this.lableGroup = false
+          this.$parent.init(1)
         }
         this.$message({
           message: res.err,
           type: "warning"
         })
       })
-    }
+    },
+    // 上移
+    upClick(index) {
+      if(index == 0){return false}
+      this.moreLable = this.swapItems(this.moreLable, index, index - 1)
+    },
+    // 下移
+    downClick(index) {
+      if(index == this.moreLable.length-1){return false}
+      this.moreLable = this.swapItems(this.moreLable, index, index + 1)
+    },
+    swapItems(arr, index1, index2) {
+      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
+      return arr;
+    },
 
   }
 }
@@ -161,7 +183,7 @@ export default {
         }
         .minusIptGroup{
           display: inline-block;
-          border: 1px solid #333;
+          border: 1px solid #33c2a1;
           border-radius: 50%;
           font-size: 18px;
           width: 16px;
@@ -169,7 +191,7 @@ export default {
           text-align: center;
           line-height: 12px;
           margin-left: 10px;
-          color: #333;
+          color: #33c2a1;
           cursor: pointer;
           flex-shrink: 0;
         }

project/src/components/detials/customerProfile.vue

@@ -2,7 +2,7 @@
 <!--  v-loading="loading"-->
   <div >
     <div class="bigTitle">
-      <i class="el-icon-user-solid"></i>
+      <i class="el-icon-user-solid c-00B38A"></i>
       <span>添加客服信息</span>
     </div>
     <div class="tableBox_detial">
@@ -52,8 +52,8 @@
       </el-skeleton>
     </div>
 
-    <div class="bigTitle tMar30">
-      <i class="el-icon-user-solid"></i>
+    <div class="bigTitle tMar30 flex-align-center">
+      <img src="../../assets/img/info_detial.png" alt="" style="width: 14px;margin-right: 4px">
       <span>基本信息</span>
 <!--      <span style="color: #898D92;font-weight: 400;margin-left: 6px">所属员工可在「侧边栏-客户画像」中进行编辑</span>-->
     </div>

project/src/components/detials/customerStatus.vue

@@ -5,7 +5,8 @@
         <div class="dayDate">{{l.create_time&&l.create_time.split(' ')[0]}}{{l.week}}</div>
         <div class="subBox" v-for="(s,sIdx) in l.sub" :key="sIdx" :class="idx==0 ? 'tMar17' : ''">
           <div class="subBox_line">
-            <i class="el-icon-price-tag f16"></i>
+<!--            <i class="el-icon-price-tag f16"></i>-->
+            <img src="../../assets/img/lable_detial.png" alt="" style="display: inline-block;width: 16px">
             <div class="splitLine"></div>
           </div>
           <div class="lMar8">

project/src/components/detials/index.vue

@@ -16,8 +16,8 @@
         </span>
 -->
       </div>
-      <div>
-        <i class="el-icon-plus pointer" @click="changeWidth"></i>
+      <div class="flex-align-center">
+        <img src="../../assets/img/fullScreen.png" alt="" style="width: 13px;margin-right: 6px;cursor: pointer"  @click="changeWidth">
         <i class="el-icon-close pointer" @click="close"></i>
       </div>
     </div>

project/src/components/manage/memberManage.vue

@@ -2,7 +2,10 @@
   <div>
     <div class="tableInfo">
       <div class="flex">
-        <div class="totalCustom">共<span>{{tableData&&tableData.length ? tableData.length : '-'}}</span>个成员</div>
+        <div class="totalCustom">
+          <i class="el-icon-user-solid"></i>
+          共<span>{{tableData&&tableData.length ? tableData.length : '-'}}</span>个成员
+        </div>
       </div>
       <div class="flex">
         <selfinput :hasLabel="false" @inputChange="inputChange"></selfinput>
@@ -14,10 +17,10 @@
           部门信息
         </div>
         <div>
-          <div v-for="c in depart_List" :key="c.id" class="tMar20 flex-align-center">
-            <i class="el-icon-circle-check c-00B38A f16 rMar7 pointer" v-if="checkVals.indexOf(c.id)>-1" @click="checkDepartId(c.id)"></i>
-            <i class="el-icon-circle rMar7 pointer" @click="checkDepartId(c.id)" v-else></i>
-            {{c.name}}
+          <div v-for="c in depart_List" :key="c.department_id" class="tMar20 flex-align-center">
+            <i class="el-icon-circle-check c-00B38A f16 rMar7 pointer" v-if="checkVals.indexOf(c.department_id)>-1" @click="checkDepartId(c.department_id)"></i>
+            <i class="el-icon-circle rMar7 pointer" @click="checkDepartId(c.department_id)" v-else></i>
+            {{c.department_id}}
           </div>
         </div>
       </div>
@@ -80,22 +83,23 @@ export default {
       tableData: [],
       checkVals:[],
       depart_List:[],
-
+      keyword:'',
     }
   },
   created () {
+    this.init_depart()
     this.init(1)
   },
   methods: {
-
     inputChange(keyword){
+      this.keyword = keyword
       this.init(1,keyword)
     },
     init_depart(){
       this.$axios.get(this.URL.BASEURL + this.URL.departmentList, {}).then((res) => {
         var res = res.data
         if (res && res.errno == 0) {
-
+          this.depart_List = res.rst
         } else if (res.errno != 4002) {
           this.$message({
             message: res.err,
@@ -132,7 +136,7 @@ export default {
       });
     },
     handleCurrentChange (val) {
-      this.init(val)
+      this.init(val,this.keyword)
     },
     checkDepartId(id){
       if(this.checkVals.indexOf(id)==-1){
@@ -140,6 +144,7 @@ export default {
       }else{
         this.checkVals.splice(this.checkVals.indexOf(id),1)
       }
+      this.init(1,this.keyword)
     },
   }
 }

project/src/components/manage/tagManage.vue

@@ -11,38 +11,42 @@
         </div>
       </div>
       <div class="flex">
-        <el-button type="primary" size="mini" @click="addLableGroup">添加标签组</el-button>
+        <el-button type="primary" size="mini" @click="addLableGroup('add')">添加标签组</el-button>
       </div>
     </div>
     <div class="tagListBox">
       <div class="tagItemBox" v-for="(item,mIdx) in tableData" :key="item.group_id">
-        <div style="width: 15%">
+        <div style="width: 15%;flex-shrink: 0">
           <div class="fWeight600 c-333 f14">{{item.group_name?item.group_name:'-'}}</div>
           <div class="c-666 f13 tMar10">共{{item.tag_num?item.tag_num:'-'}}个标签</div>
         </div>
-        <div class="flex-align-center">
+        <div class="flex-align-center" style="flex-wrap: wrap">
           <div class="add" @click="addLable(item)">+ 添加</div>
-          <el-input v-if="item.iptshow" v-focus class="ipt" v-model="item.addLableVal" placeholder="请输入标签" @blur="iptBlur(item)"></el-input>
+          <el-input v-if="item.iptshow" v-focus class="ipt" @input="forceUpdate" v-model="item.addLableVal" placeholder="请输入标签" @blur="iptBlur(item)"></el-input>
           <div class="lableItem" v-for="t in item.tag_list" :key="t.tag_id">
             {{t.tag_name}}
           </div>
         </div>
-        <div class="flex-align-center lMarauto">
-          <span class="pointer rMar7">
-               <i class="el-icon-top f14 " :class="mIdx == 0 ? 'disCss' : ''" @click="upClick(mIdx)"></i>上移
-          </span>
-          <span class="pointer rMar7">
-                <i class="el-icon-bottom f14 " :class="mIdx == tableData.length-1 ? 'disCss' : ''" @click="downClick(mIdx)"></i>上移
-          </span>
-          <span class="pointer rMar7">
-            <i class="el-icon-edit f14"></i> 修改
-          </span>
+        <div class="flex-align-center lMarauto editArea">
+          <div class="pointer rMar10 flex-align-center" @click="mIdx>0&&orderList(item.group_id)">
+            <img src="../../assets/img/upNone.png" alt="" v-if="mIdx == 0">
+            <img src="../../assets/img/up.png" alt="" v-if="mIdx > 0">
+            上移
+          </div>
+          <div class="pointer rMar10 flex-align-center" @click="mIdx < tableData.length-1&&orderList(item.group_id)">
+            <img src="../../assets/img/downNone.png" alt="" v-if="mIdx == tableData.length-1">
+            <img src="../../assets/img/down.png" alt="" v-if="mIdx < tableData.length-1">
+            上移
+          </div>
+          <div class="pointer flex-align-center" @click="addLableGroup('edit')">
+            <img src="../../assets/img/edit.png" alt="">
+            修改
+          </div>
         </div>
 
       </div>
     </div>
-
-    <tagGroup ref="tagRef"></tagGroup>
+    <tagGroup ref="tagRef" :source="editOpa"></tagGroup>
 
   </div>
 </template>
@@ -58,8 +62,7 @@ export default {
       tableData: [],
       resetFlag: false,//重置
       input_keyword: '',
-      iptshow:false,
-      moreLable:[],
+      editOpa:'add',//判断是新增标签组还是修改标签组
 
     }
   },
@@ -74,10 +77,17 @@ export default {
     this.init(1)
   },
   methods: {
+    orderList(){
+
+    },
+    forceUpdate() {
+      this.$forceUpdate()
+    },
     addTag(){
 
     },
-    addLableGroup(){
+    addLableGroup(opa){
+      this.editOpa = opa
       this.$nextTick(()=>{
         this.$refs.tagRef.lableGroup = true
       })
@@ -91,17 +101,21 @@ export default {
       item.iptshow = false
       this.$forceUpdate()
       if(item.addLableVal){
-        this.$axios.post(this.URL.BASEURL + this.URL.addTag, {
-          group_name: this.groupName,
-          name:item.addLableVal
+        this.$axios.post(this.URL.BASEURL + this.URL.add_tag, {
+          group_id: item.group_id,
+          tag_name:item.addLableVal
         }).then((res) => {
           var res = res.data
+          if(res&&res.errno == 0){
+            item.tag_list.push({tag_name:item.addLableVal})
+            item.tag_num+=1
+            return
+          }
           this.$message({
             message: res.err,
-            type: "warning"
+            type: "info"
           })
         })
-        // this.lableArr.push({id:this.lableArr.length,name:this.addLableVal})
       }
     },
     resetEvent () {//重置
@@ -138,20 +152,7 @@ export default {
     handleCurrentChange (val) {
       this.init(val)
     },
-    // 上移
-    upClick(index) {
-      if(index == 0){return false}
-      this.moreLable = this.swapItems(this.moreLable, index, index - 1)
-    },
-    // 下移
-    downClick(index) {
-      if(index == this.moreLable.length-1){return false}
-      this.moreLable = this.swapItems(this.moreLable, index, index + 1)
-    },
-    swapItems(arr, index1, index2) {
-      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
-      return arr;
-    },
+
   }
 }
 </script>
@@ -166,6 +167,17 @@ export default {
       line-height: 30px;
     }
   }
+  .editArea{
+    font-size: 13px;
+    flex-shrink: 0;
+    padding-left: 30px;
+    img{
+      width: 14px;
+      height: 14px;
+      flex-shrink: 0;
+      margin-right: 3px;
+    }
+  }
 }
 
 </style>