feat:增加证书学员分页获取

src/components/student/TableCertificateStudent.vue

@@ -2,6 +2,7 @@
   <div class="TableCertificateStudent">
     <div class="certificatetitle">
       <span style="margin-left: 32px">培训证书</span>
+      <button class="returnBtn" @click="returnClick">返回</button>
     </div>
     <div class="search">
       <div class="selectBox">
@@ -25,11 +26,10 @@
         <div>选择时间：</div>
         <div class="select in">
           <a-range-picker
-            style="width: 320px; height: 40px; border-radius: 8px"
-            :disabled-date="disabledDate"
-            :disabled-time="disabledRangeTime"
-            format="YYYY/MM/DD HH:mm"
-            v-model:value="chooseTime"
+            v-model:value="selectTime"
+            style="width: 320px"
+            format="YYYY-MM-DD"
+            separator="至"
             :placeholder="['      开始时间', '        结束时间']"
           />
         </div>
@@ -92,6 +92,7 @@
 import { reactive, toRefs } from "vue";
 import * as api from "@/api/index1";
 import OrgClass from "@/components/project/OrgClass";
+import { message } from "ant-design-vue";
 export default {
   name: "TableCertificateStudent",
   components: {
@@ -107,12 +108,17 @@ export default {
       type: Number,
       default: null,
     },
+    ischeckCertificate: {
+      type: Boolean,
+      default: false,
+    },
   },
-  setup(props) {
+  setup(props, ctx) {
     const state = reactive({
       studentName: null,
       tstudentDepartId: null,
       studentDepartName: null,
+      selectTime: null,
       tablecolumns: [
         {
           title: "工号",
@@ -195,19 +201,28 @@ export default {
       ],
       pageSize: 10,
       currentPage: 1,
-      tableDataTotal: 1,
+      tableDataTotal: -1,
       selectedRowKeys: [],
     });
+
     //获取证书学员
     const stuCertList = () => {
       let obj = {
+        name: state.studentName,
+        orgName: state.studentDepartName,
         id: props.ACertificateCheckId,
         pid: props.projectId,
+        size: state.pageSize,
       };
+      state.tableDataTotal = -1;
       api
         .stuCertList(obj)
         .then((res) => {
           console.log("获取证书学员", res);
+          if (res.data.code === 200) {
+            state.stuList = res.data.data.record;
+            state.tableDataTotal = res.data.data.total;
+          }
         })
         .catch((err) => {
           console.log("获取证书学员失败", err);
@@ -215,18 +230,63 @@ export default {
     };
     stuCertList();
 
+    //搜索
+    const search = () => {
+      state.currentPage = 1;
+      stuCertList();
+    };
+    //重置
+    const reset = () => {
+      state.currentPage = 1;
+      state.studentName = null;
+      state.tstudentDepartId = null;
+      state.studentDepartName = null;
+      state.selectTime = null;
+    };
+
     //取消授权
     const updateStuCert = (text) => {
       console.log("text", text);
+      let obj = {
+        id: text.record.id,
+        status: -1,
+      };
+      api
+        .updateStuCert(obj)
+        .then((res) => {
+          console.log("取消证书成功", res);
+          if (res.data.code === 200) {
+            message.success("取消证书成功");
+            stuCertList();
+          }
+        })
+        .catch((err) => {
+          console.log("取消证书失败", err);
+        });
     };
     const onSelectChange = (selectedRowKeys, e) => {
       console.log("selectedRowKeys changed: ", selectedRowKeys, e);
       state.selectedRowKeys = selectedRowKeys;
     };
+    //分页
+    const changePaginationStu = (page) => {
+      state.currentPage = page;
+      stuCertList();
+    };
+
+    //返回
+    const returnClick = () => {
+      ctx.emit("update:ischeckCertificate", false);
+      console.log("点击返回");
+    };
     return {
       ...toRefs(state),
       stuCertList,
+      search,
+      reset,
       onSelectChange,
+      changePaginationStu,
+      returnClick,
     };
   },
 };
@@ -240,12 +300,26 @@ export default {
   .certificatetitle {
     width: 100%;
     height: 74px;
-    padding-top: 40px;
+    padding-top: 29px;
     border-bottom: 1px solid rgba(232, 232, 232, 1);
     font-size: 18px;
     font-weight: 500;
     color: #333333;
     line-height: 25px;
+    display: flex;
+    justify-content: space-between;
+    .returnBtn {
+      cursor: pointer;
+      width: 100px;
+      height: 40px;
+      background: #4ea6ff;
+      border-radius: 8px;
+      border: 0;
+      margin-left: 15px;
+      color: #fff;
+      margin-right: 20px;
+      font-size: 14px;
+    }
   }
   .search {
     display: flex;