diff --git a/src/components/Page/Page.less b/src/components/Page/Page.less index b074a94..e180131 100644 --- a/src/components/Page/Page.less +++ b/src/components/Page/Page.less @@ -4,7 +4,7 @@ background: #fff; padding: 24px; box-shadow: @shadow-1; - min-height: ~'calc(100vh - 198px)'; + min-height: ~'calc(100vh - 230px)'; position: relative; } diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json index 7e3afc3..ccff8a7 100644 --- a/src/locales/en/messages.json +++ b/src/locales/en/messages.json @@ -11,4 +11,4 @@ "Switch Theme": "Switch Theme", "Username": "Username", "You have viewed all notifications.": "You have viewed all notifications." -} \ No newline at end of file +} diff --git a/src/locales/zh/messages.json b/src/locales/zh/messages.json index 610646a..972a3e5 100644 --- a/src/locales/zh/messages.json +++ b/src/locales/zh/messages.json @@ -11,4 +11,4 @@ "Switch Theme": "切换主题", "Username": "用户名", "You have viewed all notifications.": "您已查看所有通知" -} \ No newline at end of file +} diff --git a/src/pages/request/index.js b/src/pages/request/index.js index d8e713d..a34bb1c 100644 --- a/src/pages/request/index.js +++ b/src/pages/request/index.js @@ -1,233 +1,252 @@ import React from 'react' -import Mock from 'mockjs' import { request } from 'utils' import { apiPrefix } from 'utils/config' -import { Row, Col, Card, Select, Input, Button } from 'antd' +import { + Row, + Col, + Select, + Input, + Button, + List, + Tag, + Form, + Icon, + Checkbox, +} from 'antd' +import classnames from 'classnames' +import { Trans } from '@lingui/react' import api from '@/services/api' +import { Page } from 'components' import styles from './index.less' -const { - loginUser, - queryUser, - createUser, - updateUser, - removeUser, - queryUserInfo, - queryDashboard, - queryUserList, -} = api +const { Option } = Select +const InputGroup = Input.Group +const methods = ['POST', 'GET', 'PUT', 'PATCH', 'DELETE'] -const transform = string => { - let url = apiPrefix + string +const methodTagColor = { + GET: 'green', + POST: 'orange', + DELETE: 'red', + PUT: 'geekblue', +} + +const requests = Object.values(api).map(item => { + let url = apiPrefix + item let method = 'GET' - - const paramsArray = string.split(' ') + const paramsArray = item.split(' ') if (paramsArray.length === 2) { method = paramsArray[0] url = apiPrefix + paramsArray[1] } return { - url, method, - desc: 'intercept request by mock.js', + url, } -} +}) -export const requestOptions = [ - { - ...transform(queryUserInfo), - }, - { - ...transform(queryDashboard), - }, - { - ...transform(loginUser), - data: { - username: 'guest', - password: 'guest', - }, - }, - { - ...transform(queryUserList), - }, - { - ...transform(queryUser), - data: Mock.mock({ - id: '@id', - }), - }, - { - ...transform(createUser), - data: Mock.mock({ - name: '@cname', - nickName: '@last', - phone: /^1[34578]\d{9}$/, - 'age|11-99': 1, - address: '@county(true)', - isMale: '@boolean', - email: '@email', - avatar() { - return Mock.Random.image( - '100x100', - Mock.Random.color(), - '#757575', - 'png', - this.nickName.substr(0, 1) - ) - }, - }), - }, - { - ...transform(updateUser), - data: Mock.mock({ - id: '@id', - name: '@cname', - }), - }, - { - ...transform(removeUser), - data: Mock.mock({ - id: '@id', - }), - }, - { - url: '/api/v2/test', - desc: 'intercept request by mock.js', - method: 'get', - }, -] - -export default class RequestPage extends React.Component { +let uuid = 2 +@Form.create() +class RequestPage extends React.Component { constructor(props) { super(props) this.state = { - currntRequest: requestOptions[0], - method: 'get', - result: '', + method: 'GET', + url: '/api/v1/routes', + keys: [1], + result: null, + visible: true, } } - componentDidMount() { - this.handleRequest() - } handleRequest = () => { - const { currntRequest } = this.state - const { desc, ...requestParams } = currntRequest - this.setState({ - ...this.state, - result: ( -
- 请求中 -
- url: - {currntRequest.url} -
- method: - {currntRequest.method} -
- params: - {currntRequest.data ? JSON.stringify(currntRequest.data) : 'null'} -
-
- ), - }) - request({ ...requestParams }).then(data => { - const { state } = this - state.result = [ - this.state.result, -
-
请求完成
- {JSON.stringify(data)} -
, - ] - this.setState(state) + const { method, url } = this.state + + this.props.form.validateFields((err, values) => { + if (!err) { + const params = {} + if (values.key) { + values.key.forEach((item, index) => { + if (item && values.check[index]) { + params[item] = values.value[index] + } + }) + } + + request({ method, url, data: params }).then(data => { + this.setState({ + result: JSON.stringify(data), + }) + }) + } }) } - handeleURLChange = value => { - const { state } = this - const curretUrl = value.split('?')[0] - const curretMethod = value.split('?')[1] - const currntItem = requestOptions.filter(item => { - const { method = 'get' } = item - return curretUrl === item.url && curretMethod === method + handleClickListItem = ({ method, url }) => { + this.setState({ + method, + url, + keys: [uuid++], + result: null, + }) + } + + handleInputChange = e => { + this.setState({ + url: e.target.value, + }) + } + + handleSelectChange = method => { + this.setState({ + method, + }) + } + + handleAddField = () => { + const { keys } = this.state + const nextKeys = keys.concat(uuid) + uuid++ + this.setState({ + keys: nextKeys, + }) + } + + handleRemoveField = key => { + const { keys } = this.state + this.setState({ + keys: keys.filter(item => item !== key), + }) + } + + handleVisible = () => { + this.setState({ + visible: !this.state.visible, }) - const [currntRequest] = currntItem - state.currntRequest = currntRequest - this.setState(state) } render() { - const colProps = { - lg: 12, - md: 24, - } - const { result, currntRequest } = this.state - const { method = 'get' } = currntRequest + const { result, url, method, keys, visible } = this.state + const { getFieldDecorator } = this.props.form return ( -
- - - -
- + + {item.method} + + + {item.url} + + )} + /> + + + + + + -
- {currntRequest.desc} -
-
-
{result}
- + + + + + + +
+ {keys.map((key, index) => ( + + + {getFieldDecorator(`check[${key}]`, { + initialValue: true, + })()} + + + {getFieldDecorator(`key[${key}]`)( + + )} + + + {getFieldDecorator(`value[${key}]`)( + + )} + + + + + + ))} + + + + +
+ +
{result}
-
+ ) } } + +export default RequestPage diff --git a/src/pages/request/index.less b/src/pages/request/index.less index ac6df1e..a878f39 100644 --- a/src/pages/request/index.less +++ b/src/pages/request/index.less @@ -1,29 +1,39 @@ -.option { - display: flex; - justify-content: space-between; -} +@import '~themes/vars'; .result { height: 600px; width: 100%; - background: #f7f7f7; - border-color: #f1f1f1; - padding: 16px 8px; + background: @hover-color; + border-color: #ddd; + padding: 16px; margin-top: 16px; word-break: break-word; - line-height: 24px; + line-height: 2; overflow: scroll; } -.params { - display: flex; - justify-content: space-between; - margin-top: 16px; - line-height: 32px; +.requestList { + padding-right: 24px; + margin-bottom: 24px; + .listItem { + cursor: pointer; + padding-left: 8px; + &.lstItemActive { + background-color: @hover-color; + } + .background-hover(); + } +} - .label { - width: 100px; - margin-right: 2px; - text-transform: uppercase; +.paramsBlock { + overflow: visible; + opacity: 1; + height: auto; + transition: opacity 0.3s; + &.hideParams { + width: 0; + height: 0; + opacity: 0; + overflow: hidden; } } diff --git a/src/pages/request/index.test.js b/src/pages/request/index.test.js deleted file mode 100644 index 9d8387f..0000000 --- a/src/pages/request/index.test.js +++ /dev/null @@ -1,7 +0,0 @@ -import { requestOptions } from './index' - -describe('test requestOptions', () => { - it('get right desc', () => { - expect(requestOptions[1].desc).toEqual('intercept request by mock.js') - }) -})