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

<template>
  <div v-if="pageStatus == 0">配置加载中...</div>
  <div v-else-if="pageStatus == 1">此页面只对站点用户开发</div>
  <div v-else-if="pageStatus == 4">
    <div  class="Label_AddUser" v-if="labelList.labelFlag == 1">
      <div v-if="(labelList.labelArr||[]).length == 0">
        你未添加标签，请先添加标签后再来设置规则
      </div>
      
      <el-collapse
        v-model="activeNames"
        @change="openLabel"
        class=""
        accordion
      >
        <el-collapse-item
          :name="ele.id"
          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-col :span="11">
              <div>
                <el-input
                  v-model="leftQuery.customerName"
                  placeholder="输入姓名"
                  style="width: 150px"
                  size="mini"
                  clearable
                />
                <el-input
                  v-model="leftQuery.phone"
                  placeholder="输入手机号"
                  style="width: 150px; margin-left: 3px"
                  size="mini"
                  clearable
                />
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-search"
                  style="margin-left: 6px"
                  @click="getLeftData"
                  >查询</el-button
                >
                <el-button
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  style="margin-left: 6px"
                  @click="clearLeftQuery()"
                  >清空</el-button
                >
              </div>
              <el-table
                :data="leftData"
                border
                size="mini"
                :resizable="false"
                highlight-current-row
                height="500"
                @selection-change="handleLeftChange"
                disabled
                ref="leftTable"
              >
                >
                <el-table-column label="可选">
                  <el-table-column
                    prop="phone"
                    label="姓名"
                    type="selection"
                  ></el-table-column>
                  <el-table-column
                    prop="customerName"
                    label="姓名"
                  ></el-table-column>
                  <el-table-column
                    prop="phone"
                    label="手机号"
                  ></el-table-column>
                  <el-table-column label="添加" width="60px">
                    <template slot-scope="scope">
                      <el-button
                        type="text"
                        icon="el-icon-circle-plus-outline"
                        class="underline btn24"
                        size="mini"
                        @click="handleMoveLabel('right', 1, scope.row)"
                      >添加</el-button>
                    </template>
                  </el-table-column>
                </el-table-column>
              </el-table>
  
              <pagination
                v-show="leftTotal > 0"
                :total="leftTotal"
                :page.sync="leftQuery.pageNum"
                :limit.sync="leftQuery.pageSize"
                @pagination="getLeftData"
                style="margin-bottom:30px"
                :pagerCount="5"
                layout="total, prev, pager, next"
              />
              
            </el-col>
            <el-col :span="2" style="text-align: center;">
               <el-button type="primary" size="mini" @click="toggleLabel" style="margin-top:200px" :disabled="toggleable">切换</el-button>
            </el-col>
            <el-col :span="11">
              <div>
                <el-input
                  v-model="rightQuery.customerName"
                  placeholder="输入姓名"
                  style="width: 150px"
                  size="mini"
                  clearable
                />
                <el-input
                  v-model="rightQuery.phone"
                  placeholder="输入手机号"
                  style="width: 150px; margin-left: 3px"
                  size="mini"
                  clearable
                />
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-search"
                  style="margin-left: 6px"
                  @click="getRightData"
                  >查询</el-button
                >
                <el-button
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  style="margin-left: 6px"
                  @click="clearRightQuery()"
                  >清空</el-button
                >
              </div>
              <el-table
                :data="rightData"
                border
                size="mini"
                highlight-current-row
                :resizable="false"
                height="500"
                @selection-change="handleRightChange"
                :loading="true"
                ref="rightTable"
              >
                <el-table-column label="已选" :resizable="false">
                  <el-table-column
                    prop="phone"
                    type="selection"
                  ></el-table-column>
                  <el-table-column
                    prop="customerName"
                    label="姓名"
                  ></el-table-column>
                  <el-table-column
                    prop="phone"
                    label="手机号"
                  ></el-table-column>
                  <el-table-column label="移除" width="60px">
                    <template slot-scope="scope">
                      <el-button
                        type="text"
                        icon="el-icon-remove-outline"
                        class="underline btn24"
                        size="mini"
                        @click="handleMoveLabel('left', 1, scope.row)"
                        >移除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table-column>
              </el-table>
              <pagination
                v-show="rightTotal > 0"
                :total="rightTotal"
                :page.sync="rightQuery.pageNum"
                :limit.sync="rightQuery.pageSize"
                @pagination="getRightData"
                style="margin-bottom:30px"
                :pagerCount="5"
                layout="total, prev, pager, next"
              />
            </el-col>
          
        </el-collapse-item>
      </el-collapse>
    </div>
    <div v-else>你未启用标签功能</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: 0,
      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
      },
      moveRightData:[],
      moveLeftData:[]
    };
  },
  created() {
    this.init();
  },
  computed:{
    toggleable(){
      if(this.moveRightData.length === 0 && this.moveLeftData.length === 0){
        return true;
      }
      return false;
    }
  },
  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 向左转移
       let 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
      }
    },
    handleLeftChange(val) {
      let changeArr = [];
      val.map((ele) => {
        changeArr.push(ele.phone);
      });
      this.moveLeftData = []
      this.moveRightData = changeArr
      this.$refs.rightTable.map((ele)=>{
        ele.clearSelection();
      });
    },
    handleRightChange(val) {
      let changeArr = [];
      val.map((ele) => {
        changeArr.push(ele.phone);
      });
      this.moveLeftData = changeArr
      this.moveRightData = []
      this.$refs.leftTable.map((ele)=>{
        ele.clearSelection()
      });
    },
    init() {
      this.setPageStatus();
      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(this.moveLeftData);
      console.log(this.moveRightData);
      if(this.moveLeftData.length !== 0){
        this.handleMoveLabel('left',2,null,this.moveLeftData)
        return;
      }
      if(this.moveRightData.length !== 0){
        this.handleMoveLabel('right',2,null,this.moveRightData)
        return;
      }
      return;
    },

    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>