新增文件移动功能

src/api/model/docs.js

@@ -65,6 +65,20 @@ export default {
 			post: async function (params) {
 				return await http.post(this.url, params);
 			},
+		},
+		folderSelect:{
+			url: `${config.API_URL}/document.folder.select.list`,
+			name: "部门列表下拉",
+			post: async function (params) {
+				return await http.post(this.url, params);
+			},
+		},
+		move:{
+			url: `${config.API_URL}/document.file.move`,
+			name: "移动文件｜文件夹",
+			post: async function (params) {
+				return await http.post(this.url, params);
+			},
 		}
 	},
 	share:{

src/store/modules/global.js

@@ -25,6 +25,9 @@ export default {
 		docsRouter:[
 			{name:'我的文档',id:''}
 		],
+		shareRouter:[
+			{name:'我的文档',id:''}
+		]
 	},
 	mutations: {
 		SET_ismobile(state, key){
@@ -55,5 +58,8 @@ export default {
 		SET_docs_router(state, key){
 			state.docsRouter = key
 		},
+		SET_share_router(state, key){
+			state.shareRouter = key
+		},
 	}
 }

src/views/docsManager/document.vue

@@ -51,10 +51,11 @@
 							<el-dropdown-item @click="batch_del" icon="sc-icon-Delete">删除</el-dropdown-item>
 							<el-dropdown-item @click="table_edit('edit')" icon="sc-icon-Edit">重命名</el-dropdown-item>
 							<el-dropdown-item @click="share_edit('edit')" icon="sc-icon-ShareBtn">共享</el-dropdown-item>
+							<el-dropdown-item @click="move_file" icon="sc-icon-ShareBtn">移动文件夹</el-dropdown-item>
 						</el-dropdown-menu>
 					</template>
 				</el-dropdown>
-				<el-button type="primary" plain :size="size" icon="el-icon-sort"></el-button>
+<!--				<el-button type="primary" plain :size="size" icon="el-icon-sort"></el-button>-->
 			</div>
 			<div class="right-panel">
 				<scExportList :size="size" @updateShow="exportChangeShow" :exportList="exportList" :show="exportShow" type="14">
@@ -96,19 +97,22 @@
 	<uploadFile ref="uploadFile" @uploadFileSuccess="uploadFileSuccess" title="上传附件"></uploadFile>
 	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
 	<shareSave v-if="dialog.shareSave" ref="shareSave" @success="handleSaveSuccess" @closed="dialog.shareSave=false"></shareSave>
+	<moveFile v-if="dialog.move" ref="moveSave" @success="handleSaveSuccess" @closed="dialog.move=false"></moveFile>
 </template>
 
 <script>
 import saveDialog from './save'
 import uploadFile from './uploadFile'
 import shareSave from './shareSave'
+import moveFile from './moveFile'
 
 export default {
 	name: 'document',
 	components: {
 		saveDialog,
 		uploadFile,
-		shareSave
+		shareSave,
+		moveFile
 	},
 	data() {
 		return {
@@ -122,7 +126,8 @@ export default {
 
 			dialog: {
 				save: false,
-				shareSave: false
+				shareSave: false,
+				move:false,
 			},
 			list:{
 				apiObj: this.$API.docs.manager.list,
@@ -185,7 +190,11 @@ export default {
 			let row = this.selection[0];
 			this.dialog.save = true
 			this.$nextTick(() => {
-				this.$refs.saveDialog.open('edit').setData(row)
+				if(row.type == 'file'){
+					this.$refs.saveDialog.open('rename').setData(row)
+				}else{
+					this.$refs.saveDialog.open('edit').setData(row)
+				}
 			})
 		},
 		// 上传附件
@@ -252,6 +261,7 @@ export default {
 			}else if(mode=='edit'){
 				this.$refs.table.refresh()
 			}
+			this.$refs.table.refresh()
 		},
 
 		uploadFileSuccess(){
@@ -290,6 +300,18 @@ export default {
 				this.exportList = res.data;
 				this.$message.success('操作成功，马上导出');
 			}
+		},
+		// 移动文件
+		move_file(){
+			if(this.selection.length<1){
+				this.$message.warning('请选择想要移动的文件、文件夹');
+				return
+			}
+
+			this.dialog.move = true
+			this.$nextTick(() => {
+				this.$refs.moveSave.open('move').setData(this.selection)
+			})
 		}
 	}
 }

src/views/docsManager/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<el-main class="tabsMain">
-		<el-tabs tab-position="top" class="tabsPadding" v-model="tabsTrue">
+		<el-tabs tab-position="top" class="tabsPadding" v-model="tabsTrue" @tab-change="tabsChange">
 			<el-tab-pane label="我的文档" name="document">
 				<document v-if="tabsTrue == 'document'"></document>
 			</el-tab-pane>
@@ -26,10 +26,17 @@ export default {
 		return {
 			size:'small',
 			tabsTrue:'document',
+
+			routerList: this.$store.state.global.docsRouter,
+			shareList: this.$store.state.global.shareRouter,
 		}
 	},
 	methods: {
-
+		tabsChange(){
+			let arrList = [{name:'我的文档',id:''}];
+			this.$store.commit("SET_docs_router", arrList);
+			this.$store.commit("SET_share_router", arrList);
+		}
 	}
 }
 </script>

src/views/docsManager/moveFile.vue

@@ -0,0 +1,125 @@
+<template>
+	<el-dialog :title="titleMap[mode]" v-model="visible" :width="480" draggable destroy-on-close @closed="$emit('closed')">
+		<div class="headerBtn">
+			<div class="btn"><el-button @click="update" :size="size" plain type="primary">刷新</el-button></div>
+			<div class="btn"><el-button :size="size" plain type="primary">新建文件夹</el-button></div>
+		</div>
+		<el-scrollbar :max-height="360"  v-loading="loading">
+			<el-tree
+				:data="list"
+				:props="defaultProps"
+				node-key="id"
+				:expand-on-click-node="false"
+				default-expand-all
+				@node-click="getNodes"
+			>
+				<template #default="{ node }">
+					<span class="custom-tree-node">
+						<span><el-icon><sc-icon-Folder/></el-icon> {{ node.data.name }}</span>
+					</span>
+				</template>
+			</el-tree>
+		</el-scrollbar>
+		<template #footer>
+			<el-button @click="visible=false" >取 消</el-button>
+			<el-button v-if="mode!='show'" type="primary" :loading="isSave" @click="submit()">保 存</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script>
+export default {
+	name:"moveFile",
+	emits: ['success', 'closed'],
+	data() {
+		return {
+			size:'small',
+			mode: "move",
+			titleMap: {
+				move: '移动文件',
+			},
+			visible: false,
+			isSave: false,
+			loading:false,
+			list:[],
+			defaultProps:{
+				children: 'children',
+				label: 'name'
+			},
+			move:[
+				{
+					ids:[],
+					file_type:"file",
+					target_folder_id:''
+				},
+				{
+					ids:[],
+					file_type:"folder",
+					target_folder_id:''
+				}
+			]
+		}
+	},
+	mounted() {
+		this.getData();
+	},
+	methods: {
+		//显示
+		open(mode='add'){
+			this.mode = mode;
+			this.visible = true;
+			return this
+		},
+		update(){
+			this.getData();
+		},
+		async getData() {
+			this.loading = true;
+			const res = await this.$API.docs.manager.folderSelect.post();
+			if(res.code == 200){
+				this.list = res.data;
+			}
+			this.loading = false;
+		},
+		//表单提交方法
+		async submit() {
+			this.isSave = true;
+			let params = this.setList();
+			const res = await this.$API.docs.manager.move.post({move:params});
+			this.isSave = false;
+			if (res.code == 200) {
+				this.$emit('success', this.form, this.mode)
+				// this.visible = false;
+				this.$message.success("操作成功")
+			}
+		},
+		setList(){
+			let arr = new Array();
+			arr = this.move.filter(em=>em.ids.length!=0);
+			return arr
+		},
+		getNodes(e){
+			this.move.forEach(item=>{
+				item.target_folder_id = e.id
+			})
+		},
+		//表单注入数据
+		setData(data){
+			let fileIds = data.filter(item=> item.type == 'file').map(em=>em.id)
+			let folderIds = data.filter(item=> item.type == 'folder').map(em=>em.id)
+			this.move[0].ids = fileIds;
+			this.move[1].ids = folderIds;
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.headerBtn{
+		display: flex;align-items: center;
+		margin-bottom: 12px;
+		.btn{
+			margin-right: 12px;
+		}
+	}
+</style>

src/views/docsManager/save.vue

@@ -1,7 +1,10 @@
 <template>
 	<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-form-item label="请输入文件名称" prop="file_name" v-if="mode =='rename'">
+				<el-input v-model="form.file_name" placeholder="请输入文件名称" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="请输入文件夹名称" prop="name" v-else>
 				<el-input v-model="form.name" placeholder="请输入文件夹名称" clearable></el-input>
 			</el-form-item>
 		</el-form>
@@ -21,7 +24,7 @@ export default {
 			titleMap: {
 				add: '新建文件夹',
 				edit: '编辑',
-				show: '查看'
+				rename: '修改文件名'
 			},
 			visible: false,
 			isSave: false,
@@ -30,12 +33,17 @@ export default {
 			form: {
 				parent_id:"",
 				name: "",
+				file_id:'',
+				file_name:'',
 			},
 			//验证规则
 			rules: {
 				name: [
 					{required: true, message: '请输入文件夹名称'}
 				],
+				file_name:[
+					{required: true, message: '请输入文件名称'}
+				]
 			}
 		}
 	},
@@ -54,7 +62,17 @@ export default {
 			this.$refs.dialogForm.validate(async (valid) => {
 				if (valid) {
 					this.isSave = true;
-					const res = await this.$API.docs.manager.add.post(this.form);
+					let res
+					if(this.mode == 'rename'){
+						delete this.form.name;
+						delete this.form.id;
+						res = await this.$API.docs.manager.rename.post(this.form);
+					}else{
+						let params = this.$TOOL.objCopy(this.form);
+						delete params.file_id;
+						delete params.file_name;
+						res = await this.$API.docs.manager.add.post(this.form);
+					}
 					this.isSave = false;
 					if(res.code == 200){
 						this.$emit('success', this.form, this.mode)
@@ -68,12 +86,12 @@ export default {
 		setData(data){
 			this.form.parent_id = data.folder_id;
 			this.form.name = data.name;
-
+			if(this.mode == 'edit' || this.mode == 'rename'){
-			if(this.mode == 'edit'){
 				this.form.parent_id = data.parent_id;
 				this.form.id = data.id;
 				if(data.type == 'file'){
-					this.form.name = data.client_file_name;
+					this.form.file_name = data.client_file_name;
+					this.form.file_id = data.id;
 				}
 			}
 		}

src/views/docsManager/share.vue

@@ -5,15 +5,17 @@
 				<el-col :span="20">
 					<div class="docsHeader">
 						<div class="arrowBox">
-							<div class="item leftArrow"><el-icon><el-icon-ArrowLeftBold/></el-icon></div>
+							<div class="item leftArrow" :class="routerList.length>1?'leftShow':''" @click="prev"><el-icon><el-icon-ArrowLeftBold/></el-icon></div>
 							<div class="item rightArrow"><el-icon><el-icon-ArrowRightBold/></el-icon></div>
 						</div>
-						<div class="refreshBox">
+						<div class="refreshBox" @click="upSearch">
 							<el-icon><el-icon-RefreshLeft/></el-icon>
 						</div>
 						<div class="breadcrumb">
 							<el-breadcrumb separator-icon="el-icon-ArrowRight">
-								<el-breadcrumb-item>我的文档</el-breadcrumb-item>
+								<template v-for="item in routerList" :key="item">
+									<el-breadcrumb-item>{{item.name}}</el-breadcrumb-item>
+								</template>
 							</el-breadcrumb>
 						</div>
 					</div>
@@ -33,7 +35,7 @@
 						</el-dropdown-menu>
 					</template>
 				</el-dropdown>
-				<el-button type="primary" plain :size="size" icon="el-icon-sort" :disabled="selection.length==0"></el-button>
+<!--				<el-button type="primary" plain :size="size" icon="el-icon-sort" :disabled="selection.length==0"></el-button>-->
 			</div>
 			<div class="right-panel">
 
@@ -44,7 +46,7 @@
 				<el-table-column type="selection" align="center" width="40"></el-table-column>
 				<sc-table-column label="序号" align="center" type="index"></sc-table-column>
 				<template #name="scope">
-					<div class="nameBox" v-if="scope.row.type == 'folder'">
+					<div class="nameBox" v-if="scope.row.type == 'folder'" @click="openFolder(scope.row)">
 						<el-icon size="large"><sc-icon-Folder/></el-icon>
 						<div class="text">{{scope.row.name}}</div>
 					</div>
@@ -83,6 +85,10 @@ export default {
 	data() {
 		return {
 			size:'small',
+			routerList: this.$store.state.global.shareRouter,
+			docsList:[],
+			docsNextShow:false,
+
 			dialog: {
 				save: false,
 				shareSave: false
@@ -96,7 +102,8 @@ export default {
 				keyword: null,
 				folder_id:"",
 				name:""
-			}
+			},
+
 		}
 	},
 	methods: {
@@ -125,6 +132,30 @@ export default {
 		uploadFileSuccess(){
 			this.$refs.table.refresh();
 		},
+		prev(){
+			this.routerList.splice(this.routerList.length-1,1);
+			this.$store.commit("SET_share_router", this.routerList);
+
+			this.params.folder_id = this.routerList[this.routerList.length-1].id;
+			this.$refs.table.upData(this.params);
+
+			this.docsNextShow = true;
+		},
+		// 打开文件夹
+		openFolder(row){
+			let arrList = this.routerList;
+			let params = {
+				name:row.name,
+				id:row.id
+			}
+			arrList.push(params);
+			this.$store.commit("SET_share_router", arrList);
+			this.docsList.push(params);
+			this.docsNextShow = false;
+
+			this.params.folder_id = row.id;
+			this.$refs.table.upData(this.params);
+		},
 	}
 }
 </script>

src/views/docsManager/uploadFile.vue

@@ -44,8 +44,8 @@
 							</div>
 						</div>
 						<div v-else>
-							<div class="item" v-for="item in listProgress" :key="item">
+							<div class="item" v-for="(item) in listProgress" :key="item">
-								<div class="name">{{item.file_name}}</div>
+								<div class="name">{{item.client_file_name}}</div>
 								<el-progress class="exportPopover" :text-inside="true" :stroke-width="12" :percentage="item.rate" />
 							</div>
 						</div>
@@ -107,12 +107,11 @@ export default {
 			if(res.data && (res.data.type == 12)){
 				this.progressShow = true;
 
-				this.listProgress.forEach((em,index)=>{
+				this.listProgress.forEach(em=>{
 					if(em.uuid == res.data.file_unique_id){
 						em.rate = res.data.rate
 						if(res.data.status == 1){
 							// this.listProgress.splice(index,1);
-							this.fileList.splice(index,1);
 						}
 					}
 				})
@@ -120,6 +119,8 @@ export default {
 					this.progressShow = false;
 				}
 				if(res.data.status == 1){
+					this.fileList.splice(this.fileList[0],1);
+					// this.handleRemove('',this.fileList,true);
 					this.$emit('uploadFileSuccess');
 				}
 			}
@@ -164,7 +165,8 @@ export default {
 		close(){
 			this.visible = false;
 			this.progressShow = false;
-			this.listProgress = []
+			this.listProgress = [];
+			this.handleRemove('',this.fileList,true);
 		},
 		async save() {
 			const res = await this.$API.docs.manager.upload.post(this.params);
@@ -177,10 +179,15 @@ export default {
 		handleExceed(){
 			this.$message.warning('文件超出最大限制');
 		},
-		handleRemove(file,fileList){
+		handleRemove(file,fileList,isArr=false){
-			const index = fileList.findIndex(f => f.uid === file.uid);
+			if(isArr){
-			if (index !== -1) {
+				fileList = [];
-				fileList.splice(index, 1);
+				this.listProgress = [];
+			}else{
+				const index = fileList.findIndex(f => f.uid === file.uid);
+				if (index !== -1) {
+					fileList.splice(index, 1);
+				}
 			}
 		},
 		// 上传成功