分配成员

src/api/label/label.js

@@ -71,5 +71,44 @@ export function selectCustomerLabelInfo(query) {
   })
 }
 
+// 查询不在本标签的客户
+// labelId=17
+export function selectNotCustomerLabelInfo(query) {
+  return request({
+    url: '/label/label/selectNotCustomerLabelInfo',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询本标签查询手机号
+// labelId=17
 
+export function selectPhoneList(query) {
+  return request({
+    url: '/label/label/selectPhoneList',
+    method: 'get',
+    params: query
+  })
+}
 
+// 判断是否可以删除标签
+// false 有绑定的人，不能删除。true 可以删除
+// labelId=17
+export function selectLabel(query) {
+  return request({
+    url: '/label/label/selectLabel',
+    method: 'get',
+    params: query
+  })
+}
+
+// 标签操作
+// {"labelId":17,"flag":"1","phoneList":["15165167224","13678945612"]}
+export function addAndDelCustomerLabel(data) {
+  return request({
+    url: '/label/label/addAndDelCustomerLabel',
+    method: 'post',
+    data: data
+  })
+}

src/views/label/Label_AddUser.vue

@@ -10,11 +10,13 @@
       accordion
     >
       <el-collapse-item
-        :title="ele.labelName"
         :name="ele.id"
-        v-for="ele in labelList.labelArr"
+        v-for="(ele, index) in labelList.labelArr"
         :key="ele.id"
       >
+        <template slot="title">
+           标签{{index + 1}} <i class="header-icon el-icon-info"></i> <b>{{ ele.labelName}}</b>
+        </template>
         <el-transfer
           v-model="customerLabelList"
           :props="{
@@ -26,8 +28,30 @@
           filterable
           :titles="['未加入', '已加入']"
         >
-          <div class="transfer-footer" slot="left-footer" style='text-align:center' v-show="!loading">数据拉取完成，可点击操作</div>
-          <div class="transfer-footer" slot="right-footer" style='text-align:center' >数据拉取中，请稍后...</div>
+          <div
+            class="transfer-footer"
+            slot="left-footer"
+            style="text-align: center"
+            v-show="!loading"
+          >
+            数据拉取完成，可点击操作
+          </div>
+          <div
+            class="transfer-footer"
+            slot="right-footer"
+            style="text-align: center"
+            v-show="loading"
+          >
+            数据拉取中，请稍后...
+          </div>
+          <div
+            class="transfer-footer"
+            slot="right-footer"
+            style="text-align: center"
+            v-show="error"
+          >
+            数据失败，请刷新重试
+          </div>
         </el-transfer>
       </el-collapse-item>
     </el-collapse>
@@ -44,39 +68,44 @@ import {
   deleteLabelRuleDetail,
   addDetail,
   selectCustomerLabelInfo,
+  addAndDelCustomerLabel,
+  selectPhoneList,
 } from "@/api/label/label";
 export default {
   name: "Label_SetLabel",
   data() {
     return {
-      value4: [15],
-      activeNames: ["1"],
+      activeNames: undefined,
       labelList: {},
       notCustomerLabelList: [],
       customerLabelList: [],
-      loading : false
+      loading: false,
+      error: false,
+      currentLabelId: undefined,
     };
   },
   computed: {
-    notCustomerLabelListCom(){
-      return (this.notCustomerLabelList||[]).map((ele)=>{
-         ele.label = ele.phone + '_' + ele.customerName
-         return ele
-      })
-    }
+    notCustomerLabelListCom() {
+      return (this.notCustomerLabelList || []).map((ele) => {
+        ele.label = ele.phone + "_" + ele.customerName;
+        return ele;
+      });
+    },
   },
   created() {
     this.init();
-    setTimeout(()=>{
+    setTimeout(() => {
       console.log(this.notCustomerLabelListCom);
-    },1000)
+    }, 1000);
   },
   methods: {
     init() {
       this.getList();
+      console.log(this.getRightUser.bind(this));
     },
+
     handleChange(val) {
-      this.getLabelUser(val)
+      this.getLabelUser(val);
     },
     getLabelUser(id) {
       selectCustomerLabelInfo({
@@ -90,6 +119,28 @@ export default {
         }
       });
     },
+    getRightUser() {
+      this.loading = true;
+      selectPhoneList({
+        labelId: this.activeNames,
+      })
+        .then((res) => {
+          if (res.code == 200) {
+            this.customerLabelList = res.rows;
+            this.loading = false;
+          } else {
+            this.customerLabelList = [];
+            throw new Error("");
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+          this.error = true;
+          this.customerLabelList = [];
+          this.notCustomerLabelList = [];
+          this.msgError("拉取数据失败，请刷新重试");
+        });
+    },
     getList() {
       return sysDeptDemoList().then((res) => {
         if (res.code == 200) {
@@ -100,29 +151,44 @@ export default {
         }
       });
     },
-    transfer(e1, e2, e3) {
-      console.log(e1, e2, e3);
-      this.value4 = [];
-
+    transfer(originlArr, direction, changeArr) {
+      const query = {
+        labelId: this.activeNames,
+        flag: "1",
+        phoneList: changeArr,
+      };
+      if (direction == "right") {
+        query.flag = "0";
+      } else if (direction == "left") {
+        query.flag = "1";
+      }
+      addAndDelCustomerLabel(query).then((res) => {
+        if (res.code == 200) {
+          this.getRightUser();
+        } else {
+        }
+      });
     },
   },
 };
 </script>
+
 <style lang="scss">
 .collapse {
   width: 800px;
   margin: 0 auto;
+
   .el-collapse-item__wrap {
     // border-bottom: 1px solid;
   }
-  
-  .el-transfer-panel{
-      width: 300px;
-      height: 600px;
+
+  .el-transfer-panel {
+    width: 300px;
+    height: 600px;
   }
-  .el-transfer-panel__list.is-filterable{
-      height: 465px;
+
+  .el-transfer-panel__list.is-filterable {
+    height: 465px;
   }
 }
-
-</style>
+</style>

src/views/label/Label_SetLabel.vue

@@ -7,9 +7,12 @@
       <el-collapse-item
         :title="ele.labelName"
         :name="ele.id"
-        v-for="ele in labelForm.labelArr"
+        v-for="(ele, index) in labelForm.labelArr"
         :key="ele.id"
       >
+        <template slot="title">
+           标签{{index + 1}} <i class="header-icon el-icon-info"></i> <b>{{ ele.labelName}}</b>
+        </template>
         <div v-if="(ele.labelRuleDetailList || []).length == 0">
           此条标签下面没有规则
         </div>