提交

src/config/api.js

       url: `${commPrefix}/customerList`
     }
   },
+  sysRole: {
+    list: {
+      method: 'get',
+      url: `${commPrefix}/role`
+    },
+    getById: {
+      method: 'get',
+      url: `${commPrefix}/roleById`
+    },
+    save: {
+      method: 'post',
+      url: `${commPrefix}/role`
+    },
+    update: {
+      method: 'put',
+      url: `${commPrefix}/role`
+    },
+    menu: {
+      method: 'get',
+      url: `${commPrefix}/menus`
+    },
+    deleteMenu: {
+      method: 'delete',
+      url: `${commPrefix}/role`
+    }
+  }
 }
 export default apis

src/store/index.js

 import visitor from './modules/visitor' 
 import lobby from './modules/lobby'
 import followup from './modules/followup'
+import sysyrole from './modules/role'
 
 Vue.use(Vuex)
 
     management,
     visitor,
     lobby,
-    followup
+    followup,
+    sysyrole
   }
 })
 

src/store/modules/content.js

     },
     addContent ({ commit }, payload) {
       const { onSuccess } = payload
-      const api = lodash.get(apis, 'content.add')
+      const api = lodash.get(apis, 'content.edi.vue')
       interact(api, payload.detail).then((data) => {
         commit('appendList', data)
         if (onSuccess) {

src/store/modules/firstpage.js

     },
     addFirstPage ( _, payload) {
       const { onSuccess } = payload
-      const api = lodash.get(apis, 'firstpage.add')
+      const api = lodash.get(apis, 'firstpage.edi.vue')
       interact(api, payload.detail).then((data) => {
         onSuccess(data)
       })

src/store/modules/management.js

       })
     },
     addManagement ({ commit }, payload) {
-      const api = replaceApiParams(lodash.get(apis, 'management.add'), payload)
+      const api = replaceApiParams(lodash.get(apis, 'management.edi.vue'), payload)
       interact(api).then((data) => {
         commit('updateManagement', data)
       })

src/store/modules/notice.js

     },
     addNotice ( _, payload) {
       const { onSuccess } = payload
-      const api = lodash.get(apis, 'notice.add')
+      const api = lodash.get(apis, 'notice.edi.vue')
       interact(api, payload.detail).then((data) => {
         onSuccess(data)
       })

src/store/modules/person.js

     },
     addPerson ( _, payload) {
       const { onSuccess } = payload
-      const api = lodash.get(apis, 'person.add')
+      const api = lodash.get(apis, 'person.edi.vue')
       interact(api, payload.detail).then((data) => {
         onSuccess(data)
       })

src/store/modules/role.js

+import lodash from 'lodash'
+import { interact, replaceApiParams } from '../../utils'
+import apis from '../../config/api'
+
+export default {
+    namespaced: true,
+    state: {
+        data: [],
+        menus: [],
+    },
+    mutations: {
+        setList(state, payload) {
+            state.data = payload
+        },
+        setMenus(state, payload) {
+            state.menus = payload
+        }
+    },
+    actions: {
+        GetList({ commit }, payload) {
+            return new Promise((resolve, reject) => {
+                const api = lodash.get(apis,'sysRole.list')
+                interact(api, payload).then((data) => {
+                    commit('setList', data)
+                    resolve(data)
+                }).catch(()=>{
+                    reject()
+                })
+
+            })
+        },
+        AddRole( _, payload) {
+            return new Promise((resolve, reject) => {
+                const api = lodash.get(apis,'sysRole.save')
+                interact(api, payload).then((data)=> {
+                    resolve(data)
+                }).catch(()=>{
+                    reject()
+                })
+            })
+        },
+        GetMenus({ commit }) {
+            return new Promise((resolve, reject) => {
+                const api = lodash.get(apis, 'sysRole.menu')
+                interact(api).then((data) => {
+                    resolve(data)
+                    commit('setMenus', data)
+                }).catch(() => {
+                    reject()
+                })
+            })
+        },
+        GetById(_, payload) {
+            return new Promise((resolve, reject) => {
+                const api = lodash.get(apis,'sysRole.getById')
+                interact(api, payload).then((data) => {
+                    resolve(data)
+                }).catch(()=>{
+                    reject()
+                })
+
+            })
+        },
+        UpdateRole(_, payload) {
+            return new Promise((resolve, reject) => {
+                const api = lodash.get(apis,'sysRole.update')
+                interact(api, payload).then((data) => {
+                    resolve(data)
+                }).catch(()=>{
+                    reject()
+                })
+
+            })
+        },
+        DeleteMenu(_, payload) {
+            return new Promise((resolve, reject) => {
+                const api = lodash.get(apis,'sysRole.deleteMenu')
+                interact(api, payload).then((data) => {
+                    resolve(data)
+                }).catch(()=>{
+                    reject()
+                })
+
+            })
+        },
+    }
+}

src/store/modules/sysuser.js

     },
     addSysUser ( _, payload) {
       const dtStr = window.JSON.stringify(payload)
-      const api = lodash.get(apis, 'sysuser.add')
+      const api = lodash.get(apis, 'sysuser.edi.vue')
       return interact(api, dtStr)
     },
     editSysUser ( _, payload) {

src/store/modules/type.js

     },
     addType (_, payload) {
       const { onSuccess } = payload
-      const api = lodash.get(apis, 'type.add')
+      const api = lodash.get(apis, 'type.edi.vue')
       interact(api, payload.detail).then((data) => {
         onSuccess(data)
       })

src/store/modules/words.js

     },
     addWords ( _, payload) {
       const { onSuccess } = payload
-      const api = lodash.get(apis, 'words.add')
+      const api = lodash.get(apis, 'words.edi.vue')
       interact(api, payload.detail).then((data) => {
         onSuccess(data)
       })

src/views/index.js

           title: '角色管理',
         },
       },
