帮助文档
This commit is contained in:
qsc
parent
a24fca334a
commit
e91507ef7f
|
|
@ -1,4 +1,4 @@
|
||||||
/// <reference types="wechat-miniprogram" />
|
/// <reference types="wechat-miniprogram" />
|
||||||
/// <reference types="react" />
|
/// <reference types="react" />
|
||||||
declare const _default: (props: import("oak-frontend-base").ReactComponentProps<import("../../../general-app-domain").EntityDict, "article", true, WechatMiniprogram.Component.DataOption>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
|
declare const _default: (props: import("oak-frontend-base").ReactComponentProps<import("../../../general-app-domain").EntityDict, "article", false, WechatMiniprogram.Component.DataOption>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
|
||||||
export default _default;
|
export default _default;
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,8 @@
|
||||||
"use strict";
|
"use strict";
|
||||||
Object.defineProperty(exports, "__esModule", { value: true });
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
var tslib_1 = require("tslib");
|
|
||||||
exports.default = OakComponent({
|
exports.default = OakComponent({
|
||||||
entity: 'article',
|
entity: 'article',
|
||||||
isList: true,
|
isList: false,
|
||||||
projection: {
|
projection: {
|
||||||
id: 1,
|
id: 1,
|
||||||
name: 1,
|
name: 1,
|
||||||
|
|
@ -13,28 +12,25 @@ exports.default = OakComponent({
|
||||||
name: 1,
|
name: 1,
|
||||||
isArticle: 1,
|
isArticle: 1,
|
||||||
isLeaf: 1,
|
isLeaf: 1,
|
||||||
}
|
},
|
||||||
|
},
|
||||||
|
formData: function (_a) {
|
||||||
|
var article = _a.data;
|
||||||
|
return {
|
||||||
|
content: article === null || article === void 0 ? void 0 : article.content,
|
||||||
|
name: article === null || article === void 0 ? void 0 : article.name,
|
||||||
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onRemoveArticle: function (id) {
|
copy: function (articleId) {
|
||||||
return tslib_1.__awaiter(this, void 0, void 0, function () {
|
var _this = this;
|
||||||
return tslib_1.__generator(this, function (_a) {
|
var url = "".concat(window.location.host, "/article/preview?oakId=").concat(articleId);
|
||||||
switch (_a.label) {
|
navigator.clipboard.writeText(url).then(function () {
|
||||||
case 0:
|
_this.setMessage({
|
||||||
this.removeItem(id);
|
content: '复制链接成功',
|
||||||
return [4 /*yield*/, this.execute()];
|
type: 'success',
|
||||||
case 1:
|
});
|
||||||
_a.sent();
|
});
|
||||||
return [2 /*return*/];
|
},
|
||||||
}
|
}
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
gotoArticleEdit: function (articleId) {
|
|
||||||
this.navigateTo({
|
|
||||||
url: '/article/upsert',
|
|
||||||
oakId: articleId
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -2,9 +2,11 @@ import '@wangeditor/editor/dist/css/style.css';
|
||||||
import { EntityDict } from '../../../general-app-domain';
|
import { EntityDict } from '../../../general-app-domain';
|
||||||
import { WebComponentProps } from 'oak-frontend-base';
|
import { WebComponentProps } from 'oak-frontend-base';
|
||||||
export default function Render(props: WebComponentProps<EntityDict, 'article', false, {
|
export default function Render(props: WebComponentProps<EntityDict, 'article', false, {
|
||||||
articleId: string;
|
oakId: string;
|
||||||
content: string;
|
content: string;
|
||||||
|
name: string;
|
||||||
}, {
|
}, {
|
||||||
gotoArticleEdit: (articleId: string) => void;
|
gotoArticleEdit: (articleId: string) => void;
|
||||||
onRemoveArticle: (id: string) => void;
|
onRemoveArticle: (id: string) => void;
|
||||||
|
copy: (id: string) => void;
|
||||||
}>): import("react/jsx-runtime").JSX.Element;
|
}>): import("react/jsx-runtime").JSX.Element;
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
Object.defineProperty(exports, "__esModule", { value: true });
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
var tslib_1 = require("tslib");
|
var tslib_1 = require("tslib");
|
||||||
var jsx_runtime_1 = require("react/jsx-runtime");
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
||||||
|
var react_1 = require("react");
|
||||||
var antd_1 = require("antd");
|
var antd_1 = require("antd");
|
||||||
var confirm = antd_1.Modal.confirm;
|
var confirm = antd_1.Modal.confirm;
|
||||||
require("@wangeditor/editor/dist/css/style.css"); // 引入 css
|
require("@wangeditor/editor/dist/css/style.css"); // 引入 css
|
||||||
|
|
@ -9,15 +10,23 @@ var editor_for_react_1 = require("@wangeditor/editor-for-react");
|
||||||
var web_module_less_1 = tslib_1.__importDefault(require("./web.module.less"));
|
var web_module_less_1 = tslib_1.__importDefault(require("./web.module.less"));
|
||||||
function Render(props) {
|
function Render(props) {
|
||||||
var method = props.methods, data = props.data;
|
var method = props.methods, data = props.data;
|
||||||
var _a = props.data, content = _a.content, articleId = _a.articleId;
|
var _a = props.data, content = _a.content, name = _a.name, oakId = _a.oakId;
|
||||||
var t = method.t, onRemoveArticle = method.onRemoveArticle, gotoArticleEdit = method.gotoArticleEdit;
|
var t = method.t, onRemoveArticle = method.onRemoveArticle, gotoArticleEdit = method.gotoArticleEdit, copy = method.copy;
|
||||||
var editorConfig = {
|
var editorConfig = {
|
||||||
readOnly: true,
|
readOnly: true,
|
||||||
autoFocus: true,
|
autoFocus: true,
|
||||||
scroll: false,
|
scroll: false,
|
||||||
};
|
};
|
||||||
return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.rightContainer }, { children: (0, jsx_runtime_1.jsx)(antd_1.Row, { children: (0, jsx_runtime_1.jsx)(antd_1.Col, tslib_1.__assign({ xs: 24, sm: 16 }, { children: (0, jsx_runtime_1.jsx)(antd_1.Form, tslib_1.__assign({ colon: true, labelCol: { span: 4 }, wrapperCol: { span: 20 } }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(antd_1.Form.Item, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(editor_for_react_1.Editor, { defaultConfig: editorConfig, value: content, mode: "default", style: {
|
var _b = tslib_1.__read((0, react_1.useState)(''), 2), value = _b[0], setValue = _b[1];
|
||||||
|
(0, react_1.useEffect)(function () {
|
||||||
|
if (content) {
|
||||||
|
setValue(content);
|
||||||
|
}
|
||||||
|
}, [content]);
|
||||||
|
return ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: web_module_less_1.default.rightContainer }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { display: 'flex', justifyContent: 'flex-end' } }, { children: (0, jsx_runtime_1.jsx)(antd_1.Space, { children: (0, jsx_runtime_1.jsx)(antd_1.Button, tslib_1.__assign({ onClick: function () {
|
||||||
|
copy(oakId);
|
||||||
|
} }, { children: "\u590D\u5236\u94FE\u63A5" })) }) })), (0, jsx_runtime_1.jsx)(antd_1.Row, { children: (0, jsx_runtime_1.jsx)(antd_1.Col, tslib_1.__assign({ xs: 24, sm: 16 }, { children: (0, jsx_runtime_1.jsx)(antd_1.Form, tslib_1.__assign({ colon: true, labelCol: { span: 4 }, wrapperCol: { span: 20 } }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(antd_1.Form.Item, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(editor_for_react_1.Editor, { defaultConfig: editorConfig, value: value, mode: "default", style: {
|
||||||
width: 750
|
width: 750
|
||||||
} }) }) }) }) })) })) }) })));
|
} }) }) }) }) })) })) })] })));
|
||||||
}
|
}
|
||||||
exports.default = Render;
|
exports.default = Render;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
/// <reference types="wechat-miniprogram" />
|
||||||
|
/// <reference types="react" />
|
||||||
|
declare const _default: (props: import("oak-frontend-base").ReactComponentProps<import("../../../general-app-domain").EntityDict, "article", false, WechatMiniprogram.Component.DataOption>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
|
||||||
|
export default _default;
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
"use strict";
|
||||||
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
|
exports.default = OakComponent({
|
||||||
|
entity: 'article',
|
||||||
|
isList: false,
|
||||||
|
projection: {
|
||||||
|
id: 1,
|
||||||
|
name: 1,
|
||||||
|
content: 1,
|
||||||
|
articleMenu: {
|
||||||
|
id: 1,
|
||||||
|
name: 1,
|
||||||
|
isArticle: 1,
|
||||||
|
isLeaf: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
formData: function (_a) {
|
||||||
|
var article = _a.data;
|
||||||
|
return {
|
||||||
|
content: article === null || article === void 0 ? void 0 : article.content,
|
||||||
|
name: article === null || article === void 0 ? void 0 : article.name,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
copy: function (articleId) {
|
||||||
|
var _this = this;
|
||||||
|
var url = "".concat(window.location.host, "/article/preview?oakId=").concat(articleId);
|
||||||
|
navigator.clipboard.writeText(url).then(function () {
|
||||||
|
_this.setMessage({
|
||||||
|
content: '复制链接成功',
|
||||||
|
type: 'success',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
import '@wangeditor/editor/dist/css/style.css';
|
||||||
|
import { EntityDict } from '../../../general-app-domain';
|
||||||
|
import { WebComponentProps } from 'oak-frontend-base';
|
||||||
|
export default function Render(props: WebComponentProps<EntityDict, 'article', false, {
|
||||||
|
oakId: string;
|
||||||
|
content: string;
|
||||||
|
name: string;
|
||||||
|
}, {
|
||||||
|
gotoArticleEdit: (articleId: string) => void;
|
||||||
|
onRemoveArticle: (id: string) => void;
|
||||||
|
copy: (id: string) => void;
|
||||||
|
}>): import("react/jsx-runtime").JSX.Element;
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
"use strict";
|
||||||
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
|
var tslib_1 = require("tslib");
|
||||||
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
||||||
|
var react_1 = require("react");
|
||||||
|
var antd_1 = require("antd");
|
||||||
|
var confirm = antd_1.Modal.confirm;
|
||||||
|
require("@wangeditor/editor/dist/css/style.css"); // 引入 css
|
||||||
|
var editor_for_react_1 = require("@wangeditor/editor-for-react");
|
||||||
|
var web_module_less_1 = tslib_1.__importDefault(require("./web.module.less"));
|
||||||
|
function Render(props) {
|
||||||
|
var method = props.methods, data = props.data;
|
||||||
|
var _a = props.data, content = _a.content, name = _a.name, oakId = _a.oakId;
|
||||||
|
var t = method.t, onRemoveArticle = method.onRemoveArticle, gotoArticleEdit = method.gotoArticleEdit, copy = method.copy;
|
||||||
|
var editorConfig = {
|
||||||
|
readOnly: true,
|
||||||
|
autoFocus: true,
|
||||||
|
scroll: false,
|
||||||
|
};
|
||||||
|
var _b = tslib_1.__read((0, react_1.useState)(''), 2), value = _b[0], setValue = _b[1];
|
||||||
|
(0, react_1.useEffect)(function () {
|
||||||
|
if (content) {
|
||||||
|
setValue(content);
|
||||||
|
}
|
||||||
|
}, [content]);
|
||||||
|
return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.rightContainer }, { children: (0, jsx_runtime_1.jsx)(antd_1.Row, { children: (0, jsx_runtime_1.jsx)(antd_1.Col, tslib_1.__assign({ xs: 24, sm: 16 }, { children: (0, jsx_runtime_1.jsx)(antd_1.Form, tslib_1.__assign({ colon: true, labelCol: { span: 4 }, wrapperCol: { span: 20 } }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(antd_1.Form.Item, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(editor_for_react_1.Editor, { defaultConfig: editorConfig, value: value, mode: "default", style: {
|
||||||
|
width: 750
|
||||||
|
} }) }) }) }) })) })) }) })));
|
||||||
|
}
|
||||||
|
exports.default = Render;
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
.container {
|
||||||
|
width: 950px;
|
||||||
|
}
|
||||||
|
|
@ -16,7 +16,7 @@ function render(props) {
|
||||||
gotoEditByParentId(oakId);
|
gotoEditByParentId(oakId);
|
||||||
} }, { children: "\u6DFB\u52A0\u5B50\u8282\u70B9" }))), (isArticle || !isLeaf) && ((0, jsx_runtime_1.jsx)(antd_1.Button, tslib_1.__assign({ onClick: function () {
|
} }, { children: "\u6DFB\u52A0\u5B50\u8282\u70B9" }))), (isArticle || !isLeaf) && ((0, jsx_runtime_1.jsx)(antd_1.Button, tslib_1.__assign({ onClick: function () {
|
||||||
gotoArticleEditByArticleMenuId(oakId);
|
gotoArticleEditByArticleMenuId(oakId);
|
||||||
} }, { children: "\u6DFB\u52A0\u6587\u7AE0" }))), (0, jsx_runtime_1.jsx)(antd_1.Button, tslib_1.__assign({ type: "link", onClick: function () {
|
} }, { children: "\u6DFB\u52A0\u6587\u7AE0" }))), (isArticle || isLeaf) ? ('') : ((0, jsx_runtime_1.jsx)(antd_1.Button, tslib_1.__assign({ type: "link", onClick: function () {
|
||||||
var modal = antd_1.Modal.confirm({
|
var modal = antd_1.Modal.confirm({
|
||||||
title: '确定删除该文章分类吗？',
|
title: '确定删除该文章分类吗？',
|
||||||
content: '删除后不可恢复',
|
content: '删除后不可恢复',
|
||||||
|
|
@ -27,6 +27,6 @@ function render(props) {
|
||||||
modal.destroy();
|
modal.destroy();
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
} }, { children: "\u5220\u9664" }))] }) }))] })) })));
|
} }, { children: "\u5220\u9664" })))] }) }))] })) })));
|
||||||
}
|
}
|
||||||
exports.default = render;
|
exports.default = render;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
/// <reference types="wechat-miniprogram" />
|
||||||
|
/// <reference types="react" />
|
||||||
|
import { EntityDict } from '../../../general-app-domain';
|
||||||
|
declare const _default: (props: import("oak-frontend-base").ReactComponentProps<EntityDict, "articleMenu", true, WechatMiniprogram.Component.DataOption>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
|
||||||
|
export default _default;
|
||||||
|
|
@ -0,0 +1,486 @@
|
||||||
|
"use strict";
|
||||||
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
|
var tslib_1 = require("tslib");
|
||||||
|
exports.default = OakComponent({
|
||||||
|
entity: 'articleMenu',
|
||||||
|
projection: {
|
||||||
|
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', 'introduce'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
isList: true,
|
||||||
|
formData: function (_a) {
|
||||||
|
var articleMenu = _a.data;
|
||||||
|
return {
|
||||||
|
articleMenu: articleMenu,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
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,
|
||||||
|
content: ele === null || ele === void 0 ? void 0 : ele.content,
|
||||||
|
logo: null,
|
||||||
|
}); });
|
||||||
|
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,
|
||||||
|
title: 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*/];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
selectedArticleId: '',
|
||||||
|
openKeys: [],
|
||||||
|
selectedKeys: [],
|
||||||
|
treeData: [],
|
||||||
|
parentId: '',
|
||||||
|
articleMenuId: '',
|
||||||
|
id: '',
|
||||||
|
name: '',
|
||||||
|
isArticle: false,
|
||||||
|
isChildren: false,
|
||||||
|
logo: '',
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getOpenKeys: function (targetKey, treeData, openKeys) {
|
||||||
|
var _this = this;
|
||||||
|
if (openKeys === void 0) { openKeys = []; }
|
||||||
|
var selectedKeys = [];
|
||||||
|
var toggleOpenKeys = function (nodes, parentOpen) {
|
||||||
|
var e_1, _a;
|
||||||
|
var _loop_1 = function (node) {
|
||||||
|
if (node.key === targetKey) {
|
||||||
|
var isOpen = openKeys.includes(node.key);
|
||||||
|
if (isOpen) {
|
||||||
|
// 当前子菜单已展开，收起当前子菜单及其所有子菜单
|
||||||
|
openKeys = openKeys.filter(function (key) {
|
||||||
|
return key !== node.key &&
|
||||||
|
!key.startsWith("".concat(node.key, "-"));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// 当前子菜单已收起，展开当前子菜单及其所有子菜单
|
||||||
|
openKeys.push(node.key);
|
||||||
|
openKeys.push.apply(openKeys, tslib_1.__spreadArray([], tslib_1.__read(getAllChildKeys(node)), false));
|
||||||
|
var leafNode = findLeafNode(node);
|
||||||
|
if (leafNode) {
|
||||||
|
var parentKeys = getParentKeys(leafNode);
|
||||||
|
selectedKeys.push.apply(selectedKeys, tslib_1.__spreadArray([], tslib_1.__read(parentKeys), false));
|
||||||
|
_this.gotoArticleUpsert(leafNode.key);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 存储第一个没有子节点的节点及其全部父节点到 selectedKeys
|
||||||
|
}
|
||||||
|
else if (node.children) {
|
||||||
|
toggleOpenKeys(node.children, openKeys.includes(node.key) || parentOpen); // 递归处理子菜单的展开和收起
|
||||||
|
}
|
||||||
|
};
|
||||||
|
try {
|
||||||
|
for (var nodes_1 = tslib_1.__values(nodes), nodes_1_1 = nodes_1.next(); !nodes_1_1.done; nodes_1_1 = nodes_1.next()) {
|
||||||
|
var node = nodes_1_1.value;
|
||||||
|
_loop_1(node);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
||||||
|
finally {
|
||||||
|
try {
|
||||||
|
if (nodes_1_1 && !nodes_1_1.done && (_a = nodes_1.return)) _a.call(nodes_1);
|
||||||
|
}
|
||||||
|
finally { if (e_1) throw e_1.error; }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var getAllChildKeys = function (node) {
|
||||||
|
var e_2, _a;
|
||||||
|
var childKeys = [];
|
||||||
|
if (node.children) {
|
||||||
|
try {
|
||||||
|
for (var _b = tslib_1.__values(node.children), _c = _b.next(); !_c.done; _c = _b.next()) {
|
||||||
|
var child = _c.value;
|
||||||
|
childKeys.push(child.key);
|
||||||
|
childKeys.push.apply(childKeys, tslib_1.__spreadArray([], tslib_1.__read(getAllChildKeys(child)), false));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch (e_2_1) { e_2 = { error: e_2_1 }; }
|
||||||
|
finally {
|
||||||
|
try {
|
||||||
|
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
|
||||||
|
}
|
||||||
|
finally { if (e_2) throw e_2.error; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return childKeys;
|
||||||
|
};
|
||||||
|
var findLeafNode = function (node) {
|
||||||
|
var e_3, _a;
|
||||||
|
if (!node.children || node.children.length === 0) {
|
||||||
|
return node;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
for (var _b = tslib_1.__values(node.children), _c = _b.next(); !_c.done; _c = _b.next()) {
|
||||||
|
var child = _c.value;
|
||||||
|
var leafNode = findLeafNode(child);
|
||||||
|
if (leafNode) {
|
||||||
|
return leafNode;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch (e_3_1) { e_3 = { error: e_3_1 }; }
|
||||||
|
finally {
|
||||||
|
try {
|
||||||
|
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
|
||||||
|
}
|
||||||
|
finally { if (e_3) throw e_3.error; }
|
||||||
|
}
|
||||||
|
return undefined;
|
||||||
|
};
|
||||||
|
var getParentKeys = function (node) {
|
||||||
|
var parentKeys = [];
|
||||||
|
var currentNode = node;
|
||||||
|
while (currentNode) {
|
||||||
|
parentKeys.unshift(currentNode.key);
|
||||||
|
currentNode = findParentNode(currentNode);
|
||||||
|
}
|
||||||
|
return parentKeys;
|
||||||
|
};
|
||||||
|
var findParentNode = function (node) {
|
||||||
|
if (!node.parentKey) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
var parentNode = treeData.find(function (ele) { return ele.key === node.parentKey; });
|
||||||
|
return parentNode;
|
||||||
|
};
|
||||||
|
toggleOpenKeys(treeData, false);
|
||||||
|
this.setState({
|
||||||
|
openKeys: tslib_1.__spreadArray([], tslib_1.__read(new Set(openKeys)), false),
|
||||||
|
selectedKeys: tslib_1.__spreadArray([], tslib_1.__read(new Set(selectedKeys)), false), // 去重并更新 selectedKeys
|
||||||
|
});
|
||||||
|
return openKeys;
|
||||||
|
},
|
||||||
|
buildTreeData: function (nodes, parentId) {
|
||||||
|
var e_4, _a;
|
||||||
|
var children = [];
|
||||||
|
try {
|
||||||
|
for (var nodes_2 = tslib_1.__values(nodes), nodes_2_1 = nodes_2.next(); !nodes_2_1.done; nodes_2_1 = nodes_2.next()) {
|
||||||
|
var node = nodes_2_1.value;
|
||||||
|
if (node.parentId === parentId) {
|
||||||
|
var treeNode = {
|
||||||
|
label: node.name,
|
||||||
|
title: node.name,
|
||||||
|
key: node.id.toString(),
|
||||||
|
isArticle: node.isArticle,
|
||||||
|
isLeaf: node.isLeaf,
|
||||||
|
logo: node.logo,
|
||||||
|
};
|
||||||
|
var nestedChildren = this.buildTreeData(nodes, node.id);
|
||||||
|
if (nestedChildren.length > 0) {
|
||||||
|
treeNode.children = nestedChildren;
|
||||||
|
}
|
||||||
|
children.push(treeNode);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch (e_4_1) { e_4 = { error: e_4_1 }; }
|
||||||
|
finally {
|
||||||
|
try {
|
||||||
|
if (nodes_2_1 && !nodes_2_1.done && (_a = nodes_2.return)) _a.call(nodes_2);
|
||||||
|
}
|
||||||
|
finally { if (e_4) throw e_4.error; }
|
||||||
|
}
|
||||||
|
return children;
|
||||||
|
},
|
||||||
|
gotoUpsert: function (parentId) {
|
||||||
|
this.setState({
|
||||||
|
parentId: parentId,
|
||||||
|
id: '',
|
||||||
|
articleMenuId: '',
|
||||||
|
});
|
||||||
|
},
|
||||||
|
gotoUpsertById: function (id) {
|
||||||
|
var _a, _b, _c, _d;
|
||||||
|
return tslib_1.__awaiter(this, void 0, void 0, function () {
|
||||||
|
var articleMenu;
|
||||||
|
return tslib_1.__generator(this, function (_e) {
|
||||||
|
switch (_e.label) {
|
||||||
|
case 0:
|
||||||
|
if (!id) return [3 /*break*/, 2];
|
||||||
|
return [4 /*yield*/, this.features.cache.refresh('articleMenu', {
|
||||||
|
data: {
|
||||||
|
id: 1,
|
||||||
|
name: 1,
|
||||||
|
isArticle: 1,
|
||||||
|
parentId: 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'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
filter: {
|
||||||
|
$or: [
|
||||||
|
{
|
||||||
|
id: id,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
parentId: id,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
})];
|
||||||
|
case 1:
|
||||||
|
articleMenu = (_e.sent()).data;
|
||||||
|
if (articleMenu && (articleMenu === null || articleMenu === void 0 ? void 0 : articleMenu.length) > 1) {
|
||||||
|
this.setState({
|
||||||
|
id: articleMenu[0].id,
|
||||||
|
name: articleMenu[0].name,
|
||||||
|
parentId: '',
|
||||||
|
articleMenuId: '',
|
||||||
|
isArticle: articleMenu[0].isArticle,
|
||||||
|
isChildren: true,
|
||||||
|
logo: this.features.extraFile.getUrl((_b = (_a = articleMenu[0]) === null || _a === void 0 ? void 0 : _a.extraFile$entity) === null || _b === void 0 ? void 0 : _b.find(function (ele) { return ele.tag1 === 'logo'; })),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (articleMenu && (articleMenu === null || articleMenu === void 0 ? void 0 : articleMenu.length) === 1) {
|
||||||
|
this.setState({
|
||||||
|
id: articleMenu[0].id,
|
||||||
|
name: articleMenu[0].name,
|
||||||
|
parentId: '',
|
||||||
|
articleMenuId: '',
|
||||||
|
isArticle: articleMenu[0].isArticle,
|
||||||
|
isChildren: false,
|
||||||
|
logo: this.features.extraFile.getUrl((_d = (_c = articleMenu[0]) === null || _c === void 0 ? void 0 : _c.extraFile$entity) === null || _d === void 0 ? void 0 : _d.find(function (ele) { return ele.tag1 === 'logo'; })),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
_e.label = 2;
|
||||||
|
case 2: return [2 /*return*/];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
gotoArticleUpsert: function (articleId, selectedKeys) {
|
||||||
|
if (selectedKeys === void 0) { selectedKeys = []; }
|
||||||
|
return tslib_1.__awaiter(this, void 0, void 0, function () {
|
||||||
|
return tslib_1.__generator(this, function (_a) {
|
||||||
|
if (selectedKeys.includes(articleId)) {
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.setState({
|
||||||
|
selectedKeys: [articleId],
|
||||||
|
selectedArticleId: articleId,
|
||||||
|
id: '',
|
||||||
|
parentId: '',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return [2 /*return*/];
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
gotoEdit: function (id) {
|
||||||
|
if (id) {
|
||||||
|
this.navigateTo({
|
||||||
|
url: '/articleMenu/upsert',
|
||||||
|
oakId: id,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.navigateTo({
|
||||||
|
url: '/articleMenu/upsert',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
gotoEditByParentId: function (parentId) {
|
||||||
|
this.navigateTo({
|
||||||
|
url: '/articleMenu/upsert',
|
||||||
|
parentId: parentId,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
gotoArticleEdit: function (articleId) {
|
||||||
|
this.navigateTo({
|
||||||
|
url: '/article/upsert',
|
||||||
|
oakId: articleId,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
gotoArticleEditByArticleMenuId: function (articleMenuId) {
|
||||||
|
this.navigateTo({
|
||||||
|
url: '/article/upsert',
|
||||||
|
articleMenuId: articleMenuId,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onRemoveArticleMenu: function (id) {
|
||||||
|
return tslib_1.__awaiter(this, void 0, void 0, function () {
|
||||||
|
return tslib_1.__generator(this, function (_a) {
|
||||||
|
switch (_a.label) {
|
||||||
|
case 0:
|
||||||
|
this.removeItem(id);
|
||||||
|
return [4 /*yield*/, this.execute()];
|
||||||
|
case 1:
|
||||||
|
_a.sent();
|
||||||
|
return [2 /*return*/];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onRemoveArticle: function (id) {
|
||||||
|
return tslib_1.__awaiter(this, void 0, void 0, function () {
|
||||||
|
return tslib_1.__generator(this, function (_a) {
|
||||||
|
switch (_a.label) {
|
||||||
|
case 0:
|
||||||
|
this.removeItem(id);
|
||||||
|
return [4 /*yield*/, this.execute()];
|
||||||
|
case 1:
|
||||||
|
_a.sent();
|
||||||
|
return [2 /*return*/];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
check: function () {
|
||||||
|
return tslib_1.__awaiter(this, void 0, void 0, function () {
|
||||||
|
return tslib_1.__generator(this, function (_a) {
|
||||||
|
switch (_a.label) {
|
||||||
|
case 0:
|
||||||
|
if (!this.state.name) {
|
||||||
|
this.setMessage({
|
||||||
|
type: 'error',
|
||||||
|
content: '请输入文章分类名称',
|
||||||
|
});
|
||||||
|
return [2 /*return*/];
|
||||||
|
}
|
||||||
|
return [4 /*yield*/, this.execute()];
|
||||||
|
case 1:
|
||||||
|
_a.sent();
|
||||||
|
return [2 /*return*/];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
import { WebComponentProps } from "oak-frontend-base";
|
||||||
|
import { EntityDict } from "../../../general-app-domain";
|
||||||
|
interface DataNode {
|
||||||
|
label: string;
|
||||||
|
title: string;
|
||||||
|
key: string;
|
||||||
|
isArticle?: boolean;
|
||||||
|
children?: DataNode[];
|
||||||
|
}
|
||||||
|
export default function render(props: WebComponentProps<EntityDict, "articleMenu", true, {
|
||||||
|
articleMenu: EntityDict["articleMenu"]["Schema"][];
|
||||||
|
articles: EntityDict["article"]["Schema"][];
|
||||||
|
treeData: DataNode[];
|
||||||
|
content: string;
|
||||||
|
arr: {
|
||||||
|
id: string | undefined;
|
||||||
|
name: string | undefined;
|
||||||
|
parent: string | undefined;
|
||||||
|
parentId: string | undefined;
|
||||||
|
isArticle: boolean;
|
||||||
|
isLeaf: boolean;
|
||||||
|
}[];
|
||||||
|
id: string;
|
||||||
|
parentId: string;
|
||||||
|
articleId: string;
|
||||||
|
name: string;
|
||||||
|
isArticle: boolean;
|
||||||
|
isChildren: boolean;
|
||||||
|
logo: string;
|
||||||
|
openKeys: string[];
|
||||||
|
selectedKeys: string[];
|
||||||
|
selectedArticleId: string;
|
||||||
|
}, {
|
||||||
|
gotoUpsert: (id?: string) => void;
|
||||||
|
gotoUpsertById: (id: string) => void;
|
||||||
|
gotoArticleUpsert: (articleId: string, selectedKeys?: string[]) => void;
|
||||||
|
check: () => void;
|
||||||
|
onRemoveArticleMenu: (id: string) => void;
|
||||||
|
gotoEdit: (id?: string) => void;
|
||||||
|
gotoEditByParentId: (parentId: string) => void;
|
||||||
|
gotoArticleEdit: (articleId: string) => void;
|
||||||
|
onRemoveArticle: (id: string) => void;
|
||||||
|
gotoArticleEditByArticleMenuId: (articleMenuId: string) => void;
|
||||||
|
getOpenKeys: (targetKey: string, treeData: DataNode[], openKeys: string[]) => void;
|
||||||
|
}>): import("react/jsx-runtime").JSX.Element;
|
||||||
|
export {};
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
"use strict";
|
||||||
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
|
var tslib_1 = require("tslib");
|
||||||
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
||||||
|
var antd_1 = require("antd");
|
||||||
|
var confirm = antd_1.Modal.confirm;
|
||||||
|
var web_module_less_1 = tslib_1.__importDefault(require("./web.module.less"));
|
||||||
|
var useFeatures_1 = tslib_1.__importDefault(require("../../../hooks/useFeatures"));
|
||||||
|
var detail3_1 = tslib_1.__importDefault(require("../../../components/article/detail3"));
|
||||||
|
var SubMenu = antd_1.Menu.SubMenu;
|
||||||
|
var Sider = antd_1.Layout.Sider;
|
||||||
|
function render(props) {
|
||||||
|
var _a = props.data, arr = _a.arr, treeData = _a.treeData, id = _a.id, parentId = _a.parentId, articleId = _a.articleId, name = _a.name, content = _a.content, oakFullpath = _a.oakFullpath, isArticle = _a.isArticle, isChildren = _a.isChildren, logo = _a.logo, openKeys = _a.openKeys, selectedKeys = _a.selectedKeys, selectedArticleId = _a.selectedArticleId;
|
||||||
|
var _b = props.methods, t = _b.t, gotoUpsert = _b.gotoUpsert, gotoUpsertById = _b.gotoUpsertById, gotoArticleUpsert = _b.gotoArticleUpsert, onRemoveArticleMenu = _b.onRemoveArticleMenu, gotoEdit = _b.gotoEdit, gotoEditByParentId = _b.gotoEditByParentId, gotoArticleEdit = _b.gotoArticleEdit, onRemoveArticle = _b.onRemoveArticle, gotoArticleEditByArticleMenuId = _b.gotoArticleEditByArticleMenuId, getOpenKeys = _b.getOpenKeys;
|
||||||
|
var features = (0, useFeatures_1.default)();
|
||||||
|
var renderMenuItems = function (data) {
|
||||||
|
return data === null || data === void 0 ? void 0 : data.map(function (menuItem) {
|
||||||
|
if (menuItem.children || menuItem.isLeaf) {
|
||||||
|
return ((0, jsx_runtime_1.jsx)(antd_1.Menu.SubMenu, tslib_1.__assign({ icon: menuItem.logo ? ((0, jsx_runtime_1.jsx)(antd_1.Image, { height: 26, width: 26, src: menuItem.logo, preview: false })) : null, title: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { marginLeft: 8 } }, { children: menuItem.title })), onTitleClick: function (e) {
|
||||||
|
getOpenKeys(e.key, treeData, openKeys);
|
||||||
|
} }, { children: renderMenuItems(menuItem.children) }), menuItem.key));
|
||||||
|
}
|
||||||
|
return ((0, jsx_runtime_1.jsx)(antd_1.Menu.Item, tslib_1.__assign({ onClick: function (e) {
|
||||||
|
gotoArticleUpsert(e.key, selectedKeys);
|
||||||
|
} }, { 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 }, { 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 }))] }))) })));
|
||||||
|
}
|
||||||
|
exports.default = render;
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
.container {
|
||||||
|
background: var(--oak-bg-color-container);
|
||||||
|
// box-shadow: 0 2px 3px #0000001a;
|
||||||
|
// border-radius: 3px;
|
||||||
|
// padding: 30px 32px;
|
||||||
|
// min-height: 450px;
|
||||||
|
|
||||||
|
.article {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor {
|
||||||
|
display: flex;
|
||||||
|
margin-left: 20px;
|
||||||
|
|
||||||
|
.rightContainer {
|
||||||
|
width: 950px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.space {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree {
|
||||||
|
:global {
|
||||||
|
.ant-tree-title {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.siderPanel {
|
||||||
|
flex-shrink: 0;
|
||||||
|
height: 100%;
|
||||||
|
// border-right: 1px solid var(--oak-border-color);
|
||||||
|
overflow-y: hidden;
|
||||||
|
overflow-x: hidden;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global {
|
||||||
|
.ant-layout-sider-children {
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.ant-layout-sider-trigger {
|
||||||
|
// text-align: left;
|
||||||
|
// padding-left: 16px;
|
||||||
|
// border-right: 1px solid var(--oak-border-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -133,7 +133,6 @@ exports.default = OakComponent({
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
this.setState({
|
this.setState({
|
||||||
arr: arr,
|
|
||||||
treeData: treeData,
|
treeData: treeData,
|
||||||
});
|
});
|
||||||
return [2 /*return*/];
|
return [2 /*return*/];
|
||||||
|
|
@ -142,6 +141,19 @@ exports.default = OakComponent({
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
data: {
|
||||||
|
selectedArticleId: '',
|
||||||
|
openKeys: [],
|
||||||
|
selectedKeys: [],
|
||||||
|
treeData: [],
|
||||||
|
parentId: '',
|
||||||
|
articleMenuId: '',
|
||||||
|
id: '',
|
||||||
|
name: '',
|
||||||
|
isArticle: false,
|
||||||
|
isChildren: false,
|
||||||
|
logo: '',
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getOpenKeys: function (targetKey, treeData, openKeys) {
|
getOpenKeys: function (targetKey, treeData, openKeys) {
|
||||||
var _this = this;
|
var _this = this;
|
||||||
|
|
@ -374,42 +386,20 @@ exports.default = OakComponent({
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
gotoArticleUpsert: function (articleId, selectedKeys) {
|
gotoArticleUpsert: function (articleId, selectedKeys) {
|
||||||
var _a;
|
|
||||||
if (selectedKeys === void 0) { selectedKeys = []; }
|
if (selectedKeys === void 0) { selectedKeys = []; }
|
||||||
return tslib_1.__awaiter(this, void 0, void 0, function () {
|
return tslib_1.__awaiter(this, void 0, void 0, function () {
|
||||||
var article;
|
return tslib_1.__generator(this, function (_a) {
|
||||||
return tslib_1.__generator(this, function (_b) {
|
if (selectedKeys.includes(articleId)) {
|
||||||
switch (_b.label) {
|
}
|
||||||
case 0:
|
else {
|
||||||
if (!selectedKeys.includes(articleId)) return [3 /*break*/, 1];
|
|
||||||
return [3 /*break*/, 3];
|
|
||||||
case 1:
|
|
||||||
if (!articleId) return [3 /*break*/, 3];
|
|
||||||
return [4 /*yield*/, this.features.cache.refresh('article', {
|
|
||||||
data: {
|
|
||||||
id: 1,
|
|
||||||
name: 1,
|
|
||||||
content: 1,
|
|
||||||
articleMenuId: 1,
|
|
||||||
},
|
|
||||||
filter: {
|
|
||||||
id: articleId,
|
|
||||||
},
|
|
||||||
})];
|
|
||||||
case 2:
|
|
||||||
article = (_b.sent()).data;
|
|
||||||
if (article) {
|
|
||||||
this.setState({
|
this.setState({
|
||||||
selectedKeys: [articleId],
|
selectedKeys: [articleId],
|
||||||
content: (_a = article[0]) === null || _a === void 0 ? void 0 : _a.content,
|
selectedArticleId: articleId,
|
||||||
articleId: articleId,
|
|
||||||
id: '',
|
id: '',
|
||||||
parentId: '',
|
parentId: '',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
_b.label = 3;
|
return [2 /*return*/];
|
||||||
case 3: return [2 /*return*/];
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { WebComponentProps } from 'oak-frontend-base';
|
import { WebComponentProps } from "oak-frontend-base";
|
||||||
import { EntityDict } from '../../../general-app-domain';
|
import { EntityDict } from "../../../general-app-domain";
|
||||||
interface DataNode {
|
interface DataNode {
|
||||||
label: string;
|
label: string;
|
||||||
title: string;
|
title: string;
|
||||||
|
|
@ -7,9 +7,9 @@ interface DataNode {
|
||||||
isArticle?: boolean;
|
isArticle?: boolean;
|
||||||
children?: DataNode[];
|
children?: DataNode[];
|
||||||
}
|
}
|
||||||
export default function render(props: WebComponentProps<EntityDict, 'articleMenu', true, {
|
export default function render(props: WebComponentProps<EntityDict, "articleMenu", true, {
|
||||||
articleMenu: EntityDict['articleMenu']['Schema'][];
|
articleMenu: EntityDict["articleMenu"]["Schema"][];
|
||||||
articles: EntityDict['article']['Schema'][];
|
articles: EntityDict["article"]["Schema"][];
|
||||||
treeData: DataNode[];
|
treeData: DataNode[];
|
||||||
content: string;
|
content: string;
|
||||||
arr: {
|
arr: {
|
||||||
|
|
@ -29,6 +29,7 @@ export default function render(props: WebComponentProps<EntityDict, 'articleMenu
|
||||||
logo: string;
|
logo: string;
|
||||||
openKeys: string[];
|
openKeys: string[];
|
||||||
selectedKeys: string[];
|
selectedKeys: string[];
|
||||||
|
selectedArticleId: string;
|
||||||
}, {
|
}, {
|
||||||
gotoUpsert: (id?: string) => void;
|
gotoUpsert: (id?: string) => void;
|
||||||
gotoUpsertById: (id: string) => void;
|
gotoUpsertById: (id: string) => void;
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ var pageHeader_1 = tslib_1.__importDefault(require("../../../components/common/p
|
||||||
var detail2_1 = tslib_1.__importDefault(require("../../../components/article/detail2"));
|
var detail2_1 = tslib_1.__importDefault(require("../../../components/article/detail2"));
|
||||||
var SubMenu = antd_1.Menu.SubMenu;
|
var SubMenu = antd_1.Menu.SubMenu;
|
||||||
function render(props) {
|
function render(props) {
|
||||||
var _a = props.data, arr = _a.arr, treeData = _a.treeData, id = _a.id, parentId = _a.parentId, articleId = _a.articleId, name = _a.name, content = _a.content, oakFullpath = _a.oakFullpath, isArticle = _a.isArticle, isChildren = _a.isChildren, logo = _a.logo, openKeys = _a.openKeys, selectedKeys = _a.selectedKeys;
|
var _a = props.data, arr = _a.arr, treeData = _a.treeData, id = _a.id, parentId = _a.parentId, articleId = _a.articleId, name = _a.name, content = _a.content, oakFullpath = _a.oakFullpath, isArticle = _a.isArticle, isChildren = _a.isChildren, logo = _a.logo, openKeys = _a.openKeys, selectedKeys = _a.selectedKeys, selectedArticleId = _a.selectedArticleId;
|
||||||
var _b = props.methods, t = _b.t, gotoUpsert = _b.gotoUpsert, gotoUpsertById = _b.gotoUpsertById, gotoArticleUpsert = _b.gotoArticleUpsert, onRemoveArticleMenu = _b.onRemoveArticleMenu, gotoEdit = _b.gotoEdit, gotoEditByParentId = _b.gotoEditByParentId, gotoArticleEdit = _b.gotoArticleEdit, onRemoveArticle = _b.onRemoveArticle, gotoArticleEditByArticleMenuId = _b.gotoArticleEditByArticleMenuId, getOpenKeys = _b.getOpenKeys;
|
var _b = props.methods, t = _b.t, gotoUpsert = _b.gotoUpsert, gotoUpsertById = _b.gotoUpsertById, gotoArticleUpsert = _b.gotoArticleUpsert, onRemoveArticleMenu = _b.onRemoveArticleMenu, gotoEdit = _b.gotoEdit, gotoEditByParentId = _b.gotoEditByParentId, gotoArticleEdit = _b.gotoArticleEdit, onRemoveArticle = _b.onRemoveArticle, gotoArticleEditByArticleMenuId = _b.gotoArticleEditByArticleMenuId, getOpenKeys = _b.getOpenKeys;
|
||||||
var features = (0, useFeatures_1.default)();
|
var features = (0, useFeatures_1.default)();
|
||||||
var renderMenuItems = function (data) {
|
var renderMenuItems = function (data) {
|
||||||
|
|
@ -25,6 +25,6 @@ function render(props) {
|
||||||
} }, { children: menuItem.label }), menuItem.key));
|
} }, { children: menuItem.label }), menuItem.key));
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
return ((0, jsx_runtime_1.jsx)(pageHeader_1.default, tslib_1.__assign({ title: "\u5E2E\u52A9\u6587\u6863" }, { children: (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)(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 }, { children: (articleId === null || articleId === void 0 ? void 0 : articleId.length) > 0 ? ((0, jsx_runtime_1.jsx)(detail2_1.default, { oakAutoUnmount: true, content: content, articleId: articleId, oakPath: "$article-detail-".concat(articleId) })) : null }))] }))) })) })));
|
return ((0, jsx_runtime_1.jsx)(pageHeader_1.default, tslib_1.__assign({ title: "\u5E2E\u52A9\u6587\u6863" }, { children: (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)(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 }, { children: (selectedArticleId === null || selectedArticleId === void 0 ? void 0 : selectedArticleId.length) > 0 ? ((0, jsx_runtime_1.jsx)(detail2_1.default, { oakAutoUnmount: true, oakId: selectedArticleId, oakPath: "$article-detail2-".concat(selectedArticleId) })) : null }))] }))) })) })));
|
||||||
}
|
}
|
||||||
exports.default = render;
|
exports.default = render;
|
||||||
|
|
|
||||||
|
|
@ -9,9 +9,7 @@ exports.default = OakComponent({
|
||||||
content: 1,
|
content: 1,
|
||||||
articleMenu: {
|
articleMenu: {
|
||||||
id: 1,
|
id: 1,
|
||||||
},
|
}
|
||||||
entity: 1,
|
|
||||||
entityId: 1,
|
|
||||||
},
|
},
|
||||||
formData: function (_a) {
|
formData: function (_a) {
|
||||||
var article = _a.data, features = _a.features;
|
var article = _a.data, features = _a.features;
|
||||||
|
|
|
||||||
|
|
@ -73,7 +73,7 @@ exports.default = OakComponent({
|
||||||
})];
|
})];
|
||||||
case 3:
|
case 3:
|
||||||
_b = tslib_1.__read.apply(void 0, [(_c.sent()).data, 1]), articleMenu = _b[0];
|
_b = tslib_1.__read.apply(void 0, [(_c.sent()).data, 1]), articleMenu = _b[0];
|
||||||
if (articleMenuId && !articleMenu.isArticle) {
|
if (articleMenuId) {
|
||||||
this.update({
|
this.update({
|
||||||
articleMenuId: articleMenuId,
|
articleMenuId: articleMenuId,
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,7 @@ var antd_1 = require("antd");
|
||||||
var confirm = antd_1.Modal.confirm;
|
var confirm = antd_1.Modal.confirm;
|
||||||
require("@wangeditor/editor/dist/css/style.css"); // 引入 css
|
require("@wangeditor/editor/dist/css/style.css"); // 引入 css
|
||||||
var editor_for_react_1 = require("@wangeditor/editor-for-react");
|
var editor_for_react_1 = require("@wangeditor/editor-for-react");
|
||||||
|
var pageHeader_1 = tslib_1.__importDefault(require("../../../components/common/pageHeader"));
|
||||||
var web_module_less_1 = tslib_1.__importDefault(require("./web.module.less"));
|
var web_module_less_1 = tslib_1.__importDefault(require("./web.module.less"));
|
||||||
var useFeatures_1 = tslib_1.__importDefault(require("../../../hooks/useFeatures"));
|
var useFeatures_1 = tslib_1.__importDefault(require("../../../hooks/useFeatures"));
|
||||||
var icons_1 = require("@ant-design/icons");
|
var icons_1 = require("@ant-design/icons");
|
||||||
|
|
@ -41,7 +42,7 @@ function Render(props) {
|
||||||
setArticleId(id);
|
setArticleId(id);
|
||||||
}
|
}
|
||||||
}, [id]);
|
}, [id]);
|
||||||
return ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: web_module_less_1.default.container }, { children: [(0, jsx_runtime_1.jsx)(antd_1.Affix, tslib_1.__assign({ offsetTop: 64 }, { children: (0, jsx_runtime_1.jsx)(editor_for_react_1.Toolbar, { editor: editor, defaultConfig: toolbarConfig, mode: "default" }) })), (0, jsx_runtime_1.jsxs)(antd_1.Row, { children: [(0, jsx_runtime_1.jsx)(antd_1.Col, { flex: 4 }), (0, jsx_runtime_1.jsx)(antd_1.Col, tslib_1.__assign({ flex: 16 }, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.content }, { children: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: web_module_less_1.default.editorContainer }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.titleContainer }, { children: (0, jsx_runtime_1.jsx)(antd_1.Input, { onChange: function (e) { return update({ name: e.target.value }); }, value: data.name, placeholder: "请输入文章标题", size: "large", maxLength: 64, suffix: "".concat(tslib_1.__spreadArray([], tslib_1.__read((data.name || "")), false).length, "/64"), className: web_module_less_1.default.titleInput }) })), data.contentTip && ((0, jsx_runtime_1.jsx)(antd_1.Alert, { type: "info", message: t("tips.content"), closable: true, onClose: function () { return method.clearContentTip(); } })), (0, jsx_runtime_1.jsx)(editor_for_react_1.Editor, { defaultConfig: {
|
return ((0, jsx_runtime_1.jsx)(pageHeader_1.default, tslib_1.__assign({ showBack: true, title: "\u6DFB\u52A0\u6587\u7AE0" }, { 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.Affix, tslib_1.__assign({ offsetTop: 64 }, { children: (0, jsx_runtime_1.jsx)(editor_for_react_1.Toolbar, { editor: editor, defaultConfig: toolbarConfig, mode: "default" }) })), (0, jsx_runtime_1.jsxs)(antd_1.Row, { children: [(0, jsx_runtime_1.jsx)(antd_1.Col, { flex: 4 }), (0, jsx_runtime_1.jsx)(antd_1.Col, tslib_1.__assign({ flex: 16 }, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.content }, { children: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: web_module_less_1.default.editorContainer }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.titleContainer }, { children: (0, jsx_runtime_1.jsx)(antd_1.Input, { onChange: function (e) { return update({ name: e.target.value }); }, value: data.name, placeholder: "请输入文章标题", size: "large", maxLength: 64, suffix: "".concat(tslib_1.__spreadArray([], tslib_1.__read((data.name || "")), false).length, "/64"), className: web_module_less_1.default.titleInput }) })), data.contentTip && ((0, jsx_runtime_1.jsx)(antd_1.Alert, { type: "info", message: t("tips.content"), closable: true, onClose: function () { return method.clearContentTip(); } })), (0, jsx_runtime_1.jsx)(editor_for_react_1.Editor, { defaultConfig: {
|
||||||
placeholder: "请输入文章内容...",
|
placeholder: "请输入文章内容...",
|
||||||
MENU_CONF: {
|
MENU_CONF: {
|
||||||
checkImage: customCheckImageFn,
|
checkImage: customCheckImageFn,
|
||||||
|
|
@ -151,6 +152,6 @@ function Render(props) {
|
||||||
check();
|
check();
|
||||||
} }, { children: "\u4FDD\u5B58" })), (0, jsx_runtime_1.jsxs)(antd_1.Button, tslib_1.__assign({ onClick: function () {
|
} }, { children: "\u4FDD\u5B58" })), (0, jsx_runtime_1.jsxs)(antd_1.Button, tslib_1.__assign({ onClick: function () {
|
||||||
gotoPreview(content, data.name);
|
gotoPreview(content, data.name);
|
||||||
} }, { children: [(0, jsx_runtime_1.jsx)(icons_1.EyeOutlined, {}), "\u9884\u89C8"] }))] }) })) })) }))] })) })) })), (0, jsx_runtime_1.jsx)(antd_1.Col, { flex: 4 })] })] })));
|
} }, { children: [(0, jsx_runtime_1.jsx)(icons_1.EyeOutlined, {}), "\u9884\u89C8"] }))] }) })) })) }))] })) })) })), (0, jsx_runtime_1.jsx)(antd_1.Col, { flex: 4 })] })] })) })));
|
||||||
}
|
}
|
||||||
exports.default = Render;
|
exports.default = Render;
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,7 @@ export default OakComponent({
|
||||||
window.open(`/article/preview?oakId=${articleId}`);
|
window.open(`/article/preview?oakId=${articleId}`);
|
||||||
},
|
},
|
||||||
copy(articleId: string) {
|
copy(articleId: string) {
|
||||||
const url = `${window.location.host}/article/preview?oakId=${articleId}`;
|
const url = `${window.location.host}/article/detail?oakId=${articleId}`;
|
||||||
navigator.clipboard.writeText(url).then(() => {
|
navigator.clipboard.writeText(url).then(() => {
|
||||||
this.setMessage({
|
this.setMessage({
|
||||||
content: '复制链接成功',
|
content: '复制链接成功',
|
||||||
|
|
|
||||||
|
|
@ -18,5 +18,15 @@ export default OakComponent({
|
||||||
name: article?.name,
|
name: article?.name,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {}
|
methods: {
|
||||||
|
copy(articleId: string) {
|
||||||
|
const url = `${window.location.host}/article/detail?oakId=${articleId}`;
|
||||||
|
navigator.clipboard.writeText(url).then(() => {
|
||||||
|
this.setMessage({
|
||||||
|
content: '复制链接成功',
|
||||||
|
type: 'success',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -24,15 +24,17 @@ export default function Render(
|
||||||
{
|
{
|
||||||
gotoArticleEdit: (articleId:string) => void;
|
gotoArticleEdit: (articleId:string) => void;
|
||||||
onRemoveArticle: (id:string) => void;
|
onRemoveArticle: (id:string) => void;
|
||||||
|
copy: (id:string) => void;
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
) {
|
) {
|
||||||
const { methods: method, data } = props;
|
const { methods: method, data } = props;
|
||||||
const { content, name } = props.data;
|
const { content, name, oakId } = props.data;
|
||||||
const {
|
const {
|
||||||
t,
|
t,
|
||||||
onRemoveArticle,
|
onRemoveArticle,
|
||||||
gotoArticleEdit,
|
gotoArticleEdit,
|
||||||
|
copy,
|
||||||
} = method;
|
} = method;
|
||||||
const editorConfig: Partial<IEditorConfig> = {
|
const editorConfig: Partial<IEditorConfig> = {
|
||||||
readOnly: true,
|
readOnly: true,
|
||||||
|
|
@ -47,6 +49,17 @@ export default function Render(
|
||||||
},[content])
|
},[content])
|
||||||
return (
|
return (
|
||||||
<div className={Style.rightContainer}>
|
<div className={Style.rightContainer}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||||||
|
<Space>
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
copy(oakId);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
复制链接
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
</div>
|
||||||
<Row>
|
<Row>
|
||||||
<Col xs={24} sm={16}>
|
<Col xs={24} sm={16}>
|
||||||
<Form
|
<Form
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
export default OakComponent({
|
||||||
|
entity: 'article',
|
||||||
|
isList: false,
|
||||||
|
projection: {
|
||||||
|
id: 1,
|
||||||
|
name: 1,
|
||||||
|
content: 1,
|
||||||
|
articleMenu: {
|
||||||
|
id: 1,
|
||||||
|
name: 1,
|
||||||
|
isArticle: 1,
|
||||||
|
isLeaf: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
formData: function ({ data: article }) {
|
||||||
|
return {
|
||||||
|
content: article?.content,
|
||||||
|
name: article?.name,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
copy(articleId: string) {
|
||||||
|
const url = `${window.location.host}/article/preview?oakId=${articleId}`;
|
||||||
|
navigator.clipboard.writeText(url).then(() => {
|
||||||
|
this.setMessage({
|
||||||
|
content: '复制链接成功',
|
||||||
|
type: 'success',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
.container {
|
||||||
|
width: 950px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
import { generateNewId } from 'oak-domain/lib/utils/uuid';
|
||||||
|
import { useState, useRef, useEffect } from 'react';
|
||||||
|
import { Alert, Card, Button, Row, Col, Space, Affix, Input, Form, Modal } from 'antd';
|
||||||
|
const { confirm } = Modal;
|
||||||
|
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
|
||||||
|
import { Editor } from "@wangeditor/editor-for-react";
|
||||||
|
import { IEditorConfig } from "@wangeditor/editor";
|
||||||
|
import OakGallery from '../../extraFile/gallery';
|
||||||
|
import { EntityDict } from '../../../general-app-domain';
|
||||||
|
import { WebComponentProps } from 'oak-frontend-base';
|
||||||
|
import Style from './web.module.less';
|
||||||
|
|
||||||
|
|
||||||
|
export default function Render(
|
||||||
|
props: WebComponentProps<
|
||||||
|
EntityDict,
|
||||||
|
'article',
|
||||||
|
false,
|
||||||
|
{
|
||||||
|
oakId: string;
|
||||||
|
content: string;
|
||||||
|
name: string;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gotoArticleEdit: (articleId:string) => void;
|
||||||
|
onRemoveArticle: (id:string) => void;
|
||||||
|
copy: (id:string) => void;
|
||||||
|
}
|
||||||
|
>
|
||||||
|
) {
|
||||||
|
const { methods: method, data } = props;
|
||||||
|
const { content, name, oakId } = props.data;
|
||||||
|
const {
|
||||||
|
t,
|
||||||
|
onRemoveArticle,
|
||||||
|
gotoArticleEdit,
|
||||||
|
copy,
|
||||||
|
} = method;
|
||||||
|
const editorConfig: Partial<IEditorConfig> = {
|
||||||
|
readOnly: true,
|
||||||
|
autoFocus: true,
|
||||||
|
scroll: false,
|
||||||
|
};
|
||||||
|
const [value, setValue] = useState('');
|
||||||
|
useEffect(() => {
|
||||||
|
if(content) {
|
||||||
|
setValue(content);
|
||||||
|
}
|
||||||
|
},[content])
|
||||||
|
return (
|
||||||
|
<div className={Style.rightContainer}>
|
||||||
|
<Row>
|
||||||
|
<Col xs={24} sm={16}>
|
||||||
|
<Form
|
||||||
|
colon
|
||||||
|
labelCol={{ span: 4 }}
|
||||||
|
wrapperCol={{ span: 20 }}
|
||||||
|
>
|
||||||
|
<>
|
||||||
|
<Form.Item>
|
||||||
|
<>
|
||||||
|
<Editor
|
||||||
|
defaultConfig={editorConfig}
|
||||||
|
value={value}
|
||||||
|
mode="default"
|
||||||
|
style={{
|
||||||
|
width: 750
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
</Form.Item>
|
||||||
|
</>
|
||||||
|
</Form>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
|
||||||
|
|
||||||
|
export default OakComponent({
|
||||||
|
isList: false,
|
||||||
|
entity: 'article',
|
||||||
|
projection: {
|
||||||
|
id: 1,
|
||||||
|
name: 1,
|
||||||
|
content: 1,
|
||||||
|
articleMenu: {
|
||||||
|
id: 1,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
formData: function ({ data: article, features }) {
|
||||||
|
return {
|
||||||
|
id: article?.id,
|
||||||
|
content: article?.content,
|
||||||
|
name: article?.name,
|
||||||
|
// entity: article?.entity,
|
||||||
|
// entityId: article?.entityId,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
// listeners: {
|
||||||
|
// content(prev, next) {
|
||||||
|
// if(this.props.oakId) {
|
||||||
|
|
||||||
|
// } else {
|
||||||
|
// if (prev.content !== next.content) {
|
||||||
|
// const ac = window.document.getElementById('article-content');
|
||||||
|
// if (ac) {
|
||||||
|
// ac.innerHTML = next.content;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
data: {
|
||||||
|
content: '',
|
||||||
|
title: '',
|
||||||
|
author: '',
|
||||||
|
},
|
||||||
|
lifetimes: {
|
||||||
|
// attached() {
|
||||||
|
// const data = this.load('article_html') || '{}';
|
||||||
|
// const data2 = typeof data === 'string' ? JSON.parse(data) : data;
|
||||||
|
// this.setState({
|
||||||
|
// content: data2?.content,
|
||||||
|
// title: data2?.title,
|
||||||
|
// author: data2?.author,
|
||||||
|
// });
|
||||||
|
// },
|
||||||
|
// detached() {
|
||||||
|
// this.save('article_html', '{}');
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
methods: {},
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
.container {
|
||||||
|
background-color: #f3f5f7;
|
||||||
|
padding: 30px 300px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
background-color: #f3f5f7;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editorContainer {
|
||||||
|
// width: 100%;
|
||||||
|
// margin: 30px auto 50px auto;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: var(--oak-bg-color-container);
|
||||||
|
padding: 20px 50px 50px 50px;
|
||||||
|
box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.titleContainer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 5px 0 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.authorContainer {
|
||||||
|
padding: 5px 0 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 32px !important;
|
||||||
|
font-weight: bold !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author {
|
||||||
|
color: var(--oak-text-color-brand);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.abstract {
|
||||||
|
width: 100%;
|
||||||
|
border-top: 1px solid #e8e8e8;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
import React from 'react';
|
||||||
|
import Style from './web.module.less';
|
||||||
|
import { WebComponentProps } from 'oak-frontend-base';
|
||||||
|
import { EntityDict } from '../../../general-app-domain';
|
||||||
|
import { Editor } from "@wangeditor/editor-for-react";
|
||||||
|
import { IEditorConfig } from "@wangeditor/editor";
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
|
||||||
|
export default function Render(
|
||||||
|
props: WebComponentProps<
|
||||||
|
EntityDict,
|
||||||
|
'article',
|
||||||
|
false,
|
||||||
|
{
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
editor: any;
|
||||||
|
title?: string;
|
||||||
|
// author?: string;
|
||||||
|
// abstract?: string;
|
||||||
|
content?: string;
|
||||||
|
html?: string;
|
||||||
|
origin?: string;
|
||||||
|
},
|
||||||
|
{}
|
||||||
|
>
|
||||||
|
) {
|
||||||
|
const { id, name, editor, title, content } = props.data;
|
||||||
|
console.log(title, content)
|
||||||
|
const editorConfig: Partial<IEditorConfig> = {
|
||||||
|
readOnly: true,
|
||||||
|
autoFocus: true,
|
||||||
|
scroll: false,
|
||||||
|
};
|
||||||
|
const [value, setValue] = useState('');
|
||||||
|
useEffect(() => {
|
||||||
|
if(content) {
|
||||||
|
setValue(content)
|
||||||
|
}
|
||||||
|
},[content]);
|
||||||
|
return (
|
||||||
|
<div className={Style.container}>
|
||||||
|
<div className={Style.content}>
|
||||||
|
<div className={Style.editorContainer}>
|
||||||
|
<div className={Style.titleContainer}>
|
||||||
|
<span className={Style.title}>{name}</span>
|
||||||
|
</div>
|
||||||
|
{/* <div className={Style.authorContainer}>
|
||||||
|
<span className={Style.author}>{author}</span>
|
||||||
|
</div> */}
|
||||||
|
<div id="article-content" style={{width:"100%"}}>
|
||||||
|
<Editor
|
||||||
|
defaultConfig={editorConfig}
|
||||||
|
value={value}
|
||||||
|
mode="default"
|
||||||
|
style={{
|
||||||
|
width: '100%'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,439 @@
|
||||||
|
import { EntityDict } from '../../../general-app-domain';
|
||||||
|
interface DataNode {
|
||||||
|
label: string;
|
||||||
|
title: string;
|
||||||
|
key: string;
|
||||||
|
isArticle?: boolean;
|
||||||
|
isLeaf?: boolean;
|
||||||
|
logo?: string;
|
||||||
|
children?: DataNode[];
|
||||||
|
}
|
||||||
|
export default OakComponent({
|
||||||
|
entity: 'articleMenu',
|
||||||
|
projection: {
|
||||||
|
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', 'introduce'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
isList: true,
|
||||||
|
formData({ data: articleMenu }) {
|
||||||
|
return {
|
||||||
|
articleMenu,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
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',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
);
|
||||||
|
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,
|
||||||
|
content: ele?.content,
|
||||||
|
logo: null,
|
||||||
|
}));
|
||||||
|
const arr: any[] = [...newArticleMenus, ...newArticles];
|
||||||
|
const rootNodes = arr?.filter((node) => !node.parent);
|
||||||
|
const treeData = rootNodes?.map((rootNode) => {
|
||||||
|
return {
|
||||||
|
label: rootNode.name,
|
||||||
|
title: rootNode.name,
|
||||||
|
key: rootNode.id?.toString(),
|
||||||
|
isArticle: rootNode.isArticle,
|
||||||
|
logo: rootNode?.logo,
|
||||||
|
children: this.buildTreeData(arr, rootNode.id),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
this.setState({
|
||||||
|
treeData,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
selectedArticleId: '',
|
||||||
|
openKeys: [] as string[],
|
||||||
|
selectedKeys: [] as string[],
|
||||||
|
treeData: [] as DataNode[],
|
||||||
|
parentId: '',
|
||||||
|
articleMenuId: '',
|
||||||
|
id: '',
|
||||||
|
name: '',
|
||||||
|
isArticle: false,
|
||||||
|
isChildren: false,
|
||||||
|
logo: '',
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getOpenKeys(
|
||||||
|
targetKey: string,
|
||||||
|
treeData: DataNode[],
|
||||||
|
openKeys: string[] = []
|
||||||
|
): string[] {
|
||||||
|
const selectedKeys: string[] = [];
|
||||||
|
|
||||||
|
const toggleOpenKeys = (nodes: DataNode[], parentOpen: boolean) => {
|
||||||
|
for (const node of nodes) {
|
||||||
|
if (node.key === targetKey) {
|
||||||
|
const isOpen = openKeys.includes(node.key);
|
||||||
|
|
||||||
|
if (isOpen) {
|
||||||
|
// 当前子菜单已展开，收起当前子菜单及其所有子菜单
|
||||||
|
openKeys = openKeys.filter(
|
||||||
|
(key) =>
|
||||||
|
key !== node.key &&
|
||||||
|
!key.startsWith(`${node.key}-`)
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
// 当前子菜单已收起，展开当前子菜单及其所有子菜单
|
||||||
|
openKeys.push(node.key);
|
||||||
|
openKeys.push(...getAllChildKeys(node));
|
||||||
|
const leafNode = findLeafNode(node);
|
||||||
|
if (leafNode) {
|
||||||
|
const parentKeys = getParentKeys(leafNode);
|
||||||
|
selectedKeys.push(...parentKeys);
|
||||||
|
this.gotoArticleUpsert(leafNode.key);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 存储第一个没有子节点的节点及其全部父节点到 selectedKeys
|
||||||
|
} else if (node.children) {
|
||||||
|
toggleOpenKeys(
|
||||||
|
node.children,
|
||||||
|
openKeys.includes(node.key) || parentOpen
|
||||||
|
); // 递归处理子菜单的展开和收起
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getAllChildKeys = (node: DataNode): string[] => {
|
||||||
|
const childKeys: string[] = [];
|
||||||
|
|
||||||
|
if (node.children) {
|
||||||
|
for (const child of node.children) {
|
||||||
|
childKeys.push(child.key);
|
||||||
|
childKeys.push(...getAllChildKeys(child));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return childKeys;
|
||||||
|
};
|
||||||
|
|
||||||
|
const findLeafNode = (node: DataNode): DataNode | undefined => {
|
||||||
|
if (!node.children || node.children.length === 0) {
|
||||||
|
return node;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const child of node.children) {
|
||||||
|
const leafNode = findLeafNode(child);
|
||||||
|
if (leafNode) {
|
||||||
|
return leafNode;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return undefined;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getParentKeys = (node: DataNode): string[] => {
|
||||||
|
const parentKeys: string[] = [];
|
||||||
|
let currentNode: DataNode | undefined = node;
|
||||||
|
|
||||||
|
while (currentNode) {
|
||||||
|
parentKeys.unshift(currentNode.key);
|
||||||
|
currentNode = findParentNode(currentNode);
|
||||||
|
}
|
||||||
|
|
||||||
|
return parentKeys;
|
||||||
|
};
|
||||||
|
|
||||||
|
const findParentNode = (
|
||||||
|
node: DataNode | any
|
||||||
|
): DataNode | undefined => {
|
||||||
|
if (!node.parentKey) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
const parentNode = treeData.find(
|
||||||
|
(ele) => ele.key === node.parentKey
|
||||||
|
);
|
||||||
|
return parentNode;
|
||||||
|
};
|
||||||
|
|
||||||
|
toggleOpenKeys(treeData, false);
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
openKeys: [...new Set(openKeys)], // 去重并更新 openKeys
|
||||||
|
selectedKeys: [...new Set(selectedKeys)], // 去重并更新 selectedKeys
|
||||||
|
});
|
||||||
|
|
||||||
|
return openKeys;
|
||||||
|
},
|
||||||
|
|
||||||
|
buildTreeData(
|
||||||
|
nodes: EntityDict['articleMenu']['Schema'][] | any[],
|
||||||
|
parentId: string | null
|
||||||
|
): DataNode[] {
|
||||||
|
const children: DataNode[] = [];
|
||||||
|
for (const node of nodes) {
|
||||||
|
if (node.parentId === parentId) {
|
||||||
|
const treeNode: DataNode = {
|
||||||
|
label: node.name,
|
||||||
|
title: node.name,
|
||||||
|
key: node.id.toString(),
|
||||||
|
isArticle: node.isArticle,
|
||||||
|
isLeaf: node.isLeaf,
|
||||||
|
logo: node.logo,
|
||||||
|
};
|
||||||
|
|
||||||
|
const nestedChildren = this.buildTreeData(nodes, node.id);
|
||||||
|
if (nestedChildren.length > 0) {
|
||||||
|
treeNode.children = nestedChildren;
|
||||||
|
}
|
||||||
|
|
||||||
|
children.push(treeNode);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return children;
|
||||||
|
},
|
||||||
|
gotoUpsert(parentId?: string) {
|
||||||
|
this.setState({
|
||||||
|
parentId,
|
||||||
|
id: '',
|
||||||
|
articleMenuId: '',
|
||||||
|
});
|
||||||
|
},
|
||||||
|
async gotoUpsertById(id: string) {
|
||||||
|
if (id) {
|
||||||
|
const { data: articleMenu } = await this.features.cache.refresh(
|
||||||
|
'articleMenu',
|
||||||
|
{
|
||||||
|
data: {
|
||||||
|
id: 1,
|
||||||
|
name: 1,
|
||||||
|
isArticle: 1,
|
||||||
|
parentId: 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'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
filter: {
|
||||||
|
$or: [
|
||||||
|
{
|
||||||
|
id,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
parentId: id,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
if (articleMenu && articleMenu?.length > 1) {
|
||||||
|
this.setState({
|
||||||
|
id: articleMenu[0].id,
|
||||||
|
name: articleMenu[0].name,
|
||||||
|
parentId: '',
|
||||||
|
articleMenuId: '',
|
||||||
|
isArticle: articleMenu[0].isArticle,
|
||||||
|
isChildren: true,
|
||||||
|
logo: this.features.extraFile.getUrl(
|
||||||
|
articleMenu[0]?.extraFile$entity?.find(
|
||||||
|
(ele) => ele.tag1 === 'logo'
|
||||||
|
)
|
||||||
|
),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (articleMenu && articleMenu?.length === 1) {
|
||||||
|
this.setState({
|
||||||
|
id: articleMenu[0].id,
|
||||||
|
name: articleMenu[0].name,
|
||||||
|
parentId: '',
|
||||||
|
articleMenuId: '',
|
||||||
|
isArticle: articleMenu[0].isArticle,
|
||||||
|
isChildren: false,
|
||||||
|
logo: this.features.extraFile.getUrl(
|
||||||
|
articleMenu[0]?.extraFile$entity?.find(
|
||||||
|
(ele) => ele.tag1 === 'logo'
|
||||||
|
)
|
||||||
|
),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async gotoArticleUpsert(
|
||||||
|
articleId: string,
|
||||||
|
selectedKeys: string[] = []
|
||||||
|
) {
|
||||||
|
if (selectedKeys.includes(articleId)) {
|
||||||
|
} else {
|
||||||
|
this.setState({
|
||||||
|
selectedKeys: [articleId],
|
||||||
|
selectedArticleId: articleId,
|
||||||
|
id: '',
|
||||||
|
parentId: '',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
gotoEdit(id?: string) {
|
||||||
|
if (id) {
|
||||||
|
this.navigateTo({
|
||||||
|
url: '/articleMenu/upsert',
|
||||||
|
oakId: id,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.navigateTo({
|
||||||
|
url: '/articleMenu/upsert',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
gotoEditByParentId(parentId?: string) {
|
||||||
|
this.navigateTo({
|
||||||
|
url: '/articleMenu/upsert',
|
||||||
|
parentId,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
gotoArticleEdit(articleId: string) {
|
||||||
|
this.navigateTo({
|
||||||
|
url: '/article/upsert',
|
||||||
|
oakId: articleId,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
gotoArticleEditByArticleMenuId(articleMenuId: string) {
|
||||||
|
this.navigateTo({
|
||||||
|
url: '/article/upsert',
|
||||||
|
articleMenuId,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
async onRemoveArticleMenu(id: string) {
|
||||||
|
this.removeItem(id);
|
||||||
|
await this.execute();
|
||||||
|
},
|
||||||
|
async onRemoveArticle(id: string) {
|
||||||
|
this.removeItem(id);
|
||||||
|
await this.execute();
|
||||||
|
},
|
||||||
|
async check() {
|
||||||
|
if (!this.state.name) {
|
||||||
|
this.setMessage({
|
||||||
|
type: 'error',
|
||||||
|
content: '请输入文章分类名称',
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
await this.execute();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
.container {
|
||||||
|
background: var(--oak-bg-color-container);
|
||||||
|
// box-shadow: 0 2px 3px #0000001a;
|
||||||
|
// border-radius: 3px;
|
||||||
|
// padding: 30px 32px;
|
||||||
|
// min-height: 450px;
|
||||||
|
|
||||||
|
.article {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor {
|
||||||
|
display: flex;
|
||||||
|
margin-left: 20px;
|
||||||
|
|
||||||
|
.rightContainer {
|
||||||
|
width: 950px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.space {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree {
|
||||||
|
:global {
|
||||||
|
.ant-tree-title {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.siderPanel {
|
||||||
|
flex-shrink: 0;
|
||||||
|
height: 100%;
|
||||||
|
// border-right: 1px solid var(--oak-border-color);
|
||||||
|
overflow-y: hidden;
|
||||||
|
overflow-x: hidden;
|
||||||
|
position: fixed;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global {
|
||||||
|
.ant-layout-sider-children {
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.ant-layout-sider-trigger {
|
||||||
|
// text-align: left;
|
||||||
|
// padding-left: 16px;
|
||||||
|
// border-right: 1px solid var(--oak-border-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,190 @@
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
Tree,
|
||||||
|
Row,
|
||||||
|
Col,
|
||||||
|
Space,
|
||||||
|
Button,
|
||||||
|
Menu,
|
||||||
|
Modal,
|
||||||
|
Image,
|
||||||
|
Empty,
|
||||||
|
Layout,
|
||||||
|
} from "antd";
|
||||||
|
const { confirm } = Modal;
|
||||||
|
import type { MenuProps } from "antd";
|
||||||
|
import React, { useState, useEffect, useCallback } from "react";
|
||||||
|
import classNames from "classnames";
|
||||||
|
import Style from "./web.module.less";
|
||||||
|
import { WebComponentProps } from "oak-frontend-base";
|
||||||
|
import { EntityDict } from "../../../general-app-domain";
|
||||||
|
import useFeatures from "../../../hooks/useFeatures";
|
||||||
|
import PageHeader from "../../../components/common/pageHeader";
|
||||||
|
import { Editor } from "@wangeditor/editor-for-react";
|
||||||
|
import { IEditorConfig } from "@wangeditor/editor";
|
||||||
|
import ArticleUpsert from "../../../components/article/detail3";
|
||||||
|
const { SubMenu } = Menu;
|
||||||
|
const { Sider, Content } = Layout;
|
||||||
|
interface DataNode {
|
||||||
|
label: string;
|
||||||
|
title: string;
|
||||||
|
key: string;
|
||||||
|
isArticle?: boolean;
|
||||||
|
children?: DataNode[];
|
||||||
|
}
|
||||||
|
export default function render(
|
||||||
|
props: WebComponentProps<
|
||||||
|
EntityDict,
|
||||||
|
"articleMenu",
|
||||||
|
true,
|
||||||
|
{
|
||||||
|
articleMenu: EntityDict["articleMenu"]["Schema"][];
|
||||||
|
articles: EntityDict["article"]["Schema"][];
|
||||||
|
treeData: DataNode[];
|
||||||
|
content: string;
|
||||||
|
arr: {
|
||||||
|
id: string | undefined;
|
||||||
|
name: string | undefined;
|
||||||
|
parent: string | undefined;
|
||||||
|
parentId: string | undefined;
|
||||||
|
isArticle: boolean;
|
||||||
|
isLeaf: boolean;
|
||||||
|
}[];
|
||||||
|
id: string;
|
||||||
|
parentId: string;
|
||||||
|
articleId: string;
|
||||||
|
name: string;
|
||||||
|
isArticle: boolean;
|
||||||
|
isChildren: boolean;
|
||||||
|
logo: string;
|
||||||
|
openKeys: string[];
|
||||||
|
selectedKeys: string[];
|
||||||
|
selectedArticleId: string;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gotoUpsert: (id?: string) => void;
|
||||||
|
gotoUpsertById: (id: string) => void;
|
||||||
|
gotoArticleUpsert: (articleId: string, selectedKeys?: string[]) => void;
|
||||||
|
check: () => void;
|
||||||
|
onRemoveArticleMenu: (id: string) => void;
|
||||||
|
gotoEdit: (id?: string) => void;
|
||||||
|
gotoEditByParentId: (parentId: string) => void;
|
||||||
|
gotoArticleEdit: (articleId: string) => void;
|
||||||
|
onRemoveArticle: (id: string) => void;
|
||||||
|
gotoArticleEditByArticleMenuId: (articleMenuId: string) => void;
|
||||||
|
getOpenKeys: (
|
||||||
|
targetKey: string,
|
||||||
|
treeData: DataNode[],
|
||||||
|
openKeys: string[]
|
||||||
|
) => void;
|
||||||
|
}
|
||||||
|
>
|
||||||
|
) {
|
||||||
|
const {
|
||||||
|
arr,
|
||||||
|
treeData,
|
||||||
|
id,
|
||||||
|
parentId,
|
||||||
|
articleId,
|
||||||
|
name,
|
||||||
|
content,
|
||||||
|
oakFullpath,
|
||||||
|
isArticle,
|
||||||
|
isChildren,
|
||||||
|
logo,
|
||||||
|
openKeys,
|
||||||
|
selectedKeys,
|
||||||
|
selectedArticleId,
|
||||||
|
} = props.data;
|
||||||
|
const {
|
||||||
|
t,
|
||||||
|
gotoUpsert,
|
||||||
|
gotoUpsertById,
|
||||||
|
gotoArticleUpsert,
|
||||||
|
onRemoveArticleMenu,
|
||||||
|
gotoEdit,
|
||||||
|
gotoEditByParentId,
|
||||||
|
gotoArticleEdit,
|
||||||
|
onRemoveArticle,
|
||||||
|
gotoArticleEditByArticleMenuId,
|
||||||
|
getOpenKeys,
|
||||||
|
} = props.methods;
|
||||||
|
const features = useFeatures();
|
||||||
|
|
||||||
|
const renderMenuItems = (data: any) => {
|
||||||
|
return data?.map((menuItem: any) => {
|
||||||
|
if (menuItem.children || menuItem.isLeaf) {
|
||||||
|
return (
|
||||||
|
<Menu.SubMenu
|
||||||
|
icon={
|
||||||
|
menuItem.logo ? (
|
||||||
|
<Image
|
||||||
|
height={26}
|
||||||
|
width={26}
|
||||||
|
src={menuItem.logo}
|
||||||
|
preview={false}
|
||||||
|
/>
|
||||||
|
) : null
|
||||||
|
}
|
||||||
|
key={menuItem.key}
|
||||||
|
title={<div style={{ marginLeft: 8 }}>{menuItem.title}</div>}
|
||||||
|
onTitleClick={(e) => {
|
||||||
|
getOpenKeys(e.key, treeData, openKeys);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{renderMenuItems(menuItem.children)}
|
||||||
|
</Menu.SubMenu>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<Menu.Item
|
||||||
|
key={menuItem.key}
|
||||||
|
onClick={(e) => {
|
||||||
|
gotoArticleUpsert(e.key, selectedKeys);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{menuItem.label}
|
||||||
|
</Menu.Item>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
|
||||||
|
<div className={Style.container}>
|
||||||
|
{treeData?.length === 0 ? (
|
||||||
|
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
||||||
|
) : (
|
||||||
|
<div className={Style.article}>
|
||||||
|
<div className={Style.menu}>
|
||||||
|
<Sider
|
||||||
|
theme="light"
|
||||||
|
width={256}
|
||||||
|
className={Style.siderPanel}
|
||||||
|
>
|
||||||
|
<Menu
|
||||||
|
openKeys={openKeys}
|
||||||
|
selectedKeys={selectedKeys}
|
||||||
|
style={{ width: 256 }}
|
||||||
|
mode="inline"
|
||||||
|
>
|
||||||
|
{renderMenuItems(treeData)}
|
||||||
|
</Menu>
|
||||||
|
</Sider>
|
||||||
|
</div>
|
||||||
|
<div className={Style.editor} style={{
|
||||||
|
marginLeft: 300
|
||||||
|
}}>
|
||||||
|
{selectedArticleId?.length > 0 ? (
|
||||||
|
<ArticleUpsert
|
||||||
|
oakAutoUnmount={true}
|
||||||
|
oakId={selectedArticleId}
|
||||||
|
oakPath={`$article-detail2-${selectedArticleId}`}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -9,19 +9,19 @@ import {
|
||||||
Modal,
|
Modal,
|
||||||
Image,
|
Image,
|
||||||
Empty,
|
Empty,
|
||||||
} from 'antd';
|
} from "antd";
|
||||||
const { confirm } = Modal;
|
const { confirm } = Modal;
|
||||||
import type { MenuProps } from 'antd';
|
import type { MenuProps } from "antd";
|
||||||
import React, { useState, useEffect, useCallback } from 'react';
|
import React, { useState, useEffect, useCallback } from "react";
|
||||||
import classNames from 'classnames';
|
import classNames from "classnames";
|
||||||
import Style from './web.module.less';
|
import Style from "./web.module.less";
|
||||||
import { WebComponentProps } from 'oak-frontend-base';
|
import { WebComponentProps } from "oak-frontend-base";
|
||||||
import { EntityDict } from '../../../general-app-domain';
|
import { EntityDict } from "../../../general-app-domain";
|
||||||
import useFeatures from '../../../hooks/useFeatures';
|
import useFeatures from "../../../hooks/useFeatures";
|
||||||
import PageHeader from '../../../components/common/pageHeader';
|
import PageHeader from "../../../components/common/pageHeader";
|
||||||
import { Editor } from '@wangeditor/editor-for-react';
|
import { Editor } from "@wangeditor/editor-for-react";
|
||||||
import { IEditorConfig } from '@wangeditor/editor';
|
import { IEditorConfig } from "@wangeditor/editor";
|
||||||
import ArticleUpsert from '../../../components/article/detail2';
|
import ArticleUpsert from "../../../components/article/detail2";
|
||||||
const { SubMenu } = Menu;
|
const { SubMenu } = Menu;
|
||||||
interface DataNode {
|
interface DataNode {
|
||||||
label: string;
|
label: string;
|
||||||
|
|
@ -33,11 +33,11 @@ interface DataNode {
|
||||||
export default function render(
|
export default function render(
|
||||||
props: WebComponentProps<
|
props: WebComponentProps<
|
||||||
EntityDict,
|
EntityDict,
|
||||||
'articleMenu',
|
"articleMenu",
|
||||||
true,
|
true,
|
||||||
{
|
{
|
||||||
articleMenu: EntityDict['articleMenu']['Schema'][];
|
articleMenu: EntityDict["articleMenu"]["Schema"][];
|
||||||
articles: EntityDict['article']['Schema'][];
|
articles: EntityDict["article"]["Schema"][];
|
||||||
treeData: DataNode[];
|
treeData: DataNode[];
|
||||||
content: string;
|
content: string;
|
||||||
arr: {
|
arr: {
|
||||||
|
|
@ -62,10 +62,7 @@ export default function render(
|
||||||
{
|
{
|
||||||
gotoUpsert: (id?: string) => void;
|
gotoUpsert: (id?: string) => void;
|
||||||
gotoUpsertById: (id: string) => void;
|
gotoUpsertById: (id: string) => void;
|
||||||
gotoArticleUpsert: (
|
gotoArticleUpsert: (articleId: string, selectedKeys?: string[]) => void;
|
||||||
articleId: string,
|
|
||||||
selectedKeys?: string[]
|
|
||||||
) => void;
|
|
||||||
check: () => void;
|
check: () => void;
|
||||||
onRemoveArticleMenu: (id: string) => void;
|
onRemoveArticleMenu: (id: string) => void;
|
||||||
gotoEdit: (id?: string) => void;
|
gotoEdit: (id?: string) => void;
|
||||||
|
|
@ -95,7 +92,7 @@ export default function render(
|
||||||
logo,
|
logo,
|
||||||
openKeys,
|
openKeys,
|
||||||
selectedKeys,
|
selectedKeys,
|
||||||
selectedArticleId
|
selectedArticleId,
|
||||||
} = props.data;
|
} = props.data;
|
||||||
const {
|
const {
|
||||||
t,
|
t,
|
||||||
|
|
@ -128,11 +125,7 @@ export default function render(
|
||||||
) : null
|
) : null
|
||||||
}
|
}
|
||||||
key={menuItem.key}
|
key={menuItem.key}
|
||||||
title={
|
title={<div style={{ marginLeft: 8 }}>{menuItem.title}</div>}
|
||||||
<div style={{ marginLeft: 8 }}>
|
|
||||||
{menuItem.title}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
onTitleClick={(e) => {
|
onTitleClick={(e) => {
|
||||||
getOpenKeys(e.key, treeData, openKeys);
|
getOpenKeys(e.key, treeData, openKeys);
|
||||||
}}
|
}}
|
||||||
|
|
|
||||||
|
|
@ -27,6 +27,7 @@ export default function Render(
|
||||||
>
|
>
|
||||||
) {
|
) {
|
||||||
const { id, name, editor, title, content } = props.data;
|
const { id, name, editor, title, content } = props.data;
|
||||||
|
console.log(title, content)
|
||||||
const editorConfig: Partial<IEditorConfig> = {
|
const editorConfig: Partial<IEditorConfig> = {
|
||||||
readOnly: true,
|
readOnly: true,
|
||||||
autoFocus: true,
|
autoFocus: true,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue