zhengsongbo:新员工转正 on 2025-07-21

package.json

@@ -12,6 +12,7 @@
     "build:test": "vite build --mode test"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
     "ant-design-vue": "^3.2.15",

src/api/api.js

@@ -69,6 +69,10 @@ export const ACTIVITY = '/activity'
 
 export const STUDY_RECORD = '/stu/task/thirdTask/submit post'
 export const PROJECT_LIST = '/stu/project/list post'
+//学员指定pid的(新员工转正)项目所有相关课程的成绩单 add by zhengsongb on 2025-07-15
+export const STUDENT_PROJECT_GRADE = '/stu/project/gradeList'
+//导出某学员参加新员工转正项目的所有课程成绩单 add by zhengsongb on 2025-07-16
+export const STUDENT_PROJECT_EXPORT_GRADE = '/stu/project/exportGradeList'
 
 export const FACETEACH_SIGNUP = `/stu/project/stuFaceTeachSignUp`
 

src/components/GradeList.vue

@@ -0,0 +1,194 @@
+
+<template>
+  <div class="grade-container">
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <div class="title-text">社招新员工培训在线课程成绩单</div>
+          <el-button class="download-btn" @click="exportData" style="color: #6699CC">
+            <el-icon><Download /></el-icon>下载成绩单
+          </el-button>
+        </div>
+      </template>
+      <div>
+        <div style="font-size:16px; font-weight: bold">姓名：{{GradeList.studentName}}</div>
+        <div style="font-size:16px; font-weight: bold">学号：{{GradeList.studentNo}}</div>
+        <div style="font-size:16px; font-weight: bold">组织：{{GradeList.orgNamePath}}</div>
+      </div>
+      <el-table :data="filteredCourses" style="width: 100%"
+                :header-cell-style="headerStyle"
+                :row-class-name="tableRowClassName">
+        <el-table-column type="index" label="序号" width="80" align="center"/>
+        <el-table-column prop="courseName" label="课程名称" width="285px"/>
+        <el-table-column prop="isRequired" label="是否必修" width="120" align="center">
+          <template #default="{row}">
+            <el-tag :type="row.isRequired ? '' : 'warning'">
+              {{ row.isRequired ? '必修' : '选修' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="完成状态" width="120" align="center">
+          <template #default="{row}">
+            <el-tag :type="getStatusType(row.status)">
+              {{ statusText[row.status] }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="score" label="成绩" width="120" align="center">
+          <template #default="{row}">
+            <span :class="getScoreClass(row.score)">{{ row.score || '-' }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div>
+        <span style="color: red;">*以上课程仅为必修课</span>
+      </div>
+      <div>
+        <div style="font-size:16px; font-weight:bold;text-align: right">京东方大学&nbsp;&nbsp;&nbsp;&nbsp;</div>
+        <div style="font-size:16px; font-weight:bold;text-align: right">{{ GradeList.nowDate }}</div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+
+import { ref, computed } from 'vue';
+import { Download } from '@element-plus/icons-vue'
+import {useRequest} from "@/api/request";
+import {STUDENT_PROJECT_EXPORT_GRADE, STUDENT_PROJECT_GRADE} from "@/api/api";
+// 当前子组件接受父组件传递过来的projectId,为后续调用接口获取当前用户的指定projectId项目的所有相关课程的学习情况(含考试成绩)
+const props = defineProps({
+  projectId: {
+    type: Number,
+    required: true
+  }
+})
+/*let courses = ref([
+  { id: 1, name: '高等数学', isRequired: true, status: 1, score: 85 },
+  { id: 2, name: '大学英语', isRequired: true, status: 1, score: 78 },
+  { id: 3, name: '计算机基础', isRequired: true, status: 1, score: 92 },
+  { id: 4, name: '音乐鉴赏', isRequired: false, status: 1, score: 84 },
+  { id: 5, name: '体育', isRequired: true, status: 0, score: null },
+  { id: 6, name: '心理学', isRequired: false, status: 0, score: null },
+])*/
+let courses = ref([]);
+const {data:GradeList}=useRequest(STUDENT_PROJECT_GRADE,{"pid":props.projectId},(r)=>{
+  courses.value=r.data.gradeBoList;
+  console.log("-------------r.data.gradeBoList--------->"+r.data.gradeBoList)
+});
+
+const headerStyle = {
+  backgroundColor: '#409EFF',
+  color: '#303133',
+  fontWeight: 'bold'
+}
+
+const tableRowClassName = ({ rowIndex }) => {
+  return rowIndex % 2 === 1 ? 'stripe-row' : ''
+}
+
+const statusText = {
+  0: '未完成',
+  1: '已完成'
+}
+
+const filterType = ref('')
+const filterStatus = ref('')
+const searchName = ref('')
+
+const filteredCourses = computed(() => {
+  return courses.value.filter(course => {
+    const typeMatch = !filterType.value || 
+      (filterType.value === 'required' ? course.isRequired : !course.isRequired)
+    const statusMatch = !filterStatus.value || course.status === parseInt(filterStatus.value)
+    const nameMatch = !searchName.value || course.courseName.includes(searchName.value)
+    return typeMatch && statusMatch && nameMatch
+  })
+})
+
+function getStatusType(status) {
+  const types = ['warning', '']
+  return types[status] || ''
+}
+
+function getScoreClass(score) {
+  if (score === null) return ''
+  return score >= 90 ? 'high-score' : score >= 60 ? 'medium-score' : 'low-score'
+}
+
+//下载成绩单
+function exportData() {
+  openPostWindow(STUDENT_PROJECT_EXPORT_GRADE, GradeList);
+}
+
+function openPostWindow(url, data) {
+  const form = document.createElement('form');
+  form.action = url;
+  form.method = 'POST';
+  form.target = '_blank';
+
+  const input = document.createElement('textarea');
+  input.name = 'jsonData';
+  input.value = JSON.stringify(data);
+  console.log("---openPostWindow-----GradeList--------->"+JSON.stringify(data))
+  form.appendChild(input);
+
+  form.style.display = 'none';
+  document.body.appendChild(form);
+  form.submit();
+  document.body.removeChild(form);
+}
+</script>
+
+<style scoped>
+  .grade-container {
+    padding: 0px;
+  }
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  :deep(.el-table__header th) {
+    background-color: #E9F0FF !important;
+  }
+  :deep(.stripe-row) {
+    background-color: #f5f7fa;
+  }
+  .card-header {
+    display: flex;
+    position: relative;
+    min-height: 50px;
+  }
+  .title-text {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 24px;
+    font-weight: bold;
+  }
+  .download-btn {
+    margin-left: auto;
+  }
+  :deep(.el-card__header) {
+    padding: 5px !important; /* 调整内边距控制高度 */
+    min-height: 50px; /* 设置最小高度 */
+    border: none;
+  }
+  :deep(.el-card){
+    border: none;
+  }
+  :deep(.el-card__body){
+    padding: 0px 10px 0px 10px !important;
+  }
+  :deep(.el-card) {
+    height: 100%;
+  }
+  :deep(.is-always-shadow){
+   box-shadow: none !important;
+  }
+  :deep(.is-hover-shadow:hover) {
+     box-shadow: none !important;
+  }
+</style>