init

src/components/img/UploadImg.vue

@@ -5,7 +5,9 @@
       method="POST"
       :show-file-list="false"
       :on-change="handleChange"
+      :limit="max"
       ref="imageRef"
+      :on-exceed="exceed"
   >
     <template #trigger>
       <div>
@@ -16,19 +18,31 @@
 </template>
 <script setup>
 import {FILE_UPLOAD} from "@/api/api";
-import {defineProps, ref} from "vue";
+import {defineProps, ref, watch} from "vue";
+import {ElMessage} from "element-plus";
 
-const {modelValue = []} = defineProps({
+const props = defineProps({
-  modelValue: []
+  value: [],
+  max: {
+    type: Number,
+    default: 1
+  }
 })
 
 const emit = defineEmits()
 
-const files = ref(modelValue)
+const files = ref([])
 const imageRef = ref()
 
+watch(props.value, () => {
+  props.value.length || (files.value = props.value)
+})
+
+function exceed() {
+  ElMessage.error(`只能上传${props.max}个附件`);
+}
+
 function handleChange(e) {
-  console.log(e)
   if (e.response && e.response.code === 200) {
     e.url = e.response.data
   }
@@ -39,7 +53,7 @@ function handleChange(e) {
   } else {
     files.value[index] = e
   }
-  emit('update:modelValue', files)
+  emit('update:value', files.value)
 }
 
 function remove(i) {
@@ -50,7 +64,7 @@ function reUpload(i) {
   if (files.value[i].status === 'ready' || files.value[i].status === 'uploading') {
     imageRef.value.abort(files.value[i].raw)
     files.value[i].status = 'abort';
-  } else if (files.value[i].status === 'fail'||files.value[i].status === 'abort') {
+  } else if (files.value[i].status === 'fail' || files.value[i].status === 'abort') {
     imageRef.value.handleStart(files.value[i].raw)
     imageRef.value.submit()
   }

src/views/homework/HomeworkPage.vue

@@ -58,12 +58,10 @@
                 </div>
               </div>
             </div>
-            <UploadImg v-model="fileList" ref="uploadRef">
+            <UploadImg v-model:value="fileList" ref="uploadRef">
               <button
                 class="shangchuan"
                 style="cursor: pointer"
-                @mousemove="showFileList = 1"
-                @mouseout="showFileList = 0"
               >
                 上传
               </button>
@@ -71,8 +69,6 @@
             <div
               class="uploadDetail"
               :style="{ display: showFileList ? 'block' : 'none' }"
-              @mousemove="showFileList = 1"
-              @mouseout="showFileList = 0"
               style="padding-top: 60px"
             >
               <div class="triangle"></div>
@@ -193,6 +189,9 @@
                     "
                   >
                     {{ value.workUploadContent }}
+                    <span style="margin-left: 10px">
+                      <el-link target="_blank" type="primary" :href="value.workUploadAddress?.split(',')[0] || ''">{{value.workUploadAddress?.split(',')[0].split('/').at(-1)|| ''}}</el-link>
+                    </span>
                   </div>
                 </div>
               </div>
@@ -256,7 +255,7 @@
 </template>
 
 <script setup>
-import { reactive, ref, toRefs } from "vue";
+import {computed, reactive, ref, toRefs} from "vue";
 import { request, useRequest } from "@/api/request";
 import {
   TASK_WORK_COMMIT,
@@ -272,7 +271,6 @@ import { useRoute } from "vue-router/dist/vue-router";
 
 const fileList = ref([]);
 const uploadRef = ref();
-const showFileList = ref(0);
 const sbValue = ref({
   content: "",
   attach: "",
@@ -290,9 +288,11 @@ const { data: submitList } = useRequest(TASK_WORK_SUBMIT_LIST, {
   workerId: workId,
 });
 
+const showFileList = computed(()=>{
+  return fileList.value.length
+})
+
 const handleClick = () => {
-  console.log(sbValue.value);
-  console.log(fileList);
   request(TASK_WORK_COMMIT, {
     projectOrRouterLogo: type,
     workUploadContent: sbValue.value.content,
@@ -304,6 +304,7 @@ const handleClick = () => {
     submitList.value.unshift(res.data);
   });
   sbValue.value.content = "";
+  fileList.value = [];
 };
 
 function remove(i) {
@@ -452,8 +453,8 @@ function reUpload(i) {
           }
 
           .square {
-            width: 475px;
+            padding-bottom: 40px;
-            height: 243px;
+            width: 600px;
             background: #ffffff;
             box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.11);
             border-radius: 8px;