Skip to content

A
ant-design-pro-vue
Commit 69cf97af by Sendya
Options

Merge branch 'dev' into pr/29

parents cc99477e b350c3bf
Showing with 570 additions and 302 deletions
src/config/router.config.js
...@@ -169,6 +169,21 @@ export const asyncRouterMap = [ ...@@ -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 // result
{ {
......
src/main.js
...@@ -12,6 +12,7 @@ import 'ant-design-vue/dist/antd.less' // or 'ant-design-vue/dist/antd.less' ...@@ -12,6 +12,7 @@ import 'ant-design-vue/dist/antd.less' // or 'ant-design-vue/dist/antd.less'
import '@/permission' // permission control import '@/permission' // permission control
import '@/utils/filter' // base filter import '@/utils/filter' // base filter
import PermissionHelper from '@/utils/helper/permission'
import { import {
ACCESS_TOKEN, ACCESS_TOKEN,
...@@ -33,6 +34,7 @@ Vue.use(Storage, config.storageOptions) ...@@ -33,6 +34,7 @@ Vue.use(Storage, config.storageOptions)
Vue.use(Antd) Vue.use(Antd)
Vue.use(VueAxios, router) Vue.use(VueAxios, router)
Vue.use(Viser) Vue.use(Viser)
Vue.use(PermissionHelper)
new Vue({ new Vue({
router, router,
......
src/utils/helper/permission.js 0 → 100644
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
\ No newline at end of file
src/views/list/TableList.vue
<template> <template>
<a-card :bordered="false"> <a-card :bordered="false">
<div class="table-page-search-wrapper"> <div class="table-page-search-wrapper">
<a-form layout="inline"> <a-form layout="inline">
<a-row :gutter="48"> <a-row :gutter="48">
<a-col :md="8" :sm="24"> <a-col :md="8" :sm="24">
<a-form-item label="规则编号"> <a-form-item label="规则编号">
<a-input v-model="queryParam.id" placeholder=""/> <a-input v-model="queryParam.id" placeholder=""/>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :md="8" :sm="24"> <a-col :md="8" :sm="24">
<a-form-item label="使用状态"> <a-form-item label="使用状态">
<a-select v-model="queryParam.status" placeholder="请选择" default-value="0"> <a-select v-model="queryParam.status" placeholder="请选择" default-value="0">
<a-select-option value="0">全部</a-select-option> <a-select-option value="0">全部</a-select-option>
<a-select-option value="1">关闭</a-select-option> <a-select-option value="1">关闭</a-select-option>
<a-select-option value="2">运行中</a-select-option> <a-select-option value="2">运行中</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<template v-if="advanced"> <template v-if="advanced">
<a-col :md="8" :sm="24"> <a-col :md="8" :sm="24">
<a-form-item label="调用次数"> <a-form-item label="调用次数">
<a-input-number v-model="queryParam.callNo" style="width: 100%"/> <a-input-number v-model="queryParam.callNo" style="width: 100%"/>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :md="8" :sm="24"> <a-col :md="8" :sm="24">
<a-form-item label="更新日期"> <a-form-item label="更新日期">
<a-date-picker v-model="queryParam.date" style="width: 100%" placeholder="请输入更新日期"/> <a-date-picker v-model="queryParam.date" style="width: 100%" placeholder="请输入更新日期"/>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :md="8" :sm="24"> <a-col :md="8" :sm="24">
<a-form-item label="使用状态"> <a-form-item label="使用状态">
<a-select v-model="queryParam.useStatus" placeholder="请选择" default-value="0"> <a-select v-model="queryParam.useStatus" placeholder="请选择" default-value="0">
<a-select-option value="0">全部</a-select-option> <a-select-option value="0">全部</a-select-option>
<a-select-option value="1">关闭</a-select-option> <a-select-option value="1">关闭</a-select-option>
<a-select-option value="2">运行中</a-select-option> <a-select-option value="2">运行中</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :md="8" :sm="24"> <a-col :md="8" :sm="24">
<a-form-item label="使用状态"> <a-form-item label="使用状态">
<a-select placeholder="请选择" default-value="0"> <a-select placeholder="请选择" default-value="0">
<a-select-option value="0">全部</a-select-option> <a-select-option value="0">全部</a-select-option>
<a-select-option value="1">关闭</a-select-option> <a-select-option value="1">关闭</a-select-option>
<a-select-option value="2">运行中</a-select-option> <a-select-option value="2">运行中</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
</template> </template>
<a-col :md="!advanced && 8 || 24" :sm="24"> <a-col :md="!advanced && 8 || 24" :sm="24">
<span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} "> <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
<a-button type="primary">查询</a-button> <a-button type="primary">查询</a-button>
<a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button> <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
<a @click="toggleAdvanced" style="margin-left: 8px"> <a @click="toggleAdvanced" style="margin-left: 8px">
{{ advanced ? '收起' : '展开' }} {{ advanced ? '收起' : '展开' }}
<a-icon :type="advanced ? 'up' : 'down'"/> <a-icon :type="advanced ? 'up' : 'down'"/>
</a> </a>
</span> </span>
</a-col> </a-col>
</a-row> </a-row>
</a-form> </a-form>
</div> </div>
<div class="table-operator"> <div class="table-operator">
<a-button type="primary" icon="plus">新建</a-button> <a-button type="primary" icon="plus" v-if="$auth('table.add')">新建</a-button>
<a-dropdown v-if="selectedRowKeys.length > 0"> <a-dropdown v-if="$auth('table.edit') && selectedRowKeys.length > 0">
<a-menu slot="overlay"> <a-menu slot="overlay">
<a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item> <a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
<!-- lock | unlock --> <!-- lock | unlock -->
<a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item> <a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
</a-menu> </a-menu>
<a-button style="margin-left: 8px"> <a-button style="margin-left: 8px">
批量操作 <a-icon type="down" /> 批量操作 <a-icon type="down" />
</a-button> </a-button>
</a-dropdown> </a-dropdown>
</div> </div>
<s-table <s-table
ref="table" ref="table"
size="default" size="default"
:columns="columns" :columns="columns"
:data="loadData" :data="loadData"
:showAlertInfo="true" :showAlertInfo="true"
@onSelect="onChange" @onSelect="onChange"
> >
<span slot="action" slot-scope="text, record"> <span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a> <template v-if="$auth('table.update')">
<a-divider type="vertical" /> <a @click="handleEdit(record)">编辑</a>
<a-dropdown> <a-divider type="vertical" />
<a class="ant-dropdown-link"> </template>
更多 <a-icon type="down" /> <a-dropdown>
</a> <a class="ant-dropdown-link">
<a-menu slot="overlay"> 更多 <a-icon type="down" />
<a-menu-item> </a>
<a href="javascript:;">详情</a> <a-menu slot="overlay">
</a-menu-item> <a-menu-item>
<a-menu-item> <a href="javascript:;">详情</a>
<a href="javascript:;">禁用</a> </a-menu-item>
</a-menu-item> <a-menu-item v-if="$auth('table.disable')">
<a-menu-item> <a href="javascript:;">禁用</a>
<a href="javascript:;">删除</a> </a-menu-item>
</a-menu-item> <a-menu-item v-if="$auth('table.delete')">
</a-menu> <a href="javascript:;">删除</a>
</a-dropdown> </a-menu-item>
</span> </a-menu>
</s-table> </a-dropdown>
</span>
<a-modal </s-table>
title="操作"
:width="800" <a-modal
v-model="visible" title="操作"
@ok="handleOk" :width="800"
> v-model="visible"
<a-form :autoFormCreate="(form)=>{this.form = form}"> @ok="handleOk"
>
<a-form-item <a-form :autoFormCreate="(form)=>{this.form = form}">
:labelCol="labelCol"
:wrapperCol="wrapperCol" <a-form-item
label='规则编号' :labelCol="labelCol"
hasFeedback :wrapperCol="wrapperCol"
validateStatus='success' label='规则编号'
> hasFeedback
<a-input placeholder='规则编号' v-model="mdl.no" id='no' /> validateStatus='success'
</a-form-item> >
<a-input placeholder='规则编号' v-model="mdl.no" id='no' />
<a-form-item </a-form-item>
:labelCol="labelCol"
:wrapperCol="wrapperCol" <a-form-item
label='服务调用次数' :labelCol="labelCol"
hasFeedback :wrapperCol="wrapperCol"
validateStatus='success' label='服务调用次数'
> hasFeedback
<a-input-number :min="1" id="callNo" v-model="mdl.callNo" style="width: 100%" /> validateStatus='success'
</a-form-item> >
<a-input-number :min="1" id="callNo" v-model="mdl.callNo" style="width: 100%" />
<a-form-item </a-form-item>
:labelCol="labelCol"
:wrapperCol="wrapperCol" <a-form-item
label='状态' :labelCol="labelCol"
hasFeedback :wrapperCol="wrapperCol"
validateStatus='warning' label='状态'
> hasFeedback
<a-select defaultValue='1' v-model="mdl.status"> validateStatus='warning'
<a-select-option value='1'>Option 1</a-select-option> >
<a-select-option value='2'>Option 2</a-select-option> <a-select defaultValue='1' v-model="mdl.status">
<a-select-option value='3'>Option 3</a-select-option> <a-select-option value='1'>Option 1</a-select-option>
</a-select> <a-select-option value='2'>Option 2</a-select-option>
</a-form-item> <a-select-option value='3'>Option 3</a-select-option>
</a-select>
<a-form-item </a-form-item>
:labelCol="labelCol"
:wrapperCol="wrapperCol" <a-form-item
label='描述' :labelCol="labelCol"
hasFeedback :wrapperCol="wrapperCol"
help='请填写一段描述' label='描述'
> hasFeedback
<a-textarea :rows="5" v-model="mdl.description" placeholder="..." id='description'/> help='请填写一段描述'
</a-form-item> >
<a-textarea :rows="5" v-model="mdl.description" placeholder="..." id='description'/>
<a-form-item </a-form-item>
:labelCol="labelCol"
:wrapperCol="wrapperCol" <a-form-item
label='更新时间' :labelCol="labelCol"
hasFeedback :wrapperCol="wrapperCol"
validateStatus='error' label='更新时间'
> hasFeedback
<a-date-picker validateStatus='error'
style="width: 100%" >
showTime <a-date-picker
format="YYYY-MM-DD HH:mm:ss" style="width: 100%"
placeholder="Select Time" showTime
/> format="YYYY-MM-DD HH:mm:ss"
</a-form-item> placeholder="Select Time"
/>
</a-form> </a-form-item>
</a-modal>
</a-form>
</a-card> </a-modal>
</template>
</a-card>
<script> </template>
import STable from '@/components/table/'
import ATextarea from 'ant-design-vue/es/input/TextArea' <script>
import AInput from 'ant-design-vue/es/input/Input' import STable from '@/components/table/'
import moment from 'moment' import ATextarea from 'ant-design-vue/es/input/TextArea'
import AInput from 'ant-design-vue/es/input/Input'
import { getRoleList, getServiceList } from '@/api/manage' import moment from 'moment'
export default { import { getRoleList, getServiceList } from '@/api/manage'
name: 'TableList',
components: { export default {
AInput, name: 'TableList',
ATextarea, components: {
STable AInput,
}, ATextarea,
data () { STable
return { },
visible: false, data () {
labelCol: { return {
xs: { span: 24 }, visible: false,
sm: { span: 5 }, labelCol: {
}, xs: { span: 24 },
wrapperCol: { sm: { span: 5 },
xs: { span: 24 }, },
sm: { span: 12 }, wrapperCol: {
}, xs: { span: 24 },
form: null, sm: { span: 12 },
mdl: {}, },
form: null,
// 高级搜索 展开/关闭 mdl: {},
advanced: true,
// 查询参数 // 高级搜索 展开/关闭
queryParam: {}, advanced: true,
// 表头 // 查询参数
columns: [ queryParam: {},
{ // 表头
title: '规则编号', columns: [
dataIndex: 'no' {
}, title: '规则编号',
{ dataIndex: 'no'
title: '描述', },
dataIndex: 'description' {
}, title: '描述',
{ dataIndex: 'description'
title: '服务调用次数', },
dataIndex: 'callNo', {
sorter: true, title: '服务调用次数',
needTotal: true, dataIndex: 'callNo',
customRender: (text) => text + ' 次' sorter: true,
}, needTotal: true,
{ customRender: (text) => text + ' 次'
title: '状态', },
dataIndex: 'status', {
needTotal: true title: '状态',
}, dataIndex: 'status',
{ needTotal: true
title: '更新时间', },
dataIndex: 'updatedAt', {
sorter: true title: '更新时间',
}, dataIndex: 'updatedAt',
{ sorter: true
table: '操作', },
dataIndex: 'action', {
width: '150px', table: '操作',
scopedSlots: { customRender: 'action' }, dataIndex: 'action',
} width: '150px',
], scopedSlots: { customRender: 'action' },
// 加载数据方法 必须为 Promise 对象 }
loadData: parameter => { ],
return getServiceList(Object.assign(parameter, this.queryParam)) // 加载数据方法 必须为 Promise 对象
.then(res => { loadData: parameter => {
return res.result return getServiceList(Object.assign(parameter, this.queryParam))
}) .then(res => {
}, return res.result
})
selectedRowKeys: [], },
selectedRows: []
} selectedRowKeys: [],
}, selectedRows: []
created () { }
getRoleList({ t: new Date()}) },
}, created () {
methods: { getRoleList({ t: new Date()})
handleEdit (record) { },
this.mdl = Object.assign({}, record) methods: {
console.log(this.mdl) handleEdit (record) {
this.visible = true this.mdl = Object.assign({}, record)
}, console.log(this.mdl)
handleOk () { this.visible = true
},
}, handleOk () {
onChange (row) {
this.selectedRowKeys = row.selectedRowKeys },
this.selectedRows = row.selectedRows onChange (row) {
this.selectedRowKeys = row.selectedRowKeys
console.log(this.$refs.table) this.selectedRows = row.selectedRows
},
toggleAdvanced () { console.log(this.$refs.table)
this.advanced = !this.advanced },
}, toggleAdvanced () {
this.advanced = !this.advanced
resetSearchForm () { },
this.queryParam = {
date: moment(new Date()) resetSearchForm () {
} this.queryParam = {
} date: moment(new Date())
}, }
watch: { }
/* },
'selectedRows': function (selectedRows) { watch: {
this.needTotalList = this.needTotalList.map(item => { /*
return { 'selectedRows': function (selectedRows) {
...item, this.needTotalList = this.needTotalList.map(item => {
total: selectedRows.reduce( (sum, val) => { return {
return sum + val[item.dataIndex] ...item,
}, 0) total: selectedRows.reduce( (sum, val) => {
} return sum + val[item.dataIndex]
}) }, 0)
} }
*/ })
} }
} */
}
}
</script> </script>
\ No newline at end of file
src/views/role/RoleList.vue 0 → 100644
<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>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment