feats

src/config/api.js

       method: 'get',
       url: `${commPrefix}/role`
     },
-    getById: {
+    get: {
       method: 'get',
-      url: `${commPrefix}/roleById`
+      url: `${commPrefix}/role/:id`
     },
     save: {
       method: 'post',
       method: 'get',
       url: `${commPrefix}/menus`
     },
-    deleteMenu: {
+    delete: {
       method: 'delete',
-      url: `${commPrefix}/role`
+      url: `${commPrefix}/role/:id`
     }
   },
   menu:{

src/store/modules/role.js

 import lodash from 'lodash'
-import { interact } from '../../utils'
+import { interact, replaceApiParams } from '../../utils'
 import apis from '../../config/api'
 
 export default {
         }
     },
     actions: {
-        GetList({ commit }, payload) {
+        getList({ commit }, payload) {
             return new Promise((resolve, reject) => {
-                const api = lodash.get(apis,'sysRole.list')
+                const api = apis.sysRole.list
                 interact(api, payload).then((data) => {
                     commit('setList', data)
                     resolve(data)
 
             })
         },
-        AddRole( _, payload) {
+        addRole( _, payload) {
             return new Promise((resolve, reject) => {
                 const api = lodash.get(apis,'sysRole.save')
                 interact(api, payload).then((data)=> {
                 })
             })
         },
-        GetMenus({ commit }) {
+        getMenus({ commit }) {
             return new Promise((resolve, reject) => {
-                const api = lodash.get(apis, 'sysRole.menu')
+                const api = apis.menu.list
                 interact(api).then((data) => {
                     resolve(data)
                     commit('setMenus', data)
-                }).catch(() => {
-                    reject()
+                }).catch((err) => {
+                    reject(err)
                 })
             })
         },
-        GetById(_, payload) {
+        getById(_, payload) {
             return new Promise((resolve, reject) => {
-                const api = lodash.get(apis,'sysRole.getById')
-                interact(api, payload).then((data) => {
+                const api = apis.sysRole.get
+                interact(replaceApiParams(api, { id: payload.roleId })).then((data) => {
                     resolve(data)
                 }).catch(()=>{
                     reject()
                 })
-
             })
         },
-        UpdateRole(_, payload) {
+        updateRole(_, payload) {
             return new Promise((resolve, reject) => {
                 const api = lodash.get(apis,'sysRole.update')
                 interact(api, payload).then((data) => {
                     resolve(data)
-                }).catch(()=>{
-                    reject()
+                }).catch((err)=>{
+                    reject(err)
                 })
-
             })
         },
-        DeleteMenu(_, payload) {
+        deleteRole(_, role) {
             return new Promise((resolve, reject) => {
-                const api = lodash.get(apis,'sysRole.deleteMenu')
-                interact(api, payload).then((data) => {
+                const api = apis.sysRole.delete
+                interact(replaceApiParams(api, { id: role.roleId })).then((data) => {
                     resolve(data)
-                }).catch(()=>{
-                    reject()
+                }).catch((err)=>{
+                    reject(err)
                 })
-
             })
         },
         aAddNode({ commit }) {

src/store/modules/sysuser.js

         })
       })
     },
-    updateUserRolede ({ commit }, payload) {
+    updateUserRolede (_, payload) {
       return new Promise((resolve, reject) => {
         const api = lodash.get(apis, 'sysuser.updateUserRolede')
         interact(api,payload).then((data) => {
-          commit('updateList', data)
+          // commit('updateList', data)
           resolve(data)
         }).catch(() => {
           reject()

src/store/system.js

   actions: {
     getUser({ state, commit }) {
       return new Promise((resolve, reject) => {
-        if (state.userLoged) {
+        if (state.user && state.user.userId) {
           resolve(state.user)
           return
         }
     //     })
     //   })
     // },
-    login({ commit }, user) {
+    login(_, user) {
       return new Promise((resolve, reject) => {
         const api = lodash.get(apis, 'user.login')
         interact(api, {...user}).then(() => {
           // commit('updateUser', data)
-          commit('syncState', { userLoged: true })
+          // commit('syncState', { userLoged: true })
           resolve()
         }).catch((err) => {
           reject(err.message || err)
       const api = lodash.get(apis, 'user.logout')
       interact(api).then(() => {
         commit('updateUser', {})
-        commit('syncState', { userLoged: false })
+        // commit('syncState', { userLoged: false })
       })
     }
   }

src/utils/tree.js

+
+//
+export function appendChildren(data, id, pid) {
+  // 浅拷贝原始数据
+  const arr = (data || []).map(x => ({...x}))
+
+  return arr.map((item) => {
+    const parent = arr.filter((m) => m[id] === item[pid])[0]
+    if (parent) {
+      parent.children = (parent.children || []).concat(item)
+    }
+    return item
+  })
+}
+
+export function getTreeNode(data, pid, root = '-1') {
+  return (data || []).filter(item => item[pid] === root) || []
+}

src/views/index.js

           title: '菜单管理',
         },
       },
-      {
-        path: 'sysmenu/add',
-        name: 'sysmenuAdd',
-        component: () => import('./sysmenu/add.vue'),
-        meta: {
-          menuShow: false,
-          title: '添加菜单',
-        },
-      },
       {
         path: 'sysuser/userRole/addUserRole',
         name: 'addUserRole',

src/views/sysmenu/add.vue

-<template>
-    <div id="root">
-        <el-form ref="form" :model="form" label-width="80px">
-            <el-form-item label="菜单权限">
-                <el-tree
-                        :data="menus"
-                        show-checkbox
-                        node-key="menuId"
-                        ref="tree"
-                        :props="defaultProps">
-                </el-tree>
-            </el-form-item>
-        </el-form>
-    </div>
-</template>
-
-<script>
-import { createNamespacedHelpers } from 'vuex'
-const {mapState: mapSysRoleState, mapActions: mapSysRoleActions } = createNamespacedHelpers('sysyrole')
-
-export default {
-  name: "addRole",
-  data() {
-      return {
-          form: {
-              roleName: '',
-              menuIds: []
-          },
-          defaultProps: {
-              label: 'menuName',
-              children: 'children'
-          }
-      }
-  },
-  computed: {
-      ...mapSysRoleState({
-          menus: x => x.menus
-      })
-  },
-  methods: {
-    ...mapSysRoleActions([
-        'GetMenus',
-        'AddRole'
-    ]),
-    getCheckedNodes() {
-      let idSet = new Set();
-      const checkedNodes = this.$refs.tree.getCheckedNodes();
-      checkedNodes.map((item,index) => {
-          idSet.add(item.menuId)
-          idSet.add(item.menuPid)
-      })
-
-        for (let [value] of idSet.entries()) this.form.menuIds.push(value);
-
-    },
-    onSubmit() {
-        this.getCheckedNodes()
-        this.AddRole(this.form)
-        this.$router.go(-1)
-    }
-  },
-  created() {
-      this.GetMenus()
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

src/views/sysmenu/index.vue

 <template>
   <div>
+    <el-alert title="右击菜单可进行编辑操作" type="warning"></el-alert>
     <div class="page-bar">
       <el-button icon="el-icon-plus" @click="insertRootMenu">顶级节点</el-button>
     </div>
     <el-dialog
       title="提示"
       :visible.sync="dialogVisible"
-      width="30%">
+      width="30%"
+      @close="contextMenuVisible = false">
       <el-form :model="checkMenu" label-width="80px">
         <el-form-item label="菜单ID">
           <el-input v-model="checkMenu.menuId" :disabled="!!checkMenu.createDate"></el-input>
 
 <script>
 import { createNamespacedHelpers } from 'vuex'
-const { mapActions: mapMenuActions } = createNamespacedHelpers('sysmenu')
+import { getTreeNode, appendChildren } from '../../utils/tree.js';
 
+const { mapActions: mapMenuActions } = createNamespacedHelpers('sysmenu')
 
 export default {
   name: 'SysMenu',
   },
   computed: {
     treeData () {
-      return (this.menusWithChildren || []).filter(m => m.menuPid === "-1") || []
+      return getTreeNode(this.menusWithChildren, 'menuPid')
     },
   },
   created () {
     initData () {
       this.getAllMenus().then((menus) => {
         this.menusRaw = menus
-        this.menusWithChildren = menus.map((menu) => {
-          const parent = menus.filter((m) => m.menuId === menu.menuPid)[0]
-          if (parent) {
-            parent.children = (parent.children || []).concat(menu)
-          }
-          return menu
-        })
+        this.menusWithChildren = appendChildren(menus, 'menuId', 'menuPid')
       })
     },
     handleNodeClick (data) {

src/views/sysmenu/list.vue

-<template>
-  <div id="root">
-  <el-row>
-    <el-button type="primary" @click="addUserRole()">添加</el-button>
-  </el-row>
-   
-    <el-table
-    :data="menuList.records"
-    border>
-    <el-table-column
-      prop="menuId"
-      align='center'
-      label="菜单ID">
-    </el-table-column>
-    <el-table-column
-      prop="menuName"
-      align='center'
-      label="菜单名称">
-    </el-table-column>
-    <el-table-column
-      prop="menuPid"
-      align='center'
-      label="子级名称">
-    </el-table-column>
-      <el-table-column
-      prop="menuParents"
-      align='center'
-      label="父级名称">
-    </el-table-column> 
-     <el-table-column
-      prop="status"
-      align='center'
-      label="当前状态">
-    </el-table-column>
-    <el-table-column
-      prop="createDate"
-      align='center'
-      label="创建时间">
-    </el-table-column>
-
-     <el-table-column
-        fixed="right"
-        label="操作"
-        align='center'>
-        <template slot-scope="scope">
-          <el-button type="text" @click="handleEdit(scope.row.userId)" size="small">编辑</el-button>
-          <el-button type="text" @click="userRoleDelete(scope.row.userId)" size="small">删除</el-button>
-        </template>
-      </el-table-column>
-  </el-table>
-    <el-pagination
-            style="margin-top:50px;float:right"
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-            :current-page="formInline.pageNum"
-            :page-sizes="[1,10, 20, 30, 40]"
-            :page-size="formInline.pageSize"
-            layout="total, sizes, prev, pager, next, jumper"
-          :total="menuList.total || 0"
-            >
-           
-           
-    </el-pagination>
-  </div>
-</template>
-<script>
-import { createNamespacedHelpers } from 'vuex'
-const {mapState: mapSysMenuState, mapActions: mapSysMenuActions } = createNamespacedHelpers('sysmenu')
-
-export default {
-  name: 'followup-index',
-  data() {
-    return {
-      formInline: {
-        userName:'',
-        personName: '',
-        phone: '',
-        platNumber: '',
-        pageNum: 1,
-        pageSize: 10,
-        userId: ''
-      }
-    }
-  },
-  computed: {
-    ...mapSysMenuState({
-     menuList: x => x.safety,
-    })
-  },
-  created() {
-     
-    this.getPage()
-  },
-  methods: {
-    ...mapSysMenuActions([
-      'sysMenu',
-      'deleteRole'
-    ]),
-    onSubmit() {
-      this.getPage()
-    },
-    getPage() {
-       this.sysMenu(this.formInline)
-      // window.console.log(this.$store)
-      // this.$store.commit('security/foo')
-      // this.$store.dispatch('security/getSecurity')
-      // this.$store.commit('security/foo')
-    },
-    handleSizeChange(val) {
-      // console.log(`每页 ${val} 条`)
-      this.formInline.pageSize = val
-    },
-    handleCurrentChange(val) {
-      // console.log(`当前页: ${val}`)
-      this.formInline.pageNum = val
-      this.getPage()
-    },
-    clear(){
-      this.formInline.userName = ''
-      this.formInline.customerName = ''
-      this.formInline.phone = ''
-      this.formInline.platNumber = ''
-      this.formInline.pageNum = 1
-      this.formInline.pageSize = 10
-      this.getPage()
-    },
-    addUserRole(){
-      this.$router.push({ name: 'sysmenuAdd' })
-
-    },
-    handleEdit(id){
-       this.$router.push({ name: 'userRoleedit', query: {id:id} })
-    },
-    userRoleDelete(id){
-       this.formInline.userId = id
-       this.deleteRole(this.formInline)
-       this.getPage()
-    }
-   }
-}
-</script>
-

src/views/sysuser/list.vue

     </el-form-item>
     <el-form-item>
         <el-select v-model="listQuery.identity" placeholder="请选择">
-          <el-option label="全部"></el-option>
+          <el-option label="全部" value="%"></el-option>
           <el-option
             v-for="item in identityDict"
             :key="item.value"
 
     <el-dialog title="添加权限" :visible.sync="filterData.dialogFormVisible" :show-close="filterData.close">
       <el-form :model="filterData">  
-      <el-form-item label="角色权限"  required>
-      <el-select v-model="userRoleId" multiple placeholder="请选择">
-      <el-option
-      v-for="(item, index) in sysRole"
-      :key="index"
-      :label="item.roleName"
-      :value="item.roleId">
-      </el-option>
-      </el-select>
-      </el-form-item>
-
+        <el-form-item label="角色权限"  required>
+          <el-select v-model="userRoleId" multiple placeholder="请选择">
+            <el-option
+              v-for="item in sysRole"
+              :key="item.roleId"
+              :label="item.roleName"
+              :value="item.roleId">
+            </el-option>
+          </el-select>
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="TransactionReplyOff">取 消</el-button>
       this.getSysUserList({
         pageNum: this.pageNavi.page || 1,
         pageSize: this.pageNavi.size,
+        identity: this.listQuery.identity === '%' ? undefined : this.listQuery.identity,
         ...this.listQuery,
       }).then((data) => {
         const { current: page, size, total } = data

src/views/sysuser/role/add/add.vue

             </el-form-item>
             <el-form-item label="菜单权限">
                 <el-tree
-                        :data="menus"
-                        show-checkbox
-                        node-key="menuId"
-                        ref="tree"
-                        :props="defaultProps">
+                    :data="treeData"
+                    show-checkbox
+                    node-key="menuId"
+                    :default-expand-all="true"
+                    ref="tree"
+                    :props="defaultProps">
                 </el-tree>
             </el-form-item>
             <el-form-item>
 
 <script>
 import { createNamespacedHelpers } from 'vuex'
+import { appendChildren, getTreeNode } from '@/utils/tree'
+
 const {mapState: mapSysRoleState, mapActions: mapSysRoleActions } = createNamespacedHelpers('sysyrole')
 
 export default {
   },
   computed: {
       ...mapSysRoleState({
-          menus: x => x.menus
-      })
+        menus: x => x.menus
+      }),
+      treeData () {
+        return getTreeNode(appendChildren(this.menus, 'menuId', 'menuPid'), 'menuPid')
+      },
   },
   methods: {
     ...mapSysRoleActions([
-        'GetMenus',
+        'getMenus',
         'AddRole'
     ]),
     getCheckedNodes() {
     }
   },
   created() {
-      this.GetMenus()
+      this.getMenus()
   }
 }
 </script>

src/views/sysuser/role/edi/edi.vue

             </el-form-item>
             <el-form-item label="菜单权限">
                 <el-tree
-                        :data="menus"
-                        show-checkbox
-                        node-key="menuId"
-                        ref="tree"
-                        :default-checked-keys="checkedMenuKeys"
-                        :props="defaultProps">
+                    :data="treeData"
+                    show-checkbox
+                    node-key="menuId"
+                    ref="tree"
+                    :default-expand-all="true"
+                    :props="defaultProps">
                 </el-tree>
             </el-form-item>
             <el-form-item>
 
 <script>
 import { createNamespacedHelpers } from 'vuex'
+import { appendChildren, getTreeNode } from '@/utils/tree'
+
 const {mapState: mapSysRoleState, mapActions: mapSysRoleActions } = createNamespacedHelpers('sysyrole')
 
 export default {
               label: 'menuName',
               children: 'children'
           },
-          checkedMenuKeys: [] // 默认勾选
+          checkedMenus: []
       }
   },
   computed: {
       ...mapSysRoleState({
           menus: x => x.menus
-      })
+      }),
+      treeData () {
+        const dt = getTreeNode(appendChildren(this.menus, 'menuId', 'menuPid'), 'menuPid')
+        return dt
+      },
+  },
+  watch: {
+    checkedMenus (newVal) {
+      this.form.menuIds = (newVal || []).join(',')
+
+      if (this.$refs.tree) {
+        this.$refs.tree.setCheckedKeys(newVal)
+      }
+    }
   },
   methods: {
     ...mapSysRoleActions([
-        'GetMenus',
-        'AddRole',
-        'GetById',
-        'UpdateRole'
+        'getMenus',
+        'addRole',
+        'getById',
+        'updateRole'
     ]),
-    getCheckedNodes() {
-      let idSet = new Set();
-      const checkedNodes = this.$refs.tree.getCheckedNodes();
-      checkedNodes.map((item) => {
-          idSet.add(item.menuId)
-      })
-
-        for (let [value] of idSet.entries()) this.form.menuIds.push(value);
-
-    },
     onSubmit() {
-        this.getCheckedNodes()
-        this.UpdateRole(this.form)
-        this.$router.go(-1)
+      this.form.menuIds = this.$refs.tree.getCheckedKeys().join(',')
+      this.updateRole(this.form)
+      this.$router.go(-1)
     },
     getByRoleId() {
-        this.GetById({ roleId: this.form.roleId }).then((res) => {
+        this.getById({ roleId: this.form.roleId }).then((res) => {
             this.form.roleId = res.roleId
             this.form.roleName = res.roleName
 
-            this.menusParsing(res.menuList)
-        })
-    },
-    menusParsing(array) {
-        array.map((item) => {
-            this.checkedMenuKeys.push(item.menuId)
-            if (item.children !== null) {
-                this.menusParsing(item.children)
-            }
+            this.checkedMenus = (res.menuList || []).map(m => m.menuId)
         })
     }
   },
   created() {
-      this.GetMenus()
+      this.getMenus()
       this.form.roleId = this.$route.query.id
       this.getByRoleId()
   }

src/views/sysuser/role/list.vue

       </el-form-item> 
       <el-form-item>
         <el-button type="primary" @click="onSubmit">查询</el-button>
-        <el-button type="info" @click="clear">重置</el-button>
       </el-form-item>
     </el-form>
     <div style="margin-bottom: 20px;">
-<!--      <router-link :to="{name: 'role-add'}" tag="el-button">添加</router-link>-->
-
       <el-button type="success" @click="addRole">添加</el-button>
-      <el-button type="warning" @click="updateRole">修改</el-button>
-      <el-button type="danger" @click="deleteRole">删除</el-button>
     </div>
-    <el-table
-    :data="roleDataList.records"
-    @selection-change="handleSelectionChange"
-    border>
-      <el-table-column
-              type="selection"
-              width="55"/>
-    <el-table-column
-      prop="roleId"
-      align='center'
-      label="编号"/>
+    <el-table :data="roleDataList.records" border>
     <el-table-column
       prop="roleName"
       align='center'
       prop="roleStatus"
       align='center'
       label="角色状态">
-      <template slot-scope="scope">{{ scope.row.status === 1 ? '有效' : '无效' }}</template>
+      <template slot-scope="scope">{{ scope.row.status === 1 ? '正常' : '异常' }}</template>
+    </el-table-column>
+    <el-table-column
+       label="创建时间">
+       <template slot-scope="scope">
+         <span>{{formateDate(scope.row.createDate)}}</span>
+       </template>
     </el-table-column>
     <el-table-column
-       prop="createDate"
-       align='center'
-       label="创建时间"/>
+      label="操作">
+      <template slot-scope="scope">
+        <div>
+          <el-button type="text" size="mini" @click="updateData(scope.row)">编辑</el-button>
+          <el-button type="text" size="mini" @click="deleteData(scope.row)">删除</el-button>
+        </div>
+      </template>
+    </el-table-column>
   </el-table>
     <el-pagination
             style="margin-top:50px;float:right"
   </div>
 </template>
 <script>
+import dayjs from 'dayjs'
 import { createNamespacedHelpers } from 'vuex'
 const {mapState: mapSysRoleState, mapActions: mapSysRoleActions } = createNamespacedHelpers('sysyrole')
 
   },
   methods: {
     ...mapSysRoleActions([
-      'GetList',
-      'DeleteMenu'
+      'getList',
+      'deleteRole'
     ]),
+    formateDate (dt) {
+      return dayjs(dt).format('YYYY-MM-DD HH:mm')
+    },
     onSubmit() {
       this.getPage()
     },
     getPage() {
-       this.GetList(this.formInline)
-      // window.console.log(this.$store)
-      // this.$store.commit('security/foo')
-      // this.$store.dispatch('security/getSecurity')
-      // this.$store.commit('security/foo')
+       this.getList(this.formInline)
     },
     handleSizeChange(val) {
       // console.log(`每页 ${val} 条`)
       this.formInline.pageNum = val
       this.getPage()
     },
-    clear(){
-      this.formInline.roleName = ''
-      this.formInline.pageNum = 1
-      this.formInline.pageSize = 10
-      this.getPage()
-    },
     addRole() {
       this.$router.push({name: 'role-add'})
     },
-    deleteRole() {
-      if (this.ids.length <= 0) {
-        this.$message.error("请至少选择一行")
-        return
-      }
-
-      this.DeleteMenu({ menuIds: this.ids })
-      this.getPage()
+    deleteData(role) {
+      this.$confirm(`确定删除角色 [${role.roleName}] ?`).then(() => {
+        this.deleteRole(role).then(() => {
+          this.$alert('删除成功', '', {
+            confirmButtonText: '确定',
+            callback: () => {
+              this.getPage()
+            }
+          })
+        }).catch((err) => {
+          this.$message.error(err.message || err);
+        })
+      })
     },
-    updateRole() {
-      if (this.ids.length > 1) {
-        this.$message.error("只能针对一行操作")
-        return
-      }
-      if (this.ids.length <= 0) {
-        this.$message.error("请至少选择一行")
-        return
-      }
-
-      this.$router.push({name: 'role-edi', query: { id: this.ids[0] }})
+    updateData(role) {
+      this.$router.push({name: 'role-edi', query: { id: role.roleId }})
     },
-    handleSelectionChange(val) {
-      this.ids = []
-      val.map((item)=> {
-        this.ids.push(item.roleId);
-      })
-    }
   }
 }
 </script>