Commit 25031145 authored by 周宏民's avatar 周宏民

fix: 富文本编辑器添加参数,修改获取人员接口

parent f3327222
/** /**
* 1.引入组件 import RichText from '@wisdom-components/RichText'; * 1.引入组件 import RichText from '@wisdom-components/RichText'; 示例:<RichText
* 示例:<RichText * content={this.state.content}
content={this.state.content} * personList={this.state.personList}
personList={this.state.personList} * placeholder={'placeholder属性值'}
placeholder={'placeholder属性值'} * onChange={val => {
onChange={val => { * this.setState({ content: val });
this.setState({ content: val }); * }}
}} * onChangeFile={arr => {
onChangeFile={arr => { * this.setState({ fileList: arr });
this.setState({ fileList: arr }); * }}
}} * fileList={this.state.fileList}
fileList={this.state.fileList} * projectId={19}
projectId={19} * ref={this.myRichText}
ref={this.myRichText} * />
/>
* *
* 2.传递方法 onChange 每次更改内容回调 * 2.传递方法 onChange 每次更改内容回调
* *
* 3.传值接收 可选值 projectId 项目id,根据项目id获取项目参与人员, * 3.传值接收 可选值 projectId 项目id,根据项目id获取项目参与人员,
* 可选值 personList 人员列表 示例:[{userId:1,userName:'xxx'}] * 可选值 personList 人员列表 示例:[{userId:1,userName:'xxx'}]
* 可选值 config 框架wangEditor的配置参数 * 可选值 config 框架wangEditor的配置参数
*
* 4.注意事项 projectId和personList只用传一个,projectId优先级高于personList
* content内容如果不是初始有的,可调用setHtml设置内容
* *
* 4.注意事项 projectId和personList只用传一个,projectId优先级高于personList * 2022-03-21新增图片预览,附件上传功能 新增方法:onChangeFile 每次附件更改回调 若不传则不显示附件上传按钮
* content内容如果不是初始有的,可调用setHtml设置内容 * fileList 附件列表 示例:[{name:'xxx.jpg',type:'image/jpg',size:8192,path:'xxxx'}]
* 其中name和path是必传的,type为图片可以预览,其它类型文件直接下载
* *
* 2022-03-21新增图片预览,附件上传功能 * 2022-04-29 修改@人员列表逻辑 personList 传任务相关人员列表(如 创建、负责、跟进人),同时传入projectId,personList
* 新增方法:onChangeFile 每次附件更改回调 若不传则不显示附件上传按钮
* fileList 附件列表 示例:[{name:'xxx.jpg',type:'image/jpg',size:8192,path:'xxxx'}]
* 其中name和path是必传的,type为图片可以预览,其它类型文件直接下载
*
* 2022-04-29 修改@人员列表逻辑
* personList 传任务相关人员列表(如 创建、负责、跟进人),同时传入projectId,personList
* 下拉列表默认显示为任务相关人员,加项目人员(做了去重,任务相关人员在最上面) * 下拉列表默认显示为任务相关人员,加项目人员(做了去重,任务相关人员在最上面)
*
* @搜索时,搜索全部人员 * @搜索时,搜索全部人员
*/ */
...@@ -48,7 +45,7 @@ const baseUrl = ''; ...@@ -48,7 +45,7 @@ const baseUrl = '';
const API = { const API = {
POST_UPLOADERFILES: `${baseUrl}/PandaWorkFlow/WorkFlow/AccountManage/UploaderFiles`, POST_UPLOADERFILES: `${baseUrl}/PandaWorkFlow/WorkFlow/AccountManage/UploaderFiles`,
GET_DOWNLOADFILES: `${baseUrl}/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles`, GET_DOWNLOADFILES: `${baseUrl}/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles`,
GET_GETALLPERSONNELS: `${baseUrl}/PandaInformatization/PandaWork/MeetingTask/GetAllPersonnels`, // 获取人员 GET_GETALLPERSONNELS: `${baseUrl}/PandaWorkFlow/WorkFlow/WorkFlow/GetUserSelector`, // 获取人员
GET_WORKHOURUSERLIST: `${baseUrl}/PandaInformatization/PandaWork/ProjectManage/GetWorkHourUserList`, //根据项目id获取项目参与人员 GET_WORKHOURUSERLIST: `${baseUrl}/PandaInformatization/PandaWork/ProjectManage/GetWorkHourUserList`, //根据项目id获取项目参与人员
}; };
let editor = null; let editor = null;
...@@ -61,6 +58,11 @@ let selectPersonIndex; ...@@ -61,6 +58,11 @@ let selectPersonIndex;
let selectPerson = []; let selectPerson = [];
const RichText = forwardRef((props, ref) => { const RichText = forwardRef((props, ref) => {
const {
getUserType = true, // 是否获取所有人(@搜索用)
showAt = true, // 是否@ 人员
pasteImg = true, // 粘贴图片上传
} = props;
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [zIndex, setZIndex] = useState(500); const [zIndex, setZIndex] = useState(500);
const [selectIndex, setSelectIndex] = useState(null); const [selectIndex, setSelectIndex] = useState(null);
...@@ -86,7 +88,13 @@ const RichText = forwardRef((props, ref) => { ...@@ -86,7 +88,13 @@ const RichText = forwardRef((props, ref) => {
method: 'get', method: 'get',
params: {}, params: {},
}).then((res) => { }).then((res) => {
allPeople = res?.data?.data || []; let list = res?.data?.dropdownList || [];
allPeople = list.map((l) => {
l.name = l.userName;
l.id = l.userID;
l.port = '';
return l;
});
}); });
}; };
// 图片上传 // 图片上传
...@@ -208,41 +216,48 @@ const RichText = forwardRef((props, ref) => { ...@@ -208,41 +216,48 @@ const RichText = forwardRef((props, ref) => {
}); });
editor.txt.eventHooks.imgClickEvents.push((e) => {}); editor.txt.eventHooks.imgClickEvents.push((e) => {});
// 粘贴图片上传 if (pasteImg) {
editor.txt.eventHooks.pasteEvents.push((e) => { // 粘贴图片上传
const file = e?.clipboardData?.items[0]?.getAsFile() || null; editor.txt.eventHooks.pasteEvents.push((e) => {
if (!file) return; const file = e?.clipboardData?.items[0]?.getAsFile() || null;
uploadImg(file); if (!file) return;
}); uploadImg(file);
});
}
editor.create(); editor.create();
editor.txt.html(props.content || ''); editor.txt.html(props.content || '');
richTextRef.current.onkeydown = keyDownEvent; richTextRef.current.onkeydown = keyDownEvent;
richTextRef.current.addEventListener('input', (e) => { if (showAt) {
if (range) { richTextRef.current.addEventListener('input', (e) => {
// 判断节点是否在选区及光标是否在@后面 if (range) {
const type = selection.containsNode(selection.getRangeAt(0).commonAncestorContainer, false); // 判断节点是否在选区及光标是否在@后面
if (!type || startOffset > selection.focusOffset) { const type = selection.containsNode(
selection.getRangeAt(0).commonAncestorContainer,
false,
);
if (!type || startOffset > selection.focusOffset) {
closeList();
return;
}
range.setEnd(selection.getRangeAt(0).commonAncestorContainer, selection.focusOffset);
const str = range.toString() || '';
moveListBox();
handleChange(str, tempList);
}
if (e.data !== '@') return;
if (range) {
closeList(); closeList();
return;
} }
range.setEnd(selection.getRangeAt(0).commonAncestorContainer, selection.focusOffset); range = document.createRange();
const str = range.toString() || ''; startOffset = selection.focusOffset;
range.setStart(selection.getRangeAt(0).commonAncestorContainer, selection.focusOffset);
selection.addRange(range);
moveListBox(); moveListBox();
handleChange(str, tempList); // 清空搜索
} handleChange('', tempList);
if (e.data !== '@') return; });
if (range) { }
closeList();
}
range = document.createRange();
startOffset = selection.focusOffset;
range.setStart(selection.getRangeAt(0).commonAncestorContainer, selection.focusOffset);
selection.addRange(range);
moveListBox();
// 清空搜索
handleChange('', tempList);
});
}; };
// 跟据光标位置移动下拉框 // 跟据光标位置移动下拉框
const moveListBox = () => { const moveListBox = () => {
...@@ -290,7 +305,7 @@ const RichText = forwardRef((props, ref) => { ...@@ -290,7 +305,7 @@ const RichText = forwardRef((props, ref) => {
useEffect(() => { useEffect(() => {
richTextRef.current && richTextRef.current.removeEventListener('input', (e) => {}); richTextRef.current && richTextRef.current.removeEventListener('input', (e) => {});
init(); init();
getAllPeople(); getUserType && getAllPeople();
return () => { return () => {
richTextRef.current && richTextRef.current.removeEventListener('input', (e) => {}); richTextRef.current && richTextRef.current.removeEventListener('input', (e) => {});
editor && editor.destroy(); editor && editor.destroy();
...@@ -392,11 +407,7 @@ const RichText = forwardRef((props, ref) => { ...@@ -392,11 +407,7 @@ const RichText = forwardRef((props, ref) => {
}, 200); }, 200);
// filterList(val, list); // filterList(val, list);
}; };
/** /** 根据字符串模糊搜索返回符合条件的数据 name 搜索字符串 array 检索json数组 */
* 根据字符串模糊搜索返回符合条件的数据
* name 搜索字符串
* array 检索json数组
*/
const getArrayByName = (name, array) => { const getArrayByName = (name, array) => {
const result = []; const result = [];
array.forEach((i) => { array.forEach((i) => {
......
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