栏目权限页面的编写
This commit is contained in:
parent
bfc78bee60
commit
69441eca6c
|
|
@ -0,0 +1,8 @@
|
|||
import { WeaTools } from 'ecCom'
|
||||
|
||||
export const getTableEdit = (params) => {
|
||||
return WeaTools.callApi('/api/hrm/carddisplay/getCustomCardTable', 'GET', params);
|
||||
}
|
||||
export const userDefineCardItemSave = (params) => {
|
||||
return WeaTools.callApi('/api/hrm/carddisplay/saveCustomCard', 'POST', params);
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
import { inject, observer } from "mobx-react";
|
||||
import React, { Component } from "react";
|
||||
import { WeaTableEdit } from "ecCom";
|
||||
import * as mobx from "mobx";
|
||||
|
||||
const toJS = mobx.toJS;
|
||||
|
||||
@inject("columnPermission")
|
||||
@observer
|
||||
export default class DefineShowItems extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.init();
|
||||
}
|
||||
|
||||
init = () => {
|
||||
const { columnPermission } = this.props;
|
||||
columnPermission.loadTabTwoRelatedData();
|
||||
};
|
||||
|
||||
onRowSelect = (sRowKeys, rows, dataIndex, selectedDatas) => {
|
||||
const { columnPermission } = this.props;
|
||||
if (dataIndex === undefined || selectedDatas === undefined) {
|
||||
return;
|
||||
}
|
||||
columnPermission.setEnableRows(selectedDatas.isused);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { columnPermission } = this.props, { tabTwoRelatedData } = columnPermission;
|
||||
const { datas, columns, selectedData, loading } = tabTwoRelatedData;
|
||||
return (
|
||||
<WeaTableEdit
|
||||
ecId={`${this && this.props && this.props.ecId || ""}_WeaTableEdit@7rorir`}
|
||||
draggable
|
||||
deleteConfirm
|
||||
title=""
|
||||
columns={toJS(columns)}
|
||||
datas={toJS(datas)}
|
||||
copyFilterProps={["id"]}
|
||||
selectedData={!loading && toJS(selectedData)}
|
||||
onChange={e => columnPermission.setTableEditDatas(e)}
|
||||
onRowSelect={(sRowKeys, rows, dataIndex, selectedDatas) => this.onRowSelect(sRowKeys, rows, dataIndex, selectedDatas)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
import React, { Component } from "react";
|
||||
import { WeaTableEdit } from "ecCom";
|
||||
|
||||
class PermissionItem extends Component {
|
||||
render() {
|
||||
const columns = [
|
||||
{
|
||||
title: "栏目",
|
||||
dataIndex: "column",
|
||||
key: "column",
|
||||
com: [
|
||||
{ label: "", type: "TEXT", viewAttr: 1, key: "column" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "是否启用",
|
||||
dataIndex: "isused",
|
||||
key: "isused",
|
||||
com: [
|
||||
{
|
||||
type: "CHECKBOX",
|
||||
key: "isused",
|
||||
viewAttr: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "所有人可见",
|
||||
dataIndex: "all",
|
||||
key: "all",
|
||||
com: [
|
||||
{
|
||||
type: "CHECKBOX",
|
||||
key: "all"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "上级可见",
|
||||
dataIndex: "highVisible",
|
||||
key: "highVisible",
|
||||
com: [
|
||||
{
|
||||
type: "CHECKBOX",
|
||||
key: "highVisible"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "所有上级可见",
|
||||
dataIndex: "allVisible",
|
||||
key: "allVisible",
|
||||
com: [
|
||||
{
|
||||
type: "CHECKBOX",
|
||||
key: "allVisible"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "查看自定义",
|
||||
dataIndex: "customRole",
|
||||
key: "customRole",
|
||||
com: [
|
||||
{ label: "", type: "TEXT", viewAttr: 1, key: "customRole" }
|
||||
]
|
||||
}
|
||||
];
|
||||
const datas = [
|
||||
{
|
||||
id: "1",
|
||||
column: "基本信息",
|
||||
isused: false,
|
||||
all: false,
|
||||
highVisible: true,
|
||||
allVisible: false,
|
||||
customRole: "角色1"
|
||||
}
|
||||
];
|
||||
return (
|
||||
<div>
|
||||
<WeaTableEdit
|
||||
columns={columns}
|
||||
datas={datas}
|
||||
showAdd={false}
|
||||
showCopy={false}
|
||||
showDelete={false}
|
||||
showTitle={false}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PermissionItem;
|
||||
|
|
@ -1,99 +1,46 @@
|
|||
import React, { Component } from "react";
|
||||
import { WeaRightMenu, WeaTableEdit, WeaTop } from "ecCom";
|
||||
import { WeaRightMenu, WeaTab, WeaTop } from "ecCom";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { Button } from "antd";
|
||||
import PermissionItem from "./components/permissionItem";
|
||||
import DefineShowItems from "./components/defineShowItems";
|
||||
import { i18n } from "../../public/i18n";
|
||||
|
||||
@inject("columnPermission")
|
||||
@observer
|
||||
class ColumnPermission extends Component {
|
||||
getTopMenuBtns = () => {
|
||||
return [
|
||||
<Button type="primary">调整</Button>
|
||||
<Button type="primary" onClick={this.save}>保存</Button>
|
||||
];
|
||||
};
|
||||
getDropMenuDatas = () => {
|
||||
return [
|
||||
{
|
||||
key: "add",
|
||||
icon: <i className="icon-search"/>,
|
||||
content: "调整"
|
||||
key: "save",
|
||||
icon: <i className="icon-coms-Preservation"/>,
|
||||
content: "保存"
|
||||
}
|
||||
];
|
||||
};
|
||||
getTabName = () => {
|
||||
return [{
|
||||
key: "0",
|
||||
title: i18n.label.permissionManagement()
|
||||
}, {
|
||||
key: "1",
|
||||
title: i18n.label.defineShowItems()
|
||||
}];
|
||||
};
|
||||
save = () => {
|
||||
const { columnPermission } = this.props;
|
||||
const { selectedKey } = columnPermission;
|
||||
selectedKey === "0" ? columnPermission.columnPermissionSave() : columnPermission.userDefineCardItemSave();
|
||||
};
|
||||
|
||||
render() {
|
||||
const columns = [
|
||||
{
|
||||
title: "栏目",
|
||||
dataIndex: "column",
|
||||
key: "column",
|
||||
com: [
|
||||
{ label: "", type: "TEXT", viewAttr: 1, key: "column" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "是否启用",
|
||||
dataIndex: "isused",
|
||||
key: "isused",
|
||||
com: [
|
||||
{
|
||||
type: "CHECKBOX",
|
||||
key: "isused",
|
||||
viewAttr: 1,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "所有人可见",
|
||||
dataIndex: "all",
|
||||
key: "all",
|
||||
com: [
|
||||
{
|
||||
type: "CHECKBOX",
|
||||
key: "all"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "上级可见",
|
||||
dataIndex: "highVisible",
|
||||
key: "highVisible",
|
||||
com: [
|
||||
{
|
||||
type: "CHECKBOX",
|
||||
key: "highVisible"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "所有上级可见",
|
||||
dataIndex: "allVisible",
|
||||
key: "allVisible",
|
||||
com: [
|
||||
{
|
||||
type: "CHECKBOX",
|
||||
key: "allVisible"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "查看自定义",
|
||||
dataIndex: "customRole",
|
||||
key: "customRole",
|
||||
com: [
|
||||
{ label: "", type: "TEXT", viewAttr: 1, key: "customRole" }
|
||||
]
|
||||
}
|
||||
];
|
||||
const datas = [
|
||||
{
|
||||
id: "1",
|
||||
column: "基本信息",
|
||||
isused: false,
|
||||
all: false,
|
||||
highVisible: true,
|
||||
allVisible: false,
|
||||
customRole: "角色1",
|
||||
}
|
||||
];
|
||||
const { columnPermission } = this.props;
|
||||
const { selectedKey } = columnPermission;
|
||||
return (
|
||||
<div style={{ height: "100%" }}>
|
||||
<WeaRightMenu
|
||||
|
|
@ -110,16 +57,21 @@ class ColumnPermission extends Component {
|
|||
buttons={this.getTopMenuBtns()}
|
||||
showDropIcon={true}
|
||||
dropMenuDatas={this.getDropMenuDatas()}
|
||||
onDropMenuClick={(e) => console.log(e)}
|
||||
onDropMenuClick={(e) => (e && this[e]())}
|
||||
/>
|
||||
<WeaTableEdit
|
||||
columns={columns}
|
||||
datas={datas}
|
||||
showAdd={false}
|
||||
showCopy={false}
|
||||
showDelete={false}
|
||||
showTitle={false}
|
||||
<WeaTab
|
||||
ecId={`${this && this.props && this.props.ecId || ""}_WeaTab@8mmoen`}
|
||||
selectedKey={selectedKey}
|
||||
datas={this.getTabName()}
|
||||
keyParam="key"
|
||||
onChange={(key) => columnPermission.setSelectedKey(key)}
|
||||
/>
|
||||
{
|
||||
selectedKey === "0" ?
|
||||
<PermissionItem
|
||||
ecId={`${this && this.props && this.props.ecId || ""}_SysShowItems@0wqtjk`}/> :
|
||||
<DefineShowItems ecId={`${this && this.props && this.props.ecId || ""}_DefineShowItems@q1hmoj`}/>
|
||||
}
|
||||
</WeaRightMenu>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -564,6 +564,7 @@ export const i18n = {
|
|||
newEducation: () => getLabel(386229, '新建学历'),
|
||||
editEducation: () => getLabel(386230, '编辑学历'),
|
||||
sysShowItems: () => getLabel(32980, '系统显示栏目'),
|
||||
permissionManagement: () => getLabel(32980, '权限管理'),
|
||||
defineShowItems: () => getLabel(32744, '自定义显示栏目'),
|
||||
childItems: () => getLabel(32749, '子栏目'),
|
||||
sysadminRemind: () => getLabel(386231, '管理员提醒'),
|
||||
|
|
|
|||
|
|
@ -0,0 +1,333 @@
|
|||
import { observable, action, computed, extendObservable } from 'mobx';
|
||||
import { message } from 'antd'
|
||||
import { WeaHelpfulTip } from 'ecCom';
|
||||
import {isEmpty} from "lodash";
|
||||
import { i18n } from '../public/i18n';
|
||||
import * as mobx from 'mobx';
|
||||
import * as Api from '../apis/columnPermission';
|
||||
const toJS = mobx.toJS;
|
||||
|
||||
export class ColumnPermission {
|
||||
@observable weaTopTitle = i18n.module.staffCardDisplay();
|
||||
@observable btnMenu = [];
|
||||
@observable selectedKey = '0';
|
||||
@observable authorized = false;
|
||||
@observable loading = true;
|
||||
@observable tabOneRelatedData = {
|
||||
data: [],
|
||||
loading: true
|
||||
};
|
||||
@observable tabTwoRelatedData = {
|
||||
datas: [], //datas受控
|
||||
columns: [],
|
||||
loading: true,
|
||||
selectedData: {}, //selectedData受控
|
||||
authorized: false,
|
||||
};
|
||||
|
||||
@computed get cardItemsLength() {
|
||||
let arr = [];
|
||||
for (let i = 0; i < this.tabOneRelatedData.data.length; i++) {
|
||||
let cardItemsLength = 0;
|
||||
this.tabOneRelatedData.data[i].children.map(s => {
|
||||
if (s.children.length > 0) {
|
||||
cardItemsLength += s.children.length;
|
||||
} else {
|
||||
cardItemsLength += 1;
|
||||
}
|
||||
});
|
||||
arr.push(cardItemsLength);
|
||||
}
|
||||
return arr;
|
||||
}
|
||||
|
||||
@computed get menu() {
|
||||
let topMenu = [];
|
||||
let rightMenu = [];
|
||||
this.btnMenu.map(item => {
|
||||
(item.isTop == '1' || item.isBatch == '1') && topMenu.push(item);
|
||||
!item.isBatch && rightMenu.push(item);
|
||||
});
|
||||
return {
|
||||
topMenu,
|
||||
rightMenu
|
||||
}
|
||||
}
|
||||
|
||||
@computed get checkedItems() {
|
||||
let arr = [];
|
||||
toJS(this.tabOneRelatedData.data).map(f => {
|
||||
let fArr = [];
|
||||
if (f.value) {
|
||||
fArr.push(f.id);
|
||||
f.children.map(s => {
|
||||
if (s.value) {
|
||||
fArr.push(
|
||||
s.id,
|
||||
)
|
||||
s.children.map(t => {
|
||||
t.value && fArr.push(
|
||||
t.id
|
||||
)
|
||||
})
|
||||
}
|
||||
});
|
||||
arr.push(fArr.toString());
|
||||
}
|
||||
});
|
||||
return arr.toString();
|
||||
}
|
||||
|
||||
@computed get tabTwoSaveParams() {
|
||||
let datas = this.tabTwoRelatedData.datas;
|
||||
let selectedData = this.tabTwoRelatedData.selectedData.isused;
|
||||
|
||||
let params = this.arrToJson(toJS(datas), toJS(selectedData));
|
||||
params.rownum = datas.length;
|
||||
|
||||
return params;
|
||||
}
|
||||
|
||||
@action
|
||||
getRight() {
|
||||
this.loading = true;
|
||||
Api.getRight().then(res => {
|
||||
let {
|
||||
api_status,
|
||||
btnMenu,
|
||||
hasRight
|
||||
} = res;
|
||||
if (api_status) {
|
||||
if (hasRight) {
|
||||
this.setRight(true);
|
||||
btnMenu !== undefined && this.setBtnMenu(btnMenu);
|
||||
}
|
||||
this.loading = false;
|
||||
} else {
|
||||
message.error(res.message);
|
||||
}
|
||||
}).catch(error => {
|
||||
message.error(error);
|
||||
});
|
||||
}
|
||||
|
||||
loadTabOneRelatedData() {
|
||||
this.tabOneRelatedData.loading = true;
|
||||
Promise.all(
|
||||
[
|
||||
Api.getCardItemsData(),
|
||||
]
|
||||
).then(res => {
|
||||
res.map((rs, index) => {
|
||||
if (index == 0) {
|
||||
let {
|
||||
api_status,
|
||||
data
|
||||
} = rs;
|
||||
|
||||
if (api_status) {
|
||||
data !== undefined && extendObservable(this.tabOneRelatedData, {
|
||||
data: data
|
||||
});
|
||||
extendObservable(this.tabOneRelatedData, {
|
||||
loading: false
|
||||
});
|
||||
} else {
|
||||
message.error(rs.message);
|
||||
}
|
||||
}
|
||||
});
|
||||
}).catch(error => {
|
||||
message.error(error);
|
||||
});
|
||||
}
|
||||
|
||||
loadTabTwoRelatedData() {
|
||||
this.tabTwoRelatedData.loading = true;
|
||||
Promise.all(
|
||||
[
|
||||
Api.getTableEdit(),
|
||||
]
|
||||
).then(res => {
|
||||
res.map((rs, index) => {
|
||||
if (index == 0) {
|
||||
let {
|
||||
api_status,
|
||||
datas,
|
||||
columns,
|
||||
selectedData
|
||||
} = rs;
|
||||
|
||||
if (api_status) {
|
||||
if (!columns || !datas) {
|
||||
this.tabTwoRelatedData.authorized = false;
|
||||
return;
|
||||
}
|
||||
this.tabTwoRelatedData.authorized = true;
|
||||
columns.map((c, index) => {
|
||||
if (c.key === 'itemurl') {
|
||||
c.title = <span>
|
||||
<span>{c.title}</span>
|
||||
<span style={{marginLeft: 10}}>
|
||||
<WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@4vdvfp@${index}`} title='自定义页面链接地址可以为外网地址，如：http://www.baidu.com
|
||||
也可以是内部地址，如：/test.jsp，可以带上参数传参，像这样：/test.jsp?a=1&b=2
|
||||
也可以写占位符{#id}传人员id，像这样：/test.jsp?a=1&b={#id}&mypara2={#id}
|
||||
即使不写占位符，默认也会收到1个固定的参数：hrmResourceID=人员id'/>
|
||||
</span>
|
||||
</span>
|
||||
} else if (c.key === 'itemnum') {
|
||||
c.title = <span>
|
||||
<span>{c.title}</span>
|
||||
<span style={{marginLeft: 10}}>
|
||||
<WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@wotuuk@${index}`} title='填写类的全路径例如：com.engine.hrm.cmd.hrmcarditem.GetTabNumDemoCmd,类中包含execute方法返回int型数据。
|
||||
填写不正确的路径并启用，对应tab页title将会出现（error）字样。'/>
|
||||
</span>
|
||||
</span>
|
||||
}
|
||||
});
|
||||
|
||||
extendObservable(this.tabTwoRelatedData, {
|
||||
datas: datas,
|
||||
columns: columns
|
||||
});
|
||||
|
||||
selectedData && extendObservable(this.tabTwoRelatedData, {
|
||||
selectedData: selectedData
|
||||
});
|
||||
extendObservable(this.tabTwoRelatedData, {
|
||||
loading: false
|
||||
});
|
||||
} else {
|
||||
message.error(rs.message);
|
||||
}
|
||||
}
|
||||
});
|
||||
}).catch(error => {
|
||||
message.error(error);
|
||||
});
|
||||
}
|
||||
|
||||
columnPermissionSave() {
|
||||
let params = {
|
||||
data: toJS(this.checkedItems)
|
||||
}
|
||||
Api.cardItemsSettingSave(params).then(res => {
|
||||
let {
|
||||
api_status,
|
||||
sign,
|
||||
} = res;
|
||||
|
||||
if (api_status) {
|
||||
if (sign == '1') {
|
||||
res.message && message.success(res.message);
|
||||
} else {
|
||||
res.message && message.warning(res.message);
|
||||
}
|
||||
} else {
|
||||
message.error(res.message);
|
||||
}
|
||||
}).catch(error => {
|
||||
message.error(error);
|
||||
});
|
||||
}
|
||||
|
||||
userDefineCardItemSave() {
|
||||
if (!this.verify(toJS(this.tabTwoRelatedData.datas))) return;
|
||||
let params = this.tabTwoSaveParams;
|
||||
|
||||
Api.userDefineCardItemSave(params).then(res => {
|
||||
let {
|
||||
api_status,
|
||||
sign,
|
||||
} = res;
|
||||
|
||||
if (api_status) {
|
||||
if (sign == '1') {
|
||||
res.message && message.success(res.message);
|
||||
} else {
|
||||
res.message && message.warning(res.message);
|
||||
}
|
||||
} else {
|
||||
message.error(res.message);
|
||||
}
|
||||
}).catch(error => {
|
||||
message.error(error);
|
||||
});
|
||||
}
|
||||
|
||||
arrToJson(arr, rows) {
|
||||
let json = {};
|
||||
|
||||
const _rows = isEmpty(arr) ? [] : rows;
|
||||
|
||||
_rows && _rows.map(index => {
|
||||
arr[index].isused = '1';
|
||||
});
|
||||
arr.map((item, index) => {
|
||||
if (!item.isused) item.isused = '0';
|
||||
for (let key in item) {
|
||||
json[key + '_' + index] = item[key];
|
||||
}
|
||||
})
|
||||
|
||||
return json;
|
||||
}
|
||||
|
||||
verify(arr) {
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
if (!arr[i].itemname || !arr[i].itemurl) {
|
||||
const temp = i18n.message.requiredInfoIsNotFull().replace('{param}', i + 1);
|
||||
message.warning(temp);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
setRight(right) {
|
||||
this.authorized = right;
|
||||
}
|
||||
|
||||
setBtnMenu(btnMenu) {
|
||||
this.btnMenu = btnMenu;
|
||||
}
|
||||
|
||||
setSelectedKey(key) {
|
||||
this.selectedKey = key;
|
||||
}
|
||||
|
||||
setCardItemsData(data) {
|
||||
this.data = data;
|
||||
}
|
||||
|
||||
setEnableRows(e) {
|
||||
extendObservable(this.tabTwoRelatedData, {
|
||||
selectedData: {
|
||||
isused: e
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setTableEditDatas(e) {
|
||||
e.map(item => {
|
||||
for (let key in item) {
|
||||
if (key == 'undefined') {
|
||||
delete item[key];
|
||||
}
|
||||
if (!item['isused']) {
|
||||
item['isused'] = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
extendObservable(this.tabTwoRelatedData, {
|
||||
datas: e
|
||||
});
|
||||
}
|
||||
|
||||
mobxDataReset() {
|
||||
this.selectedKey = '0';
|
||||
extendObservable(this.tabOneRelatedData, {
|
||||
loading: true
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -27,6 +27,7 @@ import {ResourceBasicInfoStore} from "./reserouseBasicInfo";
|
|||
import {ImportDialogStore} from "./importDialog";
|
||||
import {ResourceCardStore} from "./resourceCard";
|
||||
import {ManagerDetachStore} from "./managerDetach";
|
||||
import {ColumnPermission} from './columnPermission';
|
||||
|
||||
|
||||
module.exports = {
|
||||
|
|
@ -58,5 +59,6 @@ module.exports = {
|
|||
resourceBasicInfo: new ResourceBasicInfoStore(),
|
||||
importDialog: new ImportDialogStore(),
|
||||
resourceCard:new ResourceCardStore(),
|
||||
managerDetach: new ManagerDetachStore()
|
||||
managerDetach: new ManagerDetachStore(),
|
||||
columnPermission: new ColumnPermission(),
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue