前端实现导入文件的步骤(运用vue.js—导入）
1,利用input type=file 原生属性 绑定change事件
<input type="file" name="file" ref="userImport" v-show="false" @change="uploadFiles1">
2，为触发按钮绑定事件
<el-button type="primary" style="margin-right: 10px;" @click="importData()">导入</el-button>
3、按钮绑定的事件中触发 input change事件
```javascript
//导入表格`在这里插入代码片`
async importData() {
this.$refs.userImport.click()
},
4，清空input flie 文件（ element.outerHTML 详解）
//清除input flie
this.$refs.userImport.value = '';//文件置空
5,级联选择的思路
//获取到父节点 及孩子的数据 构建对象使之一一对应
/**
{key:value}
*/
//点击父节点请求数据
elemen-ui分页bug
1.批量删除bug
//批量删除
//this.tableTotal 数据总条数 this.pageSize:每页条数 this.pageNum:当前页数
2.点击分页后处理携带查询参数
let num = Math.ceil((this.tableTotal - length) / this.pageSize)
if (num == this.pageNum || num > this.pageNum) {
this.rightTableData(this.pageNum, this.pageSize, projId, this.copyName, this.copyTime)
}
if (num < this.pageNum) {
(this.pageNum)--
this.rightTableData(this.pageNum, this.pageSize, projId, this.copyName, this.copyTime)
}
//在线客服
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>机器人对话</title>
<script th:inline="javascript" type="text/javascript" src="/config/sys.include.js"></script>
<link rel="stylesheet" href="/css/rodot/onlineService.css" />
<style>
</style>
</head>
<body>
<div id="app" class="" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中"
element-loading-background="rgba(0, 0, 0, 0.3)">
<el-card class="box-card">
<div class="rodotBox">
<el-header>
<el-row>
<img height="40" src="/images/robot/robot.png" alt="">
在线客服
</el-row>
</el-header>
<el-main id="chatRecord">
<div class="list">
<ul>
<li v-for="(item,index) in msglist" :key="index">
<left-box :content="item.content" v-if="item.isRobot"></left-box>
<right-box :content="item.content" v-else>
</right-box>
</li>
</ul>
</div>
</el-main>
<el-footer>
<el-row class="queIcon">
<el-tooltip effect="dark" content="常见问题" placement="top">
<i class="el-icon-question" @click="questionSend"></i>
</el-tooltip>
</el-row>
<div class="tBox">
<el-input type="textarea" :rows="4" placeholder="说点什么吧..." @keyup.enter.native="sendMsgs"
v-model="inputContent"></el-input>
</div>
<el-row class="sendBtn">
<el-button type="primary" @click="sendMsgs">发 送</el-button>
</el-row>
</el-footer>
</div>
</el-card>
</div>
<script type="text/javascript" src="/js/robot/robotV2.js"></script>
</body>
</html>
/*
* 机器人
*对话
* */
$(function () {
vue();
});
const userId = sys.userId;
const jobType = sys.jobType; //3 管理员
const menuId = sys.menuId; //菜单id
const projId = sys.projId;//项目id
function vue() {
let app = new Vue({
el: '#app',
data() {
return {
loading:false,
//用来存放对话
msglist: [
{
content: [
{
question:'您好，请问需要什么帮助？',
answerType:'3'
}
],
isRobot: true
}
],
userId:userId,
inputContent:'',
visible: false,
projId:projId
}
},
components: {
//引入组件
'leftBox': httpVueLoader('/components/robot/leftBox.vue'),
'rightBox': httpVueLoader('/components/robot/rightBox.vue'),
},
methods: {
// 关闭机器人对话框
robotMinus(){
this.visible = false
},
robotClose(){
this.visible = false
this.msglist=[ {
content: '您好，请问需要什么帮助',
isRobot: true
}]
},
//发送消息
sendMsgs(){
let rStr = this.inputContent.replace(/\s+/g,' ')
if(rStr==''||rStr==' '){
return this.$message.info('发送消息不能为空')
}
this.msglist.push({
content: this.inputContent,
isRobot: false
})
this.searchRobot(projId,userId,1,this.inputContent)
this.inputContent=''
},
//点击问题图标
questionSend(){
this.msglist.push({
content: '常见问题',
isRobot: false
})
this.searchRobot(projId,userId,2)
},
//查询
async searchRobot(projId,userId,questionType,question,down){
projId = projId ? projId : sys.projId;
userId = userId ? userId : sys.userId;
questionType = questionType ? questionType : '1';
question = question ? question : '';
down = down ? down : false;
const {data:res} = await axios.get(sys.config.zuulUrl.jieshou+'question/query',{params:{projId:projId,userId:userId,questionType:questionType,question:question}})
if(res.code!=200){
return this.$message.info(res.msg)
}
if(down){
return window.open( res.data.answer, "_blank", "top=200,left=200,height=600,width=800,status=yes,toolbar=1,menubar=no,location=no,scrollbars=yes")
}
this.msglist.push({
content:res.data,
isRobot:true
})
}
},
watch: {
},
mounted() {
},
updated(){
// 聊天定位到底部
let ele = document.getElementById('chatRecord');
ele.scrollTop = ele.scrollHeight;
},
})
}
leftBox.vue
<template>
<div class="lScope">
<el-row class="lScope_row">
<div><el-avatar src="../images/robot/robot.png"></el-avatar>
<el-tag >
<ul>
<li v-for="(item,index) in answerList" :key="index">
<div v-show="item.answerType==3" >{
{item.question}}</div>
<el-link :underline="false" type="primary" v-show="item.answerType==2" @click="fun(item.answer,2)">{
{item.answer}}</el-link>
<div v-show="item.answerType==1">{
{index+1}}.{
{item.answer}}</div>
</li>
</ul>
</el-tag>
</el-row>
</div>
</template>
<script>
module.exports = {
props: ["content"],
data() {
return {
answerList: [],
isShow: false,
};
},
created() {
// console.log(this.$parent.$parent.$parent.$parent)
if (typeof(this.content[0])=='string') {
this.content.forEach((ele) => {
const obj = {
answerType: "2",
answer: ele,
};
this.answerList.push(obj);
});
}else{
this.answerList=this.content
}
if (this.answerList.length == 0) {
return this.answerList.push({
question: "可选择常见问题",
answerType: "1",
});
}
this.questionC = this.answerList.filter((item) => {
return item.questionType == 2 && item.answerType == 2;
});
// console.log(this.answerList)
},
methods: {
fun(question, type) {
let down=false
if(question=='用户操作手册'){
down=true
}
// console.log(this.$parent)
this.$parent.$parent.$parent.searchRobot('','',parseInt(type),question,down)
// console.log(type);
// console.log(question);
// const { data: res } = await axios.get(
// sys.config.zuulUrl.jieshou + "question/query",
// {
// params: {
// projId: "1015",
// userId: sys.userId,
// questionType: parseInt(type),
// question: question,
// },
// }
// );
// if (res.code != 200) {
// return this.$message.info(res.msg);
// }
// this.answerList =[]
// this.answerList = res.data;
// console.log(this.answerList);
},
},
};
</script>
<style>
.lScope {
width: 100%;
margin-top: 20px;
}
.lScope_row {
display: flex;
align-items: center;
}
.lScope_row > div {
width: 65%;
display: flex;
}
.lScope_row .el-avatar {
margin-right: 10px;
}
.lScope_row .el-tag {
background: #fff;
color: #000;
width: 50%;
word-wrap: break-word;
white-space: normal;
height: auto;
}
</style>
//rightBox.vue
<template>
<div class="rScope">
<el-row class="rScope_row">
<div>
<el-tag>
<ul>{
{ content }}</ul>
</el-tag>
<el-avatar icon="el-icon-user-solid"></el-avatar></div>
</el-row>
</div>
</template>
<script>
module.exports = {
props: ["content"],
data() {
return {
};
},
};
</script>
<style>
.rScope {
width: 100%;
margin-top:10px ;
}
.rScope_row>div{
width: 50%;
display: contents;
}
.rScope_row {
display: flex;
align-items: center;
justify-content: flex-end;
}
.rScope_row .el-avatar{
margin-left: 10px;
}
.rScope_row .el-tag{
background: #fff;
color: #000;
word-wrap: break-word;
white-space: normal;
height: auto;
}
</style>