fix: 首页优化

src/assets/styles/base.scss

@@ -508,6 +508,11 @@ body {
 }
 
 .tab-btns {
+  height: 36px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+
   .el-button {
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;

src/assets/styles/home.scss

@@ -461,6 +461,7 @@
 
     &-right {
       flex-grow: 2;
+      overflow: hidden;
     }
   }
 

src/components/base/GradeSelect.vue

@@ -46,7 +46,7 @@ export default {
   methods: {
     getOptions() {
       const options = [];
-      for (let i = 24; i < 31; i++) {
+      for (let i = 20; i < 30; i++) {
         options.push({
           name: `${i}级`,
           code: i,

src/modules/exam/components/WaitTaskAnalysis.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="wait-task-analysis">
     <div class="part-box part-box-pad">
-      <el-table ref="TableList" :data="dataList" height="127">
+      <el-table ref="TableList" :data="dataList" :height="tableHeight">
         <el-table-column
           type="index"
           label="序号"
@@ -11,11 +11,22 @@
         <el-table-column
           prop="semesterName"
           label="学期"
-          min-width="210"
+          min-width="160"
+          show-overflow-tooltip
         ></el-table-column>
-        <el-table-column prop="examName" label="考试" min-width="160">
+        <el-table-column
+          prop="examName"
+          label="考试"
+          min-width="160"
+          show-overflow-tooltip
+        >
         </el-table-column>
-        <el-table-column prop="courseCode" label="课程(代码)" min-width="200">
+        <el-table-column
+          prop="courseCode"
+          label="课程(代码)"
+          min-width="260"
+          show-overflow-tooltip
+        >
           <span slot-scope="scope">
             {{ scope.row.courseName }}（{{ scope.row.courseCode }}）
           </span>
@@ -33,7 +44,7 @@
           </template>
         </el-table-column>
       </el-table>
-      <div class="part-page">
+      <div v-if="!isOnePage" class="part-page">
         <el-pagination
           background
           layout="total, prev, pager, next, jumper"
@@ -57,7 +68,7 @@
 </template>
 
 <script>
-import { mapMutations, mapActions } from "vuex";
+import { mapState, mapActions } from "vuex";
 import { analysisWaitTaskListPage } from "../api";
 import ModifyBaseConfig from "../../analysis/components/ModifyBaseConfig.vue";
 
@@ -73,25 +84,35 @@ export default {
       curTask: {},
     };
   },
+  computed: {
+    ...mapState("exam", ["waitTask"]),
+    isOnePage() {
+      return this.waitTask.analysis <= 3;
+    },
+    pageSize() {
+      return this.isOnePage ? 3 : 2;
+    },
+    tableHeight() {
+      return this.isOnePage ? 174 : 127;
+    },
+  },
   mounted() {
     this.getList();
   },
   methods: {
-    ...mapMutations("exam", ["updateWaitTask"]),
     ...mapActions("exam", ["updateWaitTaskCount"]),
-    updateList() {
-      this.getList();
-      this.updateWaitTaskCount();
+    async updateList() {
+      await this.updateWaitTaskCount();
+      await this.getList();
     },
     async getList() {
       const datas = {
         pageNumber: this.current,
-        pageSize: this.size,
+        pageSize: this.pageSize,
       };
       const data = await analysisWaitTaskListPage(datas);
       this.dataList = data.records;
       this.total = data.total;
-      this.updateWaitTask({ analysis: this.total });
     },
     toPage(page) {
       this.current = page;

src/modules/exam/components/WaitTaskFlow.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="wait-task-flow">
     <div class="part-box part-box-pad">
-      <el-table ref="TableList" :data="dataList" height="127">
+      <el-table ref="TableList" :data="dataList" :height="tableHeight">
         <el-table-column
           type="index"
           label="序号"
@@ -11,19 +11,25 @@
         <el-table-column
           prop="paperNumber"
           label="试卷编号"
-          min-width="160"
+          min-width="200"
+          show-overflow-tooltip
         ></el-table-column>
-        <el-table-column prop="type" label="课程（代码）" min-width="200">
+        <el-table-column
+          prop="type"
+          label="课程（代码）"
+          min-width="260"
+          show-overflow-tooltip
+        >
           <template slot-scope="scope">
             {{ scope.row.courseName }}（{{ scope.row.courseCode }}）
           </template>
         </el-table-column>
         <el-table-column
-          prop="cardRuleName"
-          label="题卡规则"
-          min-width="160"
-        ></el-table-column>
-        <el-table-column prop="taskName" label="流程节点" min-width="160">
+          prop="taskName"
+          label="流程节点"
+          width="120"
+          show-overflow-tooltip
+        >
           <span slot-scope="scope">
             {{ scope.row.taskName | flowTaskNameFilter }}
           </span>
@@ -46,7 +52,7 @@
           </template>
         </el-table-column>
       </el-table>
-      <div class="part-page">
+      <div v-if="!isOnePage" class="part-page">
         <el-pagination
           background
           layout="total, prev, pager, next, jumper"
@@ -70,7 +76,7 @@
 </template>
 
 <script>
-import { mapMutations, mapActions } from "vuex";
+import { mapState, mapActions } from "vuex";
 import { waitExamTaskListPage } from "../api";
 import ModifyTaskApply from "./taskApply/ModifyTaskApply.vue";
 
@@ -86,25 +92,35 @@ export default {
       curTask: {},
     };
   },
+  computed: {
+    ...mapState("exam", ["waitTask"]),
+    isOnePage() {
+      return this.waitTask.flow <= 3;
+    },
+    pageSize() {
+      return this.isOnePage ? 3 : 2;
+    },
+    tableHeight() {
+      return this.isOnePage ? 174 : 127;
+    },
+  },
   mounted() {
     this.getList();
   },
   methods: {
-    ...mapMutations("exam", ["updateWaitTask"]),
     ...mapActions("exam", ["updateWaitTaskCount"]),
-    updateList() {
-      this.getList();
-      this.updateWaitTaskCount();
+    async updateList() {
+      await this.updateWaitTaskCount();
+      await this.getList();
     },
     async getList() {
       const datas = {
         pageNumber: this.current,
-        pageSize: this.size,
+        pageSize: this.pageSize,
       };
       const data = await waitExamTaskListPage(datas);
       this.dataList = data.records;
       this.total = data.total;
-      this.updateWaitTask({ flow: this.total });
     },
     toPage(page) {
       this.current = page;

src/modules/exam/components/WaitTaskMark.vue

@@ -1,32 +1,34 @@
 <template>
   <div class="wait-task-mark">
     <div class="part-box part-box-pad">
-      <el-table ref="TableList" :data="dataList" height="127">
+      <el-table ref="TableList" :data="dataList" :height="tableHeight">
         <el-table-column
           type="index"
           label="序号"
           width="70"
           :index="indexMethod"
         ></el-table-column>
-        <el-table-column prop="courseName" label="课程（代码）" min-width="260">
+        <el-table-column
+          prop="courseName"
+          label="课程（代码）"
+          min-width="300"
+          show-overflow-tooltip
+        >
           <template slot-scope="scope">
             {{ scope.row.courseName }}（{{ scope.row.courseCode }}）
           </template>
         </el-table-column>
-        <el-table-column
-          prop="openCollege"
-          label="开课学院"
-          min-width="160"
-        ></el-table-column>
         <el-table-column
           prop="paperNumber"
           label="试卷编号"
-          width="160"
+          min-width="200"
+          show-overflow-tooltip
         ></el-table-column>
         <el-table-column
           prop="groupQuestions"
           label="评阅题目"
-          min-width="200"
+          width="115"
+          show-overflow-tooltip
         ></el-table-column>
         <el-table-column
           prop="markedCount"
@@ -38,13 +40,13 @@
           label="待评"
           width="80"
         ></el-table-column>
-        <el-table-column prop="percent" label="评卷进度" width="100">
+        <el-table-column prop="percent" label="评卷进度" width="90">
           <span slot-scope="scope"> {{ scope.row.percent || 0 }}%</span>
         </el-table-column>
         <el-table-column
           class-name="action-column"
           label="操作"
-          width="140"
+          width="100"
           fixed="right"
         >
           <template slot-scope="scope">
@@ -57,7 +59,7 @@
           </template>
         </el-table-column>
       </el-table>
-      <div class="part-page">
+      <div v-if="!isOnePage" class="part-page">
         <el-pagination
           background
           layout="total, prev, pager, next, jumper"
@@ -74,7 +76,7 @@
 </template>
 
 <script>
-import { mapActions, mapMutations } from "vuex";
+import { mapState, mapActions } from "vuex";
 import markMinxin from "@/modules/mark/markMinxin";
 import { markWaitTaskListPage } from "../api";
 
@@ -90,6 +92,18 @@ export default {
       curTask: {},
     };
   },
+  computed: {
+    ...mapState("exam", ["waitTask"]),
+    isOnePage() {
+      return this.waitTask.mark <= 3;
+    },
+    pageSize() {
+      return this.isOnePage ? 3 : 2;
+    },
+    tableHeight() {
+      return this.isOnePage ? 174 : 127;
+    },
+  },
   mounted() {
     window.addEventListener("focus", this.updateList);
     this.getList();
@@ -98,21 +112,19 @@ export default {
     window.removeEventListener("focus", this.updateList);
   },
   methods: {
-    ...mapMutations("exam", ["updateWaitTask"]),
     ...mapActions("exam", ["updateWaitTaskCount"]),
-    updateList() {
-      this.getList();
-      this.updateWaitTaskCount();
+    async updateList() {
+      await this.updateWaitTaskCount();
+      await this.getList();
     },
     async getList() {
       const datas = {
         pageNumber: this.current,
-        pageSize: this.size,
+        pageSize: this.pageSize,
       };
       const data = await markWaitTaskListPage(datas);
       this.dataList = data.records;
       this.total = data.total;
-      this.updateWaitTask({ mark: this.total });
     },
     toPage(page) {
       this.current = page;

src/modules/exam/components/WaitTaskStmms.vue

@@ -1,14 +1,19 @@
 <template>
   <div class="wait-task-stmms">
     <div class="part-box part-box-pad">
-      <el-table ref="TableList" :data="dataList" height="127">
+      <el-table ref="TableList" :data="dataList" :height="tableHeight">
         <el-table-column
           type="index"
           label="序号"
           width="70"
           :index="indexMethod"
         ></el-table-column>
-        <el-table-column prop="courseName" label="课程（代码）" min-width="200">
+        <el-table-column
+          prop="courseName"
+          label="课程（代码）"
+          min-width="300"
+          show-overflow-tooltip
+        >
           <span slot-scope="scope">
             {{ scope.row.courseName }}（{{ scope.row.courseCode }}）
           </span>
@@ -16,17 +21,18 @@
         <el-table-column
           prop="paperNumber"
           label="试卷编号"
-          min-width="160"
+          min-width="220"
+          show-overflow-tooltip
         ></el-table-column>
         <el-table-column
           prop="paperType"
           label="试卷类型"
-          width="100"
+          width="90"
         ></el-table-column>
         <el-table-column
           class-name="action-column"
           label="操作"
-          width="160"
+          width="120"
           fixed="right"
         >
           <template slot-scope="scope">
@@ -40,7 +46,7 @@
           </template>
         </el-table-column>
       </el-table>
-      <div class="part-page">
+      <div v-if="!isOnePage" class="part-page">
         <el-pagination
           background
           layout="total, prev, pager, next, jumper"
@@ -63,7 +69,7 @@
 </template>
 
 <script>
-import { mapActions, mapMutations } from "vuex";
+import { mapState, mapActions } from "vuex";
 import { stmmsWaitTaskListPage } from "../api";
 import ModifyMarkParams from "../../mark/components/markParam/ModifyMarkParams";
 
@@ -82,25 +88,35 @@ export default {
       curMarkLeaders: [],
     };
   },
+  computed: {
+    ...mapState("exam", ["waitTask"]),
+    isOnePage() {
+      return this.waitTask.stmms <= 3;
+    },
+    pageSize() {
+      return this.isOnePage ? 3 : 2;
+    },
+    tableHeight() {
+      return this.isOnePage ? 174 : 127;
+    },
+  },
   mounted() {
     this.getList();
   },
   methods: {
-    ...mapMutations("exam", ["updateWaitTask"]),
     ...mapActions("exam", ["updateWaitTaskCount"]),
-    updateList() {
-      this.getList();
-      this.updateWaitTaskCount();
+    async updateList() {
+      await this.updateWaitTaskCount();
+      await this.getList();
     },
     async getList() {
       const datas = {
         pageNumber: this.current,
-        pageSize: this.size,
+        pageSize: this.pageSize,
       };
       const data = await stmmsWaitTaskListPage(datas);
       this.dataList = data.records;
       this.total = data.total;
-      this.updateWaitTask({ stmms: this.total });
     },
     toPage(page) {
       this.current = page;

src/modules/exam/store.js

@@ -1,4 +1,5 @@
 import {
+  auditedTaskCount,
   waitExamTaskCount,
   stmmsWaitTaskCount,
   analysisWaitTaskCount,
@@ -8,7 +9,10 @@ import {
 import { calcSum } from "@/plugins/utils";
 
 const state = {
-  waitTaskCount: 0,
+  waitSummary: {
+    waitCount: 0,
+    doneCount: 0,
+  },
   waitTask: {
     flow: 0,
     stmms: 0,
@@ -30,8 +34,8 @@ const state = {
 };
 
 const mutations = {
-  setWaitTaskCount(state, waitTaskCount) {
-    state.waitTaskCount = waitTaskCount;
+  setWaitSummary(state, waitSummary) {
+    state.waitSummary = waitSummary;
   },
   setWaitTask(state, waitTask) {
     state.waitTask = waitTask;
@@ -39,12 +43,6 @@ const mutations = {
   setWaitTypes(state, waitTypes) {
     state.waitTypes = waitTypes;
   },
-  updateWaitTask(state, data) {
-    const waitTask = Object.assign({}, state.waitTask, data);
-    state.waitTask = waitTask;
-    const count = calcSum(Object.values(state.waitTask));
-    state.waitTaskCount = count;
-  },
   // createExamAndPrintTask
   updateTaskInfo(state, data) {
     Object.entries(data).forEach(([key, val]) => {
@@ -112,8 +110,9 @@ const actions = {
 
     commit("setWaitTask", waitTask);
 
-    const count = calcSum(counts);
-    commit("setWaitTaskCount", count || 0);
+    const waitCount = calcSum(counts);
+    const doneCount = await auditedTaskCount();
+    commit("setWaitSummary", { doneCount, waitCount });
   },
   async addPreviewLog({ state, commit }, { attachment, type }) {
     if (!state.taskStatus.IS_AUDIT) return;

src/modules/exam/views/ExamTaskManage.vue

@@ -242,7 +242,6 @@ import BatchAddExamTask from "../components/BatchAddExamTask.vue";
 import { ABLE_TYPE, EXAM_TASK_STATUS } from "@/constants/enumerate";
 import pickerOptions from "@/constants/datePickerOptions";
 import { examTaskListPage, ableExamTask, deleteExamTask } from "../api";
-import { mapActions } from "vuex";
 
 export default {
   name: "exam-task-manage",
@@ -290,7 +289,6 @@ export default {
     },
   },
   methods: {
-    ...mapActions("exam", ["updateWaitTaskCount"]),
     async getList() {
       if (!this.checkPrivilege("list", "list")) return;
       this.multipleSelection = [];
@@ -376,7 +374,6 @@ export default {
     },
     taskModified() {
       this.getList();
-      this.updateWaitTaskCount();
     },
     async toBatchDelete() {
       if (!this.multipleSelection.length) {

src/modules/exam/views/TaskApplyManage.vue

@@ -225,7 +225,6 @@ import {
   cancelOrRestartTaskApply,
   deleteTaskApply,
 } from "../api";
-import { mapActions } from "vuex";
 
 export default {
   name: "task-apply-manage",
@@ -275,7 +274,6 @@ export default {
     this.initData();
   },
   methods: {
-    ...mapActions("exam", ["updateWaitTaskCount"]),
     async initData() {
       const cachePageInfo = this.$ls.get("cachePageInfo");
       if (cachePageInfo) {
@@ -343,7 +341,6 @@ export default {
     },
     taskModified() {
       this.getList();
-      this.updateWaitTaskCount(this.userRoles);
     },
     toAddExamAndPrintTask() {
       this.$refs.CreateExamAndPrintTask.open();

src/modules/exam/views/TaskReviewManage.vue

@@ -272,7 +272,6 @@ import {
   batchUpdateTaskReview,
   reviewSampleDataExport,
 } from "../api";
-import { mapActions } from "vuex";
 
 export default {
   name: "task-review-manage",
@@ -338,7 +337,6 @@ export default {
     },
   },
   methods: {
-    ...mapActions("exam", ["updateWaitTaskCount"]),
     async getList() {
       const valid =
         (this.AUDITED && this.checkPrivilege("list", "reviewList")) ||
@@ -462,7 +460,6 @@ export default {
     },
     taskModified() {
       this.getList();
-      this.updateWaitTaskCount();
     },
     toDataTask() {
       this.$refs.DataTaskDialog.open();

src/views/Home.vue

@@ -184,7 +184,6 @@ export default {
   },
   methods: {
     initData() {
-      this.updateWaitTypes();
       if (this.IS_HOME_PAGE) {
         this.curMenu = { url: HOME_PAGE_ROUTE };
         return;
@@ -211,27 +210,6 @@ export default {
 
       return firstRouteName;
     },
-    updateWaitTypes() {
-      const filterFunc = {
-        flow: () => {
-          return (
-            this.checkPrivilege("link", "edit", "TaskApplyManage") ||
-            this.checkPrivilege("link", "notReviewEdit", "TaskReviewManage")
-          );
-        },
-        stmms: () => {
-          return this.checkPrivilege("link", "MarkParamSetting", "MarkSetting");
-        },
-        analysis: () => {
-          return this.checkPrivilege("link", "window", "DataInitManage");
-        },
-        mark: () => {
-          return this.checkPrivilege("link", "Marking", "MarkEntrance");
-        },
-      };
-      const waitTypes = Object.keys(filterFunc).filter((k) => filterFunc[k]());
-      this.$store.commit("exam/setWaitTypes", waitTypes);
-    },
     menuChange(menu) {
       this.curMenu = menu;
       this.curSubMenuNames = this.privileges

src/views/home-page/HomeGuide.vue

@@ -307,18 +307,18 @@ export default {
         // 电子交卷 -----
         // 选择/上传试卷
         uploadPaper: {
-          authentic: "ExamTaskManage",
-          toLink: "ExamTaskManage",
+          authentic: "TaskApplyManage",
+          toLink: "TaskApplyManage",
         },
         // 选择通卡/设计答题卡
         createCard: {
-          authentic: "ExamTaskManage",
-          toLink: "ExamTaskManage",
+          authentic: "TaskApplyManage",
+          toLink: "TaskApplyManage",
         },
         // 选择审核人提交
         selectApproveUser: {
-          authentic: "ExamTaskManage",
-          toLink: "ExamTaskManage",
+          authentic: "TaskApplyManage",
+          toLink: "TaskApplyManage",
         },
 
         // 印刷&扫描 -----

src/views/home-page/HomePage.vue

@@ -6,7 +6,7 @@
           <h4 class="tab-summary-title">待办任务</h4>
           <div class="tab-summary-content">
             <i class="icon icon-wait-task"></i>
-            <span class="tab-summary-cont">{{ summary.waitTaskCount }}</span>
+            <span class="tab-summary-cont">{{ waitSummary.waitCount }}</span>
           </div>
         </div>
 
@@ -14,12 +14,12 @@
           <h4 class="tab-summary-title">已办任务</h4>
           <div class="tab-summary-content">
             <i class="icon icon-done-task"></i>
-            <span class="tab-summary-cont">{{ summary.doneTaskCount }}</span>
+            <span class="tab-summary-cont">{{ waitSummary.doneCount }}</span>
           </div>
         </div>
       </div>
       <div class="hp-top-right hp-task">
-        <wait-task></wait-task>
+        <wait-task v-if="dataReady"></wait-task>
       </div>
     </div>
 
@@ -32,7 +32,6 @@
 
 <script>
 import { mapState, mapActions } from "vuex";
-import { auditedTaskCount } from "@/modules/exam/api";
 import WaitTask from "@/modules/exam/views/WaitTask.vue";
 import HomeGuide from "./HomeGuide.vue";
 
@@ -44,25 +43,42 @@ export default {
   },
   data() {
     return {
-      summary: {
-        waitTaskCount: 0,
-        doneTaskCount: 0,
-      },
+      dataReady: false,
     };
   },
   computed: {
-    ...mapState("exam", ["waitTaskCount"]),
+    ...mapState("exam", ["waitSummary"]),
   },
   created() {
-    this.getWaitTaskData();
+    this.initData();
   },
   methods: {
     ...mapActions("exam", ["updateWaitTaskCount"]),
-    async getWaitTaskData() {
-      const doneTaskCount = await auditedTaskCount();
-      this.summary.doneTaskCount = doneTaskCount || 0;
+    async initData() {
+      this.updateWaitTypes();
       await this.updateWaitTaskCount();
-      this.summary.waitTaskCount = this.waitTaskCount;
+      this.dataReady = true;
+    },
+    updateWaitTypes() {
+      const filterFunc = {
+        flow: () => {
+          return (
+            this.checkPrivilege("link", "edit", "TaskApplyManage") ||
+            this.checkPrivilege("link", "notReviewEdit", "TaskReviewManage")
+          );
+        },
+        stmms: () => {
+          return this.checkPrivilege("link", "MarkParamSetting", "MarkSetting");
+        },
+        analysis: () => {
+          return this.checkPrivilege("link", "window", "DataInitManage");
+        },
+        mark: () => {
+          return this.checkPrivilege("link", "Marking", "MarkEntrance");
+        },
+      };
+      const waitTypes = Object.keys(filterFunc).filter((k) => filterFunc[k]());
+      this.$store.commit("exam/setWaitTypes", waitTypes);
     },
   },
 };