mirror/yapi
2
0
Fork 0
mirror of https://github.com/YMFE/yapi.git synced 2025-01-06 12:45:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 新增手动编辑样式

Browse Source
This commit is contained in:
waliang.wang 2017-07-19 19:29:18 +08:00
parent dc8420805a
commit a56a6c8f82
9 changed files with 208 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
client/actions/addInterFace.js
View File

@ -4,7 +4,10 @@ import {
FETCH_ADD_INTERFACE_HEADER_VALUE,
ADD_INTERFACE_SEQ_HEADER,
DELETE_INTERFACE_SEQ_HEADER,
ADD_INTERFACE_REQ_PARAMS
ADD_INTERFACE_REQ_PARAMS,
DELETE_INTERFACE_REQ_PARAMS,
ADD_INTERFACE_RES_PARAMS,
DELETE_INTERFACE_RES_PARAMS
} from '../constants/action-types.js'
export function pushInputValue (value) {
@ -49,3 +52,24 @@ export function addReqParams (value) {
};
}
export function deleteReqParams (value) {
return {
type: DELETE_INTERFACE_REQ_PARAMS,
payload: value
};
}
export function addResParams (value) {
return {
type: ADD_INTERFACE_RES_PARAMS,
payload: value
};
}
export function deleteResParams (value) {
return {
type: DELETE_INTERFACE_RES_PARAMS,
payload: value
};
}

26
client/actions/addInterface.js
View File

@ -4,7 +4,10 @@ import {
FETCH_ADD_INTERFACE_HEADER_VALUE,
ADD_INTERFACE_SEQ_HEADER,
DELETE_INTERFACE_SEQ_HEADER,
ADD_INTERFACE_REQ_PARAMS
ADD_INTERFACE_REQ_PARAMS,
DELETE_INTERFACE_REQ_PARAMS,
ADD_INTERFACE_RES_PARAMS,
DELETE_INTERFACE_RES_PARAMS
} from '../constants/action-types.js'
export function pushInputValue (value) {
@ -49,3 +52,24 @@ export function addReqParams (value) {
};
}
export function deleteReqParams (value) {
return {
type: DELETE_INTERFACE_REQ_PARAMS,
payload: value
};
}
export function addResParams (value) {
return {
type: ADD_INTERFACE_RES_PARAMS,
payload: value
};
}
export function deleteResParams (value) {
return {
type: DELETE_INTERFACE_RES_PARAMS,
payload: value
};
}

4
client/constants/action-types.js
View File

@ -9,6 +9,10 @@ export const FETCH_ADD_INTERFACE_TAG_VALUE = 'FETCH_ADD_INTERFACE_TAG_VALUE'
export const FETCH_ADD_INTERFACE_HEADER_VALUE = 'FETCH_ADD_INTERFACE_HEADER_VALUE'
export const ADD_INTERFACE_SEQ_HEADER = 'ADD_INTERFACE_SEQ_HEADER'
export const DELETE_INTERFACE_SEQ_HEADER = 'DELETE_INTERFACE_SEQ_HEADER'
export const ADD_INTERFACE_REQ_PARAMS = 'ADD_INTERFACE_REQ_PARAMS'
export const DELETE_INTERFACE_REQ_PARAMS = 'DELETE_INTERFACE_REQ_PARAMS'
export const ADD_INTERFACE_RES_PARAMS = 'ADD_INTERFACE_RES_PARAMS'
export const DELETE_INTERFACE_RES_PARAMS = 'DELETE_INTERFACE_RES_PARAMS'
// group
export const FETCH_GROUP_LIST = 'FETCH_GROUP_LIST'

31
client/containers/AddInterface/ReqHeader/ReqHeader.js
View File

@ -69,3 +69,34 @@ class ReqHeader extends Component {
}
export default ReqHeader
{
"desc": "api",
"method": "post",
"path": "/testapi",
"project_id": 8,
"req_headers": [
{
"key": "h",
"value": "t"
}
],
"req_params_type": "json",
"req_params": [
{
"name": "uid",
"value": 100,
"type": "text"
},
{
"name": "gid",
"value": 1001,
"type": "text"
}
],
"res_body_type": "json",
"res_body": "{\"tt\": 222}"
}

8
client/containers/AddInterface/ReqHeader/ReqList.js
View File

