单元格评论
表格单元格评论插件。使用评论来与他人沟通协作,同时还能在评论中 @ 人或文件,将评论内容指定给特定联系人。
构造函数
用法
const editor = new window.shimo.sdk.sheet.Editor() const comment = new window.shimo.sdk.sheet.plugins.Comment({ editor, guid: file.guid, container: (this.refs.smSpreadsheet as any).querySelector('.sm-comment'), currentUser: shimo.user, usePollingInsteadOfSocket: { interval: 1000 }, queryCommentOptions: { url: `${shimo.entrypoint}/files/${file.guid}/comments?accessToken=${shimo.token}&_legacy=1`, }, deleteCommentOptions: { url: `${shimo.entrypoint}/files/${file.guid}/comments/{comment-id}?accessToken=${shimo.token}&_legacy=1`, }, closeCommentOptions: { url: `${shimo.entrypoint}/files/${file.guid}/comments/close/{selectionGuid}?accessToken=${shimo.token}&_legacy=1`, }, createCommentOptions: { url: `${shimo.entrypoint}/files/${file.guid}/comments?accessToken=${shimo.token}&_legacy=1`, }, fetchLocaleSync: (locale) => { // 插件默认会将翻译资源打包在代码中,放在 window.shimo.sdk.sheet.plugins.CommentLocaleResources,也可以自己提供翻译资源 return window.shimo.sdk.sheet.plugins.CommentLocaleResources[locale] } })
参数
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
options.editor | Editor | 必选 | 编辑器实例 |
options.guid | String | 必选 | file 的 guid |
options.container | HTMLElement | 必选 | 评论插件宿主容器 |
options.currentUser | Object | 必选 | 当前用户信息 |
options.currentFileId | number | 可选 | 当前 file id ,用于 mention 模块 |
options.usePollingInsteadOfSocket | Object | 可选 | 使用轮询而不是 socket 来更新评论列表 |
options.usePollingInsteadOfSocket.interval | Number | 必选 | 轮询更新评论列表时间间隔 |
options.queryCommentOptions | Object | 必选 | 加载评论列表配置 |
options.queryCommentOptions.url | Object | 必选 | 加载评论列表 api url |
options.queryCommentOptions.method | GET | 可选 | 加载评论列表 api method |
options.deleteCommentOptions | Object | 必选 | 删除评论配置。{comment-id} 会被替换成评论的 id |
options.deleteCommentOptions.url | String | 必选 | 删除评论 api url |
options.deleteCommentOptions.method | POST | 可选 | 删除评论 api method |
options.closeCommentOptions | Object | 必选 | 结束评论配置 {selectionGuid} 会被替换成评论的 guid |
options.closeCommentOptions.url | String | 必选 | 结束评论 api url |
options.closeCommentOptions.method | POST | 可选 | 结束评论 api method |
options.createCommentOptions | Object | 必选 | 新建评论配置 |
options.createCommentOptions.url | String | 必选 | 新建评论 api url |
options.createCommentOptions.method | POST | 可选 | 新建评论 api method |
options.fetchLocaleSync | Function | 可选 | 获取翻译资源的方式,默认使用插件内部提供的翻译资源 |
- 初始化时机
建议放在editor.render()之前
方法列表
query
获取表格内评论列表. 将触发 loadComments 事件
- 返回
Promise
- 用法
comment.commentModel.query()
comment.commentModel.on('loadComments', (commentList) => {})
- 参数 无
start
开始单元格评论,给单元格添加评论框, 将触发 startComment 事件
- 返回
result: {
message: 'message'
type: 'success' | 'error'
}
- 用法
comment.commentModel.start({
sheet: editor.spread.getActiveSheet().gcSheet,
row: 0,
col: 0
})
comment.commentModel.on('startComment', ({
cell: {row, col},
commentList, // 当前评论列表
cellComment // 当前单元格评论
}) => {})
- 参数
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
sheet | gcSheet | 必选 | 开始评论的表格 |
row | Number | 必选 | 单元格所在行 |
col | Number | 必选 | 单元格所在列 |
create
添加单元格评论
- 返回
Promise
- 用法
const commentId = comment.commentModel.genCommentId()
comment.commentModel.create({
comment: {
selection_guid: 'comment-8aQPn06tRflVNoMR',
selectionGuid: 'comment-8aQPn06tRflVNoMR',
comment_guid: commentId,
commentGuid: commentId,
content: '这是一条评论',
created_at: new Date().toISOString(),
createdAt: new Date().toISOString(),
selection_title: editor.spread.getActiveSheet().gcSheet.guid() || '',
selectionTitle: editor.spread.getActiveSheet().gcSheet.guid() || '',
user_id: window.cow.currentUser.id,
userId: window.cow.currentUser.id,
},
row: 0,
col: 0,
user: window.cow.currentUser
})
- 参数
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
comment | CommentItem | 必选 | 添加的单元格评论 |
comment.selection_guid | String | 可选 | 单元格评论列表 id |
comment.comment_guid | String | 必选 | 单元格评论 id |
comment.content | String | 必选 | 单元格评论内容 |
comment.created_at | String | 必选 | 单元格评论创建时间 |
comment.selection_title | String | 必选 | 当前表格 sheet id |
comment.user_id | String | 必选 | 当前用户 id |
row | Number | 必选 | 当前行 |
col | Number | 必选 | 当前列 |
user | Number | 必选 | 当前用户信息 |
delete
删除单元格评论
- 返回
Promise
- 用法
comment.commentModel.delete('eziY3FgYc2DUVouu')
- 参数
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
commentId | String | 必选 | 删除单元格评论 id |
close
结束单元格评论
- 返回
Promise
- 用法
comment.commentModel.close({
sheet: editor.spread.getActiveSheet(),
row: 0,
col: 0
})
- 参数
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
sheet | Sheet | 必选 | 当前表格 |
row | Number | 必选 | 当前行 |
col | Number | 必选 | 当前列 |
cancel
取消单元格评论,删除单元格评论样式
- 返回
void
- 用法
comment.commentModel.cancel({
sheet: editor.spread.getActiveSheet(),
row: 0,
col: 0
})
- 参数
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
sheet | Sheet | 必选 | 当前表格 |
row | Number | 必选 | 当前行 |
col | Number | 必选 | 当前列 |
自定义事件 updateComment
当评论列表发生变化时发生此事件,可监听此事件获取最新评论列表
- 用法
comment.commentModel.on('updateComment', (commentList) => {})
initList
初始化评论列表实例
- 返回
CommentList
- 用法
commentList = comment.initList()
- 参数 无