标签复杂查询 待完善

src/views/label/Label_Batch.vue

@@ -370,7 +370,7 @@
           <el-popconfirm
             title="此操作会将选中用户强制列为无标签状态，是否继续？"
             confirm-button-text="删除"
-            @onConfirm="toUnLableed"
+            @onConfirm="toUnLableed(scope.row)"
           >
             <el-button
               type="text"
@@ -400,17 +400,26 @@
     >
       <div v-if="filterSelectedUser.length != 0">
         <div class="ml-5">
-          以下成员已经存在标签，如果<b>直接点击确认按钮</b>，以下成员<b>不会拉入此标签</b><span class="badge badge-success ml-1">{{translationLabel(currentLabelId)}}</span>。
+          在您选中的成员中，下面的成员<b>已经被分配到其他标签</b>~
         </div>
         <div class="ml-5">
-          想要<b>强制拉入标签</b><span class="badge badge-success ml-1">{{translationLabel(currentLabelId)}}</span>，请<b>先删除这些成员的现有的标签</b>，然后点击确认按钮，即可操作完成。
+          如果你想<b>强制拉入此标签</b
+          ><span class="badge badge-success ml-1">{{
+            translationLabel(currentLabelId)
+          }}</span
+          >，请<b>先删除下面成员现有的标签</b>，删除完成后点确认即可。
+        </div>
+        <div class="ml-5">
+          如果您<b>直接点击确认按钮</b>，下面的成员将继续留在原标签中，<b
+            >不会拉入此标签</b
+          ><span class="badge badge-success ml-1">{{
+            translationLabel(currentLabelId)
+          }}</span
+          >。
         </div>
 
         <div class="app-container">
-          <el-table
-            :data="filterSelectedUser"
-            @selection-change="selectionChange"
-          >
+          <el-table :data="filterSelectedUser" @selection-change="checkChange">
             <af-table-column align="center" prop="id" type="selection" />
             <af-table-column label="姓名" align="center" prop="customerName" />
             <af-table-column
@@ -443,7 +452,7 @@
                   icon="el-icon-circle-plus-outline"
                   class="underline btn24"
                   size="mini"
-                  @click="handleMoveLabel('right', 1, scope.row)"
+                  @click="toClearLabel"
                   >删标签</el-button
                 >
               </template>
@@ -458,9 +467,16 @@
           />
         </div>
       </div>
-      <div v-else>点击确认按钮，立刻将选中用户拉入标签<span class="badge badge-success ml-1">{{translationLabel(currentLabelId)}}</span>~</div>
+      <div v-else class="ml-5">
+        点击确认按钮，立刻将选中用户拉入标签<span
+          class="badge badge-success ml-1"
+          >{{ translationLabel(currentLabelId) }}</span
+        >~
+      </div>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="handleSubmitLable" size="small">确 定</el-button>
+        <el-button type="primary" @click="handleSubmitLable" size="small"
+          >确 定</el-button
+        >
         <el-button @click="cancelSubmitLabel" size="small">取 消</el-button>
       </div>
     </el-dialog>
@@ -549,7 +565,12 @@
 </template>
 
 <script>
