保存进度！

code/web/task_schedule/src/router/index.js

@@ -77,7 +77,7 @@ const routes = [
                     title: "数据管理",
                     icon: "document",
                 },
-                component: ()=> import( "../views/DataManagement.vue" ), 
+                component: ()=> import( "../views/data/DataManagement.vue" ), 
             },
             {
                 path:"/reward_management",

code/web/task_schedule/src/views/DataManagement.vue

@@ -1,40 +0,0 @@
-<!--
- * @Author: Kane
- * @Date: 2023-09-25 09:48:25
- * @LastEditors: Kane
- * @FilePath: /task_schedule/src/views/DataManagement.vue
- * @Description: 数据管理view
- *
- * Copyright (c) ${2022} by Kane, All Rights Reserved.
--->
-<template>
-    <div class="data_management_wrapper">
-        数据管理
-    </div>
-</template>
-<script lang="ts">
-import { ref, reactive } from "vue";
-
-export default {
-    name: "DataManagement",
-    setup()
-    {
-        const ui = reactive({
-            showUI: false,
-        });
-
-        return { ui, };
-    },
-};
-</script>
-<style lang="scss">
-.data_management_wrapper {
-    margin: 10px;
-
-    min-width: 800px;
-
-    >*+* {
-        margin-top: 10px;
-    }
-}
-</style>

code/web/task_schedule/src/views/data/DataManagement.vue

@@ -0,0 +1,110 @@
+<!--
+ * @Author: Kane
+ * @Date: 2023-09-25 09:48:25
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/views/data/DataManagement.vue
+ * @Description: 数据管理view
+ *
+ * Copyright (c) ${2022} by Kane, All Rights Reserved.
+-->
+<template>
+    <div class="data_management_wrapper">
+        <div class="telsaler-dataupload-wrapper">
+            <el-upload
+                v-model="ui.fileList"
+                drag
+                action="http://localhost:8080/desktop_archievement_backend/file/file-upload.do"
+                :on-preview="handlePreview"
+                :on-remove="handleRemove"
+                :on-success="handleUploadSuccess"
+                :before-remove="beforeRemove"
+                :limit="1"
+                :on-exceed="handleExceed"
+                :data="ui.uploadData"
+                name="files"
+            >
+                <el-button type="primary">
+                    上传
+                </el-button>
+                <el-button
+                    type="error"
+                    icon="refresh"
+                    @click="return;"
+                >
+                    清除
+                </el-button>
+                <template #tip>
+                    <div class="el-upload__tip">
+                        文件不能大于100MB。
+                    </div>
+                </template>
+            </el-upload>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import { ref, reactive } from "vue";
+import { ElMessage, ElMessageBox, type UploadFile, type UploadFiles, type UploadProps, type UploadUserFile } from "element-plus";
+
+export default {
+    name: "DataManagement",
+    setup()
+    {
+        const ui = reactive({
+            showUI: false,
+            fileList: ref<UploadUserFile[]>([]),
+            uploadData: {
+                "task-name": "1234",
+            },
+        });
+
+        const handleRemove: UploadProps["onRemove"] = ( file, uploadFile ) =>
+        {
+            console.log( file, uploadFile );
+        };
+
+        const handlePreview: UploadProps["onPreview"] = ( uploadFile ) =>
+        {
+            console.log( uploadFile );
+        };
+
+        const handleExceed: UploadProps["onExceed"] = ( files, uploadFiles ) =>
+        {
+            ElMessage.warning( "一次只能上传三个文件！" );
+        };
+
+        const beforeRemove: UploadProps["beforeRemove"] = async ( uploadFile, uploadFiles ) =>
+        {
+            return await ElMessageBox.confirm(
+                `放弃上传${uploadFile.name}`
+            )
+                .then(() => true, () => false );
+        };
+
+        const handleUploadSuccess = ( response: any, uploadFile: UploadFile, uploadFiles: UploadFiles ): void =>
+        {
+            console.log( response );
+        };
+
+        return {
+            ui,
+            handleRemove,
+            handlePreview,
+            handleExceed,
+            beforeRemove,
+            handleUploadSuccess,
+        };
+    },
+};
+</script>
+<style lang="scss">
+.data_management_wrapper {
+    margin: 10px;
+
+    min-width: 800px;
+
+    >*+* {
+        margin-top: 10px;
+    }
+}
+</style>