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

client/containers/Project/Interface/InterfaceList/View.js

@@ -1,14 +1,23 @@
-<<<<<<< HEAD
+import './View.scss'
-import '../interface.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>
+        <span className="colValue">{this.props.viewData.title}</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>
       </div>
       <div className="colPath">
-        <span className="colKey">路径：</span>
+        <span className="colKey">接口路径：</span>
         <span className="colValue">{this.props.viewData.path}</span>
       </div>
-      <div className="colMethod">
+      <div className="colstatus">
-        <span className="colKey">请求方法：</span>
+        <span className="colKey">状态：</span>
-        <span className="colValue">{this.props.viewData.method}</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 = {
+let data = {
-  viewData: {
+  title: '',
-    casename:"caename",
+  path: '',
-    uid: 107,
+  status: 'undone',
-    col_id: 211,
+  method: 'get',
-    index: 0,
-    project_id: 112,
-    add_time: new Date().getTime(),
-    up_time: new Date().getTime(),
-    env: "测试环境",
-    domain: "域名",
-    path: "路径",
-    method: "GET",
   req_query: [{
-      name: "String", 
+    name: '',
-      value: "String"
+    desc: '',
+    required: "1"
   }],
+  req_body_type: 'form',
   req_headers: [{
-      name: "String", 
+    name: '',
-      value: "String"
+    value: '', required: "1"
   }],
-    req_body_type: "json",
+  req_body_form: [{
-    res_body_form: [{
+    name: '',
-      name: "String", 
+    type: '',
-      value: "String"
+    required: ''
   }],
-    res_body_other: "String"
+  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

client/containers/Project/Interface/InterfaceList/View.scss

@@ -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;
+        }
+    }
+}

client/containers/Project/Interface/interface.scss

@@ -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;
-        }
-    }
-}
 
 
 

client/containers/User/Profile.js

@@ -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>

client/containers/User/User.js

@@ -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'
       })
     }

client/reducer/modules/user.js

@@ -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