fix: 修复用户管理显示及view的样式

This commit is contained in:
qitmac000249 2017-08-15 16:55:46 +08:00
parent f8bb4335ef
commit 7ed167d75f
6 changed files with 201 additions and 102 deletions

View File

@ -1,14 +1,23 @@
<<<<<<< HEAD
import '../interface.scss'
import './View.scss'
import React, { Component } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { formatTime } from '../../../../common.js';
import { Table } from 'antd'
const mockEditor = require('./mockEditor.js')
// import { formatTime } from '../../../../common.js';
// import { Card } from 'antd'
// import { getMockUrl } from '../../reducer/modules/news.js'
@connect()
@connect(state=>{
console.log(state);
return {
curData: state.inter.curdata
}
})
class View extends Component {
constructor(props) {
@ -18,98 +27,162 @@ class View extends Component {
viewData: PropTypes.object
}
componentDidMount() {
let that = this;
mockEditor({
container: 'req_body_json',
data: that.props.req_body_form,
onChange: function () {}
})
mockEditor({
container: 'res_body_json',
data: that.props.res_body,
onChange: function () {}
})
mockEditor({
container: 'req_query_json',
data: that.props.req_query,
onChange: function () {}
})
}
render () {
const dataSource = [{
name: '1',
value: '胡彦斌',
desc: 32
}, {
name: '2',
value: '胡彦斌',
desc: 32
}];
const columns = [{
title: '参数名称',
dataIndex: 'name',
key: 'name'
}, {
title: '参数值',
dataIndex: 'value',
key: 'value'
}, {
title: '备注',
dataIndex: 'desc',
key: 'desc',
width: '45%'
}];
return <div className="caseContainer">
{/*<Card title={`接口名:${this.props.viewData.casename}`}></Card>*/}
<div className="casename">
<div className="colName">
<span className="colKey">接口名</span>
<span className="colValue">{this.props.viewData.casename}</span>
</div>
<div className="colTime">
<span className="colKey">添加时间</span>
<span className="colValue">{formatTime(this.props.viewData.add_time/1000)}</span>
</div>
<div className="colTime">
<span className="colKey">更新时间</span>
<span className="colValue">{formatTime(this.props.viewData.up_time/1000)}</span>
</div>
<div className="colEnv">
<span className="colKey">测试环境</span>
<span className="colValue">{this.props.viewData.env}</span>
</div>
<div className="colDomain">
<span className="colKey">域名</span>
<span className="colValue">{this.props.viewData.domain}</span>
<span className="colValue">{this.props.viewData.title}</span>
</div>
<div className="colPath">
<span className="colKey">路径</span>
<span className="colKey">接口路径</span>
<span className="colValue">{this.props.viewData.path}</span>
</div>
<div className="colMethod">
<span className="colKey">请求方法</span>
<span className="colValue">{this.props.viewData.method}</span>
<div className="colstatus">
<span className="colKey">状态</span>
<span className="colValue">{this.props.viewData.status}</span>
</div>
<div className="colMock">
<span className="colKey">Mock地址</span>
<span className="colValue">{this.props.viewData.mockUrl}</span>
</div>
<div className="colDesc">
<span className="colKey">接口描述</span>
<span className="colValue">{this.props.viewData.desc}</span>
</div>
<div className="colHeader">
<span className="colKey">请求Headers</span>
<Table size="small" pagination = {false} columns= {columns} dataSource = {dataSource} />
</div>
<div className="colQuery">
<span className="colKey">Query</span>
<div span={18} offset={4} id="req_query_json" style={{ minHeight: "150px" }}></div>
</div>
<div className="colBody">
<span className="colKey">请求Body</span>
<div span={18} offset={4} id="req_body_json" style={{ minHeight: "300px" }}></div>
</div>
<div className="colBody">
<span className="colKey">响应Body</span>
<div span={18} offset={4} id="res_body_json" style={{ minHeight: "300px" }}></div>
</div>
</div>
}
}
View.defaultProps = {
viewData: {
casename:"caename",
uid: 107,
col_id: 211,
index: 0,
project_id: 112,
add_time: new Date().getTime(),
up_time: new Date().getTime(),
env: "测试环境",
domain: "域名",
path: "路径",
method: "GET",
req_query: [{
name: "String",
value: "String"
}],
req_headers: [{
name: "String",
value: "String"
}],
req_body_type: "json",
res_body_form: [{
name: "String",
value: "String"
}],
res_body_other: "String"
}
let data = {
title: '',
path: '',
status: 'undone',
method: 'get',
req_query: [{
name: '',
desc: '',
required: "1"
}],
req_body_type: 'form',
req_headers: [{
name: '',
value: '', required: "1"
}],
req_body_form: [{
name: '',
type: '',
required: ''
}],
res_body_type: 'json',
res_body: '{a:123}',
desc: 'FP的好处是没有OO的复杂仪式感是沿着数据结构+算法的思路进行抽象和结构化。如果顶层设计做好,代码复用度极高,代码量少。比如要生成一颗树我用迭归算法直接生成',
res_body_mock: '',
mockUrl: "this.props.mockUrl"
}
// {
// casename:"caename",
// uid: 107,
// col_id: 211,
// index: 0,
// project_id: 112,
// add_time: new Date().getTime(),
// up_time: new Date().getTime(),
// env: "测试环境",
// domain: "域名",
// path: "路径",
// method: "GET",
// req_query: [{
// name: "String",
// value: "String",
// required: "1"
// }],
// req_headers: [{
// name: "String",
// value: "String",
// required: "1"
// }],
// req_body_type: "json",
// res_body_form: [{
// name: "String",
// value: "String",
// required: "1"
// }],
// res_body_other: "String"
// }
View.defaultProps = {
viewData: data
}
export default View
=======
import React,{Component} from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux';
@connect(
state => {
return {
curdata: state.inter.curdata
}
}
)
class InterfaceView extends Component{
static propTypes = {
curdata: PropTypes.object
}
render(){
console.log(this.props.curdata)
let view = JSON.stringify(this.props.curdata, null, " ");
return <pre>
{view}
</pre>
}
}
export default InterfaceView;
>>>>>>> fe76f992f0b0251fce75b3fb564ace43565ab8b4

View File

@ -0,0 +1,35 @@
.caseContainer{
padding: 24px;
font-size: 12px;
// display: flex;
overflow: hidden;
>div{
margin: 8px 0px;
// background-color: #ececec;
padding: 16px;
width: 100%;
box-sizing: border-box;
float: left;
.colKey{
font-weight: bolder;
margin-right: 16px;
}
}
.colName,.colPath,.colstatus,.colMock{
width: 50%;
float: left;
padding: 8px 16px;
}
.colDesc{
line-height: 1.5em;
.colKey{
margin-right: 0px;
float: left;
margin-bottom: 8px;
}
.colValue{
float: left;
text-indent: 2em;
}
}
}

View File

@ -65,19 +65,7 @@
}
}
}
.caseContainer{
padding: 24px;
font-size: 12px;
>div{
margin: 8px 0px;
padding: 12px;
background-color: #ececec;
.colKey{
font-weight: bolder;
margin-right: 16px;
}
}
}

