feat: file相关功能初步

src/api/_prefix.js

@@ -1,3 +1,5 @@
 export const API_MODULE = '/api'
 export const MODEL_MODULE=`${API_MODULE}/model`
-export const CONFIG_MODULE = `${API_MODULE}/config`
+export const CONFIG_MODULE = `${API_MODULE}/config`
+export const FILE_MODULE= `${API_MODULE}/file`
+export const PIC_MODULE= `${API_MODULE}/picture`

src/api/file.js

@@ -0,0 +1,57 @@
+import request from '../utils/request';
+import axios from 'axios';
+import {FILE_MODULE} from "./_prefix";
+
+/**
+ *  添加文件 POST /upload
+ * @param {*} payload
+ * @returns
+ */
+export const UploadFile = payload => {
+    console.log(payload);
+    const {userId, file, fileName} = payload;
+    return axios.post(`${FILE_MODULE}/upload`, {
+        userId, file, fileName
+    }).then(res => {
+        return res.data;
+    });
+}
+
+/**
+ *  获得文件列表 GET /get/all
+ * @param {*} payload
+ * @returns
+ */
+export const GetAllFile = payload => {
+    console.log(payload);
+    const {userId} = payload;
+    return axios.get(`${FILE_MODULE}/get/all`, {params:{userId:userId}}).then(res => {
+        return res.data;
+    });
+}
+
+/**
+ *  获得文件具体信息 GET /get/detail
+ * @param {*} payload
+ * @returns
+ */
+export const GetAllFile = payload => {
+    console.log(payload);
+    const {fileId} = payload;
+    return axios.get(`${FILE_MODULE}/get/detail`, {params:{fileId:fileId}}).then(res => {
+        return res.data;
+    });
+}
+
+/**
+ *  删除文件 GET /delete
+ * @param {*} payload
+ * @returns
+ */
+export const GetAllFile = payload => {
+    console.log(payload);
+    const {fileId} = payload;
+    return axios.get(`${FILE_MODULE}/delete`, {params:{fileId:fileId}}).then(res => {
+        return res.data;
+    });
+}

src/api/pic.js

@@ -0,0 +1,32 @@
+import request from '../utils/request';
+import axios from 'axios';
+import {FILE_MODULE, PIC_MODULE} from "./_prefix";
+
+/**
+ *  添加图片 POST /upload
+ * @param {*} payload
+ * @returns
+ */
+export const UploadFile = payload => {
+    console.log(payload);
+    const {userId, file, fileName} = payload;
+    return axios.post(`${PIC_MODULE}/upload`, {
+        userId, file, fileName
+    }).then(res => {
+        return res.data;
+    });
+}
+
+/**
+ *  获得图片列表 GET /get/all/proj
+ * @param {*} payload
+ * @returns
+ */
+export const GetAllFile = payload => {
+    console.log(payload);
+    const {userId} = payload;
+    return axios.get(`${PIC_MODULE}/get/all/proj`, {params:{userId:userId}}).then(res => {
+        return res.data;
+    });
+}
+

src/views/FileList.vue

@@ -36,10 +36,10 @@
     <div class="container">
       <el-tabs v-model="message">
         <el-tab-pane :label="`我的文件列表`" name="first">
-          <el-table :data="state.unread" :show-header="false" style="width: 100%">
+          <el-table :data="state.fileList" :show-header="false" style="width: 100%">
             <el-table-column>
               <template #default="scope">
-                <span class="message-title">{{scope.row.title}}</span>
+                <span class="message-title">{{scope.row.fileName}}</span>
               </template>
             </el-table-column>
             <el-table-column prop="date" width="180"></el-table-column>
@@ -48,10 +48,10 @@
                 <!----------------------------todo------------------------------->
                 <!----------------------------获取文件详细信息、跳转到响应页面；删除文件------------------------------->
                 <router-link to="/dashboard">
-                <el-button size="small" @click="handleRead(scope.$index)">获取详情</el-button>
+                <el-button size="small" @click="handleGet(scope.$index)">获取详情</el-button>
 
                 </router-link>
-                <el-button size="small" @click="handleRead(scope.$index)">删除文件</el-button>
+                <el-button size="small" @click="handleDel(scope.$index)">删除文件</el-button>
               </template>
             </el-table-column>
           </el-table>
