jialuomaadmin/src/views/filemange/index.vue

<template>
    <div class="filemange_container" v-loading="subloading" element-loading-text="数据加载中...">
        <div class="use_button">
            <el-button type="primary" icon="el-icon-edit" @click="dirbox = true">创建目录</el-button>
            <!-- <el-button type="primary" icon="el-icon-edit" @click="rmdirm">删除目录</el-button>
            <el-button type="primary" icon="el-icon-edit">重命名</el-button> -->
        </div>
        <div v-on:click="fileTableMClick">
            <!-- 子目录数据列表 如果不需要显示空数据提示，可以用css隐藏-->
            <el-table
                :data="dirdata"
                empty-text="暂无子目录数据"
                border
                style="width: 100%" class="filesmd verleft">
                <!-- <el-table-column
                align="center"
                prop="date"
                label="时间"
                width="auto">
                </el-table-column> -->
                <el-table-column
                align="left"
                prop="name"
                label="名称">
                </el-table-column>
                <el-table-column
                align="left"
                label="类型"
                width="auto">
                    <template slot-scope="scope">
                        <div class="type_file_click">
                            <el-tooltip content="进入子目录" placement="bottom-start" effect="light">
                                <a :href="'#/filemange/subfile?id='+scope.row.id">
                            <!-- <el-button type="warning" icon="el-icon-notebook-1">{{scope.row.name}}</el-button> -->
                                    <img src="../../common/img/file.png" alt="图片"/>
                                    
                                </a>
                            </el-tooltip>
                            
                        </div>
                    </template>
                    
                </el-table-column>
                <el-table-column
                align="center"
                label="操作"
                width="auto">
                    <template slot-scope="scope">
                        <div class="file_caozuo">
                            <el-button size="mini" :filenames="scope.row.name" mark="rename">重命名</el-button>
                            <!-- <el-button size="mini">下载</el-button> -->
                        </div>
                        <div class="file_caozuo2">
                            <el-button size="mini" :realpath="scope.row.frealpath" mark="movefiledir">移动</el-button>
                            <el-button size="mini" mark="dirdelete" :filenames="scope.row.name" type="danger">删除</el-button>
                            
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 创建目录弹框 -->
        <el-dialog title="创建目录" :visible.sync="dirbox">
            <el-form :model="dirform">
                <el-form-item label="目录名称" :label-width="formLabelWidth">
                    <el-input v-model="dirform.dir" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dirbox = false">取 消</el-button>
                <el-button type="primary" @click="mkdirs" :loading="mkdirloadings">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 重新命名弹框 -->
        <el-dialog title="重命名" :visible.sync="renamebox">
            <el-form :model="renamefileform">
                <el-form-item label="新名称" :label-width="formLabelWidth">
                    <el-input v-model="renamefileform.to" autocomplete="off">
                        <template v-if="filesuffix" slot="append">{{filesuffix}}</template>
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="renamebox = false">取 消</el-button>
                <el-button type="primary" @click="renameFileDir" :loading="mkdirloadings">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 移动目录弹框 -->
        <el-dialog title="目录移动弹出框" :visible.sync="movebox">
            <el-form :model="movefileform">
                <el-form-item label="当前位置" :label-width="formLabelWidth">
                    <el-input v-model="movefileform.from" autocomplete="off">
                         
                    </el-input>
                </el-form-item>
                <el-form-item label="目标位置（请参考当前位置的格式填写目标位置，需要带上当前的文件名称）" :label-width="formLabelWidth">
                    <el-input v-model="movefileform.to" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="movebox = false">取 消</el-button>
                <el-button type="primary" @click="moveFileDir" :loading="mkdirloadings">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

//import { mapGetters } from 'vuex'
import { mirlist, mkdir, rmdirs, deletefile, renamefile, movefiledir} from '@/api/user'
import EventBus from '@/utils/EventBus.js'

