档案管理详情

src/assets/styles/pages.scss

@@ -209,3 +209,45 @@
     }
   }
 }
+// record-detail-student-dialog
+.record-detail-student-dialog {
+  .el-dialog__body {
+    height: 100%;
+  }
+  .record-student {
+    &-body {
+      height: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: stretch;
+    }
+    &-action {
+      width: 300px;
+      margin: 0;
+      flex-grow: 0;
+      flex-shrink: 0;
+      padding: 20px;
+
+      .tips-info {
+        margin-top: 8px;
+      }
+    }
+    &-info {
+      p {
+        margin-bottom: 6px;
+      }
+    }
+    &-content {
+      flex-grow: 2;
+      margin: 0 20px 0 0;
+
+      .el-carousel {
+        height: 100%;
+      }
+      .el-image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}

src/modules/record/components/DataCheckDialog.vue

@@ -116,11 +116,26 @@ const initModalForm = {
 
 export default {
   name: "data-check-dialog",
+  props: {
+    model: {
+      type: String,
+      default: "undo",
+      validate: val => ["undo", "fix"].includes(val)
+    },
+    student: {
+      type: Object,
+      default() {
+        return {
+          pages: []
+        };
+      }
+    }
+  },
   components: { ImageContain },
   mixins: [timeMixin],
   data() {
     return {
-      modalIsShow: true,
+      modalIsShow: false,
       studentNameOrNo: "",
       modalForm: { ...initModalForm },
       rules: {
@@ -160,10 +175,26 @@ export default {
       curPage: { url: "" }
     };
   },
+  computed: {
+    IS_UNDO_MODEL() {
+      return this.model === "undo";
+    }
+  },
   methods: {
-    visibleChange() {
+    async visibleChange() {
       this.modalForm = { ...initModalForm };
       this.studentNameOrNo = "";
+      this.donePageList = [];
+      this.undoPageList = [];
+
+      if (this.IS_UNDO_MODEL) {
+        await this.getUndoPageList();
+      } else {
+        this.undoPageList = this.student.pages;
+      }
+
+      this.curPages = this.undoPageList.shift();
+      this.switchCurPage(0);
     },
     cancel() {
       this.modalIsShow = false;
@@ -202,10 +233,15 @@ export default {
       this.undoPageList.push(...data.records);
     },
     toNextPaper() {
-      if (this.undoPageList.length <= 3) this.getUndoPageList();
+      if (!this.undoPageList.length) {
+        this.$message.error("没有下一张！");
+        return;
+      }
 
-      this.donePageList.push({ ...this.curPages });
+      if (this.undoPageList.length <= 3 && this.IS_UNDO_MODEL)
+        this.getUndoPageList();
 
+      this.donePageList.push({ ...this.curPages });
       this.curPages = this.undoPageList.shift();
       this.switchCurPage(0);
     },

src/modules/record/components/RecordDetailStudentDialog.vue

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <el-dialog
+      class="record-detail-student-dialog page-dialog"
+      :visible.sync="modalIsShow"
+      title="查看档案详情"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      append-to-body
+      fullscreen
+      @open="visibleChange"
+    >
+      <div class="record-student-body">
+        <div class="record-student-content part-box">
+          <el-carousel height="100%" :autoplay="false" arrow="always">
+            <el-carousel-item v-for="item in 4" :key="item">
+              <h3 class="small">{{ item }}</h3>
+              <!-- <el-image :src="" fit="contain"></el-image> -->
+            </el-carousel-item>
+          </el-carousel>
+        </div>
+        <div class="record-student-action part-box">
+          <div class="record-student-info">
+            <p>
+              <span>姓名：</span><span>{{ student.studentName }}</span>
+            </p>
+            <p>
+              <span>学号：</span><span>{{ student.studentNo }}</span>
+            </p>
+            <p>
+              <span>学院：</span><span>{{ student.collegeName }}</span>
+            </p>
+            <p>
+              <span>专业：</span><span>{{ student.majorName }}</span>
+            </p>
+            <p>
+              <span>班级：</span><span>{{ student.clazzName }}</span>
+            </p>
+            <p>
+              <span>课程：</span><span>{{ student.courseName }}</span>
+            </p>
+            <p>
+              <span>任课老师：</span><span>{{ student.teacherName }}</span>
+            </p>
+            <p>
+              <span>教学班：</span><span>{{ student.teachingClazzName }}</span>
+            </p>
+          </div>
+          <el-divider></el-divider>
+          <el-button type="primary" size="small" @click="toFix">纠错</el-button>
+          <p class="tips-info tips-error">
+            注意：<br />
+            当图片里学生信息与右侧学生信息不一致时请执行纠错操作！
+          </p>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- DataCheckDialog -->
+    <data-check-dialog
+      v-if="modalIsShow"
+      ref="DataCheckDialog"
+      model="fix"
+      :student="student"
+    ></data-check-dialog>
+  </div>
+</template>
+
+<script>
+import DataCheckDialog from "./DataCheckDialog.vue";
+
+export default {
+  name: "record-detail-student-dialog",
+  components: { DataCheckDialog },
+  props: {
+    student: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      modalIsShow: false
+    };
+  },
+  methods: {
+    visibleChange() {},
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    toFix() {
+      this.$refs.DataCheckDialog.open();
+    }
+  }
+};
+</script>

src/modules/record/router.js

@@ -17,7 +17,10 @@ export default [
   {
     path: "/record/record-detail/:recordId",
     name: "RecordDetail",
-    component: RecordDetail
+    component: RecordDetail,
+    meta: {
+      relate: "RecordManage"
+    }
   },
   {
     path: "/record/data-check-manage",

src/modules/record/views/RecordDetail.vue

@@ -184,17 +184,23 @@
       :instance="curRow"
       @modified="getList"
     ></modify-record>
+    <!-- RecordDetailStudentDialog -->
+    <record-detail-student-dialog
+      ref="RecordDetailStudentDialog"
+      :student="curRow"
+    ></record-detail-student-dialog>
   </div>
 </template>
 
 <script>
 import { recordListPage } from "../api";
-import ModifyRecord from "../components/ModifyRecord.vue";
 import { BOUND_TYPE } from "../../../constants/enumerate";
+import ModifyRecord from "../components/ModifyRecord.vue";
+import RecordDetailStudentDialog from "../components/RecordDetailStudentDialog.vue";
 
 export default {
   name: "record-detail",
-  components: { ModifyRecord },
+  components: { ModifyRecord, RecordDetailStudentDialog },
   data() {
     return {
       filter: {

src/views/Home.vue

@@ -221,6 +221,8 @@ export default {
       });
     },
     getMenu() {
+      this.validRoutes = this.privileges.map(item => item.url);
+
       const privileges = this.privileges.filter(
         item => !this.HIDE_MENU_NAME.includes(item.url)
       );
@@ -233,21 +235,17 @@ export default {
       };
 
       let menus = getChildren("-1");
-      let validRoutes = [];
       const toTree = menus => {
         menus.forEach(menu => {
           const children = getChildren(menu.id);
           if (children.length) {
             menu.children = children;
             toTree(menu.children);
-          } else {
-            validRoutes.push(menu.url);
           }
         });
       };
       toTree(menus);
 
-      this.validRoutes = validRoutes;
       // console.log(JSON.stringify(menus));
       return menus;
     },
@@ -295,10 +293,10 @@ export default {
       });
     },
     updateBreadcrumbs() {
-      this.curRouteName = this.$route.name;
+      this.curRouteName = this.$route.meta?.relate || this.$route.name;
       let breadcrumbs = [];
       let curBreadcrumb = this.privileges.find(
-        item => item.url === this.curRouteName
+        item => item.url === this.$route.name
       );
       breadcrumbs.push({ ...curBreadcrumb });