Skip to content

A
ant-design-pro-vue
Commit fb67e6e2 by Sendya
Options

feat: add action check

parent e6cb6a1a
Showing with 361 additions and 302 deletions
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
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