接口初始化 第一版

src/views/homework/HomeworkPage.vue

@@ -47,72 +47,64 @@
                 </div>
               </div>
             </div>
-            <el-upload
-                v-model:file-list="fileList"
-                :action="FILE_UPLOAD"
-                :on-change="handleChange"
-            >
-              <template #trigger>
-                <button
-                    class="shangchuan"
-                    style="cursor: pointer"
-                    @click="uploadFile"
-                >
-                  上传
-                </button>
-              </template>
-            </el-upload>
+            <UploadImg v-model="fileList" ref="uploadRef">
+              <button
+                  class="shangchuan"
+                  style="cursor: pointer"
+                  @mousemove='showFileList=1'
+                  @mouseout='showFileList=0'
+              >
+                上传
+              </button>
+            </UploadImg>
             <div
                 class="uploadDetail"
-                :style="{ display: uploadfile ? 'block' : 'none' }"
+                :style="{ display: showFileList ? 'block' : 'none' }"
+                @mousemove='showFileList=1'
+                @mouseout='showFileList=0'
+                style="padding-top: 60px"
             >
               <div class="triangle"></div>
               <div class="square clearfix">
-                <div class="squarecontent1">
-                  <div class="rar"></div>
+                <div class="squarecontent1" v-for="(file,i) in fileList">
+                  <FileTypeImg v-model="file.name" :style="{margin:'12px 15px 0 27px'}"></FileTypeImg>
                   <div class="rarDetail">
                     <span class="detail1" style="margin-right: 130px">
-                      文件名称1.rar
+                      {{ file.name }}
                     </span>
-                    <span class="detail2" style="margin-right: 10px">48%</span>
-                    <span class="detail1">正在上传</span>
+                    <span class="detail2" style="margin-right: 10px">{{ file.percentage }}%</span>
+                    <span class="detail1">{{
+                        {
+                          ready: '正在上传',
+                          abort: '暂停',
+                          uploading: '正在上传',
+                          fail: '上传失败',
+                          success: '上传成功'
+                        }[file.status]
+                      }}</span>
                     <div class="progress">
-                      <div class="progressinner"></div>
+                      <div class="progressinner" :style="{width:`${291*file.percentage/100}px`}"></div>
                     </div>
                   </div>
-                  <button class="btn btndetail">暂停</button>
-                  <button class="btn">取消</button>
-                </div>
-
-                <div class="squarecontent2">
-                  <div class="rar"></div>
-                  <div class="rarDetail">
-                    <span class="detail1" style="margin-right: 130px">
-                      文件名称2.rar
-                    </span>
-                    <span class="detail2" style="margin-right: 10px">80%</span>
-                    <span class="detail1">上传失败</span>
-                    <div class="progress">
-                      <div class="progressinner"></div>
-                    </div>
-                  </div>
-                  <button class="btn btndetail">重传</button>
-                  <button class="btn">取消</button>
-                </div>
-
-                <div class="squarecontent3">
-                  <div class="rar"></div>
-                  <div class="rarDetail">
-                    <span class="detail1" style="margin-right: 125px">
-                      文件名称3.rar
-                    </span>
-                    <span class="detail2" style="margin-right: 10px">100%</span>
-                    <span class="detail1">上传成功</span>
-                    <div class="progress">
-                      <div class="progressinner"></div>
-                    </div>
-                  </div>
-                  <button class="btn btndetail">删除</button>
+                  <button class="btn btndetail" @click="reUpload(i)">{{
+                      {
+                        ready: '暂停',
+                        uploading: '暂停',
+                        abort: '开始',
+                        fail: '重传',
+                      }[file.status]
+                    }}
+                  </button>
+                  <button class="btn" @click="remove">{{
+                      {
+                        ready: '取消',
+                        abort: '取消',
+                        uploading: '取消',
+                        fail: '取消',
+                        success: '删除'
+                      }[file.status]
+                    }}
+                  </button>
                 </div>
               </div>
             </div>
@@ -224,77 +216,67 @@
   </div>
 </template>
 
-<script>
-import {reactive, toRefs} from "vue";
+<script setup>
+import {reactive, ref, toRefs} from "vue";
 import {request, useRequest} from "@/api/request";