export default {

    // 实例还没挂载
  created() {
    this.getFileData();
    //console.log(this.imgurl);
  },

data() {
    return {
        // 当前目录子目录数据
		dirdata: [],

        subloading: false,  //切换目录loading
		mkdirloadings: false, //创建目录loading
        // 创建目录弹出框数据
        dirbox: false,
        dirform: {
          dir: '',
          parent: ''
        },
        formLabelWidth: '',

        //删除目录数据
        rmdirform: {
          dir: '',
		  parent: ''
        },

        // 重命名文件数据
        renamebox: false,
        filesuffix:false,
        renamefileform: {
          from: '',
		  to: '',
          parent: ''
        },

        // 移动目录或者文件数据
        movebox: false,
        movefileform: {
          from: '',
		  to: ''
        },
    }
},

methods: {

    getFileData() {

		let thiss = this;
		this.subloading = true;
		mirlist().then(response => {
			let datamain = response.data;
            //console.log(maindata);
            this.dirdata = []
			if (datamain.code == 1) {
                let maindata = datamain.data.menus;
				//console.log(maindata.directories.length);
				if (maindata) {
                    this.dirdata = this.forObjectData(maindata);
				}

				// this.dirform.parent = maindata.realpath; //获取当前目录的位置 创建目录
				// this.rmdirform.parent = maindata.realpath; //获取当前目录的位置 删除目录
				// this.renamefileform.parent = maindata.realpath; //获取当前目录的位置 重命名
                // this.movefileform.from = maindata.realpath; // 移动目录
                //console.log(this.movefileform.from);
			}
            this.subloading = false;
		}).catch(error => {
			if (error.response) {
				thiss.$message({showClose: true,message: error.response.data.err,type: 'error'});
			} else if (error.request) {
				thiss.$message({showClose: true,message: error,type: 'error'});
			} else {
				thiss.$message({showClose: true,message: error.message, type: 'error'});
			}

            this.subloading = false;
		});
    },

    forObjectData(objectd) {
		let newObject = null, arrObjs = [];
		
		Object.keys(objectd).forEach(item => {
			let names = null;
            if (objectd[item].filename) {
                names = objectd[item].filename+'.'+objectd[item].extension;
            }
			newObject = {
				suffix:objectd[item].extension || '',
				image: objectd[item].path,
				name:  names || objectd[item].directory,
				id: objectd[item].id,
                frealpath: objectd[item].realpath || objectd[item].directory
			}
		
			arrObjs.push(newObject);    
		});
		
		return arrObjs;
		console.log(arrObjs);
	},

    // 创建目录
	mkdirs() {
		let thiss = this;
		if (!this.dirform.dir) {
			thiss.$message({showClose: true,message: '目录名不能为空',type: 'error'});
			return;
		}
        //console.log(this.dirform);
		this.mkdirloadings = true;
		mkdir(this.dirform).then(response => {
			let datamain = response.data;
			if (datamain.code == 1) {
				
				EventBus.$emit('mkdirSuccess'); //触发菜单栏刷新
				//EventBus.$emit('menuopemdsc'); //触发菜单栏刷新
				this.getFileData();

				this.dirform.dir = '';
				thiss.$message({showClose: true,message: datamain.msg, type: 'success'});
				//this.subloading = false;
			} else {
                thiss.$message({showClose: true,message: datamain.err, type: 'error'});
            }
			
			this.mkdirloadings = false;
			this.dirbox = false;
		}).catch(error => {
            //console.log(0);
			if (error.response) {
				thiss.mkdirloadings = false;
				thiss.$message({showClose: true,message: error.response.data.err,type: 'error'});
			} else if (error.request) {
				thiss.$message({showClose: true,message: error,type: 'error'});
			} else {
				thiss.$message({showClose: true,message: error.message, type: 'error'});
			}
		});
	},

    // 删除目录
	rmdirm() {
		let thiss = this;
		this.subloading = true;
        //console.log(this.rmdirform);
		rmdirs(this.rmdirform).then(response => {
			let datamain = response.data;
			let maindata = datamain.data.dirTree;
			if (datamain.code == 1) {
				
                EventBus.$emit('mkdirSuccess'); //触发菜单栏刷新
				this.getFileData();
                thiss.$message({showClose: true,message: datamain.msg,type: 'success'});
				//this.subloading = false;
			} else {
                thiss.$message({showClose: true,message: datamain.err,type: 'error'});
            }
			this.subloading = false;
			//this.dirbox = false;
		}).catch(error => {
			if (error.response) {
				thiss.$message({showClose: true,message: error.response.data.err,type: 'error'});
			} else if (error.request) {
				thiss.$message({showClose: true,message: error.response.data.err,type: 'error'});
			} else {
				thiss.$message({showClose: true,message: error.response.data.err,type: 'error'});
			}
            this.subloading = false;
		});
	},

    // 移动目录或者文件
    moveFileDir() {
        if (!this.movefileform.to || !this.movefileform.from) {
			this.$message({showClose: true,message: '不能为空',type: 'error'});
			return;
		}
		let thiss = this;
		this.subloading = true;
        //console.log(this.rmfileform);
		movefiledir(this.movefileform).then(response => {
			let datamain = response.data;
			if (datamain.code == 1) {
                console.log(66666);
				EventBus.$emit('mkdirSuccess'); //触发菜单栏刷新
                this.getFileData();
                thiss.$message({showClose: true,message: datamain.msg,type: 'success'});
				//this.subloading = false;
			} else {
                thiss.$message({showClose: true,message: datamain.err,type: 'error'});
            }

            this.subloading = false;
			
			this.movebox = false;
		}).catch(error => {
            this.subloading = false;
			if (error.response) {
				thiss.$message({showClose: true,message: error.response.data.err,type: 'error'});
			} else if (error.request) {
				thiss.$message({showClose: true,message: error.response.data.err,type: 'error'});
			} else {
				thiss.$message({showClose: true,message: error.response.data.err,type: 'error'});
			}
		});
	},

    // 重命名文件和目录
    renameFileDir() {
        if (!this.renamefileform.to) {
			this.$message({showClose: true,message: '新名称不能为空',type: 'error'});
			return;
		}

        if (this.filesuffix) {
            this.renamefileform.to += this.filesuffix;
        }
		let thiss = this;
		this.subloading = true;
        //console.log(this.rmfileform);
		renamefile(this.renamefileform).then(response => {
			let datamain = response.data;
			if (datamain.code == 1) {
				
                EventBus.$emit('mkdirSuccess'); //触发菜单栏刷新
                this.getFileData();
                thiss.$message({showClose: true,message: datamain.msg,type: 'success'});
				//this.subloading = false;
			} else {
                thiss.$message({showClose: true,message: datamain.err,type: 'error'});
            }

            this.subloading = false;
			
			this.renamebox = false;
		}).catch(error => {
            this.subloading = false;
			if (error.response) {
				thiss.$message({showClose: true,message: error.response.data.err,type: 'error'});
			} else if (error.request) {
				thiss.$message({showClose: true,message: error.response.data.err,type: 'error'});
			} else {
				thiss.$message({showClose: true,message: error.response.data.err,type: 'error'});
			}
		});
	},

    // table块事件监听
    fileTableMClick(e) {
        let dangQian = e.target, labelname = dangQian.tagName.toLowerCase(), chufazhe = e.currentTarget; //currentTarget得到调用当前函数的元素
        let getbutton = dangQian, objmark = null;
        if (labelname == 'span') {
            //console.log(dangQian.parentNode);
            getbutton = dangQian.parentNode;
        }

        objmark = getbutton.getAttribute('mark');

        // 点击删除目录
        if (objmark == 'dirdelete') {
            this.rmdirform.dir = getbutton.getAttribute('filenames');
            this.rmdirm();
            return;
        }

        // 点击重命名文件和目录
        if (objmark == 'rename') {
            this.renamefileform.from = getbutton.getAttribute('filenames');
            this.filesuffix = getbutton.getAttribute('suffixs');
            this.renamefileform.to = '';
            this.renamebox = true;
            //this.renameFileDir();
            return;
        }

        // 点击移动目录或文件
        if (objmark == 'movefiledir') {
            //this.movefileform.from = getbutton.getAttribute('filenames');
            this.movefileform.from = getbutton.getAttribute('realpath');
            this.movefileform.to = '';
            this.movebox = true;
            //this.renameFileDir();
            return;
        }
        //console.log(dangQian);
    }
}
}
</script>

<style lang="scss">

.filemange_container{
    padding:26px 5% 47px 5%;
    .block{margin:0 0 28px 0;}
    .sou_bottom{margin-left:10px;}
    .use_button{margin:15px 0 16px 0;}
	// .use_button>button{margin:0 10px 10px 0;}
    .file_caozuo2>button{margin-top:6px;}
    .el-table td{padding:9px 0}
	.folder_bottom a{margin:0 6px;}
	.el-table__body-wrapper img{width:100px;height:71px;}
	.el-drawer__body{text-align:center;padding:0 10% 20px 10%;}
	.request_main{text-align:center;margin:12px 0;}
	.addimgtext{line-height:25px;display:inline-block;color:#8c939d;vertical-align: middle;}
	.el-upload--picture-card i{vertical-align:middle;}
    .type_file_click img{width:64px;height:48px;}
    .type_file_click a{display:block;}
    // .el-table .is-center{text-align:left;}
}
</style>