longlong/xw_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增文档上传

Browse Source
This commit is contained in:
龙运模
2024-07-25 19:54:58 +08:00
parent ac1daa1a79
commit 29fa3a9ca4
7 changed files with 345 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/docsManager/document.vue
+38 -12
View File
@@ -14,7 +14,6 @@
<div class="breadcrumb">
<el-breadcrumb separator-icon="el-icon-ArrowRight">
<el-breadcrumb-item>我的文档</el-breadcrumb-item>
<!-- <el-breadcrumb-item>固本</el-breadcrumb-item>-->
<!-- <el-breadcrumb-item>中学</el-breadcrumb-item>-->
</el-breadcrumb>
</div>
@@ -27,19 +26,33 @@
</el-header>
<el-header>
<div class="left-panel">
<el-dropdown>
<el-button type="primary" :size="size">新建文档</el-button>
<el-dropdown placement="bottom-start">
<el-button type="primary" :size="size" style="margin-right: 12px;">新建文档 <el-icon class="el-icon--right"><el-icon-ArrowDown/></el-icon></el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="table_show('see')" icon="sc-icon-See">查看详情</el-dropdown-item>
<el-dropdown-item @click="table_edit('edit')" icon="sc-icon-Edit">编辑公司</el-dropdown-item>
<el-dropdown-item @click="add" icon="sc-icon-CreateFolder">创建文件夹</el-dropdown-item>
<el-dropdown-item @click="table_edit('edit')" icon="sc-icon-CreateShare">创建共享文件夹</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-button type="primary" :size="size" icon="el-icon-plus" @click="add">新建文档</el-button>
<el-button type="primary" :size="size" plain @click="permission">上传</el-button>
<el-button type="primary" :size="size" plain @click="permission">操作</el-button>
<el-button type="danger" :size="size" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
<el-dropdown placement="bottom-start">
<el-button type="primary" plain :size="size" style="margin-right: 12px;">上传 <el-icon class="el-icon--right"><el-icon-ArrowDown/></el-icon></el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="uploadFile" icon="sc-icon-Upload">上传附件</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown placement="bottom-start">
<el-button type="primary" plain :size="size" style="margin-right: 12px;">操作 <el-icon class="el-icon--right"><el-icon-ArrowDown/></el-icon></el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="table_show('see')" icon="sc-icon-Delete">删除</el-dropdown-item>
<el-dropdown-item @click="table_edit('edit')" icon="sc-icon-Edit">重命名</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-button type="primary" plain :size="size" icon="el-icon-sort" :disabled="selection.length==0" @click="batch_del"></el-button>
</div>
<div class="right-panel">
@@ -75,6 +88,8 @@
</el-main>
</el-container>
<uploadFile ref="uploadFile" @uploadFileSuccess="uploadFileSuccess" title="上传附件"></uploadFile>
<!-- importFile-->
<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
<!-- <permission-dialog v-if="dialog.permission" ref="permissionDialog" @closed="dialog.permission=false"></permission-dialog>-->
@@ -82,12 +97,14 @@
<script>
import saveDialog from './save'
import uploadFile from './uploadFile'
// import permissionDialog from './permission'
export default {
name: 'document',
components: {
saveDialog,
uploadFile
// permissionDialog
},
data() {
@@ -129,6 +146,11 @@ export default {
this.$refs.saveDialog.open('show').setData(row)
})
},
uploadFile(){
this.$nextTick(()=>{
this.$refs.uploadFile.importFile();
})
},
//权限设置
permission(){
this.dialog.permission = true
@@ -173,12 +195,12 @@ export default {
}, 500)
},
//搜索
upsearch(){
upSearch(){
},
//根据ID获取树结构
filterTree(id){
var target = null;
let target = null;
function filter(tree){
tree.forEach(item => {
if(item.id == id){
@@ -199,7 +221,11 @@ export default {
}else if(mode=='edit'){
this.$refs.table.refresh()
}
}
},
uploadFileSuccess(){
this.$refs.table.refresh();
},
}
}
</script>
src/views/docsManager/save.vue
+12 -25
View File
@@ -1,14 +1,8 @@
<template>
<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" draggable destroy-on-close @closed="$emit('closed')">
<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="120px" label-position="right">
<el-form-item label="角色名称" prop="role_name">
<el-input v-model="form.role_name" placeholder="请填写角色名称" clearable></el-input>
</el-form-item>
<el-form-item label="状态" prop="active_status">
<el-switch v-model="form.active_status" :active-value="true" :inactive-value="false"></el-switch>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" clearable type="textarea"></el-input>
<el-dialog :title="titleMap[mode]" v-model="visible" :width="460" draggable destroy-on-close @closed="$emit('closed')">
<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="120px" label-position="top">
<el-form-item label="请输入文件夹名称" prop="name">
<el-input v-model="form.name" placeholder="请输入文件夹名称" clearable></el-input>
</el-form-item>
</el-form>
<template #footer>
@@ -25,7 +19,7 @@ export default {
return {
mode: "add",
titleMap: {
add: '新增',
add: '新建文件夹',
edit: '编辑',
show: '查看'
},
@@ -33,19 +27,14 @@ export default {
isSave: false,
//表单数据
form: {
id:"",
role_name: "",
active_status: true,
remark: ""
parent_id:"",
name: "",
},
//验证规则
rules: {
role_name: [
{required: true, message: '请输入角色名称'}
name: [
{required: true, message: '请输入文件夹名称'}
],
active_status: [
{required: true,}
]
}
}
},
@@ -64,7 +53,7 @@ export default {
this.$refs.dialogForm.validate(async (valid) => {
if (valid) {
this.isSave = true;
const res = await this.$API.system.role.add.post(this.form);
const res = await this.$API.docs.manager.add.post(this.form);
this.isSave = false;
if(res.code == 200){
this.$emit('success', this.form, this.mode)
@@ -76,10 +65,8 @@ export default {
},
//表单注入数据
setData(data){
this.form.id = data.id
this.form.role_name = data.role_name
this.form.active_status = data.active_status
this.form.remark = data.remark
this.form.parent_id = data.id
this.form.name = data.name
}
}
}
src/views/docsManager/uploadFile.vue
+267
View File
@@ -0,0 +1,267 @@
<template>
<slot name="header"></slot>
<el-dialog v-bind="$attrs" :title="title" v-model="visible" :width="560" destroy-on-close draggable @closed="visible=false">
<div class="importBody">
<el-upload
class="upload"
:action="oss.host"
:data="upload_data"
:show-file-list="false"
:on-success="handleSuccess"
:on-error="handleError"
:before-upload="beforeUpload"
:http-request="uploadFile"
drag
multiple
:limit="5"
:disabled="importDis"
>
<div v-if="!importTrue">
<el-icon class="el-icon--upload"><sc-icon-UploadExcel /></el-icon>
<div class="el-upload__text">
<span class="laText">请将Excel拖到此处</span>
<span class="tipText">，或点击上传</span><em> Excel</em>
</div>
</div>
<div v-else>
<div class="el-upload__text">
<el-icon class="trueIcon el-icon&#45;&#45;upload">
<sc-icon-FormXls />
<!-- <div class="deleteFile" @click="deleteFile"><el-icon class="icon"><el-icon-Close/></el-icon></div>-->
</el-icon>
<div class="el-upload__text">文件已选择最大，可以点击立即上传或替换文件。</div>
</div>
</div>
<template #tip>
<div class="el-upload__tip">
<span class="tip">最多上传5个文件,单个文件不要超过10M,请上传 xlsx/docx 格式文件</span>
<span class="btn">
<slot name="download"></slot>
</span>
</div>
<div class="importBox" v-if="progressShow">
<div class="item" v-for="item in listProgress" :key="item">
<div class="name">{{item.type_desc}}</div>
<el-progress class="exportPopover" :text-inside="true" :stroke-width="12" :percentage="item.rate" />
</div>
</div>
</template>
</el-upload>
</div>
<template #footer>
<el-button @click="visible=false">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</template>
</el-dialog>
</template>
<script>
import {eventBus} from "@/utils/eventBus"
export default {
name: "uploadFile",
emits: ['closed', "uploadFileSuccess"],
props:{
size:{type:String, default:'small'},
title:{type:String, default: ""},
},
data(){
return{
visible: false,
text:"",
listFile:[],
listProgress:[],
oss:{
host:''
},
upload_data:{},
fileShow:false,
params:{},
importDis:false,
importTrue:false,
progressShow:false,
}
},
setup(){
},
watch:{
},
mounted() {
eventBus.$on('sockBack', this.getWsResult);
},
unmounted() {
eventBus.$off('sockBack', this.getWsResult);
},
methods:{
getWsResult(res){
if(res.data && (res.data.type == 12)){
let flag = this.listProgress.some(em=>em.file_unique_id == res.data.file_unique_id);
if(!flag){
this.listProgress.push(res.data)
}else{
this.listProgress.forEach((em,index)=>{
if(em.file_unique_id == res.data.file_unique_id){
em.rate = res.data.rate
if(res.data.status == 1){
this.listProgress.splice(index,1);
}
}
})
}
this.progressShow = true;
if(this.listProgress.length==0 && res.data.status == 1){
this.progressShow = false;
}
if(res.data.status == 1){
this.$emit('uploadFileSuccess');
}
}
},
// 导入文件
importFile(){
this.visible = true;
},
// 上传前
beforeUpload(file){
// const text = file.name.split('.').pop();
// if(!['xls','xlsx'].includes(text)){
// this.$message.warning(`只能选择的excel文件类型`);
// return false;
// }
// this.progressShow = true;
this.text = file.name;
this.listFile.push(file);
return true
},
async uploadFile() {
try {
const formData = new FormData();
for(let i in this.listFile){
formData.append('files[]', this.listFile[i]);
}
for (const key in this.upload_data) {
formData.append(key, this.upload_data[key]);
}
this.params = formData;
this.importTrue = this.listFile.length>4?true:false;
this.importDis = this.listFile.length>4?true:false;
} catch (error) {
console.log(error)
}
},
deleteFile(){
this.importTrue = false;
setTimeout(()=>{
this.importDis = false;
},100)
},
async save() {
const res = await this.$API.docs.manager.upload.post(this.params);
if (res.code == 200) {
this.$message.success('提交成功,正在上传');
}
},
// 上传成功
handleSuccess(){
},
// 上传失败
handleError(){
this.$message.warning('上传失败请重新上传');
}
}
}
</script>
<style scoped lang="scss">
.importBody{
padding: 0 20px;
}
.upload .el-icon--upload{
width: 54px;height: 54px;
}
.upload ::v-deep .el-upload__text{
.trueIcon{
position: relative;
border: 1px solid var(--el-border-color);
border-radius: 4px;
}
.laText{
color: var(--el-color-dark);
}
.tipText{
color: var(--el-text-color-placeholder);
}
.deleteFile{
position: absolute;
right: -6px;
top: -10px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--el-color-danger);
display: flex;
align-items: center;
justify-content: center;
.icon{
width: 12px;height: 12px;
color: var(--el-color-white);
}
}
}
.upload ::v-deep .el-upload__tip{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 15px;
color: var(--el-text-color-placeholder);
.btn{
color: var(--el-color-primary);
cursor: pointer;
}
}
.importBox{
border: 1px solid var(--el-border-color);
padding: 10px 5px;
margin: 15px 0;
border-radius: 4px;
.item{margin-bottom: 10px;}
.item:last-child{margin-bottom: 0;}
.name{margin-bottom: 5px;font-size: 13px;}
.exportPopover ::v-deep .el-progress-bar__innerText{
height: 100%;
display: flex;align-items: center;justify-content: flex-end;
font-size: 10px;
}
}
.errText{
margin: 15px 0 0 0;
padding: 10px;
border-radius: 6px;
background: var(--el-color-danger-light-9);
position: relative;
.name{
color: var(--el-color-danger);
font-size: 12px;
line-height: 20px;
}
.deleteErr{
position: absolute;
right: 4px;
top: 4px;
z-index: 20;
cursor: pointer;
.icon{
font-size: 16px;
}
}
}
</style>