1：计算属性中tables接管了this.data,然后模糊搜索功能正常搜索。表单数据是绑定在tables，data是后台接受后的数据。
2：当使用了ecel的表单导出功能后，再次进行模糊搜索。第一层的数据是没有问题的，第二层的数据也就是tables下的数据内第二层线材详情列表，会变成字符串解析遍历出来的字符值
3：分析和尝试了几种方法后发现主要原因是因为ecel导出的时候有个方法改变了所有数据-formatJson
4：因为导出后数据改变，tables接管的data数据，不管是用temp接受还是直接改成tables赋给eceldata（专门创建的用来导出数据的容器），都没用（所有数据都被format了）
5：解决：导出后数据再次变回来，直接调用后台接口的方法再次接受更新下数据即可：我这里用的是：this.fnAjaxUpdata()
代码：
mounted(){
this.data = []//先清空下数据
},
computed:{
tables(){//接管this.data 进行模糊搜索
const search = this.search//搜索词
if(search){
return this.data.filter(data=>{
//1:所有项
// return Object.keys(data).some(key=>{
// console.log(data[key])
// console.log(key)
// return String(data[key]).toLowerCase().indexOf(search) > -1
// })
//2:指定项
return ["zl_no","pd_id","pd_name"].some(key=>{
return String(data[key]).toLowerCase().indexOf(search) > -1
})
//3：单个项
// return String(data["zl_no"]).toLowerCase().indexOf(search) > -1
})
}
return this.data
},
},
methods:{
// //==========================- 业务 ======================================================
fnAjaxUpdata(){//2 - 接口 一：向后端发送时间根据事件获取数据
let url = this.baseurl+'jk_wire_issue/get_wj_by_date.php?startDate='+this.datapicker[0]+'&endDate='+this.datapicker[1]
this.loading = true
this.$http.get(url).then((res)=>{
if(!res) return
if(res.data==null||res.data==""){
this.data =[]
this.$message.warning('当前所选时间没数据，请重新选择时间');
this.loading=false;
return
}else{
this.data = res.data//--这里是获取数据到本地的主要点
this.data.forEach((val,ind)=>{//动态添加key
val.key = val.zl_no
})
this.fnAjaxGetChecked()
this.loading=false
this.template = []
// setTimeout(()=>{//单独设置--展开所有功能
// this.data.forEach((val,key)=>{
// this.defaultExpandedRowKeys.push(val.key)
// })
// },200)
if(!res.data[0].lj_detail) return
}
}).catch((err)=>{
console.log(err)
this.$message.warning('获取数据失败，如果您使用ie请改为非ie浏览器再试')
})
},
//接口二会把数据内的二层数据添加的勾选值的项目进行渲染，获取哪个二层项目项打勾和没打勾，
fnAjaxGetChecked(){//3- 接口二 獲取勾選接口
let url = this.baseurl+'jk_wire_issue/get_wire_check_info.php?startDate='+this.datapicker[0]+'&endDate='+this.datapicker[1]
this.$http.get(url).then((res)=>{
if(!this.data) return
// console.log('uid',res.data)
this.data.forEach((v,i)=>{
if(!v.lj_detail) return
v.lj_detail.forEach((j,i)=>{
// console.log(j[3])
if(res.data==null){
}
if(!res.data) return
res.data.forEach((k,i)=>{
if(k.uid==j[3]){//找到条件下有打勾的项目
j.push('打钩了')//自定义添加项然后根据此项进行页面打勾渲染
j.push(k.checked_date)
}
})
})
})
})
},
//下面接口主要是如果有打勾就给后端发送打勾逻辑来更新到后端
fnCheckbox(e,v,date){//4 - 接口三 :打勾更新后端
// console.log(e.target.checked,v[3],date)
let is_checked = e.target.checked//点击事件
let dateStr = date
let uid = v[3]
let url = this.baseurl+'jk_wire_issue/update_wire_check_info.php?is_checked='+is_checked+'&date='+dateStr+'&uid='+uid
this.$http.get(url).then((res)=>{
console.log(res)
if(res.data==1){
// this.$message.success('更新成功')
this.fnAjaxUpdata()
}
})
},
//============================ 下面是导出ecel和导出格式的相关逻辑 ======================================================
1：首先是要初始化下数据，数据导出只有一行，而且导出的excel 深层子数据数组对象是不会被渲染会渲染成obj,所以除了格式第一层（自带），还有json.stringify第二层数据然后展放到最后列数据
downloadExcel() {//列表下载
alert('导入中。。。')
this.fnInitEcelTable()
this.export2Excel()
},
2：数据比较复杂，全部加起来整个数据大概是四层，当前遍历的数据以下是要有三层遍历的
this.excelData.forEach ==》v.lj_detail.forEach ==> val[2].forEach
一，首先遍历当前数据然后给每一项设置想要打印的指定的键值对 ，并清空带有二层数据数组的字段数据lj_detail
二，清空的数据后动态的push自己想要渲染的二层数据值，在二层数据中包含有一个val[2],既每项二层数据数组的第三项又是个数组所以还要进行三次遍历
三，把第三层的数据按照指定的键值对重塑后导入到第二层数据后面，要统一用push，才会把二层内三层数据有序放到二层后面
另外，如果this.excelData 接受的是tables, 模糊搜索后 则会导出搜索后的数据，如果是直接接受this.data,搜索后再次导出ecel的表格依然是全部数据
fnInitEcelTable(){//第一次组重组数据
// this.excelData = this.data //你要导出的数据list,all。
this.excelData = this.tables //你要导出的数据list- 只导出search。
this.excelData.forEach((v,i)=>{
this.excelData[i]= {
ProdtQtyFROM:v.ProdtQtyFROM,
date:v.date,
pd_id:v.pd_id,
pd_name:v.pd_name,
series:v.series,
zl_no:v.zl_no
}
this.excelData[i].lj_detail =[//qingkong
]
v.lj_detail.forEach((val,j)=>{
console.log(val,j)
this.excelData[i].lj_detail.push({
name:val[0],
danweiYongliang:val[1],
// yongliang:val[2],
uid:val[3],//uid
danwei:val[4],
guige:val[5],
beizhu:val[6],
zongyongliang:val[7],
dagou:val[8],
timer:val[9]
})
//sanceng --这边创建后会有问题 --只有最后一项lj_detail内的数据依此导入进去
val[2].forEach((value,k)=>{
this.excelData[i].lj_detail.push({
name:value[2] + value[0],
danweiYongliang:value[1],
// yongliang:val[2],
uid:value[3],
danwei:value[4],
guige:value[5],
beizhu:val[6],
zongyongliang:val[7],
dagou:value[8],
timer:value[9]
})
})
})
})
},
3：数据写入到excel的逻辑--- 这里是固定写法，内部导出表头字段和导出表格内容是可自定义的
其中一定要注意 调用完后导出ecel 一定要添加 this.fnAjaxUpdata() 方法，此方法会再次调用数据刷新格式化后的数据恢复原样 解决题目的bug
export2Excel() {//数据写入excel
var that = this;
require.ensure([], () => {
const { export_json_to_excel } = require('@/excel/export2Excel'); //这里必须使用绝对路径，使用@/+存放export2Excel的路径
const tHeader = ['多工制令单','用量','日期','产品名称','产品规格','用料-名','子项:[名称-单位用量-总用量-单位-规格-备注]']; // 导出的表头名信息
const filterVal = ['zl_no','ProdtQtyFROM', 'date', 'pd_id','pd_name','series','lj_detail']; // 导出的表头字段名，需要导出表格字段名
const list = that.excelData;
const data = that.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '多工制令单excel');// 导出的表格名称，根据需要自己命名
this.fnAjaxUpdata()//打印完成后一定要重新刷新一下数据，不然搜索框将不能用，搜索框再次搜索数据内层的数据会被format而导致的乱掉
})
},
4: //格式转换 --这里也是格式化数据，只不过是格式化第一层的数据
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j =>{
if(j=="lj_detail"){
v[j] = this.filterTab(v[j])
}
return (v[j])
}))
},
5：因为数据还是有二层数据，所以这里把第二层数据也展开并且把展开后的数据格式化成字符串-不然excel表格上显示的会是obj
filterTab(objArr){//自定义过滤器 -第二次重组第数据
let temp = []
objArr.forEach((v)=>{
// console.log(v)
temp.push(JSON.stringify([
v.name,
v.danweiYongliang,
v.zongyongliang,
v.danwei,
v.guige,
v.beizhu,
]
))
})
return temp
},
}
浙公网安备 33010602011771号