View File

@ -152,7 +152,7 @@ class Profile extends Component {
userNameEditHtml = <div >
<span className="text">{userinfo.username}</span>&nbsp;&nbsp;
{/*<span className="text-button" onClick={() => { this.handleEdit('usernameEdit', true) }}><Icon type="edit" />修改</span>*/}
{userType?<Button icon="edit" onClick={() => { this.handleEdit('usernameEdit', true) }}>修改</Button>:""}
{<Button icon="edit" onClick={() => { this.handleEdit('usernameEdit', true) }}>修改</Button>}
</div>
} else {
userNameEditHtml = <div>

View File

@ -9,7 +9,6 @@ import Profile from './Profile.js'
import { Row } from 'antd';
import Subnav from '../../components/Subnav/Subnav.js';
@connect(state=>{
console.log(state);
return {
curUid: state.user.uid,
userType: state.user.type,
@ -31,7 +30,7 @@ class User extends Component {
}
componentDidMount () {
console.log(this.props.match)
// console.log(this.props.match)
}
render () {
@ -41,7 +40,7 @@ class User extends Component {
}];
if(this.props.role === "admin"){
navData.push({
name: '成员管理',
name: '用户管理',
path: '/user/list'
})
}

View File

@ -18,7 +18,8 @@ const initialState = {
uid: null,
email: '',
loginState: LOADING_STATUS,
loginWrapActiveKey: "1"
loginWrapActiveKey: "1",
role: ""
};
export default (state = initialState, action) => {
@ -40,7 +41,8 @@ export default (state = initialState, action) => {
isLogin: true,
loginState: MEMBER_STATUS,
uid: action.payload.data.data.uid,
userName: action.payload.data.data.username
userName: action.payload.data.data.username,
role: action.payload.data.data.role
};
} else {
return state;
@ -52,7 +54,8 @@ export default (state = initialState, action) => {
isLogin: false,
loginState: GUEST_STATUS,
userName: null,
uid: null
uid: null,
role: ""
}
}
case LOGIN_TYPE: {
@ -79,6 +82,7 @@ export default (state = initialState, action) => {
export function checkLoginState() {
return(dispatch)=> {
axios.get('/api/user/status').then((res) => {
console.log(res)
dispatch({
type: GET_LOGIN_STATE,
payload: res