wenyongda/ZrAdminNetCore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

文件上传新增复制路径

Browse Source
This commit is contained in:
不做码农 2022-03-10 15:03:42 +08:00
parent 321619763e
commit d2077762d1
1 changed files with 97 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
ZR.Vue/src/views/tool/file/index.vue
View File

@ -6,7 +6,7 @@
<el-input v-model="queryParams.fileId" placeholder="请输入文件id" clearable size="small" /> <el-input v-model="queryParams.fileId" placeholder="请输入文件id" clearable size="small" />
</el-form-item> </el-form-item>
<el-form-item label="上传时间"> <el-form-item label="上传时间">
<el-date-picker v-model="dateRangeCreate_time" size="small" value-format="yyyy-MM-dd" type="daterange" range-separator="-" <el-date-picker v-model="dateRangeAddTime" size="small" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
start-placeholder="开始日期" end-placeholder="结束日期" placeholder="请选择上传时间"></el-date-picker> start-placeholder="开始日期" end-placeholder="结束日期" placeholder="请选择上传时间"></el-date-picker>
</el-form-item> </el-form-item>
<el-form-item label="存储类型" prop="storeType"> <el-form-item label="存储类型" prop="storeType">
@ -62,6 +62,10 @@
<el-table-column label="操作" align="center" width="200"> <el-table-column label="操作" align="center" width="200">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button> <el-button type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
<el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" v-clipboard:copy="scope.row.accessUrl"
v-clipboard:success="clipboardSuccess">
复制
</el-button>
<el-button v-hasPermi="['tool:file:delete']" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button> <el-button v-hasPermi="['tool:file:delete']" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
@ -69,8 +73,8 @@
<pagination class="mt10" background :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> <pagination class="mt10" background :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
<!-- 添加或修改文件存储对话框 --> <!-- 添加或修改文件存储对话框 -->
<el-dialog :title="title" :lock-scroll="false" :visible.sync="open" width="400px"> <el-dialog :title="title" :lock-scroll="false" :visible.sync="open" width="380px">
<el-form ref="form" :model="form" :rules="rules" label-width="135px" label-position="left"> <el-form ref="form" :model="form" :rules="rules" label-width="100px" label-position="left">
<el-row> <el-row>
<el-col :lg="24"> <el-col :lg="24">
<el-form-item label="存储类型" prop="storeType"> <el-form-item label="存储类型" prop="storeType">
@ -81,14 +85,14 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :lg="24"> <el-col :lg="24">
<el-form-item label="存储文件夹前缀" prop="storePath"> <el-form-item prop="storePath">
<span slot="label"> <span slot="label">
存储文件夹前缀 文件夹前缀
<el-tooltip content="比如存储到'/uploads' '如果不填写默认按时间存储eg：/2021/12/16(固定段)'" placement="top"> <el-tooltip content="比如存储到'/uploads' '如果不填写默认按时间存储eg：/2021/12/16(固定段)'" placement="top">
<i class="el-icon-question"></i> <i class="el-icon-question"></i>
</el-tooltip> </el-tooltip>
</span> </span>
<el-input v-model="form.storePath" placeholder="请输入" clearable=""/> <el-input v-model="form.storePath" placeholder="请输入文件夹前缀" clearable="" auto-complete="" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :lg="24"> <el-col :lg="24">
@ -97,8 +101,8 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :lg="24"> <el-col :lg="24">
<el-form-item label="上传文件" prop="accessUrl"> <el-form-item label="" prop="accessUrl">
<UploadFile v-model="form.accessUrl" :uploadUrl="uploadUrl" :fileType="[]" :limit="1" :fileSize="15" <UploadFile v-model="form.accessUrl" :uploadUrl="uploadUrl" :fileType="[]" :limit="1" :fileSize="15" :drag="true"
:data="{ 'fileDir' : form.storePath, 'fileName': form.fileName}" column="accessUrl" @input="handleUploadSuccess" /> :data="{ 'fileDir' : form.storePath, 'fileName': form.fileName}" column="accessUrl" @input="handleUploadSuccess" />
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -139,7 +143,12 @@
<el-form-item label="存储路径">{{formView.fileUrl}}</el-form-item> <el-form-item label="存储路径">{{formView.fileUrl}}</el-form-item>
</el-col> </el-col>
<el-col :lg="24"> <el-col :lg="24">
<el-form-item label="访问路径">{{formView.accessUrl}}</el-form-item> <el-form-item label="访问路径">{{formView.accessUrl}}
<el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" v-clipboard:copy="formView.accessUrl"
v-clipboard:success="clipboardSuccess">
复制
</el-button>
</el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
@ -147,14 +156,14 @@
</div> </div>
</template> </template>
<script> <script>
import { listSysfile, delSysfile, getSysfile } from "@/api/tool/file.js"; import { listSysfile, delSysfile, getSysfile } from '@/api/tool/file.js'
export default { export default {
name: "sysfile", name: 'sysfile',
data() { data() {
return { return {
labelWidth: "100px", labelWidth: '100px',
formLabelWidth: "100px", formLabelWidth: '100px',
// 选中id数组 // 选中id数组
ids: [], ids: [],
// 非单个禁用 // 非单个禁用
@ -170,37 +179,26 @@ export default {
pageNum: 1, pageNum: 1,
pageSize: 20, pageSize: 20,
storeType: 1, storeType: 1,
fileId: undefined, fileId: undefined
}, },
// 弹出层标题 // 弹出层标题
title: "", title: '',
// 是否显示弹出层 // 是否显示弹出层
open: false, open: false,
openView: false, openView: false,
// 表单参数 // 表单参数
form: {}, form: {},
formView: {}, formView: {},
columns: [ columns: [],
{ index: 0, key: "id", label: `自增id`, checked: true },
{ index: 1, key: "fileName", label: `文件名`, checked: true },
{ index: 2, key: "fileUrl", label: `文件存储地址`, checked: true },
{ index: 3, key: "storePath", label: `仓库位置`, checked: true },
{ index: 4, key: "fileSize", label: `文件大小`, checked: true },
{ index: 5, key: "fileExt", label: `文件扩展名`, checked: true },
{ index: 6, key: "create_by", label: `创建人`, checked: true },
{ index: 7, key: "create_time", label: `上传时间`, checked: true },
{ index: 8, key: "storeType", label: `存储类型`, checked: true },
{ index: 9, key: "accessUrl", label: `访问路径`, checked: false },
],
// 上传时间时间范围 // 上传时间时间范围
dateRangeCreate_time: [], dateRangeAddTime: [],
// 存储类型选项列表 // 存储类型选项列表
storeTypeOptions: [ storeTypeOptions: [
{ dictLabel: "本地存储", dictValue: 1 }, { dictLabel: '本地存储', dictValue: 1 },
{ dictLabel: "阿里云存储", dictValue: 2 }, { dictLabel: '阿里云存储', dictValue: 2 }
], ],
// 上传文件地址 // 上传文件地址
uploadUrl: "/common/uploadFile", uploadUrl: '/common/uploadFile',
fileType: [], fileType: [],
// 数据列表 // 数据列表
dataList: [], dataList: [],
@ -213,127 +211,131 @@ export default {
accessUrl: [ accessUrl: [
{ {
required: true, required: true,
message: "上传文件不能为空", message: '上传文件不能为空',
trigger: "blur", trigger: 'blur'
}, }
], ],
storeType: [ storeType: [
{ {
required: true, required: true,
message: "存储类型不能为空", message: '存储类型不能为空',
trigger: "blur", trigger: 'blur'
}, }
], ]
}, }
}; }
}, },
created() { created() {
// 列表数据查询 // 列表数据查询
this.getList(); this.getList()
}, },
methods: { methods: {
// 查询数据 // 查询数据
getList() { getList() {
this.addDateRange(this.queryParams, this.dateRangeCreate_time, 'Create_time'); this.addDateRange(this.queryParams, this.dateRangeAddTime, 'Create_time')
this.loading = true; this.loading = true
listSysfile(this.queryParams).then((res) => { listSysfile(this.queryParams).then((res) => {
if (res.code == 200) { if (res.code == 200) {
this.dataList = res.data.result; this.dataList = res.data.result
this.total = res.data.totalNum; this.total = res.data.totalNum
this.loading = false; this.loading = false
} }
}); })
}, },
// 取消按钮 // 取消按钮
cancel() { cancel() {
this.open = false; this.open = false
this.reset(); this.reset()
}, },
// 重置数据表单 // 重置数据表单
reset() { reset() {
this.form = { this.form = {
fileName: "", fileName: '',
fileUrl: "", fileUrl: '',
storePath: "uploads", storePath: 'uploads',
fileSize: 0, fileSize: 0,
fileExt: "", fileExt: '',
storeType: 1, storeType: 1,
accessUrl: "", accessUrl: ''
}; }
this.resetForm("form"); this.resetForm('form')
}, },
/** 重置查询操作 */ /** 重置查询操作 */
resetQuery() { resetQuery() {
this.timeRange = []; this.timeRange = []
// 上传时间时间范围 // 上传时间时间范围
this.dateRangeCreate_time = []; this.dateRangeAddTime = []
this.resetForm("queryForm"); this.resetForm('queryForm')
this.handleQuery(); this.handleQuery()
}, },
// 多选框选中数据 // 多选框选中数据
handleSelectionChange(selection) { handleSelectionChange(selection) {
this.ids = selection.map((item) => item.id); this.ids = selection.map((item) => item.id)
this.single = selection.length != 1; this.single = selection.length != 1
this.multiple = !selection.length; this.multiple = !selection.length
}, },
/** 搜索按钮操作 */ /** 搜索按钮操作 */
handleQuery() { handleQuery() {
this.queryParams.pageNum = 1; this.queryParams.pageNum = 1
this.getList(); this.getList()
}, },
/** 新增按钮操作 */ /** 新增按钮操作 */
handleAdd() { handleAdd() {
this.reset(); this.reset()
this.open = true; this.open = true
this.title = "上传文件"; this.title = '上传文件'
this.form.storeType = this.queryParams.storeType; this.form.storeType = this.queryParams.storeType
}, },
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { handleDelete(row) {
const Ids = row.id || this.ids; const Ids = row.id || this.ids
this.$confirm('是否确认删除参数编号为"' + Ids + '"的数据项？') this.$confirm('是否确认删除参数编号为"' + Ids + '"的数据项？')
.then(function() { .then(function() {
return delSysfile(Ids); return delSysfile(Ids)
}) })
.then(() => { .then(() => {
this.handleQuery(); this.handleQuery()
this.msgSuccess("删除成功"); this.msgSuccess('删除成功')
}) })
.catch(() => {}); .catch(() => {})
}, },
/** 查看按钮操作 */ /** 查看按钮操作 */
handleView(row) { handleView(row) {
const id = row.id || this.ids; const id = row.id || this.ids
getSysfile(id).then((res) => { getSysfile(id).then((res) => {
const { code, data } = res; const { code, data } = res
if (code == 200) { if (code == 200) {
this.openView = true; this.openView = true
this.formView = data; this.formView = data
} }
}); })
}, },
// 上传成功方法 // 上传成功方法
handleUploadSuccess(columnName, filelist, data) { handleUploadSuccess(columnName, filelist, data) {
this.form[columnName] = filelist; this.form[columnName] = filelist
this.queryParams.fileId = data.fileId; this.queryParams.fileId = data.fileId
this.open = false; this.open = false
this.getList(); this.getList()
}, },
// 存储类型字典翻译 // 存储类型字典翻译
storeTypeFormat(row, column) { storeTypeFormat(row, column) {
return this.selectDictLabel(this.storeTypeOptions, row.storeType); return this.selectDictLabel(this.storeTypeOptions, row.storeType)
}, },
handleSelectStore(val) { handleSelectStore(val) {
this.queryParams.storeType = val; this.queryParams.storeType = val
if (val == 1) { if (val == 1) {
this.uploadUrl = "/common/uploadFile"; this.uploadUrl = '/common/uploadFile'
} else if (val == 2) { } else if (val == 2) {
this.uploadUrl = "/common/UploadFileAliyun"; this.uploadUrl = '/common/UploadFileAliyun'
} }
}, },
}, /** 复制代码成功 */
}; clipboardSuccess() {
this.msgSuccess('复制成功')
}
}
}
</script> </script>
<style scoped> <style scoped>
.el-avatar { .el-avatar {