修改， 增加自定义创建目录成功事件，对接口，优化

public/loadhead.css

@@ -12,6 +12,7 @@ a{color:#464c5c;text-decoration:none;}
 .elementhidden{visibility:hidden !important;}
 .verMiddle{vertical-align:middle !important;}
 .vercenter{text-align:center !important;}
+.textright{text-align:right !important;}
 .verbold{font-weight:bold !important;}
 .qcmargin{margin:0 !important;}
 .qcpadding{padding:0 !important;}

src/api/user.js

@@ -23,4 +23,13 @@ export function mirlist(datas) {
         method: 'post',
         data: datas
     })
+}
+
+// 创建目录
+export function mkdir(datas) {
+    return request({
+        url: '/api/mkdir',
+        method: 'post',
+        data: datas
+    })
 }

src/components/Breadcrumb/index.vue

@@ -32,7 +32,7 @@ export default {
       // only show routes with meta.title
       
       let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
-      console.log(this.$route);
+      //console.log(this.$route);
       const first = matched[0]
 
       if (!this.isDashboard(first)) {

src/layout/components/Sidebar/index.vue

@@ -22,6 +22,7 @@
 <script>
 
 import { mapGetters } from 'vuex'
+import EventBus from '@/utils/EventBus.js'
 import Logo from './Logo'
 import SidebarItem from './SidebarItem'
 import variables from '@/styles/variables.scss'
@@ -31,9 +32,17 @@ import { mirlist } from '@/api/user'
 //console.log(menusdata);
 export default {
   components: { SidebarItem, Logo },
+
   created: function () {
     this.getmunusdata();
+    
+  },
+
+  mounted() {
+    EventBus.$on('mkdirSuccess', this.getmunusdata)
+    //console.log(this.$root);
   },
+
   data() {
     return {
         routes:menusdata
@@ -52,7 +61,7 @@ export default {
       const route = this.$route
       const { meta, path } = route
       const menusindex = window.location.href
-        console.log(1);
+        //console.log(1);
       //  因为菜单栏的生成和路由是解耦的，因为动态获取以及添加的菜单都是用的同一个path带不同参数，路由没法获取，所以通过获取地址来选中
       if (menusindex.indexOf('?id') != -1) {
         return menusindex.split('/#')[1]
@@ -101,12 +110,18 @@ export default {
 
      getmunusdata() {
         let thiss = this;
-        //console.log(this.$route);
+        console.log(1);
         // console.log(this.$store);
        
         mirlist().then(response => {
             let datamain = response.data;
             this.routes[1].children = this.SplicingMenuTree(datamain.data.menus);
+            //console.log();
+            let dirTree = datamain.data.dirTree;
+            if (dirTree.id) {
+                //this.$router.push({path: '/filemange/subfile?id='+dirTree.id});
+            }
+            
 
         }).catch(function (error) {
             thiss.$message({

src/styles/sidebar.scss

@@ -17,7 +17,7 @@
     top: 91px;
     bottom: 0;
     left: 0;
-    z-index: 2002;
+    z-index: 1888;
     overflow: hidden;
 
     .el_submenu_link{width:76%;height:56px;z-index:100;position:absolute;left:0;top:0;bottom:0;right:10%;}

src/utils/EventBus.js

@@ -0,0 +1,5 @@
+import Vue from 'vue' // 引入vue
+
+const EventBus = new Vue() // 创建实例
+
+export default EventBus // 导出

src/utils/index.js

@@ -1,6 +1,4 @@
-/**
- * Created by PanJiaChen on 16/11/18.
- */
+
 
 /**
  * Parse the time to string

src/views/login/index.vue

@@ -184,7 +184,7 @@ export default {
                 }
                 //console.log(response)
                 
-                this.$router.push({path: '/filemange'})
+                this.$router.push({path: '/filemange/index'})
                 //console.log('6666');
             }).catch(function (error) {
                 thiss.$message({

src/views/subfile/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="subfile_main">
+  <div class="subfile_main" v-loading="subloading">
 		<div class="block">
 			<el-date-picker
 			v-model="value2"
@@ -11,47 +11,106 @@
 			end-placeholder="结束日期"
 			:picker-options="pickerOptions">
 			</el-date-picker>
-			<el-button type="primary" icon="el-icon-search">搜索</el-button>
+			<el-button class="sou_bottom" type="primary" icon="el-icon-search">搜索</el-button>
 		</div>
 		<div>
-            
+			<!-- 目录数据列表 -->
+            <div class="folder_bottom">
+				<!-- <span>目录：</span> -->
+                <a v-for="data in dirdata" :key="data.id" :href="'#/filemange/subfile?id='+data.id"><el-button type="warning" icon="el-icon-notebook-1">{{data.directory}}</el-button></a>
+            </div>
+
+            <div class="use_button textright">
+                <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>
+                <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
+            </div>
+
+			<!-- 文件数据列表 -->
+            <el-table
+                :data="tableData"
+                border
+                style="width: 100%">
+                <el-table-column
+                prop="date"
+                label="时间"
+                width="auto">
+                </el-table-column>
+                <el-table-column
+                label="图片"
+                width="auto">
+					<template slot-scope="scope">
+						<img :src="'http://192.168.0.100/'+scope.row.image" alt="图片"/>
+					</template>
+					
+                </el-table-column>
+                <el-table-column
+                prop="name"
+                label="名称">
+                </el-table-column>
+                <el-table-column
+                label="操作">
+                <div class="file_caozuo vercenter">
+                    <el-button size="mini">重命名</el-button>
+                    <el-button size="mini">下载</el-button>
+                </div>
+                <div class="file_caozuo2 vercenter">
+                    <el-button size="mini">移动</el-button>
+                    <el-button size="mini" type="danger">删除</el-button>
+                </div>
+                
+                </el-table-column>
+            </el-table>
+
+            <!-- 创建目录弹框 -->
+            <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-item label="父级目录" :label-width="formLabelWidth">
+                        <el-select v-model="form.region" placeholder="请选择父级目录">
+                            <el-option label="区域一" value="shanghai"></el-option>
+                        </el-select>
+                    </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>
 		</div>
   </div>
 </template>
 
 <script>
 
-import { mirlist } from '@/api/user'
+import EventBus from '@/utils/EventBus.js'
+import { mirlist, mkdir } from '@/api/user'
 import defaultSettings from '@/settings.js'
 
 export default {
 
     watch: {
+        // 点击不同目录请求不同接口
         $route(to, from) {
 			
-			let can = {};
-			const menusindex = window.location.href
-			if (menusindex.indexOf('?id') != -1) {
-				//console.log(menusindex.split('?id=')[1]);
-				can.id =  menusindex.split('?id=')[1]
-			}
-
-
-            mirlist(can).then(response => {
-				let datamain = response.data;
-				
-
-			}).catch(function (error) {
-				thiss.$message({
-					showClose: true,
-					message: error,
-					type: 'error'
-				});
-			});
+			this.getFileData();
         }
     },
-  filters: {
+//     beforeRouteUpdate(to, from, next) {
+//         alert(0);
+//         next();
+//   },
     
+  created() {
+    this.getFileData();
+	
+  },
+
+  filters: {
+
   },
   data() {
     return {
@@ -82,14 +141,142 @@ export default {
             }
           }]
         },
-        value2: ''
+        value2: '',
+
+        tableData: [],
+
+        // 创建目录弹出框数据
+        dirbox: false,
+        dirform: {
+          dir: '',
+		  parent: ''
+        },
+        formLabelWidth: '',
+
+		// 更新当前目录的子目录
+		dirdata: [],
+
+		subloading: false,  //切换目录loading
+		mkdirloadings: false
       };
-  },
-  created() {
-    
   },
   methods: {
-    
+    getFileData() {
+        let can = {};
+		const menusindex = window.location.href
+		if (menusindex.indexOf('?id') != -1) {
+			//console.log(menusindex.split('?id=')[1]);
+			can.id =  menusindex.split('?id=')[1]
+		}
+
+		let thiss = this;
+		this.subloading = true;
+		mirlist(can).then(response => {
+			let datamain = response.data;
+			let maindata = datamain.data.dirTree;
+			if (datamain.code == 1) {
+				//console.log(maindata.directories.length);
+				this.dirdata = []
+				this.tableData = []
+				if (maindata.directories) {
+					this.dirdata = maindata.directories;
+				}
+
+				if (maindata.files) {
+					this.tableData = this.forObjectData(maindata.files);
+					
+				}
+
+				this.dirform.parent = maindata.realpath;
+				this.subloading = false;
+				
+			}
+			
+		}).catch(function (error) {
+			thiss.$message({
+				showClose: true,
+				message: error,
+				type: 'error'
+			});
+		});
+    },
+
+	forObjectData(objectd) {
+		let newObject = null, arrObjs = [];
+		
+		Object.keys(objectd).forEach(item => {
+						
+			newObject = {
+				date: '2016-05-03',
+				image: objectd[item].path,
+				name: objectd[item].filename
+			}
+		
+			arrObjs.push(newObject);    
+		});
+		
+		return arrObjs;
+		//console.log(arrObjs);
+	},
+
+	// 创建目录
+	mkdirs() {
+		this.mkdirloadings = true;
+		EventBus.$emit('mkdirSuccess');
+		mkdir(this.dirform).then(response => {
+			let datamain = response.data;
+			let maindata = datamain.data.dirTree;
+			if (datamain.code == 1) {
+				
+
+				//this.subloading = false;
+			}
+			
+			this.mkdirloadings = false;
+			this.dirbox = false;
+		}).catch(function (error) {
+			thiss.$message({
+				showClose: true,
+				message: error,
+				type: 'error'
+			});
+		});
+	},
+
+	// 删除目录
+	rmdirm() {
+		this.rmdirloadings = true;
+		mkdir(this.dirform).then(response => {
+			let datamain = response.data;
+			let maindata = datamain.data.dirTree;
+			if (datamain.code == 1) {
+				
+
+				//this.subloading = false;
+			}
+			
+			this.dirbox = false;
+		}).catch(function (error) {
+			thiss.$message({
+				showClose: true,
+				message: error,
+				type: 'error'
+			});
+		});	
+	}
   }
 }
 </script>
+
+<style lang="scss">
+.subfile_main{
+    padding:26px 5% 12px 5%;
+    .block{margin:0 0 28px 0;}
+    .sou_bottom{margin-left:10px;}
+    .use_button{margin:15px 0 16px 0;}
+    .file_caozuo2{margin:6px 0 0 0;}
+    .el-table td{padding:9px 0}
+	.folder_bottom a{margin:0 6px;}
+	.el-table__body-wrapper img{width:100px;}
+}
+</style>