命题申请新增题卡创建

card/assets/styles/base.scss

@@ -371,7 +371,7 @@ body {
   }
 }
 .btn-primary {
-  &.el-button--text {
+  &.el-button--text:not(.is-disabled) {
     color: $--color-text-dark-1 !important;
     &:hover {
       font-weight: 600;

src/assets/styles/base.scss

@@ -371,7 +371,7 @@ body {
   }
 }
 .btn-primary {
-  &.el-button--text {
+  &.el-button--text:not(.is-disabled) {
     color: $--color-text-dark-1 !important;
     &:hover {
       font-weight: 600;

src/assets/styles/element-ui-costom.scss

@@ -224,7 +224,7 @@
   > span {
     display: inline-block;
   }
-  &.is-disabled {
+  &.is-disabled:not(.el-button--text) {
     color: $--color-text-gray-3 !important;
     background: $--color-background !important;
     border: 1px solid $--color-border !important;

src/assets/styles/pages.scss

@@ -787,3 +787,13 @@
     }
   }
 }
+// modify-card
+.modify-card {
+  .el-dialog.is-fullscreen {
+    border: none;
+    .el-dialog__body {
+      border: none;
+      padding: 0;
+    }
+  }
+}

src/modules/base/components/ModifyCardInfo.vue

@@ -230,10 +230,8 @@ export default {
       if (!valid) return;
 
       if (!this.IS_UPLOAD && !this.isEdit) {
-        this.$ls.set("prepareTcPCard", this.modalForm);
-        this.$router.push({
-          name: "CardEdit"
-        });
+        this.$emit("new-card", this.modalForm);
+        this.cancel();
         return;
       }
 

src/modules/base/views/CardManage.vue

@@ -151,8 +151,11 @@
     <modify-card-info
       ref="ModifyCardInfo"
       :instance="curCard"
+      @new-card="toNewCard"
       @modified="getList"
     ></modify-card-info>
+    <!-- ModifyCard -->
+    <modify-card ref="ModifyCard" @modified="getList"></modify-card>
   </div>
 </template>
 
@@ -161,10 +164,11 @@ import { CARD_CREATE_METHOD_TYPE } from "../../../constants/enumerate";
 import { cardListPage, deleteCard } from "../api";
 import ModifyCardInfo from "../components/ModifyCardInfo";
 import pickerOptions from "@/constants/datePickerOptions";
+import ModifyCard from "../../card/components/ModifyCard";
 
 export default {
   name: "card-manage",
-  components: { ModifyCardInfo },
+  components: { ModifyCardInfo, ModifyCard },
   data() {
     return {
       filter: {
@@ -216,14 +220,19 @@ export default {
       this.$refs.ModifyCardInfo.open();
     },
     toPreview(row) {
-      this.curCard = row;
-      this.$router.push({
-        name: "CardPreview",
-        params: {
-          cardId: row.id,
-          viewType: "view"
-        }
-      });
+      window.open(
+        this.getRouterPath({
+          name: "CardPreview",
+          params: {
+            cardId: row.id,
+            viewType: "view"
+          }
+        })
+      );
+    },
+    toNewCard(data) {
+      this.$ls.set("prepareTcPCard", data);
+      this.$refs.ModifyCard.open();
     },
     toEditCard(row) {
       this.curCard = row;
@@ -237,12 +246,13 @@ export default {
         attachmentId: row.attachmentId,
         orgIds: row.orgs.map(item => item.id)
       });
-      this.$router.push({
-        name: "CardEdit",
-        params: {
-          cardId: row.id
-        }
-      });
+      // this.$router.push({
+      //   name: "CardEdit",
+      //   params: {
+      //     cardId: row.id
+      //   }
+      // });
+      this.$refs.ModifyCard.open();
     },
     toEditInfo(row) {
       this.curCard = row;

src/modules/card/components/ModifyCard.vue

@@ -0,0 +1,45 @@
+<template>
+  <el-dialog
+    class="modify-card"
+    :visible.sync="modalIsShow"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :show-close="false"
+    append-to-body
+    fullscreen
+    destroy-on-close
+    @open="visibleChange"
+  >
+    <div slot="title"></div>
+    <div slot="footer"></div>
+
+    <card-edit is-dialog ref="CardEdit" @exit="editOver"></card-edit>
+  </el-dialog>
+</template>
+
+<script>
+import CardEdit from "../views/CardEdit";
+
+export default {
+  name: "modify-card",
+  components: { CardEdit },
+  data() {
+    return {
+      modalIsShow: false
+    };
+  },
+  methods: {
+    visibleChange() {},
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    editOver(cardId) {
+      this.cancel();
+      this.$emit("modified", cardId);
+    }
+  }
+};
+</script>

src/modules/card/router.js

@@ -17,18 +17,5 @@ export default [
     name: "CardRulePreview",
     component: () =>
       import(/* webpackChunkName: "card" */ "./views/CardRulePreview.vue")
-  },
-  {
-    path: "/card/free-edit/:cardId?",
-    name: "CardFreeEdit",
-    component: () =>
-      import(/* webpackChunkName: "card" */ "./views/CardFreeEdit.vue")
-  },
-  {
-    // viewType::: view:预览,print:打印,frame:iframe嵌套
-    path: "/card/free-preview/:cardId/:viewType",
-    name: "CardFreePreview",
-    component: () =>
-      import(/* webpackChunkName: "card" */ "./views/CardFreePreview.vue")
   }
 ];

src/modules/card/views/CardEdit.vue

@@ -32,6 +32,12 @@ export default {
     CardDesign,
     CardFreeDesign
   },
+  props: {
+    isDialog: {
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
     return {
       cardId: this.$route.params.cardId || this.$ls.get("cardId"),
@@ -59,6 +65,7 @@ export default {
   },
   mounted() {
     this.cardCreateMethod = this.prepareTcPCard.createMethod || "STANDARD";
+    this.cardId = this.cardId || this.prepareTcPCard.id;
     this.cardType = this.prepareTcPCard.type || "CUSTOM";
     if (
       !this.prepareTcPCard.examTaskId &&
@@ -266,6 +273,13 @@ export default {
           this.goback();
         })
         .catch(() => {});
+    },
+    goback() {
+      if (this.isDialog) {
+        this.$emit("exit", this.cardId);
+      } else {
+        this.$router.go(-1);
+      }
     }
   },
   beforeDestroy() {

src/modules/exam/components/createExamAndPrintTask/CreateExamAndPrintTask.vue

@@ -17,15 +17,11 @@
     <div class="apply-body" v-if="dataReady">
       <div class="apply-part">
         <h3 class="apply-part-title">命题信息</h3>
-        <info-exam-task
-          ref="InfoExamTask"
-          :datas="infos"
-          @relate-info-change="printTaskRelateInfoChange"
-        ></info-exam-task>
+        <info-exam-task ref="InfoExamTask"></info-exam-task>
       </div>
       <div class="apply-part">
         <h3 class="apply-part-title">考务信息</h3>
-        <info-print-task ref="InfoPrintTask" :datas="infos"></info-print-task>
+        <info-print-task ref="InfoPrintTask"></info-print-task>
       </div>
       <div class="apply-part">
         <h3 class="apply-part-title">流程</h3>
@@ -55,11 +51,8 @@
 </template>
 
 <script>
-import {
-  examConfigByExamIdOrgId,
-  examRuleDetail,
-  flowDetailByType
-} from "../../../base/api";
+import { mapMutations, mapState } from "vuex";
+import { examRuleDetail, flowDetailByType } from "../../../base/api";
 import { teacherSubmitTaskApply } from "../../api";
 import InfoExamTask from "./InfoExamTask";
 import InfoPrintTask from "./InfoPrintTask";
@@ -142,17 +135,26 @@ export default {
       modalIsShow: false,
       needReview: false,
       examRule: {},
-      infos: {},
+      // infos: {},
       flowList: [],
       flowInfo: {},
       loading: false,
       dataReady: false
     };
   },
+  computed: {
+    ...mapState("exam", [
+      "infoExamTask",
+      "infoExamTaskDetail",
+      "infoExamPrintPlan",
+      "infoPrintTask"
+    ])
+  },
   mounted() {
     this.getExamRule();
   },
   methods: {
+    ...mapMutations("exam", ["updateTaskInfo"]),
     async getExamRule() {
       const examRule = await examRuleDetail();
       this.examRule = examRule || {};
@@ -171,18 +173,19 @@ export default {
       }
     },
     initData() {
-      const examTaskDetail = Object.assign({}, initExamTaskDetail, {
+      const infoExamTaskDetail = Object.assign({}, initExamTaskDetail, {
         includePaper: this.examRule.includePaper,
         review: this.examRule.review,
         customCard: this.examRule.customCard
       });
 
-      this.infos = {
-        examTask: { ...initExamTask },
-        examTaskDetail,
-        printTask: { ...initPrintTask },
-        examPrintPlan: {}
+      const infos = {
+        infoExamTask: { ...initExamTask },
+        infoExamTaskDetail,
+        infoPrintTask: { ...initPrintTask },
+        infoExamPrintPlan: { ...initPrintPlan }
       };
+      this.updateTaskInfo(infos);
 
       this.dataReady = true;
     },
@@ -194,55 +197,6 @@ export default {
       this.dataReady = false;
       this.loading = false;
     },
-    dataChange(data) {
-      // console.log(data);
-      Object.entries(data).forEach(([key, val]) => {
-        this.infos[key] = Object.assign(this.infos[key], val);
-      });
-    },
-    async printTaskRelateInfoChange(data, type) {
-      if (type === "exam") {
-        const { examId, teachingRoomId } = data.examTask;
-        const {
-          examId: infoExamId,
-          teachingRoomId: infoTeachingRoomId
-        } = this.infos.examTask;
-        if (
-          examId &&
-          teachingRoomId &&
-          (examId !== infoExamId || teachingRoomId !== infoTeachingRoomId)
-        ) {
-          this.dataChange(data);
-          await this.updatePrintPlan({ examId, orgId: teachingRoomId });
-          this.$nextTick(() => {
-            this.$refs.InfoPrintTask.buildTableData();
-            this.$refs.InfoPrintTask.updatePackageInfos();
-          });
-        }
-        return;
-      }
-
-      if (type === "course") {
-        this.dataChange(data);
-
-        this.$nextTick(() => {
-          this.$refs.InfoPrintTask.initData();
-        });
-      }
-    },
-    async updatePrintPlan({ examId, orgId }) {
-      const printPlan = await examConfigByExamIdOrgId({
-        examId,
-        orgId
-      }).catch(() => {});
-      if (!printPlan) {
-        this.loading = false;
-        return;
-      }
-      let examPrintPlan = Object.assign({}, initPrintPlan, printPlan);
-      this.infos.examPrintPlan = examPrintPlan;
-      this.infos.examTask.cardRuleId = examPrintPlan.cardRuleId;
-    },
     async cancel() {
       const result = await this.$confirm("确定取消该任务？", "提示", {
         type: "warning"
@@ -276,18 +230,13 @@ export default {
         return;
       }
       // 更新infos
-      const examDatas = [
-        this.$refs.InfoExamTask.getData(),
-        this.$refs.InfoPrintTask.getData()
-      ];
-      examDatas.forEach(item => {
-        this.dataChange(item);
-      });
+      this.$refs.InfoExamTask.updeteData();
+      this.$refs.InfoPrintTask.updeteData();
 
       const examTaskContent = {
-        examTask: this.infos.examTask,
-        examTaskDetail: this.infos.examTaskDetail,
-        examDetail: this.infos.printTask
+        examTask: this.infoExamTask,
+        examTaskDetail: this.infoExamTaskDetail,
+        examDetail: this.infoPrintTask
       };
       let datas = {
         examTaskContent: JSON.stringify(examTaskContent),

src/modules/exam/components/createExamAndPrintTask/InfoExamTask.vue

@@ -24,7 +24,6 @@
                 :semester-id="examTask.semesterId"
                 :clearable="false"
                 class="width-full"
-                @change="emitRelateInfo('exam')"
               ></exam-select>
             </el-form-item>
           </el-col>
@@ -92,6 +91,13 @@
           >
         </div>
         <table class="table mb-2">
+          <colgroup>
+            <col width="100" />
+            <col width="280" />
+            <col width="140" />
+            <col />
+            <col width="60" />
+          </colgroup>
           <tr>
             <th>试卷类型</th>
             <th>试卷文件</th>
@@ -124,7 +130,11 @@
               {{ createCardTypeName }}
             </td>
             <td :rowspan="paperAttachments.length" v-if="index === 0">
-              <el-select v-model="examTaskDetail.cardId" placeholder="请选择">
+              <el-select
+                class="mr-2"
+                v-model="examTaskDetail.cardId"
+                placeholder="请选择"
+              >
                 <el-option
                   v-for="item in cards"
                   :key="item.id"
@@ -133,6 +143,19 @@
                 >
                 </el-option>
               </el-select>
+              <el-button
+                class="btn-primary"
+                type="text"
+                :disabled="!examTaskDetail.cardId"
+                >编辑</el-button
+              >
+              <el-button
+                class="btn-primary"
+                type="text"
+                :disabled="!canCreateCard"
+                @click="toCreateCard"
+                >新建</el-button
+              >
             </td>
             <td>
               <el-button
@@ -226,19 +249,23 @@
       @on-next="toNextImage"
       ref="SimpleImagePreview"
     ></simple-image-preview>
+    <!-- ModifyCard -->
+    <modify-card ref="ModifyCard" @modified="cardModified"></modify-card>
   </div>
 </template>
 
 <script>
 import UploadPaperDialog from "../UploadPaperDialog";
 import SimpleImagePreview from "@/components/SimpleImagePreview";
+import ModifyCard from "../../../card/components/ModifyCard";
 import { CARD_SOURCE_TYPE } from "@/constants/enumerate";
 import { cardForSelectList } from "../../api";
-import { courseQuery } from "../../../base/api";
+import { courseQuery, examConfigByExamIdOrgId } from "../../../base/api";
+import { mapState, mapMutations } from "vuex";
 
 export default {
   name: "info-exam-task",
-  components: { UploadPaperDialog, SimpleImagePreview },
+  components: { UploadPaperDialog, SimpleImagePreview, ModifyCard },
   props: {
     datas: {
       type: Object,
@@ -300,6 +327,11 @@ export default {
     };
   },
   computed: {
+    ...mapState("exam", [
+      "infoExamTask",
+      "infoExamTaskDetail",
+      "infoExamPrintPlan"
+    ]),
     createCardTypeName() {
       return CARD_SOURCE_TYPE[this.examTaskDetail.makeMethod] || "";
     },
@@ -307,15 +339,27 @@ export default {
       return this.paperAttachments.length < 1
         ? 1
         : this.paperAttachments.length;
+    },
+    canCreateCard() {
+      return this.examTask.courseCode && this.examTask.examId;
+    }
+  },
+  watch: {
+    "examTask.examId": function(val, oldval) {
+      if (val !== oldval) this.examAndRoomChange();
+    },
+    "examTask.teachingRoomId": function(val, oldval) {
+      if (val !== oldval) this.examAndRoomChange();
     }
   },
   mounted() {
     this.initData();
   },
   methods: {
+    ...mapMutations("exam", ["updateTaskInfo"]),
     initData() {
-      this.examTask = { ...this.datas.examTask };
-      this.examTaskDetail = { ...this.datas.examTaskDetail };
+      this.examTask = { ...this.infoExamTask };
+      this.examTaskDetail = { ...this.infoExamTaskDetail };
       this.paperAttachments = this.examTaskDetail.paperAttachmentIds
         ? JSON.parse(this.examTaskDetail.paperAttachmentIds)
         : [];
@@ -330,20 +374,20 @@ export default {
         : [];
 
       this.getCourses();
-      this.getCardList();
+      this.getCardList(true);
 
       this.$nextTick(() => {
         this.$refs.examTaskComp.clearValidate();
       });
     },
-    async getCardList() {
+    async getCardList(selectDefaultCard = false) {
       if (!this.examTask.courseCode || !this.examTask.examId) return;
       const data = await cardForSelectList({
         courseCode: this.examTask.courseCode,
         examId: this.examTask.examId
       });
       this.cards = data || [];
-      if (this.cards.length) {
+      if (this.cards.length && selectDefaultCard) {
         this.examTaskDetail.cardId = data[0].id;
       }
     },
@@ -364,7 +408,6 @@ export default {
       this.examTaskDetail.cardId = "";
       this.cards = [];
       this.getCourses();
-      this.emitRelateInfo("exam");
     },
     courseChange(val) {
       if (val) {
@@ -377,7 +420,50 @@ export default {
       this.examTaskDetail.cardId = "";
       this.cards = [];
       this.getCardList();
-      this.emitRelateInfo("course");
+      this.updateTaskInfo({ infoExamTask: this.examTask });
+    },
+    async examAndRoomChange() {
+      const { examId, teachingRoomId } = this.examTask;
+      this.updateTaskInfo({ infoExamTask: this.examTask });
+
+      if (examId && teachingRoomId) {
+        const examPrintPlan = await examConfigByExamIdOrgId({
+          examId,
+          orgId: teachingRoomId
+        });
+        this.examTask.cardRuleId = examPrintPlan.cardRuleId;
+        this.updateTaskInfo({
+          infoExamPrintPlan: Object.assign(
+            {},
+            this.infoExamPrintPlan,
+            examPrintPlan
+          ),
+          infoExamTask: this.examTask
+        });
+      }
+    },
+    toCreateCard() {
+      this.$ls.set("prepareTcPCard", {
+        courseCode: this.examTask.courseCode,
+        courseName: this.examTask.courseName,
+        schoolName: this.$ls.get("schoolName"),
+        makeMethod: "SELF",
+        cardRuleId: this.examTask.cardRuleId,
+        type: "CUSTOM",
+        createMethod: "STANDARD"
+      });
+      this.$refs.ModifyCard.open();
+    },
+    async cardModified(cardId) {
+      if (!cardId) return;
+      let card = this.cards.find(item => item.id === cardId);
+      if (card) {
+        this.examTaskDetail.cardId = card.id;
+      } else {
+        await this.getCardList();
+        card = this.cards.find(item => item.id === cardId);
+        this.examTaskDetail.cardId = card.id;
+      }
     },
     async checkData() {
       const valid = await this.$refs.examTaskComp.validate().catch(() => {});
@@ -403,12 +489,12 @@ export default {
 
       return Promise.resolve(true);
     },
-    getData() {
+    updeteData() {
       let data = {
-        examTask: this.examTask,
-        examTaskDetail: this.getTaskDetailData()
+        infoExamTask: this.examTask,
+        infoExamTaskDetail: this.getTaskDetailData()
       };
-      return data;
+      this.updateTaskInfo(data);
     },
     emitRelateInfo(type) {
       this.$emit("relate-info-change", this.getData(), type);

src/modules/exam/components/createExamAndPrintTask/InfoPrintTask.vue

@@ -131,6 +131,7 @@ import { calcSum, getTimeDatestamp } from "@/plugins/utils";
 import { examRuleDetail } from "../../../base/api";
 import { listTaskPrintHouse, listTaskApplyClass } from "../../api";
 import ModifyPrintTask from "./ModifyPrintTask";
+import { mapState, mapMutations } from "vuex";
 
 export default {
   name: "info-print-task",
@@ -173,10 +174,24 @@ export default {
     };
   },
   computed: {
+    ...mapState("exam", [
+      "infoExamTask",
+      "infoExamTaskDetail",
+      "infoPrintTask",
+      "infoExamPrintPlan"
+    ]),
     cannotAdd() {
       return !this.unusedClassList.length;
     }
   },
+  watch: {
+    "infoExamTask.courseCode": function(val, oldval) {
+      if (val !== oldval) this.initData();
+    },
+    "infoExamPrintPlan.backupCount": function(val, oldval) {
+      if (val !== oldval) this.planBackupCountChange();
+    }
+  },
   mounted() {
     this.getExtendFields();
     this.getPrintHouses();
@@ -187,6 +202,7 @@ export default {
     this.createTime = [...this.curCreateTime];
   },
   methods: {
+    ...mapMutations("exam", ["updateTaskInfo"]),
     async initData() {
       this.modalForm = Object.assign(this.modalForm, {
         paperNumber: this.datas.examTask.paperNumber,
@@ -196,24 +212,24 @@ export default {
 
       await this.getClassList();
 
-      const printTask = this.datas.printTask;
-      this.tableData =
-        printTask.courseCode === this.datas.examTask.courseCode
-          ? printTask.list
-          : [];
-
-      if (printTask.examStartTime && printTask.examEndTime) {
-        this.createTime = [printTask.examStartTime, printTask.examEndTime];
-        this.createDate = getTimeDatestamp(printTask.examStartTime);
+      const { examStartTime, examEndTime } = this.infoPrintTask;
+      if (examStartTime && examEndTime) {
+        this.createTime = [examStartTime, examEndTime];
+        this.createDate = getTimeDatestamp(examStartTime);
         this.modalForm.examStartTime = this.createTime[0];
         this.modalForm.examEndTime = this.createTime[1];
       }
 
-      if (this.tableData.length) {
-        this.updateUnusedClassList();
-      } else {
-        this.buildTableData();
-      }
+      this.tableData = [];
+      this.unusedClassList = [];
+      this.buildTableData();
+      this.updatePackageInfos();
+      this.updeteData();
+    },
+    planBackupCountChange() {
+      this.tableData.forEach(item => {
+        item.backupCount = this.infoExamPrintPlan.backupCount || 0;
+      });
       this.updatePackageInfos();
     },
     checkData() {
@@ -251,25 +267,27 @@ export default {
       }
       return Promise.resolve(true);
     },
-    getData() {
-      this.tableData.forEach(row => {
+    updeteData() {
+      const tableList = this.tableData.map(row => {
+        let nrow = { ...row };
         let extendFields = this.extendFields.map(field => {
           let info = { ...field };
           info.value = row.extends[field.code];
           return info;
         });
 
-        row.extendFields = JSON.stringify(extendFields);
-        row.examStartTime = this.modalForm.examStartTime;
-        row.examEndTime = this.modalForm.examEndTime;
+        nrow.extendFields = JSON.stringify(extendFields);
+        nrow.examStartTime = this.modalForm.examStartTime;
+        nrow.examEndTime = this.modalForm.examEndTime;
+        return nrow;
       });
 
-      return {
-        printTask: {
+      this.updateTaskInfo({
+        infoPrintTask: {
           ...this.modalForm,
-          list: this.tableData
+          list: tableList
         }
-      };
+      });
     },
     updateData() {
       this.$emit("data-change", this.getData());
@@ -285,7 +303,7 @@ export default {
           printHouseId: clazz.printHouseId,
           printHouseName: clazz.printHouseName,
           extendFields: "",
-          backupCount: this.datas.examPrintPlan.backupCount,
+          backupCount: this.infoExamPrintPlan.backupCount,
           ...this.modalForm
         };
         let extendFieldModal = {};
@@ -330,10 +348,10 @@ export default {
     },
     async getClassList() {
       this.classList = [];
-      if (!this.datas.examTask.courseCode) return;
+      if (!this.infoExamTask.courseCode) return;
 
       const data = await listTaskApplyClass({
-        courseCode: this.datas.examTask.courseCode
+        courseCode: this.infoExamTask.courseCode
       });
       if (!data) return;
 

src/modules/exam/store.js

@@ -6,7 +6,12 @@ const state = {
   waitTask: {
     flow: 0,
     stmms: 0
-  }
+  },
+  // createExamAndPrintTask
+  infoExamTask: {},
+  infoExamTaskDetail: {},
+  infoExamPrintPlan: {},
+  infoPrintTask: {}
 };
 
 const mutations = {
@@ -21,6 +26,18 @@ const mutations = {
     state.waitTask = waitTask;
     const count = calcSum(Object.values(state.waitTask));
     state.waitTaskCount = count;
+  },
+  // createExamAndPrintTask
+  updateTaskInfo(state, data) {
+    Object.entries(data).forEach(([key, val]) => {
+      state[key] = Object.assign(state[key], val);
+    });
+  },
+  resetTaskInfo(state) {
+    state.infoExamTask = {};
+    state.infoExamTaskDetail = {};
+    state.infoExamPrintPlan = {};
+    state.infoPrintTask = {};
   }
 };