403 lines
13 KiB
JavaScript
403 lines
13 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import axios from 'axios';
|
|
import UploadComponent from '../Upload/Index';
|
|
import { getImageUrl } from 'educoder';
|
|
import { Modal, Form, Input, Select, Spin } from 'antd'
|
|
|
|
import Attachments from '../Upload/attachment';
|
|
import MDEditor from '../../modules/tpm/challengesnew/tpm-md-editor';
|
|
|
|
|
|
const Option = Select.Option;
|
|
|
|
class UpdateDetail extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
data: undefined,
|
|
isShow: false,
|
|
imgsrc: '',
|
|
journalsdata: undefined,
|
|
//图片区域是否显示 none 隐藏 block 显示
|
|
display: 'none',
|
|
titledisplay: 'none',
|
|
subject: '',
|
|
branch_name: "",
|
|
issue_tag_ids: "",
|
|
fixed_version_id: "",
|
|
tracker_id: 0,
|
|
issue_type: 0,
|
|
status_id: 0,
|
|
assigned_to_id: "",
|
|
priority_id: 0,
|
|
done_ratio: 0,
|
|
textcount: "",
|
|
fileList: undefined,
|
|
get_attachments: undefined,
|
|
isSpin: false
|
|
}
|
|
}
|
|
|
|
componentDidMount = () => {
|
|
this.getDetail();
|
|
}
|
|
|
|
getDetail = () => {
|
|
const { projectsId, orderId } = this.props.match.params;
|
|
const url = `/projects/${projectsId}/issues/${orderId}/edit.json`;
|
|
axios.get(url).then((result) => {
|
|
if (result) {
|
|
this.setState({
|
|
data: result.data,
|
|
subject: result.data.subject,
|
|
issue_chosen: result.data.issue_chosen,
|
|
branches: result.data.branches,
|
|
tracker_id: result.data.tracker_id,
|
|
issue_type: result.data.issue_type,
|
|
status_id: result.data.status_id,
|
|
priority_id: result.data.priority_id,
|
|
done_ratio: result.data.done_ratio,
|
|
textcount: result.data.description,
|
|
branch_name: result.data.branch_name,
|
|
get_attachments: result.data.attachments,
|
|
fileList: undefined,
|
|
issue_tag_ids: result.data.issue_tags && result.data.issue_tags[0].id,
|
|
fixed_version_id: result.data.fixed_version_id,
|
|
assigned_to_id: result.data.assigned_to_id
|
|
})
|
|
}
|
|
}).catch((error) => {
|
|
console.log(error);
|
|
})
|
|
}
|
|
|
|
handleok = () => {
|
|
this.setState({
|
|
isShow: false
|
|
});
|
|
};
|
|
handleCancel = () => {
|
|
this.setState({
|
|
isShow: false
|
|
});
|
|
}
|
|
|
|
imgshow = () => {
|
|
this.setState({
|
|
isShow: true
|
|
});
|
|
};
|
|
|
|
onContentChange = (value) => {
|
|
this.setState({
|
|
textcount: value
|
|
})
|
|
}
|
|
|
|
|
|
changmodelname = (e) => {
|
|
this.setState({
|
|
subject: e.target.value
|
|
})
|
|
}
|
|
changmodelcount = (e) => {
|
|
this.setState({
|
|
textcount: e.target.value
|
|
})
|
|
}
|
|
|
|
renderSelect = (list) => {
|
|
if (list && list.length > 0) {
|
|
return (
|
|
list.map((item, key) => {
|
|
return (
|
|
<Option key={key + 1} value={item.id}>{item.name}</Option>
|
|
)
|
|
})
|
|
)
|
|
}
|
|
}
|
|
|
|
// 切换完成度
|
|
changeRatio = (e) => {
|
|
if (e === 0) {
|
|
this.props.form.setFieldsValue({
|
|
status_id: 1
|
|
})
|
|
this.setState({
|
|
status_id: 1
|
|
})
|
|
} else if (e === 100) {
|
|
this.props.form.setFieldsValue({
|
|
status_id: 3
|
|
})
|
|
this.setState({
|
|
status_id: 3
|
|
})
|
|
} else {
|
|
this.props.form.setFieldsValue({
|
|
status_id: 2
|
|
})
|
|
this.setState({
|
|
status_id: 2
|
|
})
|
|
}
|
|
}
|
|
// 切换状态
|
|
changeStatus = (e) => {
|
|
// console.log(e);
|
|
if (e === 1) {
|
|
this.props.form.setFieldsValue({
|
|
done_ratio: 0
|
|
})
|
|
this.setState({
|
|
done_ratio: 0
|
|
})
|
|
} else if (e === 3) {
|
|
this.props.form.setFieldsValue({
|
|
done_ratio: 100
|
|
})
|
|
this.setState({
|
|
done_ratio: 100
|
|
})
|
|
}
|
|
}
|
|
// 获取上传后的文件id数组
|
|
UploadFunc = (fileList) => {
|
|
this.setState({
|
|
fileList
|
|
})
|
|
}
|
|
handleSubmit = () => {
|
|
this.setState({
|
|
isSpin: true
|
|
})
|
|
const { fileList } = this.state;
|
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
|
if (!err) {
|
|
const { projectsId, orderId } = this.props.match.params;
|
|
const { subject } = this.state;
|
|
const url = `/projects/${projectsId}/issues/${orderId}.json`;
|
|
|
|
if (values.issue_tag_ids === 0) {
|
|
values.issue_tag_ids = ""
|
|
} else {
|
|
values.issue_tag_ids = [values.issue_tag_ids]
|
|
}
|
|
if (values.assigned_to_id === 0) {
|
|
values.assigned_to_id = ""
|
|
}
|
|
const { textcount } = this.state;
|
|
|
|
axios.put(url, {
|
|
project_id: projectsId,
|
|
subject: subject,
|
|
id: orderId,
|
|
description: textcount,
|
|
attachment_ids: fileList,
|
|
...values
|
|
}).then(result => {
|
|
if (result) {
|
|
this.props.history.push(`/projects/${projectsId}/orders/${orderId}/detail`);
|
|
}
|
|
}).catch(error => {
|
|
this.setState({
|
|
isSpin: false
|
|
})
|
|
console.log(error);
|
|
})
|
|
|
|
}else{
|
|
this.setState({
|
|
isSpin: false
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
render() {
|
|
const { projectsId, orderId } = this.props.match.params;
|
|
const { getFieldDecorator } = this.props.form;
|
|
const { current_user } = this.props;
|
|
const { issue_tag_ids, fixed_version_id, branch_name, status_id, tracker_id, issue_type, assigned_to_id, priority_id, done_ratio,
|
|
issue_chosen, branches, subject, textcount, get_attachments, isSpin } = this.state;
|
|
return (
|
|
<div className="main">
|
|
<div>
|
|
<Form>
|
|
<div className="f-wrap-between mt20" style={{ alignItems: "flex-start" }}>
|
|
<div className="list-right df" >
|
|
<Link to={`/users/${current_user && current_user.login}/projects`} className="show-user-link">
|
|
<img className="user_img" src={getImageUrl(`images/${current_user && current_user.image_url}`)} alt="" />
|
|
</Link>
|
|
<div className="new_context">
|
|
<Form.Item>
|
|
{getFieldDecorator('subject', {
|
|
rules: [{
|
|
required: true, message: '请填写任务标题'
|
|
}],
|
|
initialValue: subject
|
|
})(
|
|
<Input placeholder="标题" onChange={this.changmodelname} />
|
|
)}
|
|
</Form.Item>
|
|
|
|
<MDEditor placeholder={'请输入任务的描述...'} height={350}
|
|
mdID={'order-update-description'} initValue={textcount} onChange={this.onContentChange} ></MDEditor>
|
|
<UploadComponent load={this.UploadFunc} showNotification={this.props.showNotification} isComplete={true}></UploadComponent>
|
|
{
|
|
get_attachments ?
|
|
<Attachments attachments={get_attachments} showNotification={this.props.showNotification} canDelete={true} />
|
|
:
|
|
""
|
|
}
|
|
<p className="clearfix mt15 text-right">
|
|
<Spin spinning={isSpin}>
|
|
<a className="topWrapper_btn fr" type="submit" style={{ marginLeft: 5 }} onClick={this.handleSubmit}>保存</a>
|
|
<Link to={`/projects/${projectsId}/orders/${orderId}/detail`} className="a_btn cancel_btn fr">取消</Link>
|
|
</Spin>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="list-left mt10" style={{ paddingRight: "0px", paddingLeft: "0px", width: "25%", backgroundColor: "#fff" }}>
|
|
<div className="list-l-panel">
|
|
<Form.Item
|
|
label="分支"
|
|
>
|
|
{getFieldDecorator('branch_name', {
|
|
initialValue: branch_name,
|
|
rules: [],
|
|
})(
|
|
<Select>
|
|
<Option value={''}>分支未指定</Option>
|
|
{
|
|
branches && branches.length > 0 && branches.map((item, key) => {
|
|
return (
|
|
<Option value={item}>{item}</Option>
|
|
)
|
|
})
|
|
}
|
|
</Select>
|
|
)}
|
|
</Form.Item>
|
|
<Form.Item
|
|
label="标签"
|
|
>
|
|
{getFieldDecorator('issue_tag_ids', {
|
|
initialValue: issue_tag_ids ? [issue_tag_ids] : '',
|
|
rules: [],
|
|
})(
|
|
<Select>
|
|
<Option value={''}>{issue_chosen && issue_chosen.issue_tag.length > 0 ? '未选择标签' : '请在仓库设置里添加标签'}</Option>
|
|
{this.renderSelect(issue_chosen && issue_chosen.issue_tag)}
|
|
</Select>
|
|
)}
|
|
</Form.Item>
|
|
<Form.Item
|
|
label="里程碑"
|
|
>
|
|
{getFieldDecorator('fixed_version_id', {
|
|
initialValue: fixed_version_id ? fixed_version_id : "",
|
|
rules: [],
|
|
})(
|
|
<Select>
|
|
<Option value={''}>{issue_chosen && issue_chosen.issue_version.length > 0 ? '未选择里程碑' : '请添加里程碑'}</Option>
|
|
{this.renderSelect(issue_chosen && issue_chosen.issue_version)}
|
|
</Select>
|
|
)}
|
|
</Form.Item>
|
|
<Form.Item
|
|
label="状态"
|
|
>
|
|
{getFieldDecorator('status_id', {
|
|
initialValue: status_id,
|
|
rules: [{
|
|
required: true, message: '请选择完成状态'
|
|
}],
|
|
})(
|
|
<Select onChange={this.changeStatus}>
|
|
{this.renderSelect(issue_chosen && issue_chosen.issue_status)}
|
|
</Select>
|
|
)}
|
|
</Form.Item>
|
|
<Form.Item
|
|
label="分类"
|
|
>
|
|
{getFieldDecorator('tracker_id', {
|
|
initialValue: tracker_id,
|
|
rules: [{
|
|
required: true, message: '请选择分类'
|
|
}],
|
|
})(
|
|
<Select>
|
|
{this.renderSelect(issue_chosen && issue_chosen.tracker)}
|
|
</Select>
|
|
)}
|
|
</Form.Item>
|
|
<Form.Item
|
|
label="指派成员"
|
|
>
|
|
{getFieldDecorator('assigned_to_id', {
|
|
initialValue: assigned_to_id ? assigned_to_id : "",
|
|
})(
|
|
<Select>
|
|
<Option value={''}>未指派成员</Option>
|
|
{this.renderSelect(issue_chosen && issue_chosen.assign_user)}
|
|
</Select>
|
|
)}
|
|
</Form.Item>
|
|
<Form.Item
|
|
label="优先度"
|
|
>
|
|
{getFieldDecorator('priority_id', {
|
|
|
|
initialValue: priority_id,
|
|
rules: [{
|
|
required: true, message: '请选择优先度'
|
|
}],
|
|
})(
|
|
<Select>
|
|
{this.renderSelect(issue_chosen && issue_chosen.priority)}
|
|
</Select>
|
|
)}
|
|
</Form.Item>
|
|
<Form.Item
|
|
label="完成度"
|
|
>
|
|
{getFieldDecorator('done_ratio', {
|
|
initialValue: done_ratio,
|
|
rules: [{
|
|
required: true, message: '请选择完成度'
|
|
}],
|
|
})(
|
|
<Select value={done_ratio} onChange={this.changeRatio}>
|
|
{this.renderSelect(issue_chosen && issue_chosen.done_ratio)}
|
|
</Select>
|
|
)}
|
|
</Form.Item>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
<Modal
|
|
onCancel={this.handleCancel}
|
|
visible={this.state.isShow}
|
|
width="400px"
|
|
footer={
|
|
[]
|
|
}
|
|
bodyStyle={{ textAlign: 'center' }}
|
|
>
|
|
<img class="list_img" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1608431072,669449145&fm=27&gp=0.jpg" alt="" />
|
|
</Modal>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
const UpdateDetailForm = Form.create({ name: 'UpdateDetailForm' })(UpdateDetail);
|
|
export default UpdateDetailForm; |