mirror of
https://github.com/YMFE/yapi.git
synced 2024-12-21 05:19:42 +08:00
245 lines
6.1 KiB
JavaScript
245 lines
6.1 KiB
JavaScript
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;
|