playlet/project/src/components/customManage/manage.vue

<template>
  <div v-loading="loading">
    <!-- 使用说明 -->
    <instructions doc="customManage"></instructions>

    <div class="screenBox">
      <!-- 搜索客户 -->
      <self-input :reset='resetFlag' @inputChange='(val)=>{input_keyword = val;init(1)}'></self-input>
      <!-- 所属客服 -->
      <self-customerservice :reset='resetFlag' @customerDefine="(val)=>{user_id_list=val;init(1)}"></self-customerservice>
      <!-- 企业标签 -->
      <enterprise-tag :reset='resetFlag' @tagDefine="tagDefine"></enterprise-tag>
      <!-- 添加时间 -->
      <date-picker :reset='resetFlag' @changeTime="changeTime"></date-picker>
      <!-- 添加渠道 -->
      <self-channel :reset='resetFlag' @channelDefine="(val)=>{add_way = val;init(1)}"></self-channel>
      <!-- 性别 暂时获取不到 -->
      <self-gender :reset='resetFlag' @genderChange="(val)=>{gender = val;init(1)}"></self-gender>
      <!-- 流失状态 -->
      <loss-body :reset='resetFlag' @lossChange="lossChange"></loss-body>
      <!-- 付费情况 -->
      <screen-pay :reset='resetFlag' @payChange="payChange"></screen-pay>
      <!-- 充值时间 -->
      <date-picker :reset='resetFlag' title="充值时间" @changeTime="onChangePayTime" />
      <div class="reset" @click="resetEvent">重置</div>
    </div>
    <div class="tableInfo">
      <div>
        <div class="flex">
          <i class="el-icon-user-solid"></i>
          <div class="totalCustom">共<span>{{otherData&&otherData.count}}</span>个客户</div>
          <div class="smalLine"></div>
          <div class="excludeCustom">排除重复客户
            <el-tooltip class="disinblock" content="该数据为去重后的客户数，若客户添加了多个员工只会统计为1个客户" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
            <span>{{otherData&&otherData.exclude_count}}</span>
          </div>
          <div class="smalLine"></div>
          <div class="excludeCustom">流失客户
            <span>{{otherData&&otherData.cust_loss_uc}}</span>
          </div>
          <!-- <div class="smalLine"></div> -->
          <!-- <el-button type="primary" plain size="mini"><i class="el-icon-refresh-right"></i> 更新数据</el-button> -->
        </div>
        <div class="selectCustom">已择{{selectTotal}}个客户</div>
      </div>
      <div class="flex">
        <el-button type="primary" plain size="mini" @click="setCustomerTag(1)">批量打标签</el-button>
        <el-button type="primary" plain size="mini" @click="setCustomerTag(2)">批量移除标签</el-button>
        <el-button type="primary" plain size="mini" @click="init(1,'export')">导出Excel</el-button>
      </div>
    </div>
    <!-- table -->
    <el-table ref="multipleTable" :height='height' :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" @select-all="handleSelectAll">
      <el-table-column type="selection" :selectable="checkSelectable" width="55" align="center"></el-table-column>
      <el-table-column width="200" fixed="left">
        <template slot-scope="scope" slot="header">
          <div class="customTitle" slot="reference">{{old_pageOptionValue==2?'选择当前页面客户':'选择全部客户'}}<i class="el-icon-arrow-down"></i>
            <el-select v-model="pageOptionValue" class="customTitleSelect" placeholder="请选择" size="mini" @change="pageOptionSelect" @visible-change="pageOptionValue=''">
              <el-option v-for="item in pageOptions" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </template>
        <template slot-scope="scope">
          <div class="userBox">
            <img v-if="scope.row.avatar" :src="scope.row.avatar" alt="" class="userImg">
            <img v-else src="@/assets/img/self_head.png" alt="" class="userImg">
            <div class="userInfo">
              <div class="userName">
                <p class="name">{{scope.row.remark}}</p>
                <span v-if="scope.row.type==1">@微信</span>
              </div>
              <div class="nickname"><span>昵称：</span>{{scope.row.name}}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="性别" min-width="60" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <div>{{scope.row.gender==1?'男':scope.row.gender==2?'女':''}}</div>
        </template>
      </el-table-column>
      <el-table-column label="所属客服" min-width="160" align="center">
        <template slot-scope="scope">
          <div class="customerServiceTagBox">
            <div class="customerServiceTag"><i class="el-icon-headset"></i>{{ scope.row.user_list.name }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="所属部门" min-width="160" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <div>{{scope.row.department_list&&scope.row.department_list.join(',')}}</div>
        </template>
      </el-table-column>
      <el-table-column label="标签" min-width="160" align="center">
        <template slot-scope="scope">
          <div class="customerServiceTagBox biaoqian">
            <template v-for="(item,index) in scope.row.tag_list">
              <div class="customerServiceTag" v-if="index<=3" :key="index+'biaoqian'">{{item}}</div>
            </template>
            <el-popover placement="right" width="300" trigger="hover">
              <div class="customerServiceTagBox biaoqian" style="justify-content: flex-start;">
                <div class="customerServiceTag" v-for="(item,index) in scope.row.tag_list" :key="index+'biaoqian'">{{item}}</div>
              </div>
              <span slot="reference" class="f12 c-00B38A line21 pointer" v-if="scope.row.tag_list&&scope.row.tag_list.length>4" style="margin-top:4px">更多</span>
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="客户状态" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.relation_enable==0" class="c-F03F5C">已流失</span>
          <span v-if="scope.row.relation_enable==1" class="c-448AFF">未流失</span>
          <span v-if="scope.row.relation_enable==2" class="c-FFB055">待分配</span>
        </template>
      </el-table-column>
      <el-table-column label="付费情况" min-width="140" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.pay_num>0">已付费(<span class="c-00B38A">{{scope.row.pay_num}}次</span>)</div>
          <div v-else>未付费</div>
        </template>
      </el-table-column>
      <el-table-column prop="createtime" min-width="160" label="添加时间" show-overflow-tooltip align="center"></el-table-column>
      <!-- <el-table-column prop="address" width="160" label="上次对话时间" show-overflow-tooltip align="center"></el-table-column> -->
      <el-table-column label="添加渠道" min-width="140" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <div>{{scope.row.add_way}}</div>
        </template>
      </el-table-column>
      <el-table-column width="160" label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <div class="flex" style="padding:0 10px">
            <div :class="[scope.row.blacklist_status==1?'pointer-drop c-999':'pointer c-00B38A']" @click="shieldingEvent(scope.row)">加入黑名单</div>
            <!-- <div class="c-00B38A pointer">聊天记录</div> -->
            <div class="c-00B38A pointer" @click="showDetial(scope.row,scope.$index)">详情</div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination" v-show="total>0">
      <el-pagination background :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pages)'>
      </el-pagination>
    </div>
    <!-- 拉黑用户 -->
    <el-dialog title="拉黑原因" :visible.sync="shieldingFlag" width="578px" center>
      <shielding-user @cancel='shieldingUserCancel' :shieldingData='shieldingData'></shielding-user>
    </el-dialog>
    <!--详情-->
    <el-drawer :size="drawerSize" :visible.sync="detialDrawer" :with-header="false">
      <detial @changeDrawerSize="changeDrawerSize" @closeDrawer="closeDrawer" :rowProp="{
        customer_id:rowPro.customer_id,
        user_id:rowPro.user_id
      }" ref="detial" @tagUpdate='tagUpdate'></detial>
    </el-drawer>
    <!-- 批量打标签 -->
    <el-dialog :title="tagType==1?'批量打标签':'批量移除标签'" :visible.sync="tagVisible" width="600px" center top="15vh">
      <tag-dialog @closeTagDialog="closeTagDialog" :tagType='tagType' :userLength='multipleArr.length'></tag-dialog>
    </el-dialog>
  </div>
