接口调试完毕

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

@@ -1,4 +1,18 @@
 // customize element-ui
+.el-dialog {
+  &.is-fullscreen {
+    .el-dialog__header {
+      width: 100%;
+      position: fixed;
+      z-index: 9;
+      background-color: #fff;
+      border-bottom: 1px solid $--color-border;
+    }
+    .el-dialog__body {
+      padding-top: 90px;
+    }
+  }
+}
 .side-dialog {
   position: absolute;
   margin: 0 !important;

src/assets/styles/pages.scss

@@ -774,3 +774,16 @@
     display: none;
   }
 }
+// preview-card-template
+.preview-card-template {
+  .el-dialog {
+    background-color: #e9edf9;
+    .el-dialog__body {
+      padding: 5px;
+      padding-top: 60px;
+    }
+    .el-dialog__header {
+      background-color: #e9edf9;
+    }
+  }
+}

src/modules/card/api.js

@@ -1,8 +1,13 @@
 import { $httpWithMsg } from "../../plugins/axios";
 import { QUESTION_API } from "@/constants/constants.js";
 
-export const questionTeacherQueryApi = () => {
-  return $httpWithMsg.get(QUESTION_API + "/course/query");
+export const questionTeacherQueryApi = (rootOrgId) => {
+  return $httpWithMsg.get(`${QUESTION_API}/user/all/1/100`, {
+    params: {
+      roleCode: "ASSIGN_TEACHER",
+      rootOrgId,
+    },
+  });
 };
 export const courseQueryApi = (name) => {
   return $httpWithMsg.get(
@@ -15,13 +20,7 @@ export const courseQueryApi = (name) => {
 };
 // card-mamage
 export const cardListApi = (datas) => {
-  return $httpWithMsg.post(
-    `${QUESTION_API}/card/page`,
-    {},
-    {
-      params: datas,
-    }
-  );
+  return $httpWithMsg.post(`${QUESTION_API}/card/page`, datas);
 };
 export const cardDeleteApi = (ids) => {
   return $httpWithMsg.post(
@@ -35,6 +34,7 @@ export const cardDeleteApi = (ids) => {
 export const cardDownloadApi = (ids) => {
   return $httpWithMsg.get(QUESTION_API + "/card/download", {
     params: { ids: ids.join() },
+    responseType: "blob",
   });
 };
 export const cardEnableApi = ({ id, enable }) => {
@@ -47,17 +47,11 @@ export const cardEnableApi = ({ id, enable }) => {
   );
 };
 export const cardUpdateApi = (datas) => {
-  return $httpWithMsg.post(QUESTION_API + "/card-list", datas);
+  return $httpWithMsg.post(QUESTION_API + "/card/edit", {}, { params: datas });
 };
 // card-head-manage
 export const cardHeadListApi = (datas) => {
-  return $httpWithMsg.post(
-    `${QUESTION_API}/card/head/page`,
-    {},
-    {
-      params: datas,
-    }
-  );
+  return $httpWithMsg.post(`${QUESTION_API}/card/head/page`, datas);
 };
 export const cardHeadDeleteApi = (ids) => {
   return $httpWithMsg.post(

src/modules/card/components/ModifyCard.vue

@@ -16,10 +16,10 @@
       label-width="100px"
     >
       <el-form-item label="所属课程：">
-        <el-input v-model.trim="modalForm.courseNamesStr" readonly></el-input>
+        <el-input v-model.trim="modalForm.course" readonly></el-input>
       </el-form-item>
       <el-form-item label="创建人：">
-        <el-input v-model.trim="modalForm.creatorName" readonly></el-input>
+        <el-input v-model.trim="modalForm.creator" readonly></el-input>
       </el-form-item>
       <el-form-item prop="teacherId" label="命题老师：">
         <el-select
@@ -53,8 +53,8 @@ import { cardUpdateApi, questionTeacherQueryApi } from "../api";
 
 const initModalForm = {
   id: null,
-  courseNamesStr: "",
-  creatorName: "",
+  course: "",
+  creator: "",
   teacherId: "",
 };
 
@@ -90,8 +90,10 @@ export default {
   },
   methods: {
     async getTeachers() {
-      const data = await questionTeacherQueryApi();
-      this.teachers = data || [];
+      const res = await questionTeacherQueryApi(
+        this.$store.state.user.rootOrgId
+      );
+      this.teachers = res.data.content;
     },
     visibleChange() {
       this.modalForm = this.$objAssign(initModalForm, this.instance);
@@ -110,7 +112,7 @@ export default {
       if (this.isSubmit) return;
       this.isSubmit = true;
       let datas = {
-        id: this.modalForm.id,
+        cardId: this.modalForm.id,
         teacherId: this.modalForm.teacherId,
       };
       const data = await cardUpdateApi(datas).catch(() => {

src/modules/card/components/PreviewCardTemplate.vue

@@ -0,0 +1,55 @@
+<template>
+  <el-dialog
+    class="preview-card-template"
+    :visible.sync="modalIsShow"
+    title="题卡模板"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+    fullscreen
+  >
+    <div class="card-image-list">
+      <div v-for="(item, ind) in imageList" :key="ind" class="card-image-item">
+        <img :src="item" :alt="ind" />
+      </div>
+    </div>
+
+    <div slot="footer"></div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "PreviewCardTemplate",
+  props: {
+    imageList: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+  },
+  data() {
+    return { modalIsShow: false };
+  },
+  methods: {
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.card-image-item {
+  margin: 10px;
+}
+.card-image-item img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+</style>

src/modules/card/views/CardHeadEdit.vue

@@ -66,7 +66,9 @@
               <div class="template-item-body">
                 <img :src="item.imgSrc" :alt="item.name" />
                 <div class="template-item-action">
-                  <el-button type="success">预览</el-button>
+                  <el-button type="success" @click="viewTemplate(item)"
+                    >预览</el-button
+                  >
                   <el-button type="primary" @click="selectTemplate(item)"
                     >使用</el-button
                   >
@@ -84,6 +86,12 @@
         >
       </div>
     </div>
+
+    <!-- PreviewCardTemplate -->
+    <preview-card-template
+      ref="PreviewCardTemplate"
+      :image-list="imageList"
+    ></preview-card-template>
   </div>
 </template>
 
@@ -93,6 +101,8 @@ import {
   cardHeadUpdateApi,
   cardTemplateListApi,
 } from "../api";
+import PreviewCardTemplate from "../components/PreviewCardTemplate.vue";
+
 const initModalForm = {
   id: null,
   name: "",
@@ -105,6 +115,7 @@ const initModalForm = {
 
 export default {
   name: "CardHeadEdit",
+  components: { PreviewCardTemplate },
   props: {
     instance: {
       type: Object,
@@ -201,6 +212,7 @@ export default {
           },
         ],
       },
+      imageList: [],
     };
   },
   mounted() {
@@ -225,6 +237,10 @@ export default {
         return item;
       });
     },
+    viewTemplate(item) {
+      this.imageList = item.imagePath;
+      this.$refs.PreviewCardTemplate.open();
+    },
     selectTemplate(item) {
       this.modalForm.cardTemplateId = item.id;
       this.$refs.modalFormComp.validateField("cardTemplateId");

src/modules/card/views/CardHeadManage.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-loading.fullscreen="loading"
+    v-loading="loading"
     class="card-head-manage content"
     element-loading-text="请稍后..."
   >

src/modules/card/views/CardManage.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-loading.fullscreen="loading"
+    v-loading="loading"
     class="card-manage content"
     element-loading-text="请稍后..."
   >
@@ -409,6 +409,7 @@ export default {
               message: `题卡生成完毕，成功${successCount}个，失败${failCount}个`,
               type: "success",
             });
+            this.search();
           });
         }
       };
@@ -455,7 +456,7 @@ export default {
       this.$message.success("操作成功！");
     },
     toEdit(row) {
-      this.curRow = row;
+      this.curRow = { ...row, teacherId: row.assignTeacher };
       this.$refs.ModifyCard.open();
     },
     toView(row) {

src/plugins/download.js

@@ -45,7 +45,7 @@ export async function downloadByApi(fetchFunc, fileName) {
  * @param {String} filename 文件名
  */
 export function downloadByBlob(data, filename) {
-  const blobUrl = URL.createObjectURL(data);
+  const blobUrl = window.URL.createObjectURL(data);
   downloadByUrl(blobUrl, filename);
 }