task2.vue

<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-size: 18px;font-weight: bold">任务4：意向用户转化</span>
      </div>
      <el-table border :data="task2List" align="center" :header-cell-style="{background:'#e4eff7'}">
        <el-table-column prop="weight" label="意向等级" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.weight !== 100">
              {{scope.row.weight}}
            </span>
            <span v-if="scope.row.weight === 100">
              无法成为意向
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="total_num" label="总人数" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini"  @click="showTask2Detail(scope.row)">{{scope.row.total_num}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog append-to-body :visible.sync="task2Detail.show" :title="task2Detail.title" width="80%">
      <el-button @click="allDesc3()" size="mini" type="success">批量添加备注</el-button>
      <el-table
        :data="task2Detail.list"
        size="mini"
        @selection-change="handleSelectionChange123"
        style="width: 100%" fixed>
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column label="用户" className="f-c" min-width="180"   prop="user_id">
          <template slot-scope="scope">
            <img :src="scope.row.avatar" style="width: 40px;min-width:40px;height: 40px;border-radius: 50px"> {{scope.row.nickname}}(ID:{{scope.row.user_id}})
            <br> Tel:{{scope.row.mobile}}
          </template>
        </el-table-column>
        <el-table-column label="期数" align="center">
          <template slot-scope="scope">
            【{{scope.row.periods_id}}】{{scope.row.periods_title}}
          </template>
        </el-table-column>
        <el-table-column
          min-width="160"
          label="沟通情况">
          <template slot-scope="scope">
            <teacher-desc :row="scope.row" :descType="1" @onSuccess="refDesc2"></teacher-desc>
          </template>
        </el-table-column>
        <el-table-column
          label="意向等级" min-width="95" prop="weight">
          <template slot-scope="scope">
            <user-weight :row="scope.row" @onSuccess="refDesc2"></user-weight>
          </template>
        </el-table-column> <el-table-column
        prop="last_watch_at"
        label="最后标注时间">
        <template slot-scope="scope">
          {{scope.row.last_weight_at?scope.row.last_weight_at:'-'}}
        </template>
      </el-table-column>
        <el-table-column
          prop="last_weight_desc"
          label="标注意向原因">
          <template slot-scope="scope">
            {{scope.row.last_weight_desc?scope.row.last_weight_desc:'-'}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px"  fixed="right">
          <template slot-scope="scope">
            <el-button type="info" size="mini" @click="showLook(scope.row)">看课情况</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog append-to-body :visible.sync="lookDetail.show">
      <el-table
        v-loading="lookDetail.loading"
        :data="lookDetail.list"
        style="width: 100%">
        <el-table-column
          prop="start_at"
          label="日期">
        </el-table-column>
        <el-table-column
          label="爸妈看一看">
          <template slot-scope="scope">
            <span v-if="scope.row.watch_list && scope.row.watch_list.length > 0 && scope.row.watch_list.find(i=>{return i.page_id === 1})">
              {{scope.row.watch_list.find(i=>{return i.page_id === 1}).stay_time}}
            </span>
            <span v-if="!scope.row.watch_list.find(i=>{return i.page_id === 1})">
              暂未上课
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="宝贝玩一玩">
          <template slot-scope="scope">
            <span v-if="scope.row.watch_list && scope.row.watch_list.length > 0 && scope.row.watch_list.find(i=>{return i.page_id === 2})">
              {{scope.row.watch_list.find(i=>{return i.page_id === 2}).stay_time}}
            </span>
            <span v-if="!scope.row.watch_list.find(i=>{return i.page_id === 2})">
              暂未上课
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="爸妈秀宝贝">
          <template slot-scope="scope">
            <span v-if="scope.row.watch_list && scope.row.watch_list.length > 0 && scope.row.watch_list.find(i=>{return i.page_id === 3})">
              <div v-html="scope.row.watch_list.find(i=>{return i.page_id === 3}).learn_report"></div>
            </span>
            <span v-if="!scope.row.watch_list.find(i=>{return i.page_id === 3})">
              暂未秀宝贝
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="多元趣味课">
          <template slot-scope="scope">
            <span v-if="scope.row.watch_list && scope.row.watch_list.length > 0 && scope.row.watch_list.find(i=>{return i.page_id === 5})">
              {{scope.row.watch_list.find(i=>{return i.page_id === 5}).stay_time}}
            </span>
            <span v-if="!scope.row.watch_list.find(i=>{return i.page_id === 5})">
              暂未上课
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="分享">
          <template slot-scope="scope">
            <span v-if="scope.row.watch_list && scope.row.watch_list.length > 0 && scope.row.watch_list.find(i=>{return i.page_id === 4})">
              已分享
            </span>
            <span v-if="!scope.row.watch_list.find(i=>{return i.page_id === 4})">
              暂未分享
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <sourceByDateDialog :dialogObj = sourceByDateDialogJson ref="sourceByDateDialogDom"></sourceByDateDialog>
  </div>
</template>

<script>
  import {task2Api,editUserWeightApi,userLookApi,allDescApi} from "../../service/api";
  import teacherDesc from '../framework/teacherDesc'
  import userWeight from '../framework/userWeight'
  import sourceByDateDialog from './sourceByDateDialog'
  export default {
    name: "task2",
    props:['teacherId'],
    components: {teacherDesc,userWeight,sourceByDateDialog},
    data(){
      return {
        sourceByDateDialogJson:{},
        task2List:[],
        lookDetail:{
          show:false,
          loading:false,
          list:[],
          nowPage: 1,
          data:null,
          limit: 500,
          total:0
        },
        selectedTask3:[],
        task2Detail:{
          show:false,
          list:[],
          type:1,
          weight:''
        }
      }
    },
    mounted(){
      this.initPage()
    },
    methods:{
      handleSelectionChange123(x){
        this.selectedTask3 = x
      },
      allDesc3(){
        if(this.selectedTask3.length < 1){
          this.$message({
            type:'error',
            message:'请先选择用户'
          })
        }else{
          this.$prompt('请输入沟通内容', '备注', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputType:'textarea',
          }).then(({ value }) => {
            let ids = [];
            this.selectedTask3.forEach(i=>{
              ids.push(i.id)
            });
            let json = {
              ids:ids.join(),
              desc:value,
              type:1
            };
            allDescApi(json).then(res=>{
              this.$message({
                type:'success',
                message:'批量添加备注成功'
              });
              this.refDesc2()
            })
          })
        }
      },
      onLookDetailPageChange(val){
        this.lookDetail.nowPage = val
        this.showLook();
      },
      onLookDetailSizeChange(val){
        this.lookDetail.limit = val
        this.lookDetail.nowPage = 1;
        this.showLook();
      },
      showLook(row){
        console.log(row)
        // if(data){
        //   this.lookDetail.data = data
        // }
        // this.lookDetail.show = true;
        // this.lookDetail.loading = true;
        // let json = {
        //   limit: this.lookDetail.limit,
        //   page: this.lookDetail.nowPage
        // };
        // userLookApi(this.lookDetail.data.periods_id,this.lookDetail.data.user_id, json).then(res=>{
        //   this.lookDetail.list = res.list;
        //   this.lookDetail.loading = false;
        //   this.lookDetail.total = res.total;
        // })

          this.sourceByDateDialogJson = {
          "periods_id":row.periods_id,
          "user_id":row.user_id,
          json:{
            limit: 10,
            page:0
          }
        }
        this.$refs.sourceByDateDialogDom.dialogShow = true
      },
      initPage(){
        task2Api(this.teacherId).then(res=>{
          this.task2List = res
        });
      },
      changeWeight(data){
        editUserWeightApi(data.id,data.weight).then(()=>{
          this.$message({
            type:'success',
            message:'数据更改成功'
          });
            this.refDesc2()
        })
      },
      showTask2Detail(data){
        this.task2Detail={
          show:true,
          list:data.detail,
          title:'意向等级为' + data.weight + '的用户列表',
          weight:data.weight
        };
        this.task2Detail.type = 1;
      },
      refDesc2(){
        task2Api(this.teacherId).then(res=>{
          this.task2List = res;
          let flag = true;
          res.forEach(i=>{
            if(i.weight === this.task2Detail.weight){
              this.task2Detail.list = i.detail;
              flag = false
            }
          });
          if(flag){
            this.task2Detail.list = []
          }
        });
      },
    }
  }
</script>

<style scoped>

</style>