feat:修改作业上传及显示

src/components/img/UploadImg.vue

@@ -2,20 +2,19 @@
  * @Author: lixg lixg@dongwu-inc.com
  * @Date: 2023-01-18 14:40:26
  * @LastEditors: lixg lixg@dongwu-inc.com
- * @LastEditTime: 2023-01-20 11:31:34
+ * @LastEditTime: 2023-02-19 16:37:15
  * @FilePath: /stu_h5/src/components/img/UploadImg.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
   <el-upload
     :file-list="files"
-    :action="FILE_UPLOAD_ANNEX"
+    :action="FILE_UPLOAD"
     method="POST"
     :show-file-list="false"
     :on-change="handleChange"
-    :limit="max"
+    :limit="1"
     ref="imageRef"
-    :on-exceed="exceed"
   >
     <template #trigger>
       <div>
@@ -25,18 +24,18 @@
   </el-upload>
 </template>
 <script setup>
-import { FILE_UPLOAD_ANNEX } from "@/api/api";
+import { FILE_UPLOAD } from "@/api/api";
 import { defineProps, ref, watch } from "vue";
-import { ElMessage } from "element-plus";
+import { ElMessage, ElLoading } from "element-plus";
 
 const props = defineProps({
-  value: [],
+  fileList: [],
   max: {
     type: Number,
     default: 1,
   },
 });
-
+console.log("fileListfileList", props.fileList, props);
 const emit = defineEmits();
 
 const files = ref([]);
