Skip to content

W
wisdom-components
Commit 4215a43a authored by 周宏民's avatar 周宏民
Browse files
Options

fix: 富文本组件更新

parent 7a35b967
Hide whitespace changes
Inline Side-by-side
Showing with 275 additions and 201 deletions
packages/base-components/RichText/CHANGELOG.md
View file @ 4215a43a
......@@ -2,11 +2,78 @@
All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [0.2.19](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/richtext@0.2.18...@wisdom-components/richtext@0.2.19) (2022-08-15)
### Bug Fixes
- rich ([7bb8920](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/7bb8920cf4e82df2afb5742024c1c2a26d583baa))
## [0.2.18](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/richtext@0.2.17...@wisdom-components/richtext@0.2.18) (2022-08-15)
### Bug Fixes
- rich ([80b59bb](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/80b59bb5dfeca75b3412ca1ee7cd9edbac03b3ef))
## [0.2.17](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/richtext@0.2.16...@wisdom-components/richtext@0.2.17) (2022-08-15)
### Bug Fixes
- rich ([518de5f](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/518de5f000ea6bd3dc3f5942f66a0bdf73d1f4c7))
- rich ([54fb5db](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/54fb5db071ee98ef9407282da3657d6df8f818e1))
## [0.2.16](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/richtext@0.2.14...@wisdom-components/richtext@0.2.16) (2022-08-15)
### Bug Fixes
- rich ([c648d91](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/c648d913c7f3cc8f4c78d406443b2111fe6537bb))
## [0.2.14](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/richtext@0.2.13...@wisdom-components/richtext@0.2.14) (2022-08-15)
### Bug Fixes
- rich ([50d6197](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/50d6197a421bdb610633019901b5232276a4663e))
## [0.2.13](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/richtext@0.2.12...@wisdom-components/richtext@0.2.13) (2022-08-15)
### Bug Fixes
- 富文件编辑器上传附件对附件名有特殊字段处理 ([b6d4880](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/b6d488032b3f09f8e19469c5a2bbee66fa1b7422))
## [0.2.12](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/richtext@0.2.10...@wisdom-components/richtext@0.2.12) (2022-08-08)
### Bug Fixes
- 富文本组件修改 ([2f10eed](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/2f10eed0f9c9c345d632169b1c142623617ccbc9))
## [0.2.10](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/richtext@0.2.9...@wisdom-components/richtext@0.2.10) (2022-06-27)
### Bug Fixes
- 富文本组件搜索人员出错 ([9a5c9d7](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/9a5c9d786eaece0cffa5bb6478b49d8996111f42))
## [0.2.9](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/richtext@0.2.8...@wisdom-components/richtext@0.2.9) (2022-06-27)
### Bug Fixes
- 文件列表样式修改 ([986b866](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/986b866a509a1b13125a930f30b65e6c59195616))
## [0.2.8](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/richtext@0.2.7...@wisdom-components/richtext@0.2.8) (2022-06-27)
### Bug Fixes
- 富文本组件服务修改 ([5daa86c](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/5daa86ca289b85be6d3d9f2087c653c5609f0c42))
## [0.2.7](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/richtext@0.2.5...@wisdom-components/richtext@0.2.7) (2022-06-27)
### Bug Fixes
- test ([650717c](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/650717ca42144b44c72e4cc43a984353f4e3f0fd))
## [0.2.6](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/richtext@0.2.5...@wisdom-components/richtext@0.2.6) (2022-06-27)
### Bug Fixes
- 修改 ([0f126c9](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/0f126c905fd979137f3594750d43f3fbe247254e))
- test ([650717c](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/650717ca42144b44c72e4cc43a984353f4e3f0fd))
## [0.2.5](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/richtext@0.2.4...@wisdom-components/richtext@0.2.5) (2022-06-27)
......
packages/base-components/RichText/package.json
View file @ 4215a43a
{
"name": "@wisdom-components/richtext",
"version": "0.2.6",
"version": "0.2.19",
"description": "> TODO: description",
"author": "hongmye <1014185119@qq.com>",
"homepage": "",
......
packages/base-components/RichText/src/demos/demo.jsx
View file @ 4215a43a
......@@ -5,89 +5,88 @@
*/
import React from 'react';
import { Button } from 'antd';
import RichText from '../index';
import RichTextShow from '../RichTextShow';
// import { projectManageService } from '@/api';
import styles from './demo.less';
class RichTextDemo extends React.Component {
constructor(props) {
super(props);
this.myRichText = React.createRef();
this.state = {
personList: [
{ userId: 568, userName: '徐乐' },
{ userId: 569, userName: '余苏苏' },
{ userId: 572, userName: '周宏民' },
],
content: '',
fileList: [],
};
}
getData = async () => {
// const res = await projectManageService.GetWorkHourUserList({ projectId: 19 });
// this.setState({
// // personList: res.data || [],
// });
// const arr = [
// {
// name: '工时管理_工时日报 (1).xlsx',
// type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
// size: 8192,
// path:
// '/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles?filePath=b0422fdb-6c63-4b34-8021-b54102236bcb/工时管理_工时日报/(1).xlsx',
// },
// {
// name: '浊度.png',
// type: 'image/png',
// size: 6789,
// path:
// '/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles?filePath=fd00ce06-52c0-410a-bd30-8aed9131a616/浊度.png',
// },
// ];
// // this.setState({ fileList: arr });
// this.myRichText.current && this.myRichText.current.setHtml('');
constructor(props) {
super(props);
this.myRichText = React.createRef();
this.state = {
personList: [
{ userId: 568, userName: '徐乐' },
{ userId: 569, userName: '余苏苏' },
{ userId: 572, userName: '周宏民' },
],
content: '',
fileList: [],
};
}
componentDidMount = () => {
this.getData();
};
getData = async () => {
// const res = await projectManageService.GetWorkHourUserList({ projectId: 19 });
// this.setState({
// // personList: res.data || [],
// });
const arr = [
{
name: '工时管理_工时日报 (1).xlsx',
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
size: 8192,
path: '/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles?filePath=b0422fdb-6c63-4b34-8021-b54102236bcb/工时管理_工时日报/(1).xlsx',
},
{
name: '浊度.png',
type: 'image/png',
size: 6789,
path: '/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles?filePath=fd00ce06-52c0-410a-bd30-8aed9131a616/浊度.png',
},
];
this.setState({ fileList: arr });
// this.myRichText.current && this.myRichText.current.setHtml('');
};
componentDidMount = () => {
this.getData();
};
componentDidUpdate = (propNev, stateNev) => { };
componentDidUpdate = (propNev, stateNev) => {};
componentWillUnmount() {
this.setState = () => { };
}
componentWillUnmount() {
this.setState = () => {};
}
render() {
return (
<div className={styles.RichTextDemo}>
<div className={styles.RichTextDemoContainer}>
<RichText
// content={this.state.content}
personList={this.state.personList}
onChange={val => {
this.setState({ content: val });
}}
onChangeFile={arr => {
this.setState({ fileList: arr });
}}
fileList={this.state.fileList}
projectId={19}
ref={this.myRichText}
/>
</div>
{/* <div className={styles.contentBox}>{this.state.content}</div> */}
<div className={styles.contentBox}>
<RichTextShow content={this.state.content} onClickImg={src => { }} fileList={this.state.fileList} />
</div>
<div className={styles.contentBox}>{this.state.content}</div>
</div>
);
}
render() {
return (
<div className={styles.RichTextDemo}>
<div className={styles.RichTextDemoContainer}>
<RichText
// content={this.state.content}
personList={this.state.personList}
onChange={(val) => {
this.setState({ content: val });
}}
onChangeFile={(arr) => {
this.setState({ fileList: arr });
}}
fileList={this.state.fileList}
projectId={19}
ref={this.myRichText}
/>
</div>
{/* <div className={styles.contentBox}>{this.state.content}</div> */}
{/* <div className={styles.contentBox}>
<RichTextShow
content={this.state.content}
onClickImg={(src) => {}}
fileList={this.state.fileList}
/>
</div> */}
<div className={styles.contentBox}>{this.state.content}</div>
</div>
);
}
}
export default RichTextDemo;
packages/base-components/RichText/src/fileListItem.js
View file @ 4215a43a
......@@ -3,98 +3,99 @@
* @Author: hongmye
* @Date: 2022-03-21 14:44:49
*/
import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
import { FileTwoTone, DeleteOutlined, FileImageTwoTone, DownloadOutlined, PictureOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import { DeleteOutlined, DownloadOutlined, PictureOutlined } from '@ant-design/icons';
import { Button, ConfigProvider } from 'antd';
import { useContext, useEffect, useState } from 'react';
import iconFile from './icon_file.png';
function fileListItem(props) {
const [fileList, setFileList] = useState([]);
const imgType = ['image/png', 'image/jpg', 'image/jpeg'];
const onPreview = item => {
props.onPreview(item);
};
const onDownLoad = item => {
const a = document.createElement('a');
a.setAttribute('download', item.name);
a.setAttribute('href', item.path);
document.documentElement.appendChild(a);
a.target = '_black';
a.click();
};
useEffect(() => {
setFileList(props.list || []);
}, [props.list]);
return (
<>
{fileList.map((item, index) => {
return (
<div key={index} className={'panda-civ-work-upload-list panda-civ-work-upload-list-picture'}>
<div className={'panda-civ-work-upload-list-picture-container'}>
<div className={'panda-civ-work-upload-list-item'}>
<div className={'panda-civ-work-upload-list-item-info'}>
<span className={'panda-civ-work-upload-span'}>
<div
className={
'panda-civ-work-upload-list-item-thumbnail panda-civ-work-upload-list-item-file'
}
>
{/* {imgType.includes(item.type) ? <FileImageTwoTone /> : <FileTwoTone />} */}
<img src={iconFile} />
</div>
<span
className={'panda-civ-work-upload-list-item-name'}
title={item.name}
style={{ cursor: 'pointer' }}
>
{item.name}
</span>
<span className={'panda-civ-work-upload-list-item-card-actions picture'}>
{imgType.includes(item.type) && (
<Button
title="预览"
type="text"
onClick={e => {
e && e.stopPropagation();
onPreview(item);
}}
style={{ padding: '4px 8px' }}
>
<PictureOutlined />
</Button>
)}
<Button
title="下载"
type="text"
onClick={e => {
e && e.stopPropagation();
onDownLoad(item);
}}
style={{ padding: '4px 8px' }}
>
<DownloadOutlined />
</Button>
{props.type === 'edit' && (
<Button
title="删除文件"
type="text"
onClick={e => {
e && e.stopPropagation();
props.onDel(item);
}}
style={{ padding: '4px 8px' }}
>
<DeleteOutlined />
</Button>
)}
</span>
</span>
</div>
</div>
</div>
function FileListItem(props) {
const [fileList, setFileList] = useState([]);
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls();
const imgType = ['image/png', 'image/jpg', 'image/jpeg'];
const onPreview = (item) => {
props.onPreview(item);
};
const onDownLoad = (item) => {
const a = document.createElement('a');
a.setAttribute('download', item.name);
a.setAttribute('href', item.path);
document.documentElement.appendChild(a);
a.target = '_black';
a.click();
};
useEffect(() => {
setFileList(props.list || []);
}, [props.list]);
return (
<>
{fileList.map((item, index) => {
return (
<div key={index} className={`${prefixCls}-upload-list ${prefixCls}-upload-list-picture`}>
<div className={`${prefixCls}-upload-list-picture-container`}>
<div className={`${prefixCls}-upload-list-item`}>
<div className={`${prefixCls}-upload-list-item-info`}>
<span className={`${prefixCls}-upload-span`}>
<div
className={`${prefixCls}-upload-list-item-thumbnail ${prefixCls}-upload-list-item-file`}
>
{/* {imgType.includes(item.type) ? <FileImageTwoTone /> : <FileTwoTone />} */}
<img src={iconFile} />
</div>
);
})}
</>
);
<span
className={`${prefixCls}-upload-list-item-name`}
title={item.name}
style={{ cursor: 'pointer' }}
>
{item.name}
</span>
<span className={`${prefixCls}-upload-list-item-card-actions picture`}>
{imgType.includes(item.type) && (
<Button
title="预览"
type="text"
onClick={(e) => {
e && e.stopPropagation();
onPreview(item);
}}
style={{ padding: '4px 8px' }}
>
<PictureOutlined />
</Button>
)}
<Button
title="下载"
type="text"
onClick={(e) => {
e && e.stopPropagation();
onDownLoad(item);
}}
style={{ padding: '4px 8px' }}
>
<DownloadOutlined />
</Button>
{props.type === 'edit' && (
<Button
title="删除文件"
type="text"
onClick={(e) => {
e && e.stopPropagation();
props.onDel(item);
}}
style={{ padding: '4px 8px' }}
>
<DeleteOutlined />
</Button>
)}
</span>
</span>
</div>
</div>
</div>
</div>
);
})}
</>
);
}
export default fileListItem;
export default FileListItem;
packages/base-components/RichText/src/index.js
View file @ 4215a43a
import { Image, message, Spin } from 'antd';
import classNames from 'classnames';
import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
// import { request } from '@wisdom-utils/utils';
import request from 'umi-request';
import WangEditor from './wangEditor.js';
// import { API } from '@/api/service/workflow';
const API = {};
// import { appWork, projectManageService } from '@/api';
import FileListItem from './fileListItem';
import styles from './index.less';
import WangEditor from './wangEditor.js';
const baseUrl = '';
const API = {
POST_UPLOADERFILES: `${baseUrl}/PandaWorkFlow/WorkFlow/AccountManage/UploaderFiles`,
GET_DOWNLOADFILES: `${baseUrl}/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles`,
GET_GETALLPERSONNELS: `${baseUrl}/PandaInformatization/PandaWork/MeetingTask/GetAllPersonnels`, // 获取人员
GET_WORKHOURUSERLIST: `${baseUrl}/PandaInformatization/PandaWork/ProjectManage/GetWorkHourUserList`, //根据项目id获取项目参与人员
};
let editor = null;
let range;
const selection = window.getSelection();
......@@ -20,7 +24,6 @@ let selectPerson = [];
const RichText = forwardRef((props, ref) => {
const [loading, setLoading] = useState(false);
const [zIndex, setZIndex] = useState(500);
// const [inputValue, setInputValue] = useState('');
const [selectIndex, setSelectIndex] = useState(null);
const [selectList, setSelectList] = useState([]);
const [selectSearchList, setSelectSearchList] = useState([]);
......@@ -30,27 +33,37 @@ const RichText = forwardRef((props, ref) => {
const richTextRef = useRef();
const selectBoxRef = useRef();
const fileInputRef = useRef();
const getData = async () => {
// const { data } = await projectManageService.GetWorkHourUserList({ projectId: props.projectId });
// setSelectList(data);
const getData = () => {
request(API.GET_WORKHOURUSERLIST, {
method: 'get',
params: { projectId: props.projectId },
}).then((res) => {
setSelectList(res.data || []);
});
};
// 获取全部人员信息
const getAllPeople = async () => {
// const res = await appWork.GetAllPersonnels();
// allPeople = res?.data?.data || [];
request(API.GET_GETALLPERSONNELS, {
method: 'get',
params: {},
}).then((res) => {
allPeople = res?.data?.data || [];
});
};
// 图片上传
const uploadImg = (file) => {
const formData = new FormData();
formData.append('file', file);
setLoading(true);
request({
url: API.POST_UPLOADERFILES,
request(API.POST_UPLOADERFILES, {
method: 'POST',
data: formData,
})
.then((res) => {
if (!res.data) return;
if (!res.data) {
setLoading(false);
return;
}
const img = res.data.replace(/[\\ \/=]/g, '/');
const imgHtml = `
<img contenteditable="false" style="display: block;" width="50%" src="${API.GET_DOWNLOADFILES}?filePath=${img}" >
......@@ -92,7 +105,6 @@ const RichText = forwardRef((props, ref) => {
}
editor.menus.extend(menuKey, InsertABCMenu);
}
editor.config = Object.assign(
{},
editor.config,
......@@ -189,7 +201,6 @@ const RichText = forwardRef((props, ref) => {
startOffset = selection.focusOffset;
range.setStart(selection.getRangeAt(0).commonAncestorContainer, selection.focusOffset);
selection.addRange(range);
moveListBox();
// 清空搜索
handleChange('', tempList);
......@@ -208,8 +219,8 @@ const RichText = forwardRef((props, ref) => {
const keyDownEvent = (evet) => {
// 上下方向键
if (evet.key === 'ArrowDown' || evet.key === 'ArrowUp') {
evet.preventDefault();
if (selectBoxRef.current?.style?.display === 'block') {
evet.preventDefault();
const max = selectBoxRef.current.querySelectorAll('.selectItem')?.length || 1000;
let val = selectPersonIndex;
if (evet.key === 'ArrowDown') {
......@@ -228,7 +239,8 @@ const RichText = forwardRef((props, ref) => {
}
if (evet.key === 'Enter') {
// 解决无法回车换行的bug
if (selectBoxRef.current.style.display === 'block' && selectSearchList.length) {
console.log(selectBoxRef.current.style.display === 'block');
if (selectBoxRef.current.style.display === 'block') {
evet.preventDefault();
if (selectPerson[selectPersonIndex]) {
onSelect(selectPerson[selectPersonIndex]);
......@@ -244,7 +256,6 @@ const RichText = forwardRef((props, ref) => {
getAllPeople();
return () => {
richTextRef.current && richTextRef.current.removeEventListener('input', (e) => {});
editor && editor.destroy();
editor = null;
};
......@@ -282,11 +293,7 @@ const RichText = forwardRef((props, ref) => {
tempList = arr;
setSelectSearchList(arr);
}, [selectList, props.personList]);
// useEffect(() => {
// if (!props.projectId) {
// setSelectList(props.personList || []);
// }
// }, [props.personList]);
useEffect(() => {
setFileList(props.fileList);
}, [props.fileList]);
......@@ -323,10 +330,6 @@ const RichText = forwardRef((props, ref) => {
selection.collapseToEnd();
}
};
// const onChange = val => {
// setInputValue(val.currentTarget.value);
// handleChange(val.currentTarget.value);
// };
let timer = null;
const filterList = (val, list) => {
if (!val) {
......@@ -343,6 +346,7 @@ const RichText = forwardRef((props, ref) => {
}
};
const handleChange = (val, list) => {
console.log('🚀 ~ val', val);
if (timer) {
clearTimeout(timer);
}
......@@ -366,12 +370,15 @@ const RichText = forwardRef((props, ref) => {
};
const addFile = (e) => {
if (e.target) {
const file = e.target.files[0];
let file = e.target.files[0];
const pattern =
/[`~!@#$^\-&*()+=|{}':;',\\\[\]\<>\/?~！@#￥……&*（）——|{}【】'；：""'。，、？\s]/g;
let name = file.name.replace(pattern, '');
const renameFile = new File([file], name);
const formData = new FormData();
formData.append('file', file);
formData.append('file', renameFile);
setLoading(true);
request({
url: API.POST_UPLOADERFILES,
request(API.POST_UPLOADERFILES, {
method: 'POST',
data: formData,
})
......@@ -380,7 +387,7 @@ const RichText = forwardRef((props, ref) => {
const arr = [...fileList];
const url = res.data.replace(/[\\ \/=]/g, '/');
arr.unshift({
name: file.name,
name: name,
type: file.type ? file.type.toLowerCase() : '',
size: file.size,
path: `${API.GET_DOWNLOADFILES}?filePath=${url}`,
......@@ -389,7 +396,7 @@ const RichText = forwardRef((props, ref) => {
props.onChangeFile(arr);
setLoading(false);
} else {
message.error(res.msg);
res && message.error(res.msg);
setLoading(false);
}
})
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment