From 907c3152c03c4722b9d01d909ef9c68f30607d5d Mon Sep 17 00:00:00 2001 From: qsc <3153284618@qq.com> Date: Mon, 3 Jul 2023 18:19:51 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B8=AE=E5=8A=A9=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/pages/article/doc/web.js | 2 +- lib/pages/article/doc/web.module.less | 3 +- lib/pages/articleMenu/list/index.js | 238 +++++++++++-------- lib/pages/articleMenu/list/web.d.ts | 5 + lib/pages/articleMenu/list/web.js | 13 +- lib/pages/articleMenu/list/web.module.less | 44 ++-- src/pages/article/doc/web.module.less | 3 +- src/pages/article/doc/web.tsx | 2 +- src/pages/articleMenu/list/index.ts | 253 +++++++++++++-------- src/pages/articleMenu/list/web.module.less | 44 ++-- src/pages/articleMenu/list/web.tsx | 91 +++++--- 11 files changed, 435 insertions(+), 263 deletions(-) diff --git a/lib/pages/article/doc/web.js b/lib/pages/article/doc/web.js index 34b1c5741..5d985adf5 100644 --- a/lib/pages/article/doc/web.js +++ b/lib/pages/article/doc/web.js @@ -25,7 +25,7 @@ function render(props) { } }, { children: menuItem.label }), menuItem.key)); }); }; - return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.container }, { children: (treeData === null || treeData === void 0 ? void 0 : treeData.length) === 0 ? ((0, jsx_runtime_1.jsx)(antd_1.Empty, { image: antd_1.Empty.PRESENTED_IMAGE_SIMPLE })) : ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: web_module_less_1.default.article }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.menu }, { children: (0, jsx_runtime_1.jsx)(Sider, tslib_1.__assign({ theme: "light", width: 256, className: web_module_less_1.default.siderPanel }, { children: (0, jsx_runtime_1.jsx)(antd_1.Menu, tslib_1.__assign({ openKeys: openKeys, selectedKeys: selectedKeys, style: { width: 256 }, mode: "inline" }, { children: renderMenuItems(treeData) })) })) })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.editor, style: { + return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.container }, { children: (treeData === null || treeData === void 0 ? void 0 : treeData.length) === 0 ? ((0, jsx_runtime_1.jsx)(antd_1.Empty, { image: antd_1.Empty.PRESENTED_IMAGE_SIMPLE })) : ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: web_module_less_1.default.article }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.menu }, { children: (0, jsx_runtime_1.jsx)(Sider, tslib_1.__assign({ theme: "light", width: 275, className: web_module_less_1.default.siderPanel }, { children: (0, jsx_runtime_1.jsx)(antd_1.Menu, tslib_1.__assign({ openKeys: openKeys, selectedKeys: selectedKeys, style: { width: 256 }, mode: "inline" }, { children: renderMenuItems(treeData) })) })) })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.editor, style: { marginLeft: 300 } }, { children: (selectedArticleId === null || selectedArticleId === void 0 ? void 0 : selectedArticleId.length) > 0 ? ((0, jsx_runtime_1.jsx)(detail3_1.default, { oakAutoUnmount: true, oakId: selectedArticleId, oakPath: "$article-detail2-".concat(selectedArticleId) })) : null }))] }))) }))); } diff --git a/lib/pages/article/doc/web.module.less b/lib/pages/article/doc/web.module.less index d9e754377..fb37a4a51 100644 --- a/lib/pages/article/doc/web.module.less +++ b/lib/pages/article/doc/web.module.less @@ -51,7 +51,8 @@ :global { .ant-layout-sider-children { - height: calc(100% - 48px); + // height: calc(100% - 48px); + height: 100%; overflow-y: auto; } .ant-layout-sider-trigger { diff --git a/lib/pages/articleMenu/list/index.js b/lib/pages/articleMenu/list/index.js index 9d1615e9b..f31229c97 100644 --- a/lib/pages/articleMenu/list/index.js +++ b/lib/pages/articleMenu/list/index.js @@ -16,6 +16,15 @@ exports.default = OakComponent({ }, entity: 1, entityId: 1, + article$articleMenu: { + $entity: 'article', + data: { + id: 1, + name: 1, + content: 1, + articleMenuId: 1, + } + }, extraFile$entity: { $entity: 'extraFile', data: { @@ -38,108 +47,149 @@ exports.default = OakComponent({ }, }, }, + sorters: [ + { + sorter: { + $attr: { + $$createAt$$: 1, + }, + $direction: 'asc', + }, + }, + ], isList: true, + pagination: { + currentPage: 1, + pageSize: 20, + more: true, + }, formData: function (_a) { + var _this = this; var articleMenu = _a.data; + var articles = articleMenu.flatMap(function (menu) { + return menu['article$articleMenu']; + }); + var newArticleMenus = articleMenu === null || articleMenu === void 0 ? void 0 : articleMenu.map(function (ele) { + var _a; + return tslib_1.__assign(tslib_1.__assign({}, ele), { logo: _this.features.extraFile.getUrl((_a = ele === null || ele === void 0 ? void 0 : ele.extraFile$entity) === null || _a === void 0 ? void 0 : _a.find(function (ele) { return ele.tag1 === 'logo'; })) }); + }); + var newArticles = articles === null || articles === void 0 ? void 0 : articles.map(function (ele) { return ({ + id: ele === null || ele === void 0 ? void 0 : ele.id, + name: ele === null || ele === void 0 ? void 0 : ele.name, + parent: ele === null || ele === void 0 ? void 0 : ele.articleMenuId, + parentId: ele === null || ele === void 0 ? void 0 : ele.articleMenuId, + isArticle: true, + type: 'article', + }); }); + var arr = tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(newArticleMenus), false), tslib_1.__read(newArticles), false); + var rootNodes = arr === null || arr === void 0 ? void 0 : arr.filter(function (node) { return !node.parent; }); + var treeData = rootNodes === null || rootNodes === void 0 ? void 0 : rootNodes.map(function (rootNode) { + var _a; + return { + label: rootNode.name, + key: (_a = rootNode.id) === null || _a === void 0 ? void 0 : _a.toString(), + isArticle: rootNode.isArticle, + logo: rootNode === null || rootNode === void 0 ? void 0 : rootNode.logo, + children: _this.buildTreeData(arr, rootNode.id), + }; + }); return { - articleMenu: articleMenu, + treeData: treeData, }; }, filters: [], lifetimes: { - ready: function () { - return tslib_1.__awaiter(this, void 0, void 0, function () { - var articles, articleMenus, newArticleMenus, newArticles, arr, rootNodes, treeData; - var _this = this; - return tslib_1.__generator(this, function (_a) { - switch (_a.label) { - case 0: return [4 /*yield*/, this.features.cache.refresh('article', { - data: { - id: 1, - name: 1, - content: 1, - articleMenuId: 1, - }, - })]; - case 1: - articles = (_a.sent()).data; - return [4 /*yield*/, this.features.cache.refresh('articleMenu', { - data: { - id: 1, - name: 1, - isArticle: 1, - isLeaf: 1, - parent: { - id: 1, - name: 1, - isArticle: 1, - isLeaf: 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, - entityId: 1, - }, - filter: { - tag1: { - $in: ['logo'], - }, - }, - }, - }, - sorter: [ - { - $attr: { - $$createAt$$: 1, - }, - $direction: 'asc', - }, - ], - })]; - case 2: - articleMenus = (_a.sent()).data; - newArticleMenus = articleMenus === null || articleMenus === void 0 ? void 0 : articleMenus.map(function (ele) { - var _a; - return tslib_1.__assign(tslib_1.__assign({}, ele), { logo: _this.features.extraFile.getUrl((_a = ele === null || ele === void 0 ? void 0 : ele.extraFile$entity) === null || _a === void 0 ? void 0 : _a.find(function (ele) { return ele.tag1 === 'logo'; })) }); - }); - newArticles = articles === null || articles === void 0 ? void 0 : articles.map(function (ele) { return ({ - id: ele === null || ele === void 0 ? void 0 : ele.id, - name: ele === null || ele === void 0 ? void 0 : ele.name, - parent: ele === null || ele === void 0 ? void 0 : ele.articleMenuId, - parentId: ele === null || ele === void 0 ? void 0 : ele.articleMenuId, - isArticle: true, - type: 'article', - }); }); - arr = tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(newArticleMenus), false), tslib_1.__read(newArticles), false); - rootNodes = arr === null || arr === void 0 ? void 0 : arr.filter(function (node) { return !node.parent; }); - treeData = rootNodes === null || rootNodes === void 0 ? void 0 : rootNodes.map(function (rootNode) { - var _a; - return { - label: rootNode.name, - key: (_a = rootNode.id) === null || _a === void 0 ? void 0 : _a.toString(), - isArticle: rootNode.isArticle, - logo: rootNode === null || rootNode === void 0 ? void 0 : rootNode.logo, - children: _this.buildTreeData(arr, rootNode.id), - }; - }); - this.setState({ - treeData: treeData, - }); - return [2 /*return*/]; - } - }); - }); - }, + // async ready() { + // const { data: articles } = await this.features.cache.refresh( + // 'article', + // { + // data: { + // id: 1, + // name: 1, + // content: 1, + // articleMenuId: 1, + // }, + // } + // ); + // const { data: articleMenus } = await this.features.cache.refresh( + // 'articleMenu', + // { + // data: { + // id: 1, + // name: 1, + // isArticle: 1, + // isLeaf: 1, + // parent: { + // id: 1, + // name: 1, + // isArticle: 1, + // isLeaf: 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, + // entityId: 1, + // }, + // filter: { + // tag1: { + // $in: ['logo'], + // }, + // }, + // }, + // }, + // sorter: [ + // { + // $attr: { + // $$createAt$$: 1, + // }, + // $direction: 'asc', + // }, + // ], + // } + // ); + // const newArticleMenus = articleMenus?.map((ele) => { + // return { + // ...ele, + // logo: this.features.extraFile.getUrl( + // ele?.extraFile$entity?.find( + // (ele) => ele.tag1 === 'logo' + // ) + // ), + // }; + // }); + // const newArticles = articles?.map((ele) => ({ + // id: ele?.id, + // name: ele?.name, + // parent: ele?.articleMenuId, + // parentId: ele?.articleMenuId, + // isArticle: true, + // type: 'article', + // })); + // const arr: any[] = [...newArticleMenus, ...newArticles]; + // const rootNodes = arr?.filter((node) => !node.parent); + // const treeData = rootNodes?.map((rootNode) => { + // return { + // label: rootNode.name, + // key: rootNode.id?.toString(), + // isArticle: rootNode.isArticle, + // logo: rootNode?.logo, + // children: this.buildTreeData(arr, rootNode.id), + // }; + // }); + // this.setState({ + // treeData, + // }) + // }, }, data: { selectArticleMenuId: '', diff --git a/lib/pages/articleMenu/list/web.d.ts b/lib/pages/articleMenu/list/web.d.ts index 5a2b3dc2f..ca4b53b10 100644 --- a/lib/pages/articleMenu/list/web.d.ts +++ b/lib/pages/articleMenu/list/web.d.ts @@ -15,6 +15,11 @@ export default function render(props: WebComponentProps void; gotoArticleUpsert: (articleId: string) => void; diff --git a/lib/pages/articleMenu/list/web.js b/lib/pages/articleMenu/list/web.js index 6a2a4dddc..c2559b473 100644 --- a/lib/pages/articleMenu/list/web.js +++ b/lib/pages/articleMenu/list/web.js @@ -8,8 +8,9 @@ var pageHeader_1 = tslib_1.__importDefault(require("../../../components/common/p var detail_1 = tslib_1.__importDefault(require("../../../components/article/detail")); var cell_1 = tslib_1.__importDefault(require("../../../components/articleMenu/cell")); function render(props) { - var _a = props.data, entity = _a.entity, entityId = _a.entityId, treeData = _a.treeData, selectArticleMenuId = _a.selectArticleMenuId, selectArticleId = _a.selectArticleId, oakFullpath = _a.oakFullpath, oakLegalActions = _a.oakLegalActions; - var _b = props.methods, t = _b.t, gotoUpsertById = _b.gotoUpsertById, gotoArticleUpsert = _b.gotoArticleUpsert, onRemoveArticleMenu = _b.onRemoveArticleMenu, gotoEdit = _b.gotoEdit; + var _a = props.data, entity = _a.entity, entityId = _a.entityId, treeData = _a.treeData, selectArticleMenuId = _a.selectArticleMenuId, selectArticleId = _a.selectArticleId, oakFullpath = _a.oakFullpath, oakLegalActions = _a.oakLegalActions, oakPagination = _a.oakPagination; + var _b = props.methods, t = _b.t, gotoUpsertById = _b.gotoUpsertById, gotoArticleUpsert = _b.gotoArticleUpsert, onRemoveArticleMenu = _b.onRemoveArticleMenu, gotoEdit = _b.gotoEdit, setCurrentPage = _b.setCurrentPage, setPageSize = _b.setPageSize; + var _c = oakPagination || {}, pageSize = _c.pageSize, total = _c.total, currentPage = _c.currentPage; var renderMenuItems = function (data) { return data === null || data === void 0 ? void 0 : data.map(function (menuItem) { if (menuItem.children) { @@ -29,6 +30,12 @@ function render(props) { }; return ((0, jsx_runtime_1.jsx)(pageHeader_1.default, tslib_1.__assign({ title: "\u5206\u7C7B\u7BA1\u7406" }, { children: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: web_module_less_1.default.container }, { children: [(0, jsx_runtime_1.jsx)(antd_1.Space, tslib_1.__assign({ style: { marginBottom: 16 } }, { children: (0, jsx_runtime_1.jsx)(antd_1.Button, tslib_1.__assign({ type: "primary", onClick: function () { gotoEdit(); - } }, { children: "\u65B0\u589E" })) })), (treeData === null || treeData === void 0 ? void 0 : treeData.length) === 0 ? ((0, jsx_runtime_1.jsx)(antd_1.Empty, { image: antd_1.Empty.PRESENTED_IMAGE_SIMPLE })) : ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: web_module_less_1.default.article }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.menu }, { children: (0, jsx_runtime_1.jsx)(antd_1.Menu, tslib_1.__assign({ style: { width: 256 }, mode: "inline" }, { children: renderMenuItems(treeData) })) })), (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: web_module_less_1.default.editor }, { children: [selectArticleMenuId ? ((0, jsx_runtime_1.jsx)(cell_1.default, { oakAutoUnmount: true, oakId: selectArticleMenuId, oakPath: "$articleMenu-cell-".concat(selectArticleMenuId), entity: entity, entityId: entityId })) : null, selectArticleId ? ((0, jsx_runtime_1.jsx)(detail_1.default, { oakAutoUnmount: true, oakId: selectArticleId, oakPath: "$article-detail-".concat(selectArticleId) })) : null] }))] })))] })) }))); + } }, { children: "\u65B0\u589E" })) })), (treeData === null || treeData === void 0 ? void 0 : treeData.length) === 0 ? ((0, jsx_runtime_1.jsx)(antd_1.Empty, { image: antd_1.Empty.PRESENTED_IMAGE_SIMPLE })) : ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: web_module_less_1.default.rightContent }, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: web_module_less_1.default.article }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.menu }, { children: (0, jsx_runtime_1.jsx)(antd_1.Menu, tslib_1.__assign({ style: { width: 256 }, mode: "inline" }, { children: renderMenuItems(treeData) })) })), (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: web_module_less_1.default.editor }, { children: [selectArticleMenuId ? ((0, jsx_runtime_1.jsx)(cell_1.default, { oakAutoUnmount: true, oakId: selectArticleMenuId, oakPath: "$articleMenu-cell-".concat(selectArticleMenuId), entity: entity, entityId: entityId })) : null, selectArticleId ? ((0, jsx_runtime_1.jsx)(detail_1.default, { oakAutoUnmount: true, oakId: selectArticleId, oakPath: "$article-detail-".concat(selectArticleId) })) : null] }))] })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.pagination }, { children: (0, jsx_runtime_1.jsx)(antd_1.Pagination, { className: web_module_less_1.default.pagination, total: total, current: currentPage || 1, pageSize: 20, + // pageSizeOptions={pageSize} + onChange: function (current) { + setCurrentPage(current); + }, onShowSizeChange: function (pageSize) { + setPageSize(pageSize); + } }) }))] })))] })) }))); } exports.default = render; diff --git a/lib/pages/articleMenu/list/web.module.less b/lib/pages/articleMenu/list/web.module.less index da6db28b2..290b8c9c4 100644 --- a/lib/pages/articleMenu/list/web.module.less +++ b/lib/pages/articleMenu/list/web.module.less @@ -3,26 +3,38 @@ box-shadow: 0 2px 3px #0000001a; border-radius: 3px; padding: 30px 32px; - - .article { + .rightContent { display: flex; - flex-direction: row; - flex: 1; + flex-direction: column; - .menu { - display: flex; - } - - .editor { - display: flex; - flex: 1; - margin-left: 20px; - - .rightContainer { - width: 950px; + .article { + display: flex; + flex-direction: row; + flex: 1; + + .menu { + display: flex; + } + + .editor { + display: flex; + flex: 1; + margin-left: 20px; + + .rightContainer { + // width: 950px; + } + } + + } + .pagination { + display: flex; + align-items: flex-end; + justify-content: center; } } + } @@ -40,4 +52,4 @@ flex: 1; } } -} \ No newline at end of file +} diff --git a/src/pages/article/doc/web.module.less b/src/pages/article/doc/web.module.less index d9e754377..fb37a4a51 100644 --- a/src/pages/article/doc/web.module.less +++ b/src/pages/article/doc/web.module.less @@ -51,7 +51,8 @@ :global { .ant-layout-sider-children { - height: calc(100% - 48px); + // height: calc(100% - 48px); + height: 100%; overflow-y: auto; } .ant-layout-sider-trigger { diff --git a/src/pages/article/doc/web.tsx b/src/pages/article/doc/web.tsx index d31cbf481..6a8e26e7f 100644 --- a/src/pages/article/doc/web.tsx +++ b/src/pages/article/doc/web.tsx @@ -158,7 +158,7 @@ export default function render(
{ + return { + ...ele, + logo: this.features.extraFile.getUrl( + ele?.extraFile$entity?.find( + (ele) => ele.tag1 === 'logo' + ) + ), + }; + }); + const newArticles = articles?.map((ele) => ({ + id: ele?.id, + name: ele?.name, + parent: ele?.articleMenuId, + parentId: ele?.articleMenuId, + isArticle: true, + type: 'article', + })); + const arr: any[] = [...newArticleMenus, ...newArticles]; + const rootNodes = arr?.filter((node) => !node.parent); + const treeData = rootNodes?.map((rootNode) => { + return { + label: rootNode.name, + key: rootNode.id?.toString(), + isArticle: rootNode.isArticle, + logo: rootNode?.logo, + children: this.buildTreeData(arr, rootNode.id), + }; + }); return { - articleMenu, + treeData, }; }, filters: [], lifetimes: { - async ready() { - const { data: articles } = await this.features.cache.refresh( - 'article', - { - data: { - id: 1, - name: 1, - content: 1, - articleMenuId: 1, - }, - } - ); - const { data: articleMenus } = await this.features.cache.refresh( - 'articleMenu', - { - data: { - id: 1, - name: 1, - isArticle: 1, - isLeaf: 1, - parent: { - id: 1, - name: 1, - isArticle: 1, - isLeaf: 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, - entityId: 1, - }, - filter: { - tag1: { - $in: ['logo'], - }, - }, - }, - }, - sorter: [ - { - $attr: { - $$createAt$$: 1, - }, - $direction: 'asc', - }, - ], - } - ); + // async ready() { + // const { data: articles } = await this.features.cache.refresh( + // 'article', + // { + // data: { + // id: 1, + // name: 1, + // content: 1, + // articleMenuId: 1, + // }, + // } + // ); + // const { data: articleMenus } = await this.features.cache.refresh( + // 'articleMenu', + // { + // data: { + // id: 1, + // name: 1, + // isArticle: 1, + // isLeaf: 1, + // parent: { + // id: 1, + // name: 1, + // isArticle: 1, + // isLeaf: 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, + // entityId: 1, + // }, + // filter: { + // tag1: { + // $in: ['logo'], + // }, + // }, + // }, + // }, + // sorter: [ + // { + // $attr: { + // $$createAt$$: 1, + // }, + // $direction: 'asc', + // }, + // ], + // } + // ); - const newArticleMenus = articleMenus?.map((ele) => { - return { - ...ele, - logo: this.features.extraFile.getUrl( - ele?.extraFile$entity?.find( - (ele) => ele.tag1 === 'logo' - ) - ), - }; - }); - const newArticles = articles?.map((ele) => ({ - id: ele?.id, - name: ele?.name, - parent: ele?.articleMenuId, - parentId: ele?.articleMenuId, - isArticle: true, - type: 'article', - })); - const arr: any[] = [...newArticleMenus, ...newArticles]; - const rootNodes = arr?.filter((node) => !node.parent); - const treeData = rootNodes?.map((rootNode) => { - return { - label: rootNode.name, - key: rootNode.id?.toString(), - isArticle: rootNode.isArticle, - logo: rootNode?.logo, - children: this.buildTreeData(arr, rootNode.id), - }; - }); - this.setState({ - treeData, - }) - }, + // const newArticleMenus = articleMenus?.map((ele) => { + // return { + // ...ele, + // logo: this.features.extraFile.getUrl( + // ele?.extraFile$entity?.find( + // (ele) => ele.tag1 === 'logo' + // ) + // ), + // }; + // }); + // const newArticles = articles?.map((ele) => ({ + // id: ele?.id, + // name: ele?.name, + // parent: ele?.articleMenuId, + // parentId: ele?.articleMenuId, + // isArticle: true, + // type: 'article', + // })); + // const arr: any[] = [...newArticleMenus, ...newArticles]; + // const rootNodes = arr?.filter((node) => !node.parent); + // const treeData = rootNodes?.map((rootNode) => { + // return { + // label: rootNode.name, + // key: rootNode.id?.toString(), + // isArticle: rootNode.isArticle, + // logo: rootNode?.logo, + // children: this.buildTreeData(arr, rootNode.id), + // }; + // }); + // this.setState({ + // treeData, + // }) + // }, }, data: { selectArticleMenuId: '', @@ -152,8 +209,8 @@ export default OakComponent({ treeData: [] as DataNode[], }, properties: { - entity: '', - entityId: '', + entity: '', + entityId: '', }, actions: ['create', 'update', 'remove'], methods: { @@ -190,10 +247,10 @@ export default OakComponent({ }); }, async gotoArticleUpsert(articleId: string) { - this.setState({ - selectArticleId: articleId, - selectArticleMenuId: '', - }); + this.setState({ + selectArticleId: articleId, + selectArticleMenuId: '', + }); }, gotoEdit(id?: string) { if (id) { diff --git a/src/pages/articleMenu/list/web.module.less b/src/pages/articleMenu/list/web.module.less index da6db28b2..290b8c9c4 100644 --- a/src/pages/articleMenu/list/web.module.less +++ b/src/pages/articleMenu/list/web.module.less @@ -3,26 +3,38 @@ box-shadow: 0 2px 3px #0000001a; border-radius: 3px; padding: 30px 32px; - - .article { + .rightContent { display: flex; - flex-direction: row; - flex: 1; + flex-direction: column; - .menu { - display: flex; - } - - .editor { - display: flex; - flex: 1; - margin-left: 20px; - - .rightContainer { - width: 950px; + .article { + display: flex; + flex-direction: row; + flex: 1; + + .menu { + display: flex; + } + + .editor { + display: flex; + flex: 1; + margin-left: 20px; + + .rightContainer { + // width: 950px; + } + } + + } + .pagination { + display: flex; + align-items: flex-end; + justify-content: center; } } + } @@ -40,4 +52,4 @@ flex: 1; } } -} \ No newline at end of file +} diff --git a/src/pages/articleMenu/list/web.tsx b/src/pages/articleMenu/list/web.tsx index ce63feca2..b04a53873 100644 --- a/src/pages/articleMenu/list/web.tsx +++ b/src/pages/articleMenu/list/web.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect, useCallback } from "react"; -import { Space, Button, Menu, Image, Empty } from 'antd'; +import { Space, Button, Menu, Image, Empty, Pagination } from 'antd'; import classNames from "classnames"; import Style from "./web.module.less"; import { WebComponentProps } from "oak-frontend-base"; @@ -10,11 +10,11 @@ import ArticleMenuCell from '../../../components/articleMenu/cell'; interface DataNode { - label: string; - title: string; - key: string; - isArticle?: boolean; - children?: DataNode[]; + label: string; + title: string; + key: string; + isArticle?: boolean; + children?: DataNode[]; } export default function render( props: WebComponentProps< @@ -29,6 +29,11 @@ export default function render( selectArticleId: string; entity: string; entityId: string; + pagination?: { + pageSize: number; + total: number; + currentPage: number; + }; }, { gotoUpsertById: (id: string) => void; @@ -46,6 +51,7 @@ export default function render( selectArticleId, oakFullpath, oakLegalActions, + oakPagination, } = props.data; const { t, @@ -53,7 +59,10 @@ export default function render( gotoArticleUpsert, onRemoveArticleMenu, gotoEdit, + setCurrentPage, + setPageSize, } = props.methods; + const { pageSize, total, currentPage } = oakPagination || {}; const renderMenuItems = (data: any) => { return data?.map((menuItem: any) => { if (menuItem.children) { @@ -87,7 +96,7 @@ export default function render( { - if (menuItem.type === 'article') { + if (menuItem.type === 'article') { gotoArticleUpsert(e.key); } else { gotoUpsertById(e.key); @@ -115,33 +124,51 @@ export default function render( {treeData?.length === 0 ? ( ) : ( -
-
- - {renderMenuItems(treeData)} - +
+
+
+ + {renderMenuItems(treeData)} + +
+
+ {selectArticleMenuId ? ( + + ) : null} + {selectArticleId ? ( + + ) : null} +
+
-
- {selectArticleMenuId ? ( - + { + setCurrentPage(current); + }} + onShowSizeChange={(pageSize) => { + setPageSize(pageSize); + }} /> - ) : null} - {selectArticleId ? ( - - ) : null} -
+
)}