feat:添加证书

src/api/index1.js

@@ -2,7 +2,7 @@
  * @Author: lixg lixg@dongwu-inc.com
  * @Date: 2022-11-04 22:45:31
  * @LastEditors: lixg lixg@dongwu-inc.com
- * @LastEditTime: 2023-02-03 18:39:27
+ * @LastEditTime: 2023-02-04 19:59:55
  * @FilePath: /fe-manage/src/api/index1.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -201,4 +201,11 @@ export const saveupdatecertificate = (obj) => http.post('/admin/certificate/save
 //删除证书
 export const certificatedel = (obj) => http.get('/admin/certificate/del', { params: obj })
 //证书详情
-export const certificatedetail = (obj) => http.post('/admin/certificate/get', obj)
+export const certificatedetail = (obj) => http.get('/admin/certificate/get', { params: obj })
+//获取阶段列表
+export const getStageList = (obj) => http.get('/admin/project/getStageList', { params: obj })
+//获取任务列表
+export const getTaskList = (obj) => http.get('/admin/project/getTaskList', { params: obj })
+//查看证书学员列表
+export const stuCertList = (obj) => http.get('/admin/certificate/stuCertList', { params: obj })
+

src/components/drawers/project/AddCertificate.vue

@@ -81,6 +81,7 @@
                 :show-upload-list="false"
                 action="/manageApi/file/uploadFile"
                 @change="handleChange"
+                :before-upload="beforeUpload"
               >
                 <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                 <div v-else>
@@ -110,8 +111,14 @@
             </div>
           </div>
 
-          <div class="main_item">
+          <div class="main_item" style="margin-bottom: 16px">
             <div class="signbox">
+              <div class="sign">
+                <img
+                  src="@/assets/images/coursewareManage/asterisk.png"
+                  alt=""
+                />
+              </div>
               <span
                 style="
                   margin-right: 3px;
@@ -125,7 +132,16 @@
             <div class="btnbox"></div>
           </div>
 
-          <div class="main_item">
+          <div
+            class="main_item"
+            style="
+              border: 1px solid rgba(0, 0, 0, 0.1);
+              width: ;
+              margin-left: 35px;
+              padding-top: 30px;
+              margin-top: 0px;
+            "
+          >
             <div class="signbox" style="width: 30px">
               <span
                 style="margin-right: 3px; font-size: 16px; color: #333"
@@ -138,7 +154,21 @@
               >
                 <a-radio v-model:checked="checked" :value="1">
                   完成项目
+                  <a-popover>
+                    <template #content>
+                      <div
+                        style="font-size: 12px; color: rgba(153, 153, 153, 1)"
+                      >
+                        后续新增自动包括
+                      </div>
+                    </template>
+                    <img
+                      style="width: 16px; height: 16px"
+                      src="../../../assets/images/project/tishi.png"
+                    />
+                  </a-popover>
                 </a-radio>
+
                 <br />
                 <div
                   style="
@@ -148,7 +178,12 @@
                     align-items: center;
                   "
                 >
-                  <a-radio-group v-model:value="large" size="small">
+                  <a-radio-group
+                    v-model:value="large"
+                    size="small"
+                    @change="selectlarge"
+                    :disabled="condition !== 1"
+                  >
                     <a-radio-button value="1">全部任务</a-radio-button>
                     <a-radio-button value="2">完成必修任务</a-radio-button>
                   </a-radio-group>
@@ -169,14 +204,18 @@
                     ref="select"
                     size="small"
                     placeholder="请选择阶段"
-                    v-model:value="value1"
+                    v-model:value="selectStageName"
                     style="width: 120px"
                     @focus="focus"
                     @change="selectStage"
+                    :options="stageList"
+                    :fieldNames="{
+                      key: 'id',
+                      title: 'name',
+                      value: 'name',
+                    }"
+                    :disabled="condition !== 2"
                   >
-                    <a-select-option value="jack">第一阶段</a-select-option>
-                    <a-select-option value="lucy">第二阶段</a-select-option>
-                    <a-select-option value="Yiminghe">第三阶段</a-select-option>
                   </a-select>
                 </div>
                 <a-radio v-model:checked="checked" :value="3">
@@ -195,14 +234,18 @@
                     ref="select"
                     size="small"
                     placeholder="请选择任务"
-                    v-model:value="value1"
+                    v-model:value="selectTaskName"
                     style="width: 120px"
                     @focus="focus"
                     @change="selectTask"
