feat: 优化我的文件

src/api/file.js

@@ -19,31 +19,34 @@ export const UploadFile = payload => {
 
 /**
  *  获得文件列表 GET /get/all
- * @param {*} payload
+ * @param {*} userId 用户Id
  * @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;
-    // });
-
-    return Promise.resolve({
-        "timestamp": 1649397417317,
-        "status": 200,
-        "data": [
-            {
-                "fileId": "1",
-                "fileName": "event_data"
-            }
-        ]
-    })
+export const GetAllFile = userId => {
+    return axios.get(`${FILE_MODULE}/get/all`, {
+        params:{
+            userId: userId
+        }}).then(
+            res => {
+                return res.data;
+    });
 }
 
+// 直接返回数据
+// return Promise.resolve({
+//     "timestamp": 1649397417317,
+//     "status": 200,
+//     "data": [
+//         {
+//             "fileId": "1",
+//             "fileName": "event_data"
+//         }
+//     ]
+// })
+
 /**
  *  获得文件具体信息 GET /get/detail
- * @param {*} payload
+ * @param {*} fileId 文件Id
  * @returns
  */
 export const getFileDetail = fileId => {
@@ -54,110 +57,110 @@ export const getFileDetail = fileId => {
     }).then(res => {
         return res.data;
     })
-    //假数据：
-    // return Promise.resolve({
-    //     "timestamp": 1649398931190,
-    //     "status": 200,
-    //     "data": {
-    //         "fileName": "event_data",
-    //         "createTime": "2022-03-29T09:25:43.154+00:00",
-    //         "fileStrucInfo": {
-    //             "totalRows": "754"
-    //         },
-    //         "headerInfos": [
-    //             {
-    //                 "id": 103,
-    //                 "fileInfoId": 1,
-    //                 "fieldName": "frame_index",
-    //                 "aliasName": "",
-    //                 "fieldDes": "",
-    //                 "nullsRatio": 0.0,
-    //                 "conOrDis": 1,
-    //                 "fieldType": "int",
-    //                 "valueInfo": "[\"79\",\"89992\"]"
-    //             },
-    //             {
-    //                 "id": 104,
-    //                 "fileInfoId": 1,
-    //                 "fieldName": "time",
-    //                 "aliasName": "",
-    //                 "fieldDes": "",
-    //                 "nullsRatio": 0.0,
-    //                 "conOrDis": 1,
-    //                 "fieldType": "double",
-    //                 "valueInfo": "[\"3.16\",\"3599.68\"]"
-    //             },
-    //             {
-    //                 "id": 105,
-    //                 "fileInfoId": 1,
-    //                 "fieldName": "road",
-    //                 "aliasName": "",
-    //                 "fieldDes": "",
-    //                 "nullsRatio": 0.0,
-    //                 "conOrDis": 0,
-    //                 "fieldType": "string",
-    //                 "valueInfo": "[\"R\",\"L\"]"
-    //             },
-    //             {
-    //                 "id": 106,
-    //                 "fileInfoId": 1,
-    //                 "fieldName": "lane",
-    //                 "aliasName": "",
-    //                 "fieldDes": "",
-    //                 "nullsRatio": 0.0,
-    //                 "conOrDis": 0,
-    //                 "fieldType": "string",
-    //                 "valueInfo": "[\"r\",\"m\",\"l\"]"
-    //             },
-    //             {
-    //                 "id": 107,
-    //                 "fileInfoId": 1,
-    //                 "fieldName": "vehicle_class",
-    //                 "aliasName": "",
-    //                 "fieldDes": "",
-    //                 "nullsRatio": 0.0,
-    //                 "conOrDis": 0,
-    //                 "fieldType": "string",
-    //                 "valueInfo": "[\"car\",\"truck\",\"bus\"]"
-    //             },
-    //             {
-    //                 "id": 108,
-    //                 "fileInfoId": 1,
-    //                 "fieldName": "vehicle_id",
-    //                 "aliasName": "",
-    //                 "fieldDes": "",
-    //                 "nullsRatio": 0.0,
-    //                 "conOrDis": 1,
-    //                 "fieldType": "int",
-    //                 "valueInfo": "[\"20\",\"46862\"]"
-    //             },
-    //             {
-    //                 "id": 109,
-    //                 "fileInfoId": 1,
-    //                 "fieldName": "event_type",
-    //                 "aliasName": "",
-    //                 "fieldDes": "",
-    //                 "nullsRatio": 0.0,
-    //                 "conOrDis": 0,
-    //                 "fieldType": "string",
-    //                 "valueInfo": "[\"cruise\",\"overdrive\"]"
-    //             },
-    //             {
-    //                 "id": 110,
-    //                 "fileInfoId": 1,
-    //                 "fieldName": "duration",
-    //                 "aliasName": "",
-    //                 "fieldDes": "",
-    //                 "nullsRatio": 0.0,
-    //                 "conOrDis": 0,
-    //                 "fieldType": "string",
-    //                 "valueInfo": "[\"48,60\",\"24,36\",\"36,48\",\"12,24\",\"0,12\"]"
-    //             }
-    //         ]
-    //     }
-    // })
 }
 
