Oak-Team
/
oak-general-business
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 38 Wiki Activity

applicaionPassport样式调整

This commit is contained in:
lxy 2024-08-08 18:13:41 +08:00
parent c75be91c8f
commit cf3b2a9186
5 changed files with 139 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
es/components/applicationPassport/index.js
View File

@ -1,4 +1,4 @@
import { isEqual } from "oak-domain/lib/utils/lodash";
import { groupBy, isEqual } from "oak-domain/lib/utils/lodash";
import { generateNewIdAsync } from 'oak-domain/lib/utils/uuid';
export default OakComponent({
entity: 'applicationPassport',
@ -54,17 +54,18 @@ export default OakComponent({
let item = {
aId: a.id,
aName: a.name,
passports: []
passports: [],
defaultOptions: [],
defaultValue: '',
};
let pArray = [];
for (const p of next.passports) {
const { disabled, disabledTip } = this.checkDisabled(a, p);
pArray.push({
apId: await generateNewIdAsync(),
pId: p.id,
disabled,
apId: await generateNewIdAsync(),
checked: false,
isDefault: false,
disabled,
disabledTip,
});
}
@ -72,14 +73,22 @@ export default OakComponent({
apArray.push(item);
}
if (next.aps && next.aps.length > 0) {
const applicationPassports = groupBy(next.aps, 'applicationId');
const aIds = Object.keys(applicationPassports);
for (const ap of next.aps) {
const idx = apArray.findIndex((ele) => ele.aId === ap.applicationId);
if (idx !== -1) {
const pIdx = apArray[idx].passports.findIndex((ele) => ele.pId === ap.passportId);
const aIdx = apArray.findIndex((ele) => ele.aId === ap.applicationId);
if (aIdx !== -1) {
const pIdx = apArray[aIdx].passports.findIndex((ele) => ele.pId === ap.passportId);
if (pIdx !== -1) {
apArray[idx].passports[pIdx].apId = ap.id;
apArray[idx].passports[pIdx].checked = true;
apArray[idx].passports[pIdx].isDefault = ap.isDefault;
apArray[aIdx].passports[pIdx].apId = ap.id;
apArray[aIdx].passports[pIdx].checked = true;
apArray[aIdx].defaultOptions.push({
label: this.t(`passport:v.type.${ap.passport.type}`),
value: ap.id,
});
if (ap.isDefault) {
apArray[aIdx].defaultValue = ap.id;
}
}
}
}
@ -122,7 +131,13 @@ export default OakComponent({
filter: {
systemId,
enabled: true,
}
},
sorter: [{
$attr: {
$$updateAt$$: 1,
},
$direction: 'desc'
}]
});
const applications = applicationDatas;
const passports = passportDatas;
@ -156,6 +171,12 @@ export default OakComponent({
disabledTip: '短信登录未配置验证码模板名称',
};
}
if (!pConfig.defaultOrigin) {
return {
disabled: true,
disabledTip: '短信登录未配置默认渠道',
};
}
}
break;
case 'email':
@ -194,6 +215,8 @@ export default OakComponent({
};
}
break;
default:
break;
}
switch (aType) {
case 'web':
@ -238,6 +261,8 @@ export default OakComponent({
};
}
break;
default:
break;
}
return {
disabled: false,

16
es/components/applicationPassport/web.pc.d.ts vendored
View File

@ -1,24 +1,28 @@
import React from 'react';
import { WebComponentProps } from 'oak-frontend-base';
import { EntityDict } from '../../oak-app-domain';
type ShowItem = {
type RowItem = {
aId: string;
aName: string;
passports: {
apId: string;
pId: string;
disabled: boolean;
apId: string;
checked: boolean;
isDefault: boolean;
disabledTip?: string;
disabled: boolean;
disabledTip: string;
}[];
defaultOptions: {
label: string;
value: string;
}[];
defaultValue: string;
};
export default function render(props: WebComponentProps<EntityDict, 'applicationPassport', true, {
applicationPassports: EntityDict['applicationPassport']['OpSchema'][];
systemId: string;
applications: EntityDict['application']['Schema'][];
passports: EntityDict['passport']['Schema'][];
apArray: ShowItem[];
apArray: RowItem[];
}, {
onCheckedChange: (apId: string, pId: string, aId: string, checked: boolean) => void;
checkLastOne: (aId: string, apId: string) => boolean;

30
es/components/applicationPassport/web.pc.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import { Button, Space, Switch, Table, Tooltip, Modal } from 'antd';
import { Button, Space, Switch, Table, Tooltip, Modal, Select } from 'antd';
import Styles from './web.pc.module.less';
import { CheckOutlined, CloseOutlined, CheckCircleOutlined, CloseCircleOutlined, ExclamationCircleFilled } from '@ant-design/icons';
import { CheckOutlined, CloseOutlined, ExclamationCircleFilled } from '@ant-design/icons';
const { confirm } = Modal;
export default function render(props) {
const { data, methods } = props;
@ -18,6 +18,7 @@ export default function render(props) {
title: '',
key: 'applicationName',
dataIndex: 'aName',
fixed: 'left',
},
];
const showConfirm = (apId, pId, aId) => {
@ -37,7 +38,7 @@ export default function render(props) {
columns.push({
title: t(`passport:v.type.${passports[idx].type}`) + t('login'),
dataIndex: 'passports[' + idx + ']',
key: `${passports[idx].type} `,
key: `${passports[idx].id} `,
align: 'center',
render: (_, { passports, aId }) => <Space direction="vertical">
<Tooltip title={passports[idx].disabled ? passports[idx].disabledTip : ''}>
@ -50,20 +51,19 @@ export default function render(props) {
}
}}/>
</Tooltip>
{passports[idx].checked &&
<Space style={{ cursor: passports[idx].isDefault ? 'default' : 'pointer' }} onClick={() => {
if (!passports[idx].isDefault) {
updateItem({
isDefault: true,
}, passports[idx].apId);
}
}}>
<div style={{ color: passports[idx].isDefault ? 'var( --oak-color-success)' : 'var(--oak-text-color-placeholder)' }}>默认</div>
{passports[idx].isDefault ? (<CheckCircleOutlined style={{ color: 'var( --oak-color-success)' }}/>) : (<CloseCircleOutlined style={{ color: 'var(--oak-color-info)' }}/>)}
</Space>}
</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}>
@ -78,6 +78,6 @@ export default function render(props) {
确定
</Button>
</div>
<Table columns={columns} dataSource={apArray} pagination={false}/>
<Table columns={columns} dataSource={apArray} pagination={false} scroll={{ x: 1200 }}/>
</>);
}

67
src/components/applicationPassport/index.ts
View File

@ -1,21 +1,25 @@
import { cloneDeep, isEqual } from "oak-domain/lib/utils/lodash";
import { cloneDeep, groupBy, isEqual } from "oak-domain/lib/utils/lodash";
import { EntityDict } from "../../oak-app-domain";
import { generateNewIdAsync } from 'oak-domain/lib/utils/uuid';
import { EmailConfig, PfwConfig, SmsConfig, MfwConfig } from "../../entities/Passport";
import { WebConfig } from "../../entities/Application";
import { assert } from "oak-domain/lib/utils/assert";
type ShowItem = {
type RowItem = {
aId: string;
aName: string;
passports: {
apId: string;
pId: string;
disabled: boolean;
apId: string;
checked: boolean;
isDefault: boolean;
disabledTip?: string;
disabled: boolean;
disabledTip: string;
}[];
defaultOptions: {
label: string; //passport.type
value: string; //applicationPassport.id
}[];
defaultValue: string; //applicationPassport.id
}
export default OakComponent({
@ -66,23 +70,24 @@ export default OakComponent({
listeners: {
async 'aps,applications,passports'(prev, next) {
if (!this.arraysAreEqual(prev.aps, next.aps) || !this.arraysAreEqual(prev.applications, next.applications) || !this.arraysAreEqual(prev.passports, next.passports)) {
let apArray: ShowItem[] = [];
let apArray: RowItem[] = [];
if (next.applications && next.applications.length > 0 && next.passports && next.passports.length > 0) {
for (const a of next.applications) {
let item = {
aId: a.id,
aName: a.name,
passports: []
passports: [],
defaultOptions: [],
defaultValue: '',
};
let pArray = [];
for (const p of next.passports) {
const { disabled, disabledTip } = this.checkDisabled(a, p);
pArray.push({
apId: await generateNewIdAsync(),
pId: p.id,
disabled,
apId: await generateNewIdAsync(),
checked: false,
isDefault: false,
disabled,
disabledTip,
})
}
@ -90,14 +95,22 @@ export default OakComponent({
apArray.push(item);
}
if (next.aps && next.aps.length > 0) {
const applicationPassports = groupBy(next.aps, 'applicationId');
const aIds = Object.keys(applicationPassports);
for (const ap of next.aps) {
const idx = apArray.findIndex((ele) => ele.aId === ap.applicationId);
if (idx !== -1) {
const pIdx = apArray[idx].passports.findIndex((ele) => ele.pId === ap.passportId);
const aIdx = apArray.findIndex((ele) => ele.aId === ap.applicationId);
if (aIdx !== -1) {
const pIdx = apArray[aIdx].passports.findIndex((ele) => ele.pId === ap.passportId);
if (pIdx !== -1) {
apArray[idx].passports[pIdx].apId = ap.id;
apArray[idx].passports[pIdx].checked = true;
apArray[idx].passports[pIdx].isDefault = ap.isDefault;
apArray[aIdx].passports[pIdx].apId = ap.id;
apArray[aIdx].passports[pIdx].checked = true;
apArray[aIdx].defaultOptions.push({
label: this.t(`passport:v.type.${ap.passport.type}`),
value: ap.id,
});
if (ap.isDefault) {
apArray[aIdx].defaultValue = ap.id;
}
}
}
}
@ -112,7 +125,7 @@ export default OakComponent({
data: {
applications: [] as EntityDict['application']['Schema'][],
passports: [] as EntityDict['passport']['Schema'][],
apArray: [] as ShowItem[],
apArray: [] as RowItem[],
},
lifetimes: {
async ready() {
@ -143,7 +156,13 @@ export default OakComponent({
filter: {
systemId,
enabled: true,
}
},
sorter: [{
$attr: {
$$updateAt$$: 1,
},
$direction: 'desc'
}]
}
);
@ -180,6 +199,12 @@ export default OakComponent({
disabledTip: '短信登录未配置验证码模板名称',
}
}
if (!(pConfig as SmsConfig).defaultOrigin) {
return {
disabled: true,
disabledTip: '短信登录未配置默认渠道',
}
}
}
break;
case 'email':
@ -216,6 +241,8 @@ export default OakComponent({
}
}
break;
default:
break;
}
switch (aType) {
case 'web':
@ -259,6 +286,8 @@ export default OakComponent({
}
}
break;
default:
break;
}
return {
disabled: false,

58
src/components/applicationPassport/web.pc.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { Button, Space, Switch, Table, Tooltip, Modal } from 'antd';
import { Button, Space, Switch, Table, Tooltip, Modal, Select } from 'antd';
import { WebComponentProps } from 'oak-frontend-base';
import { EntityDict } from '../../oak-app-domain';
import Styles from './web.pc.module.less';
@ -9,17 +9,18 @@ import { CheckOutlined, CloseOutlined, CheckCircleOutlined, CloseCircleOutlined,
const { confirm } = Modal;
type ShowItem = {
type RowItem = {
aId: string;
aName: string;
passports: {
apId: string;
pId: string;
disabled: boolean;
apId: string;
checked: boolean;
isDefault: boolean;
disabledTip?: string;
disabled: boolean;
disabledTip: string;
}[];
defaultOptions: { label: string; value: string }[];
defaultValue: string;
}
export default function render(props: WebComponentProps<
@ -31,7 +32,7 @@ export default function render(props: WebComponentProps<
systemId: string;
applications: EntityDict['application']['Schema'][];
passports: EntityDict['passport']['Schema'][];
apArray: ShowItem[];
apArray: RowItem[];
},
{
onCheckedChange: (apId: string, pId: string, aId: string, checked: boolean) => void;
@ -53,15 +54,15 @@ export default function render(props: WebComponentProps<
)
}
let columns: ColumnsType<ShowItem> = [
let columns: ColumnsType<RowItem> = [
{
title: '',
key: 'applicationName',
dataIndex: 'aName',
fixed: 'left',
},
];
const showConfirm = (apId: string, pId: string, aId: string) => {
confirm({
title: '当前application将无登录方式',
@ -80,7 +81,7 @@ export default function render(props: WebComponentProps<
columns.push({
title: t(`passport:v.type.${passports[idx].type}`) + t('login'),
dataIndex: 'passports[' + idx + ']',
key: `${passports[idx].type} `,
key: `${passports[idx].id} `,
align: 'center',
render: (_, { passports, aId }) =>
<Space direction="vertical">
@ -99,29 +100,27 @@ export default function render(props: WebComponentProps<
}}
/>
</Tooltip>
{passports[idx].checked &&
<Space
style={{ cursor: passports[idx].isDefault ? 'default' : 'pointer' }}
onClick={() => {
if (!passports[idx].isDefault) {
updateItem({
isDefault: true,
}, passports[idx].apId)
}
}}
>
<div style={{ color: passports[idx].isDefault ? 'var( --oak-color-success)' : 'var(--oak-text-color-placeholder)' }}>默认</div>
{passports[idx].isDefault ? (
<CheckCircleOutlined style={{ color: 'var( --oak-color-success)' }} />
) : (
<CloseCircleOutlined style={{ color: 'var(--oak-color-info)' }} />
)}
</Space>
}
</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}>
@ -150,6 +149,7 @@ export default function render(props: WebComponentProps<
columns={columns}
dataSource={apArray}
pagination={false}
scroll={{ x: 1200 }}
/>
</>
);