+                    :options="taskList"
+                    :fieldNames="{
+                      key: 'id',
+                      title: 'name',
+                      value: 'name',
+                    }"
+                    :disabled="condition !== 3"
                   >
-                    <a-select-option value="jack">任务一</a-select-option>
-                    <a-select-option value="lucy">任务二</a-select-option>
-                    <a-select-option value="Yiminghe">任务三</a-select-option>
                   </a-select>
                 </div>
                 <a-radio v-model:checked="checked" :value="4">
@@ -221,14 +264,18 @@
                     ref="select"
                     size="small"
                     placeholder="请选择考试"
-                    v-model:value="value1"
+                    v-model:value="selectExamName"
                     style="width: 120px"
                     @focus="focus"
                     @change="selectExam"
+                    :options="examList"
+                    :fieldNames="{
+                      key: 'id',
+                      title: 'name',
+                      value: 'name',
+                    }"
+                    :disabled="condition !== 4"
                   >
-                    <a-select-option value="jack">考试一</a-select-option>
-                    <a-select-option value="lucy">考试二</a-select-option>
-                    <a-select-option value="Yiminghe">考试三</a-select-option>
                   </a-select>
                 </div>
                 <a-radio v-model:checked="checked" :value="5">
@@ -243,19 +290,36 @@
                     align-items: center;
                   "
                 >
-                  <a-button style="border: 0px solid red; box-shadow: none"
-                    >高于</a-button
+                  <div
+                    style="
+                      font-size: 14px;
+                      font-weight: 400;
+                      color: #333333;
+                      line-height: 20px;
+                      margin-right: 5px;
+                    "
                   >
+                    高于
+                  </div>
                   <a-input-number
                     id="inputNumber"
-                    v-model:value="value"
+                    v-model:value="score"
                     :min="1"
                     :max="100"
                     style="width: 70px"
+                    :disabled="condition !== 5"
                   />
-                  <a-button style="border: 0px solid red; box-shadow: none"
-                    >分可获得，当前项目积分为 10 分</a-button
+                  <div
+                    style="
+                      font-size: 14px;
+                      font-weight: 400;
+                      color: #333333;
+                      line-height: 20px;
+                      margin-left: 5px;
+                    "
                   >
+                    分可获得，当前项目积分为 10 分
+                  </div>
                 </div>
                 <!-- <a-radio v-model:checked="checked" :value="6" >
                     完成作业
@@ -294,7 +358,7 @@
       </div>
       <div class="main_btns">
         <button class="btn1" @click="closeDrawer">取消</button>
-        <button class="btn2" @click="updateActivityInfo">确定</button>
+        <button class="btn2" @click="saveupdatecertificate">确定</button>
       </div>
     </div>
   </a-drawer>
@@ -305,6 +369,7 @@
 import { reactive, toRefs } from "vue";
 import CreateCertificate from "../../../components/drawers/project/CreateCertificate";
 import { message } from "ant-design-vue";
