forked from Gitlink/forgeplus-react
Merge pull request '易修声明功能' (#310) from starlee/forgeplus-react:lzx-claim-2.0 into gitlink_server
This commit is contained in:
commit
459e05f465
|
|
@ -7,6 +7,7 @@ import { Form, Popconfirm, Tag, Spin } from "antd";
|
|||
import Attachments from "../Upload/attachment";
|
||||
import RenderHtml from "../../components/render-html";
|
||||
import Comments from "../comments/comments";
|
||||
import Claims from "../claims/claims"
|
||||
import "./order.css";
|
||||
|
||||
class Detail extends Component {
|
||||
|
|
@ -310,6 +311,10 @@ class Detail extends Component {
|
|||
/>
|
||||
</div>
|
||||
<div className="list-left list-left-padding">
|
||||
<div className="list-right-item-padding background-f boder-4">
|
||||
<Claims issue_id={orderId} {...this.props} />
|
||||
</div>
|
||||
|
||||
<div className="list-right-item-padding background-f boder-4">
|
||||
<p className="grid-item-left pb15">
|
||||
<span className="issue_detail_info">负责人:</span>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,73 @@
|
|||
.infoCount{
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
background-color:rgba(153, 153, 153, 0.13);;
|
||||
color:#666;
|
||||
border-radius: 12px;
|
||||
margin-left: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.menuPanels{
|
||||
width: 295px;
|
||||
.leftline{
|
||||
position: relative;
|
||||
color: #666;
|
||||
height: 16px;
|
||||
margin-left: 14px;
|
||||
font-size: 12px;
|
||||
&::before{
|
||||
position: absolute;
|
||||
left: -7px;
|
||||
top:3px;
|
||||
height: 12px;
|
||||
width: 1px;
|
||||
background-color: #999;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.downMenu{
|
||||
width: 329px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 1px 8px 1px rgba(212, 212, 212, 0.5);
|
||||
padding-bottom: 14px;
|
||||
.ant-menu-item{
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.claimNote_input{
|
||||
// up, right, botton, left
|
||||
margin: 5px 10px 5px 10px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.claimNote{
|
||||
// up, right, botton, left
|
||||
margin: 5px 14px 0px 14px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.attrPerson{
|
||||
padding-top: 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: 2px;
|
||||
a{
|
||||
margin: 0px 17px 10px 0px;
|
||||
img{
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
&:nth-child(5n){
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,277 @@
|
|||
import React, { Component } from "react";
|
||||
import axios from "axios";
|
||||
import { AlignCenter , FlexAJ } from '../Component/layout';
|
||||
import { Popover, List, Button, Dropdown, Input} from "antd";
|
||||
import { Link } from "react-router-dom";
|
||||
import { getImageUrl } from "educoder";
|
||||
import "./claim.scss"
|
||||
const { TextArea } = Input;
|
||||
|
||||
class claims extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
claimerdata: new Array(),
|
||||
currentUserClaimed:0,
|
||||
issue_id:this.props.issue_id,
|
||||
claimNoteBody:'',
|
||||
claimNoteBodyChanged:false,
|
||||
claimNotePop:false
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
getClaimers = ()=>{
|
||||
const {issue_id} = this.state;
|
||||
axios.get(`/issues/${issue_id}/claims.json`)
|
||||
.then((result) => {
|
||||
if(result){
|
||||
console.log(result.data),
|
||||
this.setState({
|
||||
claimerdata: result.data.claimers,
|
||||
currentUserClaimed: result.data.currentUserclaimed,
|
||||
});
|
||||
}
|
||||
}).catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
|
||||
delClaim = () => {
|
||||
if (this.props.checkIfLogin() === false) {
|
||||
this.props.showLoginDialog();
|
||||
return;
|
||||
} else {
|
||||
const {issue_id} = this.state;
|
||||
axios({
|
||||
method: 'delete',
|
||||
url: `/issues/${issue_id}/claims.json`
|
||||
}).then(result => {
|
||||
this.setState({
|
||||
claimerdata: result.data.claimers,
|
||||
currentUserClaimed: result.data.currentUserclaimed,
|
||||
claimNotePop:false,
|
||||
claimNoteBody:'',
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
changeClaimNote = (e)=>{
|
||||
this.setState({
|
||||
claimNoteBody: e.target.value,
|
||||
claimNoteBodyChanged: true,
|
||||
});
|
||||
};
|
||||
|
||||
yesClaim = ()=>{
|
||||
const {issue_id,claimNoteBody} = this.state;
|
||||
|
||||
axios.post(`/issues/${issue_id}/claims.json`, {
|
||||
claim_note: claimNoteBody
|
||||
})
|
||||
.then(result => {
|
||||
this.setState({
|
||||
claimerdata: result.data.claimers,
|
||||
currentUserClaimed: result.data.currentUserclaimed,
|
||||
claimNotePop:false,
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
|
||||
addClaim = ()=> {
|
||||
if (this.props.checkIfLogin() === false) {
|
||||
this.props.showLoginDialog();
|
||||
return;
|
||||
}else{
|
||||
this.setState({
|
||||
claimNotePop: true,
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
updateClaim = (claimId,key)=>{
|
||||
const {issue_id,claimNoteBody,claimNoteBodyChanged} = this.state;
|
||||
if(claimNoteBodyChanged){
|
||||
axios.put(`/issues/${issue_id}/claims.json`, {
|
||||
claim_note: claimNoteBody,
|
||||
claim_id: claimId
|
||||
})
|
||||
.then(result => {
|
||||
this.setState({
|
||||
claimerdata: result.data.claimers,
|
||||
currentUserClaimed: result.data.currentUserclaimed,
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
this.setVisibleFunc(false,key)
|
||||
};
|
||||
|
||||
|
||||
|
||||
cancleClaim = ()=>{
|
||||
this.setState({
|
||||
claimNotePop: false,
|
||||
})
|
||||
};
|
||||
|
||||
componentDidMount = () => {
|
||||
this.getClaimers();
|
||||
};
|
||||
|
||||
|
||||
setVisibleFunc = (flag,index) => {
|
||||
const {claimerdata} = this.state
|
||||
var lx = claimerdata.concat();
|
||||
lx.map(i=>i.visible =false);
|
||||
if(flag){
|
||||
lx[index].visible = flag;
|
||||
}
|
||||
lx.splice();
|
||||
this.setState({
|
||||
claimerdata:lx
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
claimerdata,
|
||||
currentUserClaimed,
|
||||
issue_id
|
||||
} = this.state;
|
||||
|
||||
const rednerlist = (item)=>{
|
||||
return (
|
||||
<div>
|
||||
<Link to={`/${item && item.user_login}`} className="show-user-link">
|
||||
<img
|
||||
className="radius"
|
||||
src={getImageUrl(`/${item && item.user_picture}`)}
|
||||
alt=""
|
||||
width="30"
|
||||
height="30"/>
|
||||
</Link>
|
||||
<Link to={`/${item && item.user_login}`}
|
||||
className="show-user-link color-black ml10 fwb">
|
||||
{item && item.user_name}
|
||||
</Link>
|
||||
<span className="color-grey-8"> 声明于 {item.created_at}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderClaim = ()=>{
|
||||
return(
|
||||
<div className="claimNote_input">
|
||||
<span> 声明留言：</span> <br/>
|
||||
<TextArea rows={4} type="text" placeholder="例如可以留言你的解决思路......" onChange={this.changeClaimNote}/><br/><br/>
|
||||
<div style={{display:"flex",justifyContent:'center'}}>
|
||||
<Button onClick={()=>this.cancleClaim()} >取 消</Button>
|
||||
<Button onClick={()=>this.yesClaim()} style={{marginLeft:"20px"}} type={'primary'} >确 认</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
const renderUser = (item,key)=>{
|
||||
const { current_user} = this.props;
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FlexAJ className="menuMaininfos">
|
||||
<AlignCenter>
|
||||
<Link to={`/${item && item.user_login}`} className="show-user-link">
|
||||
<img
|
||||
className="radius"
|
||||
src={getImageUrl(`/${item && item.user_picture}`)}
|
||||
alt=""
|
||||
width="30"
|
||||
height="30"/>
|
||||
</Link>
|
||||
<Link to={`/${item && item.user_login}`}
|
||||
className="show-user-link color-black ml10 fwb">
|
||||
<div >
|
||||
{current_user.login == item.user_login?(<div>你</div>
|
||||
):(
|
||||
<div>{item && item.user_name}</div>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
<div style={{marginLeft:"10px"}}> <span className="color-grey-8"> 声明于 {item.created_at}</span></div>
|
||||
</AlignCenter>
|
||||
</FlexAJ>
|
||||
<div className="claimNote">
|
||||
{current_user.login==item.user_login?(
|
||||
<div><span>你的留言：</span><br/>
|
||||
<TextArea onChange={this.changeClaimNote} type="text" defaultValue={item.note_body} /><br/>
|
||||
<div style={{display:"flex",justifyContent:'center',paddingBottom:"10px",paddingTop:"10px"}}>
|
||||
<Button onClick={()=>this.updateClaim(item.claim_id,key)} type={'primary'} >更新声明留言</Button>
|
||||
</div>
|
||||
</div>
|
||||
):
|
||||
(
|
||||
<div>
|
||||
{item.note_body.length==0?(
|
||||
<span>未留言</span>
|
||||
):(
|
||||
<div><span>声明留言：</span><br/>
|
||||
<span>{item.note_body}</span></div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{currentUserClaimed==1?(
|
||||
<div><Button onClick={()=>this.delClaim()} > 取消声明 </Button>
|
||||
</div>
|
||||
):(
|
||||
<Popover visible={this.state.claimNotePop} content={renderClaim()} trigger='click' placement="bottom" overlayClassName="menuPanels">
|
||||
<Button onClick={()=> this.addClaim()} type="primary" className="mr15" > 声 明 </Button>
|
||||
</Popover>
|
||||
)}
|
||||
|
||||
<div className="ant-divider ant-divider-horizontal"> </div>
|
||||
|
||||
|
||||
{
|
||||
claimerdata.length>0?(
|
||||
<div>
|
||||
<span>声明要关注/解决此易修的用户</span><span className="infoCount">{claimerdata.length}</span>
|
||||
<div className="attrPerson" onMouseLeave={()=>this.setVisibleFunc(false)}>
|
||||
{claimerdata.map((item,key)=>{
|
||||
return(
|
||||
<Popover content={renderUser(item,key)} visible={item.visible} placement="top" overlayClassName="menuPanels">
|
||||
<Link key={key} to={`/${item.user_login}`}>
|
||||
<img src={getImageUrl(`/${item.user_picture}`)} alt="" onMouseOver={()=>this.setVisibleFunc(true,key)}/>
|
||||
</Link>
|
||||
</Popover>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>):(
|
||||
<div><span>声明要关注/解决此易修的用户</span> <span className="infoCount">0</span></div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default claims;
|
||||
Loading…
Reference in New Issue