100 lines
4.7 KiB
JavaScript
100 lines
4.7 KiB
JavaScript
import React from 'react';
|
||
import { Button, Space, Switch, Table, Tooltip, Modal, Select, } from 'antd';
|
||
import Styles from './web.pc.module.less';
|
||
import { CheckOutlined, CloseOutlined, ExclamationCircleFilled } from '@ant-design/icons';
|
||
const { confirm } = Modal;
|
||
export default function render(props) {
|
||
const { data, methods } = props;
|
||
const { oakFullpath, oakDirty, oakExecutable, oakExecuting, applicationPassports, systemId, applications, passports, types, apArray, } = data;
|
||
const { clean, execute, t, onCheckedChange, updateItem, checkLastOne, onSelectChange } = methods;
|
||
if (!(applications && applications.length > 0)) {
|
||
return (<div>请先前往应用管理创建application</div>);
|
||
}
|
||
if (!(passports && passports.length > 0)) {
|
||
return (<div>请先完成登录配置，启用登录方式</div>);
|
||
}
|
||
let columns = [
|
||
{
|
||
title: '',
|
||
key: 'applicationName',
|
||
dataIndex: 'aName',
|
||
fixed: 'left',
|
||
width: 100,
|
||
},
|
||
];
|
||
const showConfirm = (aId, pId, apId) => {
|
||
confirm({
|
||
title: '当前application将无登录方式',
|
||
icon: <ExclamationCircleFilled />,
|
||
content: '关闭后，当前applicaion将无登录方式，可能影响用户登录',
|
||
onOk() {
|
||
onCheckedChange(aId, pId, false, apId);
|
||
},
|
||
onCancel() {
|
||
},
|
||
});
|
||
};
|
||
if (types && types.length > 0) {
|
||
for (const type of types) {
|
||
columns.push({
|
||
title: t(`passport:v.type.${type}`),
|
||
dataIndex: 'typeRecords',
|
||
key: `${type} `,
|
||
align: 'center',
|
||
width: 120,
|
||
render: (_, { typeRecords, aId }) => <Space direction="vertical">
|
||
{typeRecords[type].render === 'select' ? (<Tooltip title={typeRecords[type].disabled ? typeRecords[type].disabledTip : ''}>
|
||
<Select allowClear value={typeRecords[type].checkedValue} onChange={(value, option) => {
|
||
onSelectChange(aId, value, typeRecords[type].apId);
|
||
}} onClear={() => {
|
||
if (checkLastOne(aId, typeRecords[type].pId)) {
|
||
showConfirm(aId, typeRecords[type].pId, typeRecords[type].apId);
|
||
}
|
||
else {
|
||
onSelectChange(aId, undefined, typeRecords[type].apId);
|
||
}
|
||
}} disabled={typeRecords[type].disabled} options={typeRecords[type].passportOptions} optionRender={(option) => (<Tooltip title={(option.data.disabled) ? option.data.disabledTip : ''}>
|
||
<div>{option.data.label}</div>
|
||
</Tooltip>)} style={{ width: 140 }}/>
|
||
</Tooltip>) : (<Tooltip title={typeRecords[type].disabled ? typeRecords[type].disabledTip : ''}>
|
||
<Switch disabled={typeRecords[type].disabled} checkedChildren={<CheckOutlined />} unCheckedChildren={<CloseOutlined />} checked={!!typeRecords[type].checked} onChange={(checked) => {
|
||
if (!checked && checkLastOne(aId, typeRecords[type].pId)) {
|
||
showConfirm(aId, typeRecords[type].pId, typeRecords[type].apId);
|
||
}
|
||
else {
|
||
onCheckedChange(aId, typeRecords[type].pId, checked, typeRecords[type].apId);
|
||
}
|
||
}}/>
|
||
</Tooltip>)}
|
||
|
||
</Space>
|
||
});
|
||
}
|
||
columns.push({
|
||
title: '默认登录方式',
|
||
key: 'default',
|
||
dataIndex: 'defaultValue',
|
||
fixed: 'right',
|
||
width: 140,
|
||
render: (_, { defaultOptions, defaultValue, aId }) => <>
|
||
<Select value={defaultValue} style={{ width: 120 }} onChange={(value) => { updateItem({ isDefault: true, }, value); }} options={defaultOptions}/>
|
||
</>
|
||
});
|
||
}
|
||
return (<>
|
||
<div className={Styles.btns}>
|
||
<Button disabled={!oakDirty} type="primary" danger onClick={() => clean()} style={{
|
||
marginRight: 10,
|
||
}}>
|
||
重置
|
||
</Button>
|
||
<Button disabled={!oakDirty} type="primary" onClick={async () => {
|
||
await execute();
|
||
}}>
|
||
确定
|
||
</Button>
|
||
</div>
|
||
<Table columns={columns} dataSource={apArray} pagination={false} scroll={{ x: 1200 }}/>
|
||
</>);
|
||
}
|