fork from bc4552c5a8
This commit is contained in:
260
client/components/MockDoc/MockDoc.js
Normal file
260
client/components/MockDoc/MockDoc.js
Normal file
@@ -0,0 +1,260 @@
|
||||
import './MockDoc.scss';
|
||||
import React, { PureComponent as 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" />);
|
||||
}
|
||||
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;
|
||||
31
client/components/MockDoc/MockDoc.scss
Normal file
31
client/components/MockDoc/MockDoc.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
.MockDoc{
|
||||
background-color: #F6F6F6;
|
||||
// padding: 16px;
|
||||
border:16px solid #F6F6F6;
|
||||
overflow: auto;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
word-break:keep-all; /* 不换行 */
|
||||
white-space:nowrap;
|
||||
.jsonItem{
|
||||
font-size: 14px;
|
||||
width: auto;
|
||||
|
||||
}
|
||||
.jsonitemNum{
|
||||
margin-right: 16px;
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
border-right: 1px solid gray;
|
||||
}
|
||||
.valueLight{
|
||||
color: #108ee9;
|
||||
}
|
||||
}
|
||||
.spaces{
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
}
|
||||
.keymes{
|
||||
margin-left: 20px;
|
||||
}
|
||||
Reference in New Issue
Block a user