云集订单展示老师班级人数情况

src/components/yunji/index.vue

 <template>
   <div class="sms">
     <el-form ref="searchFrom" inline :model="searchFrom" label-width="100px">
-          <el-form-item label="交易订单号">
-            <el-input v-model="searchFrom.order_id"  @change="getList"></el-input>
-          </el-form-item>
-          <el-form-item label="手机号">
-            <el-input v-model="searchFrom.mobile"  @change="getList"></el-input>
-          </el-form-item>
-          <el-form-item label="绑定状态">
-            <el-select v-model="searchFrom.user_buy" placeholder="请选择" @change="getList" clearable>
-              <el-option
-                v-for="item in useTypeList"
-                :key="item.user_buy"
-                :label="item.value"
-                :value="item.user_buy">
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="商品名称">
-            <el-select v-model="searchFrom.goods_id" placeholder="请选择" @change="getList" clearable>
-              <el-option
-                v-for="(data,index) in goodList"
-                :key="index"
-                :label="data | filterGoods"
-                :value="data.id">
-              </el-option>
-            </el-select>
-          </el-form-item>
+      <el-form-item label="交易订单号">
+        <el-input v-model="searchFrom.order_id" @change="getList"></el-input>
+      </el-form-item>
+      <el-form-item label="手机号">
+        <el-input v-model="searchFrom.mobile" @change="getList"></el-input>
+      </el-form-item>
+      <el-form-item label="绑定状态">
+        <el-select v-model="searchFrom.user_buy" placeholder="请选择" @change="getList" clearable>
+          <el-option v-for="item in useTypeList" :key="item.user_buy" :label="item.value" :value="item.user_buy">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="商品名称">
+        <el-select v-model="searchFrom.goods_id" placeholder="请选择" @change="getList" clearable>
+          <el-option v-for="(data,index) in goodList" :key="index" :label="data | filterGoods" :value="data.id">
+          </el-option>
+        </el-select>
+      </el-form-item>
       <el-form-item label="老师">
         <el-select v-model="searchFrom.teacher_id" placeholder="请选择" @change="getList" clearable filterable>
-          <el-option
-            v-for="(data,index) in teacherList"
-            :key="index"
-            :label="data.name"
-            :value="data.id">
+          <el-option v-for="(data,index) in teacherList" :key="index" :label="data.name" :value="data.id">
           </el-option>
         </el-select>
       </el-form-item>
-          <!-- <el-form-item label="创建时间">
+      <!-- <el-form-item label="创建时间">
             <el-date-picker
               v-model="searchFrom.payTime"
                unlink-panels
@@ -49,7 +37,7 @@
               @change="getList">
             </el-date-picker>
           </el-form-item> -->
-          <!-- <el-form-item label="同步时间">
+      <!-- <el-form-item label="同步时间">
             <el-date-picker
               v-model="searchFrom.syncTime"
                unlink-panels
@@ -61,289 +49,311 @@
               @change="getList">
             </el-date-picker>
           </el-form-item> -->
-          <el-form-item>
-            <el-button type="primary" @click="getList">搜索</el-button>
-            <el-button type="primary" plain @click="exportTable(list)">导出</el-button>
-          </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getList">搜索</el-button>
+        <el-button type="primary" plain @click="exportTable(list)">导出</el-button>
+        <el-button type="success" plain @click="classListOption()">班级分布</el-button>
+      </el-form-item>
     </el-form>
-    <el-table
-      :data="list"
-      style="width: 100%">
-       <el-table-column
-        prop="order_id"
-        label="订单号">
+    <el-table :data="list" style="width: 100%">
+      <el-table-column prop="order_id" label="订单号">
       </el-table-column>
