zkPCproject/src/views/Customer/index.vue

<template>
  <div class="box-center">
    <!-- <div class="add-button">
          <el-button type="primary">筛选</el-button>
    </div> -->
    <div class="booxtop">
      <div class="app-topbox">
        <div class="div-labox" v-if="orgType != 3">
          <div class="labeltext">楼盘选择：</div>
          <el-select
            class="div-inpbox"
            v-model="searchForm.projectId"
            @change="houseChange"
            placeholder="请选择"
            filterable
          >
            <el-option
              v-for="item in houseList"
              :key="item.id"
              :label="item.propertyName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>

        <div class="div-labox">
          <div class="labeltext">
            <!-- 时间： -->
            <el-select
              v-model="searchForm.timeType"
              @change="houseChange"
              placeholder="请选择"
              style="width: 125px"
            >
              <el-option
                v-for="item in timeTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="toptimeqhuan">
            <el-button
              class="btn"
              :type="searchForm.dateType == null ? 'primary' : ''"
              @click="tabtimetap(null)"
            >
              全部
            </el-button>
            <el-button
              class="btn"
              :type="searchForm.dateType == 0 ? 'primary' : ''"
              @click="tabtimetap(0)"
            >
              今日
            </el-button>
            <el-button
              class="btn"
              :type="searchForm.dateType == 2 ? 'primary' : ''"
              @click="tabtimetap(2)"
            >
              近7天
            </el-button>
            <el-button
              class="btn"
              :type="searchForm.dateType == 6 ? 'primary' : ''"
              @click="tabtimetap(6)"
            >
              近30天
            </el-button>
          </div>
          <el-date-picker
            v-model="time"
            type="daterange"
            class="div-inpbox"
            range-separator="-"
            start-placeholder="开始日期"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd"
            end-placeholder="结束日期"
            @change="timeChange"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="app-topbox">
        <div class="div-labox">
          <div class="labeltext">客户名称：</div>
          <el-input
            class="div-inpbox"
            maxlength="10"
            clearable
            v-model="searchForm.name"
          ></el-input>
        </div>
        <div class="div-labox">
          <div class="labeltext">置业顾问：</div>
          <el-select
            v-model="searchForm.accountId"
            clearable
            filterable
            placeholder="请选择"
            class="div-inpbox"
          >
            <el-option
              v-for="item in accountList"
              :key="item.accountId"
              :label="item.name"
              :value="item.accountId"
            >
            </el-option>
          </el-select>
        </div>
        <div class="div-labox">
          <div class="labeltext">画像标签：</div>
          <el-select
            class="div-inpbox"
            multiple
            clearable
            filterable
            collapse-tags
            v-model="searchForm.keywordsId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in keywordsList"
              :key="item.keywordsId"
              :label="
                item.isInterval == 0
                  ? item.name + '-' + item.endName + item.unit
                  : item.name
              "
              :value="item.keywordsId"
            >
            </el-option>
          </el-select>
        </div>

        <div class="div-labox">
          <div class="labeltext">客户等级：</div>
          <el-select
            v-model="searchForm.level"
            clearable
            filterable
            placeholder="请选择"
            class="div-inpbox"
          >
            <el-option
              v-for="item in levelList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="div-labox">
          <div class="labeltext">接待时长：</div>
          <el-select
            clearable
            filterable
            v-model="searchForm.recDurationInterval"
            placeholder="请选择"
            class="div-inpbox"
          >
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="div-labox">
          <div class="labeltext">到访次数：</div>
          <el-select
            v-model="searchForm.visitRecord"
            clearable
            filterable
            placeholder="请选择"
            class="div-inpbox"
          >
            <el-option
              v-for="item in options4"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="div-labox">
          <div class="labeltext">客户阶段：</div>
          <el-select
            v-model="searchForm.clientStage"
            clearable
            filterable
            placeholder="请选择"
            class="div-inpbox"
          >
            <el-option
              v-for="item in clientStagelist"
              :key="item.id"
              :label="item.stageName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="div-labox">
          <div class="labeltext">排序：</div>
          <el-select
            v-model="searchForm.orderBy"
            clearable
            filterable
            placeholder="请选择"
            class="div-inpbox"
          >
            <el-option
              v-for="item in orderList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
                <div class="div-labox">
          <div class="labeltext">违禁标签：</div>
          <el-select
            v-model="searchForm.sensitiveWords"
            multiple
            clearable
            filterable
            collapse-tags
            placeholder="请选择"
            class="div-inpbox"
          >
            <el-option
              v-for="item in sensitiveList"
              :key="item.id"
              :label="item.words"
              :value="item.words"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="app-topbox">
        <div class="div-labox">
          <div class="labeltext"></div>
          <el-button type="primary" @click="screen">筛选</el-button>
          <el-button @click="clearScreen">清空筛选条件</el-button>
        </div>
        <div
          style="margin-left: auto; margin-right: 10px"
          v-if="cus_index_downLoad"
        >
          <el-button @click="downLoad">导出</el-button>
        </div>
      </div>
    </div>

    <!-- 表格 -->
    <div class="cen-tab">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="name" label="客户" align="center">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="联系电话"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="agentName"
          label="置业顾问"
          width="110"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="level" label="客户等级" align="center">
          <template slot-scope="{ row }">
            {{
              row.level == 1
                ? "A"
                : row.level == 2
                ? "B"
                : row.level == 3
                ? "C"
                : row.level == 4
                ? "D"
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column prop="clientStageName" label="客户阶段" align="center">
          <template slot-scope="{ row }">
            {{ row.clientStageName || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="visitRecord" label="到访次数" align="center">
          <template slot-scope="{ row }">
            {{ row.visitRecord || "0" }}
          </template>
        </el-table-column>
        <el-table-column prop="mm" label="接待时长" align="center">
        </el-table-column>
        <el-table-column prop="fraction" label="销讲执行率" align="center">
          <template slot-scope="{ row }"> {{ row.fraction || "0" }}% </template>
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="添加时间"
          width="200"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="最近到访时间"
          width="200"
          align="center"
        >
          <template slot-scope="{ row }">
            {{ row.createTime || "暂无" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="250" fixed="right">
          <template slot-scope="{ row }">
            <!-- <el-button type="text" v-if="cus_index_detail">客户详情</el-button> -->
            <el-button
              type="text"
              @click="Receivedetailsabout(row)"
              v-if="cus_index_visit"
              >接待详情</el-button
            >
            <!-- <el-button type="text">更多</el-button> -->
            <el-button type="text" @click="tranfser(row)" v-if="cus_index_take"
              >转交</el-button
            >
            <!-- <el-button type="text" v-if="cus_index_del">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 30, 50]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { exportMethodPost } from "@/util/util";
export default {
  data() {
    return {
      TimetoAhoose: 2,
      time: [],
      houseList: [],
      options: [],
      keywordsList: [],
      accountList: [],
      orderList: [
        {
          value: "1",
          label: "创建时间倒叙",
        },
        {
          value: "2",
          label: "创建时间正序",
        },
        {
          value: "3",
          label: "接待时间倒叙",
        },
        {
          value: "4",
          label: "接待时间正序",
        },
        {
          value: "5",
          label: "执行率正序",
        },
        {
          value: "6",
          label: "执行率倒叙",
        },
        {
          value: "7",
          label: "接访次数正序",
        },
        {
          value: "8",
          label: "接访次数倒叙",
        },
      ],
      levelList: [
        {
          value: "1",
          label: "A",
        },
        {
          value: "2",
          label: "B",
        },
        {
          value: "3",
          label: "C",
        },
        {
          value: "4",
          label: "D",
        },
      ],
      options3: [
        {
          value: "1",
          label: "0-15分钟",
        },
        {
          value: "2",
          label: "15-30分钟",
        },
        {
          value: "3",
          label: "30-60分钟",
        },
        {
          value: "4",
          label: "60-90分钟",
        },
        {
          value: "5",
          label: "90分钟以上",
        },
      ],
      options4: [
        {
          value: "1",
          label: "首次到访",
        },
        {
          value: "2",
          label: "2次到访",
        },
        {
          value: "3",
          label: "3次到访",
        },
        {
          value: "4",
          label: "三次以上",
        },
      ],
      timeTypeList: [
        {
          value: "0",
          label: "添加时间",
        },
        {
          value: "1",
          label: "最近到访时间",
        },
      ],
      options5: [
        {
          value: null,
          label: "全部",
        },
        {
          value: "1",
          label: "已标注",
        },
        {
          value: "2",
          label: "未标注",
        },
      ],
      currentPage: 1,
      size: 10,
      total: 10,
      value: "",
      input: "",
      tableData: [],
      tophove: "",
      orgType: localStorage.getItem("orgType"),
      type: "0",
      searchForm: {
        name: "",
        keywordsId: [],
        markAdvisor: null,
        level: "",
        recDurationInterval: "",
        visitRecord: "",
        staDate: "",
        endDate: "",
        dateType: null,
        projectId: "",
        timeType: "0",
        clientStage: "",
        orderBy:'',
        sensitiveWords:[],
      },
      clientStagelist: [],
      sensitiveList:[],//违禁词
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  created() {
    this.cus_index_detail = this.permissions["cus_index_detail"];
    this.cus_index_take = this.permissions["cus_index_take"];
    this.cus_index_del = this.permissions["cus_index_del"];
    this.cus_index_visit = this.permissions["cus_index_visit"];
    this.cus_index_downLoad = this.permissions["cus_index_downLoad"];
  },
  mounted() {
    // 获取楼盘列表
    this.zkhousePage();
  },
  methods: {
    downLoad() {
      // this.searchForm
      exportMethodPost(
        "autoSR/customer/customerManagementExport",
        "客户管理",
        this.searchForm
      );
    },
    // 跳转接待详情
    Receivedetailsabout(row) {
      this.$api.http.findByCusIdcusId({ cusId: row.id }).then((res) => {
        if (res.data.length == 0) {
          this.$message({
            message: "无录音",
            type: "warning",
          });
        } else {
          this.$router.push({
            path: "/Receive/index",
            query: { flag: row.id, AudioIdx: 0 },
          });
        }
      });
    },
    // 转交
    tranfser(row) {
      console.log(row);
    },
    // 接待记录列表
    findbypage() {
      let obj = {
        current: this.currentPage,
        size: this.size,
        ...this.searchForm,
      };
      obj.keywordIds = obj.keywordsId.join(",");
      obj.sensitiveWords = JSON.stringify(obj.sensitiveWords);
      (obj.dateType = this.searchForm.staDate
        ? null
        : this.searchForm.dateType),
        this.$api.api.customerManagement(obj).then((res) => {
          // console.log(res)
          this.tableData = res.data.records;
          this.total = res.data.total;
        });
    },
    clearScreen() {
      this.currentPage = 1;
      this.searchForm = {
        name: "",
        keywordsId: [],
        markAdvisor: null,
        level: "",
        recDurationInterval: "",
        visitRecord: "",
        staDate: "",
        endDate: "",
        dateType: null,
        searchForm: "",
        timeType: "0",
        orderBy:'',
        sensitiveWords:[],
        projectId:
          this.orgType == 3
            ? localStorage.getItem("houseId")
            : this.houseList[0].id,
      };
      this.findbypage();
    },
    houseChange() {
      this.searchForm.sensitiveWords=[]
      this.searchForm.keywordsId=[]
      this.findbypage();
      this.findKeywords();
      // 获取置业顾问列表
      this.findUserListByHouseId();
      this.getclientStage();
      // 获取违禁词
      this.sensitivewordsList()
    },
    // 违禁词
    sensitivewordsList(){
      let obj = {
        houseId: this.searchForm.projectId,
      };
      this.$api.api.sensitivewordsList(obj).then((res) => {
        console.log(res,'suhju')
        this.sensitiveList = res.data;
      });
    },
    getclientStage() {
      let obj = {
        houseId: this.searchForm.projectId,
      };
      this.$api.api.lifeTrackDefineList(obj).then((res) => {
        this.clientStagelist = res.data;
      });
    },

    timeChange(e) {
      this.searchForm.dateType = null;
      this.searchForm.staDate = e[0];
      this.searchForm.endDate = e[1];
      this.houseChange();
    },
    screen() {
      this.currentPage = 1;
      this.findbypage();
    },
    findKeywords() {
      this.$api.api
        .findKeywords({
          dateType: this.searchForm.staDate ? null : this.searchForm.dateType,
          statDateStart: this.searchForm.staDate,
          statDateEnd: this.searchForm.endDate,
          projectId: this.searchForm.projectId,
          type: this.type,
        })
        .then((res) => {
          this.keywordsList = res.data;
        });
    },
    zkhousePage() {
      this.$api.api
        .findHouseByUser({
          orgType: localStorage.getItem("orgType"),
        })
        .then((res) => {
          this.houseList = res.data;
          if (localStorage.getItem("orgType") == 3) {
            this.searchForm.projectId = localStorage.getItem("houseId");
          } else {
            this.searchForm.projectId = res.data[0].id;
          }
          this.houseChange();
        });
    },
    // 置业顾问列表
    async findUserListByHouseId() {
      let result = await this.$api.api.findUserListByHouseId({
        orgType: localStorage.getItem("orgType"),
        projectId: this.searchForm.projectId,
      });
      this.accountList = result.data;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.findbypage();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.findbypage();
    },
    tabtimetap(idx) {
      this.searchForm.staDate = "";
      this.searchForm.endDate = "";
      // this.$set(this, "time", null);
      this.searchForm.dateType = idx;
      this.houseChange();
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var yyyy = date.getFullYear() + "-";

      var MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";

      // var dd = date.getDate() + ' ';
      var dd =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      return yyyy + MM + dd;
    },
  },
};
</script>

<style scoped="scoped" lang="scss" >
.box-center {
  width: 98%;
  margin: 0 auto;
  margin-top: 6px;
  padding: 16px;
  min-width: 1000px;
  padding-bottom: 20px;
  background: #ffffff;
  border-radius: 4px;
  font-size: 14px;
}
.booxtop {
  width: 100%;
  padding-bottom: 20px;
  background: #f7f8fa;
  border-radius: 2px;
  margin-top: 0px;
  padding-right: 20px;
  .app-topbox {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .div-labox {
      margin-right: 40px;
      margin-top: 20px;
      height: 32px;
      display: flex;
      align-items: center;
      .labeltext {
        min-width: 85px;
        text-align: right;
        line-height: 32px;
      }
      .div-inpbox {
        width: 220px;
      }
      .toptimeqhuan {
        height: 30px;
        display: flex;
        align-items: center;
        margin-left: 20px;
      }
      .toptimeqhuan div {
        padding-left: 20px;
        padding-right: 20px;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        margin-right: 15px;
        border-radius: 4px;
        border: 1px solid #e0e0e0;
      }
      .toptimeqhuan .btn {
        padding-left: 20px;
        padding-right: 20px;
        text-align: center;
        // line-height: 30px;
        font-size: 14px;
        margin-right: 15px;
        border-radius: 4px;
        border: 1px solid #e0e0e0;
      }
    }
  }
}
.cen-tab {
  width: 100%;
  padding: 15px;
  margin-top: 15px;
}
.tophove {
  color: #ffffff;
  background: #2671e2;
}
</style>