0822AM

src/pages/system/systemSet/roleManager/add.vue

   <div class="subPage">
     <form class="mainForm">
       <ul>
-        <li class="flex-h">
-          <span>角色名：</span>
-          <div class="flex-item">
-            <div style="width:50%">
-              <el-input
-                placeholder="只能输入英文"
-                v-model="postData.roleId"
-                clearable>
-              </el-input>
-            </div>
-          </div>
-        </li>
         <li class="flex-h">
           <span>角色名称：</span>
           <div class="flex-item">
             <div style="width:50%">
               <el-input
                 placeholder="请输入角色名称"
-                v-model="postData.roleName"
+                v-model="detail.RoleName"
                 clearable>
               </el-input>
             </div>
           </div>
         </li>
-        <li class="flex-h">
-          <span>禁用角色：</span>
-          <div class="flex-item">
-            <div style="width:50%" class="switch">
-              <el-switch
-                v-model="postData.disable"
-                active-color="#13ce66"
-                inactive-color="#ff4949">
-              </el-switch>
-            </div>
-          </div>
-        </li>
-        <li class="flex-h">
-          <span>数据权限：</span>
-          <div class="flex-item">
-            <div style="width:50%">
-              <el-select v-model="postData.permission" placeholder="请选择">
-                <el-option
-                  v-for="item in permissionList"
-                  :key="item.value"
-                  :label="item.name"
-                  :value="item.value">
-                </el-option>
-              </el-select>
-            </div>
-          </div>
-        </li>
         <li class="flex-h">
           <span>备注：</span>
           <div class="flex-item">
                 placeholder="请输入备注"
                 type="textarea"
                 :autosize="{ minRows: 3, maxRows: 5}"
-                v-model="postData.remark"
+                v-model="detail.Remark"
                 clearable>
               </el-input>
             </div>
 </template>
 
 <script>
+import { createNamespacedHelpers, mapState } from 'vuex'
+
+const { mapState: mapRoleState, mapActions: mapRoleActions } = createNamespacedHelpers('role')
 export default {
   name: '',
   data () {
-    return {
-      postData: {
-        roleId: '', // 角色名
-        roleName: '', // 角色姓名
-        disable: false, // 禁用角色
-        permission: '', // 数据权限
-        remark: '' // 备注
-      },
-      permissionList: [{
-        value: '0',
-        name: '个人数据'
-      }, {
-        value: '1',
-        name: '所属组织全部数据'
-      }, {
-        value: '2',
-        name: '所属组织及下层全部数据'
-      }]
-    }
+    return {}
   },
   components: {},
+  computed: {
+    ...mapRoleState({
+      detail: x => x.roleInfo,
+    }),
+    ...mapState({
+      caseid: x => x.app.cases.default,
+      orgid: x => x.app.user.OrgId,
+    })
+  },
   methods: {
+    ...mapRoleActions([
+      'GetRoleByID',
+      'AddRole',
+      'UpdateRole',
+    ]),
     submit () {
-      console.log(this.postData)
+      if ((this.detail.RoleId || '') === '') {
+        this.detail.CaseId = this.caseid
+        this.detail.OrgId = this.orgid
+        this.AddRole(this.detail)
+      } else {
+        this.UpdateRole(this.detail)
+      }
     },
     cancel () {
       this.$router.go(-1)
     }
   },
-  mounted () { }
+  beforeMount () {
+  }
 }
 </script>
 

src/pages/system/systemSet/roleManager/edit.vue

   <div class="subPage">
     <form class="mainForm">
       <ul>
-        <li class="flex-h">
-          <span>角色名：</span>
-          <div class="flex-item">
-            <div style="width:50%">
-              <el-input
-                placeholder="只能输入英文"
-                v-model="postData.roleId"
-                clearable>
-              </el-input>
-            </div>
-          </div>
-        </li>
         <li class="flex-h">
           <span>角色名称：</span>
           <div class="flex-item">
             </div>
           </div>
         </li>
-        <li class="flex-h">
-          <span>禁用角色：</span>
-          <div class="flex-item">
-            <div style="width:50%" class="switch">
-              <el-switch
-                v-model="postData.disable"
-                active-color="#13ce66"
-                inactive-color="#ff4949">
-              </el-switch>
-            </div>
-          </div>
-        </li>
-        <li class="flex-h">
-          <span>数据权限：</span>
-          <div class="flex-item">
-            <div style="width:50%">
-              <el-select v-model="postData.permission" placeholder="请选择">
-                <el-option
-                  v-for="item in permissionList"
-                  :key="item.value"
-                  :label="item.name"
-                  :value="item.value">
-                </el-option>
-              </el-select>
-            </div>
-          </div>
-        </li>
         <li class="flex-h">
           <span>备注：</span>
           <div class="flex-item">
       postData: {
         roleId: '', // 角色名
         roleName: '', // 角色姓名
-        disable: false, // 禁用角色
-        permission: '', // 数据权限
         remark: '' // 备注
       },
