完善我的文档

src/api/model/docs.js

@@ -27,8 +27,8 @@ export default {
 		deleteFolder: {
 			url: `${config.API_URL}/document.folder.delete`,
 			name: "删除文件夹",
-			post: async function () {
+			post: async function (params) {
-				return await http.post(this.url);
+				return await http.post(this.url,params);
 			},
 		},
 		deleteFile: {

src/store/modules/global.js

@@ -21,6 +21,10 @@ export default {
 		login_name:'管理员',
 		// 用户头像
 		login_avatar:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-login/logo.png',
+		// 我的文档路径
+		docsRouter:[
+			{name:'我的文档',id:''}
+		],
 	},
 	mutations: {
 		SET_ismobile(state, key){
@@ -48,5 +52,8 @@ export default {
 		SET_WS_Msg_NUM(state, key) {
 			state.msgNum = key
 		},
+		SET_docs_router(state, key){
+			state.docsRouter = key
+		},
 	}
 }

src/style/docs.scss

@@ -20,9 +20,11 @@
 			padding: 0 12px;
 			height: 100%;
 			display: flex;align-items: center;justify-content: center;
+			cursor: pointer;
 		}
-		.leftArrow{border-right: 1px solid #f9f9f9;}
+		.leftArrow{border-right: 1px solid #f9f9f9;color: #aaa;}
-		.rightArrow{border-left: 1px solid #f9f9f9;}
+		.rightArrow{border-left: 1px solid #f9f9f9;color: #aaa;}
+		.leftShow{color: #333;}
 	}
 	.refreshBox{
 		margin-left: 12px;
@@ -30,6 +32,8 @@
 		background: #EFF3FB;height: 28px;
 		border-radius: 4px;
 		display: flex;align-items: center;justify-content: center;
+		cursor: pointer;
+		color: #000;
 	}
 	.breadcrumb{
 		flex: 1;

src/views/docsManager/document.vue

@@ -5,22 +5,23 @@
 				<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 class="item rightArrow" :class="docsNextShow?'leftShow':''" @click="next"><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>中学</el-breadcrumb-item>-->
+									<el-breadcrumb-item>{{item.name}}</el-breadcrumb-item>
+								</template>
 							</el-breadcrumb>
 						</div>
 					</div>
 				</el-col>
 				<el-col :span="4">
-					<el-input type="text" :size="size" prefix-icon="el-icon-Search" placeholder="搜索"></el-input>
+					<el-input type="text" :size="size" v-model="params.keyword" prefix-icon="el-icon-Search" @input="upSearch" placeholder="搜索"></el-input>
 				</el-col>
 			</el-row>
 		</el-header>
@@ -47,22 +48,23 @@
 					<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="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-menu>
 					</template>
 				</el-dropdown>
-				<el-button type="primary" plain :size="size" icon="el-icon-sort" :disabled="selection.length==0" @click="batch_del"></el-button>
+				<el-button type="primary" plain :size="size" icon="el-icon-sort"></el-button>
 			</div>
 			<div class="right-panel">
 
 			</div>
 		</el-header>
 		<el-main class="nopadding">
-			<scTable ref="table" :apiObj="list.apiObj" :column="list.column" row-key="id" @selection-change="selectionChange" stripe :rowChild="false">
+			<scTable ref="table" :apiObj="list.apiObj" :column="list.column" row-key="id" @selection-change="selectionChange" :size="size" stripe :rowChild="false">
+				<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" @click="openFolder(scope.row)" v-if="scope.row.type == 'folder'">
 						<el-icon size="large"><sc-icon-Folder/></el-icon>
 						<div class="text">{{scope.row.name}}</div>
 					</div>
@@ -73,7 +75,7 @@
 				</template>
 				<template #size="scope">
 					<span v-if="scope.row.type == 'folder'"></span>
-					<span v-else>{{scope.row.file_size}}KB</span>
+					<span v-else>{{scope.row.file_size}}</span>
 				</template>
 				<template #type="scope">
 					<span v-if="scope.row.type == 'folder'">文件夹</span>
@@ -89,27 +91,27 @@
 	</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>-->
 
 </template>
 
 <script>
 import saveDialog from './save'
 import uploadFile from './uploadFile'
-// import permissionDialog from './permission'
 
 export default {
 	name: 'document',
 	components: {
 		saveDialog,
 		uploadFile
-		// permissionDialog
 	},
 	data() {
 		return {
 			size:'small',
+			routerList: this.$store.state.global.docsRouter,
+			docsList:[],
+			docsNextShow:false,
+
 			dialog: {
 				save: false,
 				permission: false
@@ -119,8 +121,11 @@ export default {
 				column:[]
 			},
 			selection: [],
-			search: {
+
-				keyword: null
+			params: {
+				keyword: "",
+				folder_id:"",
+				name:""
 			}
 		}
 	},
@@ -129,53 +134,52 @@ export default {
 		add(){
 			this.dialog.save = true
 			this.$nextTick(() => {
-				this.$refs.saveDialog.open()
+				this.$refs.saveDialog.open('add').setData(this.params)
 			})
 		},
 		//编辑
-		table_edit(row){
+		table_edit(){
+			if(this.selection.length!=1){
+				return
+			}
+			let row = this.selection[0];
 			this.dialog.save = true
 			this.$nextTick(() => {
 				this.$refs.saveDialog.open('edit').setData(row)
 			})
 		},
-		//查看
+		// 上传附件
-		table_show(row){
-			this.dialog.save = true
-			this.$nextTick(() => {
-				this.$refs.saveDialog.open('show').setData(row)
-			})
-		},
 		uploadFile(){
 			this.$nextTick(()=>{
-				this.$refs.uploadFile.importFile();
+				this.$refs.uploadFile.importFile(this.params);
 			})
 		},
-		//权限设置
-		permission(){
-			this.dialog.permission = true
-			this.$nextTick(() => {
-				this.$refs.permissionDialog.open()
-			})
-		},
-		//删除
-		async table_del(row){
-			const reqData = {id: row.id};
-			const res = await this.$API.demo.post.post(reqData);
-			if(res.code == 200){
-				this.$refs.table.refresh()
-				this.$message.success("删除成功")
-			}
-		},
 		//批量删除
 		async batch_del(){
-			this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？如果删除项中含有子集将会被一并删除`, '提示', {
+			const isFolder = this.selection.some(em=>em.type == "folder");
+			const isFile = this.selection.some(em=>em.type == "file");
+			if(isFolder && isFile){
+				this.$message.warning('只能删除同类型的文件，不能同时删除文件和文件夹');
+				return
+			}
+
+			this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
 				type: 'warning'
-			}).then(() => {
+			}).then(async () => {
 				const loading = this.$loading();
-				this.$refs.table.refresh()
+				const params = {ids: this.selection.map(em => em.id)};
+				let res = {};
+				if(isFolder){
+					res = await this.$API.docs.manager.deleteFolder.post(params);
+				}
+				if(isFile){
+					res = await this.$API.docs.manager.deleteFile.post(params);
+				}
+				if (res.code == 200) {
+					this.$refs.table.refresh();
+					this.$message.success("删除成功");
+				}
 				loading.close();
-				this.$message.success("操作成功")
 			}).catch(() => {
 
 			})
@@ -184,36 +188,23 @@ export default {
 		selectionChange(selection){
 			this.selection = selection;
 		},
-		//表格内开关
+		prev(){
-		changeSwitch(val, row){
+			this.routerList.splice(this.routerList.length-1,1);
-			row.status = row.status == '1'?'0':'1'
+			this.$store.commit("SET_docs_router", this.routerList);
-			row.$switch_status = true;
+
-			setTimeout(()=>{
+			this.params.folder_id = this.routerList[this.routerList.length-1].id;
-				delete row.$switch_status;
+			this.$refs.table.upData(this.params);
-				row.status = val;
+
-				this.$message.success("操作成功")
+			this.docsNextShow = true;
-			}, 500)
+		},
+		next(){
+			console.log(this.docsList,366)
 		},
 		//搜索
 		upSearch(){
+			this.$refs.table.upData(this.params);
+		},
 
-		},
-		//根据ID获取树结构
-		filterTree(id){
-			let target = null;
-			function filter(tree){
-				tree.forEach(item => {
-					if(item.id == id){
-						target = item
-					}
-					if(item.children){
-						filter(item.children)
-					}
-				})
-			}
-			filter(this.$refs.table.tableData)
-			return target
-		},
 		//本地更新数据
 		handleSaveSuccess(data, mode){
 			if(mode=='add'){
@@ -226,6 +217,21 @@ export default {
 		uploadFileSuccess(){
 			this.$refs.table.refresh();
 		},
+		// 打开文件夹
+		openFolder(row){
+			let arrList = this.routerList;
+			let params = {
+				name:row.name,
+				id:row.id
+			}
+			arrList.push(params);
+			this.$store.commit("SET_docs_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/save.vue

@@ -65,8 +65,13 @@ export default {
 		},
 		//表单注入数据
 		setData(data){
-			this.form.parent_id = data.id
+			this.form.parent_id = data.folder_id;
-			this.form.name = data.name
+			this.form.name = data.name;
+
+			if(this.mode == 'edit'){
+				this.form.parent_id = data.parent_id;
+				this.form.id = data.id;
+			}
 		}
 	}
 }

src/views/docsManager/share.vue

@@ -1,24 +1,257 @@
 <template>
-	<div></div>
+	<el-container class="mainHeaderNoPadding">
+		<el-header class="docsHeaderMain">
+			<el-row class="docsRow">
+				<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 rightArrow"><el-icon><el-icon-ArrowRightBold/></el-icon></div>
+						</div>
+						<div class="refreshBox">
+							<el-icon><el-icon-RefreshLeft/></el-icon>
+						</div>
+						<div class="breadcrumb">
+							<el-breadcrumb separator-icon="el-icon-ArrowRight">
+								<el-breadcrumb-item>我的文档</el-breadcrumb-item>
+							</el-breadcrumb>
+						</div>
+					</div>
+				</el-col>
+				<el-col :span="4">
+					<el-input type="text" :size="size" prefix-icon="el-icon-Search" placeholder="搜索"></el-input>
+				</el-col>
+			</el-row>
+		</el-header>
+		<el-header>
+			<div class="left-panel">
+				<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="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-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="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-menu>
+					</template>
+				</el-dropdown>
+				<el-button type="primary" plain :size="size" icon="el-icon-sort" :disabled="selection.length==0"></el-button>
+			</div>
+			<div class="right-panel">
+
+			</div>
+		</el-header>
+		<el-main class="nopadding">
+			<scTable ref="table" :apiObj="list.apiObj" :column="list.column" row-key="id" @selection-change="selectionChange" :size="size" stripe :rowChild="false">
+				<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'">
+						<el-icon size="large"><sc-icon-Folder/></el-icon>
+						<div class="text">{{scope.row.name}}</div>
+					</div>
+					<div class="nameBox" v-else>
+						<el-icon size="large"><sc-icon-Excel/></el-icon>
+						<div class="text">{{scope.row.file_name}}</div>
+					</div>
+				</template>
+				<template #size="scope">
+					<span v-if="scope.row.type == 'folder'"></span>
+					<span v-else>{{scope.row.file_size}}</span>
+				</template>
+				<template #type="scope">
+					<span v-if="scope.row.type == 'folder'">文件夹</span>
+					<span v-else>
+						{{scope.row.file_suffix}}文件
+					</span>
+				</template>
+				<template #is_share="scope">
+					{{scope.row.is_share?'是':'否'}}
+				</template>
+			</scTable>
+		</el-main>
+	</el-container>
+
+	<uploadFile ref="uploadFile" @uploadFileSuccess="uploadFileSuccess" title="上传附件"></uploadFile>
+	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
+
 </template>
 
 <script>
-export default {
+import saveDialog from './save'
-	name: "share",
+import uploadFile from './uploadFile'
-	data(){
-		return{
 
+export default {
+	name: 'share',
+	components: {
+		saveDialog,
+		uploadFile
+	},
+	data() {
+		return {
+			size:'small',
+			dialog: {
+				save: false,
+				permission: false
+			},
+			list:{
+				apiObj: this.$API.docs.share.list,
+				column:[]
+			},
+			selection: [],
+			search: {
+				keyword: null
+			}
 		}
 	},
-	mounted() {
+	methods: {
+		//添加
+		add(){
+			this.dialog.save = true
+			this.$nextTick(() => {
+				this.$refs.saveDialog.open()
+			})
+		},
+		//编辑
+		table_edit(row){
+			this.dialog.save = true
+			this.$nextTick(() => {
+				this.$refs.saveDialog.open('edit').setData(row)
+			})
+		},
+		//查看
+		table_show(row){
+			this.dialog.save = true
+			this.$nextTick(() => {
+				this.$refs.saveDialog.open('show').setData(row)
+			})
+		},
+		uploadFile(){
+			this.$nextTick(()=>{
+				this.$refs.uploadFile.importFile();
+			})
+		},
+		//权限设置
+		permission(){
+			this.dialog.permission = true
+			this.$nextTick(() => {
+				this.$refs.permissionDialog.open()
+			})
+		},
+		//删除
+		async table_del(row){
+			const reqData = {id: row.id};
+			const res = await this.$API.demo.post.post(reqData);
+			if(res.code == 200){
+				this.$refs.table.refresh()
+				this.$message.success("删除成功")
+			}
+		},
+		//批量删除
+		async batch_del(){
+			const isFolder = this.selection.some(em=>em.type == "folder");
+			const isFile = this.selection.some(em=>em.type == "file");
+			if(isFolder && isFile){
+				this.$message.warning('只能删除同类型的文件，不能同时删除文件和文件夹');
+				return
+			}
 
-	},
+			this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
-	methods:{
+				type: 'warning'
+			}).then(async () => {
+				const loading = this.$loading();
+				const params = {ids: this.selection.map(em => em.id)};
+				let res = {};
+				if(isFolder){
+					res = await this.$API.docs.manager.deleteFolder.post(params);
+				}
+				if(isFile){
+					res = await this.$API.docs.manager.deleteFile.post(params);
+				}
+				if (res.code == 200) {
+					this.$refs.table.refresh();
+					this.$message.success("删除成功");
+				}
+				loading.close();
+			}).catch(() => {
 
+			})
+		},
+		//表格选择后回调事件
+		selectionChange(selection){
+			this.selection = selection;
+		},
+		//表格内开关
+		changeSwitch(val, row){
+			row.status = row.status == '1'?'0':'1'
+			row.$switch_status = true;
+			setTimeout(()=>{
+				delete row.$switch_status;
+				row.status = val;
+				this.$message.success("操作成功")
+			}, 500)
+		},
+		//搜索
+		upSearch(){
+
+		},
+		//根据ID获取树结构
+		filterTree(id){
+			let target = null;
+			function filter(tree){
+				tree.forEach(item => {
+					if(item.id == id){
+						target = item
+					}
+					if(item.children){
+						filter(item.children)
+					}
+				})
+			}
+			filter(this.$refs.table.tableData)
+			return target
+		},
+		//本地更新数据
+		handleSaveSuccess(data, mode){
+			if(mode=='add'){
+				this.$refs.table.refresh()
+			}else if(mode=='edit'){
+				this.$refs.table.refresh()
+			}
+		},
+
+		uploadFileSuccess(){
+			this.$refs.table.refresh();
+		},
 	}
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
-
+.nameBox{
+	display: flex;align-items: center;
+	cursor: pointer;
+	.el-icon{
+		margin-right: 8px;
+	}
+	.text{
+		overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
+	}
+}
 </style>

src/views/docsManager/uploadFile.vue

@@ -54,7 +54,7 @@
 			</el-upload>
 		</div>
 		<template #footer>
-			<el-button @click="visible=false">取 消</el-button>
+			<el-button @click="close">取 消</el-button>
 			<el-button type="primary" @click="save">确 定</el-button>
 		</template>
 	</el-dialog>
@@ -81,6 +81,10 @@ export default {
 			},
 			upload_data:{},
 			params:{},
+			parentParams:{
+				folder_id:"",
+				unique:""
+			},
 
 			progressShow:false,
 			uploadShow:false,
@@ -101,11 +105,13 @@ export default {
 	methods:{
 		getWsResult(res){
 			if(res.data && (res.data.type == 12)){
+				this.progressShow = true;
+
 				this.listProgress.forEach((em,index)=>{
 					if(em.uuid == res.data.file_unique_id){
 						em.rate = res.data.rate
 						if(res.data.status == 1){
-							this.listProgress.splice(index,1);
+							// this.listProgress.splice(index,1);
 							this.fileList.splice(index,1);
 						}
 					}
@@ -120,8 +126,9 @@ export default {
 		},
 
 		// 导入文件
-		importFile(){
+		importFile(params){
 			this.visible = true;
+			this.parentParams = params;
 		},
 		// 上传前
 		beforeUpload(file){
@@ -132,22 +139,32 @@ export default {
 		},
 		async uploadFile() {
 			try {
-				const formData = new FormData();
+				this.setParamsData();
-				for(let i in this.fileList){
-					formData.append('files[]', this.fileList[i]);
-				}
-
-				for (const key in this.upload_data) {
-					formData.append(key, this.upload_data[key]);
-				}
-				this.params = formData;
 			} catch (error) {
 				console.log(error)
 			}
 		},
+		// 数据处理
+		setParamsData(){
+			const formData = new FormData();
+			for(let i in this.fileList){
+				formData.append('files[]', this.fileList[i]);
+			}
 
+			for (const key in this.upload_data) {
+				formData.append(key, this.upload_data[key]);
+			}
+			formData.append('folder_id', this.parentParams['folder_id']);
+			this.params = formData;
+		},
 		deleteFileNum(num){
 			this.handleRemove(this.fileList[num], this.fileList);
+			this.setParamsData();
+		},
+		close(){
+			this.visible = false;
+			this.progressShow = false;
+			this.listProgress = []
 		},
 		async save() {
 			const res = await this.$API.docs.manager.upload.post(this.params);
@@ -239,13 +256,14 @@ export default {
 			position: absolute;
 			right: 0;
 			top: 1px;
-			width: 16px;
+			width: 14px;
-			height: 16px;
+			height: 14px;
 			border-radius: 50%;
 			background: #AAAAAA;
 			display: flex;
 			align-items: center;
 			justify-content: center;
+			cursor: pointer;
 			.icon{
 				width: 12px;height: 12px;
 				color: var(--el-color-white);