forge
sylor_huang@126.com 5 years ago
commit 83cdc12591

@ -12,10 +12,18 @@ const FileNew = Loadable({
loader: () => import('../Newfile/Index'), loader: () => import('../Newfile/Index'),
loading: Loading, loading: Loading,
}) })
const TagList = Loadable({
loader: () => import('../Order/Tags'),
loading: Loading,
})
const OrderNew = Loadable({ const OrderNew = Loadable({
loader: () => import('../Order/New'), loader: () => import('../Order/New'),
loading: Loading, loading: Loading,
}) })
const OrderDetail = Loadable({
loader: () => import('../Order/Detail'),
loading: Loading,
})
const OrderIndex = Loadable({ const OrderIndex = Loadable({
loader: () => import('../Order/order'), loader: () => import('../Order/order'),
loading: Loading, loading: Loading,
@ -196,6 +204,19 @@ class Detail extends Component{
} }
></Route> ></Route>
{/* 标签列表 */}
<Route path="/projects/:projectsId/orders/tags"
render={
(props) => (<TagList {...this.props} {...props} {...this.state}/>)
}
></Route>
{/* 工单详情 */}
<Route path="/projects/:projectsId/orders/:orderId/detail"
render={
(props) => (<OrderDetail {...this.props} {...props} {...this.state}/>)
}
></Route>
{/* 新建工单 */} {/* 新建工单 */}
<Route path="/projects/:projectsId/orders/new" <Route path="/projects/:projectsId/orders/new"

@ -0,0 +1,56 @@
import React , {Component} from 'react';
import {Link} from 'react-router-dom';
import axios from 'axios';
import Nav from './Nav';
class Detail extends Component{
constructor(props){
super(props);
this.state={
data:undefined
}
}
componentDidMount=()=>{
this.getDetail();
}
getDetail=()=>{
const { projectsId , orderId} = this.props.match.params;
const url = `/projects/${projectsId}/issues/${orderId}.json`;
axios.get(url).then((result)=>{
if(result){
}
}).catch((error)=>{
console.log(error);
})
}
render(){
const { projectsId } = this.props.match.params;
return(
<div className="main">
<div className="topWrapper">
<Nav {...this.props} {...this.state}/>
<Link to={`/projects/${projectsId}/orders/new`} className="topWrapper_btn">创建工单</Link>
</div>
<div>
<div className="detailContent">
<p>
<span className="font-16">科技生活</span>
<a onClick={this.editOrder} className="color-blue fr">编辑</a>
</p>
<p className="mt10">
</p>
</div>
</div>
</div>
)
}
}
export default Detail;

@ -3,9 +3,10 @@ import { Link } from 'react-router-dom';
import './order.css' import './order.css'
class Nav extends Component{ class Nav extends Component{
render(){ render(){
const { projectsId } = this.props.match.params;
return( return(
<p className="topWrapper_nav"> <p className="topWrapper_nav">
<Link to={``} >标签</Link> <Link to={`/projects/${projectsId}/orders/tags`} >标签</Link>
<Link to={``}>里程碑</Link> <Link to={``}>里程碑</Link>
</p> </p>
) )

@ -107,7 +107,7 @@ class New extends Component{
return( return(
<div className="main"> <div className="main">
<div className="topWrapper"> <div className="topWrapper">
<Nav /> <Nav {...this.props} {...this.state} />
</div> </div>
<Form> <Form>
<div className="f-wrap-between mt20" style={{alignItems:"flex-start"}}> <div className="f-wrap-between mt20" style={{alignItems:"flex-start"}}>

@ -1,9 +1,10 @@
import React , { Component } from 'react'; import React , { Component } from 'react';
import { Link } from 'react-router-dom';
class OrderItem extends Component{ class OrderItem extends Component{
render(){ render(){
const { issues , search_count , page , limit } = this.props; const { issues , search_count , page , limit } = this.props;
const { projectsId } = this.props.match.params;
const renderList =()=>{ const renderList =()=>{
if(issues && issues.length > 0){ if(issues && issues.length > 0){
return( return(
@ -13,7 +14,7 @@ class OrderItem extends Component{
<div className="flex-1"> <div className="flex-1">
<p className="mb15 df"> <p className="mb15 df">
<span className="issueNo"># {search_count - (key + (page-1) * limit)}</span> <span className="issueNo"># {search_count - (key + (page-1) * limit)}</span>
<span className="flex-1 hide-1 font-16 color-grey-3 lineh-30">{item.name}</span> <Link to={`/projects/${projectsId}/orders/${item.id}/detail`} className="flex-1 hide-1 font-16 color-grey-3 lineh-30">{item.name}</Link>
</p> </p>
<p className="color-grey-6"> <p className="color-grey-6">
<span>{item.created_at}</span> <span>{item.created_at}</span>

@ -0,0 +1,134 @@
import React , {Component} from 'react';
import { Dropdown , Icon , Menu , Pagination } from 'antd';
import { Link } from 'react-router-dom';
import Nav from './Nav';
import NoneData from '../../modules/courses/coursesPublic/NoneData';
import axios from 'axios';
class Tags extends Component{
constructor(props){
super(props);
this.state={
data:undefined,
limit:15,
page:1,
order_name:undefined,
order_type:undefined
}
}
componentDidMount=()=>{
this.getList();
}
getList=(page,order_name,order_type)=>{
const { projectsId } = this.props.match.params;
const { limit } = this.state;
const url = `/projects/${projectsId}/issue_tags.json`;
axios.get(url,{
params:{
page,limit,order_name,order_type
}
}).then((result)=>{
if(result){
this.setState({
data:result.data
})
}
}).catch((error)=>{
console.log(error);
})
}
ChangePage=(page)=>{
this.setState({
page
})
this.getList(page);
}
// 排序
arrayList=(e)=>{
this.setState({
order_name:e.key,
order_type:e.item.props.value
})
this.getList(1,e.key,e.item.props.value);
}
render(){
const { data , limit , page } = this.state;
const { projectsId } = this.props.match.params;
const menu = (
<Menu onClick={this.arrayList}>
<Menu.Item key={'created_at'} value="desc">按创建时间降序排序</Menu.Item>
<Menu.Item key={'created_at'} value="asc">按创建时间升序排序</Menu.Item>
<Menu.Item key={'issues_count'} value="desc">按issue个数降序排序</Menu.Item>
<Menu.Item key={'issues_count'} value="asc">按issue个数升序排序</Menu.Item>
</Menu>
)
const Paginations = (
<React.Fragment>
{
data && data.issue_tags_count > limit ?
<div className="mt30 mb50 edu-txt-center">
<Pagination simple defaultCurrent={page} total={data && data.issue_tags_count} pageSize={limit} onChange={this.ChangePage}></Pagination>
</div>:""
}
</React.Fragment>
)
const renderList =()=>{
if(data && data.issue_tags && data.issue_tags.length>0 ){
return(
<div className="tagList">
{
data.issue_tags.map((item,key)=>{
return(
<div>
<span className="f-wrap-alignCenter">
<span style={{backgroundColor:`${item.color}`}} className="tagColor"></span>
{item.name}
</span>
<span className="hide-1">{item.description}</span>
<span>{item.issues_count}个开启的工单</span>
</div>
)
})
}
</div>
)
}else{
return(
<NoneData />
)
}
}
return(
<div className="main">
<div>
<div className="topWrapper">
<Nav {...this.props} {...this.state} />
<Link to={`/projects/${projectsId}/orders/new`} className="topWrapper_btn">新建标签</Link>
</div>
<div className="topWrapper">
<span>{ data && data.issue_tags_count }个标签</span>
<ul className="topWrapper_select">
<li>
<Dropdown className="topWrapperSelect" overlay={menu} trigger={['click']} placement="bottomCenter">
<span>标签<Icon type="caret-down" className="ml5" /></span>
</Dropdown>
</li>
</ul>
</div>
{ renderList() }
{ Paginations }
</div>
</div>
)
}
}
export default Tags;

@ -150,6 +150,35 @@
margin-bottom: 0px; margin-bottom: 0px;
} }
/* 工单标签列表 */
.tagList > div{
border-bottom: 1px dashed #f4f4f4;
display: flex;
justify-content: space-around;
padding:15px 0px;
}
.tagList > div:last-child{
border-bottom: none;
}
.tagList > div > span{
display: block
}
.tagList > div > span:nth-child(2){
width: 450px;
}
.tagColor{
display: inline-block;
width:20px;
height: 15px;
border-radius: 4px;
margin-right: 5px;
}
/* 工单详情 */
.detailContent{
padding:15px 0px;
border-bottom: 1px solid #f4f4f4;
}
@media screen and (max-width: 700px){ @media screen and (max-width: 700px){
.topWrapper_select li{ .topWrapper_select li{
width:auto; width:auto;

@ -63,13 +63,14 @@ class order extends Component{
} }
// 获取列表数据 // 获取列表数据
getIssueList=(page,limit,search,author_id,assigned_to_id,issue_type)=>{ getIssueList=(page,limit,search,author_id,assigned_to_id,id,value)=>{
const { projectsId } = this.props.match.params; const { projectsId } = this.props.match.params;
const url = `/projects/${projectsId}/issues.json`; const url = `/projects/${projectsId}/issues.json`;
axios.get(url,{ axios.get(url,{
params:{ params:{
page,limit,search,author_id,assigned_to_id,issue_type page,limit,search,author_id,assigned_to_id,
[id]:value
} }
}).then((result)=>{ }).then((result)=>{
if(result){ if(result){
@ -90,13 +91,13 @@ class order extends Component{
[id]:e.key [id]:e.key
}) })
const { page,limit,search,author_id,assigned_to_id } = this.state; const { page,limit,search,author_id,assigned_to_id } = this.state;
this.getIssueList(page,limit,search,author_id,assigned_to_id,e.key); this.getIssueList(page,limit,search,author_id,assigned_to_id,id,e.key);
} }
renderMenu =(array,name,id)=>{ renderMenu =(array,name,id)=>{
return( return(
<Menu> <Menu>
<Menu.Item key="0" onClick={(e)=>this.getOption(e,id)}>{name}</Menu.Item> <Menu.Item key={undefined} onClick={(e)=>this.getOption(e,id)}>{name}</Menu.Item>
{ {
array && array.length > 0 && array.map((item,key)=>{ array && array.length > 0 && array.map((item,key)=>{
return( return(
@ -179,7 +180,7 @@ class order extends Component{
return( return(
<div className="main"> <div className="main">
<div className="topWrapper"> <div className="topWrapper">
<Nav /> <Nav {...this.props} {...this.state}/>
<Link to={`/projects/${projectsId}/orders/new`} className="topWrapper_btn">创建工单</Link> <Link to={`/projects/${projectsId}/orders/new`} className="topWrapper_btn">创建工单</Link>
</div> </div>
<div className="topWrapper" style={{borderBottom:"none"}}> <div className="topWrapper" style={{borderBottom:"none"}}>
@ -246,7 +247,7 @@ class order extends Component{
search_count === 0 ? search_count === 0 ?
<NoneData></NoneData> <NoneData></NoneData>
: :
<OrderItem issues={issues} search_count={search_count} page={page} limit={limit}></OrderItem> <OrderItem issues={issues} search_count={search_count} page={page} limit={limit} {...this.props} {...this.state}></OrderItem>
} }
{ Paginations } { Paginations }
</Spin> </Spin>

Loading…
Cancel
Save