我的案例记录

src/views/course/MycaseRecord.vue

@@ -1,56 +1,75 @@
 <template>
      <div style="padding: 12px 32px 10px 12px;">
       <div style="display: flex;justify-content: flex-start;">
-        <div style="margin-left:10px"><el-input  placeholder="名称关键字" clearable></el-input></div>
-        <div style="padding-left: 10px;"><el-button type="primary" icon="el-icon-search">搜索</el-button></div>
-        <div style="padding: 0px 5px;"><el-button icon="el-icon-refresh-right" type="primary" >重置</el-button></div>
-        <div style="padding: 0px 5px;"><el-button icon="el-icon-refresh-right" type="primary" >导出</el-button></div>
+        <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="pageData" border stripe>
+        <el-table :data="params" border stripe >
             <el-table-column 
             label="案例名称" 
-            prop="time"  
+            prop="title"  
             width="200px">
             </el-table-column>
             <el-table-column 
             label="状态" 
-            prop="courseName" 
+            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="sysType"
+            prop="endTime"
             width="200px">
             </el-table-column>
             <el-table-column 
             label="公开范围" 
-            prop="status" 
+            prop="caseScope" 
             width="100px">
             </el-table-column>
             <el-table-column 
             label="浏览量" 
-            prop="courseUser"
+            prop="views"
             ></el-table-column>
             <el-table-column 
             label="点赞量" 
-            prop="auditTime"
+            prop="praises"
             width="100px" 
             ></el-table-column>
             <el-table-column 
             label="分享量" 
-            prop="auditRemark" 
+            prop="shares" 
             width="100px"
             ></el-table-column>
             <el-table-column 
             label="收藏量" 
             width="100px" 
-            prop="studynum" 
+            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>
 
@@ -63,46 +82,54 @@ computed: {
   },
   data(){
     return {
+        count:0,
         caseData:{
             pageIndex:1,
             pageSize:10,
+            keyWord:'',
+            status:0,
             },
-        pageData:[{
-            time:'2022-10-30 13:00:00',
-            courseName:'时间管理',
-            sysType:'核心能力大楼培训',
-            status:'管理者课程',
-            courseUser:'管理者进阶-腾飞班K1',
-            auditTime:'产品经理路径管理',
-            auditRemark:'35',
-            studynum:'120',
-            pf:'4.5',
-            cz:'导出学员信息'
-        },
-        {
-            time:'2022-10-30 13:00:00',
-            courseName:'时间管理',
-            sysType:'核心能力大楼培训',
-            status:'管理者课程',
-            courseUser:'管理者进阶-腾飞班K1',
-            auditTime:'产品经理路径管理',
-            auditRemark:'35',
-            studynum:'120',
-            pf:'4.5',
-            cz:'导出学员信息'
-        }
-        ]
+        params:[],
     }
   },
   mounted(){
-    // this.getcaseData();
+    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);
+            console.log(res);
+            this.count = res.result.count;
+            this.params = res.result.list
         })
     },
+
+    reset(){
+      this.caseData.keyWord = '';
+      this.getcaseData();
+    }
   }
 }
 </script>