-      <el-table-column
-        prop="nickname"
-        label="购买人">
-          <template slot-scope="scope">
-            <div v-if='scope.row.user_id !== 0' style="display: flex">
-              <img class="avatar" :src="scope.row.avatar"/> <div>{{scope.row.nickname}}<br>(ID:{{scope.row.user_id}})</div>
-            </div>
+      <el-table-column prop="nickname" label="购买人">
+        <template slot-scope="scope">
+          <div v-if='scope.row.user_id !== 0' style="display: flex">
+            <img class="avatar" :src="scope.row.avatar" />
+            <div>{{scope.row.nickname}}<br>(ID:{{scope.row.user_id}})</div>
+          </div>
           <div v-if='scope.row.user_id === 0'>
             暂未绑定用户
-            </div>
+          </div>
         </template>
       </el-table-column>
-        <el-table-column
-        prop="goods_name"
-        label="商品名称" >
+      <el-table-column prop="goods_name" label="商品名称">
       </el-table-column>
-       <el-table-column
-        prop="receiver_name"
-        label="姓名" >
+      <el-table-column prop="receiver_name" label="姓名">
       </el-table-column>
-       <el-table-column
-        prop="receiver_phone"
-        label="手机号" >
+      <el-table-column prop="receiver_phone" label="手机号">
       </el-table-column>
-       <el-table-column
-        label="收货地址" >
+      <el-table-column label="收货地址">
         <template slot-scope="scope">
           {{scope.row.receiver_province}} {{scope.row.receiver_city}} {{scope.row.receiver_area}} {{scope.row.receiver_address}}
         </template>
       </el-table-column>
-      <el-table-column
-        prop="teacher_name"
-        label="班级老师" >
+      <el-table-column prop="teacher_name" label="班级老师">
       </el-table-column>
-      <el-table-column
-        prop="create_time"
-        label="创建时间" sortable>
+      <el-table-column prop="create_time" label="创建时间" sortable>
       </el-table-column>
-      <el-table-column
-        prop="pay_time"
-        label="支付时间"  sortable>
+      <el-table-column prop="pay_time" label="支付时间" sortable>
       </el-table-column>
-       <el-table-column
-        prop="desc"
-        label="备注" >
+      <el-table-column prop="desc" label="备注">
+      </el-table-column>
+      <el-table-column label="操作" v-if="!$store.state.readonly" width="220">
+        <template slot-scope="scope">
+          <!-- <el-button @click="bindTeacher(scope.row)" size="mini" plain type="success">绑定老师</el-button> -->
+          <el-button @click="editNote(scope.row.id, scope.row.desc)" size="mini" plain type="primary">编辑备注</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <page :nowPage="nowPage" :total="total" @pageChange="onPageChange" @sizeChange="onSizeChange" />
+
+    <el-dialog :title="classObj.title" :visible.sync="classObj.show" center width="800px">
+    <el-table :data="classList" >
+      <el-table-column prop="teacher_name" label="班级老师">
       </el-table-column>
-       <el-table-column
-        label="操作"  v-if="!$store.state.readonly" width="220">
-         <template slot-scope="scope">
-            <!-- <el-button @click="bindTeacher(scope.row)" size="mini" plain type="success">绑定老师</el-button> -->
-            <el-button @click="editNote(scope.row.id, scope.row.desc)" size="mini" plain type="primary">编辑备注</el-button>
-          </template>
+       <el-table-column prop="num" label="班级人数">
       </el-table-column>
     </el-table>
-    <page :nowPage="nowPage" :total="total" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
+      <div style="margin-top:20px;">
+        同步时间：{{last_pull_time}}
+      </div>
+      <span slot="footer" class="dialog-footer">
+      </span>
+    </el-dialog>
     <teacher-dialog :dialogObj="dialogObj"></teacher-dialog>
   </div>
 </template>
 
 <script>