-      permissionList: [{
-        value: '0',
-        name: '个人数据'
-      }, {
-        value: '1',
-        name: '所属组织全部数据'
-      }, {
-        value: '2',
-        name: '所属组织及下层全部数据'
-      }]
     }
   },
   components: {},

src/pages/system/systemSet/roleManager/index.vue

       <div class="moreFilter"></div>
     </div>
     <div class="system-table-box">
-      <el-table :data="tableData" stripe style="width: 100%">
-        <el-table-column fixed='left' prop="role" label="角色标识" width="150">
+      <el-table :data="roles.list" stripe style="width: 100%">
+        <el-table-column prop="RoleName" label="角色名">
         </el-table-column>
-        <el-table-column prop="roleName" label="角色名" width="150">
-        </el-table-column>
-        <el-table-column prop="disable" label="是否禁用角色" width="150">
-        </el-table-column>
-        <el-table-column prop="permission" label="数据权限">
-        </el-table-column>
-        <el-table-column prop="createTime" label="创建时间" width="200">
+        <el-table-column prop="FormatDate(CreateDate)" label="创建时间" width="300">
         </el-table-column>
         <el-table-column fixed='right' label="操作" width="300">
           <template slot-scope="scope">
         </el-table-column>
       </el-table>
     </div>
-    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="10" layout="prev, pager, next, jumper" :total="100">
+    <el-pagination
+    @size-change="handleSizeChange"
+    @current-change="handleCurrentChange"
+    :current-page.sync="currentPage"
+    :page-size="10"
+    layout="prev, pager, next, jumper"
+    :total="roles.pagenum">
     </el-pagination>
-    <el-dialog title="请选择机构" :visible.sync="dialogTableVisible">
+    <!-- <el-dialog title="请选择机构" :visible.sync="dialogTableVisible">
       <el-tree
         class="flxe-h"
         :data="treeData"
         <div class="flex-h" style="justify-content: flex-end;margin-top: 1rem">
           <el-button type='success' @click="getCheckedNodes">确定</el-button>
         </div>
-    </el-dialog>
+    </el-dialog> -->
   </div>
 </template>
 
 <script>
+import { createNamespacedHelpers } from 'vuex'
 import tableSearch from '@/components/tableSearch/index'
 
+const { mapState: mapRoleState, mapActions: mapRoleActions } = createNamespacedHelpers('role')
+
 export default {
   name: '',
   data () {
         key: '111' // 搜索关键字
       },
       dialogTableVisible: false,
-      tableData: [
-        {
-          role: '赵日天',
-          roleName: '赵日天',
-          disable: '赵日地',
-          permission: '赵日天',
-          createTime: '赵爸爸'
-        }, {
-          role: '赵日天',
-          roleName: '赵日天',
-          disable: '赵日地',
-          permission: '赵日天',
-          createTime: '赵爸爸'
-        }, {
-          role: '赵日天',
-          roleName: '赵日天',
-          disable: '赵日地',
-          permission: '赵日天',
-          createTime: '赵爸爸'
-        }, {
-          role: '赵日天',
-          roleName: '赵日天',
-          disable: '赵日地',
-          permission: '赵日天',
-          createTime: '赵爸爸'
-        }, {
-          role: '赵日天',
-          roleName: '赵日天',
-          disable: '赵日地',
-          permission: '赵日天',
-          createTime: '赵爸爸'
-        }, {
-          role: '赵日天',
-          roleName: '赵日天',
-          disable: '赵日地',
-          permission: '赵日天',
-          createTime: '赵爸爸'
-        }, {
-          role: '赵日天',
-          roleName: '赵日天',
-          disable: '赵日地',
-          permission: '赵日天',
-          createTime: '赵爸爸'
-        }, {
-          role: '赵日天',
-          roleName: '赵日天',
-          disable: '赵日地',
-          permission: '赵日天',
-          createTime: '赵爸爸'
-        }
-      ],
-      treeData: [{
-        label: '根目录',
-        rank: '0',
-        img: '',
-        children: [{
-          label: '共享课程&书吧',
-          rank: '0',
-          img: '',
-          children: [{
-            label: '健身',
-            rank: '0',
-            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163306109741.png',
-          }, {
-            label: '健康',
-            rank: '0',
-            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163325263583.png',
-          }, {
-            label: '艺术',
-            rank: '0',
-            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/104118813781.png',
-          }, {
-            label: '社交',
-            rank: '0',
-            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163339496588.png',
-          }, {
-            label: '教育',
-            rank: '0',
-            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163351586373.png',
-          }]
-        }]
-      }]
     }
   },
