场景：需要实现一个可折叠的二级权限表格，勾选全部时，下面的子权限自动勾选；去除子权限的勾选时，父权限的勾选也自动取消。
如图：
permission.png
解决方案：
1.主页面
import BaseComponent from '../../../base/BaseComponent';
import { connect } from 'dva';
import LogUtil from '../../../../../utils/erp/LogUtil';
import MsgUtil from '../../../../../utils/erp/MsgUtil';
import MyConstants from '../../../../../utils/erp/MyConstants';
import { Table, Checkbox, Button, message } from 'antd';
import HttpCode from '../../../../../utils/erp/HttpCode';
import PmsOperateCode from '../../../../../utils/erp/PmsOperateCode';
import router from 'umi/router';
@connect(({ system, loading }) => ({
system,
loading: loading.models.system,
}))
class OperatorPermission extends BaseComponent {
positionId = MyConstants.DefaultNumValue;
columns = [
{
title: '权限名称',
dataIndex: 'name',
key: 'name',
width: '20%',
},
{
title: '功能权限',
dataIndex: 'view',
key: 'view',
width: '40%',
render: (text, record) => (
<div style={{ width: 300 }}>
{this.renderCheckBoxLine(record)}
</div>
),
},
{
title: '说明',
dataIndex: 'remarks',
width: '40%',
key: 'remarks',
},
];
list = [];
tableKey = 0;
constructor(props) {
super(props);
const getParams = this.props.location.state;
if (getParams != null && getParams.positionId != null) {
this.positionId = getParams.positionId;
LogUtil.debugTag('this.positionId=', this.positionId);
} else {
MsgUtil.transParamsIsNull('订单 ID');
}
}
componentDidMount() {
this.getBasicPermissionList();
}
render() {
const { loading } = this.props;
return (
<div>
权限设置
<Table key={this.tableKey} loading={loading} defaultExpandAllRows={true} columns={this.columns}
dataSource={this.list}/>
<div>
<Button type="primary" style={{ marginLeft: 20 }} onClick={this.saveInfo.bind(this)}> 保存</Button>
<Button type="primary" ghost style={{ marginLeft: 20 }} onClick={this.goBack.bind(this)}> 取消</Button>
</div>
</div>
);
}
/**
* 加载权限勾选行
*/
renderCheckBoxLine(record) {
if (!record.isFather) {
return (
<div style={{ marginLeft: 30 }}>
{record.operationList.map((item) => {
return this.renderCheckbox(item, record.fatherCode, record.code);
})}
</div>
);
} else {
return <Checkbox id={record.code} key={record.code} onChange={this.onFatherCheckboxChange}
checked={record.allChecked}>打开所有</Checkbox>;
}
}
/**
* 加载权限勾选框
*/
renderCheckbox(operation, levelOneCode, levelTwoCode) {
let text = '';
let key = levelOneCode + '#' + levelTwoCode + '#' + operation.code;
switch (operation.code) {
case PmsOperateCode.READ:
text = '打开';
break;
case PmsOperateCode.WRITE:
text = '编辑';
break;
case PmsOperateCode.VERIFY:
text = '审核';
break;
}
return (
<Checkbox id={key} key={key} onChange={this.onCheckboxChange} checked={operation.checked}>
{text}
</Checkbox>
);
}
//================================== 控件回调 =====================================
/**
* 父节点勾选框回调
*/
onFatherCheckboxChange = (e) => {
let id = e.target.id;
for (let i = 0; i < this.list.length; i++) {
if (this.list[i].code === id) {
this.list[i].allChecked = e.target.checked;
//勾选所有子节点
if (this.list[i].children !== undefined) {
for (let j = 0; j < this.list[i].children.length; j++) {
for (let k = 0; k < this.list[i].children[j].operationList.length; k++) {
this.list[i].children[j].operationList[k].checked = e.target.checked;
}
}
}
}
}
this.setState({});
};
/**
* 子节点勾选框回调
*/
onCheckboxChange = e => {
let id = e.target.id;
let keyArr = id.split('#');
for (let i = 0; i < this.list.length; i++) {
//父模块编号匹配
if ((this.list[i].code + '').trim() === keyArr[0].trim()) {
for (let j = 0; j < this.list[i].children.length; j++) {
//子模块编号匹配
if ((this.list[i].children[j].code + '').trim() === keyArr[1].trim()) {
for (let k = 0; k < this.list[i].children[j].operationList.length; k++) {
//勾选框匹配
if ((this.list[i].children[j].operationList[k].code + '').trim() === keyArr[2].trim()) {
this.list[i].children[j].operationList[k].checked = e.target.checked;
if (!this.list[i].children[j].operationList[k].checked) {
this.list[i].allChecked = false;
}
this.setState({});
return;
}
}
}
}
}
}
};
//============================ 数据转化 ===================================
/**
* 初始化空的权限表
*/
initBasicPermissionList(list) {
LogUtil.debugTag('list', list);
this.list = list;
this.tableKey++;
this.setState({});
}
/**
* 将某个职位的权限加到权限表上面去
*/
addPosPmsToBasicList(posPmsList) {
LogUtil.debugTag('posPmsList', posPmsList);
//循环需要加入表格的权限列表
for (let m = 0; m < posPmsList.length; m++) {
//循环权限表
for (let i = 0; i < this.list.length; i++) {
if (this.list[i].children === undefined) {
//没有子节点的父节点
if (this.list[i].code === posPmsList[m].module) {
if (posPmsList[m].operations.length > 0) {
let operation = posPmsList[m].operations[0];
if (operation === PmsOperateCode.READ) {
this.list[i].allChecked = true;
} else {
this.list[i].allChecked = false;
}
}
} else {
//有子节点的父节点，不做操作
}
} else {
//子节点
for (let j = 0; j < this.list[i].children.length; j++) {
if (this.list[i].children[j].code === posPmsList[m].module) {
for (let k = 0; k < this.list[i].children[j].operationList.length; k++) {
//判断某一个权限checkBox是否需要被选中
for (let n = 0; n < posPmsList[m].operations.length; n++) {
if (posPmsList[m].operations[n] === this.list[i].children[j].operationList[k].code) {
this.list[i].children[j].operationList[k].checked = true;
break;
}
}
}
}
}
}
}
}
this.setState({});
}
/**
* 将UI数据转化为网络上传所需要的形式
*/
transLocalDataToNet(){
let netList = [];
for (let i = 0; i < this.list.length; i++) {
if (this.list[i].children === undefined) {
//没有子节点的模块，必传
let temp = {};
temp.name = this.list[i].name;
temp.module = this.list[i].code;
temp.operations = [];
if (this.list[i].allChecked) {
temp.operations.push(PmsOperateCode.READ);
} else {
temp.operations.push(PmsOperateCode.UNKNOWN);
}
netList.push(temp);
} else {
//有子节点的模块
for (let j = 0; j < this.list[i].children.length; j++) {
let temp = {};
temp.name = this.list[i].children[j].name;
temp.module = this.list[i].children[j].code;
temp.operations = [];
for (let k = 0; k < this.list[i].children[j].operationList.length; k++) {
if (this.list[i].children[j].operationList[k].checked) {
temp.operations.push(this.list[i].children[j].operationList[k].code);
}
}
//有勾选的的才传，否则默认为未勾选
if (temp.operations.length !== 0) {
netList.push(temp);
}
}
}
}
LogUtil.debugTag('netList', netList);
LogUtil.debugTag('netList', JSON.stringify(netList));
return netList;
}
//======================= 网络数据相关 ================================
/**
* 获取空的权限表格数据
*/
getBasicPermissionList() {
const { dispatch } = this.props;
dispatch({
type: 'system/getBasicPermissionList',
payload: {},
callback: response => {
LogUtil.debugTag('response', response);
if (response.code === HttpCode.OK) {
this.initBasicPermissionList(response.data);
this.getPositionPermission(this.positionId);
}
},
});
}
getPositionPermission(id) {
LogUtil.debugTag('getPositionPermission id', id);
const { dispatch } = this.props;
dispatch({
type: 'system/getPositionPermission',
payload: {
id: id,
},
callback: response => {
if (response.code === HttpCode.OK) {
this.addPosPmsToBasicList(response.data);
} else {
MsgUtil.netCodeIsNotOk(response);
}
},
});
}
saveInfo = () => {
let netList = this.transLocalDataToNet();
const { dispatch } = this.props;
dispatch({
type: 'system/modifyPosPermission',
payload: {
id: this.positionId,
body: netList,
},
callback: response => {
if (response.code === HttpCode.OK) {
message.success('保存成功！');
this.goBack();
} else {
MsgUtil.netCodeIsNotOk(response);
}
},
});
};
goBack = () => {
router.goBack();
};
}
export default OperatorPermission;
2.权限表格数据模型
import PmsOperateCode from '../../src/utils/erp/PmsOperateCode';
import PmsMdlCode from '../../src/utils/erp/PmsMdlCode';
export default {
// 空的权限表
'GET /system/basicPermissionList': {
code: 0,
data: [
{
//商品模块
code: PmsMdlCode.GOODS,
allChecked: false,
name: '火影忍者',
remarks: '只要有树叶飞舞的地方，火就会燃烧。火的影子会照耀着村子，并且，让新的树叶发芽。',
isFather: true,
children: [
{
code: PmsMdlCode.GOODS_MNG,
fatherCode: PmsMdlCode.GOODS,
isFather: false,
name: '漩涡鸣人',
remarks: '只要有树叶飞舞的地方，火就会燃烧。火的影子会照耀着村子，并且，让新的树叶发芽。',
operationList: [
{
code: PmsOperateCode.READ,
checked: false,
},
{
code: PmsOperateCode.WRITE,
checked: false,
},
],
},
{
code: PmsMdlCode.GOODS_SUPPLIER_MNG,
fatherCode: PmsMdlCode.GOODS,
isFather: false,
name: '宇智波佐助',
remarks: '只要有树叶飞舞的地方，火就会燃烧。火的影子会照耀着村子，并且，让新的树叶发芽。',
operationList: [
{
code: PmsOperateCode.READ,
checked: false,
},
{
code: PmsOperateCode.WRITE,
checked: false,
},
],
},
],
},
{
code: PmsMdlCode.STORE,
allChecked: false,
name: '波风水门',
remarks: '只要有树叶飞舞的地方，火就会燃烧。火的影子会照耀着村子，并且，让新的树叶发芽。',
isFather: true,
children: [
{
code: PmsMdlCode.STORE_GOODS_MNG,
fatherCode: PmsMdlCode.STORE,
isFather: false,
name: '猿飞日斩',
remarks: '只要有树叶飞舞的地方，火就会燃烧。火的影子会照耀着村子，并且，让新的树叶发芽。',
operationList: [
{
code: PmsOperateCode.READ,
checked: false,
},
{
code: PmsOperateCode.WRITE,
checked: false,
},
],
},
{
code: PmsMdlCode.STORE_FREE_SHIP_SCHEME,
fatherCode: PmsMdlCode.STORE,
isFather: false,
name: '包邮方案',
remarks: '只要有树叶飞舞的地方，火就会燃烧。火的影子会照耀着村子，并且，让新的树叶发芽。',
operationList: [
{
code: PmsOperateCode.READ,
checked: false,
},
{
code: PmsOperateCode.WRITE,
checked: false,
},
],
},
{
code: PmsMdlCode.STORE_BANNER_MNG,
fatherCode: PmsMdlCode.STORE,
isFather: false,
name: ' 雷影',
remarks: '只要有树叶飞舞的地方，火就会燃烧。火的影子会照耀着村子，并且，让新的树叶发芽。',
operationList: [
{
code: PmsOperateCode.READ,
checked: false,
},
],
},
{
code: PmsMdlCode.STORE_FEEDBACK_MNG,
fatherCode: PmsMdlCode.STORE,
isFather: false,
name: '自来也',
remarks: '只要有树叶飞舞的地方，火就会燃烧。火的影子会照耀着村子，并且，让新的树叶发芽。',
operationList: [
{
code: PmsOperateCode.READ,
checked: false,
},
],
},
],
},
{
code: PmsMdlCode.STOCK,
allChecked: false,
name: '我爱罗',
remarks: '库存模块下所有页面的所有权限；',
isFather: true,
children: [
{
code: PmsMdlCode.STOCK_SEARCH,
fatherCode: PmsMdlCode.STOCK,
isFather: false,
name: '卡卡西',
remarks: '只要有树叶飞舞的地方，火就会燃烧。火的影子会照耀着村子，并且，让新的树叶发芽。',
operationList: [
{
code: PmsOperateCode.READ,
checked: false,
},
],
},
{
code: PmsMdlCode.STOCK_RETURN_GOODS_TO_STOCK,
fatherCode: PmsMdlCode.STOCK,
isFather: false,
name: ' 小李',
remarks: '只要有树叶飞舞的地方，火就会燃烧。火的影子会照耀着村子，并且，让新的树叶发芽。',
operationList: [
{
code: PmsOperateCode.READ,
checked: false,
},
{
code: PmsOperateCode.WRITE,
checked: false,
},
{
code: PmsOperateCode.VERIFY,
checked: false,
},
],
},
{
code: PmsMdlCode.STOCK_GOODS_OUT_STOCK,
fatherCode: PmsMdlCode.STOCK,
isFather: false,
name: ' 照美冥',
remarks: '只要有树叶飞舞的地方，火就会燃烧。火的影子会照耀着村子，并且，让新的树叶发芽。',
operationList: [
{
code: PmsOperateCode.READ,
checked: false,
},
{
code: PmsOperateCode.WRITE,
checked: false,
},
{
code: PmsOperateCode.VERIFY,
checked: false,
},
],
},
{
code: PmsMdlCode.STOCK_CHECK,
fatherCode: PmsMdlCode.STOCK,
isFather: false,
name: ' 纲手大奶',
remarks: '只要有树叶飞舞的地方，火就会燃烧。火的影子会照耀着村子，并且，让新的树叶发芽。',
operationList: [
{
code: PmsOperateCode.READ,
checked: false,
},
{
code: PmsOperateCode.WRITE,
checked: false,
},
],
},
{
code: PmsMdlCode.STOCK_ALLOCATE,
fatherCode: PmsMdlCode.STOCK,
isFather: false,
name: ' 佩恩',
remarks: ' 只要有树叶飞舞的地方，火就会燃烧。火的影子会照耀着村子，并且，让新的树叶发芽。',
operationList: [
{
code: PmsOperateCode.READ,
checked: false,
},
{
code: PmsOperateCode.WRITE,
checked: false,
},
],
},
{
code: PmsMdlCode.STOCK_STREAM,
fatherCode: PmsMdlCode.STOCK,
isFather: false,
name: ' 九尾妖狐',
remarks: ' 哈哈哈...',
operationList: [
{
code: PmsOperateCode.READ,
checked: false,
},
],
},
],
},
{
code: PmsMdlCode.PURCHASE,
allChecked: false,
name: '春野樱',
remarks: '只要有树叶飞舞的地方，火就会燃烧。火的影子会照耀着村子，并且，让新的树叶发芽。',
isFather: true,
children: [
{
code: PmsMdlCode.PURCHASE_FAST,
fatherCode: PmsMdlCode.PURCHASE,
isFather: false,
name: '井野',
remarks: '只要有树叶飞舞的地方，火就会燃烧。火的影子会照耀着村子，并且，让新的树叶发芽。',
operationList: [
{
code: PmsOperateCode.READ,
checked: false,
},
{
code: PmsOperateCode.WRITE,
checked: false,
},
{
code: PmsOperateCode.VERIFY,
checked: false,
},
],
},
{
code: PmsMdlCode.PURCHASE_TO_STOCK,
fatherCode: PmsMdlCode.PURCHASE,
isFather: false,
name: '犬夜叉',
remarks: '只要有树叶飞舞的地方，火就会燃烧。火的影子会照耀着村子，并且，让新的树叶发芽。',
operationList: [
{
code: PmsOperateCode.READ,
checked: false,
},
{
code: PmsOperateCode.WRITE,
checked: false,
},
{
code: PmsOperateCode.VERIFY,
checked: false,
},
],
},
{
code: PmsMdlCode.PURCHASE_OUT_STOCK,
fatherCode: PmsMdlCode.PURCHASE,
isFather: false,
name: '母夜叉',
remarks: '只要有树叶飞舞的地方，火就会燃烧。火的影子会照耀着村子，并且，让新的树叶发芽。',
operationList: [
{
code: PmsOperateCode.READ,
checked: false,
},
{
code: PmsOperateCode.WRITE,
checked: false,
},
{
code: PmsOperateCode.VERIFY,
checked: false,
},
],
},
],
},
{
code: PmsMdlCode.SHOP,
allChecked: false,
name: '牛叉',
remarks: '哈哈哈...',
isFather: true,
},
{
code: PmsMdlCode.ORDER,
allChecked: false,
name: '我擦',
remarks: '只要有树叶飞舞的地方，火就会燃烧。火的影子会照耀着村子，并且，让新的树叶发芽。',
isFather: true,
children: [
{
code: PmsMdlCode.ORDER_ONLINE,
fatherCode: PmsMdlCode.ORDER,
isFather: false,
name: '照美冥',
remarks: ' 只要有树叶飞舞的地方，火就会燃烧。火的影子会照耀着村子，并且，让新的树叶发芽。',
operationList: [
{
code: PmsOperateCode.READ,
checked: false,
},
{
code: PmsOperateCode.WRITE,
checked: false,
},
],
},
{
code: PmsMdlCode.ORDER_OFFLINE,
fatherCode: PmsMdlCode.ORDER,
isFather: false,
name: '照美冥',
remarks: '只要有树叶飞舞的地方，火就会燃烧。火的影子会照耀着村子，并且，让新的树叶发芽。',
operationList: [
{
code: PmsOperateCode.READ,
checked: false,
},
],
},
],
},
{
code: PmsMdlCode.MEMBER,
allChecked: false,
name: '照美冥',
remarks: '会员模块下所有页面的所有权限；',
isFather: true,
},
{
code: PmsMdlCode.DATA,
allChecked: false,
name: '数据',
remarks: '数据模块下所有页面的所有权限；',
isFather: true,
},
{
code: PmsMdlCode.MARKETING,
allChecked: false,
name: '照美冥',
remarks: '只要有树叶飞舞的地方，火就会燃烧。火的影子会照耀着村子，并且，让新的树叶发芽。',
isFather: true,
children: [
{
code: PmsMdlCode.MARKETING_MNG,
fatherCode: PmsMdlCode.MARKETING,
isFather: false,
name: ' 营销管理',
remarks: ' 只要有树叶飞舞的地方，火就会燃烧。火的影子会照耀着村子，并且，让新的树叶发芽。',
operationList: [
{
code: PmsOperateCode.READ,
checked: false,
},
{
code: PmsOperateCode.WRITE,
checked: false,
},
],
},
{
code: PmsMdlCode.MARKETING_PROMO_CODE,
fatherCode: PmsMdlCode.MARKETING,
isFather: false,
name: '照美冥',
remarks: '只要有树叶飞舞的地方，火就会燃烧。火的影子会照耀着村子，并且，让新的树叶发芽。',
operationList: [
{
code: PmsOperateCode.READ,
checked: false,
},
{
code: PmsOperateCode.WRITE,
checked: false,
},
],
},
],
},
{
code: PmsMdlCode.SYSTEM,
allChecked: false,
name: '照美冥',
remarks: '只要有树叶飞舞的地方，火就会燃烧。火的影子会照耀着村子，并且，让新的树叶发芽。',
isFather: true,
children: [
{
code: PmsMdlCode.SYSTEM_PERMISSION_MNG,
fatherCode: PmsMdlCode.SYSTEM,
isFather: false,
name: ' 权限管理',
remarks: ' 只要有树叶飞舞的地方，火就会燃烧。火的影子会照耀着村子，并且，让新的树叶发芽。',
operationList: [
{
code: PmsOperateCode.READ,
checked: false,
},
{
code: PmsOperateCode.WRITE,
checked: false,
},
],
},
{
code: PmsMdlCode.SYSTEM_OPERATE_LOG,
fatherCode: PmsMdlCode.SYSTEM,
isFather: false,
name: ' 照美冥',
remarks: ' 只要有树叶飞舞的地方，火就会燃烧。火的影子会照耀着村子，并且，让新的树叶发芽。',
operationList: [
{
code: PmsOperateCode.READ,
checked: false,
},
],
},
{
code: PmsMdlCode.SYSTEM_VERIFY_OPPOSITE,
fatherCode: PmsMdlCode.SYSTEM,
isFather: false,
name: ' 照美冥',
remarks: ' 只要有树叶飞舞的地方，火就会燃烧。火的影子会照耀着村子，并且，让新的树叶发芽。',
operationList: [
{
code: PmsOperateCode.READ,
checked: false,
},
{
code: PmsOperateCode.WRITE,
checked: false,
},
{
code: PmsOperateCode.VERIFY,
checked: false,
},
],
},
],
},
],
},
//测试数据
'GET /system/getPositionPermission': {
code: 0,
data: [
{ name: '漩涡鸣人', module: 10100, operation: [100, 101] },
{
name: '宇智波佐助',
module: 10101,
operation: [100, 101],
}
, { name: '波风水门', module: 1, operation: [100] }, {
name: '大蛇丸',
module: 10201,
operation: [101],
}, { name: '卡卡西', module: 10300, operation: [100, 101, 102] }, {
name: '照美冥',
module: 10301,
operation: [100, 101, 102],
}, { name: '雷影', module: 10302, operation: [100, 101, 102] }, {
name: '自来也',
module: 10400,
operation: [100],
}, { name: '小李', module: 10600, operation: [0] },
{ name: '宇智波斑', module: 10700, operation: [0] }],
},
};
3.权限操作码的枚举
/**
* PermissionOperateCode 权限操作码
*/
export default {
// 操作[100000 - 未知, 100100 - 读取, 100101 - 修改, 100102 - 审核, 100200 - 改价, 100201 - 退单]
UNKNOWN: 100000,
READ: 100100,
WRITE: 100101,
VERIFY: 100102,
REPRICE: 100200,
RETURN_ORDER: 100201,
properties: {
100000: {name: 'UNKNOWN', code: 100000, explain: '未知'},
100100: {name: 'READ', code: 100100, explain: '读取'},
100101: {name: 'WRITE', code: 100101, explain: '修改'},
100102: {name: 'VERIFY', code: 100102, explain: '审核'},
100200: {name: 'REPRICE', code: 100200, explain: '改价'},
100201: {name: 'RETURN_ORDER', code: 100201, explain: '退单'},
},
getStrFromCode(code){
return this.properties[code].explain;
},
};
网友评论