+      {
+        path: 'sysuser/role/add',
+        name: 'role-add',
+        component: () => import('./sysuser/role/add/add.vue'),
+        meta: {
+          menuShow: false,
+          title: '角色添加',
+        },
+      },
+      {
+        path: 'sysuser/role/edi',
+        name: 'role-edi',
+        component: () => import('./sysuser/role/edi/edi.vue'),
+        meta: {
+          menuShow: false,
+          title: '角色修改',
+        },
+      },
       {
         path: 'device',
         name: 'devicelist',

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

+<template>
+    <div id="root">
+        <el-form ref="form" :model="form" label-width="80px">
+            <el-form-item label="角色名称">
+                <el-input v-model="form.roleName"></el-input>
+            </el-form-item>
+            <el-form-item label="菜单权限">
+                <el-tree
+                        :data="menus"
+                        show-checkbox
+                        node-key="menuId"
+                        ref="tree"
+                        :props="defaultProps">
+                </el-tree>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="success" @click="onSubmit">提交</el-button>
+            </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/sysuser/role/edi/edi.vue

+<template>
+    <div id="root">
+        <el-form ref="form" :model="form" label-width="80px">
+            <el-form-item label="角色名称">
+                <el-input v-model="form.roleName"></el-input>
+            </el-form-item>
+            <el-form-item label="菜单权限">
+                <el-tree
+                        :data="menus"
+                        show-checkbox
+                        node-key="menuId"
+                        ref="tree"
+                        :default-checked-keys="checkedMenuKeys"
+                        :props="defaultProps">
+                </el-tree>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="success" @click="onSubmit">提交</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex'
+const {mapState: mapSysRoleState, mapActions: mapSysRoleActions } = createNamespacedHelpers('sysyrole')
+
+export default {
+  name: "ediRole",
+  data() {
+      return {
+          form: {
+              roleName: '',
+              roleId: '',
+              menuIds: []
+          },
+          defaultProps: {
+              label: 'menuName',
+              children: 'children'
+          },
+          checkedMenuKeys: [] // 默认勾选
+      }
+  },
+  computed: {
+      ...mapSysRoleState({
+          menus: x => x.menus
+      })
+  },
+  methods: {
+    ...mapSysRoleActions([
+        'GetMenus',
+        'AddRole',
+        'GetById',
+        'UpdateRole'
+    ]),
+    getCheckedNodes() {
+      let idSet = new Set();
+      const checkedNodes = this.$refs.tree.getCheckedNodes();
+      checkedNodes.map((item,index) => {
+          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)
+    },
+    getByRoleId() {
+        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,index) => {
+            this.checkedMenuKeys.push(item.menuId)
+            if (item.children !== null) {
+                this.menusParsing(item.children)
+            }
+        })
+    }
+  },
+  created() {
+      this.GetMenus()
+      this.form.roleId = this.$route.query.id
+      this.getByRoleId()
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/sysuser/role/list.vue

   <div id="root">
     <el-form :inline="true" :model="formInline" class="demo-form-inline">
       <el-form-item label="角色名称">
-        <el-input v-model="formInline.customerName" placeholder="角色名称"></el-input>
+        <el-input v-model="formInline.roleName" placeholder="角色名称"></el-input>
       </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="FollowupList"
+    :data="roleDataList.records"
+    @selection-change="handleSelectionChange"
     border>
+      <el-table-column
+              type="selection"
+              width="55"/>
     <el-table-column
-      prop="customerId"
+      prop="roleId"
       align='center'
-      label="角色名称">
-    </el-table-column>
+      label="编号"/>
     <el-table-column
-      prop="customerName"
+      prop="roleName"
       align='center'
-      label="角色状态">
-    </el-table-column>
+      label="角色名称"/>
     <el-table-column
-      prop="phone"
+      prop="roleStatus"
       align='center'
-      label="创建时间">
+      label="角色状态">
+      <template slot-scope="scope">{{ scope.row.status === 1 ? '有效' : '无效' }}</template>
     </el-table-column>
+    <el-table-column
+       prop="createDate"
+       align='center'
+       label="创建时间"/>
   </el-table>
     <el-pagination
             style="margin-top:50px;float:right"
             :current-page="formInline.pageNum"
             :page-sizes="[1,10, 20, 30, 40]"
             :page-size="formInline.pageSize"
+            :total="roleDataList.total"
             layout="total, sizes, prev, pager, next, jumper"
             >
             <!-- :total="FollowupList.total || 0" -->
 </template>
 <script>
 import { createNamespacedHelpers } from 'vuex'
-const {mapState: mapUserManagementState, mapActions: mapUserManagementActions } = createNamespacedHelpers('sysuser')
+const {mapState: mapSysRoleState, mapActions: mapSysRoleActions } = createNamespacedHelpers('sysyrole')
 
 export default {
   name: 'followup-index',
   data() {
     return {
       formInline: {
-        customerName:'',
-        personName: '',
-        phone: '',
-        platNumber: '',
+        roleName: '',
         pageNum: 1,
         pageSize: 10
-      }
+      },
+      ids: []
     }
   },
   computed: {
-    ...mapUserManagementState({
-    FollowupList: x => x.followup
+    ...mapSysRoleState({
+    roleDataList: x => x.data
     })
   },
   created() {
     this.getPage()
   },
   methods: {
-    ...mapUserManagementActions([
-      'roleManagementList',
+    ...mapSysRoleActions([
+      'GetList',
+      'DeleteMenu'
     ]),
     onSubmit() {
       this.getPage()
     },
     getPage() {
-       this.roleManagementList(this.formInline)
+       this.GetList(this.formInline)
       // window.console.log(this.$store)
       // this.$store.commit('security/foo')
       // this.$store.dispatch('security/getSecurity')
       this.formInline.pageNum = val
       this.getPage()
     },
-    favorHouse (msg) {
-      if (msg == '1') {
-        return "三房"
-      } else if(msg == '2'){
-        return "四房"
-      }else if(msg == '3'){
-        return "四房以上"
-      }
-    },
-    favorLevel (msg) {
-      if (msg == 'A') {
-        return "买房"
-      } else if(msg == 'B'){
-        return "有意向金"
-      }else if(msg == 'C'){
-        return "考虑中"
-      }else if(msg == 'D'){
-        return "不买"
-      }
-    },
     clear(){
-      this.formInline.customerName = ''
-      this.formInline.phone = ''
-      this.formInline.platNumber = ''
+      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()
+    },
+    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] }})
+    },
+    handleSelectionChange(val) {
+      this.ids = []
+      val.map((item,index)=> {
+        this.ids.push(item.roleId);
+      })
     }
-   
   }
 }
 </script>