<template>
<div class="user">
<el-form ref="searchFrom" :model="searchFrom" size="mini" label-width="68px" inline>
<el-form-item label="昵称">
<el-input v-model="searchFrom.name" style="width: 90px"></el-input>
</el-form-item>
<el-form-item label="手机号">
<el-input v-model="searchFrom.alias" style="width: 110px"></el-input>
</el-form-item>
<el-form-item label="老师状态" clearable>
<el-select v-model="searchFrom.status" @change="getUser" style="width: 88px" clearable>
<el-option label="带班" value="0"></el-option>
<el-option label="不带班" value="1"></el-option>
</el-select>
</el-form-item>
<!--<el-form-item label="教师类型">
<el-select v-model="searchFrom.type" style="width: 95px" placeholder="请选择" @change="getUser" clearable>
<!– <el-option
v-for="item in dialogObj.teacherTypeList"
:key="item.id"
:label="item.label"
:value="item.id">
</el-option> –>
<el-option v-for="data in dialogObj.teacherTypeList" :key="data.type" :label="data.name"
:value="data.type"></el-option>
</el-select>
</el-form-item>-->
<el-form-item label="任务日期">
<el-date-picker
style="width: 140px;"
type="date"
v-model="searchFrom.task_date"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" plain @click="getUser">搜索</el-button>
</el-form-item>
<el-form-item v-if="!$store.state.readonly">
<!--<el-button type="success" plain @click="add">新增教师</el-button>-->
<el-button type="success" plain @click="add">新增</el-button>
</el-form-item>
</el-form>
<el-tabs v-model="searchFrom.squad" type="card" style="background: white;padding-top: 10px" @tab-click="getUser">
<el-tab-pane v-if="phoneNumObj.teacher_type!='teacher_leader'" v-for="i in 10" :key="i+(index-1)*10" :label="'T'+(i+(index-1)*10)" :name="(i+(index-1)*10).toString()"/>
<!-- <el-tab-pane v-if="phoneNumObj.teacher_type=='teacher_leader'" :key="phoneNumObj.squad" :label="'T'+phoneNumObj.squad" :name="phoneNumObj.squad.toString()"/> -->
</el-tabs>
<el-table
size="mini"
:data="userList"
height="calc(100vh - 322px)"
style="width: 100%">
<el-table-column
prop="name"
width="250"
label="老师">
<template slot-scope="scope">
<div style="display: flex;">
<a :href="scope.row.qr" target="_blank" class="clearfix">
<img class="avatar" :src="scope.row.qr" alt="二维码">
</a>
<div>
老师名：{{scope.row.name}}
<br>
微信号：{{scope.row.alias}}
<br>
类别：{{scope.row.type | teacherType}} 老师
<br>
顾问：{{scope.row.adviser}}
<br>
开始时间：<span style="display: inline-block;width: 72px;vertical-align: text-top;line-height: 16px;">{{scope.row.teacher_start}}</span>
</div>
</div>
</template>
</el-table-column>
<el-table-column
prop="name"
label="添加好友">
<template slot-scope="scope">
进班人数：{{scope.row.into_class_num}}<br>
加老师处理数：{{scope.row.add_teacher_exec_num}}<br>
加老师成功数：{{scope.row.add_teacher_success_num}}<br>
成功率：
<el-progress
style="display: inline-block;width: calc(90% - 50px)"
:text-inside="true"
:stroke-width="18"
:color="Number(scope.row.add_teacher_success_rate)>70 ? '#67C23A' : '#f00'"
:percentage="Number(scope.row.add_teacher_success_rate)?Number(scope.row.add_teacher_success_rate):0">
</el-progress>
<br>
处理率：
<el-progress
style="display: inline-block;width: calc(90% - 50px)"
:text-inside="true"
:stroke-width="18"
:color="Number(scope.row.add_teacher_exec_rate)===100 ? '#67C23A' : '#f00'"
:percentage="Number(scope.row.add_teacher_exec_rate)?Number(scope.row.add_teacher_exec_rate):0">
</el-progress>
</template>
</el-table-column>
<el-table-column
prop="name"
label="召回率">
<template slot-scope="scope">
需召回人数：{{scope.row.need_recall_num}}<br>
已沟通人数：{{scope.row.recall_desc_exec_num}}<br>
用户回复数：{{scope.row.recall_desc_reply_num}}<br>
达标率：
<el-progress
style="display: inline-block;width: calc(90% - 50px)"
:text-inside="true"
:stroke-width="18"
:color="Number(scope.row.recall_watch_rate)===100 ? '#67C23A' : '#dd001b'"
:percentage="Number(scope.row.recall_watch_rate)?Number(scope.row.recall_watch_rate):0">
</el-progress>
<br>
处理率：
<el-progress
style="display: inline-block;width: calc(90% - 50px)"
:text-inside="true"
:stroke-width="18"
:color="Number(scope.row.recall_exec_rate)===100 ? '#67C23A' : '#f00'"
:percentage="Number(scope.row.recall_exec_rate)?Number(scope.row.recall_exec_rate):0">
</el-progress>
</template>
</el-table-column>
<el-table-column
prop="name"
label="意向标记">
<template slot-scope="scope">
意向用户数：{{scope.row.intention_num}}<br>
完课沟通用户数{{scope.row.over_desc_exec_num}}<br>
往期活跃用户沟通数：{{scope.row.past_desc_exec_num}}<br>
标记率：
<el-progress
style="display: inline-block;width: calc(90% - 50px)"
:text-inside="true"
:stroke-width="18"
color="#67C23A"
:percentage="Number(scope.row.over_intention_rate)?Number(scope.row.over_intention_rate):0">
</el-progress>
<br>
处理率：
<el-progress
style="display: inline-block;width: calc(90% - 50px)"
:text-inside="true"
:stroke-width="18"
:color="Number(scope.row.over_exec_rate)===100 ? '#67C23A' : '#f00'"
:percentage="Number(scope.row.over_exec_rate)?Number(scope.row.over_exec_rate):0">
</el-progress>
</template>
</el-table-column>
<el-table-column
prop="intention_num"
width="100"
label="意向用户数">
</el-table-column>
<el-table-column
prop="performance"
width="100"
label="当月业绩">
</el-table-column>
<el-table-column width="320" label="操作">
<template slot-scope="scope">
<el-button size="mini" plain type="primary" @click="goToTeacherDetail(scope.row)">查看详情</el-button>
<el-button size="mini" plain type="warning" @click="edit(scope.row)" v-if="!$store.state.readonly">编辑</el-button>
<el-button size="mini" plain type="success" @click="transferToggle(scope.row)" v-if="!$store.state.readonly">移交</el-button>
<el-button size="mini" plain type="danger" @click="delTeacher(scope.row)" v-if="$store.state.deletePermission && !$store.state.readonly">删除</el-button>
</template>
</el-table-column>
</el-table>
<div v-if="res" class="total-tab">
<div>总计</div>
<div>
<div>
成功率：
<el-progress
style="display: inline-block;width: calc(90% - 50px)"
:text-inside="true"
:stroke-width="16"
:color="Number(res.add_teacher_success_rate)>70 ? '#67C23A' : '#f00'"
:percentage="Number(res.add_teacher_success_rate)?Number(res.add_teacher_success_rate):0">
</el-progress>
<br>
处理率：
<el-progress
style="display: inline-block;width: calc(90% - 50px)"
:text-inside="true"
:stroke-width="16"
:color="Number(res.add_teacher_exec_rate)===100 ? '#67C23A' : '#f00'"
:percentage="Number(res.add_teacher_exec_rate)?Number(res.add_teacher_exec_rate):0">
</el-progress>
</div>
</div>
<div>
<div>
达标率：
<el-progress
style="display: inline-block;width: calc(90% - 50px)"
:text-inside="true"
:stroke-width="16"
:color="Number(res.recall_watch_rate)===100 ? '#67C23A' : '#ff0000'"
:percentage="Number(res.recall_watch_rate)?Number(res.recall_watch_rate):0">
</el-progress>
<br>
处理率：
<el-progress
style="display: inline-block;;width: calc(90% - 50px)"
:text-inside="true"
:stroke-width="16"
:color="Number(res.recall_exec_rate)===100 ? '#67C23A' : '#f00'"
:percentage="Number(res.recall_exec_rate)?Number(res.recall_exec_rate):0">
</el-progress>
</div>
</div>
<div>
<div>
标记率：
<el-progress
style="display: inline-block;width: calc(90% - 50px)"
:text-inside="true"
:stroke-width="16"
color="#67C23A"
:percentage="Number(res.over_intention_rate)?Number(res.over_intention_rate):0">
</el-progress>
<br>
处理率：
<el-progress
style="display: inline-block;width: calc(90% - 50px)"
:text-inside="true"
:stroke-width="16"
:color="Number(res.over_exec_rate)===100 ? '#67C23A' : '#f00'"
:percentage="Number(res.over_exec_rate)?Number(res.over_exec_rate):0">
</el-progress>
</div>
</div>
<div>
{{res.intention_num}}
</div>
<div>
{{res.total_money}}
</div>
<div></div>
</div>
<page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
<dialog-com :index="index" :dialogObj="dialogObj" @changeShow="changeShow" @reflash="getUser"/>
<el-dialog width="90%" top="5vh" :visible.sync="dialogDetail.show">
<div v-if="dialogDetail.show">
<teacher-detail :parentDetail="dialogDetail"></teacher-detail>
</div>
</el-dialog>
<el-dialog width="500px" :visible.sync="transfer.show" title="移交">
<el-form ref="transferForm" :rules="transfer.form.rules" :model="transfer.form" label-width="100px">
<el-form-item label="当前设备：" prop="teacher_name">
{{transfer.form.teacher_name}}
</el-form-item>
<el-form-item label="当前顾问：" prop="staff_current_name">
{{transfer.form.staff_current_name}}
</el-form-item>
<el-form-item label="移交顾问：" prop="staff_id">
<el-select v-model="transfer.form.staff_id" filterable placeholder="请选择" :clearable="false" @change="transferStaffName">
<el-option
v-for="(data,index) in transfer.staff"
:key="index"
:label="data.name"
:value="data.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="移交时间：" prop="transfer_at">
<div style="display: flex;">
<el-date-picker
v-model="transfer.form.transfer_at" :clearable="false" value-format="yyyy-MM-dd HH:mm:ss"
type="datetime" placeholder="选择时间"></el-date-picker>
</div>
</el-form-item>
<el-form-item label="移交原因：" prop="reason">
<el-select v-model="transfer.form.reason" filterable placeholder="请选择" :clearable="false" @change="transferReasonName">
<el-option
v-for="(data,index) in transfer.reasonList"
:key="index"
:label="data.name"
:value="data.id">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer">
<el-button @click="transferToggle">取消</el-button>
<el-button type="primary" @click="transferSave">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
getTeacherListApi,
delTeacherApi,
getStaffListApi,
postTransferTeacherApi,
getTeacherTypeListApi
} from "../../service/api";
import {TEACHERTYPE} from "../../util/wordbook";
import page from '../framework/page'
import teacherDetail from '../teacherDetail/index'
import dialogCom from './dialog'
// import Dialog from "../class/dialog";
let teacherTypeSource = {}
export default {
name: "index",
data() {
let nowDate = this.formatTime(new Date());
return {
index: 1, // 部名，从1开始
searchFrom: {
name: '',
alias: "",
status: '0',
task_date: nowDate,
squad: ((1 - 1) * 10 + 1).toString(),
type: 0,
},
dialogObj: {
typeAdd: 0, // 与searchFrom.type一致
type: 0,
show: false,
id: ''
},
transfer: {
show: false,
form: {
reason: '',
reason_name: '',
teacher_name: '',
teacher_id: '',
staff_current_name: '', // 当前顾问名
staff_name: '', // 移交顾问name
staff_id: '', // 移交顾问id
transfer_at: '',
rules: {
staff_id: [{required: true, message: '请选择', trigger: 'change'}],
transfer_at: [{required: true, message: '请选择', trigger: 'change'}],
reason: [{required: true, message: '请选择', trigger: 'change'}],
},
},
staff: [0],
reasonList: [{
id: 0,
name: '人员入职',
}, {
id: 1,
name: '人员离职',
}, {
id: 2,
name: '请假',
}, {
id: 3,
name: '其它',
},]
},
dialogDetail: {
show: false,
id: ''
},
userList: [],
total: 0,
nowPage: 1,
limit: 20,
res: null,
dialogDetailObj: {
show: false,
title: '班级列表',
id: ''
},
teacherTypeOption: [{
id: 0,
label: '老师'
}, {
id: 1,
label: '新星妈妈'
}],
phoneNumObj: {}
}
},
watch: {
'dialogDetail.show'(value) {
if (!value) {
this.getUser()
}
}
},
components: {
// Dialog,
page,
dialogCom,
teacherDetail
},
filters: {
teacherType(value) {
return teacherTypeSource[value]
}
},
mounted() {
let data = localStorage.getItem("phoneNum");
console.log(data)
// debugger
if (data) {
data = JSON.parse(data)
this.phoneNumObj = data;
}
if (data && data.teacher_type != 'teacher_leader') {
this.$router.push('/teacher/' + data.id);
} else {
this.getUser()
}
getTeacherTypeListApi().then(res => {
this.dialogObj.teacherTypeList = res
let obj = {}
res.forEach((item, index) => {
obj[item.type] = item.name
})
teacherTypeSource = obj
// console.log(obj)
});
},
methods: {
onPageChange(val) {
this.nowPage = val;
this.getUser()
},
formatTime(date) {
let year = date.getFullYear();
let Month = date.getMonth() + 1;
if (Month < 10) {
Month = `0${Month}`
}
let Day = date.getDate();
if (Day < 10) Day = `0${Day}`;
return `${year}-${Month}-${Day}`;
},
onSizeChange(val) {
this.limit = val
this.nowPage = 1;
this.getUser()
},
getUser() {
let json = {
limit: this.limit,
page: this.nowPage
}
if (this.searchFrom.type || this.searchFrom.type === 0) {
json.type = this.searchFrom.type
}
if (this.searchFrom.status) {
json.status = this.searchFrom.status
}
if (this.searchFrom.name) {
json.name = this.searchFrom.name
}
if (this.searchFrom.alias) {
json.alias = this.searchFrom.alias
}
if (this.searchFrom.task_date) {
json.task_date = this.searchFrom.task_date
}
let data = localStorage.getItem("phoneNum");
if (data) {
data = JSON.parse(data)
}
if (data && data.teacher_type == 'teacher_leader') {
json.squad = data.squad
} else {
json.squad = this.searchFrom.squad
}
getTeacherListApi(json).then(res => {
this.userList = res.list;
this.total = res.total;
this.res = res;
})
},
transferStaffName(data) {
this.transfer.form.staff_name = this.transfer.staff.find(x => x.id == data).name;
},
transferReasonName(data) {
this.transfer.form.reason_name = this.transfer.reasonList.find(x => x.id == data).name;
},
transferToggle(data) {
this.transfer.show = !this.transfer.show;
if (this.transfer.show) {
if (this.transfer.staff[0] === 0) {
let json = {limit: 1000, page: 1, status: 0}; // status 0 在职
getStaffListApi(json).then(res => {
this.transfer.staff = res.list;
});
}
this.$nextTick(() => {
this.$refs['transferForm'].resetFields();
this.transfer.form.teacher_name = data.name;
this.transfer.form.teacher_id = data.id;
this.transfer.form.staff_current_name = data.adviser;
})
} else {
this.$nextTick(() => {
this.$refs['transferForm'].resetFields();
})
}
},
transferSave() {
this.$refs['transferForm'].validate((valid) => {
if (valid) {
this.$confirm(`确定将
<span style="color: red;">${this.transfer.form.teacher_name}</span> 移交给
<span style="color: red;">${this.transfer.form.staff_name}</span> ?<br>
移交开始时间 ${this.transfer.form.transfer_at} <br>
移交原因 ${this.transfer.form.reason_name}`, '提示', {
dangerouslyUseHTMLString: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
var json = {
teacher_id: this.transfer.form.teacher_id,
staff_id: this.transfer.form.staff_id,
transfer_at: this.transfer.form.transfer_at,
reason: this.transfer.form.reason,
};
postTransferTeacherApi(json).then(res => {
this.$message({type: 'success', message: '移交成功!'});
this.transferToggle();
this.getUser();
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消移交'
});
});
} else {
console.log('error submit!!');
return false;
}
});
},
edit(data) {
this.dialogObj.id = data.id;
this.dialogObj.type = 2;
this.dialogObj.show = true
},
add() {
this.dialogObj.type = 0;
this.dialogObj.show = true
},
detail(data) {
this.dialogObj.id = data.id;
this.dialogObj.type = 1;
this.dialogObj.show = true
},
delTeacher(data) {
this.$confirm('此操作将删除该账号?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delTeacherApi(data.id).then(res => {
this.$message({
type: 'success',
message: '删除成功!'
});
this.getUser()
});
});
},
changeShow(data) {
this.dialogObj.show = data
},
classDetail(row) {
this.dialogDetailObj = {
show: true,
title: row.name + '班级详情',
id: row.id
}
},
goToTeacherDetail(row) {
// this.$router.push('/teacher/'+ row.id);
this.dialogDetail.id = row.id;
this.dialogDetail.alias = row.alias;
this.dialogDetail.name = row.name;
this.dialogDetail.adviser = row.adviser;
this.dialogDetail.show = true
}
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.user {
/*height: 100%;*/
overflow: auto;
padding: 20px 0;
.btn-content {
text-align: center;
}
}
/deep/ .el-progress-bar__outer {
background: #cccccc;
}
.total-tab {
display: table;
background: #dfedff;
width: 100%;
vertical-align: middle;
font-size: 12px;
& > div {
display: table-cell;
vertical-align: middle;
padding: 10px;
}
& > div:nth-child(1) {
width: 230px;
min-width: 230px;
text-align: center;
}
& > div:nth-child(5) {
min-width: 80px;
width: 80px;
}
& > div:nth-child(7) {
min-width: 320px + 12px;
width: 320px + 12px;
}
& > div:nth-child(2),
& > div:nth-child(3),
& > div:nth-child(4) {
min-width: 60px;
}
}
.avatar {
width: 70px;
margin-right: 5px;
height: 70px;
float: left;
}
.shortcut {
width: 50px;
}
</style>