opti: 状态样式优化

This commit is contained in:
wenbo.dong 2017-09-08 15:52:18 +08:00
parent fd1ea811e6
commit a77079df61
3 changed files with 27 additions and 18 deletions

View File

@ -3,7 +3,7 @@ import { connect } from 'react-redux';
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import axios from 'axios' import axios from 'axios'
import { import {
Table, Tag, Button, Modal, message, Tooltip Table, Button, Modal, message, Tooltip
} from 'antd'; } from 'antd';
import AddInterfaceForm from './AddInterfaceForm'; import AddInterfaceForm from './AddInterfaceForm';
import { fetchInterfaceList} from '../../../../reducer/modules/interface.js'; import { fetchInterfaceList} from '../../../../reducer/modules/interface.js';
@ -134,16 +134,16 @@ class InterfaceList extends Component {
title: '状态', title: '状态',
dataIndex: 'status', dataIndex: 'status',
key: 'status', key: 'status',
width: 12, width: 14,
render: (item) => { render: (item) => {
return <div>{item === 'done' ? return <div>{item === 'done' ?
<Tag color="#87d068">完成</Tag> <span className="tag-status done">已完成</span>
: :
<Tag color="#f50">未完成</Tag> <span className="tag-status undone">未完成</span>
}</div> }</div>
}, },
filters: [{ filters: [{
text: '完成', text: '完成',
value: 'done' value: 'done'
}, { }, {
text: '未完成', text: '未完成',

View File

@ -234,20 +234,10 @@ class View extends Component {
}]; }];
let status = { let status = {
undone: "未完成", undone: "未完成",
done: "完成" done: "已完成"
}
let statusColor = {
undone: {
bac: "rgb(255, 85, 0)",
color: "white"
},
done:{
bac: "rgb(135, 208, 104)",
color: "white"
}
} }
let methodColor = variable.METHOD_COLOR[this.props.curData.method?this.props.curData.method.toLowerCase():"get"]; let methodColor = variable.METHOD_COLOR[this.props.curData.method?this.props.curData.method.toLowerCase():"get"];
statusColor = statusColor[this.props.curData.status?this.props.curData.status.toLowerCase():"undone"]; // statusColor = statusColor[this.props.curData.status?this.props.curData.status.toLowerCase():"undone"];
let h = this.countEnter(this.props.curData.req_body_other); let h = this.countEnter(this.props.curData.req_body_other);
const aceEditor = <div style={{display:this.props.curData.req_body_other&&this.props.curData.req_body_type==="json"?"block":"none"}} className="colBody"> const aceEditor = <div style={{display:this.props.curData.req_body_other&&this.props.curData.req_body_type==="json"?"block":"none"}} className="colBody">
<span className="colKey">请求Body</span> <span className="colKey">请求Body</span>
@ -269,7 +259,7 @@ class View extends Component {
</div> </div>
<div className="colstatus"> <div className="colstatus">
<span className="colKey">状态</span> <span className="colKey">状态</span>
<span style={{backgroundColor:statusColor.bac,color: statusColor.color}} className="colValue">{status[this.props.curData.status]}</span> <span className={'tag-status ' + this.props.curData.status}>{status[this.props.curData.status]}</span>
</div> </div>
<div className="colAddTime"> <div className="colAddTime">
<span className="colKey">创建时间</span> <span className="colKey">创建时间</span>

View File

@ -97,3 +97,22 @@ em {
width: min-content !important; width: min-content !important;
} }
} }
.tag-status {
&::before {
content: '';
display: inline-block;
margin-right: 6px;
width: 7px;
height: 7px;
border-radius: 50%;
position: relative;
bottom: 1px;
}
&.done::before {
background-color: #57cf27;
}
&.undone::before {
background-color: #ff561b;
}
}