117 lines
3.6 KiB
TypeScript
117 lines
3.6 KiB
TypeScript
import {Input, Modal} from "antd";
|
||
import ArticleGroup from "@/components/article/group.tsx";
|
||
import {useEffect, useState} from "react";
|
||
import {useSetState} from "ahooks";
|
||
import * as article from "@/service/api/article.ts";
|
||
import {regenerate} from "@/service/api/video.ts";
|
||
|
||
type Props = {
|
||
id?: number;
|
||
type: 'news' | 'video';
|
||
onClose?: (saved?: boolean) => void;
|
||
}
|
||
|
||
export default function ArticleEditModal(props: Props) {
|
||
|
||
const [groups, setGroups] = useState<BlockContent[][]>([]);
|
||
const [title, setTitle] = useState('')
|
||
|
||
const [state, setState] = useSetState({
|
||
loading: false,
|
||
open: false,
|
||
msgTitle: '',
|
||
msgGroup: '',
|
||
})
|
||
// 保存数据
|
||
const handleSave = () => {
|
||
console.log(groups, title)
|
||
if (!title) {
|
||
// setState({msgTitle: '请输入标题内容'});
|
||
return;
|
||
}
|
||
if (groups.length == 0 || groups[0].length == 0 || !groups[0][0].content) {
|
||
// setState({msgGroup: '请输入正文文本内容'});
|
||
return;
|
||
}
|
||
const save = props.type == 'news' ? article.save : regenerate
|
||
setState({loading: true})
|
||
save(title, groups, props.id > 0 ? props.id : undefined).then(() => {
|
||
props.onClose?.(true)
|
||
}).finally(() => {
|
||
setState({loading: false})
|
||
});
|
||
props.onClose?.()
|
||
}
|
||
useEffect(() => {
|
||
if (props.id) {
|
||
if (props.id > 0) {
|
||
if (props.type == 'news') {
|
||
article.getById(props.id).then(res => {
|
||
setGroups(res.content_group)
|
||
setTitle(res.title)
|
||
})
|
||
}
|
||
} else {
|
||
// 新增
|
||
setGroups([
|
||
[{
|
||
type: 'text',
|
||
content: '韩国国会当地时间14日16时举行全体会议，就在野党阵营第二次提出的尹锡悦总统弹劾案进行表决。根据投票结果，有204票赞成，85票反对，3票弃权，8票无效，弹劾案最终获得通过，尹锡悦的总统职务立即停止。'
|
||
}],
|
||
[
|
||
{
|
||
type: 'text',
|
||
content: '韩国宪法法院将在180天内完成弹劾案审判程序。如果宪法法院作出弹劾案不成立的裁决，尹锡悦将立即恢复总统职务；如果宪法法院认可弹劾案成立，尹锡悦将立即被罢免，预计韩国将在明年4月至6月间举行大选。'
|
||
},
|
||
{
|
||
type: 'image',
|
||
content: 'https://zverse-on.oss-cn-shanghai.aliyuncs.com/metahuman/workbench/20241214/193c442df75.jpeg'
|
||
},
|
||
|
||
],
|
||
])
|
||
setTitle('韩国国会通过总统弹劾案 尹锡悦职务立即停止')
|
||
}
|
||
}
|
||
}, [props.id])
|
||
|
||
return (<Modal
|
||
title={'编辑文章'}
|
||
open={props.id >= 0}
|
||
maskClosable={false}
|
||
keyboard={false}
|
||
width={800}
|
||
onCancel={()=>props.onClose?.()}
|
||
okButtonProps={{loading: state.loading}}
|
||
onOk={handleSave}
|
||
>
|
||
<div className="article-title mt-5">
|
||
<div className="title">
|
||
<span className="text text-base">标题</span>
|
||
<span className="require ml-1 font-bold text-red-500">*</span>
|
||
</div>
|
||
<div className="box mt-1">
|
||
<Input rootClassName={state.msgTitle ? 'border-red-500' : ''} value={title} onChange={e => {
|
||
setTitle(e.target.value)
|
||
setState({msgTitle: e.target.value ? '' : '请输入标题内容'})
|
||
}} placeholder={'请输入文章标题'}/>
|
||
</div>
|
||
<div className="text-red-500">{state.msgTitle}</div>
|
||
</div>
|
||
<div className="aricle-body mt-3">
|
||
<div className="title">
|
||
<span className="text text-base">正文</span>
|
||
<span className="require ml-1 font-bold text-red-500">*</span>
|
||
</div>
|
||
<div className="box mt-1">
|
||
<ArticleGroup
|
||
errorMessage={state.msgGroup} editable groups={groups}
|
||
onChange={list => {
|
||
setGroups(() => list)
|
||
setState({msgGroup: (list.length == 0 || list[0].length == 0 || !list[0][0].content) ? '请输入正文文本内容' : ''});
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</Modal>);
|
||
} |