(feature)使用ts重构

package.json

@@ -12,7 +12,6 @@
   },
   "dependencies": {
     "@riophae/vue-treeselect": "^0.0.38",
-    "D": "^1.0.0",
     "animate.css": "^3.7.2",
     "axios": "^0.19.0",
     "core-js": "^2.6.5",

src/myview/index.js

@@ -2,7 +2,7 @@ import CopyRight from './components/CopyRight'
 import WhiteSpace from './components/WhiteSpace'
 import Label from './components/Label'
 import LabelGroup from './components/LabelGroup'
-import Card from '..component/Card'
+import Card from './components/Card'
 
 const components = {
   CopyRight,

src/store/index.js → src/store/index.ts

@@ -1,8 +1,8 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
-import app from './app'
-import user from './user'
+import app from './newapp'
+import user from './newuser'
 
 Vue.use(Vuex)
 

src/store/newapp/index.ts

@@ -0,0 +1,71 @@
+import { State } from './interface'
+import { Menu } from '../newuser/interface'
+import { Commit } from 'vuex'
+
+const state: State = {
+  currentPage: null,
+  cachePages: [],
+  expandMisMenu: false,
+  loading: false
+}
+
+const getters = {
+  getCurrentPage: (state: State) => state.currentPage,
+  getCachePages: (state: State) => state.cachePages,
+  getCachePagesKeys: (state: State) => state.cachePages,
+  getExpandMisMenu: (state: State) => state.expandMisMenu,
+  getLoading: (state: State) => state.loading
+}
+
+const mutations = {
+  updateCurrentPage: (state: State, menu: Menu) => {
+    state.currentPage = menu
+  },
+  updateCachePages: (state: State, menu: Menu) => {
+    let isHave: Boolean = false
+    let { cachePages } = { ...state }
+    cachePages.forEach((item: Menu) => {
+      if (item.mid === menu.mid) {
+        isHave = true
+      }
+    })
+    if (!isHave) {
+      state.cachePages.push(menu)
+    }
+  },
+  changeExpandMisMenu: (state: State) => {
+    let { expandMisMenu } = { ...state }
+    state.expandMisMenu = !expandMisMenu
+  },
+  loadingStart: (state: State) => {
+    state.loading = true
+  },
+  loadingFinish: (state: State) => {
+    state.loading = false
+  }
+}
+
+const actions = {
+  UPDATECURRENTPAGE: (context: { commit: Commit }, menu: Menu) => {
+    context.commit('updateCurrentPage', menu)
+    context.commit('updateCachePages', menu)
+  },
+  CHANGEEXPANDMISMENU: (context: { commit: Commit }) => {
+    context.commit('changeExpandMisMenu')
+  },
+  LOADINGSTART: (context: { commit: Commit }) => {
+    context.commit('loadingStart')
+  },
+  LOADINGFINISHED: (context: { commit: Commit }) => {
+    context.commit('loadingFinish')
+  }
+}
+
+const newapp = {
+  state,
+  getters,
+  mutations,
+  actions
+}
+
+export default newapp

src/store/newapp/interface.ts

@@ -0,0 +1,8 @@
+import { Menu } from '../newuser/interface'
+
+export interface State {
+  currentPage: Menu | null,
+  cachePages: Array<Menu>,
+  expandMisMenu: boolean,
+  loading: boolean
+}

src/store/user.js → src/store/newuser/index.ts

@@ -1,25 +1,21 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
+import { State, CurrentUser } from './interface'
+import { Commit } from 'vuex'
 
-Vue.use(Vuex)
+const currentUser: CurrentUser = {
+  user: {},
+  menu: [],
+  dept: {}
+}
 
-const state = {
-  currentUser: {
-    user: {},
-    menu: [],
-    dept: {}
-  },
+const state: State = {
+  currentUser,
   isLogin: false
 }
 
 const getters = {
-  getUser (state) {
-    return state.currentUser.user
-  },
-  getMenu (state) {
-    return state.currentUser.menu
-  },
-  getMenuTree (state) {
+  getUser: (state: State) => state.currentUser.user,
+  getMenu: (state: State) => state.currentUser.menu,
+  getMenuTree: (state: State) => {
     let { menu } = { ...state.currentUser }
     // 找到一级菜单
     let menuTree = menu.filter(_menu => _menu.mlevel === 1)
@@ -29,39 +25,35 @@ const getters = {
     }
     return menuTree
   },
-  getDept (state) {
-    return state.currentUser.dept
-  },
-  getLogin (state) {
-    return state.isLogin
-  }
+  getDept: (state: State) => state.currentUser.dept,
+  getLogin: (state: State) => state.isLogin
 }
 
 const mutations = {
-  updateCurrentUser (state, currentUser) {
+  updateCurrentUser: (state: State, currentUser: CurrentUser) => {
     state.currentUser = currentUser
   },
-  changeLogin (state) {
+  changeLogin: (state: State) => {
     const { isLogin } = { ...state }
     state.isLogin = !isLogin
   }
 }
 
 const actions = {
-  UPDATECURRENTUSER (context, currentUser) {
+  UPDATECURRENTUSER (context: {commit: Commit}, currentUser: CurrentUser) {
     context.commit('updateCurrentUser', currentUser)
     context.commit('changeLogin', currentUser)
   },
-  CHANGELOGIN (context) {
+  CHANGELOGIN (context: {commit: Commit}) {
     context.commit('changeLogin')
   }
 }
 
-const usernew = {
+const newuser = {
   state,
   getters,
   mutations,
   actions
 }
 
-export default usernew
+export default newuser

src/store/newuser/interface.ts

@@ -0,0 +1,24 @@
+export interface Menu {
+  mid: number,
+  mkey: String,
+  mname: String,
+  micon: String,
+  mpath: String,
+  mtip: String,
+  mrender: String,
+  mpid: number,
+  mlevel: Number,
+  mstatus: Number,
+  child?: Array<Menu>
+}
+
+export interface CurrentUser {
+  user: any,
+  menu: Array<Menu>,
+  dept: any
+}
+
+export interface State {
+  currentUser: CurrentUser,
+  isLogin: boolean
+}

src/views/mis/MisContainer.vue

@@ -29,7 +29,7 @@
           </el-popover>
         </el-header>
         <el-main element-loading-spinner="iconfont mvloading loading-animation" v-loading="getLoading">
-          <mis-tab-navi />
+          <mis-tab-navi :navi-list="getCachePages" :active-navi="getCurrentPage" />
           <router-view v-if="getLogin" />
           <copy-right />
         </el-main>
@@ -56,8 +56,25 @@ export default {
       showSetting: false
     }
   },
+  watch: {
+    $route: {
+      handler (to, from) {
+        let getMenu = this.getMenu
+        let menu = false
+        for (let _menu of getMenu) {
+          if (_menu.mkey === to.name) {
+            menu = _menu
+          }
+        }
+        if (menu) {
+          this.$store.dispatch('UPDATECURRENTPAGE', menu)
+        }
+      },
+      immediate: true
+    }
+  },
   computed: {
-    ...mapGetters(['getLogin', 'getExpandMisMenu', 'getLoading'])
+    ...mapGetters(['getLogin', 'getExpandMisMenu', 'getLoading', 'getMenu', 'getCurrentPage', 'getCachePages'])
   },
   methods: {
     handleSiderTrigger () {

src/views/mis/components/MisMenu/MisMenu.vue

@@ -33,33 +33,27 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { State, Mutation, Getter } from 'vuex-class'
 
-export default {
-  name: 'MisMenu',
-  data () {
-    return {
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'getExpandMisMenu',
-      'getMenuTree'
-    ])
-  },
-  methods: {
-    handleOpen (key, keyPath) {
-      console.log(key, keyPath)
-    },
-    handleClose (key, keyPath) {
-      console.log(key, keyPath)
-    },
-    handleSelect (index, indexPath, item) {
-      this.$router.push({
-        name: index
-      })
-    }
+@Component({
+  name: 'MisMenu'
+})
+export default class MisMenu extends Vue {
+  @Getter private getExpandMisMenu: Boolean
+  @Getter private getMenuTree: Boolean
+
+  private handleOpen (key: String, keyPath: String) {
+    console.log(key, keyPath)
+  }
+  private handleClose (key: String, keyPath: String) {
+    console.log(key, keyPath)
+  }
+  private handleSelect (index: any, indexPath: String, item: any) {
+    this.$router.push({
+      name: index
+    })
   }
 }
 </script>