总结: 由于权限的接口是后端写死的,所以我们需要一开始就在data中去定义menusLits数组,在初始化就需要去定义做数据展示出来,根据后端需要的格式拼接数据传递即可.
列表页面 roleManag.vue 父组件页面
<template>
<div>
<div class="btnContent">
<a-button type="primary" icon="plus" @click="handleAdd" v-if="$em.checkRoleAlias('settings-roleMangeAdd')">新建 </a-button>
</div>
<a-table :columns="columns" :dataSource="data" rowKey="id" :pagination="false">
<span slot="role" slot-scope="text, record">
<a-tag v-for="(v, k) in record.role" :key="k">{{ v }}</a-tag>
</span>
<tag-boole slot="status" slot-scope="text, record" :tagValue="record.status"></tag-boole>
<action-column
slot="action"
slot-scope="text, record"
:record="record"
:edit="$em.checkRoleAlias('settings-adminUpdate')"
:del="$em.checkRoleAlias('settings-adminDelete')"
@on-edit="handleEdit(record)"
@on-del="handleDelete(record)"
>
</action-column>
</a-table>
<Pagination :pagination="pagination" @change="handleChangePage" />
<add-admin
:formParams="formParams"
@changePower="changeDefaultSelectedKeysFn"
:addVisible="addVisible"
@on-change="changeAdd"
@refresh="refresh"
>
</add-admin>
</div>
</template>
<script>
import { roleLists, deleteRole, roleDetail } from '@/api/permission';
import { showSuccess, showError } from '@/utils/showMsg';
import AddAdmin from './roleAdd.vue';
import ActionColumn from '@/components/Table/ActionColumn';
import TagBoole from '@/components/Table/TagBoole';
import Pagination from '@/components/Pagination/Pagination';
export default {
name: 'Roles',
inject: ['reload'],
components: {
AddAdmin,
ActionColumn,
Pagination,
TagBoole,
},
data() {
return {
addVisible: false,
data: [],
columns: [],
formParams: {
type: 1,
page: 1,
menus: [],
},
pagination: {},
permission: [],
};
},
mounted() {
this.$nextTick(function () {
this.getLists();
});
},
methods: {
refresh() {
this.getLists();
},
changeDefaultSelectedKeysFn(val) {
this.formParams.permission = val;
},
handleAdd() {
this.formParams = {
name: '',
permission: [],
status: true,
remark: '',
menus: [],
role_alias: [],
};
this.addVisible = true;
},
handleChangePage(params) {
this.params.page = params.page;
this.getLists();
},
async getLists() {
const res = await roleLists({ type: 1 });
if (res.data.code == 0) {
this.data = res.data.result.lists.data;
this.columns = res.data.result.field;
this.pagination = res.data.result.lists;
this.columns[3].scopedSlots = { customRender: 'status' };
this.columns.push({
title: '操作',
dataIndex: '',
key: 'action',
scopedSlots: { customRender: 'action' },
});
}
},
changeAdd(visible) {
this.addVisible = !visible;
},
handleEdit(record) {
this.formParams = {};
record.status = Boolean(record.status);
this.formParams = {
id: record.id,
name: record.name,
status: record.status,
remark: record.remark,
menus: record.menus,
};
this.addVisible = true;
},
handleDelete(item) {
deleteRole({ id: item.id }).then((res) => {
if (res.data.code == 0) {
showSuccess(res.data.message);
if (this.data.length < 2) {
this.formParams.page--;
}
this.getLists();
}
});
},
},
};
</script>
<style scoped></style>
注意 : 权限分配是单独写在了此子组件页面了 roleAdd.vue
<template>
<a-modal title="添加角色" style="top: 20px" :width="800" v-model="visible" @ok="handleOk" @cancel="handleCancel">
<a-form :form="menuForm">
<a-form-item label="用户名" :label-col="labelCol" :wrapper-col="wrapperCol" :required="true">
<a-input placeholder="用户名" v-model="formParams.name" />
</a-form-item>
<a-form-item label="角色描述" :label-col="labelCol" :wrapper-col="wrapperCol" :required="true">
<a-textarea v-model="formParams.remark" :auto-size="{ minRows: 3, maxRows: 5 }" />
</a-form-item>
<a-form-item label="是否启用" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-switch :defaultChecked="formParams.status" v-model="formParams.status" />
</a-form-item>
<a-form-item label="权限分配" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-checkbox-group v-model="permission" @change="changePower">
<a-checkbox value="warehous">扫码入库</a-checkbox>
<a-checkbox value="evaluate">扫码估价</a-checkbox>
<a-checkbox value="itemsDetail">扫码查价</a-checkbox>
</a-checkbox-group>
</a-form-item>
</a-form>
</a-modal>
</template>
<script>
import { createRole, updateRole } from '@/api/permission';
import { showSuccess, showError, showErrors } from '@/utils/showMsg';
import menus from '@/config/RoleMenus/index';
export default {
name: 'AddRole',
inject: ['reload'],
props: {
addVisible: {
type: Boolean,
default: false,
},
formParams: {
type: Object,
default: {
name: '',
status: '',
remark: '',
menus: [],
},
},
},
data() {
return {
menuForm: this.$form.createForm(this),
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
visible: false,
roleMenus: menus,
formItem: { type: 1 },
permission: [],
menusLits: [
{
path: '', // 路由
alias: 'warehouse-warehouse', // 权限菜单别名
rules: [
// 权限接口~
'platform/v2/supplyChain/warehouse',
'platform/v2/supplyChain/itemsDetailAuth',
'platform/v2/member/mobileDetail',
],
},
{
path: '',
alias: 'warehouse-evaluate', //估价
rules: [
//权限
'platform/v2/supplyChain/evaluate',
'platform/v2/supplyChain/itemsDetailAuth',
],
},
{
path: '',
alias: 'warehouse-itemsDetail',
rules: ['platform/v2/supplyChain/itemsDetail'],
},
],
};
},
mounted() {},
methods: {
handleOk() {
let menus = [];
this.permission.forEach((item) => {
if (item == 'warehouse') {
menus.push(this.menusLits[0]);
}
if (item == 'evaluate') {
menus.push(this.menusLits[1]);
}
if (item == 'itemsDetail') {
menus.push(this.menusLits[2]);
}
});
this.formItem.menus = menus;
this.formItem.name = this.formParams.name;
this.formItem.status = this.formParams.status;
this.formItem.remark = this.formParams.remark;
if (this.formParams.id === undefined) {
this.toCreate();
}
if (this.formParams.id > 0) {
this.formItem.id = this.formParams.id;
this.toUpdate();
}
this.$emit('on-change', this.visible);
},
handleCancel() {
this.$emit('on-change', this.visible);
},
toCreate() {
createRole(this.formItem).then((res) => {
if (res.data.code === 0) {
showSuccess(res.data.message);
this.$emit('refresh');
} else if (res.data.code !== 414) {
showError(res.data.message);
}
});
},
toUpdate() {
this.formItem.type = 1;
updateRole(this.formItem).then((res) => {
if (res.data.code === 0) {
showSuccess(res.data.message);
this.$emit('refresh');
} else if (res.data.code !== 414) {
showError(res.data.message);
}
});
},
changePower(val) {
this.permission = val;
this.$emit('changePower', this.permission);
},
},
watch: {
addVisible(v) {
this.visible = v;
},
formParams(v) {
let permission = [];
v.menus.forEach((item) => {
if (item.alias == 'warehouse-supplyChainWarehouse') {
permission.push('warehouse');
}
if (item.alias == 'warehouse-evaluate') {
permission.push('evaluate');
}
if (item.alias == 'warehouse-itemsDetail') {
permission.push('itemsDetail');
}
});
this.permission = permission;
this.$forceUpdate();
},
},
};
</script>
<style scoped></style>
