ZLJ_UI_V6.0/CallCenterWe.../src/views/memberManage.../memberList/index.vue

<template>
  <div class="app-container">
    <search-filter :search-datas.sync="searchDatas" :selected-id="selectedId" showadd @transfer="btn_transfer" @search="btn_search" @delorders="btn_deletes" @export="btn_export" @merge="btn_file_merge" @split="btn_file_split" />
    <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
      <el-tab-pane label="全部" name="0" />
      <el-tab-pane label="已联系客户" name="1" />
      <el-tab-pane label="未联系客户" name="2" />
    </el-tabs>
    <el-table v-loading="loading" :data="dataLists" border stripe @selection-change="changeSelects">
      <el-table-column type="selection" width="40" fixed />
      <el-table-column prop="F_Name" label="客户姓名" align="center" width="" />
      <el-table-column prop="F_Sex" label="客户性别" align="center" width="" />
      <el-table-column prop="F_Age" label="客户年龄" align="center" width="" />
      <el-table-column label="主号码" align="center" width="100px">
        <template slot-scope="scope">
          {{ scope.row.F_Phone | phoneFilter }}
          <i v-if="scope.row.F_Phone" class="el-icon-tickets phoneIcon" @click="clickCut(scope.row.F_ID)" />
          <i v-if="scope.row.F_Phone" class="el-icon-phone phoneIcon" @click="clickCallOut(scope.row.F_Phone)" />
        </template>
      </el-table-column>
      <el-table-column label="备用号码" align="center" width="">
        <template slot-scope="scope">
          {{ scope.row.F_Mobile | mobileFilter }}
          <i v-if="scope.row.F_Mobile" class="el-icon-tickets phoneIcon" @click="clickCut2(scope.row.F_ID)" />
          <i v-if="scope.row.F_Mobile" class="el-icon-phone phoneIcon" @click="clickMobile(scope.row.F_Mobile)" />
        </template>
      </el-table-column>
      <el-table-column prop="F_Label" label="会员标签" align="center" width="" />
      <el-table-column prop="F_Membership" label="会员类型" align="center" width="" />
      <el-table-column prop="F_Class" label="会员分类" align="center" width="" />
      <el-table-column prop="F_ShoeSize" label="鞋码" align="center" width="" />
      <el-table-column prop="Birthday" label="会员生日" align="center" width="100px" />
      <el-table-column prop="F_Score" label="会员积分" align="center" width="" />
      <el-table-column prop="F_Recommender" label="推荐人" align="center" width="" />
      <el-table-column prop="F_Saleperson" label="销售负责人" align="center" width="90px" />
      <el-table-column prop="F_Money" label="累计消费金额" align="center" width="" />
      <el-table-column prop="F_Firstcalltime" label="首次通话记录" align="center" width="" />
      <el-table-column prop="F_Lastholetime" label="末联通话记录" align="center" width="" />
      <el-table-column prop="F_TotalScore" label="累计积分" align="center" width="" />
      <el-table-column prop="F_Money" label="总金额" align="center" width="" />
      <el-table-column label="地址" align="center" min-width="180">
        <template slot-scope="scope">{{ scope.row | judgmentAddress }}</template>
      </el-table-column>
      <el-table-column prop="F_Count" label="购买次数" align="center" width="" />
      <el-table-column prop="F_CreateOn" label="建档日期" align="center" width="" />
      <el-table-column label="操作" width="180" align="center" class-name="oparate_btn" fixed="right">
        <template slot-scope="scope">
          <el-button v-permission="'HY_add_order'" type="text" @click="btn_add_order(scope.row.F_ID)">添加订单</el-button>
          <el-button v-permission="'HY_addTodo'" type="text" @click="btn_addTodo(scope.row.F_Phone, scope.row.F_Name)">添加待办</el-button>
          <el-button v-permission="'HY_detail'" type="text" @click="btn_detail(scope.row.F_ID.toString())">详情</el-button>
          <el-button v-permission="'HY_edit'" type="text" @click="btn_edit(scope.row.F_ID)">编辑</el-button>
          <el-button v-permission="'HY_add_remark'" type="text" @click="btn_add_remark(scope.row.F_ID)">备注</el-button>
          <el-button v-permission="'HY_delete'" type="text" @click="btn_delete(scope.row.F_ID)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="pageParams.total > 0" :total="pageParams.total" :pageindex.sync="pageParams.pageindex" :pagesize.sync="pageParams.pagesize" class="pagination" @pagination="getList" />
  </div>
</template>

