feat[wwf]:教师端考试结果详情抽屉与弹窗

package.json

@@ -30,7 +30,8 @@
     "vue-router": "^4.0.12",
     "vue3-pdfjs": "^0.1.6",
     "vuex": "^4.0.2",
-    "worker-loader": "^3.0.8"
+    "worker-loader": "^3.0.8",
+    "yarn": "^1.22.19"
   },
   "devDependencies": {
     "@babel/core": "^7.20.2",

src/views/CoderPage/ExamDetail.vue

@@ -213,8 +213,8 @@
             </template>
           </el-table-column>
           <el-table-column prop="score" label="成绩" width="150"/>
-<!--          <el-table-column label="操作" width="150">-->
-<!--            <template #default="scope">-->
+          <el-table-column label="操作" width="150">
+            <template #default="scope">
 <!--              <el-button-->
 <!--                type="text"-->
 <!--                @click="-->
@@ -226,9 +226,15 @@
 <!--              >-->
 <!--                详情-->
 <!--              </el-button>-->
-<!--            </template>-->
-<!--          </el-table-column>-->
-          <el-table-column label="详情" type="expand">
+<!--              <el-divider direction="vertical"/>-->
+              <el-button type="text"
+                         @click="stopRecord(scope.row.id)"
+                         class="commit-stop-button">
+                停止
+              </el-button>
+            </template>
+          </el-table-column>
+          <el-table-column type="expand">
             <template #default="scope">
               <CommitBoard :commit-id="scope.row.id" :exam-id="$route.params.examId"></CommitBoard>
             </template>
@@ -304,8 +310,13 @@
             <el-table-column label="操作" width="200">
               <template #default="scope">
                 <el-button type="text" @click="jumpToCodemirror(scope.row.owner)">源码</el-button>
-                <el-divider direction="vertical"/>
-                <el-button type="text" @click="jumpToResultDetail(scope.row.id)">详情</el-button>
+<!--                |-->
+<!--                <el-button type="text" @click="jumpToResultDetail(scope.row.id)">详情</el-button>-->
+              </template>
+            </el-table-column>
+            <el-table-column type="expand">
+              <template #default="scope">
+                <ResultDetail  :resultId="scope.row.id" :exam-id="$route.params.examId"></ResultDetail>
               </template>
             </el-table-column>
           </el-table>
@@ -420,6 +431,7 @@ import {
 import {mapGetters} from "vuex";
 import PageHeader from "../../components/PageHeader.vue";
 import CommitBoard from "@/views/CoderPage/ResultPage/CommitPage/components/CommitBoard.vue";
+import ResultDetail from "@/views/CoderPage/ResultPage/ResultDetail";
 import Echarts from "@/views/CoderPage/ResultPage/Echarts.vue";
 import {ElMessage} from "element-plus";
 import Clipboard from "clipboard";
@@ -430,7 +442,8 @@ export default {
   components: {
     PageHeader,
     Echarts,
-    CommitBoard
+    CommitBoard,
+    ResultDetail
   },
   props: {},
   data() {
@@ -773,6 +786,11 @@ export default {
     jumpToResultDetail(resultId) {
       this.$router.push(`${this.$route.path}/result/${resultId}`);
     },
+    // stop coder record
+    async stopRecord(recordId){
+       const res = (await this.$apis.stopRecord(recordId)).data;
+       console.log(res);
+    }
   }
 };
 </script>
@@ -829,8 +847,11 @@ export default {
 //  border-bottom: 1px solid #afaaaa;
 //}
 
-:deep(.el-table__expanded-cell[class*=cell]){
-  padding: 0;
-  box-shadow: inset 0px 0px 5px 0px var(--el-color-info);
+.commit-stop-button{
+  color: var(--el-color-danger)
+}
+
+.commit-stop-button:hover{
+  opacity: 75%;
 }
 </style>

src/views/CoderPage/ResultPage/CommitPage/CommitDetail.vue

@@ -9,7 +9,7 @@
           <span style="font-size: 36px;font-family: 'Inter',sans-serif">提交详情</span>
         </page-header>
       </template>
-      <CommitBoard :commit-id="commitId"></CommitBoard>
+      <CommitBoard :commit-id="commitId" :exam-id="examId"></CommitBoard>
     </el-card>
   </div>
 </template>
@@ -20,15 +20,25 @@ import PageHeader from "@/components/PageHeader.vue";
 export default {
   name: "CommitDetail",
   components: {PageHeader, CommitBoard},
+  props:{
+    commitId:{
+      type: Number,
+      required: true
+    },
+    examId: {
+      type:Number,
+      required: true
+    }
+  },
   data() {
     return {
 
     };
   },
   computed: {
-    commitId() {
-      const {commitId} = this.$route.params;
-      return commitId;
+    examId(){
+      const {examId} = this.$route.params;
+      return examId;
     }
   },
   mounted() {

src/views/CoderPage/ResultPage/CommitPage/components/CommitBoard.vue

@@ -55,7 +55,7 @@
     </el-table>
   </el-card>
 
-  <el-dialog width="70%" v-model="recordDetailVisible" title="运行详情">
+  <el-dialog width="80%" v-model="recordDetailVisible" title="运行详情">
     <RecordDetail :exam-id="this.examId" :record-id="this.selectedRecordId"></RecordDetail>
   </el-dialog>
 

src/views/CoderPage/ResultPage/ResultDetail.vue

@@ -27,7 +27,7 @@
             <el-button
                 type="primary"
                 size="mini"
-                @click="$router.push(`${$route.path}/commit/${scope.row.id}`)"
+                @click="openCommitDetail(scope.row.id)"
             >详情</el-button
             >
           </template>
@@ -35,20 +35,38 @@
       </el-table>
     </el-card>
   </div>
+
+  <el-dialog width="80%" v-model="commitDetailVisible" title="运行详情">
+    <CommitDetail :commit-id="this.commitId" :exam-id="this.examId"></CommitDetail>
+  </el-dialog>
+
 </template>
 
 <script>
 import {ElMessage} from "element-plus";
 import PageHeader from "@/components/PageHeader.vue";
+import CommitDetail from "@/views/CoderPage/ResultPage/CommitPage/CommitDetail";
 import {formatTimestamp} from "@/utils/coder-utils";
 
 export default {
   name: "ResultDetail",
-  components: {PageHeader},
+  components: {PageHeader,CommitDetail},
+  props: {
+    resultId: {
+      type: Number,
+      required: true
+    },
+    examId: {
+      type: Number,
+      required: true
+    },
+  },
   data(){
     return {
       result: {},
       user: {},
+      commitDetailVisible:false,
+      commitId:0
     };
   },
   mounted() {
@@ -57,8 +75,8 @@ export default {
   methods: {
     formatTimestamp,
     fetchData() {
-      const {resultId} = this.$route.params;
-      this.$apis.getResultByResultId(resultId)
+      console.log("resultId",this.resultId);
+      this.$apis.getResultByResultId(this.resultId)
           .then(_res => {
             this.result = _res.data.res ?? {};
             this.user = this.result.owner;
@@ -68,6 +86,10 @@ export default {
     },
     getBack() {
       this.$router.go(-1);
+    },
+    openCommitDetail(id){
+      this.commitId = id;
+      this.commitDetailVisible=true;
     }
   }
 };
@@ -75,7 +97,7 @@ export default {
 
 <style lang="scss" scoped>
 .result-container {
-  margin: 40px 10vw 80px 10vw;
-  min-height: calc(100vh - 100px);
+  margin: 10px 0 10px 0;
+  //min-height: calc(100vh - 400px);
 }
 </style>