import { PageContainer } from '@ant-design/pro-components';
|
import { Button, Input, Form, Card, Row, Col, Space, message } from 'antd';
|
import { useState, useEffect } from 'react';
|
import BraftEditor from '@/components/BraftEditor';
|
import { history, useLocation } from "@umijs/max"
|
import { edit } from './service'
|
import { sendRequest } from '@/utils/antdUtils';
|
|
const AddAndEditAndDetail = () => {
|
|
const [form] = Form.useForm();
|
const [info, setInfo] = useState({ content: '' });
|
const searchParams = new URLSearchParams(useLocation().search);
|
|
useEffect(() => {
|
if (searchParams.get('id')) {
|
edit({ id: searchParams.get('id'), type: 3 }).then((res) => {
|
if (res.code == 200) {
|
setInfo({ content: res.data.answer })
|
form.setFieldsValue(res.data)
|
}
|
})
|
}
|
}, []);
|
|
// 监听富文本的值
|
const braftCallBack = (value) => {
|
let params = info;
|
params.content = value;
|
setInfo(params);
|
};
|
const removeHtmlTags = (str) => {
|
if (str) {
|
return str.replace(/<(?!img\b)[^>]*>/gi, '');
|
}
|
}
|
|
const save = () => {
|
form.validateFields().then(async (values) => {
|
if (!removeHtmlTags(info.content)) {
|
message.warning('请填写资讯内容')
|
return
|
}
|
values.answer = info.content
|
if (searchParams.get('id')) {
|
values.id = searchParams.get('id')
|
values.type = 2
|
let state = await sendRequest(edit, values)
|
if (state) {
|
history.back()
|
}
|
} else {
|
values.type = 1
|
let state = await sendRequest(edit, values)
|
if (state) {
|
history.back()
|
}
|
|
}
|
})
|
}
|
|
return (
|
<PageContainer title={searchParams.get('detail') ? '使用指南详情' : searchParams.get('id') ? '编辑使用指南' : '添加使用指南'}>
|
<Card>
|
<Form scrollToFirstError form={form}>
|
<Row style={{ marginTop: 20 }}>
|
<Col span={8}>
|
<Form.Item
|
name="title"
|
label="问题标题"
|
rules={[{ required: true, message: '请输入问题标题' }]}
|
>
|
<Input disabled={searchParams.get('detail')} placeholder="请输入"></Input>
|
</Form.Item>
|
</Col>
|
</Row>
|
</Form>
|
<Row style={{ marginTop: 20 }}>
|
<Col>
|
<div style={{ display: 'flex' }}>
|
<span style={{ width: 90, flexShrink: 0 }}><span style={{ color: 'red', marginRight: 4 }}>*</span>问题答案：</span>
|
<BraftEditor readOnly={searchParams.get('detail')} data={info.content} resultCallback={braftCallBack} />
|
</div>
|
</Col>
|
</Row>
|
<div style={{ display: 'flex', justifyContent: 'center', marginTop: 20 }}>
|
<Space size='large'>
|
<Button onClick={() => history.back()}>关闭</Button>
|
{
|
!searchParams.get('detail') && <Button type='primary' onClick={save}>保存</Button>
|
}
|
</Space>
|
</div>
|
</Card>
|
</PageContainer>
|
)
|
}
|
|
export default AddAndEditAndDetail
|