@@ -49,8 +48,21 @@ watch(props.value, () => {
 function exceed() {
   ElMessage.error(`只能上传${props.max}个附件`);
 }
-
+// 使用
+const loading = ref(false); // loading
+const openLoading = () => {
+  loading.value = ElLoading.service({
+    lock: true,
+    text: "Loading",
+    background: "rgba(0, 0, 0, 0.7)",
+  });
+};
+const closeLoading = () => {
+  loading.value.close();
+};
 function handleChange(e) {
+  openLoading();
+  console.log("上传", e);
   if (e.response && e.response.code === 200) {
     e.url = e.response.data;
   }
@@ -61,7 +73,9 @@ function handleChange(e) {
   } else {
     files.value[index] = e;
   }
-  emit("update:value", files.value);
+  emit("update:fileList", files.value);
+  files.value = [];
+  closeLoading();
 }
 
 function remove(i) {

src/views/homeworkpage/HomeworkPage.vue

@@ -57,8 +57,18 @@
                 :style="index % 2 !== 0 ? null : 'background-color:#F2F5F7'"
               >
                 <div class="itemtime">{{ item.createTime }}</div>
-                <div class="itemtitle" :title="item.workUploadContent">
-                  {{ item.workUploadContent }}
+                <div style="display: flex; align-items: center">
+                  <div class="itemtitle" :title="item.workUploadContent">
+                    {{ item.workUploadContent }}
+                    {{
+                      item.workUploadAddress ? "-" + item.workUploadAddress : ""
+                    }}
+                  </div>
+                  <img
+                    v-if="item.workUploadAddress"
+                    style="width: 18px; height: 18px; margin-right: 10px"
+                    src="../../assets/image/urlImg.png"
+                  />
                 </div>
               </div>
             </div>

src/views/homeworkpage/UploadWork.vue

@@ -25,7 +25,7 @@
           <div class="line"></div>
         </div>
         <div class="allimg">
-          <UploadImg v-model:value="fileList" ref="uploadRef">
+          <UploadImg v-model:fileList="fileList" ref="uploadRef">
             <img src="../../assets/image/homeworkpage/link.png" />
           </UploadImg>
           <!-- <img src="../../assets/image/homeworkpage/pre.png" />
@@ -36,6 +36,72 @@
           />
         </div>
       </div>
+      <div class="fileInfo" v-if="fileList && fileList.length !== 0">
+        <div class="triangle"></div>
+        <div class="filebox" v-for="(item, index) in fileList" :key="index">
+          <img
+            v-if="
+              item.name.indexOf('jpg') !== -1 ||
+              item.name.indexOf('jpeg') !== -1 ||
+              item.name.indexOf('png') !== -1
+            "
+            style="width: 20px; height: 22px; margin-right: 20px"
+            src="@/assets/image/file/pngpic.png"
+          />
+          <div v-else>
+            <img
+              v-if="item.name.indexOf('doc') !== -1"
+              style="width: 20px; height: 22px; margin-right: 20px"
+              src="@/assets/image/file/word.png"
+            />
+            <div v-else>
+              <img
+                v-if="item.name.indexOf('xls') !== -1"
+                style="width: 20px; height: 22px; margin-right: 20px"
+                src="@/assets/image/file/excel.png"
+              />
+              <div v-else>
+                <img
+                  v-if="item.name.indexOf('ppt') !== -1"
+                  style="width: 20px; height: 22px; margin-right: 20px"
+                  src="@/assets/image/file/ppt.png"
+                />
+                <div v-else>
+                  <img
+                    v-if="item.name.indexOf('pdf') !== -1"
+                    style="width: 20px; height: 22px; margin-right: 20px"
+                    src="@/assets/image/file/pdf.png"
+                  />
+                  <div v-else>
+                    <img
+                      v-if="item.name.indexOf('zip') !== -1"
+                      style="width: 20px; height: 22px; margin-right: 20px"
+                      src="@/assets/image/file/zip.png"
+                    />
+                    <img
+                      v-else
+                      style="width: 20px; height: 22px; margin-right: 20px"
+                      src="@/assets/image/file/word.png"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <span class="filename" :title="item.name">{{ item.name }}</span>
+          <div
+            class="download"
+            style="display: flex; align-items: center"
+            @click="deleteFile"
+          >
+            <img
+              src="../../assets/image/download.png"
+              style="width: 16px; height: 15px"
+            />
+            <div style="margin-left: 2px; color: #2478ff">删除</div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -66,7 +132,6 @@ export default {
     } = useRoute();
     const textarea = ref("");
     const fileList = ref([]);
-
     // 使用
     const loading = ref(false); // loading
     const openLoading = () => {
@@ -81,7 +146,7 @@ export default {
     };
     //发布作业
     const publishWork = () => {
-      console.log("点击了发布", workId, type, taskId);
+      console.log("点击了发布", workId, type, taskId, fileList);
       if (!textarea.value) {
         if (fileList.value.length === 0) {
           return ElMessage.warning("请输入作业内容");
@@ -91,7 +156,10 @@ export default {
       let obj = {
         projectOrRouterLogo: type,
         workUploadContent: textarea.value,
-        workUploadAddress: fileList.value.map((e) => e.url).join(",") || "",
+        workUploadAddress:
+          fileList.value && fileList.value.length !== 0
+            ? fileList.value[0].name
+            : "",
         workId,
         type,
         taskId: taskId || infoId,
@@ -115,11 +183,16 @@ export default {
       textarea.value = "";
       fileList.value = [];
     };
+    const deleteFile = () => {
+      fileList.value = [];
+    };
     return {
       ...toRefs(state),
       publishWork,
       textarea,
+      fileList,
       deleteAll,
+      deleteFile,
     };
   },
 };
@@ -206,6 +279,51 @@ clearfix:after {
         margin-bottom: 24.5px;
       }
     }
+
+    .fileInfo {
+      width: 95%;
+      height: 56px;
+      background-color: #fff;
+      box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.11);
+      border-radius: 4px;
+      position: absolute;
+      bottom: 81px;
+      left: 2.5%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .triangle {
+        width: 0;
+        height: 0;
+        border: 7px solid;
+        border-color: #fff rgba(255, 255, 255, 0) rgba(255, 255, 255, 0)
+          rgba(255, 255, 255, 0);
+        position: absolute;
+        bottom: -14px;
+        left: 10%;
+      }
+      .filebox {
+        width: 90%;
+        display: flex;
+        margin-left: 5%;
+        margin-right: 5%;
+        align-items: center;
+        .fileimg {
+          width: 19.5px;
+          height: 22px;
+          background-size: 100% 100%;
+          margin-right: 19px;
+        }
+      }
+      .filename {
+        width: calc(100% - 100px);
+        font-size: 13px;
+        display: block;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
   }
 }
 </style>

src/views/projectdetails/ProjectPath.vue

@@ -2,7 +2,7 @@
  * @Author: lixg lixg@dongwu-inc.com
  * @Date: 2023-01-19 11:28:11
  * @LastEditors: lixg lixg@dongwu-inc.com
- * @LastEditTime: 2023-02-19 13:54:34
+ * @LastEditTime: 2023-02-19 16:03:03
  * @FilePath: /stu_h5/src/views/projectdetails/ProjectPath.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -181,7 +181,7 @@ const handleClick = (tab, event) => {
 const goDetails = () => {
   router.push({
     path: "/pathdetails",
-    query: { routerId: 397 },
+    query: { routerId: 396 },
   });
   // router.push({
   //   path: "/projectdetails",