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

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

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