@ -41,10 +41,12 @@ class ReqList extends Component {
super(props)
}
@autobind
handleChange (value) {
this.props.reqTagValue(value)
}
@autobind
handleBlur (e) {
const value = e.target.value
this.props.reqHeaderValue(value)
@ -65,14 +67,12 @@ class ReqList extends Component {
render () {
const Option = Select.Option
const handleChange = this.handleChange.bind(this)
const handleBlur = this.handleBlur.bind(this)
const dataNum = this.props.dataNum
return (
<li>
<em className="title">头部标签 {this.props.tagValue} {this.props.headerValue}</em>
<Select defaultValue="HTTP" style={{ width: 220 }} onChange={handleChange} size="large">
<Select defaultValue="HTTP" style={{ width: 220 }} onChange={this.handleChange} size="large">
<Option value="HTTP">Accept</Option>
<Option value="Accept-Charset">Accept-Charset</Option>
<Option value="Accept-Encoding">Accept-Encoding</Option>
@ -80,7 +80,7 @@ class ReqList extends Component {
<Option value="Accept-Ranges">Accept-Ranges</Option>
</Select>
<em className="title">头部内容</em>
<Input placeholder="Basic usage" className="req-content" size="large" onBlur={handleBlur} />
<Input placeholder="Basic usage" className="req-content" size="large" onBlur={this.handleBlur} />
<span className="close" onClick={this.deleteReqHeader} data-num={dataNum}>×</span>
</li>
)

37
client/containers/AddInterface/ReqParams/ParamsList.js
View File

@ -1,13 +1,48 @@
import React, { Component } from 'react'
import { Select, Input } from 'antd'
import PropTypes from 'prop-types'
import { autobind } from 'core-decorators'
import { connect } from 'react-redux'
import { deleteReqParams } from '../../../actions/addInterface.js'
@connect(
state => {
return {
reqParams: state.addInterface.reqParams
}
},
{
deleteReqParams
}
)
class ParamsList extends Component {
static propTypes = {
reqParams: PropTypes.array,
dataNum: PropTypes.number,
deleteReqParams: PropTypes.func
}
constructor(props) {
super(props)
}
@autobind
deleteReqParams (e) {
let newSeqParams = []
let reqParams = this.props.reqParams
let dataNum = e.target.getAttribute('data-num')
reqParams.map(value => {
if (+dataNum !== value.id) {
newSeqParams.push(value)
}
})
this.props.deleteReqParams(newSeqParams)
}
render () {
const Option = Select.Option
const dataNum = this.props.dataNum
return (
<li>
@ -19,7 +54,7 @@ class ParamsList extends Component {
<Input placeholder="参数名称" className="name" size="large" />
<em className="title">参数说明</em>
<Input placeholder="参数说明" className="name" size="large" />
<span className="close">×</span>
<span className="close" onClick={this.deleteReqParams} data-num={dataNum}>×</span>
</li>
)
}

27
client/containers/AddInterface/ReqParams/ReqParams.js
View File

@ -8,10 +8,19 @@ import {
addReqParams
} from '../../../actions/addInterface.js'
// 重新渲染页面
const getReqList = function (self) {
const [reqList, reqParams] = [[], self.props.reqParams]
reqParams.map((value, key) => {
reqList.push(<ParamsList key={key} dataNum={value.id} />)
})
return reqList
}
@connect(
state => {
return {
seqParams: state.addInterface.seqParams
reqParams: state.addInterface.reqParams
}
},
{
@ -22,7 +31,7 @@ import {
class ReqParams extends Component {
static propTypes = {
addReqParams: PropTypes.func,
seqParams: PropTypes.array
reqParams: PropTypes.array
}
constructor(props) {
@ -31,17 +40,19 @@ class ReqParams extends Component {
@autobind
addSeqParams () {
console.log(1)
let newSeqParams= []
let seqParams = this.props.seqParams
let id = seqParams[seqParams.length-1].id
let reqParams = this.props.reqParams
let id = reqParams[reqParams.length-1].id
let list = {
id: ++id,
paramsName: '',
describe: ''
}
seqParams.push(list)
newSeqParams.push(...seqParams)
// this.props.addReqParams(newSeqParams)
reqParams.push(list)
newSeqParams.push(...reqParams)
console.log(newSeqParams)
this.props.addReqParams(newSeqParams)
}
render () {
@ -50,7 +61,7 @@ class ReqParams extends Component {
<div className="req-params">
<strong className="req-h3">请求参数 :</strong>
<ul>
<ParamsList />
{ getReqList(this) }
</ul>
</div>

37
client/containers/AddInterface/ResParams/ResParams.js
View File

@ -1,12 +1,47 @@
import React, { Component } from 'react'
import { Button } from 'antd'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { autobind } from 'core-decorators'
import ParamsList from './ParamsList.js'
import { addResParams } from '../../../actions/addInterface.js'
@connect(
state => {
return {
resParams: state.addInterface.resParams
}
},
{
addResParams
}
)
class ResParams extends Component {
static propTypes = {
resParams: PropTypes.array,
addResParams: PropTypes.func
}
constructor(props) {
super(props)
}
@autobind
addResParams () {
let newResParams = []
let resParams = this.props.resParams
let id = resParams[resParams.length-1].id
let list = {
id: ++id,
tag: '',
content: ''
}
resParams.push(list)
newResParams.push(...resParams)
this.props.addResParams(newResParams)
}
render () {
return (
<section>
@ -17,7 +52,7 @@ class ResParams extends Component {
</ul>
</div>
<Button type="primary" className="res-save">添加</Button>
<Button type="primary" className="res-save" onClick={this.addResParams}>添加</Button>
</section>
)
}

31
client/reducer/addInterface/addInterface.js
View File

@ -4,7 +4,10 @@ import {
FETCH_ADD_INTERFACE_HEADER_VALUE,
ADD_INTERFACE_SEQ_HEADER,
DELETE_INTERFACE_SEQ_HEADER,
ADD_INTERFACE_REQ_PARAMS
ADD_INTERFACE_REQ_PARAMS,
DELETE_INTERFACE_REQ_PARAMS,
ADD_INTERFACE_RES_PARAMS,
DELETE_INTERFACE_RES_PARAMS
} from '../../constants/action-types.js'
const initialState = {
@ -19,7 +22,14 @@ const initialState = {
content: ''
}
],
seqParams: [
reqParams: [
{
id: 0,
paramsName: '',
describe: ''
}
],
resParams: [
{
id: 0,
paramsName: '',
@ -58,7 +68,22 @@ export default (state = initialState, action) => {
case ADD_INTERFACE_REQ_PARAMS:
return {
...state,
seqParams: action.payload
reqParams: action.payload
}
case DELETE_INTERFACE_REQ_PARAMS:
return {
...state,
reqParams: action.payload
}
case ADD_INTERFACE_RES_PARAMS:
return {
...state,
reqParams: action.payload
}
case DELETE_INTERFACE_RES_PARAMS:
return {
...state,
reqParams: action.payload
}
default:
return state