-  import page from '../framework/page'
-  import teacherDialog from './dialog'
-  import {getyunjiApi,getGoodsListApi,exportExcelApi,getTeacherListApi,orderDescApi} from "../../service/api";
-  import {GOODSTYPE} from "../../util/wordbook";
-  export default {
-    name: "smsRecord",
-    components:{
-      page,
-      teacherDialog
-    },
-    data(){
-      return {
-        nowPage: 1,
-        total: 0,
-        limit: 10,
-        useTypeList:[
-          {
-            user_buy:0,
-            value:'未绑定'
-          },
-          {
-            user_buy:1,
-            value:'已绑定'
-          },
-        ],
-        searchFrom: {
-          goods_id: '',
-          mobile:'',
-          order_id:'',
-          teacher_id:'',
-          payTime:[],
-          syncTime:[],
+import page from "../framework/page";
+import teacherDialog from "./dialog";
+import {
+  getyunjiApi,
+  getGoodsListApi,
+  exportExcelApi,
+  getTeacherListApi,
+  orderDescApi
+} from "../../service/api";
+import { GOODSTYPE } from "../../util/wordbook";
+export default {
+  name: "smsRecord",
+  components: {
+    page,
+    teacherDialog
+  },
+  data() {
+    return {
+      nowPage: 1,
+      total: 0,
+      limit: 10,
+      useTypeList: [
+        {
+          user_buy: 0,
+          value: "未绑定"
         },
-        list: [],
-        teacherList:[],
-        goodList:[],
-         dialogObj:{
-          show:false,
-          title:'绑定老师',
-          order_id:0,
-          teacher_id: 0
-        },
-      }
-    },
-    filters:{
-      filterStatus:function (value) {
-        let msg = '';
-        if(value === 0){
-          msg = '未绑定'
-        }else{
-          msg= "已绑定"
+        {
+          user_buy: 1,
+          value: "已绑定"
         }
-        return msg;
+      ],
+      searchFrom: {
+        goods_id: "",
+        mobile: "",
+        order_id: "",
+        teacher_id: "",
+        payTime: [],
+        syncTime: []
+      },
+      list: [],
+      teacherList: [],
+      goodList: [],
+      dialogObj: {
+        show: false,
+        title: "绑定老师",
+        order_id: 0,
+        teacher_id: 0
       },
-       filterGoods(val){
-          return '[' + GOODSTYPE[val.goods_type] + ']' + '[' +val.current_price / 100 + '元]' + val.name
+      classObj:{
+        show: false,
+        title: "班级分布",
+        order_id: 0,
+        teacher_id: 0
+      },
+      classList:[],
+      last_pull_time:"无",
+    };
+  },
+  filters: {
+    filterStatus: function(value) {
+      let msg = "";
+      if (value === 0) {
+        msg = "未绑定";
+      } else {
+        msg = "已绑定";
       }
+      return msg;
     },
-    mounted(){
+    filterGoods(val) {
+      return (
+        "[" +
+        GOODSTYPE[val.goods_type] +
+        "]" +
+        "[" +
+        val.current_price / 100 +
+        "元]" +
+        val.name
+      );
+    }
+  },
+  mounted() {
+    this.getList();
+    this.getGoodsOption();
+    this.getTeacherList();
+  },
+  methods: {
+    onPageChange(val) {
+      this.nowPage = val;
       this.getList();
-        this.getGoodsOption();
-        this.getTeacherList();
     },
-    methods: {
-      onPageChange(val){
-        this.nowPage = val;
-        this.getList()
-      },
-      getTeacherList(){
-        let json ={
-          page:1,
-          limit:200
-        }
-        getTeacherListApi(json).then(res=>{
-          this.teacherList = res.list;
-        });
-      },
-      onSizeChange(val){
-        this.nowPage = 1;
-        this.limit = val;
-        this.getList()
-      },
-      getList(){
-        let json = {
-          limit: this.limit,
-          page: this.nowPage,
-        };
-         if(this.searchFrom.mobile){
-          json.mobile = this.searchFrom.mobile
-         }
-        if(this.searchFrom.teacher_id){
-          json.teacher_id = this.searchFrom.teacher_id
-        }
-          if(this.searchFrom.goods_name){
-          json.goods_name = this.searchFrom.goods_name
-         }
-         if(this.searchFrom.user_buy || this.searchFrom.user_buy == 0){
-           json.user_buy = this.searchFrom.user_buy
-         }
-         if(this.searchFrom.order_id){
-           json.order_id = this.searchFrom.order_id
-         }
-         if(this.searchFrom.goods_id){
-           json.goods_id = this.searchFrom.goods_id
-         }
-         if(this.searchFrom.payTime && this.searchFrom.payTime.length > 0){
-          json.start_at =this.searchFrom.payTime[0]
-          json.end_at = this.searchFrom.payTime[1]
-        }
-        if(this.searchFrom.syncTime && this.searchFrom.syncTime.length > 0){
-          json.pull_start_at = this.searchFrom.syncTime[0]
-          json.pull_end_at =this.searchFrom.syncTime[1]
-        }
-         getyunjiApi(json).then((res)=>{
-           console.log(res.list)
-           this.total = res.total;
-           this.list = res.list ? res.list : []
-         })
-      },
-       getGoodsOption(){
-        let json = {
-          page: 1,
-          limit: 100
-        };
-        getGoodsListApi(json).then(res=>{
-          this.goodList = res.list;
-        })
-      },
-       bindTeacher(data){
-        this.dialogObj = {
-          show:true,
-          title:'绑定老师',
-          id:data.id,
-          teacher_id: data.teacher_id
+    getTeacherList() {
+      let json = {
+        page: 1,
+        limit: 200
+      };
+      getTeacherListApi(json).then(res => {
+        this.teacherList = res.list;
+      });
+    },
+    onSizeChange(val) {
+      this.nowPage = 1;
+      this.limit = val;
+      this.getList();
+    },
+    getList() {
+      let json = {
+        limit: this.limit,
+        page: this.nowPage
+      };
+      if (this.searchFrom.mobile) {
+        json.mobile = this.searchFrom.mobile;
+      }
+      if (this.searchFrom.teacher_id) {
+        json.teacher_id = this.searchFrom.teacher_id;
+      }
+      if (this.searchFrom.goods_name) {
+        json.goods_name = this.searchFrom.goods_name;
+      }
+      if (this.searchFrom.user_buy || this.searchFrom.user_buy == 0) {
+        json.user_buy = this.searchFrom.user_buy;
+      }
+      if (this.searchFrom.order_id) {
+        json.order_id = this.searchFrom.order_id;
+      }
+      if (this.searchFrom.goods_id) {
+        json.goods_id = this.searchFrom.goods_id;
+      }
+      if (this.searchFrom.payTime && this.searchFrom.payTime.length > 0) {
+        json.start_at = this.searchFrom.payTime[0];
+        json.end_at = this.searchFrom.payTime[1];
+      }
+      if (this.searchFrom.syncTime && this.searchFrom.syncTime.length > 0) {
+        json.pull_start_at = this.searchFrom.syncTime[0];
+        json.pull_end_at = this.searchFrom.syncTime[1];
+      }
+      getyunjiApi(json).then(res => {
+        console.log(res.list);
+        this.total = res.total;
+        this.list = res.list ? res.list : [];
+        console.log(res)
+        this.classList=res.teacher;
+        if(res.last_pull_time){
+        this.last_pull_time=res.last_pull_time;
         }
-      },
-      editNote(id,desc){
-         this.$prompt('', '编辑备注', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          inputType:'textarea',
-          inputValue: desc || ''
-        }).then(({ value }) => {
-            this.$confirm('确定保存?', '提示', {
-              confirmButtonText: '确定',
-              cancelButtonText: '取消',
-              type: 'warning'
-            }).then(()=>{
-              orderDescApi({desc: value},id).then(res=>{
-                this.$message({
-                  type: 'success',
-                  message: '编辑备注成功'
-                });
-                this.getList();
-              });
+      });
+    },
+    getGoodsOption() {
+      let json = {
+        page: 1,
+        limit: 100
+      };
+      getGoodsListApi(json).then(res => {
+        this.goodList = res.list;
+      });
+    },
+    bindTeacher(data) {
+      this.dialogObj = {
+        show: true,
+        title: "绑定老师",
+        id: data.id,
+        teacher_id: data.teacher_id
+      };
+    },
+    editNote(id, desc) {
+      this.$prompt("", "编辑备注", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        inputType: "textarea",
+        inputValue: desc || ""
+      }).then(({ value }) => {
+        this.$confirm("确定保存?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(() => {
+          orderDescApi({ desc: value }, id).then(res => {
+            this.$message({
+              type: "success",
+              message: "编辑备注成功"
             });
-        })
-      },
-        exportTable(data){
-        if(data.length>0){
-            let json = {};
+            this.getList();
+          });
+        });
+      });
+    },
+    exportTable(data) {
+      if (data.length > 0) {
+        let json = {};
         if (this.searchFrom.order_id) {
-          json.order_id = this.searchFrom.order_id
+          json.order_id = this.searchFrom.order_id;
         }
-         if (this.searchFrom.user_buy || this.searchFrom.user_buy == 0) {
-          json.user_buy = this.searchFrom.user_buy
+        if (this.searchFrom.user_buy || this.searchFrom.user_buy == 0) {
+          json.user_buy = this.searchFrom.user_buy;
         }
         if (this.searchFrom.mobile) {
-          json.mobile = this.searchFrom.mobile
+          json.mobile = this.searchFrom.mobile;
         }
-         if (this.searchFrom.goods_id) {
-          json.goods_id = this.searchFrom.goods_id
+        if (this.searchFrom.goods_id) {
+          json.goods_id = this.searchFrom.goods_id;
         }
-         if(this.searchFrom.teacher_id){
-          json.teacher_id = this.searchFrom.teacher_id
+        if (this.searchFrom.teacher_id) {
+          json.teacher_id = this.searchFrom.teacher_id;
         }
 
-       if(this.searchFrom.payTime && this.searchFrom.payTime.length > 0){
-          json.start_at =this.searchFrom.payTime[0]
-          json.end_at = this.searchFrom.payTime[1]
+        if (this.searchFrom.payTime && this.searchFrom.payTime.length > 0) {
+          json.start_at = this.searchFrom.payTime[0];
+          json.end_at = this.searchFrom.payTime[1];
         }
-        if(this.searchFrom.syncTime && this.searchFrom.syncTime.length > 0){
-          json.pull_start_at = this.searchFrom.syncTime[0]
-          json.pull_end_at =this.searchFrom.syncTime[1]
+        if (this.searchFrom.syncTime && this.searchFrom.syncTime.length > 0) {
+          json.pull_start_at = this.searchFrom.syncTime[0];
+          json.pull_end_at = this.searchFrom.syncTime[1];
         }
-            exportExcelApi(`api/admin/yunji/order/export`,json);
-        }
-
-      },
+        exportExcelApi(`api/admin/yunji/order/export`, json);
+      }
+    },
+    classListOption() {
+      this.classObj.show=true;
     }
   }
-
+};
 </script>
 
 <style scoped>
-  .sms{
-    padding: 20px 0;
-  }
-  .avatar {
-    width:50px;
-    min-width: 50px;
-    margin-right: 10px;
-    height: 50px;
-    border-radius: 50%;
-  }
+.sms {
+  padding: 20px 0;
+}
+.avatar {
+  width: 50px;
+  min-width: 50px;
+  margin-right: 10px;
+  height: 50px;
+  border-radius: 50%;
+}
 </style>
 <style>
-  .userInfo >div{
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: flex-start;
-    align-items: center;
-  }
+.userInfo > div {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
 </style>