ehs_tanghHe
/
tanghe-report
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update 文件管理

Browse Source
qianlishi 3 years ago
parent 806b6b40be
commit 2ad012f7cf
1 changed files with 147 additions and 105 deletions
Show Stats Download Patch File Download Diff File

252
report-ui/src/views/file-management/index.vue
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save