Merge branch 'dev' of codeup.aliyun.com:61c14a7efa282c88e103c23f/oak-general-business into dev

es/components/message/detail/web.module.less

@@ -1,5 +1,20 @@
 /**  index.wxss  **/
 
+.warp {
+    word-break: break-all;
+    min-width: 320px;
+    max-width: 600px;
+    border: 1px solid rgb(246, 246, 246);
+    background-color: rgb(247, 248, 250);
+    margin: auto;
+    padding: 30px;
+}
+
+.inner {
+    background-color: rgb(255, 255, 255);
+    padding: 30px;
+    box-shadow: rgb(122 55 55 / 20%) 0px 1px 1px 0px;
+}
 
 .title {
     // font-family: "helvetica neue", PingFangSC-Light, arial, "hiragino sans gb", "microsoft yahei ui", "microsoft yahei", simsun, sans-serif;

es/components/userEntityGrant/claim/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { EntityDict } from '../../../oak-app-domain';
 declare const _default: (props: import("oak-frontend-base").ReactComponentProps<EntityDict, "userEntityGrant", false, {
-    picker: (props: {
+    picker: ((props: {
         disabled?: boolean | undefined;
         entity: keyof EntityDict;
         entityFilter: object;
@@ -13,9 +13,9 @@ declare const _default: (props: import("oak-frontend-base").ReactComponentProps<
         pickedRowIds?: string[] | undefined;
         pickedRelationIds?: string[] | undefined;
         oakPath: string;
-    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    }) => React.ReactElement) | undefined;
     hideInfo: boolean;
     hideTip: boolean;
-    afterClaim: (ueg: EntityDict['userEntityGrant']['OpSchema']) => void;
+    afterClaim: ((ueg: EntityDict['userEntityGrant']['OpSchema']) => void) | undefined;
 }>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export default _default;

es/components/userEntityGrant/claim/index.js

@@ -3,12 +3,10 @@ export default OakComponent({
     entity: 'userEntityGrant',
     isList: false,
     properties: {
-        picker: (props) => {
+        picker: undefined,
-            return {};
-        },
         hideInfo: false,
         hideTip: false,
-        afterClaim: (ueg) => undefined,
+        afterClaim: undefined,
     },
     projection() {
         const userId = this.features.token.getUserId();

es/components/userEntityGrant/claim/index.json

@@ -3,8 +3,7 @@
     "usingComponents": {
         "l-notice-bar": "@oak-frontend-base/miniprogram_npm/lin-ui/notice-bar/index",
         "l-button": "@oak-frontend-base/miniprogram_npm/lin-ui/button/index",
-        "l-list": "@oak-frontend-base/miniprogram_npm/lin-ui/list/index",
+        "l-list": "@oak-frontend-base/miniprogram_npm/lin-ui/list/index"
-        "xxx": "./ubPicker/index"
     },
     "componentGenerics": {
         "ueg-picker": {

es/components/userEntityGrant/claim/ubPicker/index.js

@@ -117,7 +117,7 @@ export default OakComponent({
             else if (rule === 'single') {
                 if (next.relationIds?.length === 1 && (!pickedRelationIds || next.relationIds[0] !== pickedRelationIds[0])) {
                     // 只有一行relation，直接选中
-                    onPickRelations(next.relationIds[0]);
+                    onPickRelations(next.relationIds);
                 }
                 else if (pickedRelationIds && pickedRelationIds[0] && (!next.relationIds || !next.relationIds.includes(pickedRelationIds[0]))) {
                     // 新的relationIds中不包括已经pick的relationId，清空

es/components/userEntityGrant/claim/ubPicker/web.pc.d.ts

@@ -1,5 +1,19 @@
 import { WebComponentProps } from 'oak-frontend-base';
 import { EntityDict } from '../../../../oak-app-domain';
 export default function Render(props: WebComponentProps<EntityDict, 'userEntityGrant', false, {
-    userEntityGrant: EntityDict['userEntityGrant']['Schema'];
+    relations: EntityDict['relation']['OpSchema'][];
-}>): import("react/jsx-runtime").JSX.Element;
+    rows: Array<{
+        id: string;
+        value: string;
+    }>;
+    rule: EntityDict['userEntityGrant']['OpSchema']['rule'];
+    onPickRelations: (ids: string[]) => void;
+    onPickRows: (ids: string[]) => void;
+    pickedRowIds?: string[];
+    pickedRelationIds?: string[];
+    entity: string;
+    disabled?: boolean;
+    disablePickRow?: boolean;
+    disablePickRelation?: boolean;
+    pickRelationRule: string;
+}>): import("react/jsx-runtime").JSX.Element | null;

es/components/userEntityGrant/claim/ubPicker/web.pc.js

@@ -1,5 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography, Radio, Checkbox, List, Divider, Flex, Space } from 'antd';
+import Styles from './web.pc.module.less';
 export default function Render(props) {
-    const { userEntityGrant } = props.data;
+    const { relations, rows, rule, onPickRelations, onPickRows, pickedRowIds, pickedRelationIds, entity, disablePickRow, disablePickRelation, pickRelationRule, disabled, } = props.data;
-    return _jsx("div", { children: "\u5BBD\u5C4F\u672A\u5B9E\u73B0" });
+    const { t } = props.methods;
+    if (rows?.length > 0 && relations?.length > 0) {
+        const Row = rows.length === 1 ? (rows[0].value ? (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: "left", children: t(`${entity}:name`) }), _jsx(Space, { children: _jsx(Typography.Title, { children: rows[0].value }) })] })) : null) : (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: "left", children: t('pickRow', { entity: t(`${entity}:name`) }) }), _jsx(Checkbox.Group, { value: pickedRowIds || [], disabled: disablePickRow || disabled, onChange: (val) => onPickRows(val), children: rows.map((row) => (_jsx(Checkbox, { value: row.id, children: row.value }))) })] }));
+        const Relation = (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: "left", children: t(`pickRelation.${pickRelationRule}`) }), _jsx(List, { children: rule !== 'single' ? (_jsx(Checkbox.Group, { value: pickedRelationIds || [], disabled: disablePickRelation || disabled, onChange: (val) => onPickRelations(val), children: relations.map((relation) => (_jsx(Checkbox, { value: relation.id, children: t(`${entity}:r.${relation.name}`) }))) })) : (_jsx(Radio.Group, { onChange: (e) => {
+                            const val = e.target.value;
+                            onPickRelations([val]);
+                        }, value: pickedRelationIds?.[0] || undefined, children: relations.map((relation) => (_jsx(Radio, { value: relation.id, children: t(`${entity}:r.${relation.name}`) }))) })) })] }));
+        return (_jsxs(Flex, { vertical: true, className: Styles.container, children: [Row, Relation] }));
+    }
+    return null;
 }