+//直接返回数据：
+// return Promise.resolve({
+//     "timestamp": 1649398931190,
+//     "status": 200,
+//     "data": {
+//         "fileName": "event_data",
+//         "createTime": "2022-03-29T09:25:43.154+00:00",
+//         "fileStrucInfo": {
+//             "totalRows": "754"
+//         },
+//         "headerInfos": [
+//             {
+//                 "id": 103,
+//                 "fileInfoId": 1,
+//                 "fieldName": "frame_index",
+//                 "aliasName": "",
+//                 "fieldDes": "",
+//                 "nullsRatio": 0.0,
+//                 "conOrDis": 1,
+//                 "fieldType": "int",
+//                 "valueInfo": "[\"79\",\"89992\"]"
+//             },
+//             {
+//                 "id": 104,
+//                 "fileInfoId": 1,
+//                 "fieldName": "time",
+//                 "aliasName": "",
+//                 "fieldDes": "",
+//                 "nullsRatio": 0.0,
+//                 "conOrDis": 1,
+//                 "fieldType": "double",
+//                 "valueInfo": "[\"3.16\",\"3599.68\"]"
+//             },
+//             {
+//                 "id": 105,
+//                 "fileInfoId": 1,
+//                 "fieldName": "road",
+//                 "aliasName": "",
+//                 "fieldDes": "",
+//                 "nullsRatio": 0.0,
+//                 "conOrDis": 0,
+//                 "fieldType": "string",
+//                 "valueInfo": "[\"R\",\"L\"]"
+//             },
+//             {
+//                 "id": 106,
+//                 "fileInfoId": 1,
+//                 "fieldName": "lane",
+//                 "aliasName": "",
+//                 "fieldDes": "",
+//                 "nullsRatio": 0.0,
+//                 "conOrDis": 0,
+//                 "fieldType": "string",
+//                 "valueInfo": "[\"r\",\"m\",\"l\"]"
+//             },
+//             {
+//                 "id": 107,
+//                 "fileInfoId": 1,
+//                 "fieldName": "vehicle_class",
+//                 "aliasName": "",
+//                 "fieldDes": "",
+//                 "nullsRatio": 0.0,
+//                 "conOrDis": 0,
+//                 "fieldType": "string",
+//                 "valueInfo": "[\"car\",\"truck\",\"bus\"]"
+//             },
+//             {
+//                 "id": 108,
+//                 "fileInfoId": 1,
+//                 "fieldName": "vehicle_id",
+//                 "aliasName": "",
+//                 "fieldDes": "",
+//                 "nullsRatio": 0.0,
+//                 "conOrDis": 1,
+//                 "fieldType": "int",
+//                 "valueInfo": "[\"20\",\"46862\"]"
+//             },
+//             {
+//                 "id": 109,
+//                 "fileInfoId": 1,
+//                 "fieldName": "event_type",
+//                 "aliasName": "",
+//                 "fieldDes": "",
+//                 "nullsRatio": 0.0,
+//                 "conOrDis": 0,
+//                 "fieldType": "string",
+//                 "valueInfo": "[\"cruise\",\"overdrive\"]"
+//             },
+//             {
+//                 "id": 110,
+//                 "fileInfoId": 1,
+//                 "fieldName": "duration",
+//                 "aliasName": "",
+//                 "fieldDes": "",
+//                 "nullsRatio": 0.0,
+//                 "conOrDis": 0,
+//                 "fieldType": "string",
+//                 "valueInfo": "[\"48,60\",\"24,36\",\"36,48\",\"12,24\",\"0,12\"]"
+//             }
+//         ]
+//     }
+// })
 
 /**
  *  删除文件 GET /delete

src/views/file/FileList.vue

@@ -8,29 +8,25 @@
 
     <div class="container">
 
-      <el-tabs v-model="message">
+      <el-tabs v-model="currentTab">
 
         <el-tab-pane :label="`我的文件`" name="first">
-          <el-table :data="state.fileList" :show-header="false" style="width: 100%">
+          <el-table :data="state.fileList" :show-header="true" style="width: 100%">
 
-            <el-table-column>
+            <el-table-column label="文件名">
               <template #default="scope">
                 <span class="message-title">{{scope.row.fileName}}</span>
               </template>
             </el-table-column>
 
-            <el-table-column prop="date" width="180">
-
-            </el-table-column>
-
-            <el-table-column width="240">
+            <el-table-column width="240" label="操作">
               <template #default="scope">
                 <!----------------------------todo------------------------------->
                 <!----------------------------获取文件详细信息、跳转到响应页面；删除文件------------------------------->
                 <div style="display:flex;width: 100%;justify-content:space-around;">
-                  <el-button size="small" type="primary" @click="handleFileDetail(scope.row.fileId)">获取详情</el-button>
+                  <el-button size="small" type="primary" @click="handleFileDetail(scope.row.fileId)">查看详情</el-button>
 
-                  <el-button size="small" @click="handleFileDel(scope.$index)">删除文件</el-button>
+                  <el-button size="small" @click="handleFileDelete(scope.$index)">删除文件</el-button>
                 </div>
               </template>
             </el-table-column>
@@ -38,16 +34,20 @@
         </el-tab-pane>
 
         <el-tab-pane :label="`我的图片`" name="second">
-          <el-table :data="state.picList" :show-header="false" style="width: 100%">
-            <el-table-column>
+          <el-table :data="state.picList" :show-header="true" style="width: 100%">
+            <el-table-column label="图片名">
               <template #default="scope">
                 <span class="message-title">{{scope.row.picName}}</span>
               </template>
             </el-table-column>
-            <el-table-column prop="date" width="180"></el-table-column>
-            <el-table-column width="120">
+            <el-table-column prop="date" label="上传日期"></el-table-column>
+            <el-table-column width="240" label="操作">
               <template #default="scope">
-                <el-button size="small" @click="handlePicDel(scope.$index)">删除图片</el-button>
+                <div style="display:flex;width: 100%;justify-content:space-around;">
+                  <el-button size="small" type="primary" @click="handlePicDetail(scope.row.fileId)">查看详情</el-button>
+
+                  <el-button size="small" @click="handlePicDelete(scope.$index)">删除图片</el-button>
+                </div>
               </template>
             </el-table-column>
           </el-table>
@@ -63,29 +63,22 @@
 </template>
 
 <script>
-import {ref, reactive, onMounted} from "vue";
-import{GetAllFile,getFileDetail} from "../../api/file";
-import router from "../../router";
+import {ref, reactive} from "vue";
+import{GetAllFile} from "../../api/file";
 import {useRouter} from "vue-router";
 
 export default {
   name: "fileList",
   setup() {
-    const message = ref("first");
+    const currentTab = ref("first");
     const router = useRouter();
 
     let userId=1;
     let state = reactive({
       fileList: [
         {
-          date: "2018-04-19 20:00:00",
-          fileId: "1",
-          fileName:"文件1"
-        },
-        {
-          date: "2018-04-19 21:00:00",
-          fileId: "2",
-          fileName:"文件2"
+          fileId: "",
+          fileName:"",
         },
       ],
       picList:[
@@ -97,29 +90,25 @@ export default {
       ],
     });
 
-    // const handleRead = (index) => {
-    //   const item = state.unread.splice(index, 1);
-    //   console.log(item);
-    //   state.read = item.concat(state.read);
-    // };
-    let getFileList=(userId)=>{
-      //todo: 调用getall接口，将数据复制给fileList
-    GetAllFile(userId).then(res=>{
-      state.fileList=res.data;
-    })
+    //用户Id => 文件列表
+    const getFileList=(userId)=>{
+      GetAllFile(userId).then(res=>{
+        if(res.status===200){
+          state.fileList=res.data;
+        }
+        else{
+          console.log("getFileList Error!");
+        }
+      })
     };
-    getFileList(userId);
-    const handleFileDel = (index) => {
-      console.log("handleFileDel")
+    //删除对应文件
+    const handleFileDelete = (index) => {
+      console.log("handleFileDelete")
       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 handleFileDetail=(fileId)=>{
       router.push({
         path:'fileDetail',
@@ -127,43 +116,31 @@ export default {
           fileId:fileId,
         }
       })
-
-      // getFileDetail(fileId).then(res => {
-      //   console.log("getFileDetail返回")
-      //   console.log(res)
-      // })
-      // getFileDetail()
-      // this.router.push({
-      //     path:'fileDetail',
-      //   query:{
-      //     fileId:index
-      //   }
-      // })
-
-
-      //todo:吧要查看的文件id传参
     }
 
-    const handlePicDel = (index) => {
-      console.log("handlePicDel")
+    //todo:调用删除图片的接口,后面再做吧
+    const handlePicDelete = (index) => {
+      console.log("handlePicDelete")
       console.log(index)
       state.fileList.splice(index, 1);
-      //todo:调用删除接口
     };
-    const handlePicGet=(index)=>{
-      console.log("handlePicGet")
+    //获取图片详情
+    //todo:把要查看的图片id传参
+    const handlePicDetail=(index)=>{
+      console.log("handlePicDetail")
       console.log(index)
-
-      //todo:吧要查看的图片id传参
     }
 
+    //初始化
+    getFileList(userId);
+
     return {
-      message,
+      currentTab,
       state,
       handleFileDetail,
-      handleFileDel,
-      handlePicGet,
-      handlePicDel,
+      handleFileDelete,
+      handlePicDetail,
+      handlePicDelete,
       getFileList,
     };
   },