+import * as api from "@/api/index1";
 export default {
   name: "AddCertificate",
   components: {
@@ -315,7 +380,7 @@ export default {
       type: Number,
       default: null,
     },
-    edit: {
+    ACertificateEdit: {
       //  是否为编辑
       type: Boolean,
       default: null,
@@ -324,44 +389,160 @@ export default {
       type: Boolean,
       default: false,
     },
+    getCertificate: {
+      type: Function,
+      default: null,
+    },
+    ACertificateEditId: {
+      type: Number,
+      default: null,
+    },
   },
   setup(props, ctx) {
     const state = reactive({
-      certificateName: "", //证书名称
+      certificateName: null, //证书名称
       imageUrl: null, //证书封面
       imageName: null,
-      certificateRemark: "", //证书说明
-      condition: "", //选择条件
+      certificateRemark: null, //证书说明
+      condition: null, //选择条件
 
       CCertificate: false,
+
+      large: null, //选择项目里的全部任务或必修任务
+
+      stageList: [], //阶段列表
+      taskList: [], //任务列表
+      examList: [], //考试列表
+      selectStageName: null,
+      selectStageId: null,
+      selectTaskName: null,
+      selectTaskId: null,
+      selectExamName: null,
+      selectExamId: null,
+      score: null, //积分
+
+      fileType: ["jpg", "jpeg", "png", "gif", "svg", "bmp"],
     });
+    const reset = () => {
+      state.certificateName = null;
+      state.certificateRemark = null;
+      state.imageUrl = null;
+      state.imageName = null;
+      state.condition = null;
+      state.CCertificate = false;
+      state.stageList = [];
+      state.taskList = [];
+      state.selectStageName = null;
+      state.selectStageId = null;
+      state.selectTaskName = null;
+      state.selectTaskId = null;
+      state.selectExamName = null;
+      state.selectExamId = null;
+      state.score = null;
+    };
+
     const closeDrawer = () => {
       ctx.emit("update:ACertificate", false);
-      ctx.emit("update:edit", false);
-      state.certificateName = "";
-      state.certificateRemark = "";
-      state.imageUrl = "";
-      state.imageName = null;
-      state.condition = "";
-      state.CCertificate = false;
+      ctx.emit("update:ACertificateEdit", false);
+      reset();
     };
     const afterVisibleChange = (bool) => {
-      if (bool && props.edit) {
+      if (bool && props.ACertificateEdit) {
         console.log("是编辑");
+        getcertificate();
       }
+      if (bool) {
+        getStageList();
+        getTaskList();
+      }
+    };
+    //获取阶段
+    const getStageList = () => {
+      let obj = {
+        projectId: props.projectId,
+      };
+      api
+        .getStageList(obj)
+        .then((res) => {
+          console.log("获取阶段列表", res);
+          if (res.data.code === 200) {
+            state.stageList = res.data.data;
+          }
+        })
+        .catch((err) => {
+          console.log("获取阶段列表失败", err);
+        });
+    };
+    //获取任务
+    const getTaskList = () => {
+      let obj = {
+        projectId: props.projectId,
+      };
+      api
+        .getTaskList(obj)
+        .then((res) => {
+          console.log("获取任务列表", res);
+          if (res.data.code === 200) {
+            state.taskList = res.data.data;
+          }
+        })
+        .catch((err) => {
+          console.log("获取任务列表失败", err);
+        });
+    };
+    //获取考试
+
+    //选择阶段
+    const selectStage = (e, k) => {
+      console.log("选择阶段", e, k);
+      state.selectStageName = e;
+      state.selectStageId = k.stageId;
+      state.selectTaskName = null;
+      state.selectTaskId = null;
+      state.selectExamName = null;
+      state.selectExamId = null;
+    };
+    //选择任务
+    const selectTask = (e, k) => {
+      console.log("选择任务", e, k);
+      state.selectStageName = null;
+      state.selectStageId = null;
+      state.selectTaskName = e;
+      state.selectTaskId = k.projectTaskId;
+      state.selectExamName = null;
+      state.selectExamId = null;
+    };
+    //选择考试
+    const selectExam = (e, k) => {
+      console.log("选择考试", e, k);
+      state.selectStageName = null;
+      state.selectStageId = null;
+      state.selectTaskName = null;
+      state.selectTaskId = null;
+      state.selectExamName = e;
+      state.selectExamId = e.examId;
     };
     //选择的获得条件
     const selectCondition = (e) => {
-      console.log("e.target.value;", e.target.value);
+      state.condition = e.target.value;
+      state.large = null;
+      state.selectStageName = null;
+      state.selectStageId = null;
+      state.selectTaskName = null;
+      state.selectTaskId = null;
+      state.selectExamName = null;
+      state.selectExamId = null;
+      state.score = null;
+    };
+    const selectlarge = (e) => {
+      state.large = e.target.value;
     };
-
     // 创建证书
     function CreateCertificate() {
       state.CCertificate = true;
     }
     //上传封面
     const handleChange = (info) => {
-      console.log("info", info);
       if (info.file.status === "uploading") {
         return;
       }
@@ -375,13 +556,100 @@ export default {
       }
     };
 
+    function beforeUpload(file) {
+      if (!state.fileType.includes(file.name.split(".").slice(-1).join(""))) {
+        message.error("不支持该格式");
+        return false;
+      }
+    }
+
+    //查看证书
+    const getcertificate = () => {
+      let obj = {
+        id: Number(props.ACertificateEditId),
+      };
+      console.log("传参", obj);
+      api
+        .certificatedetail(obj)
+        .then((res) => {
+          console.log("获取证书详情", res);
+          // if (res.data.code === 200) {
+          // }
+        })
+        .catch((err) => {
+          console.log("获取证书详情失败", err);
+        });
+    };
+    //添加证书
+    const saveupdatecertificate = () => {
+      if (!state.certificateName) return message.warning("请输入证书名称");
+      if (!state.imageName) return message.warning("请上传证书封面");
+      if (!state.condition) return message.warning("请设置获得条件");
+      if (state.condition == 1 && !state.large)
+        return message.warning("请选择完成项目类型");
+      if (state.condition == 2 && !state.selectStageId)
+        return message.warning("请选择完成阶段");
+      if (state.condition == 3 && !state.selectTaskId)
+        return message.warning("请选择完成任务");
+      if (state.condition == 4 && !state.selectExamId)
+        return message.warning("请选择考试");
+      if (state.condition == 5 && !state.score)
+        return message.warning("请输入积分");
+
+      if (props.ACertificateEdit) {
+        console.log("更新证书");
+      } else {
+        console.log("新增证书");
+
+        let obj = {
+          pid: props.projectId,
+          name: state.certificateName,
+          url: state.imageName,
+          finishType: state.condition,
+          finishValue:
+            state.condition == 1
+              ? state.large
+              : state.condition == 2
+              ? state.selectStageId
+              : state.condition == 3
+              ? state.selectTaskId
+              : state.condition == 4
+              ? state.selectExamId
+              : state.condition == 5
+              ? state.score
+              : "",
+          type: 1,
+        };
+        reset();
+        api
+          .saveupdatecertificate(obj)
+          .then((res) => {
+            console.log("新增证书", res);
+            if (res.data.code === 200) {
+              message.success("证书添加成功");
+              props.getCertificate && props.getCertificate();
+            }
+          })
+          .catch((err) => {
+            console.log("新增证书失败", err);
+          });
+      }
+    };
     return {
       ...toRefs(state),
       afterVisibleChange,
       closeDrawer,
       selectCondition,
+      selectlarge,
       handleChange,
+      beforeUpload,
       CreateCertificate,
+      saveupdatecertificate,
+      getStageList,
+      getTaskList,
+      selectStage,
+      selectTask,
+      selectExam,
     };
   },
 };

src/components/student/TableCertificateStudent.vue

@@ -0,0 +1,312 @@
+<template>
+  <div class="TableCertificateStudent">
+    <div class="certificatetitle">
+      <span style="margin-left: 32px">培训证书</span>
+    </div>
+    <div class="search">
+      <div class="selectBox">
+        <div>姓名：</div>
+        <a-input
+          class="cus-input"
+          v-model:value="studentName"
+          placeholder="请输入姓名"
+        />
+      </div>
+      <div class="selectBox">
+        <div>部门：</div>
+        <div class="select in" style="width: 270px">
+          <OrgClass
+            v-model:value="tstudentDepartId"
+            v-model:name="studentDepartName"
+          ></OrgClass>
+        </div>
+      </div>
+      <div class="selectBox">
+        <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"
+            :placeholder="['      开始时间', '        结束时间']"
+          />
+        </div>
+      </div>
+
+      <a-button
+        class="cus-btn"
+        style="background: #4ea6ff; color: #fff; width: 100px"
+        @click="getStuList"
+      >
+        <template #icon>
+          <img
+            style="margin-right: 10px"
+            src="../../assets/images/courseManage/search0.png"
+        /></template>
+        搜索
+      </a-button>
+      <a-button class="cus-btn white" style="width: 100px" @click="reset">
+        <template #icon>
+          <img
+            style="margin-right: 10px"
+            src="../../assets/images/leveladd/reset.png"
+        /></template>
+        重置
+      </a-button>
+    </div>
+    <div class="batch">批量取消证书</div>
+    <div class="tableBox" style="margin-top: 20px">
+      <a-table
+        :columns="tablecolumns"
+        :data-source="stuList"
+        :loading="tableDataTotal === -1 ? true : false"
+        :scroll="{ x: 1000 }"
+        row-key="id"
+        :row-selection="{
+          selectedRowKeys: selectedRowKeys,
+          onChange: onSelectChange,
+        }"
+      >
+      </a-table>
+      <div class="tableBox">
+        <div class="pa">
+          <a-pagination
+            v-if="tableDataTotal > 10"
+            :showSizeChanger="false"
+            showQuickJumper="true"
+            hideOnSinglePage="true"
+            :pageSize="pageSize"
+            :current="currentPage"
+            :total="tableDataTotal"
+            class="pagination"
+            @change="changePaginationStu"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { reactive, toRefs } from "vue";
+import * as api from "@/api/index1";
+import OrgClass from "@/components/project/OrgClass";
+export default {
+  name: "TableCertificateStudent",
+  components: {
+    OrgClass,
+  },
+  props: {
+    projectId: {
+      type: Number,
+      default: null,
+    },
+    //证书id
+    ACertificateCheckId: {
+      type: Number,
+      default: null,
+    },
+  },
+  setup(props) {
+    const state = reactive({
+      studentName: null,
+      tstudentDepartId: null,
+      studentDepartName: null,
+      tablecolumns: [
+        {
+          title: "工号",
+          dataIndex: "studentUserNo",
+          key: "studentUserNo",
+          width: 40,
+          align: "center",
+          className: "h head",
+        },
+        {
+          title: "姓名",
+          dataIndex: "studentName",
+          key: "studentName",
+          width: 40,
+          align: "center",
+          className: "h head",
+        },
+        {
+          title: "部门",
+          dataIndex: "studentDepartName",
+          key: "studentDepartName",
+          width: 60,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "岗位",
+          dataIndex: "studentJobName",
+          key: "studentJobName",
+          width: 60,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "取得证书时间",
+          dataIndex: "time",
+          key: "time",
+          width: 60,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "操作",
+          dataIndex: "opacation",
+          key: "opacation",
+          width: 60,
+          align: "center",
+          className: "h",
+          customRender: (record) => {
+            // console.log(text.record.checked1);
+            return (
+              <div>
+                {record.record.status === -1 ? (
+                  <div class="opa">
+                    <span>证书已取消</span>
+                  </div>
+                ) : (
+                  <div
+                    class="opa"
+                    onClick={() => {
+                      updateStuCert(record);
+                    }}
+                  >
+                    <span>取消证书</span>
+                  </div>
+                )}
+              </div>
+            );
+          },
+        },
+      ],
+      stuList: [
+        {
+          studentUserNo: "1234",
+          studentName: "li",
+          studentDepartName: "开发部",
+          studentJobName: "岗位一",
+          time: "2023-02-04",
+        },
+      ],
+      pageSize: 10,
+      currentPage: 1,
+      tableDataTotal: 1,
+      selectedRowKeys: [],
+    });
+    //获取证书学员
+    const stuCertList = () => {
+      let obj = {
+        id: props.ACertificateCheckId,
+        pid: props.projectId,
+      };
+      api
+        .stuCertList(obj)
+        .then((res) => {
+          console.log("获取证书学员", res);
+        })
+        .catch((err) => {
+          console.log("获取证书学员失败", err);
+        });
+    };
+    stuCertList();
+
+    //取消授权
+    const updateStuCert = (text) => {
+      console.log("text", text);
+    };
+    const onSelectChange = (selectedRowKeys, e) => {
+      console.log("selectedRowKeys changed: ", selectedRowKeys, e);
+      state.selectedRowKeys = selectedRowKeys;
+    };
+    return {
+      ...toRefs(state),
+      stuCertList,
+      onSelectChange,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.TableCertificateStudent {
+  table tr th.ant-table-selection-column,
+  table tr td.ant-table-selection-column {
+    padding-left: 3px;
+  }
+  .certificatetitle {
+    width: 100%;
+    height: 74px;
+    padding-top: 40px;
+    border-bottom: 1px solid rgba(232, 232, 232, 1);
+    font-size: 18px;
+    font-weight: 500;
+    color: #333333;
+    line-height: 25px;
+  }
+  .search {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-top: 31px;
+    margin-left: 8px;
+    .selectBox {
+      display: flex;
+      align-items: center;
+      margin-left: 24px;
+      margin-bottom: 30px;
+    }
+  }
+
+  .cus-btn {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 8px;
+    margin-right: 8px;
+    border: 1px solid #4ea6ff;
+    border-radius: 8px;
+    background: #4ea6ff;
+    cursor: pointer;
+    color: #fff;
+    margin-bottom: 30px;
+  }
+  .batch {
+    width: 130px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 32px;
+    cursor: pointer;
+    background: #388be1;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 20px;
+  }
+  .white {
+    background: #fff;
+    color: #4ea6ff;
+  }
+
+  .cus-input {
+    width: 264px;
+    height: 40px;
+    border-radius: 8px;
+  }
+
+  .opa {
+    font-size: 14px;
+    font-weight: 400;
+    color: #387df7;
+    line-height: 22px;
+  }
+}
+</style>

src/views/projectcenter/TaskPage.vue

@@ -975,120 +975,124 @@
         </a-tab-pane>
         <a-tab-pane key="7" tab="证书">
           <div class="split"></div>
-          <!-- 没有证书显示的页面 -->
-          <div
-            v-if="3> 7"
-            style="
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              height: 600px;
-              flex-direction: column;
-            "
-          >
-            <div class="certificate" @click="addCertificate">
-              <img
-                style="width: 68px; height: 79px"
-                src="../../assets/images/taskpage/nocertificate2.png"
-              />
-              <div style="font-size: 20px;color: #409EFF;margin-top:16px">无证书</div>
-              <div style="font-size: 14px;color: #878B92;">请点击新建证书</div>
-            </div>
-          </div>
-          <!-- 有证书显示的页面 -->
-          <div v-else style="padding: 36px; display: flex; min-height: 400px">
+          <div v-if="!ischeckCertificate">
+            <!-- 没有证书显示的页面 -->
             <div
+              v-if="3 > 7"
               style="
-                width: 170px;
-                height: 200px;
-                border: 1px solid #b1b3b8;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                color: #4ea6ff;
-                cursor: pointer;
-              "
-              @click="addCertificate"
-            >
-              <div class="ant-upload-text">+添加证书</div>
-            </div>
-
-            <div
-              style="
-                width: 170px;
-                height: 200px;
-                border: 1px solid #b1b3b8;
-                margin-left: 32px;
                 display: flex;
                 justify-content: center;
                 align-items: center;
+                height: 600px;
                 flex-direction: column;
               "
             >
-              <img
-                @click="previewPic"
-                style="cursor: pointer"
-                width="140"
-                height="160"
-                src="https://picb6.photophoto.cn/32/552/32552236_1.jpg"
-                alt=""
-                srcset=""
-              />
-              <div
-                style="
-                  display: flex;
-                  height: 26px;
-                  justify-content: space-around;
-                  align-items: center;
-                "
-              >
-                <div
-                  style="
-                    font-size: 14px;
-                    width: 85px;
-                    overflow: hidden;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                  "
-                >
-                  培训认证证书
+              <div class="certificate" @click="addCertificate">
+                <img
+                  style="width: 68px; height: 79px"
+                  src="../../assets/images/taskpage/nocertificate2.png"
+                />
+                <div style="font-size: 20px; color: #409eff; margin-top: 16px">
+                  无证书
                 </div>
-                <div
-                  style="
-                    font-size: 12px;
-                    color: #999;
-                    width: 50px;
-                    margin-left: 6px;
-                    overflow: hidden;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                  "
-                >
-                  完成项目
-                </div>
-                <div style="cursor: pointer; position: relative">
-                  ...
-                  <div
-                    style="
-                      position: absolute;
-                      width: 45px;
-                      height: 60px;
-                      background: #fff;
-                      display: flex;
-                      flex-direction: column;
-                      justify-content: center;
-                      align-items: center;
-                      border: 1px solid #b1b3b8;
-                    "
-                  >
-                    <div style="font-size: 12px; color: #999">查看</div>
-                    <div style="font-size: 12px; color: #999">编辑</div>
-                    <div style="font-size: 12px; color: #999">删除</div>
-                  </div>
+                <div style="font-size: 14px; color: #878b92">
+                  请点击新建证书
                 </div>
               </div>
             </div>
+            <!-- 有证书显示的页面 -->
+            <div v-else class="certificate1">
+              <div class="addcertificate1" @click="addCertificate">
+                <div class="addcertext">+添加证书</div>
+              </div>
+              <div
+                class="certificatelist"
+                v-for="(item, index) in certificatelist"
+                :key="index"
+              >
+                <div class="certificatelistMain">
+                  <img
+                    @click="previewPic"
+                    style="cursor: pointer; width: 140px; height: 200px"
+                    :src="fileUrl + item.url"
+                    alt=""
+                    srcset=""
+                  />
+                  <div class="cergetrules">
+                    <div class="cergetrulesText">获取规则</div>
+                    <div class="cergetrulesMain">
+                      {{
+                        item.finishType === 1
+                          ? "完成项目"
+                          : item.finishType === 2
+                          ? "完成阶段"
+                          : item.finishType === 3
+                          ? "完成任务"
+                          : item.finishType === 4
+                          ? "考试合格"
+                          : item.finishType === 5
+                          ? "获得积分"
+                          : "-"
+                      }}
+                    </div>
+                    <a-popover class="certificateMorebox">
+                      <template #content>
+                        <div
+                          class="certificateMore"
+                          style="
+                            font-size: 12px;
+                            font-weight: 400;
+                            color: #333333;
+                          "
+                        >
+                          <div
+                            class="certificateMore1"
+                            style="line-height: 22px; cursor: pointer"
+                            @click="checkCertificate(item)"
+                          >
+                            查看
+                          </div>
+                          <div
+                            class="certificateMore2"
+                            style="line-height: 22px; cursor: pointer"
+                            @click="editCertificate(item)"
+                          >
+                            编辑
+                          </div>
+                          <div
+                            class="certificateMore3"
+                            style="line-height: 22px; cursor: pointer"
+                            @click="deleteCertificate(item)"
+                          >
+                            删除
+                          </div>
+                        </div>
+                      </template>
+                      <div>
+                        更多
+                        <img
+                          style="width: 11px; height: 8px; margin-left: 2px"
+                          src="../../assets/images/project/triangle.png"
+                        />
+                      </div>
+                    </a-popover>
+                    <!-- <div class="certificateMorebox">
+                    更多
+                   
+                  </div> -->
+                  </div>
+                </div>
+                <div class="certificateName">{{ item.name }}</div>
+              </div>
+            </div>
           </div>
+          <!-- 查看证书显示的页面 -->
+          <TableCertificateStudent
+            :projectId="projectId"
+            :ACertificateCheckId="ACertificateCheckId"
+            v-if="ischeckCertificate"
+          >
+          </TableCertificateStudent>
         </a-tab-pane>
         <a-tab-pane key="8" tab="设置">
           <div class="split"></div>
@@ -1446,6 +1450,9 @@
     <AddCertificate
       v-model:ACertificate="ACertificate"
       v-model:projectId="projectId"
+      v-model:ACertificateEdit="ACertificateEdit"
+      :getCertificate="getCertificate"
+      :ACertificateEditId="ACertificateEditId"
     />
 
     <!-- 创建证书抽屉 -->
@@ -2121,6 +2128,8 @@ import ProjectLevel from "@/components/project/ProjectLevel";
 import TrainClass from "@/components/project/TrainClass";
 import ProjectManager from "@/components/project/ProjectManagerNew";
 import TableStudent from "@/components/student/TableStudent";
+import TableCertificateStudent from "@/components/student/TableCertificateStudent";
+
 import { getStuPage } from "@/api/index1";
 import ChangeGroupModal from "@/components/student/ChangeGroupModal.vue";
 import { checkPer } from "@/utils/utils";
@@ -2153,6 +2162,7 @@ export default {
     TwoDimensionalCode,
     ProjectManager,
     TableStudent,
+    TableCertificateStudent,
     AddCertificate,
     CreateCertificate,
     ProjectVoteManage,
@@ -2310,7 +2320,11 @@ export default {
       TMvisible: false, //考试管理
       Evalvisible: false, //测评管理
       ACertificate: false, //证书添加
+      ACertificateEdit: false, //是否是编辑证书
+      ACertificateEditId: null, //编辑证书的id
       CCertificate: false, //证书创建
+      ischeckCertificate: false, //是否显示查看证书
+      ACertificateCheckId: null, //查看证书学员的id
       Stuvisible: false, //添加学员
       Importvisible: false, //导入学员
       Seevisible: false, //查看学员
@@ -2334,7 +2348,7 @@ export default {
       checkedBOEU: false, //是否BOEU实施
       radioV1: "",
       radioV2: "",
-      activeKey: "1", //1:概览 2.任务...
+      activeKey: "7", //1:概览 2.任务...
       activeKey1: "8", //8:学员管理 9：小组管理
       activeKey2: "3",
       activeKeyNotice: "11",
@@ -2857,6 +2871,9 @@ export default {
 
       modal1Visible: false, // 证书预览
       changegroupV: false, //换组弹窗
+
+      certificatelist: [],
+      fileUrl: process.env.VUE_APP_FILE_PATH,
     });
 
     const levelList = reactive({
@@ -4558,11 +4575,62 @@ export default {
     {
       /* 证书 */
     }
-    function addCertificate() {
+    //获取证书列表
+    const getCertificate = () => {
+      let obj = {
+        pid: state.projectId,
+      };
+      api
+        .certificate(obj)
+        .then((res) => {
+          console.log("获取证书列表", res);
+          if (res.data.code === 200) {
+            state.certificatelist = res.data.data.records;
+          }
+        })
+        .catch((err) => {
+          console.log("获取证书列表失败", err);
+        });
+    };
+    getCertificate();
+
+    //查看证书
+    const checkCertificate = (item) => {
+      console.log("点击查看证书");
+      state.ischeckCertificate = true;
+      state.ACertificateCheckId = item.id;
+    };
+    const addCertificate = () => {
       console.log("点击添加证书");
       state.ACertificate = true;
-    }
-
+      state.ACertificateEdit = false;
+      state.ACertificateEditId = null;
+    };
+    const editCertificate = (item) => {
+      console.log("点击编辑证书", item);
+      state.ACertificate = true;
+      state.ACertificateEdit = true;
+      state.ACertificateEditId = item.id;
+    };
+    //点击删除证书
+    const deleteCertificate = (item) => {
+      console.log("要删除的证书", item);
+      let obj = {
+        id: item.id,
+      };
+      api
+        .certificatedel(obj)
+        .then((res) => {
+          console.log("删除证书结果", res);
+          if (res.data.code === 200) {
+            message.success("删除成功");
+            getCertificate();
+          }
+        })
+        .catch((err) => {
+          console.log("删除证书失败", err);
+        });
+    };
     function previewPic() {
       state.modal1Visible = true;
     }
@@ -4679,7 +4747,11 @@ export default {
       downloadFile,
       checkPer,
       addCertificate,
+      editCertificate,
+      deleteCertificate,
       previewPic,
+      getCertificate,
+      checkCertificate,
     };
   },
 };
@@ -7546,6 +7618,115 @@ export default {
     background-image: url(../../assets/images/taskpage/nocertificate.png);
     background-size: 100% 100%;
   }
+  .certificate1 {
+    padding: 36px;
+    display: flex;
+    min-height: 400px;
+    flex-wrap: wrap;
+    .addcertificate1 {
+      width: 210px;
+      height: 256px;
+      border: 1px solid rgba(64, 158, 255, 1);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #4ea6ff;
+      cursor: pointer;
+      margin-left: 16px;
+      margin-right: 16px;
+      background-color: rgba(64, 158, 255, 0.06);
+      margin-bottom: 20px;
+      .addcertext {
+        font-size: 16px;
+        font-weight: 500;
+        color: #388be1;
+        line-height: 22px;
+      }
+    }
+    .certificatelist {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      margin-left: 16px;
+      margin-right: 16px;
+      margin-bottom: 20px;
+      .certificatelistMain {
+        width: 210px;
+        height: 256px;
+        border: 1px solid rgba(64, 158, 255, 1);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        .cergetrules {
+          width: 210px;
+          display: flex;
+          height: 26px;
+          align-items: center;
+          margin-top: 8px;
+          .cergetrulesText {
+            font-size: 12px;
+            font-weight: 400;
+            color: #000000;
+            line-height: 22px;
+            margin-left: 12px;
+            font-size: 12px;
+          }
+          .cergetrulesMain {
+            font-size: 12px;
+            color: #999;
+            width: 62px;
+            margin-left: 6px;
+            // overflow: hidden;
+            // white-space: nowrap;
+            // text-overflow: ellipsis;
+            background: rgba(64, 158, 255, 0.1);
+            border-radius: 11px;
+            opacity: 0.49;
+            border: 1px solid #409eff;
+            text-align: center;
+          }
+          .certificateMorebox {
+            font-size: 12px;
+            font-weight: 600;
+            color: #409eff;
+            line-height: 22px;
+            cursor: pointer;
+            position: relative;
+            margin-left: 31px;
+          }
+          .certificateMore {
+            position: absolute;
+            width: 45px;
+            height: 60px;
+            background: #fff;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            border: 1px solid #b1b3b8;
+
+            // .certificateMore1:hover {
+            //   color: ;
+            // }
+          }
+        }
+      }
+      .certificateName {
+        width: 210px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-size: 16px;
+        font-weight: 500;
+        color: rgba(0, 0, 0, 0.85);
+        line-height: 22px;
+        margin-top: 8px;
+        display: flex;
+        justify-content: center;
+      }
+    }
+  }
 }
 
 .DelModal {