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 = [
}
]
},
{
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 → 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>
<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>
\ 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