+  computed: {
+    ...mapRoleState({
+      roles: x => x.roleList,
+    }),
+  },
   components: {
     tableSearch
   },
   methods: {
+    ...mapRoleActions([
+      'GetRolesList',
+    ]),
+    FormatDate (date) {
+      return date
+    },
     handleSizeChange (val) {
       console.log(`每页 ${val} 条`)
     },
     getCheckedNodes () { // 获取选中的节点
       console.log(this.$refs.tree.getCheckedNodes())
     }
-  }
+  },
+  beforeMount () {
+    this.GetRolesList()
+  },
 }
 </script>
 

src/store/index.js

 const store = new Vuex.Store({
   state: {
     loadding: false,
+    pageSize: 10,
   }
 })
 Vuex.Store.prototype.$api = api
 Vuex.Store.prototype.$ajax = Ajax
 export const modules = {
   app: () => require('./app').default,
-  cms: () => require('./cms').default
+  cms: () => require('./cms').default,
+  role: () => require('./system/role').default,
 }
 
 Object.keys(modules).forEach((modKey) => {

src/store/system/role.js

+import ajax from '../../util/ajax'
+import api from '../../util/api'
+
+export default {
+  namespaced: true,
+  state: {
+    roleList: [],
+    roleInfo: {},
+  },
+  mutations: {
+    updateList (state, payload) {
+      state.roleList = payload || []
+    },
+    updateInfo (state, payload) {
+      state.roleInfo = payload || []
+    },
+  },
+  actions: {
+    GetRolesList ({ commit }) {
+      ajax(api.role.list.url, {
+        method: api.role.list.method
+      }).then(res => {
+        commit('updateList', res)
+      })
+    },
+    GetRoleByID ({ commit }, { roleid }) {
+      ajax(api.role.info.url, {
+        method: api.role.info.method,
+        urlData: {
+          id: roleid,
+        }
+      }).then(res => {
+        commit('updateInfo', res)
+      })
+    },
+    AddRole ({ commit }, payload) {
+      ajax(api.role.add.url, {
+        method: api.role.add.method,
+        data: {
+          ...payload
+        }
+      }).then(res => {
+        commit('updateInfo', res)
+      })
+    },
+    UpdateRole ({ commit }, payload) {
+      ajax(api.role.update.url, {
+        method: api.role.update.method,
+        data: {
+          ...payload
+        }
+      }).then(res => {
+      })
+    },
+    DelRole ({ commit }, payload) {
+      ajax(api.role.delete.url, {
+        method: api.role.delete.method,
+        data: {
+          ...payload
+        }
+      }).then(res => {
+      })
+    }
+  }
+}

src/util/api.js

 const baseUrl = '/api'
+const common = '/common'
+const guest = '/guest'
+
 const $api = {
   login: { // 登陆
     signin: {
       method: 'post',
-      url: `${baseUrl}/guest/signin`
+      url: `${baseUrl}${guest}/signin`
     }
   },
   system: {
     init: { // 初始化菜单
       method: 'get',
-      url: `${baseUrl}/common/system/init`
+      url: `${baseUrl}${common}/system/init`
     }
   },
   channelManager: {
     getChannelList: { // 渠道列表
       method: 'get',
-      url: `${baseUrl}/common/`
+      url: `${baseUrl}${common}/`
     },
   },
   caseManager: {
     getCaseList: { // 获取案场列表
       method: 'get',
-      url: `${baseUrl}/common/case/info`
+      url: `${baseUrl}${common}/case/info`
     },
     addCase: { // 新增案场
       method: 'post',
-      url: `${baseUrl}/common/case/info`
+      url: `${baseUrl}${common}/case/info`
     },
     getCaseInfo: { // 查询案场
       method: 'get',
-      url: `${baseUrl}/common/case/info/:id`
+      url: `${baseUrl}${common}/case/info/:id`
     },
     editCase: { // 编辑案场
       method: 'put',
-      url: `${baseUrl}/common/case/info/:id`
+      url: `${baseUrl}${common}/case/info/:id`
     },
     getKeyList: { // 获取钥匙列表
       method: 'get',
-      url: `${baseUrl}/common/case/key`
+      url: `${baseUrl}${common}/case/key`
     },
     addKey: { // 新增钥匙
       method: 'post',
-      url: `${baseUrl}/common/case/key`
+      url: `${baseUrl}${common}/case/key`
     },
     cancelKey: { // 取消钥匙
       method: 'put',
-      url: `${baseUrl}/common/case/unlock/:id`
+      url: `${baseUrl}${common}/case/unlock/:id`
     },
     getCaseAreaList: { // 获取案场区域列表
       method: 'get',
-      url: `${baseUrl}/common/case/area`
+      url: `${baseUrl}${common}/case/area`
     },
     addCaseArea: { // 新增案场区域
       method: 'post',
-      url: `${baseUrl}/common/case/area`
+      url: `${baseUrl}${common}/case/area`
     },
     deleteCaseArea: { // 删除案场区域
       method: 'delete',
-      url: `${baseUrl}/common/case/area/:id`
+      url: `${baseUrl}${common}/case/area/:id`
     },
     getCaseAreaInfo: { // 获取案场区域信息
       method: 'get',
-      url: `${baseUrl}/common/case/area/:id`
+      url: `${baseUrl}${common}/case/area/:id`
     },
     editCaseArea: { // 更新案场区域信息
       method: 'put',
-      url: `${baseUrl}/common/case/area`
+      url: `${baseUrl}${common}/case/area`
     },
     getCaseTableList: { // 获取案场桌位列表
       method: 'get',
-      url: `${baseUrl}/common/case/table`
+      url: `${baseUrl}${common}/case/table`
     },
     addCaseTable: { // 新增案场桌位
       method: 'post',
-      url: `${baseUrl}/common/case/table`
+      url: `${baseUrl}${common}/case/table`
     },
     getCaseTableInfo: { // 查询案场桌位信息
       method: 'get',
-      url: `${baseUrl}/common/case/table/:id`
+      url: `${baseUrl}${common}/case/table/:id`
     },
     editCaseTable: { // 更新案场桌位信息
       method: 'put',
-      url: `${baseUrl}/common/case/table`
+      url: `${baseUrl}${common}/case/table`
     },
     deleteCaseTable: { // 删除案场桌位信息
       method: 'delete',
-      url: `${baseUrl}/common/case/table/:id`
+      url: `${baseUrl}${common}/case/table/:id`
     },
     getCaseTagList: { // 获取案场标签列表
       method: 'get',
-      url: `${baseUrl}/common/case/tag`
+      url: `${baseUrl}${common}/case/tag`
     },
     addCaseTag: { // 新增案场标签
       method: 'post',
-      url: `${baseUrl}/common/case/tag`
+      url: `${baseUrl}${common}/case/tag`
     },
     getTagInfo: { // 获取案场标签信息
       method: 'get',
-      url: `${baseUrl}/common/case/tag/:id`
+      url: `${baseUrl}${common}/case/tag/:id`
     },
     deleteCaseTag: { // 删除案场标签
       method: 'delete',
-      url: `${baseUrl}/common/case/tag/:id`
+      url: `${baseUrl}${common}/case/tag/:id`
     },
   },
   goodsManager: {
     getGoodsSpecList: { // 商品规格列表
       method: 'get',
-      url: `${baseUrl}/common/spec/goods`
+      url: `${baseUrl}${common}/spec/goods`
     },
     addGoodsSpec: { // 新增商品规格
       method: 'post',
-      url: `${baseUrl}/common/spec/goods`
+      url: `${baseUrl}${common}/spec/goods`
     },
     getGoodsSpecById: { // 根据id获取商品规格
       method: 'get',
-      url: `${baseUrl}/common/spec/goods/:id`
+      url: `${baseUrl}${common}/spec/goods/:id`
     },
     editGoodsSpec: { // 编辑商品规格
       method: 'put',
-      url: `${baseUrl}/common/spec/goods/:id`
+      url: `${baseUrl}${common}/spec/goods/:id`
     },
     deleteGoodsSpec: { // 删除商品规格
       method: 'delete',
-      url: `${baseUrl}/common/spec/goods/:id`
+      url: `${baseUrl}${common}/spec/goods/:id`
     },
     getGoodsTypeList: { // 商品种类列表
       method: 'get',
-      url: `${baseUrl}/common/type/goods`
+      url: `${baseUrl}${common}/type/goods`
     },
     addGoodsType: { // 新增商品种类
       method: 'post',
-      url: `${baseUrl}/common/type/goods`
+      url: `${baseUrl}${common}/type/goods`
     },
     getGoodsTypeById: { // 根据id获取商品种类
       method: 'get',
-      url: `${baseUrl}/common/type/goods/:id`
+      url: `${baseUrl}${common}/type/goods/:id`
     },
     editGoodsType: { // 编辑商品种类
       method: 'put',
-      url: `${baseUrl}/common/type/goods/:id`
+      url: `${baseUrl}${common}/type/goods/:id`
     },
     deleteGoodsType: { // 删除商品种类
       method: 'delete',
-      url: `${baseUrl}/common/type/goods/:id`
+      url: `${baseUrl}${common}/type/goods/:id`
     },
   },
   cms: {
     location: { // 图片位置
       method: 'get',
-      url: `${baseUrl}/common/cms/location`
+      url: `${baseUrl}${common}/cms/location`
     },
     imageList: { // 轮播图列表
       method: 'get',
-      url: `${baseUrl}/common/cms/image`
+      url: `${baseUrl}${common}/cms/image`
     },
     imageDetail: { // 轮播图详情
       method: 'get',
-      url: `${baseUrl}/common/cms/image/:id`
+      url: `${baseUrl}${common}/cms/image/:id`
     },
     addImage: { // 添加轮播图
       method: 'post',
-      url: `${baseUrl}/common/cms/image`
+      url: `${baseUrl}${common}/cms/image`
     },
     editImage: { // 编辑轮播图
       method: 'put',
-      url: `${baseUrl}/common/cms/image/:id`
+      url: `${baseUrl}${common}/cms/image/:id`
     },
     deleteDetail: { // 删除轮播图
       method: 'delete',
-      url: `${baseUrl}/common/cms/image/:id`
+      url: `${baseUrl}${common}/cms/image/:id`
     },
     case: { // 首页案场列表
       method: 'get',
-      url: `${baseUrl}/common/cms/case`
+      url: `${baseUrl}${common}/cms/case`
     },
     caseDetail: { // 首页案场详情
       method: 'get',
-      url: `${baseUrl}/common/cms/case/:id`
+      url: `${baseUrl}${common}/cms/case/:id`
     },
     addCase: { // 添加首页案场
       method: 'post',
-      url: `${baseUrl}/common/cms/case`
+      url: `${baseUrl}${common}/cms/case`
     },
     editCase: { // 添加首页案场
       method: 'put',
-      url: `${baseUrl}/common/cms/case/:id`
+      url: `${baseUrl}${common}/cms/case/:id`
     },
     deleteCase: { // 添加首页案场
       method: 'delete',
-      url: `${baseUrl}/common/cms/case/:id`
+      url: `${baseUrl}${common}/cms/case/:id`
     },
     info: { // 首页消息列表
       method: 'get',
-      url: `${baseUrl}/common/cms/info`
+      url: `${baseUrl}${common}/cms/info`
     },
     infoDetail: { // 首页消息详情
       method: 'get',
-      url: `${baseUrl}/common/cms/info/:id`
+      url: `${baseUrl}${common}/cms/info/:id`
     },
     addInfo: { // 新增首页消息
       method: 'post',
-      url: `${baseUrl}/common/cms/info`
+      url: `${baseUrl}${common}/cms/info`
     },
     editInfo: { // 编辑首页消息
       method: 'put',
-      url: `${baseUrl}/common/cms/info/:id`
+      url: `${baseUrl}${common}/cms/info/:id`
     },
     deleteInfo: { // 编辑首页消息
       method: 'delete',
-      url: `${baseUrl}/common/cms/info/:id`
+      url: `${baseUrl}${common}/cms/info/:id`
     }
   },
   file: {
     image: { // 图片上传
       method: 'post',
-      url: `${baseUrl}/common/file`
+      url: `${baseUrl}${common}/file`
     }
-  }
+  },
+  role: {
+    list: {
+      method: 'get',
+      url: `${baseUrl}${common}/role`
+    },
+    info: {
+      method: 'get',
+      url: `${baseUrl}${common}/role/:id`
+    },
+    add: {
+      method: 'post',
+      url: `${baseUrl}${common}/role`
+    },
+    update: {
+      method: 'put',
+      url: `${baseUrl}${common}/role`
+    },
+    delete: {
+      method: 'delete',
+      url: `${baseUrl}${common}/role/:id`
+    },
+  },
 }
 export default $api