bot-answer
v0.1.82
Published
bot-answer是一个通用组件库，基于kgbot机器人问答实现双向式交流，可探索图谱，可提问等。
Downloads
24
Readme
bot-answer
bot-answer是一个通用组件库，基于kgbot机器人问答实现双向式交流，可探索图谱，可提问等。
#install 基于公司源进行安装使用:
npm i @plantdata/bot-answer
或
yarn add @plantdata/bot-answer botAnswer参数：
1、showType
2、addData([], true)
3、setParams(params, requestor)
4、botLinkClick()
5、addDataPage(page)
6、empty插槽####1、showType：
- 搜索结果数据类型展示状态
- 默认为列表
- 目前仅支持列表【list】和幻灯片【carousel】展示[幻灯片仅支持前十条数据放映]
示例：
<bot-answer ref="botAnswer" show-type="carousel"></bot-answer>####2、addData([])：
- 调用该函数手动塞入数据，可用于定制接口等
- addData([], true)，第二个参数适用于内部某条数据更新-必传（可用于分页,不传则无法判断数据是单条更新还是整体更新）
- 具体示例请参考下面示例二和示例三的用法
####3、setParams(params, requestor)：
- 组件内入参函数
- params：此处传参为对象，具体可参考kgbot的swagge调用接口传参 （内含此对象，这里传入为覆盖合并，默认page为1，size为10）
params.sysNum这里为机器人参数传入
- requestor：此处传参为对象，可用于url变动，method请求方式变动，header等（非必传）
- 具体示例请参考下面示例一 ##【注：以上addData、setParams函数调用，不支持同时存在】
####4、botLinkClick()：
- 组件内抛出链接点击事件
####5、addDataPage(page)：
- 该函数仅用于手动塞入数据点击分页情况
- page为组件内抛出页码
####6、组件内含无数据插槽empty（非必）
示例：
<bot-answer>
<div slot="empty">暂无数据</div>
</bot-answer> ##使用步骤： 在main.js中注册并在如下示例中使用
import botAnswer from '@plantdata/bot-answer'
Vue.use(botAnswer)示例一（参数传入）:
<template>
<bot-answer ref="botAnswer" @botLinkClick="botLinkClick">
<div slot="empty">暂无数据</div>
</bot-answer>
</template>
export default {
name: 'test-conponent',
mounted () {
this.$nextTick(() => {
this.init()
})
},
methods: {
init () {
const params = {
sysNum: '16722099167167534',
inputMessage: { inQues: '腾讯的产品有哪些' }
// baseReq: {
// page: 1,
// size: 8
// }
}
// 非必传参数
const requestParams = {
url: '',
method: 'POST',
header: {}
}
// this.$refs.botAnswer.setParams(params)
this.$refs.botAnswer.setParams(params, requestParams) // this.params.sysNum 和 this.params.inputMessage.inQues必传，不传会弹提示
},
botLinkClick (kw, nodeValue) {
console.log(kw, nodeValue) // kw为链接文案，nodeValue待发掘
}
}
}示例二（数据塞入）:
<template>
<bot-answer ref="botAnswer"
show-type="carousel"
@addDataPage="addDataPage">
<div slot="empty">暂无数据</div>
</bot-answer>
</template>
export default {
name: 'test-conponent',
mounted () {
this.$nextTick(() => {
this.getData()
})
},
methods: {
getData () {
const params = { ... }
axios.post(url, params).then((res) => {
this.$refs.botAnswer.addData(res.data || ['1', '2', '3'] || [ {content: 'aa'}, {content: 'bb'}])
})
},
addDataPage (page) {
const params = {
baseReq: {
page,
...
},
...
}
axios.post(url, params).then((res) => {
const data = res.data || ['1', '2', 3] || [ {content: 'aa'}, {content: 'bb'}]|| '一条数据'
this.$refs.botAnswer.addData(data, true) // 此处第二个参数必传true，
})
}
}
}示例三（搜索示例）:
<template>
<div class="index-box">
<div style="display: flex">
<el-input v-model="kw"></el-input>
<el-button @click="searchClick">搜索</el-button>
</div>
<bot-answer ref="botAnswer" @botLinkClick="botLinkClick" @addDataPage="addDataPage"></bot-answer>
</div>
</template>
<script>
export default {
name: 'searchPage',
data () {
return {
kw: '腾讯的产品有哪些'
}
},
mounted () {
this.$nextTick(() => {
this.addInit()
})
},
methods: {
searchClick () {
this.addInit()
},
botLinkClick (kw, nodeValue) {
console.log(kw, nodeValue)
},
setInit () {
const data = {
sysNum: '16722099167167534',
inputMessage: { inQues: this.kw }
}
this.$refs.botAnswer.setParams(data)
},
addInit () {
const result = [
{
msgType: 'richText',
score: 100,
content: '<!DOCTYPE html>\n' +
'<html lang="en" >\n' +
'<body>\n' +
'<p></p>\n' +
'\n' +
'<div>\n' +
' 为您找到共25条数据，共3页：<!DOCTYPE html>\n' +
'<html lang="en">\n' +
'<body>\n' +
'<ul>\n' +
' <li>\n' +
' <a href="javascript:void(0);" class="welcomeWords" title="点击查看"\n' +
' question="腾讯$_$8">腾讯</a>\n' +
' </li>\n' +
' <li>\n' +
' <a href="javascript:void(0);" class="welcomeWords" title="点击查看"\n' +
' question="梨视频$_$13">梨视频</a>\n' +
' </li>\n' +
' <li>\n' +
' <a href="javascript:void(0);" class="welcomeWords" title="点击查看"\n' +
' question="VIPKID大米科技$_$19">VIPKID大米科技</a>\n' +
' </li>\n' +
' <li>\n' +
' <a href="javascript:void(0);" class="welcomeWords" title="点击查看"\n' +
' question="常山北明$_$20">常山北明</a>\n' +
' </li>\n' +
' <li>\n' +
' <a href="javascript:void(0);" class="welcomeWords" title="点击查看"\n' +
' question="小红书$_$21">小红书</a>\n' +
' </li>\n' +
' <li>\n' +
' <a href="javascript:void(0);" class="welcomeWords" title="点击查看"\n' +
' question="东华诚信$_$22">东华诚信</a>\n' +
' </li>\n' +
' <li>\n' +
' <a href="javascript:void(0);" class="welcomeWords" title="点击查看"\n' +
' question="东华软件$_$23">东华软件</a>\n' +
' </li>\n' +
' <li>\n' +
' <a href="javascript:void(0);" class="welcomeWords" title="点击查看"\n' +
' question="Newsdog$_$24">Newsdog</a>\n' +
' </li>\n' +
' <li>\n' +
' <a href="javascript:void(0);" class="welcomeWords" title="点击查看"\n' +
' question="新东方在线$_$25">新东方在线</a>\n' +
' </li>\n' +
' <li>\n' +
' <a href="javascript:void(0);" class="welcomeWords" title="点击查看"\n' +
' question="SoundHound$_$26">SoundHound</a>\n' +
' </li>\n' +
'</ul>\n' +
' <div class="btns-page">\n' +
' <div>[<span class="page-num">1</span>]</div>\n' +
' <div class="next" question="腾讯的产品有哪些" size="10" next-page="2">下一页</div>\n' +
' </div>\n' +
'</body>\n' +
'</html>\n' +
'</div>\n' +
'\n' +
'</body>\n' +
'</html>',
showUrl: ''
},
{
msgType: 'richText',
score: 100,
content: '<!DOCTYPE html>\n<html lang=\'en\' >\n<body>\n<p></p>\n\n<div>\n 为您找到共20条数据，共2页：<!DOCTYPE html>\n<html lang=\'en\'>\n<body>\n<ul>\n <li>\n <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n question=\'腾讯$_$8\'>腾讯</a>\n </li>\n <li>\n <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n question=\'人人车$_$28\'>人人车</a>\n </li>\n <li>\n <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n question=\'Marble$_$29\'>Marble</a>\n </li>\n <li>\n <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n question=\'满帮集团$_$30\'>满帮集团</a>\n </li>\n <li>\n <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n question=\'长亮科技$_$31\'>长亮科技</a>\n </li>\n <li>\n <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n question=\'快手$_$32\'>快手</a>\n </li>\n <li>\n <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n question=\'新乐视智家$_$33\'>新乐视智家</a>\n </li>\n <li>\n <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n question=\'小象互娱$_$34\'>小象互娱</a>\n </li>\n <li>\n <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n question=\'拼多多$_$35\'>拼多多</a>\n </li>\n <li>\n <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n question=\'销售易CRM$_$36\'>销售易CRM</a>\n </li>\n</ul>\n <div class=\'btns-page\'>\n <div class=\'prev\' question=\'腾讯的产品有哪些\' size=\'10\' prev-page=\'1\'>上一页</div>\n <div>[<span class=\'page-num\'>2</span>]</div>\n <div class=\'next\' question=\'腾讯的产品有哪些\' size=\'10\' next-page=\'3\'>下一页</div>\n </div>\n</body>\n</html>\n</div>\n\n</body>\n</html>',
showUrl: ''
}
]
this.$refs.botAnswer.addData(result)
},
addDataPage (page) {
const result = [
{
msgType: 'richText',
score: 100,
content: '<!DOCTYPE html>\n<html lang=\'en\' >\n<body>\n<p></p>\n\n<div>\n 为您找到共25条数据，共3页：<!DOCTYPE html>\n<html lang=\'en\'>\n<body>\n<ul>\n <li>\n <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n question=\'腾讯$_$8\'>腾讯</a>\n </li>\n <li>\n <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n question=\'人人车$_$28\'>人人车</a>\n </li>\n <li>\n <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n question=\'Marble$_$29\'>Marble</a>\n </li>\n <li>\n <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n question=\'满帮集团$_$30\'>满帮集团</a>\n </li>\n <li>\n <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n question=\'长亮科技$_$31\'>长亮科技</a>\n </li>\n <li>\n <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n question=\'快手$_$32\'>快手</a>\n </li>\n <li>\n <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n question=\'新乐视智家$_$33\'>新乐视智家</a>\n </li>\n <li>\n <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n question=\'小象互娱$_$34\'>小象互娱</a>\n </li>\n <li>\n <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n question=\'拼多多$_$35\'>拼多多</a>\n </li>\n <li>\n <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n question=\'销售易CRM$_$36\'>销售易CRM</a>\n </li>\n</ul>\n <div class=\'btns-page\'>\n <div class=\'prev\' question=\'腾讯的产品有哪些\' size=\'10\' prev-page=\'1\'>上一页</div>\n <div>[<span class=\'page-num\'>2</span>]</div>\n <div class=\'next\' question=\'腾讯的产品有哪些\' size=\'10\' next-page=\'3\'>下一页</div>\n </div>\n</body>\n</html>\n</div>\n\n</body>\n</html>',
showUrl: ''
}
]
this.$refs.botAnswer.addData(result, true)
}
}
}
</script>