文件上传模块

report-core/src/main/resources/bootstrap-dev.yml

@@ -7,4 +7,4 @@ spring:
 
 customer:
   file:
-    dist-path: /app/disk/upload/
+    dist-path: D:\Workspace\AJ-Report\report-core\upload

report-ui/src/api/file.js

@@ -0,0 +1,58 @@
+/*
+ * @Author: zyk
+ * @Date: 2021-02-23 15:13:17
+ * @Last Modified by: zyk
+ * @Last Modified time: 2021-03-15 13:28:36
+ */
+import request from '@/utils/request'
+// 导出中心
+
+export function download(fileId) {
+  return request({
+    url: `/file/download/${fileId}`,
+    responseType: 'blob',
+    method: 'GET',
+  })
+}
+
+export function fileList(params) {
+  return request({
+    url: '/file/pageList',
+    method: 'GET',
+    params,
+  })
+}
+
+export function fileAdd(data) {
+  return request({
+    url: '/file',
+    method: 'post',
+    data,
+  })
+}
+
+export function fileDel(data) {
+  return request({
+    url: `/file/delete/batch`,
+    method: 'POST',
+    data,
+  })
+}
+
+export function fileUpdate(data) {
+  return request({
+    url: '/file',
+    method: 'put',
+    data,
+  })
+}
+
+export function fileDetail(data) {
+  return request({
+    url: '/file/' + data.id,
+    method: 'get',
+    params: data,
+  })
+}
+
+export default { fileList, fileAdd, fileDel, fileUpdate, fileDetail }

report-ui/src/views/file-management/index.vue

@@ -0,0 +1,187 @@
+<template>
+  <anji-crud ref="listPage" :option="crudOption">
+    <template v-slot:buttonLeftOnTable>
+      <el-upload class="el-upload" :action="uploadUrl" :headers="headers" :on-success="handleUpload" :on-error="handleUpload" :show-file-list="false" :limit="1">
+        <el-button type="primary" icon="el-icon" v-permission="'fileManage:upload'">文件上传</el-button>
+      </el-upload>
+    </template>
+
+    <template slot="rowButton" slot-scope="props">
+      <el-button type="text" @click="customButtom(props)">下载</el-button>
+    </template>
+  </anji-crud>
+</template>
+<script>
+import { fileList, fileAdd, fileDel, fileUpdate, fileDetail } from '@/api/file'
+import { getToken } from '@/utils/auth'
+export default {
+  name: 'File',
+  components: {
+    anjiCrud: require('@/components/AnjiPlus/anji-crud/anji-crud').default,
+  },
+  data() {
+    return {
+      selectedList: [],
+      uploadUrl: process.env.BASE_API + '/file/upload',
+      crudOption: {
+        // 使用菜单做为页面标题
+        title: '文件管理',
+        // 详情页中输入框左边文字宽度
+        labelWidth: '120px',
+        // 查询表单条件
+        queryFormFields: [
+          {
+            inputType: 'input',
+            label: '文件路径',
+            field: 'filePath',
+          },
+        ],
+        // 操作按钮
+        buttons: {
+          query: {
+            api: fileList,
+            permission: 'fileManage:query',
+            sort: 'create_time',
+            order: 'DESC',
+          },
+          queryByPrimarykey: {
+            api: fileDetail,
+            permission: 'fileManage:query',
+          },
+          add: {
+            api: fileAdd,
+            permission: 'fileManage:upload',
+            isShow: false,
+          },
+          delete: {
+            api: fileDel,
+            permission: 'fileManage:delete',
+          },
+          edit: {
+            api: fileUpdate,
+            permission: 'fileManage:update',
+            isShow: false,
+          },
+          // 自定义按钮
+          customButton: {
+            operationWidth: 100, // row自定义按钮表格宽度
+          },
+        },
+        // 表格列
+        columns: [
+          {
+            label: '',
+            field: 'id',
+            primaryKey: true, // 根据主键查询详情或者根据主键删除时, 主键的
+            tableHide: true, // 表格中不显示
+            editHide: true, // 编辑弹框中不显示
+          },
+          {
+            // 以下为表格的配置
+            label: '图片缩略图', // 列名称，必填
+            field: 'urlPath', // 字段名，必填
+            columnType: 'imgPreview', // 图片     不设置默认text
+            editHide: true, // 编辑弹框中不显示
+            // 以下为编辑查看弹框的配置
+            // inputType: 'input', // 编辑查看表单组件类型  input anji-select
+
+            placeholder: '',
+            disabled: false,
+          },
+          {
+            label: '文件标识', // 文件标识
+            placeholder: '',
+            field: 'fileId',
+            editField: 'fileId',
+            tableHide: true, // 表格中不显示
+            inputType: 'input',
+            rules: [{ min: 1, max: 64, message: '不超过64个字符', trigger: 'blur' }],
+            disabled: false,
+          },
+          {
+            label: '文件类型', // 文件路径
+            placeholder: '',
+            field: 'fileType',
+            editField: 'fileType',
+            inputType: 'input',
+            rules: [{ min: 1, max: 1024, message: '不超过1024个字符', trigger: 'blur' }],
+            disabled: false,
+          },
+          {
+            label: '文件路径', // 文件路径
+            placeholder: '',
+            field: 'filePath',
+            editField: 'filePath',
+            inputType: 'input',
+            rules: [{ min: 1, max: 1024, message: '不超过1024个字符', trigger: 'blur' }],
+            disabled: false,
+          },
+          {
+            label: 'url路径', // url路径
+            placeholder: '',
+            field: 'urlPath',
+            editField: 'urlPath',
+            inputType: 'input',
+            rules: [{ min: 1, max: 1024, message: '不超过1024个字符', trigger: 'blur' }],
+            disabled: false,
+          },
+          {
+            label: '内容说明', // 内容说明
+            placeholder: '',
+            field: 'fileInstruction',
+            editField: 'fileInstruction',
+            inputType: 'input',
+            rules: [{ min: 1, max: 1024, message: '不超过1024个字符', trigger: 'blur' }],
+            disabled: false,
+          },
+          {
+            label: '创建人',
+            field: 'createByView',
+            columnType: 'expand', // 表格中放在可展开行中
+
+            inputType: 'input', // 编辑和查看详情中显示的input
+            disabled: true, // 编辑和查看详情中不可编辑
+          },
+          {
+            label: '创建时间',
+            field: 'createTime',
+            columnType: 'expand',
+
+            inputType: 'input',
+            disabled: true,
+          },
+        ],
+      },
+    }
+  },
+  computed: {
+    headers() {
+      return {
+        Authorization: getToken(), // 直接从本地获取token就行
+      }
+    },
+  },
+
+  created() {},
+  methods: {
+    // 上传成功的回调
+    handleUpload(response) {
+      console.log(this)
+      // 触发查询按钮
+      this.$refs.listPage.handleQueryForm()
+    },
+    handleError() {},
+    async downloadFile(row) {
+      window.open(row.urlPath)
+    },
+    customButtom(val) {
+      this.downloadFile(val.msg)
+    },
+  },
+}
+</script>
+<style scoped lang="scss">
+.el-upload {
+  display: inline-block;
+}
+</style>