项目实训记录12--发布标准

难点：

1. 如何做到表的信息和表内容信息按树形结构展示

2. 如何做到选择单表，内部所有表项均被选择，以及点击最上面的多选框所有都被选择

过程1：定义一个可以进行层级的数据结构

@Data
public class Chart {
    int id;
    String EN;
    String CN;
    String Des;
    int Same;//是否允许重复
    String token;
    List<Meta> children;
}

@Data
public class Meta {
    int id;
    String EN;
    String Des;
    String CN;//这里其实是type
    String token;
    String Zhengze;
}

过程2：在查找所有chart信息时，就开始嵌套。

首先获取所有的Chart，根据该表id获取该表的表项，并在该表项的token字端加上表id-字段id，并把该表的meta放入该表的children字段

 public List<Chart> findChartsByDBid(int DBId) {
//        首先获取相关的表里的内容
        List<Chart> charts=chartMapper.findAllCharts(DBId);
//遍历list 并获取里面的id
        for(Chart chart:charts){
            // 通过这个获取相应meta列表并加入
            System.out.println(chart.getId());
            chart.setToken(chart.getId()+"");
            if(metaMapper.findAllMetaByCId(chart.getId(),DBId)!=null){
                List<Meta> metaList= metaMapper.findAllMetaByCId(chart.getId(),DBId);
                for(Meta meta :metaList){
                    meta.setToken(chart.getId()+"-"+meta.getId());
                }
                chart.setChildren(metaList);}
            else{

            }

        }

过程三：前端获取信息

表的token是表id

而meta的token是表id-metaid

[{"id":1,"token":"1","children":[
{"id":1,"token":"1-1","zhengze":"F","cn":"FLOAT","en":"t1","des":"DSAD"},

{"id":2,"token":"1-2","zhengze":"F","cn":"DOUBLE","en":"r2","des":"DASD"},

{"id":3,"token":"1-3","zhengze":"F","cn":"INTEGER","en":"r4","des":"ASDDA"},

{"id":4,"token":"1-4","zhengze":"F","cn":"VARCHAR","en":"r5","des":"ASDAD"}],
"cn":"测试","en":"test2237","same":-1,"des":"测试"},

{"id":2,"token":"2","children":[

{"id":1,"token":"2-1","zhengze":"F","cn":"FLOAT","en":"t1","des":"DSAD"},

{"id":2,"token":"2-2","zhengze":"F","cn":"DOUBLE","en":"r2","des":"DASD"},

{"id":3,"token":"2-3","zhengze":"F","cn":"INTEGER","en":"r4","des":"ASDDA"},

{"id":4,"token":"2-4","zhengze":"F","cn":"VARCHAR","en":"r5","des":"ASDAD"}],
"cn":"测试","en":"test223","same":-1,"des":"测试"}]

过程四：前端解析 

// 通过数据库id查询数据表的操作---尽量是树形的  但是传入是一个数据库的id
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

 created(){
    this.dbinfo=this.$route.query.dbinfo
    this.choosed=this.$route.query.choosed
    this.chartsinfo=this.$route.query.chartsinfo
    this.dbid=this.$route.query.dbid
    //得把返回的表信息也拿过来
    // 遍历数组取出想要的json格式,但因为暂时没有type和数据库名
    // {type：insert/get
    // 数据库名:
    // 涉及表名:a,b,c
    // {a:{a1:int ,a2:float}}
    // {b:{}}
    // {c:{}}}
    // 先把每一个的名字拿过来--存 涉及
    // 1. 把数据库中文名抓过来

    this.json.dbname=this.dbinfo.dben
    //console.log(this.json1)
    // 2.把涉及表名拿过来
    console.log('choosedlength')
    console.log(this.choosed.length)

    var flagmap={}
    // 首先先初始化
   for(var i1=0;i1<this.choosed.length;i1++){
      console.log("token:----------")
      console.log(this.choosed[i1].token)
      var splits=this.choosed[i1].token.split('-')
      let chartid=splits[0]
      let metaid= splits[1]
              // 针对每个表来说，必须有一个唯一的标识证明其是否全选
      if(!flagmap.hasOwnProperty(chartid)) //结果为false，表示不包含；否则表示包含
      {
        //如果这里是0，则证明需先将这个表内所有列放进去，放完变成2，如果是1，则根据metaid放
        if(typeof(metaid)=="undefined"){flagmap[chartid]=0}
        else{flagmap[chartid]=1}
      }

      for(var i3=0;i3<this.chartsinfo.length;i3++){
        if(this.chartsinfo[i3].id==chartid){
          this.json.metas[this.chartsinfo[i3].en]={}
        }
      }
    }
    console.log(flagmap)
 for(var i=0;i<this.choosed.length;i++){//先遍历然后切
      console.log("token:----------")
      console.log(this.choosed[i].token)
      var splits=this.choosed[i].token.split('-')
      let chartid=splits[0]
      let metaid= splits[1]
      // 如果选了这一个表且没放进去
      if(flagmap[chartid]==0){
        // 遍历所有的表，看是哪个chart
        for(var i2=0;i2<this.chartsinfo.length;i2++){
          if(this.chartsinfo[i2].id==chartid){
            // 首先把这个的名字放入chartnamelist，然后把该表的所有东西放入后面，但是要先创建一个对象
            var metalist=this.chartsinfo[i2].children
            this.json.chartsname.push(this.chartsinfo[i2].en)
            this.chartsid.push(this.chartsinfo[i2].id)
            var temp={}
            for(var j=0;j<metalist.length;j++){
                temp[metalist[j].en]=metalist[j].cn
              // 在这完成繁杂表操作
              var obj={}
              obj['cen']=this.chartsinfo[i2].en
              obj['men']=metalist[j].en
              obj['type']=metalist[j].cn
              this.chartMetaTypeList.push(obj)

            }
            this.json.metas[this.chartsinfo[i2].en]=temp
            flagmap[chartid]=2
          }
        }
      }
      // 如果选择了该表的单列，根据metaid
      if(flagmap[chartid]==1){
      // 先看是哪个表
           for(var i2=0;i2<this.chartsinfo.length;i2++){
            if(this.chartsinfo[i2].id==chartid){
            // 首先把这个的名字放入chartnamelist，然后把该表的所有东西放入后面，但是要先创建一个对象
            var metalist=this.chartsinfo[i2].children
         	var  x = this.json.chartsname.lastIndexOf(this.chartsinfo[i2].en);
	            if(x==-1){
            this.json.chartsname.push(this.chartsinfo[i2].en)
            this.chartsid.push(this.chartsinfo[i2].id)}

            for(var j=0;j<metalist.length;j++){
              if(metalist[j].id==metaid){
                // temp[metalist[j].en]=metalist[j].cn
                var chartname=this.chartsinfo[i2].en
                temp=this.json.metas[chartname]
                temp[metalist[j].en]='metalist[j].cn'
                temp[metalist[j].en]=metalist[j].cn
                //也在这里完成一些操作

                var obj={}
              obj['cen']=this.chartsinfo[i2].en
              obj['men']=metalist[j].en
              obj['type']=metalist[j].cn
              this.chartMetaTypeList.push(obj)
              }

            }
            this.json.metas[this.chartsinfo[i2].en]=temp
          }
        }
      }if(flagmap[chartid]==2){
        console.log("均已放进去了")
      }
      }
      console.log(this.chartMetaTypeList)
  this.ruleForm.content=JSON.stringify(this.json)
  },

 

过程一：初始化
1. 首先获取选择的项的token
2.使用split函数获取chartid和metaid
3.若metaid为空则证明选择了该表所有的列
4. 设置一个flagmap 长度为获取的表的多少 0：选择了该表所有的列 1：根据metaid放 2：已放完
5. 同时将已选择的表的id与chartinfo数组里表的id匹配，将选择的chartname放进数组
过程二：开始放
6.根据切好的chartid对比看是哪个表，创建对象
7.看meta是哪一列，将这一列的名称和类型放进去