|
- <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">
- <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.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">清空筛选条件</el-button>
- </div>
- <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%">
- <el-table-column
- prop="staTime"
- label="接待开始时间"
- align="center"
- width="200"
- >
- </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="mm" label="录音时长" align="center">
- </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">
- </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="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 label="操作" align="center" width="200" 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 {
- TimetoAhoose: 2,
- time: [],
- houseList: [],
- orgType: localStorage.getItem("orgType"),
- options: [],
- keywordsList: [],
- accountList: [],
- recordingList: [
- {
- value: "0",
- label: "没有录音",
- },
- {
- value: "1",
- label: "部分录音",
- },
- {
- value: "2",
- 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: "0",
- },
- {
- label: "无效接待",
- value: "1",
- },
- ],
-
- currentPage: 1,
- size: 10,
- total: 10,
- value: "",
- input: "",
- tableData: [],
- tophove: "",
- type: "0",
- searchForm: {
- name: "",
- keywordsId: [],
- recording: "",
- markAdvisor: null,
- recDurationInterval: "",
- visitRecord: "",
- staDate: "",
- endDate: "",
- houseType: "",
- dateType: null,
- projectId: "",
- taboo: "",
- zfal: "",
- 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() {
- // 获取项目列表
- this.zkhousePage();
- },
-
- methods: {
- // 清除上次进入遗留的数据
- 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;
- }
- </style>
|