fe-manage/src/components/drawers/CheckWork.vue

<template>
  <a-drawer
    :visible="CWvisible"
    class="drawerStyle CheckWork"
    placement="right"
    width="40%"
    @after-visible-change="afterVisibleChange"
  >
    <div class="drawerMain">
      <div class="header">
        <div class="headerTitle">查看作业</div>
        <img
          style="width: 29px; height: 29px; cursor: pointer"
          src="../../assets/images/basicinfo/close.png"
          @click="closeDrawer"
        />
      </div>
      <div class="main">
        <div class="basetext"><span>基础信息</span></div>
        <div class="HW Name">
          <span>作业名称：</span
          ><span style="color: #999ba3">{{ workName }}</span>
        </div>
        <div class="HW Need">
          <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>作业附件：{{isAppend?'':'暂无附件'}}</span>
          <div class="hwText" v-if="isAppend">
            <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?workUploadAddressName.slice(workUploadAddressName.lastIndexOf('/')+1):'' }}
            </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>
      <div class="btnn">
        <button class="btn1" @click="closeDrawer">取消</button>
        <button class="btn2" @click="closeDrawer">确定</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 { getWorkSubmitInfo } from "@/api/indexWork";
export default {
  name: "CheckWork",
  props: {
    CWvisible: {
      type: Boolean,
      default: false,
    },
    workId: {
      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,
      isAppend: true
    });
    const closeDrawer = () => {
      ctx.emit("update:CWvisible", false);
      state.workName = null;
      state.workRequirement = null;
      getWorkDetail();
    };
    const afterVisibleChange = (bool) => {
      console.log(bool);
      if (bool) {
        getWorkDetail();
      }
    };
    //获取作业详情
    const getWorkDetail = () => {
      // debugger
      console.log("props.workId, props.stuId", props.workId, props.stuId);
      getWorkSubmitInfo(props.workId, props.stuId)
        .then((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.isAppend = res.data.data.workUploadAddress == '' || res.data.data.workUploadAddress == null ? false : true;
            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);
        });
      // http://43.143.139.204/upload/文件名
    };

    //显示查看作业图片弹窗
    const checkImg = () => {
      state.checkImgModalV = true;
    };
    const closeCheckImg = () => {
      state.checkImgModalV = false;
    };
    return {
      ...toRefs(state),
      closeDrawer,
      afterVisibleChange,
      getWorkDetail,
      checkImg,
      closeCheckImg,
    };
  },
};
</script>
<style lang="scss">
.CheckWork {
  .drawerMain {
    min-width: 400px;
    margin: 0px 32px 0px 32px;
    display: flex;
    flex-direction: column;
    .header {
      height: 73px;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      .headerTitle {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
        line-height: 25px;
      }
    }
    .main {
      width: 100%;
      overflow-y: auto;
      margin-bottom: 70px;
      .basetext {
        font-size: 16px;
        font-weight: 600;
        color: #333333;
        line-height: 25px;
        margin-bottom: 27px;
      }
      .HW {
        margin-bottom: 20px;
      }
      .hwText {
        display: flex;
        align-items: center;
        margin: 15px auto;
        img {
          background-size: 100% 100%;
        }
        .hwName {
          margin: auto 10px;
        }
        .op {
          color: #4ea6ff;
          margin: auto 20px;
          cursor: pointer;
        }
      }
    }

    .btnn {
      height: 72px;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
      .btn1 {
        width: 100px;
        height: 40px;
        border: 1px solid #4ea6ff;
        border-radius: 8px;
        color: #4ea6ff;
        background-color: #fff;
        cursor: pointer;
      }
      .btn2 {
        cursor: pointer;
        width: 100px;
        height: 40px;
        background: #4ea6ff;
        border-radius: 8px;
        border: 0;
        margin-left: 15px;
        color: #fff;
      }
    }
  }
}
.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>