前台、后台文件页面接口联调

src/api/homepage/file.js

@@ -0,0 +1,12 @@
+import axios from "@/util/ajax";
+
+export default {
+    // 获取文件列表
+    fileList(params) {
+        return axios.get('/xyjc/index-files/list', { params });
+    },
+    // 删除文件
+    deleteFile(params) {
+        return axios.get('/xyjc/index-files/delelteFile', { params });
+    }
+}

src/pages/homepage/file.vue

@@ -1,8 +1,5 @@
 <template>
   <div class="body-wrapper">
-    <div class="button-block">
-      <el-button type="primary" @click="handleUpload">上传</el-button>
-    </div>
     <el-table :data="tableData">
       <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" :prop="item.key">
       </el-table-column>
@@ -10,7 +7,6 @@
         label="操作"
         width="100">
         <template slot-scope="scope">
-          <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
           <el-button @click="handleDown(scope.row)" type="text" size="small">下载</el-button>
         </template>
       </el-table-column>
@@ -20,30 +16,11 @@
         :current-page.sync="pageNum" :page-size.sync="pageSize">
       </el-pagination>
     </div>
-    <el-dialog
-      title="上传"
-      :visible.sync="dialogVisible"
-      width="30%">
-      <el-upload
-        class="upload-demo"
-        action="https://jsonplaceholder.typicode.com/posts/"
-        :on-preview="handlePreview"
-        :on-remove="handleRemove"
-        multiple
-        :limit="3"
-        :on-exceed="handleExceed"
-        :file-list="fileList">
-        <el-button size="small" type="primary">点击上传</el-button>
-        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
-      </el-upload>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
-      </span>
-    </el-dialog>
   </div>
 </template>
 <script>
+import api from "@/api/homepage/file.js";
+import config from '@/config/index';
 
 export default {
     components: {},
@@ -52,11 +29,11 @@ export default {
         columns: [
           {
             label: '名称',
-            key: 'nameCh'
+            key: 'fileName'
           },
           {
             label: '时间',
-            key: 'nameEn'
+            key: 'createdTime'
           }
         ],
         tableData: [],
@@ -68,34 +45,26 @@ export default {
       }
     },
     mounted() {
+      this.getTableData()
     },
     watch: {
 
     },
     methods: {
       handlePageChange() {
-        console.log('enter handle page change')
-      },
-      handleDelete(row) {
-        console.log('enter handle delete')
+        this.getTableData()
       },
       handleDown(row) {
-        console.log('enter handle down')
-      },
-      handleUpload() {
-        this.dialogVisible = true
-      },
-      handleRemove(file, fileList) {
-        console.log(file, fileList);
-      },
-      handlePreview(file) {
-        console.log(file);
-      },
-      handleExceed(files, fileList) {
-        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+        window.location.href = `${this.getUrl()}/xyjc/index-files/download/${row.id}`
       },
-      beforeRemove(file, fileList) {
-        return this.$confirm(`确定移除 ${ file.name }？`);
+      getTableData() {
+        const { pageNum, pageSize } = this
+        api.fileList({pageNum, pageSize}).then(res => {
+            if (res.success) {
+                this.tableData = res.data.records
+                this.total = res.data.total
+            }
+        })
       }
     }
 }

src/pages/index/components/searchPage.vue

@@ -7,6 +7,7 @@
           <img src="../../../../static/homepage/u432.svg" alt="">
         </el-button>
       </el-input>
+      <el-button class="btn-space" @click="jumpToFilePage">文件</el-button>
       <el-button class="btn-space" @click="jumpToAudit">审核</el-button>
     </div>
     <el-tabs class="bottom-card" v-model="activeName" @tab-click="handleClick">
@@ -469,6 +470,11 @@ export default {
       this.$router.push({
         name: "audit",path: "/audit"
       });
+    },
+    jumpToFilePage() {
+      this.$router.push({
+        name: "file",path: "/file"
+      });
     }
   }
 };

src/pages/index/file.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="body-wrapper">
+    <div class="button-block">
+      <el-button type="primary" @click="handleUpload">上传</el-button>
+    </div>
+    <el-table :data="tableData">
+      <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" :prop="item.key">
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        width="100">
+        <template slot-scope="scope">
+          <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
+          <el-button @click="handleDown(scope.row)" type="text" size="small">下载</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="table-pagination">
+      <el-pagination layout="prev, pager, next" :total="total" @current-change="handlePageChange"
+        :current-page.sync="pageNum" :page-size.sync="pageSize">
+      </el-pagination>
+    </div>
+    <el-dialog
+      title="上传"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose">
+      <el-upload
+        class="upload-demo"
+        :action="`${getUrl()}/xyjc/index-files/upload`"
+        :on-preview="handlePreview"
+        :on-remove="handleRemove"
+        multiple
+        :file-list="fileList">
+        <el-button size="small" type="primary">点击上传</el-button>
+        <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
+      </el-upload>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import config from '@/config/index';
+import api from "@/api/homepage/file.js";
+
+export default {
+    components: {},
+    data() {
+      return {
+        columns: [
+          {
+            label: '名称',
+            key: 'fileName'
+          },
+          {
+            label: '时间',
+            key: 'createdTime'
+          }
+        ],
+        tableData: [],
+        total: 0,
+        pageSize: 10,
+        pageNum: 1,
+        dialogVisible: false,
+        fileList: []
+      }
+    },
+    mounted() {
+        this.getTableData()
+    },
+    watch: {
+
+    },
+    methods: {
+      handlePageChange() {
+        this.getTableData()
+      },
+      handleDelete(row) {
+        api.deleteFile({id: row.id}).then(res => {
+            if(res.success) {
+                this.$message({type: 'success', message: '删除成功!'})
+                this.getTableData()
+            }
+        })
+      },
+      handleDown(row) {
+        window.location.href = `${this.getUrl()}/xyjc/index-files/download/${row.id}`
+      },
+      handleUpload() {
+        this.dialogVisible = true
+      },
+      handleRemove(file, fileList) {
+        console.log(file, fileList);
+        this.handleDelete(file.response.data.data[0])
+      },
+      handlePreview(file) {
+        console.log(file);
+      },
+      beforeRemove(file, fileList) {
+        return this.$confirm(`确定移除 ${ file.name }？`);
+      },
+      getUrl() {
+        return process.env.NODE_ENV !== 'development' ? config.build.BASE_API : config.dev.BASE_API;
+      },
+      getTableData() {
+        const { pageNum, pageSize } = this
+        api.fileList({pageNum, pageSize}).then(res => {
+            if (res.success) {
+                this.tableData = res.data.records
+                this.total = res.data.total
+            }
+        })
+      },
+      handleClose() {
+        this.dialogVisible = false
+        this.getTableData()
+        this.fileList = []
+      }
+    }
+}
+</script>
+<style  lang="scss" scoped>
+.body-wrapper {
+  width: 100%;
+  padding: 20px;
+  .button-block{
+    text-align: right;
+    margin-bottom: 20px;
+  }
+  .table-pagination{
+    text-align: right;
+  }
+}
+</style>

src/pages/index/layouts/indexLayout.vue

@@ -39,7 +39,7 @@ export default {
   box-sizing: border-box;
 
   .body-wrapper {
-    padding: 0 13%;
+    // padding: 0 13%;
     width: 100%;
     box-sizing: border-box;
 

src/router/index.js

@@ -29,6 +29,11 @@ export default new Router({
           name: "audit",
           path: "/audit",
           component: () => import("../pages/index/audit.vue")
+        },
+        {
+          name: "file",
+          path: "/file",
+          component: () => import("../pages/index/file.vue")
         }
       ]
     }