</template>
<script>
import selfInput from '@/components/assembly/screen/input.vue'
import selfCustomerservice from '@/components/assembly/screen/customerService.vue'
import enterpriseTag from '@/components/assembly/screen/enterpriseTag.vue'
import datePicker from '@/components/assembly/screen/datePicker.vue'
import selfChannel from '@/components/assembly/screen/channel.vue'
import selfGender from '@/components/assembly/screen/gender.vue'
import lossBody from '@/components/assembly/screen/lossBody.vue'
import screenPay from '@/components/assembly/screen/pay.vue'
import shieldingUser from '@/components/assembly/shieldingUser.vue'
import tagDialog from '@/components/assembly/tagDialog.vue'
import detial from '@/components/detials/index.vue'

export default {
  components: { tagDialog, detial, selfInput, selfCustomerservice, enterpriseTag, datePicker, selfChannel, selfGender, lossBody, screenPay, shieldingUser },
  data () {
    return {
      drawerSize: '60%',
      detialDrawer: false,
      rowPro: {},//去详情的此条对象
      loading: false,
      page: 1,
      pages: 0,
      total: 0,
      page_size: 20,
      shieldingFlag: false,
      pageOptions: [
        { name: '全部', id: 1 },
        { name: '当前页面', id: 2 },
      ],
      pageOptionValue: 2,
      old_pageOptionValue: 2,
      input_keyword: '',
      tableData: [],
      user_id_list: [],//客服user_id列表
      add_way: '',//客户来源
      tag_id_list: [],//标签id列表 当tag_type值为1或者2时必填
      tag_type: 0,//标签筛选类型 0不筛选 1满足其中一个 2同时满足 3无标签
      add_date_start: '',//添加日期 起始
      add_date_end: '',//添加日期 截止
      last_pay_time_start: '',//充值时间 起始
      last_pay_time_end: '',//充值时间 截止
      loss_status: null,//客户流失状态 没有筛选时传null 0未流失 1已流失
      pay_status: null,//	付款状态 没有筛选时传null 0未付款 1已付款
      pay_num_min: '',//最小付款次数，当pay_status是1时必传
      pay_num_max: '',//最大付款次数，当pay_status是1时必传
      resetFlag: false,//重置
      otherData: {},
      shieldingData: {},//拉黑的数据
      multipleSelection: {},
      exclude_multiple_selection: {},
      multipleArr: [],
      filter_multipleArr: [],
      selectTotal: 0,
      isAll: false,//是否选择全部
      tagVisible: false,
      tagType: 1,
      gender: '',
      height: ''
    }
  },
  created () {
    this.height = document.documentElement.clientHeight - 400 > 400 ? document.documentElement.clientHeight - 400 : 400
    this.init(1)
  },
  methods: {
    checkSelectable (row, index) {//列表可选择的用户
      return row.relation_enable == 1
    },
    changeDrawerSize () {
      this.drawerSize = this.drawerSize == '100%' ? '60%' : '100%'
    },
    closeDrawer () {
      this.detialDrawer = false
    },
    tagUpdate (val) {//标签回调
      this.$set(this.rowPro, 'tag_list', val)
      this.$set(this.tableData, this.rowPro.self_index, this.rowPro)
    },
    showDetial (row, index) {
      this.rowPro = row
      this.rowPro.self_index = index
      this.drawerSize = '60%'
      this.detialDrawer = true
      this.$nextTick(() => {
        this.$refs.detial.acIdx = 0
        this.$refs.detial.init()
      })
    },
    closeTagDialog (val) {
      if (val && val.length != 0) {
        let customer_list = [];
        let filter_customer_list = []
        if (this.isAll) {//全选
          filter_customer_list = this.filter_multipleArr.map((v) => {
            return { customer_id: v.customer_id, user_id: v.user_id }
          })
        } else {
          customer_list = this.multipleArr.map((v) => {
            return { customer_id: v.customer_id, user_id: v.user_id }
          })
        }
        this.$loading(this.$loadingConfig);
        this.$axios.post(this.URL.BASEURL + this.URL.customer_setCustomerTag, {
          user_id_list: this.user_id_list,
          customer_name: this.input_keyword,
          add_date_start: this.add_date_start,
          add_date_end: this.add_date_end,
          last_pay_time_start: this.last_pay_time_start,
          last_pay_time_end: this.last_pay_time_end,
          add_way: this.add_way,
          pay_status: this.pay_status,
          pay_num_min: this.pay_num_min,
          pay_num_max: this.pay_num_max,
          tag_type: this.tag_type,
          tag_id_list: this.tag_id_list,
          loss_status: this.loss_status,

          type: this.tagType,
          tag_list: val,
          customer_list: customer_list,
          select_all: this.isAll ? 1 : 0,
          filter_customer_list: filter_customer_list
        }).then((res) => {
          var res = res.data
          this.$loading(this.$loadingConfig).close();
          if (res && res.errno == 0) {
            this.$notify.info({
              title: '提示',
              message: `批量${this.tagType == 1 ? '打' : '移除'}标签进行中，请耐心等待！`,
              duration: 0
            });
            this.customer_batchMarkTagResult(res.rst.id)
          } else if (res.errno != 4002) {
            this.$message({
              message: res.err,
              type: "warning"
            })
          }
        }).catch((err) => {
          this.$loading(this.$loadingConfig).close();
        });
      }
      this.tagVisible = false
    },
    customer_batchMarkTagResult (id) {//批量编辑标签结果
      this.$axios.get(this.URL.BASEURL + this.URL.customer_batchMarkTagResult, {
        params: {
          id: id
        }
      }).then((res) => {
        var res = res.data
        if (res && res.errno == 0) {
          if (res.rst.status == 3) {
            this.$notify.closeAll()
            this.$notify({
              title: '成功',
              message: '标签编辑成功！',
              type: 'success',
              duration: 0
            });
            this.multipleSelection = {};
            this.exclude_multiple_selection = {};
            this.multipleArr = [];
            this.filter_multipleArr = [];
            this.selectTotal = 0;
            this.isAll = false;
            this.init(this.page)
          } else if (res.rst.status == 3) {
            this.$notify.closeAll()
            this.$notify.error({
              title: '错误',
              message: '标签编辑失败!',
              type: 'success',
              duration: 0
            });
          } else {
            setTimeout(() => {
              this.customer_batchMarkTagResult(id)
            }, 2000)
          }
        } else if (res.errno != 4002) {
          this.$notify.closeAll()
          this.$notify.error({
            title: '错误',
            message: res.err,
            type: 'success',
            duration: 0
          });
        }
      }).catch((err) => {
        this.$notify.closeAll()
        this.$notify.error({
          title: '错误',
          message: '标签编辑失败，服务器错误！',
          type: 'success',
          duration: 0
        });
      });
    },
    resetEvent () {//重置
      this.resetFlag = !this.resetFlag
      this.input_keyword = '';
      this.user_id_list = [];
      this.add_way = '';
      this.tag_id_list = [];
      this.tag_type = 0;
      this.add_date_start = '';
      this.add_date_end = '';
      this.last_pay_time_start = '';
      this.last_pay_time_end = '';
      this.loss_status = null;
      this.pay_status = null;
      this.pay_num_min = '';
      this.pay_num_max = '';
      this.gender = '';
      this.init(1)
    },
    shieldingUserCancel (type) {
      if (type == 'update') {
        this.init(1)
      }
      this.shieldingFlag = false
    },
    shieldingEvent (item) {
      if (item.blacklist_status != 1) {//1表示被加入黑名单了 0表示没有
        this.shieldingFlag = true;
        this.shieldingData = {
          customer_id: item.customer_id,
          user_id: item.user_id
        }
      }
    },
    payChange (data) {//付费情况变化
      this.pay_status = data.radio;
      this.pay_num_min = data.minValue;
      this.pay_num_max = data.maxValue;
      this.init(1)
    },
    lossChange (val) {//筛选流失状态变化
      if (val == '') {
        this.loss_status = null
      } else {
        this.loss_status = val
      }
      this.init(1)
    },
    changeTime (time) {//筛选时间变化
      if (!time || time && time.length == 0) {
        this.add_date_start = '';
        this.add_date_end = '';
      } else {
        this.add_date_start = time[0]
        this.add_date_end = time[1]
      }
      this.init(1)
    },
    // 监听“充值时间”筛选变化
    onChangePayTime (time) {
      if (!time || time && time.length == 0) {
        this.last_pay_time_start = '';
        this.last_pay_time_end = '';
      } else {
        this.last_pay_time_start = time[0]
        this.last_pay_time_end = time[1]
      }
      this.init(1)
    },
    tagDefine (data) {//标签选择回调
      if (data.tag == 1 || data.tag == 2) {
        if (data.tag_id_list && data.tag_id_list.length != 0) {
          this.tag_id_list = data.tag_id_list
          this.tag_type = data.tag
        } else {
          this.tag_type = 0
          this.tag_id_list = []
        }
      } else {
        this.tag_type = data.tag
        this.tag_id_list = []
      }
      this.init(1)
    },
    init (page, type) {
      if (type != 'export') {
        this.page = page ? page : this.page;
      } else {
        if (this.total == 0) {
          this.$message({
            message: '暂无数据可导出',
            type: "warning"
          })
          return
        }
      }
      this.loading = true
      this.$axios.get(this.URL.BASEURL + this.URL.customerList, {
        params: {
          user_id_list: this.user_id_list,
          customer_name: this.input_keyword,
          add_date_start: this.add_date_start,
          add_date_end: this.add_date_end,
          last_pay_time_start: this.last_pay_time_start,
          last_pay_time_end: this.last_pay_time_end,
          add_way: this.add_way,
          pay_status: this.pay_status,
          pay_num_min: this.pay_num_min,
          pay_num_max: this.pay_num_max,
          tag_type: this.tag_type,
          tag_id_list: this.tag_id_list,
          loss_status: this.loss_status,
          page: type == 'export' ? 1 : this.page,
          page_size: type == 'export' ? 20000 : this.page_size,
          source: 1,
          gender: this.gender
        }
      }).then((res) => {
        var res = res.data
        this.loading = false
        if (res && res.errno == 0) {
          if (type == 'export') {
            this.exportEvent(res.rst.data.list)
          } else {
            this.tableData = res.rst.data.list;
            this.otherData = {
              count: res.rst.data.count,
              exclude_count: res.rst.data.exclude_count,
              cust_loss_uc: res.rst.data.cust_loss_uc
            }
            this.total = res.rst.pageInfo.total;
            this.pages = res.rst.pageInfo.pages;

            // 回显选择
            let page_multiple_data = [];
            if (this.isAll && (this.multipleSelection[this.page] === undefined)) {
              page_multiple_data = this.tableData
            } else {
              let multiple_id = this.multipleSelection[this.page] ? this.multipleSelection[this.page].map((v) => {
                return v.user_id + '-' + v.customer_id
              }) : []
              this.tableData.forEach((item) => {
                if (multiple_id.indexOf((item.user_id + '-' + item.customer_id)) != -1) {
                  page_multiple_data.push(item)
                }
              })
            }
            this.$nextTick(() => {
              page_multiple_data.forEach((row) => {
                this.$refs.multipleTable.toggleRowSelection(row, true);
              })
            })
          }
        } else if (res.errno != 4002) {
          this.$message({
            message: res.err,
            type: "warning"
          })
        }
      }).catch((err) => {
        this.loading = false
      });
    },
    userChange () {
      let multipleArr = []
      for (var i in this.multipleSelection) {
        multipleArr = multipleArr.concat(this.multipleSelection[i] ? this.multipleSelection[i] : [])
      }
      multipleArr = multipleArr.filter((v) => {//只有未流失的可以打标签
        return v.relation_enable == 1
      })
      this.multipleArr = multipleArr;

      if (this.isAll) {//全选
        let filter_multipleArr = []
        for (var i in this.exclude_multiple_selection) {
          filter_multipleArr = filter_multipleArr.concat(this.exclude_multiple_selection[i] ? this.exclude_multiple_selection[i] : [])
        }
        filter_multipleArr = filter_multipleArr.filter((v) => {//只有未流失的可以打标签
          return v.relation_enable == 1
        })
        this.filter_multipleArr = filter_multipleArr
        this.selectTotal = Number(this.total) - filter_multipleArr.length
      } else {
        this.selectTotal = this.multipleArr.length
      }
    },
    setCustomerTag (type) {//批量打标签、移除标签
      //type 操作类型 1添加标签 2移除标签
      this.userChange()
      if (this.selectTotal <= 0) {
        this.$message({
          message: '请选择客户！',
          type: "warning"
        })
        return
      }
      this.tagVisible = true;
      this.tagType = type
    },
    handleCurrentChange (val) {
      this.init(val)
    },
    handleSelectAll (row) {//点击了全选
      if (this.isAll && row.length == 0) {
        this.multipleSelection = {}
        this.exclude_multiple_selection = {}
        this.isAll = false
        this.userChange()
      }
    },
    handleSelectionChange (row) {//点击选择变化
      this.multipleSelection[this.page] = row && row.length != 0 ? row : null;
      if (this.isAll) {//全选状态下被排除的用户
        let page_multiple_data = [];
        let multiple_id = this.multipleSelection[this.page] ? this.multipleSelection[this.page].map((v) => {
          return v.user_id + '-' + v.customer_id
        }) : []
        this.tableData.forEach((item) => {
          if (multiple_id.indexOf((item.user_id + '-' + item.customer_id)) == -1) {
            page_multiple_data.push(item)
          }
        })
        this.exclude_multiple_selection[this.page] = page_multiple_data
      }
      this.userChange()
    },
    pageOptionSelect (val) {//选择
      if (val && val != '') {
        this.old_pageOptionValue = val;
      }
      this.exclude_multiple_selection = {}
      if (this.pageOptionValue == 1) {
        this.isAll = true
      } else {//选择当前页面
        this.isAll = false
        let current_page_data = this.multipleSelection[this.page];
        this.multipleSelection = {};
        this.multipleSelection[this.page] = current_page_data ? current_page_data : null;
      }
      this.tableData.forEach((row) => {
        this.$refs.multipleTable.toggleRowSelection(row, true);
      });
      this.userChange()
    },
    exportEvent (data) {
      let list = data;
      let tHeader = ['客户id', '客户名称', '客户备注', '客户头像', '外部联系人的类型', '客户状态', '所属客服', '客服ID', '所属部门', '标签', '性别', '添加时间', '添加渠道', '付费情况']
      let filterVal = ['customer_id', 'name', 'remark', 'avatar', 'self_type', 'self_relation_enable', 'self_user_name', 'user_id', 'department_list', 'tag_list', 'self_gender', 'createtime', 'add_way', 'self_pay_num']
      list.forEach((item) => {
        item.self_pay_num = item.pay_num > 0 ? ('已付费(' + item.pay_num + '次)') : '未付费';
        item.self_gender = item.gender == 1 ? '男' : item.gender == 2 ? '女' : '';
        item.self_user_name = item.user_list.name;
        item.self_type = item.type == 1 ? '微信用户' : item.type == 2 ? '' : '企业微信';
        item.self_relation_enable = item.relation_enable == 0 ? '已流失' : item.relation_enable == 1 ? '未流失' : item.relation_enable == 2 ? '待分配' : ''
      })
      let excelDatas = [
        {
          tHeader: tHeader, // sheet表一头部
          filterVal: filterVal, // 表一的数据字段
          tableDatas: list, // 表一的整体json数据
          sheetName: ''// 表一的sheet名字
        }
      ]
      this.$exportOrder({ excelDatas, name: `客户管理（导出时间：${this.$getDay(0)}）` })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/style/list.scss";
</style>