From e66a89fad5da4e1ea4ab3823dfe4adeaebce38ca Mon Sep 17 00:00:00 2001 From: zhaorulin <zhaorulin@singsingenglish.com> Date: Sun, 8 Sep 2019 21:34:40 +0800 Subject: [PATCH] update --- src/App.vue | 31 ++++ src/components/salesLevel/index.vue | 22 --- src/components/team/hour.vue | 243 +++++++------------------- src/components/team/hourDialog.vue | 256 ++++++++++++++++++++++++++++ src/components/team/index.vue | 3 +- src/service/api.js | 12 ++ src/util/menuList.js | 4 +- 7 files changed, 363 insertions(+), 208 deletions(-) create mode 100644 src/components/team/hourDialog.vue diff --git a/src/App.vue b/src/App.vue index cde66caa..2846b86b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -299,6 +299,9 @@ border-radius: 3px; text-decoration: underline; transition: color 240ms, background-color 240ms; + & + .cell-link { + margin-left: 0; + } &:hover { background-color: #cce4ff; color: #007fff; @@ -340,4 +343,32 @@ margin-right: 8px !important; } } + + .custom-table { + margin-top: 20px; + width: 100%; + border: solid 1px #EBEEF5; + border-spacing: 0; + border-collapse: collapse; + thead { + color: #909399; + font-weight: 500; + th { + padding: 12px 10px; + border: 1px solid #EBEEF5; + } + } + tbody { + tr { + transition: background-color 240ms; + &:hover { + background-color: #F5F7FA; + } + td { + padding: 12px 10px; + border: 1px solid #EBEEF5; + } + } + } + } </style> diff --git a/src/components/salesLevel/index.vue b/src/components/salesLevel/index.vue index 6b49ce95..498f2b08 100644 --- a/src/components/salesLevel/index.vue +++ b/src/components/salesLevel/index.vue @@ -244,28 +244,6 @@ padding: 10px; box-sizing: border-box; - .custom-table { - margin-top: 20px; - width: 100%; - border: solid 1px #EBEEF5; - border-spacing: 0; - border-collapse: collapse; - thead { - color: #909399; - font-weight: 500; - th { - padding: 12px 10px; - border: 1px solid #EBEEF5; - } - } - tbody { - td { - padding: 12px 10px; - border: 1px solid #EBEEF5; - } - } - } - .subcompany-list { width: 100%; .from-item { diff --git a/src/components/team/hour.vue b/src/components/team/hour.vue index 652a822c..1daf1f14 100644 --- a/src/components/team/hour.vue +++ b/src/components/team/hour.vue @@ -9,199 +9,74 @@ </el-date-picker> <el-tabs v-model="search.team" type="card" class="tabs-refresh" @tab-click="getData"> - <el-tab-pane label="总计" name="1,2,3,4,5,6,7,8,9,10"/> + <!--<el-tab-pane label="总计" name="1,2,3,4,5,6,7,8,9,10"/>--> <el-tab-pane v-for="i in 10" :key="i" :label="'T'+i" :name="i.toString()"/> </el-tabs> - <el-table class="team-table" border size="small" :data="list" v-loading="loading" :row-class-name="tableRowClassName"> - <el-table-column label="组别" width="50px"> + <!--<table class="custom-table" v-loading="loading"> + <thead> + <tr> + <th v-for="th in table.th">{{ th }}</th> + </tr> + </thead> + <tbody> + <tr v-if="table.td1.length != 0"> + <td v-for="td in table.td1">{{ td }}</td> + </tr> + <tr v-if="table.td2.length != 0"> + <td v-for="td in table.td2">{{ td }}</td> + </tr> + <tr v-if="table.td3.length != 0"> + <td v-for="td in table.td3">{{ td }}</td> + </tr> + </tbody> + </table>--> + + <el-table class="team-table" border size="small" :data="list" v-loading="loading"> + <el-table-column label="组别" width="50px" fixed="left"> <template slot-scope="scope">{{(String(scope.row.squad).indexOf(',') > -1 && scope.row.total) ? 'åˆè®¡' : `T${scope.row.squad}`}}</template> </el-table-column> - <!--<el-table-column label="销售顾问"> - <template slot-scope="scope"> - <span v-html="transStaff(scope.row)"></span> - </template> - </el-table-column>--> - - <el-table-column v-if="this.search.team != '1,2,3,4,5,6,7,8,9,10'" label="销售顾问"> + <el-table-column label="销售顾问" fixed="left"> <template slot-scope="scope">{{scope.row.total ? '-' : scope.row.staff_name}}</template> </el-table-column> - <el-table-column prop="reach_class_num"> - <template slot="header" slot-scope="scope"> - <el-tooltip effect="dark" :content="TIP_TEAM['reach_class_num']" placement="top"> - <span class="table-refresh-header"> - è¿‘30天 <i class="el-icon-question"></i><br>åˆ°çæ•° - </span> - </el-tooltip> - </template> - </el-table-column> - - <el-table-column prop="reach_course_num"> - <template slot="header" slot-scope="scope"> - <el-tooltip effect="dark" :content="TIP_TEAM['reach_course_num']" placement="top"> - <span class="table-refresh-header"> - è¿‘30天 <i class="el-icon-question"></i><br>到课数 - </span> - </el-tooltip> - </template> - </el-table-column> - - <el-table-column prop="wait_add_friend"> - <template slot="header" slot-scope="scope"> - <el-tooltip effect="dark" :content="TIP_TEAM['wait_add_friend']" placement="top"> - <span class="table-refresh-header"> - è¿‘7天 <i class="el-icon-question"></i><br>å¾…æ·»åŠ - </span> - </el-tooltip> - </template> - </el-table-column> - - <el-table-column prop="wait_visit_num"> - <template slot="header" slot-scope="scope"> - <el-tooltip effect="dark" :content="TIP_TEAM['wait_visit_num']" placement="top"> - <span class="table-refresh-header"> - 当日 <i class="el-icon-question"></i><br>待回访 - </span> - </el-tooltip> - </template> - </el-table-column> - - <el-table-column prop="over_visit_num"> - <template slot="header" slot-scope="scope"> - <el-tooltip effect="dark" :content="TIP_TEAM['over_visit_num']" placement="top"> - <span class="table-refresh-header"> - 当日 <i class="el-icon-question"></i><br>已回访 - </span> - </el-tooltip> - </template> - <template slot-scope="scope"> - <span class="cell-link" @click="dialogToggle(scope.row, 'callback')">{{scope.row.over_visit_num}}</span> - </template> - </el-table-column> - - <el-table-column prop="chat_contact_count"> - <template slot="header" slot-scope="scope"> - <el-tooltip effect="dark" :content="TIP_TEAM['chat_contact_count']" placement="top"> - <span class="table-refresh-header"> - 当日 <i class="el-icon-question"></i><br>微信沟通 - </span> - </el-tooltip> - </template> - </el-table-column> - - <el-table-column prop="valid_chat_contact_count"> - <template slot="header" slot-scope="scope"> - <el-tooltip effect="dark" :content="TIP_TEAM['valid_chat_contact_count']" placement="top"> - <span class="table-refresh-header"> - 当日 <i class="el-icon-question"></i><br>微信有效沟通 - </span> - </el-tooltip> - </template> + <el-table-column label="有效微信沟通/通次"> <template slot-scope="scope"> - <span class="cell-link" @click="dialogToggle(scope.row, 'validchat')">{{scope.row.valid_chat_contact_count}}</span> + <span class="cell-link" @click="dialogToggle(scope.row)">{{scope.row.valid_chat_count + '/' + scope.row.valid_phone_count}}</span> </template> </el-table-column> - <el-table-column prop="valid_phone_counts"> + <el-table-column v-for="(t, index) in time" :key="index" width="60px"> <template slot="header" slot-scope="scope"> - <el-tooltip effect="dark" :content="TIP_TEAM['valid_phone_counts']" placement="top"> - <span class="table-refresh-header"> - 当日 <i class="el-icon-question"></i><br>有效通次 - </span> - </el-tooltip> + <!--<span v-html="t.split('-').join('<br>-')"></span>--> + {{t.replace(/:00/g, "")}} </template> <template slot-scope="scope"> - <span class="cell-link" @click="dialogToggle(scope.row, 'phonerecord')">{{scope.row.valid_phone_counts}}</span> - </template> - </el-table-column> - - <el-table-column prop="phone_total_time"> - <template slot="header" slot-scope="scope"> - <!--TODO--> - <el-tooltip effect="dark" :content="TIP_TEAM['phone_total_time']" placement="top"> - <span class="table-refresh-header"> - 当日 <i class="el-icon-question"></i><br>有效通时 - </span> - </el-tooltip> - </template> - </el-table-column> - - <el-table-column prop="lately_class_num"> - <template slot="header" slot-scope="scope"> - <el-tooltip effect="dark" :content="TIP_TEAM['lately_class_num']" placement="top"> - <span class="table-refresh-header"> - 未æ¥7æ—¥ <i class="el-icon-question"></i><br>开课ç级 - </span> - </el-tooltip> - </template> - <template slot-scope="scope"> - <span class="cell-link" @click="dialogToggle(scope.row, 'class')">{{scope.row.lately_class_num}}</span> - </template> - </el-table-column> - - <el-table-column prop="month_order_num"> - <template slot="header" slot-scope="scope"> - <el-tooltip effect="dark" :content="TIP_TEAM['month_order_num']" placement="top"> - <span class="table-refresh-header"> - 当月 <i class="el-icon-question"></i><br>è®¢å• - </span> - </el-tooltip> - </template> - <template slot-scope="scope"> - <span class="cell-link" @click="dialogToggle(scope.row, 'achievement')">{{scope.row.month_order_num}}</span> - </template> - </el-table-column> - - <el-table-column prop="month_order_rate"> - <template slot="header" slot-scope="scope"> - <el-tooltip effect="dark" :content="TIP_TEAM['month_order_rate']" placement="top"> - <span class="table-refresh-header"> - 当月 <i class="el-icon-question"></i><br>å¹³å‡è½¬åŒ– - </span> - </el-tooltip> - </template> - <template slot-scope="scope"> - <span class="cell-link" @click="dialogToggle(scope.row, 'achievement')"> - {{transRate(scope.row.month_trans_order_num, scope.row.month_trans_user_num)}} - </span> - </template> - </el-table-column> - - <el-table-column prop="order_money_count"> - <template slot="header" slot-scope="scope"> - <el-tooltip effect="dark" :content="TIP_TEAM['order_money_count']" placement="top"> - <span class="table-refresh-header"> - 当月 <i class="el-icon-question"></i><br>总业绩 - </span> - </el-tooltip> - </template> - <template slot-scope="scope"> - <span class="cell-link" @click="dialogToggle(scope.row, 'achievement')">{{scope.row.order_money_count}}</span> + <span class="cell-link" @click="dialogToggle(scope.row)">{{scope.row[`valid_count${index}`]}}</span> </template> </el-table-column> </el-table> <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/> - <team-dialog :dialog-obj="dialogObj"/> + <hour-dialog :dialog-obj="dialogObj"/> </div> </template> <script> import page from '@framework/page' - import TeamDialog from './dialog' - import {getTeamApi} from '@service/api'; + import HourDialog from './hourDialog' + import {getHourTeamApi} from '@service/api'; import {TIP_TEAM} from '@util/tipArr'; function getNowFormatDate() { var date = new Date(); var seperator1 = "-"; - var year = date.getFullYear();//å¹´ - var month = date.getMonth() + 1;//月 - var strDate = date.getDate(); //æ—¥ + var year = date.getFullYear(); //å¹´ + var month = date.getMonth() + 1; //月 + var strDate = date.getDate(); //æ—¥ if (month >= 1 && month <= 9) { month = "0" + month; } @@ -214,9 +89,14 @@ export default { name: "index", - components: {page, TeamDialog}, + components: {page, HourDialog}, data() { return { + time: [], + table: { + th: [], + td: [] + }, TIP_TEAM: TIP_TEAM, loading: true, search: { @@ -279,24 +159,18 @@ return '-' } }, - tableRowClassName({row, rowIndex}) { - if (rowIndex === 0) { - return 'primary-row'; - } - return ''; - }, - dialogToggle(row, type) { + dialogToggle(row) { this.dialogObj = { alias: row.alias, // è€å¸ˆå¾®ä¿¡å· - squad: (String(row.squad).indexOf(',') > -1 && row.total) ? '' : `${row.squad}`, + squad: row.squad, // 组别 show: true, - total: row.total, - type: type, user_id: row.user_id, - teacher_id: row.teacher_id, start_at: this.search.start_at, staff_name: row.staff_name.indexOf(',') > -1 ? row.staff_name.split(',').join(',') : row.staff_name + // total: row.total, + // type: type, + // teacher_id: row.teacher_id, } }, getData() { @@ -304,22 +178,25 @@ let json = { team: this.search.team, page: this.nowPage, - limit: this.limit + limit: this.limit, + start_at: this.search.start_at } - getTeamApi(json).then(res => { - if (Object.keys(res).length && res.team_list && res.team_list.page_data) { - if (Object.keys(res.team_total).length) { - res.team_total.total = true; // 方便"åˆè®¡" å¯ä»¥è¿™æ ·å†™ï¼Œä¹Ÿå¯ä»¥ç”¨scope.$index - res.team_list.page_data.unshift(res.team_total); - } + getHourTeamApi(json).then(res => { + console.log(res) + if (res && res.time) { + res.time.push('åˆè®¡'); + this.time = res.time; + } else { + this.time = [] + } + if (res && res.team_list && res.team_list.page_data) { this.list = res.team_list.page_data; - this.total = res.team_list.total; - this.loading = false; + this.total = res.team_list.total } else { this.list = []; - this.total = 0; - this.loading = false; + this.total = 0 } + this.loading = false; }) }, onPageChange(val) { diff --git a/src/components/team/hourDialog.vue b/src/components/team/hourDialog.vue new file mode 100644 index 00000000..ffd05650 --- /dev/null +++ b/src/components/team/hourDialog.vue @@ -0,0 +1,256 @@ +<template> + <el-dialog :title="title" append-to-body :visible.sync="show" top="5vh" width="1200px"> + <div v-loading="loading"> + + <table class="custom-table el-table" style="margin-bottom: 20px;"> + <thead> + <tr> + <th v-for="th in table.th">{{ th.replace(/:00/g, "") }}</th> + </tr> + </thead> + <tbody> + <tr v-if="table.td1.length != 0"> + <td v-for="(td, index) in table.td1"> + <span class="cell" :class="index>0 ? 'cell-link' : ''" @click="dialogToggle()">{{ td }}</span> + </td> + </tr> + <tr v-if="table.td2.length != 0"> + <td v-for="(td, index) in table.td2"> + <span class="cell" :class="index>0 ? 'cell-link' : ''" @click="dialogToggle()">{{ td }}</span> + </td> + </tr> + <tr v-if="table.td3.length != 0"> + <td v-for="(td, index) in table.td3"> + <span class="cell" :class="index>0 ? 'cell-link' : ''" @click="dialogToggle()">{{ td }}</span> + </td> + </tr> + <tr v-if="table.td4.length != 0"> + <td v-for="(td, index) in table.td4"> + <span class="cell" :class="index>0 ? 'cell-link' : ''" @click="dialogToggle()">{{ td }}</span> + </td> + </tr> + </tbody> + </table> + + <!--回访 开始--> + <el-table :data="list" border size="small"> + <!--<el-table-column label="åºå·" prop="staff_name"></el-table-column>--> + <el-table-column label="è€å¸ˆ" prop="teacher_name"></el-table-column> + <el-table-column label="UID" prop="user_id"></el-table-column> + <el-table-column label="客户微信昵称"> + <template slot-scope="scope">{{scope.row.nick || '-'}}</template> + </el-table-column> + <el-table-column label="èŠå¤©æ¡æ•°"> + <template slot-scope="scope">{{scope.row.chat_count}}</template> + </el-table-column> + <el-table-column label="电è¯å·ç "> + <template slot-scope="scope">{{scope.row.mobile || '-'}}</template> + </el-table-column> + <el-table-column label="呼出时间" width="92px"> + <template slot-scope="scope">{{scope.row.phone_start_time || '-'}}</template> + </el-table-column> + <el-table-column label="é€šè¯æ—¶é—´"> + <template slot-scope="scope">{{scope.row.phone_duration + 's' || '-'}}</template> + </el-table-column> + <el-table-column label="æ„å‘度"> + <template slot-scope="scope">{{scope.row.intention || '-'}}</template> + </el-table-column> + <el-table-column label="下次回访时间"> + <template slot-scope="scope">{{scope.row.next_visit_at || '-'}}</template> + </el-table-column> + <el-table-column label="æ“作"> + <template slot-scope="scope"> + <span class="cell-link">èŠå¤©è®°å½•</span> + <span class="cell-link">录音</span> + </template> + </el-table-column> + </el-table> + <!--回访 结æŸ--> + + <page :current-page="nowPage" :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/> + + </div> + </el-dialog> + +</template> + +<script> + import {getHourSingleApi, getHourTimeApi} from "@service/api"; + import page from '@framework/page' + + export default { + name: "HourDialog", + components: {page}, + props: { + dialogObj: { + type: Object, + required: true, + default: () => { + } + } + }, + data() { + return { + show: false, + loading: true, + table: { + th: [], + td1: [], + td2: [], + td3: [], + td4: [], + }, + list: [], + title: '', + total: 0, + nowPage: 1, + limit: 10, + dialogObj2: { + + } + } + }, + mounted() { + this.initDialog() + }, + methods: { + initDialog() { + // console.log(this.dialogObj) + if (this.dialogObj) { + this.show = this.dialogObj.show; + this.getData(); + } + }, + + dialogToggle(row, type) { + this.dialogObj2 = { + alias: row.alias, // è€å¸ˆå¾®ä¿¡å· + squad: (String(row.squad).indexOf(',') > -1 && row.isTotal) ? '' : `${row.squad}`, + show: true, + isTotal: row.isTotal, + type: type, + user_id: row.user_id, + teacher_id: row.teacher_id, + start_at: this.search.start_at, + staff_name: row.staff_name.indexOf(',') > -1 ? row.staff_name.split(',').join(',') : row.staff_name + } + }, + + getData() { + let json = { + wechat_number: this.dialogObj.alias, + start_at: this.dialogObj.start_at, + page: this.nowPage, + limit: this.limit, + + // type: + } + getHourSingleApi(json).then(res => { + console.log(111, res) + if (res && res.list && res.list.page_data) { + this.list = res.list.page_data; + this.total = res.list.total + } else { + this.list = []; + this.total = 0 + } + if (res && res.time && res.time.length) { + res.time.unshift(' '); + res.time.push('åˆè®¡'); + this.table.th = res.time; + } else { + this.table.th = [] + } + if (res && res.count && res.count.valid_chat_count) { + res.count.valid_chat_count.unshift('微信有效沟通'); + this.table.td1 = res.count.valid_chat_count + } else { + this.table.td1 = [] + } + if (res && res.count && res.count.chat_count10) { + res.count.chat_count10.unshift('沟通>10'); + this.table.td2 = res.count.chat_count10 + } else { + this.table.td2 = [] + } + if (res && res.count && res.count.valid_phone_count) { + res.count.valid_phone_count.unshift('有效通次'); + this.table.td3 = res.count.valid_phone_count + } else { + this.table.td3 = [] + } + if (res && res.count && res.count.three_min_count) { + res.count.three_min_count.unshift('>3分钟'); + this.table.td4 = res.count.three_min_count + } else { + this.table.td4 = [] + } + this.loading = false + + }) + /*getHourTimeApi(json).then(res => { + console.log(222,res) + })*/ + }, + + getVisited() { // 已回访 + let json = { + teacher_id: this.dialogObj.teacher_id, + // teacher_id: '82', + start_at: this.dialogObj.start_at, + page: this.nowPage, + limit: this.limit + } + getVisitedApi(json).then(res => { + this.list = res; + this.total = res.total || 0; // todo åŽå°æ²¡ç»™åˆ†é¡µ + this.loading = false; + }) + }, + + getValidchat() { // 有效沟通 + let json = { + alias: this.dialogObj.alias, + teacher_id: this.dialogObj.teacher_id, + start_at: this.dialogObj.start_at, + page: this.nowPage, + limit: this.limit + } + getValidchatApi(json.alias, json).then(res => { + if (Object.keys(res).length && res.chat_friend_list) { + this.list = res.chat_friend_list.page_data; + this.total = res.chat_friend_list.total; + } else { + this.list = []; + this.total = 0; + } + this.loading = false; + }) + }, + + onPageChange(val) { + this.nowPage = val + this.getData() + }, + onSizeChange(val) { + this.limit = val; + this.nowPage = 1; + this.getData() + }, + }, + watch: { + dialogObj: { + handler: function () { + this.loading = true; + this.initDialog() + }, + deep: true + }, + show(value) { + this.nowPage = 1; // é‡ç½® + this.$emit("changeShow", value); + } + } + } +</script> + diff --git a/src/components/team/index.vue b/src/components/team/index.vue index b7dd5d34..3171c523 100644 --- a/src/components/team/index.vue +++ b/src/components/team/index.vue @@ -305,7 +305,8 @@ let json = { team: this.search.team, page: this.nowPage, - limit: this.limit + limit: this.limit, + start_at: this.search.start_at } getTeamApi(json).then(res => { if (Object.keys(res).length && res.team_list && res.team_list.page_data) { diff --git a/src/service/api.js b/src/service/api.js index 740be347..b9547119 100644 --- a/src/service/api.js +++ b/src/service/api.js @@ -1485,3 +1485,15 @@ export const getClassOpenedApi = function (json) { export const getAchievementApi = function (json) { return Vue.prototype.$fetch(`${_baseUrl}api/admin/teacher/teamachievement`, json) }; +// å°æ—¶åŠ¨æ€ - åˆ†ç»„æ•°æ® +export const getHourTeamApi = function (json) { + return Vue.prototype.$fetch(`${_baseUrl}api/admin/teacher/teamhoursinfo`, json) +}; +// å°æ—¶åŠ¨æ€ - 组员统计 +export const getHourSingleApi = function (json) { + return Vue.prototype.$fetch(`${_baseUrl}api/admin/teacher/singleteamhoursinfo`, json) +}; +// å°æ—¶åŠ¨æ€ - åˆ†æ®µæ•°æ® +export const getHourTimeApi = function (json) { + return Vue.prototype.$fetch(`${_baseUrl}api/admin/teacher/timeslotrecordlist`, json) +}; diff --git a/src/util/menuList.js b/src/util/menuList.js index fcde7018..3d3aaa0c 100644 --- a/src/util/menuList.js +++ b/src/util/menuList.js @@ -216,7 +216,7 @@ export default [ component: e => require(['@/components/team'], e), } }, - /*{ + { value: 'å°æ—¶åЍæ€', routerName: 'hour', path: '/hour', @@ -226,7 +226,7 @@ export default [ name: 'hour', component: e => require(['@/components/team/hour'], e), } - },*/ + }, ] }, { name: '', -- 2.21.0