148 lines
4.1 KiB
TypeScript
148 lines
4.1 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
||
import { contentcategoryPage } from '@/services/note/cate';
|
||
|
||
import {
|
||
ProForm,
|
||
ProFormDigit,
|
||
ProFormText,
|
||
ProFormDateTimePicker
|
||
} from '@ant-design/pro-components';
|
||
import { Form, Modal, InputNumber } from 'antd';
|
||
import { useIntl } from '@umijs/max';
|
||
import FilesManager from '@/components/FilesManage/index';
|
||
|
||
import { ContentUtils } from 'braft-utils'
|
||
// 引入编辑器组件
|
||
import BraftEditor from 'braft-editor'
|
||
// 引入编辑器样式
|
||
import 'braft-editor/dist/index.css'
|
||
|
||
const RoleForm: React.FC = (props: any) => {
|
||
const [editorState, setEditorState] = useState(BraftEditor.createEditorState(''))
|
||
const [form] = Form.useForm();
|
||
|
||
const { values } = props;
|
||
|
||
useEffect(() => {
|
||
setEditorState(BraftEditor.createEditorState(values.detail))
|
||
form.resetFields();
|
||
form.setFieldsValue(values);
|
||
}, [form, props]);
|
||
|
||
const intl = useIntl();
|
||
const handleOk = () => {
|
||
form.submit();
|
||
};
|
||
const handleCancel = () => {
|
||
props.onCancel();
|
||
};
|
||
const handleFinish = async (values: any) => {
|
||
values.detail = editorState.toHTML()
|
||
props.onSubmit(values);
|
||
};
|
||
|
||
|
||
const controls = [
|
||
'undo', 'redo', 'separator',
|
||
'font-size', 'line-height', 'letter-spacing', 'separator',
|
||
'text-color', 'bold', 'italic', 'underline', 'strike-through', 'separator',
|
||
'superscript', 'subscript', 'remove-styles', 'emoji', 'separator', 'text-indent', 'text-align', 'separator',
|
||
'headings', 'list-ul', 'list-ol', 'blockquote', 'code', 'separator',
|
||
'link', 'separator', 'hr', 'separator',
|
||
'clear'
|
||
]
|
||
|
||
const onChange = async (e) => {
|
||
const videoExtensions = ['.mp4', '.mkv', '.avi', '.mov', '.wmv', '.flv', '.webm', '.m4v', '.3gp', '.3g2'];
|
||
// 将URL转换为小写，以便进行不区分大小写的比较
|
||
const lowerCaseUrl = e.toLowerCase();
|
||
// 检查链接是否以任何一个视频扩展名结尾
|
||
if (videoExtensions.some(e => lowerCaseUrl.endsWith(e))) {
|
||
setEditorState(ContentUtils.insertMedias(editorState, [{
|
||
type: 'VIDEO',
|
||
url: e
|
||
}]));
|
||
} else {
|
||
setEditorState(ContentUtils.insertMedias(editorState, [{ type: 'IMAGE', url: e, },]))
|
||
}
|
||
}
|
||
|
||
|
||
const extendControls = [
|
||
'separator',
|
||
{
|
||
key: 'FilesManagerImage', // 控件唯一标识，必传
|
||
title: '上传图片/视频', // 指定鼠标悬停提示文案
|
||
html: null, // 指定在按钮中渲染的html字符串
|
||
text: <FilesManager
|
||
fileType="images"
|
||
mode=""
|
||
imagesShow={false}
|
||
onChange={onChange}
|
||
count={1}
|
||
/>, // 指定按钮文字，此处可传入jsx，若已指定html，则text不会显示
|
||
onClick: () => {
|
||
console.log('Hello World!');
|
||
},
|
||
}
|
||
]
|
||
|
||
|
||
return (
|
||
<Modal
|
||
width={800}
|
||
title={'公告管理'}
|
||
open={props.open}
|
||
forceRender
|
||
destroyOnClose
|
||
onOk={handleOk}
|
||
onCancel={handleCancel}
|
||
>
|
||
<ProForm
|
||
form={form}
|
||
submitter={false}
|
||
layout="horizontal"
|
||
onFinish={handleFinish}>
|
||
<ProFormDigit
|
||
name="id"
|
||
label={'ID'}
|
||
disabled
|
||
hidden={true}
|
||
/>
|
||
<ProForm.Group>
|
||
<ProFormText
|
||
name="title"
|
||
label={'标题'}
|
||
placeholder="请输入标题"
|
||
/>
|
||
</ProForm.Group>
|
||
<ProForm.Group>
|
||
<ProFormDateTimePicker
|
||
rules={[{ required: true, message: '请选择' }]}
|
||
name="startTime"
|
||
label="开始日期"
|
||
/>
|
||
<ProFormDateTimePicker
|
||
rules={[{ required: true, message: '请选择' }]}
|
||
name="endTime"
|
||
label="结束日期"
|
||
/>
|
||
</ProForm.Group>
|
||
<ProForm.Group>
|
||
<ProForm.Item
|
||
name="detail"
|
||
>
|
||
<div className="border-solid border-2 border-indigo-600">
|
||
<BraftEditor value={editorState} controls={controls} extendControls={extendControls} onChange={(val) => {
|
||
setEditorState(val)
|
||
}} />
|
||
</div>
|
||
</ProForm.Item>
|
||
</ProForm.Group>
|
||
</ProForm>
|
||
</Modal>
|
||
);
|
||
};
|
||
|
||
export default RoleForm;
|