Merge pull request #993 from iview/2.0

增加JS控制关闭页面方法，增加关闭页面前的钩子

Author: Lison

src/view/main/components/fullscreen/fullscreen.vue renamed to src/components/main/components/fullscreen/fullscreen.vue

@@ -36,6 +36,7 @@
 
 <script>
 import { showTitle, routeEqual } from '@/libs/util'
+import beforeClose from '@/router/before-close'
 export default {
   name: 'TagsNav',
   props: {
@@ -108,8 +109,19 @@ export default {
       }
     },
     handleClose (current) {
-      let res = this.list.filter(item => !routeEqual(current, item))
-      this.$emit('on-close', res, undefined, current)
+      if (current.meta && current.meta.beforeCloseName && current.meta.beforeCloseName in beforeClose) {
+        new Promise(beforeClose[current.meta.beforeCloseName]).then(close => {
+          if (close) {
+            this.close(current)
+          }
+        })
+      } else {
+        this.close(current)
+      }
+    },
+    close (route) {
+      let res = this.list.filter(item => !routeEqual(route, item))
+      this.$emit('on-close', res, undefined, route)
     },
     handleClick (item) {
       this.$emit('input', item)

src/view/main/components/fullscreen/index.js renamed to src/components/main/components/fullscreen/index.js

@@ -114,34 +114,34 @@ export default {
       this.collapsed = state
     },
     handleCloseTag (res, type, route) {
-      let openName = ''
       if (type === 'all') {
         this.turnToPage('home')
-        openName = 'home'
       } else if (routeEqual(this.$route, route)) {
         if (type === 'others') {
-          openName = route.name
         } else {
           const nextRoute = getNextRoute(this.tagNavList, route)
           this.$router.push(nextRoute)
-          openName = nextRoute.name
         }
       }
       this.setTagNavList(res)
-      this.$refs.sideMenu.updateOpenName(openName)
     },
     handleClick (item) {
       this.turnToPage(item)
     }
   },
   watch: {
     '$route' (newRoute) {
+      const { name, query, params, meta } = newRoute
+      this.addTag({
+        route: { name, query, params, meta },
+        type: 'push'
+      })
       this.setBreadCrumb(newRoute.matched)
       this.setTagNavList(getNewTagList(this.tagNavList, newRoute))
+      this.$refs.sideMenu.updateOpenName(newRoute.name)
     }
   },
   mounted () {
-    console.log(123123123131231)
     /**
      * @description 初始化设置面包屑导航和标签导航
      */

src/view/main/components/header-bar/custom-bread-crumb/custom-bread-crumb.less renamed to src/components/main/components/header-bar/custom-bread-crumb/custom-bread-crumb.less

@@ -172,6 +172,7 @@ export const getNextRoute = (list, route) => {
     res = getHomeRoute(list)
   } else {
     const index = list.findIndex(item => routeEqual(item, route))
+    console.log(route, index, list.length)
     if (index === list.length - 1) res = list[list.length - 2]
     else res = list[index + 1]
   }

src/view/main/components/header-bar/custom-bread-crumb/custom-bread-crumb.vue renamed to src/components/main/components/header-bar/custom-bread-crumb/custom-bread-crumb.vue

@@ -11,7 +11,6 @@ import importDirective from '@/directive'
 import 'iview/dist/styles/iview.css'
 import './index.less'
 import '@/assets/icons/iconfont.css'
-// import '@/mock'
 // 实际打包时应该不引入mock
 /* eslint-disable */
 if (process.env.NODE_ENV !== 'production') require('@/mock')

src/view/main/components/header-bar/custom-bread-crumb/index.js renamed to src/components/main/components/header-bar/custom-bread-crumb/index.js

@@ -0,0 +1,17 @@
+import { Modal } from 'iview'
+
+const beforeClose = {
+  before_close_normal: (resolve) => {
+    Modal.confirm({
+      title: '确定要关闭这一页吗',
+      onOk: () => {
+        resolve(true)
+      },
+      onCancel: () => {
+        resolve(false)
+      }
+    })
+  }
+}
+
+export default beforeClose

src/view/main/components/header-bar/header-bar.less renamed to src/components/main/components/header-bar/header-bar.less

@@ -1,4 +1,4 @@
-import Main from '@/view/main'
+import Main from '@/components/main'
 import parentView from '@/components/parent-view'
 
 /**
@@ -8,6 +8,7 @@ import parentView from '@/components/parent-view'
  *  notCache: (false) 设为true后页面不会缓存
  *  access: (null) 可访问该页面的权限数组，当前路由设置的权限会影响子路由
  *  icon: (-) 该页面在左侧菜单、面包屑和标签导航处显示的图标，如果是自定义图标，需要在图标名称前加下划线'_'
+ *  beforeCloseName: (-) 设置该字段，则在关闭当前tab页时会去'@/router/before-close.js'里寻找该字段名对应的方法，作为关闭前的钩子函数
  * }
  */
 
@@ -213,7 +214,8 @@ export default [
         name: 'tools_methods_page',
         meta: {
           icon: 'ios-hammer',
-          title: '工具方法'
+          title: '工具方法',
+          beforeCloseName: 'before_close_normal'
         },
         component: () => import('@/view/tools-methods/tools-methods.vue')
       }
@@ -303,7 +305,8 @@ export default [
         meta: {
           icon: 'md-flower',
           title: '动态路由',
-          notCache: true
+          notCache: true,
+          beforeCloseName: 'before_close_normal'
         },
         component: () => import('@/view/argu-page/params.vue')
       },

src/view/main/components/header-bar/header-bar.vue renamed to src/components/main/components/header-bar/header-bar.vue

@@ -1,5 +1,25 @@
-import { getBreadCrumbList, setTagNavListInLocalstorage, getMenuByRouter, getTagNavListFromLocalstorage, getHomeRoute, routeHasExist } from '@/libs/util'
+import {
+  getBreadCrumbList,
+  setTagNavListInLocalstorage,
+  getMenuByRouter,
+  getTagNavListFromLocalstorage,
+  getHomeRoute,
+  getNextRoute,
+  routeHasExist,
+  routeEqual
+} from '@/libs/util'
+import beforeClose from '@/router/before-close'
+import router from '@/router'
 import routers from '@/router/routers'
+
+const closePage = (state, route) => {
+  const nextRoute = getNextRoute(state.tagNavList, route)
+  state.tagNavList = state.tagNavList.filter(item => {
+    return !routeEqual(item, route)
+  })
+  router.push(nextRoute)
+}
+
 export default {
   state: {
     breadCrumbList: [],
@@ -20,6 +40,20 @@ export default {
         setTagNavListInLocalstorage([...list])
       } else state.tagNavList = getTagNavListFromLocalstorage()
     },
+    closeTag (state, route) {
+      let tag = state.tagNavList.filter(item => routeEqual(item, route))
+      route = tag[0] ? tag[0] : null
+      if (!route) return
+      if (route.meta && route.meta.beforeCloseName && route.meta.beforeCloseName in beforeClose) {
+        new Promise(beforeClose[route.meta.beforeCloseName]).then(close => {
+          if (close) {
+            closePage(state, route)
+          }
+        })
+      } else {
+        closePage(state, route)
+      }
+    },
     addTag (state, { route, type = 'unshift' }) {
       if (!routeHasExist(state.tagNavList, route)) {
         if (type === 'push') state.tagNavList.push(route)

src/view/main/components/header-bar/index.js renamed to src/components/main/components/header-bar/index.js

@@ -20,6 +20,16 @@
         </i-col>
       </Row>
     </Card>
+    <Card shadow style="margin-top: 10px;">
+      <Row>
+        <i-col span="4">
+          <Button @click="handleCloseTag">关闭工具方法页</Button>
+        </i-col>
+        <i-col span="20">
+          <p>动态路由，添加query</p>
+        </i-col>
+      </Row>
+    </Card>
   </div>
 </template>
 
@@ -29,7 +39,8 @@ export default {
   name: 'tools_methods_page',
   methods: {
     ...mapMutations([
-      'addTag'
+      'addTag',
+      'closeTag'
     ]),
     createTagParams () {
       const id = parseInt(Math.random() * 100000)
@@ -42,11 +53,6 @@ export default {
           title: `动态路由-${id}`
         }
       }
-      this.addTag({
-        route: route,
-        type: 'push'
-      })
-      console.log(route)
       this.$router.push(route)
     },
     createTagQuery () {
@@ -60,11 +66,12 @@ export default {
           title: `参数-${id}`
         }
       }
-      this.addTag({
-        route: route,
-        type: 'push'
-      })
       this.$router.push(route)
+    },
+    handleCloseTag () {
+      this.closeTag({
+        name: 'tools_methods_page'
+      })
     }
   }
 }

src/view/main/components/header-bar/sider-trigger/index.js renamed to src/components/main/components/header-bar/sider-trigger/index.js

@@ -26,6 +26,8 @@ module.exports = {
   baseUrl: BASE_URL,
   // tweak internal webpack configuration.
   // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
+  // 如果你不需要使用eslint，把lintOnSave设为false即可
+  lintOnSave: true,
   chainWebpack: config => {
     config.resolve.alias
       .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))