201 lines
7.3 KiB
JavaScript
201 lines
7.3 KiB
JavaScript
import { cloneDeep } from "oak-domain/lib/utils/lodash";
|
|
import { generateNewIdAsync } from "oak-domain/lib/utils/uuid";
|
|
import { DATA_SUBSCRIBER_KEYS } from "../../../config/constants";
|
|
export default OakComponent({
|
|
isList: false,
|
|
properties: {
|
|
entity: '',
|
|
entityId: '',
|
|
title: '',
|
|
origin: null, // cos origin默认由系统决定
|
|
menuEmpty: undefined,
|
|
articleEmpty: undefined,
|
|
generateUrl: ((mode, type, id) => { }), //构造文章显示路由
|
|
},
|
|
formData({ data }) {
|
|
return {};
|
|
},
|
|
data: {
|
|
breadcrumbItems: [],
|
|
showAddArticle: false,
|
|
showAddMenu: true,
|
|
parentId: '',
|
|
articleMenuId: '', //非空时展示atricle表格
|
|
unsub: undefined,
|
|
},
|
|
listeners: {
|
|
title(prev, next) {
|
|
if (prev.title !== next.title && next.title) {
|
|
this.setState({
|
|
breadcrumbItems: [{
|
|
id: 'default',
|
|
title: next.title ?? this.t('doc'),
|
|
}]
|
|
});
|
|
}
|
|
},
|
|
// async entityId(prev, next) {
|
|
// if (prev.entityId !== next.entityId) {
|
|
// if (prev.entityId) {
|
|
// const { unsub } = this.state;
|
|
// unsub && unsub();
|
|
// }
|
|
// if (next.entityId) {
|
|
// const unsub = await this.subDataEvents([`${DATA_SUBSCRIBER_KEYS.articleCreate}-${next.entityId}`],
|
|
// async (event: string, opRecords: OpRecord<ED>[]) => {
|
|
// for (const record of opRecords) {
|
|
// if (record.a === 's') {
|
|
// const { articleMenu } = record.d;
|
|
// if (articleMenu) {
|
|
// this.menuCheck();
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
// );
|
|
// this.setState({
|
|
// unsub,
|
|
// })
|
|
// }
|
|
// }
|
|
// }
|
|
},
|
|
lifetimes: {
|
|
async ready() {
|
|
const { title, entityId, } = this.props;
|
|
if (entityId) {
|
|
const unsub = await this.subDataEvents([`${DATA_SUBSCRIBER_KEYS.articleCreate}-${entityId}`, `${DATA_SUBSCRIBER_KEYS.articleMenuUpdate}-${entityId}`], async (event, opRecords) => {
|
|
for (const record of opRecords) {
|
|
if (record.a === 's') {
|
|
const { articleMenu } = record.d;
|
|
const keys = Object.keys(articleMenu);
|
|
const menu = articleMenu[keys[0]];
|
|
if (menu) {
|
|
const { isArticle } = menu;
|
|
this.menuCheck(isArticle);
|
|
}
|
|
}
|
|
else if (record.a === 'update' && record.e === 'articleMenu') {
|
|
const { isArticle } = record.d || {};
|
|
this.menuCheck(!!isArticle);
|
|
}
|
|
}
|
|
});
|
|
this.setState({
|
|
unsub,
|
|
breadcrumbItems: [{
|
|
id: 'default',
|
|
title: title ?? this.t('doc'),
|
|
}]
|
|
});
|
|
}
|
|
else {
|
|
this.setState({
|
|
breadcrumbItems: [{
|
|
id: 'default',
|
|
title: title ?? this.t('doc'),
|
|
}]
|
|
});
|
|
}
|
|
},
|
|
detached() {
|
|
const { unsub } = this.state;
|
|
unsub && unsub();
|
|
},
|
|
},
|
|
methods: {
|
|
onBreadcrumItemClick(id) {
|
|
const { breadcrumbItems } = this.state;
|
|
const idx = breadcrumbItems.findIndex((ele) => ele.id === id);
|
|
const newBreadCrumbItems = cloneDeep(breadcrumbItems).slice(0, idx + 1);
|
|
if (idx === (breadcrumbItems.length - 1)) {
|
|
//点击最后一项无变化
|
|
return;
|
|
}
|
|
else {
|
|
this.setState({
|
|
breadcrumbItems: newBreadCrumbItems,
|
|
parentId: id === 'default' ? '' : id,
|
|
articleMenuId: '',
|
|
showAddArticle: false,
|
|
showAddMenu: true,
|
|
});
|
|
}
|
|
},
|
|
onMenuClick(menuId, menuName, isArticle) {
|
|
const { breadcrumbItems } = this.state;
|
|
const newBreadcrumbItems = cloneDeep(breadcrumbItems);
|
|
newBreadcrumbItems.push({
|
|
id: menuId,
|
|
title: menuName,
|
|
});
|
|
const parentId = isArticle ? '' : menuId;
|
|
const articleMenuId = isArticle ? menuId : '';
|
|
this.setState({
|
|
parentId,
|
|
breadcrumbItems: newBreadcrumbItems,
|
|
showAddArticle: isArticle,
|
|
showAddMenu: !isArticle,
|
|
articleMenuId,
|
|
});
|
|
},
|
|
async onAddMenu(menuName) {
|
|
const { entity, entityId } = this.props;
|
|
const { parentId } = this.state;
|
|
const menuId = await generateNewIdAsync();
|
|
const createData = {
|
|
id: menuId,
|
|
name: menuName,
|
|
entity,
|
|
entityId,
|
|
isArticle: false,
|
|
isLeaf: false,
|
|
...(parentId && parentId !== '' && { parentId })
|
|
};
|
|
try {
|
|
await this.features.cache.operate('articleMenu', {
|
|
id: await generateNewIdAsync(),
|
|
action: 'create',
|
|
data: createData,
|
|
}, {});
|
|
this.setMessage({
|
|
type: 'success',
|
|
content: this.t('success.addmenu')
|
|
});
|
|
this.onMenuClick(menuId, menuName, false);
|
|
return true;
|
|
}
|
|
catch (err) {
|
|
this.setMessage({
|
|
type: 'error',
|
|
content: this.t('fail') + err?.message,
|
|
});
|
|
return false;
|
|
}
|
|
},
|
|
changeAddArticle(show) {
|
|
this.setState({
|
|
showAddArticle: !!show,
|
|
});
|
|
},
|
|
async onAddArticle() {
|
|
const { generateUrl } = this.props;
|
|
const { parentId, articleMenuId } = this.state;
|
|
const id = articleMenuId || parentId;
|
|
const url = generateUrl ? generateUrl('article', 'create', id) : '';
|
|
window.open(url, '_blank');
|
|
},
|
|
menuCheck(isArticle) {
|
|
const menuId = (this.state.articleMenuId && this.state.articleMenuId !== '') ? this.state.articleMenuId : this.state.parentId;
|
|
const parentId = isArticle ? '' : menuId;
|
|
const articleMenuId = isArticle ? menuId : '';
|
|
this.setState({
|
|
parentId,
|
|
showAddArticle: isArticle,
|
|
showAddMenu: !isArticle,
|
|
articleMenuId,
|
|
});
|
|
},
|
|
}
|
|
});
|