fix:社招新员工项目学习页细节样式调整

src/views/new-employee/StudyPage.vue

@@ -61,21 +61,23 @@
                 <div class="title-box">
                   <div class="item-title">{{ it.name }}</div>
                   <!-- 右侧动作/成绩 -->
-                  <div
-                    class="item-right"
-                    :class="it.completed ? 'done' : 'link'"
-                  >
+                  <div class="item-right">
                     <el-button
-                      v-if="!it.completed"
+                      v-if="it.status == 0"
+                      type="text"
+                      style="color: #999999"
+                      >未开始</el-button
+                    >
+                    <el-button
+                      v-if="it.status == 2"
                       type="text"
                       style="color: #ffb01e"
                       >进行中</el-button
                     >
                     <el-button
-                      v-else
+                      v-if="it.status == 1"
                       type="text"
                       style="color: #27ce9a"
-                      disabled
                       >已完成</el-button
                     >
                   </div>
@@ -127,32 +129,37 @@
             >
           </div>
           <div>
-            <el-alert
-              v-if="approvalResults == 2"
-              title="报名申请正在审核中"
-              type="primary"
-              center
-              show-icon
-              :closable="false"
-            />
-
-            <el-alert
-              v-if="approvalResults == 3"
-              title="报名申请审核已通过"
-              type="success"
-              center
-              show-icon
-              :closable="false"
-            />
-            <div style="cursor: pointer" @click="returnEnroll">
-              <el-alert
-                v-if="approvalResults == 4"
-                title="报名申请审核不通过，请重新报名"
-                type="error"
-                center
-                show-icon
-                :closable="false"
-              />
+            <div v-if="approvalResults == 2">
+              <el-alert type="warning" center show-icon :closable="false">
+                <template slot="title">
+                  <span style="color: rgba(0, 0, 0, 0.88)"
+                    >报名申请正在审核中</span
+                  >
+                </template>
+              </el-alert>
+            </div>
+            <div v-if="approvalResults == 3">
+              <el-alert type="success" center show-icon :closable="false">
+                <template slot="title">
+                  <span style="color: rgba(0, 0, 0, 0.88)"
+                    >报名申请审核已通过</span
+                  >
+                </template>
+              </el-alert>
+            </div>
+            <div
+              v-if="approvalResults == 4"
+              style="cursor: pointer"
+              @click="returnEnroll"
+            >
+              <el-alert type="error" center show-icon :closable="false">
+                <template slot="title">
+                  <span style="color: rgba(0, 0, 0, 0.88)"
+                    >报名申请审核不通过，请</span
+                  >
+                  <span style="color: #0078fc">重新报名</span>
+                </template>
+              </el-alert>
             </div>
           </div>
           <div style="text-align: center">
@@ -162,8 +169,14 @@
           </div>
           <div class="label">成绩单</div>
           <div class="transcript">
-            <el-button class="btn btn-long" type="success" @click="onDownload"
-              >成 绩 下 载</el-button
+            <el-button
+              class="btn btn-long"
+              :class="{ 'btn-disabled': isDownloadDisabled }"
+              type="success"
+              icon="el-icon-download"
+              :disabled="isDownloadDisabled"
+              @click="onDownload"
+              >成绩下载</el-button
             >
           </div>
           <div class="label">学习进度</div>
@@ -205,10 +218,12 @@
     <NewEmployeeGuideDialog
       :visible.sync="guideDialogVisible"
       @close="guideDialogVisible = false"
+      :showBtn="false"
     />
     <!-- 转正流程图弹窗 -->
     <el-dialog
       :visible.sync="chartVisible"
+      title="转正流程示意图"
       :close-on-click-modal="false"
       @close="chartVisible = false"
     >
@@ -217,6 +232,8 @@
         <img width="100%" src="../../assets/images/flowchart.png" alt="" />
       </div>
     </el-dialog>
+    <!-- 自定义信息提示 -->
+    <CustomInfoMessage ref="customMessage" />
   </div>
 </template>
 
@@ -225,6 +242,7 @@ import portalHeader from "@/components/PortalHeader.vue";
 import portalFooter from "@/components/PortalFooter.vue";
 import portalFloatTools from "@/components/PortalFloatTools.vue";
 import NewEmployeeGuideDialog from "@/components/NewEmployeeGuideDialog.vue";
