|
|
|
|
@ -1,8 +1,22 @@
|
|
|
|
|
<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
|
|
|
|
|
ref="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>
|
|
|
|
|
|
|
|
|
|
@ -12,173 +26,203 @@
|
|
|
|
|
</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: 100 // 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() {},
|
|
|
|
|
methods: {
|
|
|
|
|
// 上传成功的回调
|
|
|
|
|
handleUpload(response) {
|
|
|
|
|
console.log(this)
|
|
|
|
|
this.$refs.upload.clearFiles();
|
|
|
|
|
// 触发查询按钮
|
|
|
|
|
this.$refs.listPage.handleQueryForm()
|
|
|
|
|
this.$refs.listPage.handleQueryForm();
|
|
|
|
|
},
|
|
|
|
|
handleError() {},
|
|
|
|
|
async downloadFile(row) {
|
|
|
|
|
window.open(row.urlPath)
|
|
|
|
|
window.open(row.urlPath);
|
|
|
|
|
},
|
|
|
|
|
customButtom(val) {
|
|
|
|
|
this.downloadFile(val.msg)
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
this.downloadFile(val.msg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.el-upload {
|
|
|
|
|
|
qianlishi
3 years ago