update 文件管理

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

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