|
|
@@ -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>
|
Raod