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

<template>
  <PermissionContainer
    :jiBieArr="[2]"
    :type="4"
    :tipArr="[, '标签配置只对站点级别开放', '', , '您没有开启标签功能']"
  >
    <div>
      <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" align="center">
                    <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" align="center">
                    <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>
  </PermissionContainer>
</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>