107 lines
3.0 KiB
TypeScript
107 lines
3.0 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;
|
|
}
|
|
|
|
const DEFAULT_STATE = {
|
|
loading: false,
|
|
open: false,
|
|
msgTitle: '',
|
|
msgGroup: '',
|
|
error:''
|
|
}
|
|
export default function ArticleEditModal(props: Props) {
|
|
|
|
const [groups, setGroups] = useState<BlockContent[][]>([]);
|
|
const [title, setTitle] = useState('')
|
|
|
|
const [state, setState] = useSetState({
|
|
...DEFAULT_STATE
|
|
})
|
|
// 保存数据
|
|
const handleSave = () => {
|
|
setState({error: ''})
|
|
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 && props.id > 0 ? props.id : undefined).then(() => {
|
|
props.onClose?.(true)
|
|
}).catch(e=>{
|
|
setState({error: e.data || '保存失败,请重试!'})
|
|
}).finally(() => {
|
|
setState({loading: false})
|
|
});
|
|
}
|
|
useEffect(() => {
|
|
setState({...DEFAULT_STATE})
|
|
if (props.id) {
|
|
if (props.id > 0) {
|
|
article.getById(props.id).then(res => {
|
|
setGroups(res.content_group)
|
|
setTitle(res.title)
|
|
})
|
|
} else {
|
|
// 新增
|
|
setGroups([])
|
|
setTitle('')
|
|
}
|
|
}
|
|
}, [props.id])
|
|
|
|
return (<Modal
|
|
title={'编辑文章'}
|
|
open={!!props.id && props.id >= 0}
|
|
maskClosable={false}
|
|
keyboard={false}
|
|
width={800}
|
|
onCancel={()=>props.onClose?.()}
|
|
okButtonProps={{loading: state.loading}}
|
|
onOk={handleSave}
|
|
okText={props.type == 'news' ? '确定' : '重新生成'}
|
|
>
|
|
<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>
|
|
{state.error && <div className="text-red-500">{state.error}</div>}
|
|
</div>
|
|
</Modal>);
|
|
} |