-import {TASK_WORK_COMMIT, TASK_WORK_DETAIL, FILE_UPLOAD} from "@/api/api";
+import {TASK_WORK_COMMIT, TASK_WORK_DETAIL} from "@/api/api";
 import dayjs from "dayjs";
 import {useRouter} from "vue-router";
+import UploadImg from '@/components/img/UploadImg.vue'
+import FileTypeImg from "@/components/FileTypeImg.vue";
 
-export default {
-  name: "homeWork",
-  setup() {
-    const {data} = useRequest(TASK_WORK_DETAIL, {})
-    const state = reactive({
-      activeName: "first",
-      uploadfile: false,
-      fileList: [],
-      textarea1: "",
-      history: [
-        {
-          id: 1,
-          time: "2022-7-20 00:00",
-          content: "大唐之音鉴赏 - 2022/7/20.zip",
-        },
-        {
-          id: 2,
-          time: "2022-7-18 00:00",
-          content: "《木兰辞》翻译：叹息声一声接着一声,木兰姑娘当门在织布。…",
-        },
-        {
-          id: 3,
-          time: "2022-7-17 00:00",
-          content: "湖北黄冈语文压卷题.doc",
-        },
-        {
-          id: 2,
-          time: "2022-7-18 00:00",
-          content: "《木兰辞》翻译：叹息声一声接着一声,木兰姑娘当门在织布。…",
-        },
-        {
-          id: 3,
-          time: "2022-7-17 00:00",
-          content: "湖北黄冈语文压卷题.doc",
-        },
-      ],
-    });
-    const router = useRouter()
-    const handleClick = () => {
-      request(TASK_WORK_COMMIT, {workSubmitDto: {workUploadContent: state.textarea1}}).then(() => {
-        router.back()
-      })
-    };
-    const uploadFile = () => {
-      state.uploadfile = !state.uploadfile;
-    };
-    const handleChange = () => {
-
-    }
-    const textareaInput = (e) => {
-      // console.log("eee", e);
-      state.textarea1 = e;
-    };
-    return {
-      ...toRefs(state),
-      data,
-      dayjs,
-      handleClick,
-      uploadFile,
-      textareaInput,
-      FILE_UPLOAD
-    };
-  },
+const {data} = useRequest(TASK_WORK_DETAIL, {})
+const fileList = ref([])
+const uploadRef = ref()
+const showFileList = ref(0)
+const state = reactive({
+  textarea1: "",
+  history: [
+    {
+      id: 1,
+      time: "2022-7-20 00:00",
+      content: "大唐之音鉴赏 - 2022/7/20.zip",
+    },
+    {
+      id: 2,
+      time: "2022-7-18 00:00",
+      content: "《木兰辞》翻译：叹息声一声接着一声,木兰姑娘当门在织布。…",
+    },
+    {
+      id: 3,
+      time: "2022-7-17 00:00",
+      content: "湖北黄冈语文压卷题.doc",
+    },
+    {
+      id: 2,
+      time: "2022-7-18 00:00",
+      content: "《木兰辞》翻译：叹息声一声接着一声,木兰姑娘当门在织布。…",
+    },
+    {
+      id: 3,
+      time: "2022-7-17 00:00",
+      content: "湖北黄冈语文压卷题.doc",
+    },
+  ],
+})
+const {history, textarea1} = toRefs(state);
+const router = useRouter()
+const handleClick = () => {
+  request(TASK_WORK_COMMIT, {workSubmitDto: {workUploadContent: state.textarea1}}).then(() => {
+    router.back()
+  })
 };
+const textareaInput = (e) => {
+  state.textarea1 = e;
+};
+
+function remove(i) {
+  uploadRef.value.remove(i)
+}
+
+function reUpload(i) {
+  uploadRef.value.reUpload(i)
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
@@ -408,7 +390,7 @@ export default {
 
         .uploadDetail {
           position: absolute;
-          top: 235px;
+          //top: 235px;
           right: 3px;
           z-index: 100;
 
@@ -465,7 +447,6 @@ export default {
                   border-radius: 4px;
 
                   .progressinner {
-                    width: 131px;
                     height: 8px;
                     background: linear-gradient(0deg, #2478ff 0%, #5093ff 100%);
                     border-radius: 4px;