-import { getLabelUser, getLabelList, delUserLabel,addAndDelCustomerLabel } from "@/api/label/label";
+import {
+  getLabelUser,
+  getLabelList,
+  delUserLabel,
+  addAndDelCustomerLabel,
+} from "@/api/label/label";
 
 export default {
   name: "Dzk_Bill",
@@ -589,7 +610,7 @@ export default {
       checkedUser: [],
       toLabeledDialog: false,
       labelList: [],
-      currentLabelId:undefined,
+      currentLabelId: undefined,
     };
   },
   computed: {
@@ -615,71 +636,105 @@ export default {
       });
   },
   methods: {
-    handleSubmitLable(){
-      const addArr = []
-      this.selectedUser.map((ele)=>{
-      if(ele.labelId != this.currentLabelId && !ele.labelId )
-        addArr.push(ele.phone)
-      })
+    handleSubmitLable() {
+      const addArr = [];
+      this.selectedUser.map((ele) => {
+        if (ele.labelId != this.currentLabelId && !ele.labelId)
+          addArr.push(ele.phone);
+      });
       addAndDelCustomerLabel({
         labelId: this.currentLabelId,
         flag: "0",
-        phoneList : addArr
-      }).then((res)=>{
-        if(res.code == 200){
-          this.getList();
-          this.msgSuccess("批量拉入标签成功~")
-          this.toLabeledDialog = false;
-        }else{
-          throw new Error("");
-        }
-      }).catch(()=>{
-        this.msgError("批量拉入标签失败，请刷新网页后重试~")
-        this.toLabeledDialog= false;
+        phoneList: addArr,
       })
-
-
+        .then((res) => {
+          if (res.code == 200) {
+            this.getList();
+            this.msgSuccess("批量拉入标签成功~");
+            this.toLabeledDialog = false;
+          } else {
+            throw new Error("");
+          }
+        })
+        .catch(() => {
+          this.msgError("批量拉入标签失败，请刷新网页后重试~");
+          this.toLabeledDialog = false;
+        });
     },
-    cancelSubmitLabel(){
+    cancelSubmitLabel() {
+      this.getList();
       this.toLabeledDialog = false;
     },
-    translationLabel(id){
+    translationLabel(id) {
       console.log(this.labelList);
-      const label = this.labelList.find((ele)=>{
-        return id == ele.id
-      })
-      if(label == undefined){
-        return ''
+      const label = this.labelList.find((ele) => {
+        return id == ele.id;
+      });
+      if (label == undefined) {
+        return "";
       }
       return label.labelName;
     },
-    toUnLableed() {
-      if(this.selectedUser.length == 0){
+    toUnLableed(row) {
+      const delArr = [];
+      console.log(row);
+      if (this.selectedUser.length == 0) {
+        delArr.push(row.phone);
+      } else {
+        this.selectedUser.map((ele) => {
+          if (!!ele.phone) {
+            delArr.push(ele.phone);
+          }
+        });
+      }
+
+      delUserLabel({ phoneList: delArr })
+        .then((res) => {
+          if (res.code == 200) {
+            this.getList();
+            this.msgSuccess("删除用户标签成功~");
+          } else {
+            throw new Error("");
+          }
+        })
+        .catch(() => {
+          this.msgError("删除用户标签状态失败，请刷新后重试~");
+        });
+    },
+    toClearLabel() {
+      if (this.checkedUser.length == 0) {
         this.msgError("请先选择用户后再进行删除标签~");
         return;
       }
       const delArr = [];
-      this.selectedUser.map((ele)=>{
-        if(!!ele.phone){
-          delArr.push(ele.phone)
-        }
-      })
-      delUserLabel({phoneList:delArr}).then((res)=>{
-        if(res.code == 200){
-          this.getList();
-          this.msgSuccess("删除用户标签成功~");
-        }else{
-          throw new Error("")
-        }
-      }).catch(()=>{
-        this.msgError("删除用户标签状态失败，请刷新后重试~")
-      })
+      this.checkedUser.map((ele) => {
+        delArr.push(ele.phone);
+      });
+      delUserLabel({ phoneList: delArr })
+        .then((res) => {
+          if (res.code == 200) {
+            this.checkedUser.map((ele) => {
+              if (delArr.includes(ele.phone)) {
+                ele.labelId = null;
+                ele.labelName = null;
+              }
+            });
+            this.msgSuccess("删除用户标签成功~");
+          } else {
+            throw new Error("");
+          }
+        })
+        .catch(() => {
+          this.msgError("删除用户标签状态失败，请刷新后重试~");
+        });
     },
-
     selectionChange(selection) {
-      console.log(selection);
+      this.checkedUser = [];
       this.selectedUser = selection;
     },
+    checkChange(selection) {
+      this.checkedUser = selection;
+    },
     usageTypeFotmat(row, column) {
       if (row.usageType === "+") {
         return "充值";
@@ -720,12 +775,14 @@ export default {
     orderOpenMethod() {
       this.orderOpen = true;
     },
-    toLabeled(id) {
+    toLabeled(id, e, w, uu) {
+      console.log("---------");
+      console.log(id, e, w, uu);
       if (this.selectedUser.length == 0) {
         this.msgError("请先选择用户后再打标签");
         return;
       }
-      this.currentLabelId = id
+      this.currentLabelId = id;
       this.toLabeledDialog = true;
     },
   },