线材表单项目中导出excel后 与计算属性接管的模糊搜索冲突

 

 

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
     },


}