odjbin/fateverse-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成大致富文本编辑器（因为本地下载引入一直出错，暂时先用云加载）

Browse Source
This commit is contained in:
Lhk0001
2023-11-23 13:24:15 +08:00
parent 95b5604801
commit a6b6c20ffe
2 changed files with 149 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/view/system/notice/publish/index.scss
View File

@@ -58,4 +58,7 @@
height: 20px; height: 20px;
margin-right: 10px; margin-right: 10px;
} }
}
.tox,.tox-tinymce{
width: 700px;
} }

210
src/view/system/notice/publish/index.tsx
View File

@@ -3,7 +3,6 @@ import {
Button, Button,
Input, Input,
Select, Select,
DatePicker,
message, message,
Table, Table,
Tag, Tag,
@@ -16,6 +15,7 @@ import {
Col, Col,
TreeSelect, TreeSelect,
} from "antd"; } from "antd";
import { Editor } from "@tinymce/tinymce-react";
import type { ColumnsType } from "antd/es/table"; import type { ColumnsType } from "antd/es/table";
import { import {
SyncOutlined, SyncOutlined,
@@ -59,7 +59,18 @@ interface TableDataType {
key?: number; key?: number;
total?: number; total?: number;
} }
interface dataType {
senders: string[];
cluster?: string | null;
createBy?: string | null;
contentType?: string | null;
noticeContent: string;
noticeId?: number | null;
noticeTitle?: string | null;
noticeType?: string | null;
sendType?: string | null;
state?: string | null;
}
//当前选择的角色信息 //当前选择的角色信息
interface queryParamsType { interface queryParamsType {
cluster?: string; cluster?: string;
@@ -73,6 +84,32 @@ interface queryParamsType {
} }
let thisrole: any = {}; let thisrole: any = {};
export default function Inform() { export default function Inform() {
const editorInit = {
// selector:'textarea',
min_width: 600,
min_height: 500,
language: "zh_CN",
plugins:
"print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave bdmap indent2em autoresize formatpainter axupimgs",
toolbar:
["code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link | anchor | alignleft aligncenter alignright alignjustify outdent indent | \
styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs"],
importcss_append: true,
//自定义文件选择器的回调内容
// file_picker_callback: function (callback, value, meta) {
// if (meta.filetype === 'file') {
// callback('https://www.baidu.com/img/bd_logo1.png', { text: 'My text' });
// }
// if (meta.filetype === 'image') {
// callback('https://www.baidu.com/img/bd_logo1.png', { alt: 'My alt text' });
// }
// if (meta.filetype === 'media') {
// callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.baidu.com/img/bd_logo1.png' });
// }
// }
};
const { confirm } = Modal; const { confirm } = Modal;
//提示组件 //提示组件
const [messageApi, contextHolder] = message.useMessage(); const [messageApi, contextHolder] = message.useMessage();
@@ -86,7 +123,12 @@ export default function Inform() {
endTime: undefined, endTime: undefined,
}); });
const [thisNotice,setThisNotice]=useState<any>({}) const [thisNotice, setThisNotice] = useState<dataType>({
noticeContent: "",
senders: [],
});
const [allDisplay,setAllDisplay]=useState('block')
//Modal //Modal
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
const [isDetailModalOpen, setIsDetailModalOpen] = useState(false); const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
@@ -103,6 +145,7 @@ export default function Inform() {
//发送对象数据 //发送对象数据
const [senderIds, setSenderIds] = useState<any>(undefined); const [senderIds, setSenderIds] = useState<any>(undefined);
const [editorValue,setEditorValue]=useState('')
//表格数据总条数 //表格数据总条数
let [total, setTotal] = useState<number>(0); let [total, setTotal] = useState<number>(0);
//表格格式 //表格格式
@@ -197,15 +240,27 @@ export default function Inform() {
console.log(value); console.log(value);
if (value === "user") { if (value === "user") {
getUserList(); getUserList();
setAllDisplay('block')
} else if (value === "role") { } else if (value === "role") {
getRolesList(); getRolesList();
setAllDisplay('block')
} else if (value === "dept") { } else if (value === "dept") {
getDeptsList(); getDeptsList();
setAllDisplay('block')
}
else {
setAllDisplay('none')
} }
}; };
const onEditorChange=(Value:string)=>{
setEditorValue(Value)
}
// let thisrole: any = {roleId:'s'}; // let thisrole: any = {roleId:'s'};
const handleDetail = (text:any) => { const handleDetail = (text: any) => {
getData(text.noticeId) getData(text.noticeId);
// console.log(thisNotice.);
setIsDetailModalOpen(true); setIsDetailModalOpen(true);
}; };
const handleDelete = (text: any) => { const handleDelete = (text: any) => {
@@ -240,14 +295,14 @@ export default function Inform() {
}; };
const handleSerach = () => { const handleSerach = () => {
searchValue = formSearch.getFieldsValue(); searchValue = formSearch.getFieldsValue();
setSearchValue(searchValue) setSearchValue(searchValue);
count = 1; count = 1;
setQueryTableDataParams({ ...searchValue }); setQueryTableDataParams({ ...searchValue });
}; };
const handleReset = () => { const handleReset = () => {
formSearch.resetFields(); formSearch.resetFields();
searchValue = formSearch.getFieldsValue(); searchValue = formSearch.getFieldsValue();
setSearchValue(searchValue) setSearchValue(searchValue);
setQueryTableDataParams({ ...searchValue }); setQueryTableDataParams({ ...searchValue });
}; };
//Modal区域 //Modal区域
@@ -256,9 +311,11 @@ export default function Inform() {
.validateFields() .validateFields()
.then((values) => { .then((values) => {
// form.resetFields(); // form.resetFields();
console.log("add", values);
if (modalTitle == "新增公告") { if (modalTitle == "新增公告") {
postAdd({ ...values, cluster: "notice", action: "SEND" }); if(values.sendType==='all') values.senderIds=['0']
console.log(values);
postAdd({ ...values, cluster: "notice", action: "SEND" ,noticeContent:editorValue});
} }
}) })
.catch((info) => { .catch((info) => {
@@ -283,6 +340,8 @@ export default function Inform() {
senderIds: undefined, senderIds: undefined,
contentType: "html", contentType: "html",
}); });
setAllDisplay('block');
setEditorValue('')
setIsModalOpen(true); setIsModalOpen(true);
}; };
const filterOption = ( const filterOption = (
@@ -328,17 +387,16 @@ export default function Inform() {
} }
} catch (error) {} } catch (error) {}
}; };
const getData =async(noticeId:number)=>{ const getData = async (noticeId: number) => {
try { try {
const {data,code}=await getDataAPI(noticeId); const { data, code } = await getDataAPI(noticeId);
if(code===1000){ if (code === 1000) {
setThisNotice({...data}) setThisNotice({ ...data });
} }
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
} };
const getTree = function (tree: any) { const getTree = function (tree: any) {
tree.title = tree.deptName; tree.title = tree.deptName;
tree.value = tree.deptId; tree.value = tree.deptId;
@@ -390,7 +448,6 @@ export default function Inform() {
} }
console.log(data); console.log(data);
setSenderIds([...data]); setSenderIds([...data]);
// setTotal(data.total);
} }
} catch (err: any) { } catch (err: any) {
console.log("555", err); console.log("555", err);
@@ -415,6 +472,7 @@ export default function Inform() {
console.log("555", err); console.log("555", err);
} }
}; };
useEffect(() => { useEffect(() => {
// setQueryParams({...queryParams,...valueSch}) // setQueryParams({...queryParams,...valueSch})
queryTableDataParams = { queryTableDataParams = {
@@ -626,8 +684,8 @@ export default function Inform() {
/> />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={12}> <Col span={12}>{
<Form.Item allDisplay==='block'?<Form.Item
name="senderIds" name="senderIds"
label="发送对象" label="发送对象"
rules={[{ required: true, message: "选择发送对象" }]} rules={[{ required: true, message: "选择发送对象" }]}
@@ -665,26 +723,40 @@ export default function Inform() {
/> />
)} )}
</Form.Item> </Form.Item>
:null
}
</Col> </Col>
</Row> </Row>
<Row>
<Form.Item
name="contentType"
label="内容类型"
rules={[{ required: true, message: "选择发送类型" }]}
>
<Radio.Group>
<Radio defaultChecked={true} value="html">
富文本
</Radio>
<Radio value="text">文本</Radio>
</Radio.Group>
</Form.Item>
</Row>
<Form.Item <Form.Item name="noticeContent" label="公告内容">
name="contentType" <Row>
label="内容类型" <div style={{width:'800px'}}>
rules={[{ required: true, message: "选择发送类型" }]} <Editor
> apiKey="v4zo4n22oanvco29ws5drh0pecuf3gh53clx53cccj3grjwg"
<Radio.Group> initialValue=""
<Radio defaultChecked={true} value="html"> init={editorInit}
富文本 // value={editorValue}
</Radio> onEditorChange={(Value)=>onEditorChange(Value)}
<Radio value="text">文本</Radio> ></Editor>
</Radio.Group> </div>
</Row>
</Form.Item> </Form.Item>
<Form.Item
name="menuIds"
label="菜单权限"
className="collection-create-form_last-form-item"
></Form.Item>
</Form> </Form>
</Modal> </Modal>
<Modal <Modal
@@ -704,57 +776,67 @@ export default function Inform() {
> >
<Row> <Row>
<Col span={8}> <Col span={8}>
<Form.Item <Form.Item
name='noticeTitle' name="noticeTitle"
label='公告标题' label="公告标题"
// initialValue={'ssss'} // initialValue={'ssss'}
> >
<span> {thisNotice.noticeTitle}</span> <span> {thisNotice.noticeTitle}</span>
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={8}> <Col span={8}>
<Form.Item <Form.Item
name='sendType' name="sendType"
label='发送类型' label="发送类型"
// initialValue={'ssss'} // initialValue={'ssss'}
> >
<span> {thisNotice.sendType==='user'?'用户':thisNotice.sendType==='role'?'角色': <span>
thisNotice.sendType==='dept'?'部门':'全发'}</span> {" "}
{thisNotice.sendType === "user"
? "用户"
: thisNotice.sendType === "role"
? "角色"
: thisNotice.sendType === "dept"
? "部门"
: "全发"}
</span>
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={8}> <Col span={8}>
<Form.Item <Form.Item name="sendIds" label="发送对象">
name='sendIds' <span>{thisNotice.senders.join("，")}</span>
label='发送对象'
>
<span></span>
</Form.Item> </Form.Item>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col span={8}> <Col span={8}>
<Form.Item <Form.Item name="noticeType" label="公告类型">
name='noticeType' <span>
label='公告类型' {thisNotice.noticeType === "1" ? (
> <Tag color="processing">通知</Tag>
<span>{thisNotice.noticeType==='1'?<Tag color="processing">通知</Tag>:<Tag color="processing">公告</Tag>}</span> ) : (
<Tag color="processing">公告</Tag>
)}
</span>
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={8}> <Col span={8}>
<Form.Item <Form.Item name="contentType" label="内容类型">
name='contentType' <span>
label='内容类型' {thisNotice.contentType === "html" ? (
> <Tag color="success">富文本</Tag>
<span>{thisNotice.contentType==='html'?<Tag color="success">富文本</Tag>:<Tag>文本</Tag>}</span> ) : (
<Tag>文本</Tag>
)}
</span>
</Form.Item> </Form.Item>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Form.Item <Form.Item name="noticeContent" label="公告内容">
name='noticeContent' <span
label='公告内容' dangerouslySetInnerHTML={{ __html: thisNotice.noticeContent }}
> ></span>
<span dangerouslySetInnerHTML={{ __html: thisNotice.noticeContent }}></span>
</Form.Item> </Form.Item>
</Row> </Row>
</Form> </Form>