es/components/userEntityGrant/claim/ubPicker/web.pc.module.less

@@ -0,0 +1,3 @@
+.container {
+    margin-bottom: 16px;
+}

es/components/userEntityGrant/claim/web.pc.d.ts

@@ -1,7 +1,30 @@
+/// <reference types="react" />
 import { WebComponentProps } from 'oak-frontend-base';
 import { EntityDict } from '../../../oak-app-domain';
 export default function Render(props: WebComponentProps<EntityDict, 'userEntityGrant', false, {
     userEntityGrant: EntityDict['userEntityGrant']['Schema'];
-    isGrantee: boolean;
+    isGranter: boolean;
     hasClaimed: boolean;
-}>): import("react/jsx-runtime").JSX.Element;
+    counterStr: string;
+    hideInfo: boolean;
+    hideTip: boolean;
+    pickedRowIds?: string[];
+    pickedRelationIds?: string[];
+    picker?: (props: {
+        disabled?: boolean;
+        entity: keyof EntityDict;
+        entityFilter: object;
+        relationIds: string[];
+        rule: EntityDict['userEntityGrant']['OpSchema']['rule'];
+        ruleOnRow: EntityDict['userEntityGrant']['OpSchema']['ruleOnRow'];
+        onPickRelations: (ids: string[]) => void;
+        onPickRows: (id: string[]) => void;
+        oakPath: string;
+        pickedRowIds?: string[];
+        pickedRelationIds?: string[];
+    }) => React.ReactElement;
+}, {
+    onPickRelations: (ids: string[]) => void;
+    onPickRows: (ids: string[]) => void;
+    claim: () => void;
+}>): import("react/jsx-runtime").JSX.Element | null;

es/components/userEntityGrant/claim/web.pc.js

