userservice.vue

<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>
          &lt;!&ndash; <el-option
            v-for="item in dialogObj.teacherTypeList"
            :key="item.id"
            :label="item.label"
            :value="item.id">
          </el-option> &ndash;&gt;
          <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.orderRefund">-->
      <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: "userservice",
    data() {
      let nowDate = this.formatTime(new Date());
      return {
        index: 3, // 部名，从1开始
        searchFrom: {
          name: '',
          alias: "",
          status: '0',
          task_date: nowDate,
          squad: ((3 - 1) * 10 + 1).toString(),
          type: 6,
        },
        dialogObj: {
          typeAdd: 6, // 用户服务 与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() {
      // console.log(s)
      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>