Merge branch 'dev' into pr/29

src/config/router.config.js

@@ -169,6 +169,21 @@ export const asyncRouterMap = [
           }
         ]
       },
+      {
+        path: '/system',
+        name: 'system',
+        component: RouteView,
+        redirect: '/system/role',
+        meta: { title: '系统管理', icon: 'setting', permission: [ 'table' ] },
+        children: [
+          {
+            path: '/system/role',
+            name: 'SystemRole',
+            component: () => import('@/views/role/RoleList'),
+            meta: { title: '角色列表', permission: [ 'table' ]}
+          }
+        ]
+      },
 
       // result
       {

src/main.js

@@ -12,6 +12,7 @@ import 'ant-design-vue/dist/antd.less'  // or 'ant-design-vue/dist/antd.less'
 
 import '@/permission' // permission control
 import '@/utils/filter' // base filter
+import PermissionHelper from '@/utils/helper/permission'
 
 import {
   ACCESS_TOKEN,
@@ -33,6 +34,7 @@ Vue.use(Storage, config.storageOptions)
 Vue.use(Antd)
 Vue.use(VueAxios, router)
 Vue.use(Viser)
+Vue.use(PermissionHelper)
 
 new Vue({
   router,

src/utils/helper/permission.js

@@ -0,0 +1,53 @@
+const PERMISSION_ENUM = {
+  'add': { key: 'add', label: '新增' },
+  'delete': { key: 'delete', label: '删除' },
+  'edit': { key: 'edit', label: '修改' },
+  'query': { key: 'query', label: '查询' },
+  'get': { key: 'get', label: '详情' },
+  'enable': { key: 'enable', label: '启用' },
+  'disable': { key: 'disable', label: '禁用' },
+  'import': { key: 'import', label: '导入' },
+  'export': { key: 'import', label: '导入' },
+};
+
+function plugin(Vue) {
+
+  if (plugin.installed) {
+    return;
+  }
+
+  !Vue.prototype.$auth && Object.defineProperties(Vue.prototype, {
+    $auth: {
+      get() {
+        const _this = this;
+        return (permissions) => {
+          let [permission, action] = permissions.split('.');
+          const permissionList = _this.$store.getters.roles.permissions;
+          permissionList.find((val) => {
+            return val.permissionId === permission
+          }).actionList.findIndex((val) => {
+            return val === action
+          });
+          return false
+        }
+      }
+    }
+  });
+
+  !Vue.prototype.$enum && Object.defineProperties(Vue.prototype, {
+    $enum: {
+      get() {
+        // const _this = this;
+        return (val) => {
+          let result = PERMISSION_ENUM;
+          val && val.split('.').forEach(v => {
+            result = result && result[v] || null
+          });
+          return result
+        }
+      }
+    }
+  });
+}
+
+export default plugin

src/views/list/TableList.vue

@@ -1,303 +1,305 @@
-<template>
-  <a-card :bordered="false">
-    <div class="table-page-search-wrapper">
-      <a-form layout="inline">
-        <a-row :gutter="48">
-          <a-col :md="8" :sm="24">
-            <a-form-item label="规则编号">
-              <a-input v-model="queryParam.id" placeholder=""/>
-            </a-form-item>
-          </a-col>
-          <a-col :md="8" :sm="24">
-            <a-form-item label="使用状态">
-              <a-select v-model="queryParam.status" placeholder="请选择" default-value="0">
-                <a-select-option value="0">全部</a-select-option>
-                <a-select-option value="1">关闭</a-select-option>
-                <a-select-option value="2">运行中</a-select-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <template v-if="advanced">
-            <a-col :md="8" :sm="24">
-              <a-form-item label="调用次数">
-                <a-input-number v-model="queryParam.callNo" style="width: 100%"/>
-              </a-form-item>
-            </a-col>
-            <a-col :md="8" :sm="24">
-              <a-form-item label="更新日期">
-                <a-date-picker v-model="queryParam.date" style="width: 100%" placeholder="请输入更新日期"/>
-              </a-form-item>
-            </a-col>
-            <a-col :md="8" :sm="24">
-              <a-form-item label="使用状态">
-                <a-select v-model="queryParam.useStatus" placeholder="请选择" default-value="0">
-                  <a-select-option value="0">全部</a-select-option>
-                  <a-select-option value="1">关闭</a-select-option>
-                  <a-select-option value="2">运行中</a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-            <a-col :md="8" :sm="24">
-              <a-form-item label="使用状态">
-                <a-select placeholder="请选择" default-value="0">
-                  <a-select-option value="0">全部</a-select-option>
-                  <a-select-option value="1">关闭</a-select-option>
-                  <a-select-option value="2">运行中</a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-          </template>
-          <a-col :md="!advanced && 8 || 24" :sm="24">
-            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
-              <a-button type="primary">查询</a-button>
-              <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
-              <a @click="toggleAdvanced" style="margin-left: 8px">
-                {{ advanced ? '收起' : '展开' }}
-                <a-icon :type="advanced ? 'up' : 'down'"/>
-              </a>
-            </span>
-          </a-col>
-        </a-row>
-      </a-form>
-    </div>
-
-    <div class="table-operator">
-      <a-button type="primary" icon="plus">新建</a-button>
-      <a-dropdown v-if="selectedRowKeys.length > 0">
-        <a-menu slot="overlay">
-          <a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
-          <!-- lock | unlock -->
-          <a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
-        </a-menu>
-        <a-button style="margin-left: 8px">
-          批量操作 <a-icon type="down" />
-        </a-button>
-      </a-dropdown>
-    </div>
-
-    <s-table
-      ref="table"
-      size="default"
-      :columns="columns"
-      :data="loadData"
-      :showAlertInfo="true"
-      @onSelect="onChange"
-    >
-      <span slot="action" slot-scope="text, record">
-        <a @click="handleEdit(record)">编辑</a>
-        <a-divider type="vertical" />
-        <a-dropdown>
-          <a class="ant-dropdown-link">
-            更多 <a-icon type="down" />
-          </a>
-          <a-menu slot="overlay">
-            <a-menu-item>
-              <a href="javascript:;">详情</a>
-            </a-menu-item>
-            <a-menu-item>
-              <a href="javascript:;">禁用</a>
-            </a-menu-item>
-            <a-menu-item>
-              <a href="javascript:;">删除</a>
-            </a-menu-item>
-          </a-menu>
-        </a-dropdown>
-      </span>
-    </s-table>
-
-    <a-modal
-      title="操作"
-      :width="800"
-      v-model="visible"
-      @ok="handleOk"
-    >
-      <a-form :autoFormCreate="(form)=>{this.form = form}">
-
-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label='规则编号'
-          hasFeedback
-          validateStatus='success'
-        >
-          <a-input placeholder='规则编号' v-model="mdl.no" id='no' />
-        </a-form-item>
-
-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label='服务调用次数'
-          hasFeedback
-          validateStatus='success'
-        >
-          <a-input-number :min="1" id="callNo" v-model="mdl.callNo" style="width: 100%" />
-        </a-form-item>
-
-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label='状态'
-          hasFeedback
-          validateStatus='warning'
-        >
-          <a-select defaultValue='1' v-model="mdl.status">
-            <a-select-option value='1'>Option 1</a-select-option>
-            <a-select-option value='2'>Option 2</a-select-option>
-            <a-select-option value='3'>Option 3</a-select-option>
-          </a-select>
-        </a-form-item>
-
-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label='描述'
-          hasFeedback
-          help='请填写一段描述'
-        >
-          <a-textarea :rows="5" v-model="mdl.description" placeholder="..." id='description'/>
-        </a-form-item>
-
-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label='更新时间'
-          hasFeedback
-          validateStatus='error'
-        >
-          <a-date-picker
-            style="width: 100%"
-            showTime
-            format="YYYY-MM-DD HH:mm:ss"
-            placeholder="Select Time"
-          />
-        </a-form-item>
-
-      </a-form>
-    </a-modal>
-
-  </a-card>
-</template>
-
-<script>
-  import STable from '@/components/table/'
-  import ATextarea from 'ant-design-vue/es/input/TextArea'
-  import AInput from 'ant-design-vue/es/input/Input'
-  import moment from 'moment'
-
-  import { getRoleList, getServiceList } from '@/api/manage'
-
-  export default {
-    name: 'TableList',
-    components: {
-      AInput,
-      ATextarea,
-      STable
-    },
-    data () {
-      return {
-        visible: false,
-        labelCol: {
-          xs: { span: 24 },
-          sm: { span: 5 },
-        },
-        wrapperCol: {
-          xs: { span: 24 },
-          sm: { span: 12 },
-        },
-        form: null,
-        mdl: {},
-
-        // 高级搜索 展开/关闭
-        advanced: true,
-        // 查询参数
-        queryParam: {},
-        // 表头
-        columns: [
-          {
-            title: '规则编号',
-            dataIndex: 'no'
-          },
-          {
-            title: '描述',
-            dataIndex: 'description'
-          },
-          {
-            title: '服务调用次数',
-            dataIndex: 'callNo',
-            sorter: true,
-            needTotal: true,
-            customRender: (text) => text + ' 次'
-          },
-          {
-            title: '状态',
-            dataIndex: 'status',
-            needTotal: true
-          },
-          {
-            title: '更新时间',
-            dataIndex: 'updatedAt',
-            sorter: true
-          },
-          {
-            table: '操作',
-            dataIndex: 'action',
-            width: '150px',
-            scopedSlots: { customRender: 'action' },
-          }
-        ],
-        // 加载数据方法 必须为 Promise 对象
-        loadData: parameter => {
-          return getServiceList(Object.assign(parameter, this.queryParam))
-            .then(res => {
-              return res.result
-            })
-        },
-
-        selectedRowKeys: [],
-        selectedRows: []
-      }
-    },
-    created () {
-      getRoleList({ t: new Date()})
-    },
-    methods: {
-      handleEdit (record) {
-        this.mdl = Object.assign({}, record)
-        console.log(this.mdl)
-        this.visible = true
-      },
-      handleOk () {
-
-      },
-      onChange (row) {
-        this.selectedRowKeys = row.selectedRowKeys
-        this.selectedRows = row.selectedRows
-
-        console.log(this.$refs.table)
-      },
-      toggleAdvanced () {
-        this.advanced = !this.advanced
-      },
-
-      resetSearchForm () {
-        this.queryParam = {
-          date: moment(new Date())
-        }
-      }
-    },
-    watch: {
-      /*
-      'selectedRows': function (selectedRows) {
-        this.needTotalList = this.needTotalList.map(item => {
-          return {
-            ...item,
-            total: selectedRows.reduce( (sum, val) => {
-              return sum + val[item.dataIndex]
-            }, 0)
-          }
-        })
-      }
-      */
-    }
-  }
+<template>
+  <a-card :bordered="false">
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :md="8" :sm="24">
+            <a-form-item label="规则编号">
+              <a-input v-model="queryParam.id" placeholder=""/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <a-form-item label="使用状态">
+              <a-select v-model="queryParam.status" placeholder="请选择" default-value="0">
+                <a-select-option value="0">全部</a-select-option>
+                <a-select-option value="1">关闭</a-select-option>
+                <a-select-option value="2">运行中</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <template v-if="advanced">
+            <a-col :md="8" :sm="24">
+              <a-form-item label="调用次数">
+                <a-input-number v-model="queryParam.callNo" style="width: 100%"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="更新日期">
+                <a-date-picker v-model="queryParam.date" style="width: 100%" placeholder="请输入更新日期"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="使用状态">
+                <a-select v-model="queryParam.useStatus" placeholder="请选择" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="使用状态">
+                <a-select placeholder="请选择" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </template>
+          <a-col :md="!advanced && 8 || 24" :sm="24">
+            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
+              <a-button type="primary">查询</a-button>
+              <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
+              <a @click="toggleAdvanced" style="margin-left: 8px">
+                {{ advanced ? '收起' : '展开' }}
+                <a-icon :type="advanced ? 'up' : 'down'"/>
+              </a>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+
+    <div class="table-operator">
+      <a-button type="primary" icon="plus" v-if="$auth('table.add')">新建</a-button>
+      <a-dropdown v-if="$auth('table.edit') && selectedRowKeys.length > 0">
+        <a-menu slot="overlay">
+          <a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
+          <!-- lock | unlock -->
+          <a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
+        </a-menu>
+        <a-button style="margin-left: 8px">
+          批量操作 <a-icon type="down" />
+        </a-button>
+      </a-dropdown>
+    </div>
+
+    <s-table
+      ref="table"
+      size="default"
+      :columns="columns"
+      :data="loadData"
+      :showAlertInfo="true"
+      @onSelect="onChange"
+    >
+      <span slot="action" slot-scope="text, record">
+        <template v-if="$auth('table.update')">
+          <a @click="handleEdit(record)">编辑</a>
+          <a-divider type="vertical" />
+        </template>
+        <a-dropdown>
+          <a class="ant-dropdown-link">
+            更多 <a-icon type="down" />
+          </a>
+          <a-menu slot="overlay">
+            <a-menu-item>
+              <a href="javascript:;">详情</a>
+            </a-menu-item>
+            <a-menu-item v-if="$auth('table.disable')">
+              <a href="javascript:;">禁用</a>
+            </a-menu-item>
+            <a-menu-item v-if="$auth('table.delete')">
+              <a href="javascript:;">删除</a>
+            </a-menu-item>
+          </a-menu>
+        </a-dropdown>
+      </span>
+    </s-table>
+
+    <a-modal
+      title="操作"
+      :width="800"
+      v-model="visible"
+      @ok="handleOk"
+    >
+      <a-form :autoFormCreate="(form)=>{this.form = form}">
+
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label='规则编号'
+          hasFeedback
+          validateStatus='success'
+        >
+          <a-input placeholder='规则编号' v-model="mdl.no" id='no' />
+        </a-form-item>
+
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label='服务调用次数'
+          hasFeedback
+          validateStatus='success'
+        >
+          <a-input-number :min="1" id="callNo" v-model="mdl.callNo" style="width: 100%" />
+        </a-form-item>
+
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label='状态'
+          hasFeedback
+          validateStatus='warning'
+        >
+          <a-select defaultValue='1' v-model="mdl.status">
+            <a-select-option value='1'>Option 1</a-select-option>
+            <a-select-option value='2'>Option 2</a-select-option>
+            <a-select-option value='3'>Option 3</a-select-option>
+          </a-select>
+        </a-form-item>
+
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label='描述'
+          hasFeedback
+          help='请填写一段描述'
+        >
+          <a-textarea :rows="5" v-model="mdl.description" placeholder="..." id='description'/>
+        </a-form-item>
+
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label='更新时间'
+          hasFeedback
+          validateStatus='error'
+        >
+          <a-date-picker
+            style="width: 100%"
+            showTime
+            format="YYYY-MM-DD HH:mm:ss"
+            placeholder="Select Time"
+          />
+        </a-form-item>
+
+      </a-form>
+    </a-modal>
+
+  </a-card>
+</template>
+
+<script>
+  import STable from '@/components/table/'
+  import ATextarea from 'ant-design-vue/es/input/TextArea'
+  import AInput from 'ant-design-vue/es/input/Input'
+  import moment from 'moment'
+
+  import { getRoleList, getServiceList } from '@/api/manage'
+
+  export default {
+    name: 'TableList',
+    components: {
+      AInput,
+      ATextarea,
+      STable
+    },
+    data () {
+      return {
+        visible: false,
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 5 },
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 12 },
+        },
+        form: null,
+        mdl: {},
+
+        // 高级搜索 展开/关闭
+        advanced: true,
+        // 查询参数
+        queryParam: {},
+        // 表头
+        columns: [
+          {
+            title: '规则编号',
+            dataIndex: 'no'
+          },
+          {
+            title: '描述',
+            dataIndex: 'description'
+          },
+          {
+            title: '服务调用次数',
+            dataIndex: 'callNo',
+            sorter: true,
+            needTotal: true,
+            customRender: (text) => text + ' 次'
+          },
+          {
+            title: '状态',
+            dataIndex: 'status',
+            needTotal: true
+          },
+          {
+            title: '更新时间',
+            dataIndex: 'updatedAt',
+            sorter: true
+          },
+          {
+            table: '操作',
+            dataIndex: 'action',
+            width: '150px',
+            scopedSlots: { customRender: 'action' },
+          }
+        ],
+        // 加载数据方法 必须为 Promise 对象
+        loadData: parameter => {
+          return getServiceList(Object.assign(parameter, this.queryParam))
+            .then(res => {
+              return res.result
+            })
+        },
+
+        selectedRowKeys: [],
+        selectedRows: []
+      }
+    },
+    created () {
+      getRoleList({ t: new Date()})
+    },
+    methods: {
+      handleEdit (record) {
+        this.mdl = Object.assign({}, record)
+        console.log(this.mdl)
+        this.visible = true
+      },
+      handleOk () {
+
+      },
+      onChange (row) {
+        this.selectedRowKeys = row.selectedRowKeys
+        this.selectedRows = row.selectedRows
+
+        console.log(this.$refs.table)
+      },
+      toggleAdvanced () {
+        this.advanced = !this.advanced
+      },
+
+      resetSearchForm () {
+        this.queryParam = {
+          date: moment(new Date())
+        }
+      }
+    },
+    watch: {
+      /*
+      'selectedRows': function (selectedRows) {
+        this.needTotalList = this.needTotalList.map(item => {
+          return {
+            ...item,
+            total: selectedRows.reduce( (sum, val) => {
+              return sum + val[item.dataIndex]
+            }, 0)
+          }
+        })
+      }
+      */
+    }
+  }
 </script>

src/views/role/RoleList.vue

@@ -0,0 +1,193 @@
+<template>
+  <page-layout title="角色管理">
+    <a-card :bordered="false" :style="{ height: '100%' }">
+      <!--<a-tabs defaultActiveKey="1" tabPosition="left" size="large" :style="{ height: '400px'}" :tabBarStyle="{ textAlign: 'left' }" @prevClick="callback" @nextClick="callback">
+        <a-tab-pane tab="管理员" key="1">Content of tab 1</a-tab-pane>
+        <a-tab-pane tab="销售组长" key="2">Content of tab 2</a-tab-pane>
+        <a-tab-pane tab="销售总负责人" key="3">Content of tab 3</a-tab-pane>
+        <a-tab-pane tab="总经理" key="4">Content of tab 4</a-tab-pane>
+        <a-tab-pane tab="普通销售" key="5">Content of tab 5</a-tab-pane>
+        <a-tab-pane tab="客服" key="6">Content of tab 6</a-tab-pane>
+        <a-tab-pane tab="会员" key="7">Content of tab 7</a-tab-pane>
+        <a-tab-pane tab="增加角色" key="-1">Content of tab 7</a-tab-pane>
+      </a-tabs>-->
+
+      <a-row :gutter="24">
+        <a-col :md="4">
+          <a-list itemLayout="vertical" :dataSource="roles">
+            <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
+              <a-list-item-meta :style="{ marginBottom: '0' }">
+                <span slot="description" style="text-align: center; display: block">{{ item.describe }}</span>
+                <a slot="title" style="text-align: center; display: block" @click="edit(item)">{{ item.name }}</a>
+              </a-list-item-meta>
+            </a-list-item>
+          </a-list>
+        </a-col>
+        <a-col :md="20">
+          <a-row v-if="mdl.id">
+            <a-col :span="5"><h3 style="text-align: right">角色：</h3></a-col>
+            <a-col :span="19"><h3>{{ mdl.name }}</h3></a-col>
+          </a-row>
+          <a-form :form="form">
+            <a-form-item
+              label="唯一键"
+              :labelCol="{ span: 5 }"
+              :wrapperCol="{ span: 18 }"
+            >
+              <a-input v-decorator="[ 'id', {rules: [{ required: true, message: 'Please input unique key!' }]} ]" placeholder="请填写唯一键" />
+            </a-form-item>
+
+            <a-form-item
+              label="角色名称"
+              :labelCol="{ span: 5 }"
+              :wrapperCol="{ span: 18 }"
+            >
+              <a-input v-decorator="[ 'name', {rules: [{ required: true, message: 'Please input role name!' }]} ]" placeholder="请填写角色名称" />
+            </a-form-item>
+
+            <a-form-item
+              label="状态"
+              :labelCol="{ span: 5 }"
+              :wrapperCol="{ span: 18 }"
+            >
+              <a-select v-decorator="[ 'status', {rules: []} ]">
+                <a-select-option :value="1">正常</a-select-option>
+                <a-select-option :value="2">禁用</a-select-option>
+              </a-select>
+            </a-form-item>
+
+            <a-form-item
+              label="备注说明"
+              :labelCol="{ span: 5 }"
+              :wrapperCol="{ span: 18 }"
+            >
+              <a-textarea :row="3" v-decorator="[ 'describe', {rules: [{ required: true, message: 'Please input role name!' }]} ]" placeholder="请填写角色名称" />
+            </a-form-item>
+
+            <a-form-item
+              label="拥有权限"
+              :labelCol="{ span: 5 }"
+              :wrapperCol="{ span: 18 }"
+            >
+              <a-row :gutter="16" v-for="(permission, index) in permissions" :key="index">
+                <a-col :span="4">
+                  {{ permission.name }}：
+                </a-col>
+                <a-col :span="20">
+                  <a-checkbox
+                    v-if="permission.actionsOptions.length > 0"
+                    :indeterminate="permission.indeterminate"
+                    :checked="permission.checkedAll"
+                    @change="onChangeCheckAll($event, permission)">
+                    全选
+                  </a-checkbox>
+                  <a-checkbox-group :options="permission.actionsOptions" v-model="permission.selected" @change="onChangeCheck(permission)" />
+                </a-col>
+              </a-row>
+            </a-form-item>
+
+          </a-form>
+        </a-col>
+      </a-row>
+    </a-card>
+  </page-layout>
+</template>
+
+<script>
+  import PageLayout from '@/components/page/PageLayout'
+  import { getRoleList, getPermissions } from "@/api/manage"
+  import { actionToObject } from '@/utils/permissions'
+  import pick from 'lodash.pick'
+
+  export default {
+    name: "RoleList",
+    components: {
+      PageLayout
+    },
+    data () {
+      return {
+        form: this.$form.createForm(this),
+        mdl: {},
+
+        roles: [],
+        permissions: []
+      }
+    },
+    created () {
+      getRoleList().then((res) => {
+        this.roles = res.result.data
+        this.roles.push({
+          id: '-1',
+          name: '新增角色',
+          describe: '新增一个角色'
+        })
+        console.log('this.roles', this.roles)
+      })
+      this.loadPermissions()
+    },
+    methods: {
+      callback (val) {
+        console.log(val)
+      },
+
+      add () {
+        this.edit({ id: 0 })
+      },
+
+      edit (record) {
+        this.mdl = Object.assign({}, record)
+        // 有权限表，处理勾选
+        if (this.mdl.permissions && this.permissions) {
+          // 先处理要勾选的权限结构
+          const permissionsAction = {}
+          this.mdl.permissions.forEach(permission => {
+            permissionsAction[permission.permissionId] = permission.actionEntitySet.map(entity => entity.action)
+          })
+          // 把权限表遍历一遍，设定要勾选的权限 action
+          this.permissions.forEach(permission => {
+            permission.selected = permissionsAction[permission.id]
+          })
+        }
+
+        this.$nextTick(() => {
+          this.form.setFieldsValue(pick(this.mdl, 'id', 'name', 'status', 'describe'))
+        })
+        console.log('this.mdl', this.mdl)
+      },
+
+      onChangeCheck (permission) {
+        permission.indeterminate = !!permission.selected.length && (permission.selected.length < permission.actionsOptions.length)
+        permission.checkedAll = permission.selected.length === permission.actionsOptions.length
+      },
+      onChangeCheckAll (e, permission) {
+        Object.assign(permission, {
+          selected: e.target.checked ? permission.actionsOptions.map(obj => obj.value) : [],
+          indeterminate: false,
+          checkedAll: e.target.checked
+        })
+      },
+      loadPermissions () {
+        getPermissions().then(res => {
+          let result = res.result
+          this.permissions = result.map(permission => {
+            const options = actionToObject(permission.actionData)
+            permission.checkedAll = false
+            permission.selected = []
+            permission.indeterminate = false
+            permission.actionsOptions = options.map(option => {
+              return {
+                label: option.describe,
+                value: option.action
+              }
+            })
+            return permission
+          })
+        })
+      }
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>