@@ -1,5 +1,30 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Space, List, Button, Row, Col, Divider, Flex } from 'antd';
+import UbPicker from './ubPicker';
+import Styles from './web.pc.module.less';
 export default function Render(props) {
-    const { userEntityGrant } = props.data;
+    const { userEntityGrant, picker: Picker, isGranter, hasClaimed, counterStr, hideInfo, pickedRowIds, pickedRelationIds, oakExecutable, hideTip, } = props.data;
-    return _jsx("div", { children: "\u5C1A\u672A\u5B9E\u73B0" });
+    const { t, onPickRelations, onPickRows, claim } = props.methods;
+    if (userEntityGrant) {
+        const { relationEntity, relationEntityFilter, rule, ruleOnRow, relationIds, expired, } = userEntityGrant;
+        const Picker2 = Picker || UbPicker;
+        return (_jsxs(Row, { children: [_jsx(Col, { span: 2 }), _jsx(Col, { span: 20, children: _jsxs(Flex, { vertical: true, className: Styles.container, children: [!hideTip && !isGranter && !hasClaimed && (_jsx(Alert, { message: t('tip'), type: "info", showIcon: true })), isGranter && (_jsx(Alert, { message: t('isGranter'), type: "error", showIcon: true })), hasClaimed && (_jsx(Alert, { message: t('hasClaimed'), type: "error", showIcon: true })), !hideInfo && (_jsxs("div", { className: Styles.info, children: [_jsx(Divider, { orientation: "left", children: t('source') }), _jsxs(List, { itemLayout: "horizontal", children: [_jsxs(List.Item, { children: [_jsx(List.Item.Meta, { title: t('granterName') }), userEntityGrant.granter.name ||
+                                                        userEntityGrant.granter.nickname] }), _jsxs(List.Item, { children: [_jsx(List.Item.Meta, { title: expired
+                                                            ? t('isExpired')
+                                                            : t('counter') }), expired ? t('expired') : counterStr] })] })] })), _jsx(Picker2, { disabled: !!expired || hasClaimed || isGranter, entity: relationEntity, entityFilter: relationEntityFilter, rule: rule, ruleOnRow: ruleOnRow, relationIds: relationIds, onPickRows: onPickRows, onPickRelations: onPickRelations, pickedRelationIds: pickedRelationIds, pickedRowIds: pickedRowIds, oakPath: "$uegClaim-content" }), _jsx(Space, { style: { justifyContent: 'center' }, children: _jsx(Button, { color: isGranter || hasClaimed
+                                        ? 'danger'
+                                        : !expired
+                                            ? 'primary'
+                                            : 'warning', disabled: oakExecutable !== true ||
+                                        !!expired ||
+                                        isGranter ||
+                                        hasClaimed, onClick: () => claim(), children: isGranter
+                                        ? t('isGranter')
+                                        : hasClaimed
+                                            ? t('hasClaimed')
+                                            : !expired
+                                                ? t('userEntityGrant:action.claim')
+                                                : t('expired') }) })] }) }), _jsx(Col, { span: 2 })] }));
+    }
+    return null;
 }

es/components/userEntityGrant/claim/web.pc.module.less

@@ -1,3 +1,3 @@
 .container {
-    background: var(--oak-bg-color-container);
+    margin: 16px 0;
 }

src/components/message/detail/web.module.less

@@ -1,5 +1,20 @@
 /**  index.wxss  **/
 
