yapi/client/components/MockDoc/MockDoc.js

import './MockDoc.scss'
import React, { Component } from 'react'
import PropTypes from 'prop-types'


// 组件用法 <MockDoc mock= mockData doc= docData />
// mockData: mock数据 格式为json
// docData：docData数据 格式为array

class MockDoc extends Component {
  constructor(props) {
    super(props);
    this.state = {
      release: []
    };
  }

  static propTypes = {
    mock: PropTypes.object,
    doc: PropTypes.array
  }
  // btnCol(start,col){
  //   return function(){
  //     console.log(start,col);
  //   }
  // }
  render() {
    let htmlData = mockToArr(this.props.mock);
    htmlData = arrToHtml(htmlData,this.props.doc);
    return (
      <div className='MockDoc'>
        {
          htmlData.map(function(item,i){
            {/*//类型：Object  必有字段  备注：qwqwqw*/}
            if(item.mes){
              var mes = [];
              item.mes.type?mes.push(<span  key = {i} className="keymes"> / /类型：{item.mes.type}</span>):"";
              item.mes.required?mes.push(<span key = {i+1} className="keymes">必有字段</span>):"";
              item.mes.desc?mes.push(<span key = {i+2} className="keymes">备注：{item.mes.desc}</span>):"";
            }
            return (
              <div className="jsonItem" key = {i}>
                {<span className="jsonitemNum">{i+1}.</span>}{
                  produceSpace(item.space)
                }{setStrToHtml(item.str)}
                {mes}
              </div>
            )
          })
        }
      </div>
    )
  }
}

MockDoc.defaultProps = {
  mock: {
    "ersrcode": "@integer",
    "data|9-19": [
      "123",
      { 
        "name": "@name",
        "name1": [{
          "name3":"1"
        }]
      }],
    "data1": "123",
    "data3": {
      "err": "errCode",
      "arr": [1,2]
    }
  },
  doc: [
    { type: "strisng", key: "ersrcode", required: true, desc: "错误编码" },
    { type: "number", key: "data[]", required: true, desc: "返回数据" },
    { type: "object", key: "data[].name", required: true, desc: "数据名" },
    { type: "object", key: "data[].name1[].name3", required: true, desc: "数据名1" },
    { type: "object", key: "data1", required: true, desc: "数据名1" },
    { type: "object", key: "data3.err", required: true, desc: "数据名1" },
    { type: "object", key: "data3", required: true, desc: "数据名1" },
    { type: "object", key: "data3.arr[]", required: true, desc: "数据名1" }
  ]
}
function produceSpace(count){
  var space = [];
  for(var i = 0; i< count; i++){
    space.push(<span key = {i} className="spaces"></span>);
  }
  return space;
}

function setStrToHtml(str){
  return <span dangerouslySetInnerHTML={{__html: `${str}`}} />
}
function arrToHtml(mockArr,mock){
  
  for(var i in mockArr){
    for(var item in mock){
      // if(mockArr[i].key){
      //   console.log(mockArr[i].key,mock[item].key)
      // }
      
      if(mockArr[i].key && mockArr[i].key === mock[item].key){
        mockArr[i].mes = mock[item];
        
      }
    }
  }
  return mockArr;
}


function mockToArr(mock,html,space,key) {
  html = html || [];
  space = space || 0;
  key = key || [];
  if(typeof mock === 'object' && space===0){
    if (mock.constructor === Array) {
      html.push({
        space: space,
        str: "["
      })
      space++;
    }else{
      html.push({
        space: space,
        str: "{"
      })
      space++;
    }
  }
  for (var i in mock) {
    if (!mock.hasOwnProperty(i)) {
      continue;
    }
    var index = i;
    if(/^\w+(\|\w+)?/.test(i)){
      index = i.split("|")[0];
    }
    if (typeof mock[i] === 'object') {
      if(mock[i].constructor === Array){
        // shuzu
        if(mock.constructor != Array){
          if(key.length){
            key.push("."+ index + "[]");
          }else{
            key.push(index + "[]");
          }
          
        }else{
          key.push("[]");
        }
        html.push({
          space: space,
          str: index + " : [",
          key: key.join("")
        })
      }else{
        // object
        if(mock.constructor != Array){
          if(key.length){
            key.push('.'+index);
          }else{
            key.push(index);
          }
          html.push({
            space: space,
            str: index + " : {"
          })
        }else{
          html.push({
            space: space,
            str: "{"
          })
        }
        
      }
      space++;
      mockToArr(mock[i],html,space,key);
      key.pop();
      space--;
    } else {
      if(mock.constructor === Array){
        // html.push(produceSpace(space) + mock[i]+ ",");
        html.push({
          space: space,
          str: `<span class = "valueLight">${mock[i]}</span>`+ ","
        })
      }else{
        // html.push(produceSpace(space) + index + ":" + mock[i] + ",");
        if(mock.constructor != Array){
          if(key.length){
            // doc.push(key+"."+index);
            html.push({
              space: space,
              str: index + " : " + `<span class = "valueLight">${mock[i]}</span>` + ",",
              key: key.join("")+"."+index 
            })
          }else{
            // doc.push(key + index);
            html.push({
              space: space,
              str: index + " : " + `<span class = "valueLight">${mock[i]}</span>` + ",",
              key: key.join("") + index 
            })
          }
        }else{
          html.push({
            space: space,
            str: index + " : " + `<span class = "valueLight">${mock[i]}</span>` + ",",
            key: key.join("") 
          })
        }
        
      }
      
    }
    
  }
  if(typeof mock === 'object'){
    html[html.length-1].str = html[html.length-1].str.substr(0,html[html.length-1].str.length-1);
    if (mock.constructor === Array) {
      space--;
      // html.push(produceSpace(space)+"]");
      html.push({
        space: space,
        str: "]"
      })
    }else{
      space--;
      // html.push(produceSpace(space)+"}");
      html.push({
        space: space,
        str: "}"
      })
    }
  }
  if(space != 0){
    html[html.length-1].str = html[html.length-1].str + ",";
  }
  return html;
}

export default MockDoc;