wenyongda/ZRAdmin-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

上传文件新增可以拖动

Browse Source
This commit is contained in:
不做码农 2022-04-20 16:56:48 +08:00
parent 49a4f25a15
commit 75006daec7
1 changed files with 73 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
src/views/tool/file/index.vue
View File

@ -6,7 +6,8 @@
<el-input v-model="queryParams.fileId" placeholder="请输入文件id" clearable /> <el-input v-model="queryParams.fileId" placeholder="请输入文件id" clearable />
</el-form-item> </el-form-item>
<el-form-item label=""> <el-form-item label="">
<el-date-picker v-model="dateRangeAddTime" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" placeholder="请选择上传时间"></el-date-picker> <el-date-picker v-model="dateRangeAddTime" type="daterange" range-separator="-" 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">
<el-select v-model="queryParams.storeType" placeholder="请选择存储类型" clearable=""> <el-select v-model="queryParams.storeType" placeholder="请选择存储类型" clearable="">
@ -41,7 +42,8 @@
</el-table-column> </el-table-column>
<el-table-column prop="accessUrl" align="center" label="预览图" width="100"> <el-table-column prop="accessUrl" align="center" label="预览图" width="100">
<template #default="{row}"> <template #default="{row}">
<el-image preview-teleported :src="row.accessUrl" :preview-src-list="[row.accessUrl]" :hide-on-click-modal="true" fit="contain" lazy class="el-avatar"> <el-image preview-teleported :src="row.accessUrl" :preview-src-list="[row.accessUrl]" :hide-on-click-modal="true" fit="contain" lazy
class="el-avatar">
<template #error> <template #error>
<i class="document" /> <i class="document" />
</template> </template>
@ -61,17 +63,22 @@
<el-table-column label="操作" align="center" width="200"> <el-table-column label="操作" align="center" width="200">
<template #default="scope"> <template #default="scope">
<el-button type="text" icon="view" @click="handleView(scope.row)">查看</el-button> <el-button type="text" icon="view" @click="handleView(scope.row)">查看</el-button>
<el-button class="copy-btn-main" icon="document-copy" type="text" v-clipboard:copy="scope.row.accessUrl" v-clipboard:success="clipboardSuccess"> <el-button class="copy-btn-main" icon="document-copy" type="text" v-clipboard:copy="scope.row.accessUrl"
v-clipboard:success="clipboardSuccess">
复制 复制
</el-button> </el-button>
<el-button v-hasPermi="['tool:file:delete']" type="text" icon="delete" @click="handleDelete(scope.row)">删除</el-button> <el-button v-hasPermi="['tool:file:delete']" type="text" icon="delete" @click="handleDelete(scope.row)">删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination class="mt10" background :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" /> <pagination class="mt10" background :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
@pagination="getList" />
<!-- 添加或修改文件存储对话框 --> <!-- 添加或修改文件存储对话框 -->
<el-dialog :title="title" :lock-scroll="false" v-model="open" width="400px"> <el-dialog :title="title" :lock-scroll="false" v-model="open" width="400px">
<template #title>
<div v-drag="['.el-dialog', '.el-dialog__header']">{{title}}</div>
</template>
<el-form ref="form" :model="form" :rules="rules" label-width="90px" label-position="left"> <el-form ref="form" :model="form" :rules="rules" label-width="90px" label-position="left">
<el-row> <el-row>
<el-col :lg="24"> <el-col :lg="24">
@ -103,8 +110,9 @@
</el-col> </el-col>
<el-col :lg="24"> <el-col :lg="24">
<!-- <el-form-item prop="accessUrl" labelwidth="0px"> --> <!-- <el-form-item prop="accessUrl" labelwidth="0px"> -->
<UploadFile ref="upload" v-model="form.accessUrl" :fileType="[]" :limit="5" :fileSize="15" :drag="true" :data="{ 'fileDir' : form.storePath, 'fileName': form.fileName, 'storeType': form.storeType}" <UploadFile ref="upload" v-model="form.accessUrl" :fileType="[]" :limit="5" :fileSize="15" :drag="true"
:autoUpload="false" column="accessUrl" @success="handleUploadSuccess" /> :data="{ 'fileDir' : form.storePath, 'fileName': form.fileName, 'storeType': form.storeType}" :autoUpload="false" column="accessUrl"
@success="handleUploadSuccess" />
<!-- </el-form-item> --> <!-- </el-form-item> -->
</el-col> </el-col>
</el-row> </el-row>
@ -156,7 +164,8 @@
</el-col> </el-col>
<el-col :lg="24"> <el-col :lg="24">
<el-form-item label="访问路径">{{formView.accessUrl}} <el-form-item label="访问路径">{{formView.accessUrl}}
<el-button class="copy-btn-main" icon="document-copy" type="text" v-clipboard:copy="formView.accessUrl" v-clipboard:success="clipboardSuccess"> <el-button class="copy-btn-main" icon="document-copy" type="text" v-clipboard:copy="formView.accessUrl"
v-clipboard:success="clipboardSuccess">
复制 复制
</el-button> </el-button>
</el-form-item> </el-form-item>
@ -170,14 +179,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: [],
// 非单个禁用 // 非单个禁用
@ -196,7 +205,7 @@ export default {
fileId: undefined, fileId: undefined,
}, },
// 弹出层标题 // 弹出层标题
title: "", title: '',
// 是否显示弹出层 // 是否显示弹出层
open: false, open: false,
openView: false, openView: false,
@ -208,8 +217,8 @@ export default {
dateRangeAddTime: [], dateRangeAddTime: [],
// 存储类型选项列表 // 存储类型选项列表
storeTypeOptions: [ storeTypeOptions: [
{ dictLabel: "本地存储", dictValue: 1 }, { dictLabel: '本地存储', dictValue: 1 },
{ dictLabel: "阿里云存储", dictValue: 2 }, { dictLabel: '阿里云存储', dictValue: 2 },
], ],
// 存储类型 1、本地 2、阿里云 // 存储类型 1、本地 2、阿里云
storeType: 0, storeType: 0,
@ -225,122 +234,122 @@ 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.dateRangeAddTime, "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.dateRangeAddTime = []; 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.$modal.msgSuccess("删除成功"); this.$modal.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.open = false; this.open = false
this.getList(); this.getList()
}, },
// 手动上传 // 手动上传
submitUpload() { submitUpload() {
this.$refs.upload.submitUpload(); this.$refs.upload.submitUpload()
}, },
/** 复制代码成功 */ /** 复制代码成功 */
clipboardSuccess() { clipboardSuccess() {
this.$modal.msgSuccess("复制成功"); this.$modal.msgSuccess('复制成功')
}, },
}, },
}; }
</script> </script>
<style scoped> <style scoped>
.el-avatar { .el-avatar {