+import CustomInfoMessage from "@/components/CustomInfoMessage.vue";
 import { mapGetters } from "vuex";
 import {
   getWelcomeData,
@@ -232,6 +250,7 @@ import {
   getStuProjectProcess,
   downloadSocialRecruitReport,
   getSzxygProjectInfo,
+  enrollRequest,
 } from "@/api/new-employee/newEmployee";
 import { start } from "nprogress";
 
@@ -242,13 +261,14 @@ export default {
     portalFooter,
     portalFloatTools,
     NewEmployeeGuideDialog,
+    CustomInfoMessage,
   },
   data() {
     return {
       flag: "all",
       status: "all",
       page: 1,
-      pageSize: 10,
+      pageSize: 20,
       total: 0,
       loading: false,
       projectId: "",
@@ -276,6 +296,12 @@ export default {
   },
   computed: {
     ...mapGetters(["userInfo"]),
+    // 判断下载按钮是否应该禁用
+    isDownloadDisabled() {
+      // 只有在审核通过(3)且学习进度为100时才可下载
+      // 其他情况（报名失败1、审核中2、审核失败4、进度未到100）都禁用
+      return this.approvalResults != 3 || this.progressRing.total != 100;
+    },
   },
   methods: {
     async initIds() {
@@ -343,24 +369,24 @@ export default {
       );
     },
     async onDownload() {
-      if (!this.projectId || !this.studentId) {
-        this.$message.warning("缺少项目信息或学员信息");
-        return;
-      }
+      // if (!this.projectId || !this.studentId) {
+      //   this.$message.warning("缺少项目信息或学员信息");
+      //   return;
+      // }
       if (this.approvalResults != 2) {
-        this.$message.warning(
-          "您的报名正在审核中，无法下载成绩单，请审核通过后下载"
-        );
+        // this.$refs.customMessage.show(
+        //   "您的报名正在审核中，无法下载成绩单，请审核通过后下载"
+        // );
         return;
       }
       if (this.approvalResults != 4) {
-        this.$message.warning(
-          "请您重新报名，重新报名不影响当前学习进度，请在审核通过后下载成绩单"
-        );
+        // this.$refs.customMessage.show(
+        //   "请您重新报名，重新报名不影响当前学习进度，请在审核通过后下载成绩单"
+        // );
         return;
       }
       if (this.progressRing.total != 100) {
-        this.$message.warning("请您完成学习课程后下载成绩单");
+        // this.$message.warning("请您完成学习课程后下载成绩单");
         return;
       }
       try {
@@ -375,15 +401,22 @@ export default {
         this.$message.error("下载失败");
       }
     },
-    returnEnroll() {
-      this.$router.push("/new-employee/welcome");
+    async returnEnroll() {
+      // this.$router.push("/new-employee/welcome");
+      const res = await enrollRequest();
+      if (res.data.sendToOaSuccess != 0) {
+        this.$refs.customMessage.show("报名失败，请联系XXXX，联系方式：XXXXXX");
+      } else {
+        this.$refs.customMessage.show("您已重新报名成功");
+        this.approvalResults = 2;
+      }
     },
   },
   async mounted() {
     const res = await getWelcomeData();
     // 社招新员工项目标识：0否，1是
     if (res.data.approvalResults == 1) {
-      this.$message.error("未报名或报名失败，请前往报名页面进行报名");
+      this.$refs.customMessage.show("未报名或报名失败，请前往报名页面进行报名");
       this.$router.push("/new-employee/welcome");
     }
     // 1报名失败、2审核中、3审核通过、4审核失败
@@ -448,7 +481,7 @@ export default {
 
 /* 筛选条 */
 .filters {
-  padding: 8px 12px;
+  padding: 0px 12px 8px;
   display: flex;
   gap: 24px;
   align-items: center;
@@ -600,12 +633,6 @@ export default {
   text-align: right;
   font-size: 14px;
 }
-.item-right.link {
-  color: #0f80ff;
-}
-.item-right.done {
-  color: #8a8f99;
-}
 .item-right.score {
   font-weight: 700;
 }
@@ -665,7 +692,7 @@ export default {
 
 /* 单选按钮组胶囊皮肤（替代 Tabs），保持外观一致 */
 .pill-radios {
-  padding-top: 8px;
+  padding-top: 20px;
 }
 .pill-radios >>> .el-radio-button__inner {
   background: #f3f5f8;
@@ -733,8 +760,8 @@ export default {
   font-weight: 600;
 }
 .btn-outline {
-  background: #ffffff;
-  color: rgba(0, 120, 252, 1);
+  background: rgba(0, 120, 252, 1);
+  color: #fff;
   border: 1px solid rgba(0, 120, 252, 1);
   width: 120px;
 }
@@ -754,6 +781,18 @@ export default {
   color: #ffffff;
   box-shadow: 0 2px 8px rgba(26, 192, 127, 0.35);
 }
+.btn-long.btn-disabled,
+.btn-long:disabled {
+  background: #cccccc !important;
+  color: #ffffff !important;
+  cursor: not-allowed !important;
+  box-shadow: none !important;
+}
+.btn-long.btn-disabled:hover,
+.btn-long:disabled:hover {
+  background: #cccccc !important;
+  transform: none !important;
+}
 
 .progress-circles {
   display: flex;