zkPCproject/src/views/ReceivingRecords/index.vue

<template>
  <div class="box-center">
    <!-- 头 -->
    <div class="app-top">
      <div class="app-titel" v-if="orgType != 3">
        <div
          class="label"
          style="color: #32363d; font-weight: 400; font-size: 16px"
        >
          项目选择：
        </div>
        <div style="margin-left: 8px">
          <el-select
            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>
      <div class="app-titel" style="margin-top: 15px">
        <div class="label" style="margin-left: 20px">时间：</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 == 1 ? 'primary' : ''"
            @click="tabtimetap(1)"
          >
            昨日
          </el-button>
          <el-button
            class="btn"
            :type="searchForm.dateType == 2 ? 'primary' : ''"
            @click="tabtimetap(2)"
          >
            近7天
          </el-button>
        </div>
        <div style="margin-left: 20px">
          <el-date-picker
            v-model="time"
            type="daterange"
            class="div-inp"
            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-titel" style="margin-top: 15px" v-show="isOpen">
        <div class="div-lab">
          <div class="label">客户名称：</div>
          <el-input
            class="div-inp"
            maxlength="10"
            clearable
            v-model="searchForm.name"
          ></el-input>
        </div>

        <div class="div-lab">
          <div class="label">画像标签：</div>
          <el-select
            class="div-inp"
            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-lab">
          <div class="label">录音类型：</div>
          <el-select
            v-model="searchForm.recording"
            clearable
            filterable
            placeholder="请选择"
            class="div-inp"
          >
            <el-option
              v-for="item in recordingList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div class="div-lab">
          <div class="label">置业顾问：</div>
          <el-select
            v-model="searchForm.accountId"
            clearable
            filterable
            placeholder="请选择"
            class="div-inp"
          >
            <el-option
              v-for="item in accountList"
              :key="item.accountId"
              :label="item.name"
              :value="item.accountId"
            >
            </el-option>
          </el-select>
        </div>

        <div class="div-lab">
          <!-- 默认全部 -->
          <div class="label">标记顾问：</div>
          <el-select
            v-model="searchForm.markAdvisor"
            placeholder="请选择"
            class="div-inp"
            filterable
            clearable
          >
            <el-option
              v-for="item in options5"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div class="div-lab">
          <!-- 默认全部 -->
          <div class="label">是否违禁：</div>
          <el-select
            v-model="searchForm.taboo"
            placeholder="请选择"
            class="div-inp"
            filterable
            clearable
          >
            <el-option
              v-for="item in options11"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <!-- <div class="div-lab">
          <div class="label">是否加精：</div>
          <el-select
            v-model="searchForm.zfal"
            placeholder="请选择"
            class="div-inp"
            filterable
            clearable
          >
            <el-option
              v-for="item in options12"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div> -->

        <div class="div-lab">
          <div class="label">接待时长：</div>
          <el-select
            clearable
            filterable
            v-model="searchForm.recDurationInterval"
            placeholder="请选择"
            class="div-inp"
          >
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div class="div-lab">
          <div class="label">到访次数：</div>
          <el-select
            v-model="searchForm.visitRecord"
            clearable
            filterable
            placeholder="请选择"
            class="div-inp"
          >
            <el-option
              v-for="item in options4"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div class="div-lab">
          <div class="label">推荐案例：</div>
          <el-select
            v-model="searchForm.zfal"
            clearable
            filterable
            placeholder="请选择"
            class="div-inp"
          >
            <el-option
              v-for="item in options14"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="div-lab">
          <div class="label">接待标识：</div>
          <el-select
            v-model="searchForm.validInvalid"
            clearable
            filterable
            placeholder="请选择"
            class="div-inp"
          >
            <el-option
              v-for="item in options13"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>

      <div class="app-titel" style="margin-top: 15px"></div>

      <div class="app-titel" style="margin-top: 15px">
        <div class="label" style="color: #ffffff">筛选相关：</div>
        <div>
          <el-button type="primary" @click="screen">筛选</el-button>
        </div>
        <div style="margin-left: 20px">
          <el-button @click="clearScreen" type="text">清空筛选条件</el-button>
        </div>          
        <el-button style="margin-left:10px;" @click="isSystoleForm" type="text">{{isOpen?'收起':'展开'}}<i style="margin-left:5px;" :class="isOpen?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button>

        <div
          style="margin-left: auto; margin-right: 10px"
          v-if="rec_index_downLoad"
        >
          <el-button @click="downLoad">导出</el-button>
        </div>
      </div>
    </div>

    <!-- 表格 -->
    <div class="cen-tab">
      <el-table :data="tableData" stripe style="width: 100%" height="390">
        <el-table-column
          prop="staTimeOfCN"
          label="接待开始时间"
          align="center"
          width="200"
          sortable
         height="390"
        >
        </el-table-column>
        <el-table-column prop="agentName" label="顾问" align="center">
        </el-table-column>
        <el-table-column prop="name" label="客户" align="center">
        </el-table-column>
        <el-table-column prop="visitRecordName" label="到访次数" align="center">
        </el-table-column>

        <el-table-column prop="mm" label="录音时长" align="center"  width="100" sortable>
        </el-table-column>
        <el-table-column prop="recording" label="录音类型" align="center">
          <template slot-scope="{ row }">
            {{
              row.recording == 0
                ? "没有录音"
                : row.recording == 1
                ? "部分录音"
                : "完整录音"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="markAdvisor" label="标记顾问" align="center">
          <template slot-scope="{ row }">
            {{ row.markAdvisor == 0 ? "未标记" : "已标记" }}
          </template>
        </el-table-column>

        <el-table-column prop="total" label="画像标签触达次数" align="center"  width="150" sortable>
        </el-table-column>
        <el-table-column prop="fraction" label="执行率" align="center" sortable>
          <template slot-scope="{ row }"> {{ row.fraction || "0" }}% </template>
        </el-table-column>
        
        <!-- <el-table-column prop="address" label="禁忌执行率" align="center">
        </el-table-column> -->
        <!--  scope -->
        <el-table-column prop="taboo" label="是否违禁" align="center">
          <template slot-scope="{ row }">
            {{ row.taboo == 0 ? "否" : "是" }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="zfal" label="是否加精" align="center">
          <template slot-scope="{ row }">
            {{ row.zfal == 0 ? "已加精" : "未加精" }}
          </template>
        </el-table-column> -->
        <el-table-column prop="validInvalidName" label="接待标识" align="center"></el-table-column>
        <el-table-column prop="zfalName" label="推荐案例" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="80" fixed="right">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              v-if="rec_index_show"
              @click="Receivedetailsabout(row)"
              >查看</el-button
            >
            <!-- To Doing?按钮未添加权限判断 下一版本开发（删除） -->
            <!-- <el-button type="text" @click="deleteReceive(row)">删除</el-button> -->
            <!-- <el-button type="text" v-if="rec_index_text">下载文本</el-button>
            <el-button type="text" v-if="rec_index_voice">下载录音</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 {
      isOpen:false,
      TimetoAhoose: 2,
      time: [],
      houseList: [],
      orgType: localStorage.getItem("orgType"),
      options: [],
      keywordsList: [],
      accountList: [],
      recordingList: [
        {
          value: "0",
          label: "没有录音",
        },
        {
          value: "1",
          label: "部分录音",
        },
        {
          value: "2",
          label: "完整录音",
        },
        {
          value: "3",
          label: "未传完",
        },
      ],
      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: "三次以上",
        },
      ],
      options5: [
        {
          value: "1",
          label: "已标记",
        },
        {
          value: "0",
          label: "未标记",
        },
      ],
      options11: [
        {
          value: "0",
          label: "否",
        },
        {
          value: "1",
          label: "是",
        },
      ],
      options12: [
        {
          value: "0",
          label: "已加精",
        },
        {
          value: "1",
          label: "未加精",
        },
      ],

      options13: [
        {
          label: "全部",
          value: "",
        },
        
        {
          label: "有效接待",
          value: "0",
        },
        {
          label: "无效接待",
          value: "1",
        },
      ],

      options14: [ // 正反案例
        {
          label: "全部",
          value: "",
        },
        {
          label: "正面案例",
          value: "0",
        },
        {
          label: "反面案例",
          value: "1",
        },
      ],

      currentPage: 1,
      size: 30,
      total: 10,
      value: "",
      input: "",
      tableData: [],
      tophove: "",
      type: "0",
      searchForm: {
        name: "",
        keywordsId: [],
        recording: "",
        markAdvisor: null,
        recDurationInterval: "",
        visitRecord: "",
        staDate: "",
        endDate: "",
        houseType: "",
        dateType: null,
        projectId: "",
        taboo: "",
        zfal: "",  // 正反案例  0：正面案例  1：反面案例
        validInvalid: "", // 是否为有效接待 0：有效  1：无效
      },
      rec_index_show: false, // 按钮权限
      rec_index_text: false, // 按钮权限
      rec_index_voice: false, // 按钮权限
      rec_index_downLoad: false, // 按钮权限
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  created() {
    if (this.$route.query.types) {
      let arr = this.$route.query.types.split(",");
      this.searchForm[arr[0]] = arr[1];
      console.log(arr);
    }

    if (this.$route.query.date) {
      this.time = this.$route.query.date.split(",");
      this.searchForm.staDate = this.time[0];
      this.searchForm.endDate = this.time[1];
      console.log("时间");
    }

    

    this.rec_index_show = this.permissions["rec_index_show"];
    this.rec_index_text = this.permissions["rec_index_text"];
    this.rec_index_voice = this.permissions["rec_index_voice"];
    this.rec_index_downLoad = this.permissions["rec_index_downLoad"];
  },
  mounted() {
    if(this.$route.query.validInvalid){
      this.searchForm.validInvalid = this.$route.query.validInvalid;
    }
    if(this.$route.query.markAdvisor){
      this.searchForm.markAdvisor = this.$route.query.markAdvisor;
    }
    // 获取项目列表
    this.zkhousePage();
  },

  methods: {
    isSystoleForm(){
      this.isOpen = !this.isOpen
    },
    // 清除上次进入遗留的数据
    resetParams() {
      this.searchForm.taboo = ''
      this.searchForm.validInvalid = ''
      this.searchForm.endDate = ''
      this.searchForm.staDate = ''
      this.time = ''
    },

    downLoad() {
      let obj = {
        type: 1,
        ...this.searchForm,
      };
      obj.keywordIds = obj.keywordsId.join(",");
      obj.dateType = this.searchForm.staDate ? null : this.searchForm.dateType;
      exportMethodPost("autoSR/customer/pageExport", "接待记录", obj);
    },
    // 跳转接待详情
    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 },
          });
        }
      });
    },
    // 删除此条接待记录
    deleteReceive(row) {
      console.log(row);
    },
    // 接待记录列表
    findbypage() {
      let obj = {
        current: this.currentPage,
        size: this.size,
        type: 1,
        ...this.searchForm,
      };
      obj.keywordIds = obj.keywordsId.join(",");
      (obj.dateType = this.searchForm.staDate
        ? null
        : this.searchForm.dateType),
        this.$api.api.findbypage(obj).then((res) => {
          // console.log(res)
          this.tableData = res.data.records;
          this.total = res.data.total;
        });
    },
    clearScreen() {
      this.currentPage = 1;
      this.searchForm = {
        name: "",
        keywordsId: [],
        recording: "",
        markAdvisor: null,
        recDurationInterval: "",
        visitRecord: "",
        staDate: "",
        endDate: "",
        houseType: "",
        dateType: null,
        taboo: "",
        zfal: "",
        // projectId: this.houseList[0].id,
        projectId:
          this.orgType == 3
            ? localStorage.getItem("houseId")
            : this.houseList[0].id,
      };
      this.findbypage();
    },
    houseChange() {
      this.findbypage();
      this.findKeywords();
      // 获取置业顾问列表
      this.findUserListByHouseId();
    },
    timeChange(e) {
      if (!e) {
        this.searchForm.dateType = null;
        this.searchForm.staDate = "";
        this.searchForm.endDate = "";
      } else {
        console.log(e, "asdkasljdlksajl");
        this.searchForm.dateType = null;
        this.searchForm.staDate = e[0];
        this.searchForm.endDate = e[1];
      }

      this.houseChange();
    },
    screen() {
      this.currentPage = 1;
      console.log(this.searchForm);
      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) => {
          console.log(res);
          this.keywordsList = res.data;
        });
    },
    zkhousePage() {
      this.$api.api
        .findHouseByUser({
          orgType: localStorage.getItem("orgType"),
        })
        .then((res) => {
          // console.log(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,
      });
      console.log(result);
      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.time = []
      this.houseChange();
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      // var  date = new Date(timestamp * 1000);//时间戳为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;
    },
  },

  watch: {
    $route(to, from) {
      this.resetParams()
      //监听路由是否变化
      if (to.query.types != from.query.types && to.query.types != null) {
        let arr = this.$route.query.types.split(",");
        this.searchForm[arr[0]] = arr[1];
      }

      if (to.query.date != from.query.date && to.query.date != null) {
        this.time = this.$route.query.date.split(",");
        this.searchForm.staDate = this.time[0];
        this.searchForm.endDate = this.time[1];
      }
    },
  },
};
</script>

<style scoped="scoped" lang="scss" >
.box-center {
  width: 100%;
  padding: 15px;
  min-width: 1000px;
  padding-bottom: 100px;
}
.cen-tab {
  width: 100%;
  padding: 15px;
  background: #ffffff;
  margin-top: 15px;
}
.tophove {
  color: #ffffff;
  background: #2671e2;
}
.app-top {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding-top: 15px;
  padding-bottom: 15px;
  .app-titel {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .label {
      font-size: 14px;
      font-weight: 400;
      color: #32363d;
      line-height: 32px;
      margin-left: 15px;
      min-width: 100px;
      text-align: right;
    }
    .toptimeqhuan {
      height: 30px;
      background: #ffffff;
      display: flex;
      align-items: center;
    }
    .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;
    }
  }
}
.div-lab {
  display: flex;
  margin: 5px;
}
.div-inp {
  width: 250px;
}
/deep/ .el-table__header-wrapper{
  thead{
    tr{
      th{
        background: #F5F7FA;
        color: #333333;
      }
    }
  }
}
</style>