learning-system-portal/src/views/course/MycaseRecord.vue

<template>
     <div style="padding: 12px 32px 10px 12px;">
      <div style="display: flex;justify-content: flex-start;">
        <div style="margin-left:10px"><el-input v-model="caseData.keyWord"  placeholder="名称关键字" clearable></el-input></div>
        <div style="padding-left: 10px;"><el-button type="primary" icon="el-icon-search" @click="getsearch()">搜索</el-button></div>
        <div style="padding: 0px 5px;"><el-button icon="el-icon-refresh-right" type="primary" @click="reset">重置</el-button></div>
        <div style="padding: 0px 5px;"><el-button icon="el-icon-refresh-right" type="primary" @click="Export">导出</el-button></div>
      </div>
     
      <div style="margin-top:20px;">
        <el-table :data="params" border stripe >
            <el-table-column 
            label="案例名称" 
            prop="title"  
            width="200px">
            </el-table-column>
            <el-table-column 
            label="状态" 
            prop="status" 
            
            width="100px">
          <template slot-scope="scope">
          <span v-if="scope.row.status == 0">草稿</span>
          <span v-if="scope.row.status == 1">待审核</span>
          <span v-if="scope.row.status == 2">未通过</span>
          <span v-if="scope.row.status == 3">已发布</span>
          </template>
            </el-table-column>
            <el-table-column 
            label="审批完成时间" 
            prop="endTime"
            width="200px">
            </el-table-column>
            <el-table-column 
            label="公开范围" 
            prop="caseScope" 
            width="100px">
            </el-table-column>
            <el-table-column 
            label="浏览量" 
            prop="views"
            ></el-table-column>
            <el-table-column 
            label="点赞量" 
            prop="praises"
            width="100px" 
            ></el-table-column>
            <el-table-column 
            label="分享量" 
            prop="shares" 
            width="100px"
            ></el-table-column>
            <el-table-column 
            label="收藏量" 
            width="100px" 
            prop="favorites" 
            ></el-table-column>
           
        </el-table>
      </div>
      <div v-if="count > 0" style="text-align: center; margin-top:57px">
      <el-pagination
      background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="caseData.pageIndex"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="caseData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      ></el-pagination>
    </div>
    </div>
</template>

<script>
import aipCase from '../../api/modules/cases.js';
import { mapGetters,mapActions } from 'vuex';
export default {
computed: {
      ...mapGetters(['userInfo']),
  },
  data(){
    return {
        count:0,
        caseData:{
            pageIndex:1,
            pageSize:10,
            keyWord:'',
            status:0,
            },
        params:[],
    }
  },
  mounted(){
    this.getcaseData();
  },
  
  methods:{
    Export(){
      let data = {
        keyWord:this.caseData.keyWord,
      }
      aipCase.exportCases(data).then(res =>{

      })
    },
    getsearch(){
      this.caseData.pageIndex = 1;
      this.getcaseData();
    },
    handleSizeChange(val) {
      this.caseData.pageSize = val;
      this.caseData.pageIndex = 1;
      this.getcaseData();
    },
    handleCurrentChange(val) {
     this.caseData.pageIndex = val;
      this.getcaseData();
    },
    getcaseData(){
        aipCase.mylist(this.caseData).then(res =>{
            console.log(res);
            this.count = res.result.count;
            this.params = res.result.list
        })
    },

    reset(){
      this.caseData.keyWord = '';
      this.getcaseData();
    }
  }
}
</script>

<style lang="scss" scoped>
.Export{
  display: flex;
  padding-top: 10px;
}
</style>