forked from Gitlink/forgeplus-react
616 lines
19 KiB
JavaScript
616 lines
19 KiB
JavaScript
import React, { Component } from "react";
|
|
import { Form, Input, Select, Button, DatePicker, Switch,InputNumber } from "antd";
|
|
import Upload from "../Upload/Index";
|
|
import UploadImg from "../Images/upload.png";
|
|
import MDEditor from "../../modules/tpm/challengesnew/tpm-md-editor";
|
|
import moment from "moment";
|
|
import "./order.css";
|
|
import Attachments from "../Upload/attachment";
|
|
|
|
import axios from "axios";
|
|
|
|
const Option = Select.Option;
|
|
class order_form extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
branch_name: "",
|
|
issue_tag_ids: "",
|
|
fixed_version_id: "",
|
|
tracker_id: "缺陷",
|
|
issue_type: "1",
|
|
status_id: "新增",
|
|
assigned_to_id: "",
|
|
priority_id: "正常",
|
|
done_ratio: "0%",
|
|
issue_chosen: undefined,
|
|
branches: undefined,
|
|
fileList: undefined,
|
|
description: undefined,
|
|
isSpin: false,
|
|
token: undefined,
|
|
start_date: "",
|
|
due_date: "",
|
|
subject: "",
|
|
get_attachments: undefined,
|
|
show_token: false,
|
|
cannot_edit: false,
|
|
issue_current_user: true
|
|
};
|
|
}
|
|
|
|
componentDidMount = () => {
|
|
this.getSelectList();
|
|
this.get_detail();
|
|
};
|
|
get_detail = () => {
|
|
const { form_type } = this.props;
|
|
console.log("form_type",form_type)
|
|
|
|
if (form_type === "new") {
|
|
this.InitData();
|
|
this.getSelectList();
|
|
} else {
|
|
this.state.isSpin = true;
|
|
const { projectsId, orderId } = this.props.match.params;
|
|
const url = `/projects/${projectsId}/issues/${orderId}/edit.json`;
|
|
axios
|
|
.get(url)
|
|
.then((result) => {
|
|
if (result) {
|
|
this.setState(
|
|
{
|
|
branch_name: result.data.branch_name,
|
|
issue_tag_ids: [
|
|
result.data.issue_tags && result.data.issue_tags[0].id
|
|
? String(
|
|
result.data.issue_tags && result.data.issue_tags[0].id
|
|
)
|
|
: "",
|
|
],
|
|
fixed_version_id: result.data.fixed_version_id
|
|
? String(result.data.fixed_version_id)
|
|
: "",
|
|
tracker_id: result.data.tracker_id
|
|
? String(result.data.tracker_id)
|
|
: "",
|
|
issue_type: result.data.issue_type,
|
|
status_id: result.data.status_id
|
|
? String(result.data.status_id)
|
|
: "",
|
|
assigned_to_id: result.data.assigned_to_id
|
|
? String(result.data.assigned_to_id)
|
|
: "",
|
|
priority_id: result.data.priority_id
|
|
? String(result.data.priority_id)
|
|
: "",
|
|
done_ratio: result.data.done_ratio,
|
|
fileList: undefined,
|
|
description: result.data.description,
|
|
isSpin: false,
|
|
token: result.data.token,
|
|
get_attachments: result.data.attachments,
|
|
start_date: result.data.start_date,
|
|
due_date: result.data.due_date,
|
|
subject: result.data.subject,
|
|
cannot_edit: result.data.cannot_edit_tags && form_type !== "copy",
|
|
issue_current_user: result.data.issue_current_user
|
|
},
|
|
() => this.InitData()
|
|
);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
this.state.isSpin = false;
|
|
console.log(error);
|
|
});
|
|
}
|
|
};
|
|
|
|
InitData = () => {
|
|
// this.props.form.setFieldsValue({
|
|
// ...this.state,
|
|
// });
|
|
};
|
|
|
|
getSelectList = () => {
|
|
let projectsId = "";
|
|
if (this.props.match.params.milepostId) {
|
|
projectsId = this.props.match.params.projectsId;
|
|
this.props.form.setFieldsValue({
|
|
fixed_version_id: this.props.match.params.milepostId,
|
|
});
|
|
} else {
|
|
projectsId = this.props.match.params.projectsId;
|
|
}
|
|
|
|
const url = `/projects/${projectsId}/issues/new.json`;
|
|
axios
|
|
.get(url)
|
|
.then((result) => {
|
|
if (result) {
|
|
this.setState({
|
|
issue_chosen: result.data.issue_chosen,
|
|
branches: result.data.branches
|
|
});
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
};
|
|
|
|
renderSelect = (list) => {
|
|
if (list && list.length > 0) {
|
|
return list.map((item, key) => {
|
|
return (
|
|
<Option key={key + 1} value={item.id + ""}>
|
|
{item.name}
|
|
</Option>
|
|
);
|
|
});
|
|
}
|
|
};
|
|
|
|
// 创建
|
|
handleSubmit = () => {
|
|
this.setState({
|
|
isSpin: true,
|
|
});
|
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
|
if (!err) {
|
|
const { form_type } = this.props;
|
|
const { projectsId, orderId } = this.props.match.params;
|
|
|
|
// const { projectsId } = this.props.match.params;
|
|
const { fileList } = this.state;
|
|
|
|
if (values.status_id === "新增") {
|
|
values.status_id = "1";
|
|
}
|
|
if (values.tracker_id === "缺陷") {
|
|
values.tracker_id = "1";
|
|
}
|
|
if (values.priority_id === "正常") {
|
|
values.priority_id = "2";
|
|
}
|
|
if (values.done_ratio === "0%") {
|
|
values.done_ratio = "0";
|
|
}
|
|
if (values.issue_tag_ids.length > 0) {
|
|
values.issue_tag_ids = [values.issue_tag_ids];
|
|
}
|
|
const { description, start_date, due_date, issue_type } = this.state;
|
|
if (form_type === "new") {
|
|
const url = `/projects/${projectsId}/issues.json`;
|
|
axios
|
|
.post(url, {
|
|
...values,
|
|
description: description,
|
|
attachment_ids: fileList,
|
|
start_date: start_date,
|
|
due_date: due_date,
|
|
issue_type: issue_type,
|
|
})
|
|
.then((result) => {
|
|
if (result) {
|
|
this.props.showNotification("任务创建成功！");
|
|
this.props.history.push(`/projects/${projectsId}/orders`);
|
|
this.setState({
|
|
description: "",
|
|
isSpin: false,
|
|
});
|
|
const { getDetail } = this.props;
|
|
getDetail && getDetail();
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
this.setState({
|
|
isSpin: false,
|
|
});
|
|
console.log(error);
|
|
});
|
|
} else {
|
|
const url = `/projects/${projectsId}/issues/${orderId}.json`;
|
|
axios
|
|
.put(url, {
|
|
description: description,
|
|
attachment_ids: fileList,
|
|
start_date: start_date,
|
|
due_date: due_date,
|
|
issue_type: issue_type,
|
|
...values,
|
|
})
|
|
.then((result) => {
|
|
if (result) {
|
|
this.props.history.push(
|
|
`/projects/${projectsId}/orders/${orderId}/detail`
|
|
);
|
|
this.props.showNotification("任务更新成功！");
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
this.setState({
|
|
isSpin: false,
|
|
});
|
|
console.log(error);
|
|
});
|
|
}
|
|
}
|
|
this.setState({
|
|
isSpin: false,
|
|
});
|
|
});
|
|
};
|
|
|
|
// 获取上传后的文件id数组
|
|
UploadFunc = (fileList) => {
|
|
this.setState({
|
|
fileList,
|
|
});
|
|
};
|
|
|
|
onContentChange = (value) => {
|
|
this.setState({
|
|
description: value,
|
|
});
|
|
};
|
|
// 修改开始时间
|
|
changeBeginTime = (start_date, value) => {
|
|
this.setState({
|
|
start_date: value,
|
|
});
|
|
};
|
|
changeEndTime = (due_date, value) => {
|
|
this.setState({
|
|
due_date: value,
|
|
});
|
|
};
|
|
// 切换完成度
|
|
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) => {
|
|
if (e === "1") {
|
|
this.props.form.setFieldsValue({
|
|
done_ratio: "0",
|
|
});
|
|
this.setState({
|
|
done_ratio: "0",
|
|
issue_current_user: true,
|
|
});
|
|
} else if (e === "3") {
|
|
this.props.form.setFieldsValue({
|
|
done_ratio: "100",
|
|
});
|
|
this.setState({
|
|
done_ratio: "100",
|
|
issue_current_user: true,
|
|
});
|
|
}else if (e === "5") {
|
|
this.setState({
|
|
issue_current_user: false,
|
|
});
|
|
}
|
|
};
|
|
|
|
//切换是否上链操作
|
|
change_issue_type = (e) => {
|
|
if (e) {
|
|
this.setState({
|
|
issue_type: "2",
|
|
show_token: true,
|
|
});
|
|
} else {
|
|
this.setState({
|
|
issue_type: "1",
|
|
show_token: false,
|
|
});
|
|
}
|
|
};
|
|
|
|
render() {
|
|
const { getFieldDecorator } = this.props.form;
|
|
const projectsId = this.props.match.params.projectsId;
|
|
const { orderId } = this.props.match.params;
|
|
const { form_type } = 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,
|
|
description,
|
|
get_attachments,
|
|
isSpin,
|
|
start_date,
|
|
due_date,
|
|
token,
|
|
show_token,
|
|
cannot_edit,
|
|
issue_current_user
|
|
} = this.state;
|
|
return (
|
|
<div className="ProjectListIndex issue-form-index">
|
|
<Form className="width100 display-in" size="small">
|
|
<div className="list-right">
|
|
<div className="pd20">
|
|
<h3 className="mb15">
|
|
{form_type === "new" ? "新建" :( form_type === "copy" ? "复制" : "编辑")}任务
|
|
</h3>
|
|
<Form.Item>
|
|
{getFieldDecorator("subject", {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
message: "请填写任务标题",
|
|
},
|
|
],
|
|
initialValue: subject,
|
|
})(<Input placeholder="标题" size="large" />)}
|
|
</Form.Item>
|
|
<div className="quillContent">
|
|
<MDEditor
|
|
placeholder={"请输入描述信息"}
|
|
height={500}
|
|
mdID={"order-new-description"}
|
|
initValue={description}
|
|
onChange={this.onContentChange}
|
|
></MDEditor>
|
|
</div>
|
|
{get_attachments && get_attachments.length > 0 ? (
|
|
<div className="mt20">
|
|
<Attachments
|
|
attachments={get_attachments}
|
|
showNotification={this.props.showNotification}
|
|
canDelete={true}
|
|
/>
|
|
</div>
|
|
) : (
|
|
""
|
|
)}
|
|
<Upload
|
|
className="commentStyle mt30"
|
|
isComplete={true}
|
|
load={this.UploadFunc}
|
|
icon={
|
|
<img
|
|
src={UploadImg}
|
|
width="58"
|
|
alt=""
|
|
style={{ marginBottom: 15 }}
|
|
/>
|
|
}
|
|
size={100}
|
|
showNotification={this.props.showNotification}
|
|
/>
|
|
<p className="clearfix mt20">
|
|
<Button
|
|
type="primary"
|
|
loading={isSpin}
|
|
onClick={this.handleSubmit}
|
|
>
|
|
<span className="plr10">
|
|
{form_type === "new" ? "创建" : "提交"}
|
|
</span>
|
|
</Button>
|
|
<Button
|
|
type="default"
|
|
className="ml30"
|
|
href={
|
|
form_type === "new"
|
|
? `/projects/${projectsId || orderId}/orders` : `/projects/${projectsId}/orders/${orderId}/detail`
|
|
|
|
}
|
|
>
|
|
<span className="plr10">取消</span>
|
|
</Button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="list-left list-left-padding issue-edit-form-right">
|
|
<div className="pd20 background-f issue-form-right">
|
|
<Form.Item>
|
|
{getFieldDecorator("branch_name", {
|
|
rules: [],
|
|
initialValue: branch_name,
|
|
})(
|
|
<Select disabled={cannot_edit}>
|
|
<Option value={""}>分支未指定</Option>
|
|
{branches &&
|
|
branches.length > 0 &&
|
|
branches.map((item, key) => {
|
|
return (
|
|
<Option value={item} key={key}>
|
|
{item}
|
|
</Option>
|
|
);
|
|
})}
|
|
</Select>
|
|
)}
|
|
</Form.Item>
|
|
<Form.Item label="状态">
|
|
{getFieldDecorator("status_id", {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
message: "请选择完成状态",
|
|
},
|
|
],
|
|
initialValue: status_id,
|
|
})(
|
|
<Select onChange={this.changeStatus} disabled={cannot_edit}>
|
|
{this.renderSelect(
|
|
issue_chosen && issue_chosen.issue_status
|
|
)}
|
|
</Select>
|
|
)}
|
|
</Form.Item>
|
|
<Form.Item label="类型">
|
|
{getFieldDecorator("tracker_id", {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
message: "请选择类型",
|
|
},
|
|
],
|
|
initialValue: tracker_id,
|
|
})(
|
|
<Select disabled={cannot_edit}>
|
|
{this.renderSelect(issue_chosen && issue_chosen.tracker)}
|
|
</Select>
|
|
)}
|
|
</Form.Item>
|
|
|
|
<Form.Item label="优先度">
|
|
{getFieldDecorator("priority_id", {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
message: "请选择优先度",
|
|
},
|
|
],
|
|
initialValue: priority_id,
|
|
})(
|
|
<Select disabled={cannot_edit}>
|
|
{this.renderSelect(issue_chosen && issue_chosen.priority)}
|
|
</Select>
|
|
)}
|
|
</Form.Item>
|
|
|
|
<Form.Item label="里程碑">
|
|
{getFieldDecorator("fixed_version_id", {
|
|
rules: [],
|
|
initialValue: fixed_version_id,
|
|
})(
|
|
<Select disabled={cannot_edit}>
|
|
<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("issue_tag_ids", {
|
|
rules: [],
|
|
initialValue: issue_tag_ids,
|
|
})(
|
|
<Select disabled={cannot_edit}>
|
|
<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("assigned_to_id", {
|
|
rules: [{}],
|
|
initialValue: assigned_to_id,
|
|
})(
|
|
<Select disabled={cannot_edit}>
|
|
<Option value={""}>未指派成员</Option>
|
|
{this.renderSelect(
|
|
issue_chosen && issue_chosen.assign_user
|
|
)}
|
|
</Select>
|
|
)}
|
|
</Form.Item>
|
|
<Form.Item label="开始日期">
|
|
<DatePicker
|
|
value={start_date ? moment(start_date, "YYYY-MM-DD") : null}
|
|
style={{ width: "100%" }}
|
|
placeholder="请选择开始日期"
|
|
onChange={this.changeBeginTime}
|
|
disabled={cannot_edit}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item label="结束日期">
|
|
<DatePicker
|
|
value={due_date ? moment(due_date, "YYYY-MM-DD") : null}
|
|
style={{ width: "100%" }}
|
|
placeholder="请选择结束日期"
|
|
onChange={this.changeEndTime}
|
|
disabled={cannot_edit}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item label="完成度">
|
|
{getFieldDecorator("done_ratio", {
|
|
rules: [],
|
|
initialValue: done_ratio,
|
|
})(
|
|
<Select onChange={this.changeRatio} disabled={cannot_edit}>
|
|
{this.renderSelect(issue_chosen && issue_chosen.done_ratio)}
|
|
</Select>
|
|
)}
|
|
</Form.Item>
|
|
<Form.Item label="是否上链">
|
|
<Switch
|
|
checkedChildren="是"
|
|
unCheckedChildren="否"
|
|
defaultChecked={false}
|
|
checked={issue_type && issue_type === "2"}
|
|
onChange={this.change_issue_type}
|
|
disabled={cannot_edit || !issue_current_user}
|
|
/>
|
|
</Form.Item>
|
|
{(show_token || (issue_type && issue_type === "2")) && (
|
|
<Form.Item label="token">
|
|
{getFieldDecorator("token", {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
message: "请填写token值",
|
|
},
|
|
],
|
|
initialValue: token,
|
|
})(<InputNumber placeholder="请填写整数token值" min={1} step={1} className="width100" disabled={cannot_edit || !issue_current_user}/>)}
|
|
</Form.Item>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
const WrappedNewForm = Form.create({ name: "NewOrderForm" })(order_form);
|
|
export default WrappedNewForm;
|