SAAS-FRONTEND/src/views/label/Label_AddUser.vue

<template>
  <div>
    
  </div>
</template>

<script>
import {
  sysDeptDemoList,
  selectCustomerLabelInfo,
  addAndDelCustomerLabel,
  selectPhoneList,
  selectNotCustomerLabelInfo,
} from "@/api/label/label";
export default {
  name: "Label_SetLabel",
  data() {
    return {
      activeNames: undefined,
      labelList: {},
      notCustomerLabelList: [],
      customerLabelList: [],
      loading: false,
      error: false,
      currentLabelId: undefined,
      pageStatus: 4,
      timer: null,
      leftData: [],
      rightData: [],
      leftTotal:100,
      rightTotal:100,
      leftQuery: {
        pageNum: 1,
        pageSize: 10,
        labelId:null,
        customerName: null,
        phone:null
      },
      rightQuery: {
        pageNum: 1,
        pageSize: 10,
        labelId:null,
        customerName: null,
        phone:null
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    getLeftData(){
      // this.leftData = [];
      selectNotCustomerLabelInfo(this.leftQuery)
        .then((res) => {
          if (res.code == 200) {
            this.leftData = res.rows;
            this.leftTotal = res.total
          } else {
            throw new Error("");
          }
        })
        .catch((err) => {
          this.leftData = [];
          this.leftTotal = 0;
          this.msgError("拉取左边标签用户失败，请刷新~");
        });
      
    },
    getRightData(){
      // this.rightData = [];
      selectPhoneList(this.rightQuery)
        .then((res) => {
          if (res.code == 200) {
            this.rightData = res.rows;
            this.rightTotal = res.total;
          } else {
            throw new Error("");
          }
        })
        .catch(() => {
          this.rightData = [];
          this.rightTotal = 0;
          this.msgError("拉取右边标签用户失败，请刷新~");
        });

    },
    handleMoveLabel(direction = 'right', type = 1, row, labelIdArr){  // type 1 传row  type 2 idArr    direction right 向右转移 left 向左转移
       const changeArr = []
       if(type == 1){
          changeArr.push(row.phone)
       }else if(type == 2){
         changeArr = labelIdArr
       }
      const query = {
        labelId: direction == 'right' ? this.leftQuery.labelId : this.rightQuery.labelId,
        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.getLeftData();
          this.getRightData();
        } else {
          throw new Error("");
        }
      }).catch((err)=>{
        
      });

    },
    clearLeftQuery(labelId = this.leftQuery.labelId){
      this.leftQuery =  {
        pageNum: 1,
        pageSize: 10,
        labelId,
        customerName: null,
        phone:null
      }
    },
    clearRightQuery(labelId = this.rightQuery.labelId){
      console.log(this.rightQuery);
      this.rightQuery =  {
        pageNum: 1,
        pageSize: 10,
        labelId,
        customerName: null,
        phone:null
      }
    },
    handleSelectionChange(val) {
      let changeArr = [];
      val.map((ele) => {
        changeArr.push(ele.phone);
      });
    },

    init() {
      this.getLabelList();
    },
    setPageStatus() {
      this.queryPageStatus([2]).then((res) => {
        this.pageStatus = res;
      });
    },
    openLabel(id) {
      this.clearLeftQuery(id);
      this.clearRightQuery(id);
      this.getLeftData();
      this.getRightData();
    },
    // getLabelUser(id) {
    //   this.loading = true;
    //   selectCustomerLabelInfo({
    //     labelId: id,
    //   })
    //     .then((res) => {
    //       if (res.code == 200) {
    //         this.notCustomerLabelList = res.data.notCustomerLabelList;
    //         this.customerLabelList = res.data.phoneList;
    //       } else {
    //         throw new Error("");
    //       }
    //     })
    //     .catch(() => {
    //       this.loading = false;
    //       this.error = true;
    //       this.msgError("拉取标签下用户信息失败");
    //     });
    // },
    toggleLabel(){
      console.log('hahaha');
    },

    getLabelList() {
      return sysDeptDemoList().then((res) => {
        if (res.code == 200) {
          this.labelList = res.data;
        } else {
          this.msgError("初始化数据失败");
        }
      });
    },

    // 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">
.Label_AddUser {
  .collapse {
    width: 1200px;
    margin: 0 auto;

    //.el-collapse-item__wrap {
    // border-bottom: 1px solid;
    //}

    .el-transfer-panel {
      width: 300px;
      height: 600px;
    }

    .el-transfer-panel__list.is-filterable {
      height: 465px;
    }
  }
}
</style>