+.warp {
+    word-break: break-all;
+    min-width: 320px;
+    max-width: 600px;
+    border: 1px solid rgb(246, 246, 246);
+    background-color: rgb(247, 248, 250);
+    margin: auto;
+    padding: 30px;
+}
+
+.inner {
+    background-color: rgb(255, 255, 255);
+    padding: 30px;
+    box-shadow: rgb(122 55 55 / 20%) 0px 1px 1px 0px;
+}
 
 .title {
     // font-family: "helvetica neue", PingFangSC-Light, arial, "hiragino sans gb", "microsoft yahei ui", "microsoft yahei", simsun, sans-serif;

src/components/userEntityGrant/claim/index.json

@@ -3,8 +3,7 @@
     "usingComponents": {
       "l-notice-bar": "@oak-frontend-base/miniprogram_npm/lin-ui/notice-bar/index",
       "l-button": "@oak-frontend-base/miniprogram_npm/lin-ui/button/index",
-      "l-list": "@oak-frontend-base/miniprogram_npm/lin-ui/list/index",
+      "l-list": "@oak-frontend-base/miniprogram_npm/lin-ui/list/index"
-      "xxx": "./ubPicker/index"
     },
     "componentGenerics": {
       "ueg-picker": {

src/components/userEntityGrant/claim/index.ts

@@ -1,4 +1,3 @@
-import dayjs from 'dayjs';
 import { generateNewId } from 'oak-domain';
 import { EntityDict } from '../../../oak-app-domain';
 
@@ -6,7 +5,7 @@ export default OakComponent({
     entity: 'userEntityGrant',
     isList: false,
     properties: {
-        picker: (props: {
+        picker: undefined as ((props: {
             disabled?: boolean,
             entity: keyof EntityDict,
             entityFilter: object,
@@ -18,12 +17,10 @@ export default OakComponent({
             pickedRowIds?: string[],
             pickedRelationIds?: string[],
             oakPath: string,
-        }) => {
+        }) => React.ReactElement) | undefined,
-            return {} as React.ReactElement;
-        },
         hideInfo: false,
         hideTip: false,
-        afterClaim: (ueg: EntityDict['userEntityGrant']['OpSchema']) => undefined as void,
+        afterClaim: undefined as ((ueg: EntityDict['userEntityGrant']['OpSchema']) => void) | undefined,
     },
     projection() {
         const userId = this.features.token.getUserId();

src/components/userEntityGrant/claim/ubPicker/index.ts

@@ -129,7 +129,7 @@ export default OakComponent({
             else if (rule === 'single') {
                 if (next.relationIds?.length === 1 && (!pickedRelationIds || next.relationIds[0] !== pickedRelationIds[0])) {
                     // 只有一行relation，直接选中
-                    onPickRelations!(next.relationIds[0]);
+                    onPickRelations!(next.relationIds);
                 }
                 else if (pickedRelationIds && pickedRelationIds[0] && (!next.relationIds || !next.relationIds.includes(pickedRelationIds[0]))) {
                     // 新的relationIds中不包括已经pick的relationId，清空

src/components/userEntityGrant/claim/ubPicker/web.pc.module.less

@@ -0,0 +1,3 @@
+.container {
+    margin-bottom: 16px;
+}

src/components/userEntityGrant/claim/ubPicker/web.pc.tsx

@@ -1,5 +1,7 @@
 import { WebComponentProps } from 'oak-frontend-base';
+import { Typography, Radio, Checkbox, List, Divider, Flex, Space } from 'antd';
 import { EntityDict } from '../../../../oak-app-domain';
+import Styles from './web.pc.module.less';
 
 export default function Render(
     props: WebComponentProps<
@@ -7,11 +9,111 @@ export default function Render(
         'userEntityGrant',
         false,
         {
-            userEntityGrant: EntityDict['userEntityGrant']['Schema'];
+            relations: EntityDict['relation']['OpSchema'][];
+            rows: Array<{
+                id: string;
+                value: string;
+            }>;
+            rule: EntityDict['userEntityGrant']['OpSchema']['rule'];
+            onPickRelations: (ids: string[]) => void;
+            onPickRows: (ids: string[]) => void;
+            pickedRowIds?: string[];
+            pickedRelationIds?: string[];
+            entity: string;
+            disabled?: boolean;
+            disablePickRow?: boolean;
+            disablePickRelation?: boolean;
+            pickRelationRule: string;
         }
     >
 ) {
-    const { userEntityGrant } = props.data;
+    const {
+        relations,
+        rows,
+        rule,
+        onPickRelations,
+        onPickRows,
+        pickedRowIds,
+        pickedRelationIds,
+        entity,
+        disablePickRow,
+        disablePickRelation,
+        pickRelationRule,
+        disabled,
+    } = props.data;
+    const { t } = props.methods;
 
-    return <div>宽屏未实现</div>
+    if (rows?.length > 0 && relations?.length > 0) {
+        const Row =
+            rows.length === 1 ? (
+                rows[0].value ? (
+                    <>
+                        <Divider orientation="left">
+                            {t(`${entity}:name`)}
+                        </Divider>
+                        <Space>
+                            <Typography.Title>{rows[0].value}</Typography.Title>
+                        </Space>
+                    </>
+                ) : null
+            ) : (
+                <>
+                    <Divider orientation="left">
+                        {t('pickRow', { entity: t(`${entity}:name`) })}
+                    </Divider>
+                    <Checkbox.Group
+                        value={pickedRowIds || []}
+                        disabled={disablePickRow || disabled}
+                        onChange={(val) => onPickRows(val as string[])}
+                    >
+                        {rows.map((row) => (
+                            <Checkbox value={row.id}>{row.value}</Checkbox>
+                        ))}
+                    </Checkbox.Group>
+                </>
+            );
+        const Relation = (
+            <>
+                <Divider orientation="left">
+                    {t(`pickRelation.${pickRelationRule}`)}
+                </Divider>
+                <List>
+                    {rule !== 'single' ? (
+                        <Checkbox.Group
+                            value={pickedRelationIds || []}
+                            disabled={disablePickRelation || disabled}
+                            onChange={(val) => onPickRelations(val as string[])}
+                        >
+                            {relations.map((relation) => (
+                                <Checkbox value={relation.id}>
+                                    {t(`${entity}:r.${relation.name}`)}
+                                </Checkbox>
+                            ))}
+                        </Checkbox.Group>
+                    ) : (
+                        <Radio.Group
+                            onChange={(e) => {
+                                const val = e.target.value;
+                                onPickRelations([val]);
+                            }}
+                            value={pickedRelationIds?.[0] || undefined}
+                        >
+                            {relations.map((relation) => (
+                                <Radio value={relation.id}>
+                                    {t(`${entity}:r.${relation.name}`)}
+                                </Radio>
+                            ))}
+                        </Radio.Group>
+                    )}
+                </List>
+            </>
+        );
+        return (
+            <Flex vertical className={Styles.container}>
+                {Row}
+                {Relation}
+            </Flex>
+        );
+    }
+    return null;
 }

src/components/userEntityGrant/claim/web.pc.module.less

@@ -1,3 +1,3 @@
 .container {
-    background: var(--oak-bg-color-container);
+    margin: 16px 0;
 }

src/components/userEntityGrant/claim/web.pc.tsx

@@ -1,5 +1,8 @@
 import { WebComponentProps } from 'oak-frontend-base';
+import { Alert, Space, List, Button, Row, Col, Divider, Flex } from 'antd';
+import UbPicker from './ubPicker';
 import { EntityDict } from '../../../oak-app-domain';
+import Styles from './web.pc.module.less';
 
 export default function Render(
     props: WebComponentProps<
@@ -8,12 +11,153 @@ export default function Render(
         false,
         {
             userEntityGrant: EntityDict['userEntityGrant']['Schema'];
-            isGrantee: boolean;
+            isGranter: boolean;
             hasClaimed: boolean;
+            counterStr: string;
+            hideInfo: boolean;
+            hideTip: boolean;
+            pickedRowIds?: string[];
+            pickedRelationIds?: string[];
+            picker?: (props: {
+                disabled?: boolean;
+                entity: keyof EntityDict;
+                entityFilter: object;
+                relationIds: string[];
+                rule: EntityDict['userEntityGrant']['OpSchema']['rule'];
+                ruleOnRow: EntityDict['userEntityGrant']['OpSchema']['ruleOnRow'];
+                onPickRelations: (ids: string[]) => void;
+                onPickRows: (id: string[]) => void;
+                oakPath: string;
+                pickedRowIds?: string[];
+                pickedRelationIds?: string[];
+            }) => React.ReactElement;
+        },
+        {
+            onPickRelations: (ids: string[]) => void;
+            onPickRows: (ids: string[]) => void;
+            claim: () => void;
         }
     >
 ) {
-    const { userEntityGrant } = props.data;
+    const {
+        userEntityGrant,
+        picker: Picker,
+        isGranter,
+        hasClaimed,
+        counterStr,
+        hideInfo,
+        pickedRowIds,
+        pickedRelationIds,
+        oakExecutable,
+        hideTip,
+    } = props.data;
+    const { t, onPickRelations, onPickRows, claim } = props.methods;
 
-    return <div>尚未实现</div>
+    if (userEntityGrant) {
+        const {
+            relationEntity,
+            relationEntityFilter,
+            rule,
+            ruleOnRow,
+            relationIds,
+            expired,
+        } = userEntityGrant;
+
+        const Picker2 = Picker || UbPicker;
+        return (
+            <Row>
+                <Col span={2} />
+                <Col span={20}>
+                    <Flex vertical className={Styles.container}>
+                        {!hideTip && !isGranter && !hasClaimed && (
+                            <Alert message={t('tip')} type="info" showIcon />
+                        )}
+                        {isGranter && (
+                            <Alert
+                                message={t('isGranter')}
+                                type="error"
+                                showIcon
+                            />
+                        )}
+                        {hasClaimed && (
+                            <Alert
+                                message={t('hasClaimed')}
+                                type="error"
+                                showIcon
+                            />
+                        )}
+                        {!hideInfo && (
+                            <div className={Styles.info}>
+                                <Divider orientation="left">
+                                    {t('source')}
+                                </Divider>
+
+                                <List itemLayout="horizontal">
+                                    <List.Item>
+                                        <List.Item.Meta
+                                            title={t('granterName')}
+                                        ></List.Item.Meta>
+                                        {userEntityGrant.granter.name ||
+                                            userEntityGrant.granter.nickname}
+                                    </List.Item>
+                                    <List.Item>
+                                        <List.Item.Meta
+                                            title={
+                                                expired
+                                                    ? t('isExpired')
+                                                    : t('counter')
+                                            }
+                                        ></List.Item.Meta>
+                                        {expired ? t('expired') : counterStr}
+                                    </List.Item>
+                                </List>
+                            </div>
+                        )}
+                        <Picker2
+                            disabled={!!expired || hasClaimed || isGranter}
+                            entity={relationEntity as keyof EntityDict}
+                            entityFilter={relationEntityFilter}
+                            rule={rule}
+                            ruleOnRow={ruleOnRow}
+                            relationIds={relationIds}
+                            onPickRows={onPickRows}
+                            onPickRelations={onPickRelations}
+                            pickedRelationIds={pickedRelationIds}
+                            pickedRowIds={pickedRowIds}
+                            oakPath="$uegClaim-content"
+                        />
+                        <Space style={{ justifyContent: 'center' }}>
+                            <Button
+                                color={
+                                    isGranter || hasClaimed
+                                        ? 'danger'
+                                        : !expired
+                                        ? 'primary'
+                                        : 'warning'
+                                }
+                                disabled={
+                                    oakExecutable !== true ||
+                                    !!expired ||
+                                    isGranter ||
+                                    hasClaimed
+                                }
+                                onClick={() => claim()}
+                            >
+                                {isGranter
+                                    ? t('isGranter')
+                                    : hasClaimed
+                                    ? t('hasClaimed')
+                                    : !expired
+                                    ? t('userEntityGrant:action.claim')
+                                    : t('expired')}
+                            </Button>
+                        </Space>
+                    </Flex>
+                </Col>
+                <Col span={2} />
+            </Row>
+        );
+    }
+
+    return null;
 }

src/components/userEntityGrant/share/mobile.module.less

@@ -1,7 +0,0 @@
-
-
-.container {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-}

src/components/userEntityGrant/share/web.module.less

@@ -1,5 +0,0 @@
-
-
-.container {
-  background: var(--oak-bg-color-container);
-}

src/components/userEntityGrant/share/web.pc.tsx

@@ -1,6 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
-import Style from './web.module.less';
-import PageHeader from '../../common/pageHeader';
 import QrCode from '../../common/qrCode';
 import { WebComponentProps } from 'oak-frontend-base';
 import { EntityDict } from '../../../oak-app-domain';
@@ -10,7 +8,7 @@ export default function Render(
     props: WebComponentProps<
         EntityDict,
         'userEntityGrant',
-        true,
+        false,
         {
             url: string;
             expiresAt: number;
@@ -18,15 +16,12 @@ export default function Render(
         {}
     >
 ) {
-    const {
+    const { url, expiresAt, oakLoading } = props.data;
-        url,
+    if (oakLoading) {
-        expiresAt,
+        return <Spin />;
-        oakLoading,
+    }
-    } = props.data;
     if (url) {
-        return (
+        return <QrCode url={url} expiresAt={expiresAt} />;
-            <QrCode url={url} expiresAt={expiresAt} />
-        );
     }
     return null;
 }

src/components/userEntityGrant/share/web.tsx

@@ -2,12 +2,13 @@ import React from 'react';
 import QrCode from '../../common/qrCode';
 import { WebComponentProps } from 'oak-frontend-base';
 import { EntityDict } from '../../../oak-app-domain';
+import { DotLoading } from 'antd-mobile';
 
 export default function Render(
     props: WebComponentProps<
         EntityDict,
         'userEntityGrant',
-        true,
+        false,
         {
             url: string;
             expiresAt: number;
@@ -15,15 +16,12 @@ export default function Render(
         {}
     >
 ) {
-    const {
+    const { url, expiresAt, oakLoading } = props.data;
-        url,
+    if (oakLoading) {
-        expiresAt,
+        return <DotLoading color="primary" />;
-        oakLoading,
+    }
-    } = props.data;
     if (url) {
-        return (
+        return <QrCode url={url} expiresAt={expiresAt} />;
-            <QrCode url={url} expiresAt={expiresAt} />
-        );
     }
     return null;
 }