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' ...@@ -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
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