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

Write Preview
Loading…
Cancel
Save