feat:增加查看作业

src/components/drawers/CheckWork.vue

@@ -25,13 +25,83 @@
           <span>作业要求：</span
           ><span style="color: #999ba3">{{ workRequirement }}</span>
         </div>
+        <div class="HW Need">
+          <span>作业内容：</span
+          ><span style="color: #999ba3">{{
+            workSubmitContent ? workSubmitContent : "-"
+          }}</span>
+        </div>
         <div class="HWText">
-          <span>作业信息：</span>
-          <div class="hwText">
-            <img src="@/assets/images/projectadd/keep.png" />
-            <div class="hwName">{{ "京东方商业模型.jpeg" }}</div>
-            <div class="op"><span>查看</span></div>
-            <div class="op"><span>下载</span></div>
+          <span>作业附件：</span>
+          <div class="hwText" v-if="workUploadAddress">
+            <div class="file_img">
+              <img
+                v-if="
+                  workUploadAddress?.indexOf('jpg') !== -1 ||
+                  workUploadAddress?.indexOf('jpeg') !== -1 ||
+                  workUploadAddress?.indexOf('png') !== -1
+                "
+                style="width: 22px; height: 26px"
+                src="@/assets/images/coursewareManage/pngpic.png"
+              />
+              <div v-else>
+                <img
+                  v-if="workUploadAddress?.indexOf('doc') !== -1"
+                  style="width: 22px; height: 26px"
+                  src="@/assets/images/coursewareManage/docpic.png"
+                />
+                <div v-else>
+                  <img
+                    v-if="workUploadAddress?.indexOf('xls') !== -1"
+                    style="width: 22px; height: 26px"
+                    src="@/assets/images/coursewareManage/xlspic.png"
+                  />
+                  <div v-else>
+                    <img
+                      v-if="workUploadAddress?.indexOf('ppt') !== -1"
+                      style="width: 22px; height: 26px"
+                      src="@/assets/images/coursewareManage/pptpic.png"
+                    />
+                    <div v-else>
+                      <img
+                        v-if="workUploadAddress?.indexOf('pdf') !== -1"
+                        style="width: 22px; height: 26px"
+                        src="@/assets/images/coursewareManage/pdfpic.png"
+                      />
+                      <div v-else>
+                        <img
+                          v-if="workUploadAddress?.indexOf('zip') !== -1"
+                          style="width: 22px; height: 26px"
+                          src="@/assets/images/coursewareManage/zippic.png"
+                        />
+                        <img
+                          v-else
+                          style="width: 22px; height: 26px"
+                          src="@/assets/images/coursewareManage/docpic.png"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="hwName">
+              {{ workUploadAddressName }}
+            </div>
+            <div
+              class="op"
+              v-if="
+                workUploadAddress?.indexOf('jpg') !== -1 ||
+                workUploadAddress?.indexOf('jpeg') !== -1 ||
+                workUploadAddress?.indexOf('png') !== -1
+              "
+              @click="checkImg"
+            >
+              <span>查看</span>
+            </div>
+            <div class="op" v-else>
+              <a :href="workUploadAddress">下载</a>
+            </div>
           </div>
         </div>
       </div>
@@ -40,12 +110,38 @@
         <button class="btn2">确定</button>
       </div>
     </div>
+
+    <!-- 查看弹窗 -->
+    <a-modal
+      v-model:visible="checkImgModalV"
+      :title="null"
+      :footer="null"
+      :closable="false"
+      wrapClassName="checkImgModal"
+      width="100%"
+      height="100%"
+    >
+      <div class="modalClose" @click="closeCheckImg">
+        <img
+          style="width: 33px; height: 33px"
+          src="../../assets/images/basicinfo/close22.png"
+        />
+      </div>
+      <div class="modalMain">
+        <img style="width: 500px; height: 660px" :src="workUploadAddress" />
+      </div>
+      <!--  加载动画 -->
+      <div class="aeLoading" :style="{ display: pubLoading ? 'flex' : 'none' }">
+        <a-spin :spinning="pubLoading" />
+      </div>
+    </a-modal>
+    <!-- 查看弹窗 -->
   </a-drawer>
 </template>
 
 <script>
 import { toRefs, reactive } from "@vue/reactivity";
-import { queryWorkDetailById } from "@/api/indexWork";
+import { getWorkSubmitInfo } from "@/api/indexWork";
 export default {
   name: "CheckWork",
   props: {
@@ -57,11 +153,21 @@ export default {
       type: Number,
       default: null,
     },
+    stuId: {
+      type: String,
+      default: null,
+    },
   },
+
   setup(props, ctx) {
     const state = reactive({
       workName: null,
       workRequirement: null,
+      workSubmitContent: null,
+      workUploadAddressName: null,
+      workUploadAddress: null,
+      checkImgModalV: false,
+      pubLoading: true,
     });
     const closeDrawer = () => {
       ctx.emit("update:CWvisible", false);
@@ -77,24 +183,41 @@ export default {
     };
     //获取作业详情
     const getWorkDetail = () => {
-      queryWorkDetailById({ workId: props.workId })
+      console.log("props.workId, props.stuId", props.workId, props.stuId);
+      getWorkSubmitInfo(props.workId, props.stuId)
         .then((res) => {
-          console.log("获取作业详情", res);
+          console.log("获取作业", res);
           if (res.data.code === 200) {
             state.workName = res.data.data.workName;
             state.workRequirement = res.data.data.workRequirement;
+            state.workSubmitContent = res.data.data.workSubmitContent;
+            state.workUploadAddressName = res.data.data.workUploadAddress;
+            state.workUploadAddress =
+              process.env.VUE_APP_FILE_PATH + res.data.data.workUploadAddress;
+            state.pubLoading = false;
+            console.log("workUploadAddress", state.workUploadAddress);
           }
         })
         .catch((err) => {
-          console.log("获取作业详情失败", err);
+          console.log("获取作业失败", err);
         });
+      // http://43.143.139.204/upload/文件名
     };
 
+    //显示查看作业图片弹窗
+    const checkImg = () => {
+      state.checkImgModalV = true;
+    };
+    const closeCheckImg = () => {
+      state.checkImgModalV = false;
+    };
     return {
       ...toRefs(state),
       closeDrawer,
       afterVisibleChange,
       getWorkDetail,
+      checkImg,
+      closeCheckImg,
     };
   },
 };
@@ -185,4 +308,42 @@ export default {
     }
   }
 }
+.checkImgModal {
+  .ant-modal {
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .ant-modal-content {
+      width: 100%;
+      height: 100%;
+      background-color: rgba(255, 255, 255, 0);
+    }
+    .ant-modal-body {
+      padding: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .modalClose {
+        position: absolute;
+        right: 35px;
+        top: 46px;
+        width: 78px;
+        height: 78px;
+        background: #ffffff;
+        box-shadow: 0px 2px 4px 0px #878787;
+        border-radius: 8px;
+        border: 1px solid #ffffff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 200;
+      }
+      .modalMain {
+      }
+    }
+  }
+}
 </style>