Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
W
wisdom-components
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
ReactWeb5
wisdom-components
Commits
25031145
Commit
25031145
authored
Jul 17, 2024
by
周宏民
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
fix: 富文本编辑器添加参数,修改获取人员接口
parent
f3327222
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
76 additions
and
65 deletions
+76
-65
index.js
packages/base-components/RichText/src/index.js
+76
-65
No files found.
packages/base-components/RichText/src/index.js
View file @
25031145
/**
* 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
}
/Panda
Informatization/PandaWork/MeetingTask/GetAllPersonnels
`
,
// 获取人员
GET_GETALLPERSONNELS
:
`
${
baseUrl
}
/Panda
WorkFlow/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
();
get
UserType
&&
get
AllPeople
();
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
)
=>
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment