feat:添加证书

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,
     };
   },
 };