<script>
import { mapGetters } from "vuex"
import { getOrderLists, deleteOrder, deletesMember, encryptphone, split } from "@/api/memberManagement/memberList"
import searchFilter from "./components/searchFilter"
import addOrEdit from "./components/addOrEdit"
import addTodo from "./components/addTodo"
import callOut from "./components/callOut"
import detail from "./components/detail"
import transfer from "./components/transfer"
import addOrder from "./components/addOrder"
import addOrEditRemark from "./components/addOrEditRemark"
import { formatterContent } from "@/utils"
import Pagination from "@/components/Pagination" // 对el-pagination 二次封装
import mergeId from "./components/mergeId"
import { getCallOutprefix } from "@/api/teloperation"
import { Send } from "@/utils/telWebsocket"
import store from "@/store"

export default {
  name: "MemberLabel",
  components: {
    Pagination,
    searchFilter,
  },
  filters: {
    phoneFilter(status) {
      if (status) {
        const mtel = status.substr(0, 3) + "****" + status.substr(7)
        return mtel
      }
    },
    mobileFilter(status) {
      if (status) {
        const arr = status.split(",")
        var mtel = ""
        for (let i = 0; i < arr.length; i++) {
          mtel += arr[i].substr(0, 3) + "****" + arr[i].substr(7) + ","
        }
        return mtel.substr(0, mtel.length - 1)
      }
    },
    judgmentAddress(data) {
      const addProvince = data.F_Province === null ? "" : data.F_Province // 省
      const addCity = data.F_City === null ? "" : data.F_City // 市
      const addArea = data.F_Area === null ? "" : data.F_Area // 县/区
      const addTown = data.F_Town === null ? "" : data.F_Town // 乡/镇
      const address = data.F_Address === null ? "" : data.F_Address // 详细地址
      const addressStr = addProvince + addCity + addArea + addTown + address // 地址
      return addressStr
    },
  },

  data() {
    return {
      phoneOne: "", // 加密主号码
      phoneOne2: "", // 加密备用号码
      phoneNumOne: "",
      searchDatas: {
        VIPCode: "", // 会员卡编号
        customerName: "", // 客户姓名
        phoneNumber: "", // 手机号码
        labelList: "", // 会员标签
        province: "", // 省份
        city: "", // 市
        county: "", // 县区
        township: "", // 乡镇
        address: "", // 详细地址
        birthday: "", // 会员生日
        referrer: "", // 推荐人
        saleperson: "", // 销售负责人
        // contactFrequency: '', //联系频次
        provinceCity: [], // 省市下拉绑定的值
        provinceCityText: [], // 省市下拉绑定文本值
        memberBirthday: [], // 会员生日
        contactTime: [],
        membership: "", //会员类型
        class: "", // 会员分类
        searchTime: [], //建档日期
        firstcalltime: [], // 首次通话时间
        lastholetime: [], // 末联通话时间
      },
      loading: false,
      pageParams: {
        pageindex: 1, // 当前第几页
        pagesize: Number(this.$store.getters.serverConfig.PAGESIZE), // 每页几条数据
        total: 0, // 总共多少数据
      },
      dataLists: [], // 列表数据
      multipleSelection: [], // 选中的数据
      selectedId: [], // 选中的id
      namesData: [],
      activeName: "0",
    }
  },
  created() {
    this.getList()
    document.onkeyup = (e) => {
      if (e.keyCode === 13) {
        this.getList()
      }
    }
  },
  computed: {
    ...mapGetters([
      "token",
      "usercode", // 工号
      "extension", // 分机号
      "sidebar",
      "avatar",
      "telCallType", // 通话类型
      "telIsVisCallout", // 外呼面板是否显示
    ]),
  },
  methods: {
    getList() {
      this.loading = true
      return new Promise((resolve) => {
        const params = {
          pageindex: this.pageParams.pageindex, // int 第几页
          pagesize: this.pageParams.pagesize, // int 每页几条信息
          name: this.searchDatas.customerName.trim(), // 客户姓名
          phone: this.searchDatas.phoneNumber.trim(), // 手机号码
          label: this.searchDatas.labelList, // 会员标签
          province: this.searchDatas.provinceCityText && this.searchDatas.provinceCityText[0], // 省份
          city: this.searchDatas.provinceCityText[1] && this.searchDatas.provinceCityText[1], // 市
          area: this.searchDatas.provinceCityText[2] && this.searchDatas.provinceCityText[2], // 县区
          town: this.searchDatas.provinceCityText[3] && this.searchDatas.provinceCityText[3], // 乡镇
          address: this.searchDatas.address.trim(), // 详细地址
          SearchStartTime: this.searchDatas.memberBirthday && this.searchDatas.memberBirthday[0], // 会员生日
          SearchEndTime: this.searchDatas.memberBirthday && this.searchDatas.memberBirthday[1], // 会员生日
          recommender: this.searchDatas.referrer.trim(), // 推荐人
          saleperson: this.searchDatas.saleperson.trim(), // 销售负责人
          laststartholetime: this.searchDatas.contactTime[0] == undefined ? "" : this.searchDatas.contactTime[0],
          Lastendholetime: this.searchDatas.contactTime[1] == undefined ? "" : this.searchDatas.contactTime[1],
          F_Membership: this.searchDatas.membership, // 会员类型
          F_Class: this.searchDatas.class, // 会员分类
          AddStartTime: this.searchDatas.searchTime && this.searchDatas.searchTime[0], // 建档日期
          AddEndTime: this.searchDatas.searchTime && this.searchDatas.searchTime[1], // 建档日期
          Firststartcalltime: this.searchDatas.firstcalltime && this.searchDatas.firstcalltime[0], // 首次通话时间
          Firstendcalltime: this.searchDatas.firstcalltime && this.searchDatas.firstcalltime[1], // 首次通话时间
          laststartholetime: this.searchDatas.lastholetime && this.searchDatas.lastholetime[0], // 末联通话时间
          lastendholetime: this.searchDatas.lastholetime && this.searchDatas.lastholetime[1], // 末联通话时间
          // contact: this.searchDatas.contactFrequency.trim(), //联系频次
        }
        getOrderLists(params).then((response) => {
          this.loading = false
          if (response.state.toLowerCase() === "success") {
            this.pageParams.total = response.rows.Totals
            this.dataLists = response.rows.Rows
          }
        })
        resolve()
      })
    },
    handleTabClick() {
      this.pageParams.pageindex = 1
      let date = new Date()
      date.setTime(date.getTime() - 24 * 60 * 60 * 1000)
      const year = date.getFullYear()
      let month = date.getMonth() + 1
      const day = date.getDate()
      const hour = "00:00:00"
      month = month.toString().padStart(2, "0")
      date = date.toString().padStart(2, "0")
      const defaultDate = `${year}-${month}-${day} ${hour}`

      if (this.activeName == 2) {
        this.searchDatas.contactTime = ["", defaultDate]
      } else if (this.activeName == 1) {
        this.searchDatas.contactTime = ["1970-01-01 00:00:00", defaultDate]
      } else {
        this.searchDatas.contactTime = ["", ""]
      }
      this.getList()
    },
    btn_search(val, data) {
      this.searchDatas.provinceCityText = data
      this.pageParams.pageindex = 1
      this.getList()
    },
    btn_export(val, data) {
      this.searchDatas.provinceCityText = data
      window.location.href =
        this.$store.getters.serverConfig.BASE_API +
        "api/vipinfo/exportexcel?name=" +
        this.searchDatas.customerName +
        "&phone=" +
        this.searchDatas.phoneNumber + // 手机号码
        "&province=" +
        (this.searchDatas.provinceCityText.length > 0 ? this.searchDatas.provinceCityText[0] : "") +
        "&city=" +
        (this.searchDatas.provinceCityText.length > 1 ? this.searchDatas.provinceCityText[1] : "") +
        "&area=" +
        (this.searchDatas.provinceCityText.length > 2 ? this.searchDatas.provinceCityText[2] : "") +
        "&town=" +
        (this.searchDatas.provinceCityText.length > 3 ? this.searchDatas.provinceCityText[3] : "") +
        "&label=" +
        this.searchDatas.labelList + // 会员类型
        "&address=" +
        this.searchDatas.address + // 地址
        "&recommender=" +
        this.searchDatas.referrer + // 推荐人
        "&saleperson=" +
        this.searchDatas.saleperson + // 销售负责人
        // '&token=' + this.token +
        "&birthday=" +
        this.searchDatas.birthday
    },
    clickMobile(number) {
      this.$layer.iframe({
        content: {
          content: callOut, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { rowid: number }, // props
        },
        area: ["30%", "30%"],
        title: "外呼",
      })
    },
    btn_detail(editId) {
      this.$layer.iframe({
        content: {
          content: detail, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { rowid: editId }, // props
        },
        area: ["80%", "90%"],
        title: "详情",
      })
    },
    btn_edit(editId) {
      this.$layer.iframe({
        content: {
          content: addOrEdit, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { rowid: editId.toString() }, // props
        },
        area: ["80%", "90%"],
        title: "编辑会员信息",
      })
    },
    // 添加订单
    btn_add_order(id) {
      this.$layer.iframe({
        content: {
          content: addOrder, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { rowid: id.toString() }, // props
        },
        area: ["80%", "90%"],
        title: "添加订单",
      })
    },
    // 添加待办
    btn_addTodo(phone, name) {
      this.$layer.iframe({
        content: {
          content: addTodo, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { rowPhone: phone, rowName: name }, // props
        },
        area: ["40%", "70%"],
        title: "添加待办信息",
      })
    },
    // 批量删除
    btn_deletes() {
      if (this.selectedId.length == 0) {
        this.$message("请选择一个选项")
        return
      } else {
        this.$confirm("您确定要删除吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            deletesMember(this.selectedId).then((response) => {
              if (response.state.toLowerCase() === "success") {
                this.getList()
                this.$message.success("删除成功!")
              }
            })
          })
          .catch(() => {
            this.$message.info("已取消删除")
          })
      }
    },
    // 档案合并
    btn_file_merge() {
      if (this.selectedId.length <= 1 || this.selectedId.length > 2) {
        this.$message("请选择两个选项")
        return
      } else {
        this.$layer.iframe({
          content: {
            content: mergeId, // 传递的组件对象
            parent: this, // 当前的vue对象
            data: { name: this.namesData, ids: this.selectedId }, // props
          },
          area: ["40%", "70%"],
          title: "选择主档案",
        })
      }
    },
    // 档案拆分
    btn_file_split() {
      if (this.selectedId.length == 0) {
        this.$message("请选择一个选项")
        return
      } else {
        this.$confirm("您确定要拆分吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            const params = {
              id: this.selectedId[0],
            }
            split(params).then((response) => {
              if (response.state.toLowerCase() === "success") {
                this.getList()
                this.$message.success("拆分成功!")
              }
            })
          })
          .catch(() => {
            this.$message.info("已取消拆分")
          })
      }
    },
    // 转移
    btn_transfer() {
      if (this.selectedId.length == 0) {
        this.$message("请选择一个选项")
        return
      } else {
        this.$layer.iframe({
          content: {
            content: transfer, // 传递的组件对象
            parent: this, // 当前的vue对象
            data: { rowid: this.selectedId }, // props
          },
          area: ["40%", "40%"],
          title: "转移档案",
        })
      }
    },
    btn_delete(editId) {
      this.$confirm("您确定要将此会员删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deletesMember(editId).then((response) => {
            if (response.state.toLowerCase() === "success") {
              this.getList()
              this.$message.success("删除成功!")
            }
          })
        })
        .catch(() => {
          this.$message.info("已取消删除")
        })
    },
    // 添加备注
    btn_add_remark(id) {
      this.$layer.iframe({
        content: {
          content: addOrEditRemark, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { rowid: id }, // props
        },
        area: ["40%", "50%"],
        title: "添加备注",
      })
    },
    changeSelects(val) {
      const ids = []
      const names = []
      this.multipleSelection = val
      for (let i = 0; i < this.multipleSelection.length; i++) {
        ids.push(this.multipleSelection[i].F_ID)
        names.push(this.multipleSelection[i].F_Name)
      }
      this.selectedId = ids
      this.namesData = names
    },

    // 主号码加密
    clickCut(id) {
      const params = {
        id: id,
        type: 0,
      }
      encryptphone(params)
        .then((response) => {
          if (response.state.toLowerCase() === "success") {
            this.phoneOne = response.data
            this.$copyText(this.phoneOne).then(
              (e) => {
                this.$message.success("号码复制成功,请联系管理员进行解密!")
              },
              (e) => {
                this.$toast("复制失败")
              }
            )
          }
        })
        .catch(() => {
          this.$message.info("查询失败")
        })
    },
    // 备用号码解密
    clickCut2(id) {
      const params = {
        id: id,
        type: 1,
      }
      encryptphone(params)
        .then((response) => {
          if (response.state.toLowerCase() === "success") {
            this.phoneOne2 = response.data
            this.$copyText(this.phoneOne2).then(
              (e) => {
                this.$message.success("号码复制成功,请联系管理员进行解密!")
              },
              (e) => {
                this.$toast("复制失败")
              }
            )
          }
        })
        .catch(() => {
          this.$message.info("查询失败")
        })
    },
    // 外呼
    clickCallOut(phoneNumber) {
      this.callOut(phoneNumber)
    },
    // 外呼
    callOut(phoneNumber) {
      if (phoneNumber) {
        getCallOutprefix(phoneNumber).then((response) => {
          if (response.state.toLowerCase() === "success") {
            const res = response.data
            this.scoketDatas = {
              Type: "MakeCall",
              AgentID: this.usercode,
              AgentExten: this.extension,
              Header: res.fix, // 号码前缀 用于截断前缀得到真实号码
              DestinationNumber: res.phone, //
            }
            store.dispatch("ChangeCallNum", phoneNumber)
            Send(this.scoketDatas)
            store.dispatch("UpdateCalloutScreen", false) // 关闭外呼面板
            store.dispatch("UpdateOutboundScreen", false) // 关闭外呼弹屏
          }
        })
      } else {
        this.$message({
          message: "请先输入电话号码！",
          type: "warning",
        })
      }
    },
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.phoneIcon {
  cursor: pointer;
}
</style>