适配新的框架

2022-10-13 14:31:15 +08:00 · 2022-10-13 14:31:15 +08:00 · f2eb4d06ea
parent eb8a42956e
commit f2eb4d06ea
12 changed files with 144 additions and 225 deletions
--- a/package.json
+++ b/package.json
@ -72,5 +72,5 @@
        "test": "ts-node ./test/test.ts",
        "prepare": "rimraf node_modules/react & rimraf node_modules/react-dom & rimraf node_modules/react-router"
    },
-    "main": "lib/index"
+    "main": "src/index"
 }
--- a/src/components/extraFile/gallery/index.ts
+++ b/src/components/extraFile/gallery/index.ts
@ -8,6 +8,18 @@ import { composeFileUrl } from '../../../utils/extraFile';
 export default OakComponent({
    entity: 'extraFile',
    isList: true,
+    projection: {
+        id: 1,
+        tag1: 1,
+        origin: 1,
+        bucket: 1,
+        objectId: 1,
+        filename: 1,
+        extra1: 1,
+        extension: 1,
+        type: 1,
+        entity: 1,
+    },
    async formData({ data: originalFiles, features }) {
        const application = await features.application.getApplication();
        const number2 = this.props.maxNumber;
@ -42,7 +54,9 @@ export default OakComponent({
        itemSizePercentage: '',
        newUploadFiles: [],
    },
-    externalClasses: ['l-class', 'l-item-class'],
+    wechatMp: {
+        externalClasses: ['l-class', 'l-item-class'],
+    },
    properties: {
        oakFullpath: String,
        oakParent: String,
@ -179,7 +193,7 @@ export default OakComponent({
            await Promise.all(
                uploadFiles.map(async (uploadFile) => {
                    const { name, type: fileType, size, raw } = uploadFile;
-                    this.pushExtraFile(
+                    await this.pushExtraFile(
                        {
                            name,
                            fileType,
@ -219,58 +233,52 @@ export default OakComponent({
                size,
                extension,
                fileType,
+                id: await generateNewId(),
+                entityId,
            } as DeduceCreateOperationData<EntityDict['extraFile']['Schema']>;
            // autoUpload为true, 选择直接上传七牛，再提交extraFile
            if (autoUpload) {
+                if (callback) {
+                    callback(updateData, 'uploading');
+                }
                try {
-                    if (callback) {
-                        callback(updateData, 'uploading');
-                    }
                    const { bucket } = await this.features.extraFile.upload(
                        updateData
                    );
-                    try {
-                        Object.assign(updateData, {
-                            bucket,
-                            extra1: null,
-                            id: await generateNewId(),
-                            entityId,
-                        });
-                        await this.addExtraFile(updateData);
-                        if (callback) {
-                            callback(updateData, 'success');
-                        }
-                        const ele: Parameters<typeof this['pushNode']>[1] = {
-                            updateData,
-                        };
-                        this.pushNode(undefined, ele);
-                    } catch (error) {
-                        if (callback) {
-                            callback(updateData, 'failed');
-                        }
-                        //todo 保存extraFile失败 需要remove七牛图片
+                    Object.assign(updateData, {
+                        bucket,
+                        extra1: null,
+                    });
+                    if (callback) {
+                        callback(updateData, 'success');
                    }
-                } catch (err) {
+                } catch (error) {
                    if (callback) {
                        callback(updateData, 'failed');
                    }
-                    //上传七牛失败
-                }
-            } else {
-                const ele: Parameters<typeof this['pushNode']>[1] = {
-                    updateData,
-                    beforeExecute: async (updateData) => {
-                        const { bucket } = await this.features.extraFile.upload(
-                            updateData
-                        );
-                        Object.assign(updateData, {
-                            bucket,
-                            extra1: null,
-                        });
-                    },
-                };
+                    //todo 保存extraFile失败 需要remove七牛图片

-                this.pushNode(undefined, ele);
+                    throw error;
+                }
+
+                await this.addOperation({
+                    action: 'create',
+                    data: updateData
+                })
+                await this.execute();
+            } else {
+                await this.addOperation({
+                    action: 'create',
+                    data: updateData,
+                }, async () => {
+                    const { bucket } = await this.features.extraFile.upload(
+                        updateData
+                    );
+                    Object.assign(updateData, {
+                        bucket,
+                        extra1: null,
+                    });
+                })
            }
        },
        async onItemTapped(event: WechatMiniprogram.Touch) {
@ -298,13 +306,17 @@ export default OakComponent({
            }
        },
        async onDelete(event: WechatMiniprogram.Touch) {
-            const { originalFiles } = this.state;
-            const { value, index } = event.currentTarget.dataset;
-            const { id } = value;
-            const findIndex = originalFiles?.findIndex((ele) => ele?.id === id);
+            const { value } = event.currentTarget.dataset;
+            const { id, bucket } = value;

-            if (isMockId(id)) {
-                this.removeNode('', `${findIndex}`);
+            if (!bucket) {
+                await this.addOperation({
+                    action: 'remove',
+                    data: {},
+                    filter: {
+                        id,
+                    }
+                });
            } else {
                const result = await wx.showModal({
                    title: '确认删除吗',
@ -312,16 +324,29 @@ export default OakComponent({
                });
                const { confirm } = result;
                if (confirm) {
-                    this.removeNode('', `${findIndex}`);
+                    await this.addOperation({
+                        action: 'remove',
+                        data: {},
+                        filter: {
+                            id,
+                        }
+                    });
+                    await this.execute();
                }
            }
        },
        async onWebDelete(value: any) {
            const { originalFiles } = this.state;
-            const { id } = value;
+            const { id, bucket } = value;
            const findIndex = originalFiles?.findIndex((ele) => ele?.id === id);
-            if (isMockId(id)) {
-                this.removeNode('', `${findIndex}`);
+            if (!bucket) {
+                await this.addOperation({
+                    action: 'remove',
+                    data: {},
+                    filter: {
+                        id,
+                    }
+                });
            } else {
                const confirm = Dialog.confirm({
                    header: '确认删除当前文件？',
@ -330,8 +355,15 @@ export default OakComponent({
                    content: '删除后，文件不可恢复',
                    cancelBtn: '取消',
                    confirmBtn: '确定',
-                    onConfirm: () => {
-                        this.removeNode('', `${findIndex}`);
+                    onConfirm: async () => {
+                        await this.addOperation({
+                            action: 'remove',
+                            data: {},
+                            filter: {
+                                id,
+                            }
+                        });
+                        await this.execute();
                        confirm.hide();
                    },
                    onCancel: () => {
@ -343,34 +375,6 @@ export default OakComponent({
                });
            }
        },
-        async addExtraFile(
-            extraFile: DeduceCreateOperationData<
-                EntityDict['extraFile']['Schema']
-            >
-        ) {
-            try {
-                const result = await this.features.cache.operate('extraFile', {
-                    action: 'create',
-                    data: extraFile,
-                    id: await generateNewId(),
-                });
-                return result;
-            } catch (error) {
-                if (
-                    (<OakException>error).constructor.name ===
-                    OakUnloggedInException.name
-                ) {
-                    this.navigateTo(
-                        {
-                            url: '/login',
-                        },
-                        undefined
-                    );
-                    return;
-                }
-                throw error;
-            }
-        },
        setNewUploadFiles(file: any, status: string) {
            const { filename, size, id } = file;
            const { newUploadFiles } = this.state;
--- a/src/components/extraFile/gallery/index.wxml
+++ b/src/components/extraFile/gallery/index.wxml
@ -2,8 +2,8 @@
    <block wx:for="{{files}}" wx:key="index">
        <block wx:if="{{item}}">
            <view class="file-list__item  file-list__item--{{size}} l-item-class" style="{{itemSizePercentage?'width:'+itemSizePercentage+'padding-bottom:'+itemSizePercentage:'xxx'}}">
-                <item data-index="{{index}}" bind:tap="onItemTapped" mode="{{mode}}" oakValue="{{item}}" oakPath="{{index}}" oakParent="{{oakFullpath}}" />
-                <view wx:if="{{!disableDelete}}" mut-bind:tap="onDelete" class="file-list__remove" data-value="{{item}}" data-index="{{ index }}">
+                <item data-index="{{index}}" bind:tap="onItemTapped" mode="{{mode}}" oakPath="{{oakFullpath}}.{{index}}" />
+                <view wx:if="{{!disableDelete}}" mut-bind:tap="onDelete" class="file-list__remove" data-value="{{item}}">
                    <t-icon name="close" color="#ffffff" size="18" />
                </view>
            </view>
--- a/src/pages/article/detail/index.ts
+++ b/src/pages/article/detail/index.ts
@ -1,6 +1,6 @@


-export default OakPage({
+export default OakComponent({
    entity: 'article',
    projection: {
        id: 1,
@ -9,26 +9,6 @@ export default OakPage({
        author: 1,
        abstract: 1,
        content: 1,
-        extraFile$entity: {
-            $entity: 'extraFile',
-            data: {
-                id: 1,
-                tag1: 1,
-                origin: 1,
-                bucket: 1,
-                objectId: 1,
-                filename: 1,
-                extra1: 1,
-                extension: 1,
-                type: 1,
-                entity: 1,
-            },
-            filter: {
-                tag1: {
-                    $in: ['cover'],
-                },
-            },
-        },
    },
    isList: false,
    formData: async function ({ data: article, features }) {
@ -39,7 +19,6 @@ export default OakPage({
            abstract: article?.abstract,
            author: article?.author,
            content: article?.content,
-            extraFile$entity: article?.extraFile$entity,
        };
    },
    observers: {
@ -49,11 +28,5 @@ export default OakPage({
                 ac.innerHTML = val;
            }
        }
-    },
-    data: {
-    },
-    methods: {
-
-    },
-    
+    },    
 });
--- a/src/pages/article/list/index.ts
+++ b/src/pages/article/list/index.ts
@ -1,7 +1,7 @@
 import { OpSchema as ExtraFile } from '../../../general-app-domain/ExtraFile/Schema';
 import { composeFileUrl } from '../../../utils/extraFile';

-export default OakPage({
+export default OakComponent({
    entity: 'article',
    projection: {
        id: 1,
@ -10,26 +10,6 @@ export default OakPage({
        author: 1,
        abstract: 1,
        content: 1,
-        extraFile$entity: {
-            $entity: 'extraFile',
-            data: {
-                id: 1,
-                tag1: 1,
-                origin: 1,
-                bucket: 1,
-                objectId: 1,
-                filename: 1,
-                extra1: 1,
-                extension: 1,
-                type: 1,
-                entity: 1,
-            },
-            filter: {
-                tag1: {
-                    $in: ['cover'],
-                },
-            },
-        },
    },
    isList: true,
    formData: async function ({ data: articles, features }) {
@ -39,26 +19,6 @@ export default OakPage({

        return {
            articles: articles?.map((article, index: number) => {
-                const extraFile$entity =
-                    article?.extraFile$entity as Array<ExtraFile>;
-                const coverPictures = extraFile$entity
-                    ?.filter((ele: ExtraFile) => ['cover'].includes(ele.tag1))
-                    .map((ele: ExtraFile) =>
-                        composeFileUrl(
-                            ele as Pick<
-                                ExtraFile,
-                                | 'type'
-                                | 'bucket'
-                                | 'filename'
-                                | 'origin'
-                                | 'extra1'
-                                | 'objectId'
-                                | 'extension'
-                                | 'entity'
-                            >,
-                            application?.system?.config
-                        )
-                    );
                return {
                    index,
                    id: article?.id,
@ -67,7 +27,6 @@ export default OakPage({
                    abstract: article?.abstract,
                    author: article?.author,
                    content: article?.content,
-                    coverPicture: coverPictures?.[0],
                };
            }),
            pagination,
@ -94,8 +53,15 @@ export default OakPage({
                oakId: id,
            });
        },
-        onRemove(path: string) {
-            this.execute('remove', [], path);
+        async onRemove(id: string) {
+            await this.addOperation({
+                action: 'remove',
+                data: {},
+                filter: {
+                    id,
+                }
+            });
+            await this.execute();
        },
        async searchChange(event: any) {
            const { value } = this.resolveInput(event);
--- a/src/pages/article/list/web.tsx
+++ b/src/pages/article/list/web.tsx
@ -17,7 +17,6 @@ import Style from './web.module.less';
 const { ListItem, ListItemMeta } = List;

 export default function render(this: any) {
-    const { t } = this;
    const { width } = this.props;
    const { pagination, articles = [], oakLoading, searchValue } = this.state;
    const { pageSize, total, currentPage } = pagination || {};
@ -34,7 +33,7 @@ export default function render(this: any) {
                                this.goUpsert();
                            }}
                        >
-                            {t('action.add')}
+                            {this.t('action.add')}
                        </Button>
                    </Space>
                </Col>
@ -70,33 +69,33 @@ export default function render(this: any) {
                    },
                    {
                        colKey: 'iState',
-                        title: t('book:attr.iState'),
+                        title: this.t('book:attr.iState'),
                        cell: ({ row, rowIndex }) => {
                            return (
                                <Tag theme="primary" size="small">
-                                    {t(`book:v.iState.${row.iState}`)}
+                                    {this.t(`book:v.iState.${row.iState}`)}
                                </Tag>
                            );
                        },
                    },
                    {
                        colKey: 'title',
-                        title: t('article:attr.title'),
+                        title: this.t('article:attr.title'),
                    },
                    {
                        colKey: 'author',
-                        title: t('article:attr.author'),
+                        title: this.t('article:attr.author'),
                    },
                    {
                        colKey: 'abstract',
-                        title: t('article:attr.abstract'),
+                        title: this.t('article:attr.abstract'),
                    },
                    {
                        colKey: 'op',
                        width: 300,
                        title: '操作',
                        align: 'center',
-                        cell: ({ row, rowIndex }) => {
+                        cell: ({ row }) => {
                            return (
                                <>
                                    <Button
@ -128,9 +127,7 @@ export default function render(this: any) {
                                                confirmBtn: '确定',
                                                cancelBtn: '取消',
                                                onConfirm: async ({ e }) => {
-                                                    this.onRemove(
-                                                        `${rowIndex}`
-                                                    );
+                                                    this.onRemove(row.id);
                                                    confirmDia!.hide!();
                                                },
                                                onClose: ({ e, trigger }) => {
--- a/src/pages/article/preview/index.ts
+++ b/src/pages/article/preview/index.ts
@ -1,6 +1,6 @@


-export default OakPage({
+export default OakComponent({
    isList: false,
    formData: async function ({ features }) {
        return {};
--- a/src/pages/article/upsert/index.ts
+++ b/src/pages/article/upsert/index.ts
@ -7,7 +7,7 @@ import {
 } from 'oak-domain/lib/types';
 import { EntityDict } from '../../../general-app-domain';

-export default OakPage({
+export default OakComponent({
    entity: 'article',
    projection: {
        id: 1,
@ -16,26 +16,6 @@ export default OakPage({
        author: 1,
        abstract: 1,
        content: 1,
-        extraFile$entity: {
-            $entity: 'extraFile',
-            data: {
-                id: 1,
-                tag1: 1,
-                origin: 1,
-                bucket: 1,
-                objectId: 1,
-                filename: 1,
-                extra1: 1,
-                extension: 1,
-                type: 1,
-                entity: 1,
-            },
-            filter: {
-                tag1: {
-                    $in: ['cover'],
-                },
-            },
-        },
    },
    isList: false,
    formData: async function ({ data: article, features }) {
@ -46,7 +26,6 @@ export default OakPage({
            abstract: article?.abstract,
            author: article?.author,
            content: article?.content,
-            extraFile$entity: article?.extraFile$entity,
        };
    },
    data: {
@ -63,13 +42,15 @@ export default OakPage({
            }
        },
    },
-    methods: {
-        onUnload() {
+    lifetimes: {
+        detached() {
            const { editor } = this.state;
            if (editor == null) return;
            editor.destroy();
            this.setEditor(null);
-        },
+        }
+    },
+    methods: {
        async addExtraFile(
            extraFile: DeduceCreateOperationData<
                EntityDict['extraFile']['Schema']
@ -100,12 +81,12 @@ export default OakPage({
                editor,
            });
        },
-        setHtml(html: string) {
+        async setHtml(html: string) {
            this.setState({
                html,
            });
            if (html && html !== '<p><br></p>') {
-                this.state.oakFullpath && this.setUpdateData('content', html);
+                await this.setUpdateData('content', html);
            }
        },
        async confirm() {
@ -117,7 +98,7 @@ export default OakPage({

                return;
            }
-            await this.execute(this.props.oakId ? 'update' : 'create');
+            await this.execute();
            if (this.props.oakFrom === 'article:list') {
                this.navigateBack();
                return;
--- a/src/pages/article/upsert/web.tsx
+++ b/src/pages/article/upsert/web.tsx
@ -50,7 +50,7 @@ function customCheckImageFn(
 }

 export default function render(this: any) {
-    const { t, features, addExtraFile } = this;
+    const { features, addExtraFile } = this;
    const {
        editor,
        title,
@ -60,6 +60,7 @@ export default function render(this: any) {
        html,
        origin,
        contentTip,
+        oakFullpath,
    } = this.state;

    return (
@ -82,7 +83,7 @@ export default function render(this: any) {
                                        this.setUpdateData('title', value);
                                    }}
                                    value={title}
-                                    placeholder={t('placeholder.title')}
+                                    placeholder={this.t('placeholder.title')}
                                    size="large"
                                    maxlength={64}
                                    suffix={`${[...(title || '')].length}/64`}
@ -95,14 +96,14 @@ export default function render(this: any) {
                                        this.setUpdateData('author', value);
                                    }}
                                    value={author}
-                                    placeholder={t('placeholder.author')}
+                                    placeholder={this.t('placeholder.author')}
                                    inputClass={[Style.input]}
                                />
                            </div>
                            {contentTip && (
                                <Alert
                                    theme="info"
-                                    message={t('tips.content')}
+                                    message={this.t('tips.content')}
                                    close
                                    onClose={() => {
                                        this.setState({
@ -114,7 +115,7 @@ export default function render(this: any) {
                            <Editor
                                defaultConfig={{
                                    // TS 语法
-                                    placeholder: t('placeholder.content'),
+                                    placeholder: this.t('placeholder.content'),
                                    MENU_CONF: {
                                        // fontSize: {
                                        //     fontSizeList: [
@ -258,8 +259,12 @@ export default function render(this: any) {
                                        <Col flex="none">
                                            <OakGallery
                                                maxNumber={1}
-                                                oakPath="extraFile$entity"
-                                                oakParent={this.state.oakFullpath}
+                                                oakPath={oakFullpath ? `${oakFullpath}.extraFile$entity` : undefined}
+                                                oakFilters={[{
+                                                    tag1: {
+                                                        $in: ['cover'],
+                                                    },
+                                                }]}
                                                type="image"
                                                origin="qiniu"
                                                tag1="cover"
@ -272,7 +277,7 @@ export default function render(this: any) {
                                                    minRows: 4,
                                                }}
                                                maxlength={120}
-                                                placeholder={t(
+                                                placeholder={this.t(
                                                    'placeholder.abstract'
                                                )}
                                                onChange={(value) => {
--- a/src/pages/login/index.ts
+++ b/src/pages/login/index.ts
@ -1,6 +1,6 @@

 const SEND_KEY = 'captcha:sendAt';
-export default OakPage({
+export default OakComponent({
    isList: false,
    projection: {
        id: 1,
--- a/src/pages/login/web.tsx
+++ b/src/pages/login/web.tsx
@ -12,7 +12,6 @@ import Style from './web.module.less';
 const { FormItem } = Form;

 export default function render(this: any) {
-    const { t } = this;
    const { onlyCaptcha, onlyPassword, width } = this.props;
    const { mobile, captcha, password, counter, tabValue = 1} = this.state;
    const validMobile = isMobile(mobile);
@ -30,7 +29,7 @@ export default function render(this: any) {
                    data-attr="mobile"
                    maxlength={11}
                    prefixIcon={<MobileIcon />}
-                    placeholder={t('placeholder.Mobile')}
+                    placeholder={this.t('placeholder.Mobile')}
                    size="large"
                    onChange={(value, context) => {
                        this.setState({
@ -47,7 +46,7 @@ export default function render(this: any) {
                    data-attr="password"
                    prefixIcon={<LockOnIcon />}
                    type="password"
-                    placeholder={t('placeholder.Password')}
+                    placeholder={this.t('placeholder.Password')}
                    size="large"
                    onChange={(value, context) => {
                        this.setState({
@ -67,7 +66,7 @@ export default function render(this: any) {
                    disabled={!allowSubmit}
                    onClick={() => this.loginByMobile()}
                >
-                    {t('Log in')}
+                    {this.t('Log in')}
                </Button>
            </FormItem>
        </Form>
@ -82,7 +81,7 @@ export default function render(this: any) {
                    type="tel"
                    maxlength={11}
                    prefixIcon={<MobileIcon />}
-                    placeholder={t('placeholder.Mobile')}
+                    placeholder={this.t('placeholder.Mobile')}
                    size="large"
                    onChange={(value, context) => {
                        this.setState({
@ -98,7 +97,7 @@ export default function render(this: any) {
                    value={captcha}
                    data-attr="captcha"
                    maxlength={4}
-                    placeholder={t('placeholder.Captcha')}
+                    placeholder={this.t('placeholder.Captcha')}
                    size="large"
                    onChange={(value, context) => {
                        this.setState({
@ -114,7 +113,7 @@ export default function render(this: any) {
                            disabled={!validMobile || counter > 0}
                            onClick={() => this.sendCaptcha()}
                        >
-                            {counter > 0 ? `${counter}秒后可重发` : t('Send')}
+                            {counter > 0 ? `${counter}秒后可重发` : this.t('Send')}
                        </Button>
                    }
                />
@ -129,7 +128,7 @@ export default function render(this: any) {
                    disabled={!allowSubmit}
                    onClick={() => this.loginByMobile()}
                >
-                    {t('Log in')}
+                    {this.t('Log in')}
                </Button>
            </FormItem>
        </Form>
@ -193,7 +192,7 @@ export default function render(this: any) {
                                }
                            )}
                        >
-                            {t('in Password')}
+                            {this.t('in Password')}
                        </Radio.Button>
                        <Radio.Button
                            value={2}
@ -204,7 +203,7 @@ export default function render(this: any) {
                                }
                            )}
                        >
-                            {t('in Captcha')}
+                            {this.t('in Captcha')}
                        </Radio.Button>
                        <Radio.Button
                            value={3}
@ -215,7 +214,7 @@ export default function render(this: any) {
                                }
                            )}
                        >
-                            {t('in QrCode')}
+                            {this.t('in QrCode')}
                        </Radio.Button>
                    </Radio.Group>
                </div>
--- a/src/typings/polyfill.d.ts
+++ b/src/typings/polyfill.d.ts
@ -1,4 +1,4 @@
-import { MakeOakComponent, MakeOakPage } from 'oak-frontend-base/lib/types/Page';
+import { MakeOakComponent } from 'oak-frontend-base/src/types/Page2';
 import { EntityDict } from '../general-app-domain';
 import { GeneralRuntimeContext } from '../src/RuntimeContext';
 import { aspectDict } from '../src/aspects';
@ -7,12 +7,6 @@ import { initialize } from '../src/features';
 declare global {
    const generateNewId: (options?: { timestamp?: boolean }) => Promise<string>;

-    const OakPage: MakeOakPage<
-        EntityDict,
-        RuntimeContext,
-        typeof aspectDict,
-        ReturnType<typeof initialize>['features']
-    >;
    const OakComponent: MakeOakComponent<
        EntityDict,
        RuntimeContext,