@@ -85,50 +85,61 @@ export default {
   setup() {
     const message = ref("first");
     const state = reactive({
-      unread: [
+      fileList: [
         {
           date: "2018-04-19 20:00:00",
-          title: "文件1",
+          fileId: "1",
+          fileName:"文件1"
         },
         {
           date: "2018-04-19 21:00:00",
-          title: "文件2",
-        },
-      ],
-      read: [
-        {
-          date: "2018-04-19 20:00:00",
-          title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护",
-        },
-      ],
-      recycle: [
-        {
-          date: "2018-04-19 20:00:00",
-          title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护",
+          fileId: "2",
+          fileName:"文件2"
         },
       ],
+      // read: [
+      //   {
+      //     date: "2018-04-19 20:00:00",
+      //     title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护",
+      //   },
+      // ],
+      // recycle: [
+      //   {
+      //     date: "2018-04-19 20:00:00",
+      //     title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护",
+      //   },
+      // ],
     });
 
-    const handleRead = (index) => {
-      const item = state.unread.splice(index, 1);
-      console.log(item);
-      state.read = item.concat(state.read);
-    };
+    // const handleRead = (index) => {
+    //   const item = state.unread.splice(index, 1);
+    //   console.log(item);
+    //   state.read = item.concat(state.read);
+    // };
+    const getFileList=(userId)=>{
+      //todo: 调用getall接口，将数据复制给fileList
+    }
     const handleDel = (index) => {
-      const item = state.read.splice(index, 1);
-      state.recycle = item.concat(state.recycle);
-    };
-    const handleRestore = (index) => {
-      const item = state.recycle.splice(index, 1);
-      state.read = item.concat(state.read);
+      console.log("handleDel")
+      console.log(index)
+      state.fileList.splice(index, 1);
+      //todo:调用删除接口
     };
+    // const handleRestore = (index) => {
+    //   const item = state.recycle.splice(index, 1);
+    //   state.read = item.concat(state.read);
+    // };
+    const handleGet=(index)=>{
+      console.log("handleGet")
+      console.log(index)
+    }
 
     return {
       message,
       state,
-      handleRead,
+      handleGet,
       handleDel,
-      handleRestore,
+      getFileList,
     };
   },
 };

src/views/Upload.vue

@@ -10,28 +10,32 @@
         </div>
         <div class="container">
             <div class="content-title">支持拖拽</div>
-            <div class="plugins-tips">
+            <!--<div class="plugins-tips">
                 Element UI自带上传组件。
                 访问地址：
                 <a href="http://element.eleme.io/#/zh-CN/component/upload" target="_blank">Element UI Upload</a>
-            </div>
-            <el-upload class="upload-demo" drag action="http://jsonplaceholder.typicode.com/api/posts/" multiple>
+            </div>-->
+            <el-upload class="upload-demo" drag action=""
+                       accept=".jpg,.png,.csv"
+                       :limit="10"
+                       :on-exceed="handleExceed"
+                       :on-remove="handleRemove"
+                       :auto-upload="false" multiple>
                 <i class="el-icon-upload"></i>
                 <div class="el-upload__text">
                     将文件拖到此处，或
                     <em>点击上传</em>
                 </div>
                 <template #tip>
-                    <div class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>
+                    <div class="el-upload__tip">请上传jpg/png图像文件或csv结构化文件，且不超过 500kb,一次最多上传10个文件</div>
                 </template>
             </el-upload>
-
-            <div class="content-title">支持裁剪</div>
+            <!--<div class="content-title">支持裁剪</div>
             <div class="plugins-tips">
                 vue-cropperjs：一个封装了 cropperjs 的 Vue 组件。
                 访问地址：
                 <a href="https://github.com/Agontuk/vue-cropperjs" target="_blank">vue-cropperjs</a>
-            </div>
+            </div>-->
         </div>
     </div>
 </template>
@@ -65,16 +69,24 @@ export default {
             };
             reader.readAsDataURL(file);
         };
-
         const cropImage = () => {
             cropImg.value = cropper.value.getCroppedCanvas().toDataURL();
         };
-
         const cancelCrop = () => {
             dialogVisible.value = false;
             cropImg.value = defaultSrc;
         };
 
+        const handleExceed=(files,fileList)=>{
+            console.log("handleExceed")
+            console.log(files)
+            console.log(fileList)
+        }
+        const handleRemove=(file,fileList)=>{
+          console.log("handleRemove")
+          console.log(file)
+          console.log(fileList)
+        }
         return {
             cropper,
             imgSrc,
@@ -83,6 +95,8 @@ export default {
             setImage,
             cropImage,
             cancelCrop,
+            handleExceed,
+            handleRemove,
         };
     },
 };
@@ -130,4 +144,4 @@ export default {
     opacity: 0;
     cursor: pointer;
 }
-</style>
+</style>