yapi/client/containers/ProjectGroups/ProjectList/ProjectList.js

275 lines
7.4 KiB
JavaScript
Raw Normal View History

2017-07-14 18:02:01 +08:00
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
2017-07-18 22:08:01 +08:00
import { Table, Button, Modal, Form, Input, Icon, Tooltip, Select, Popconfirm, message } from 'antd';
import { addProject, fetchProjectList, delProject, changeUpdateModal, changeTableLoading } from '../../../actions/project';
2017-07-19 20:59:59 +08:00
import UpDateModal from './UpDateModal';
2017-07-14 16:54:20 +08:00
const { TextArea } = Input;
const FormItem = Form.Item;
const Option = Select.Option;
import './ProjectList.scss'
2017-07-18 22:08:01 +08:00
2017-07-19 20:59:59 +08:00
const deleteConfirm = (id, handleDelete, currGroupId, handleFetchList) => {
2017-07-18 22:08:01 +08:00
const test = () => {
handleDelete(id).then((res) => {
console.log(res);
console.log(handleFetchList, currGroupId);
handleFetchList(currGroupId).then((res) => {
console.log(res);
});
});
}
return test;
};
2017-07-19 20:59:59 +08:00
const getColumns = (data, handleDelete, currGroupId, handleFetchList, handleUpdateModal) => {
2017-07-18 22:08:01 +08:00
return [{
title: '项目名称',
dataIndex: 'name',
key: 'name',
render: text => <a href="#">{text}</a>
}, {
title: '创建人',
dataIndex: 'owner',
key: 'owner'
}, {
title: '创建时间',
dataIndex: 'add_time',
key: 'add_time'
}, {
title: '操作',
key: 'action',
2017-07-19 20:59:59 +08:00
render: (text, record, index) => {
2017-07-18 22:08:01 +08:00
const id = record._id;
return (
<span>
2017-07-19 20:59:59 +08:00
<a onClick={() => handleUpdateModal(true, index)}>修改</a>
2017-07-18 22:08:01 +08:00
<span className="ant-divider" />
2017-07-19 20:59:59 +08:00
<Popconfirm title="你确定要删除项目吗?" onConfirm={deleteConfirm(id, handleDelete, currGroupId, handleFetchList)} okText="删除" cancelText="取消">
2017-07-18 22:08:01 +08:00
<a href="#">删除</a>
</Popconfirm>
</span>
)}
}];
2017-07-18 21:11:32 +08:00
}
2017-07-12 10:17:57 +08:00
2017-07-14 16:54:20 +08:00
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 6 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 14 }
}
};
2017-07-14 18:02:01 +08:00
@connect(
state => {
return {
projectList: state.project.projectList,
tableLoading: state.project.tableLoading,
2017-07-18 14:58:57 +08:00
currGroup: state.group.currGroup
2017-07-14 18:02:01 +08:00
}
},
{
fetchProjectList,
2017-07-18 22:08:01 +08:00
addProject,
2017-07-19 20:59:59 +08:00
delProject,
changeUpdateModal,
changeTableLoading
2017-07-14 18:02:01 +08:00
}
)
2017-07-14 16:54:20 +08:00
class ProjectList extends Component {
constructor(props) {
super(props);
this.state = {
visible: false,
protocol: 'http:\/\/',
projectData: []
2017-07-14 16:54:20 +08:00
}
}
static propTypes = {
2017-07-14 18:02:01 +08:00
form: PropTypes.object,
fetchProjectList: PropTypes.func,
addProject: PropTypes.func,
2017-07-18 22:08:01 +08:00
delProject: PropTypes.func,
2017-07-19 20:59:59 +08:00
changeUpdateModal: PropTypes.func,
changeTableLoading: PropTypes.func,
projectList: PropTypes.array,
tableLoading: PropTypes.bool,
currGroup: PropTypes.object
2017-07-14 16:54:20 +08:00
}
2017-07-18 22:08:01 +08:00
showAddProjectModal = () => {
2017-07-14 16:54:20 +08:00
this.setState({
visible: true
});
}
handleOk = (e) => {
2017-07-19 21:32:44 +08:00
const { form, currGroup, changeTableLoading, addProject, fetchProjectList } = this.props;
const that = this;
2017-07-14 16:54:20 +08:00
e.preventDefault();
2017-07-19 21:32:44 +08:00
form.validateFields((err, values) => {
2017-07-14 16:54:20 +08:00
if (!err) {
values.prd_host = this.state.protocol + values.prd_host;
2017-07-18 14:58:57 +08:00
// 获取当前分组id传入values
2017-07-19 21:32:44 +08:00
values.group_id = currGroup._id;
2017-07-18 14:58:57 +08:00
2017-07-19 21:32:44 +08:00
changeTableLoading(true);
addProject(values).then((res) => {
console.log(res);
// 添加项目成功后再次请求列表
2017-07-19 21:32:44 +08:00
if (res.payload.data.errcode == 0) {
that.setState({
visible: false
});
form.resetFields();
message.success('创建成功! ');
fetchProjectList(currGroup._id).then((res) => {
changeTableLoading(false);
console.log(131,res);
});
} else {
changeTableLoading(false);
message.error(res.payload.data.errmsg);
}
}).catch((err) => {
console.log(err);
2017-07-19 21:32:44 +08:00
changeTableLoading(false);
2017-07-14 16:54:20 +08:00
});
}
});
}
// 取消修改
2017-07-14 16:54:20 +08:00
handleCancel = () => {
this.props.form.resetFields();
this.setState({
visible: false
});
}
// 修改线上域名的协议类型 (http/https)
protocolChange = (value) => {
this.setState({
protocol: value
})
2017-07-14 16:54:20 +08:00
}
componentWillReceiveProps(nextProps){
// 切换分组
if (this.props.currGroup !== nextProps.currGroup) {
2017-07-18 22:08:01 +08:00
this.props.fetchProjectList(nextProps.currGroup._id).then((res) => {
if (res.payload.data.errcode) {
message.error(res.payload.data.errmsg);
} else {
this.props.changeTableLoading(false);
2017-07-18 22:08:01 +08:00
}
});
}
// 切换项目列表
if (this.props.projectList !== nextProps.projectList) {
// console.log(nextProps.projectList);
const data = nextProps.projectList.map((item, index) => {
item.key = index;
return item;
});
this.setState({
projectData: data
});
}
}
2017-07-12 10:17:57 +08:00
render() {
2017-07-14 16:54:20 +08:00
const { getFieldDecorator } = this.props.form;
2017-07-12 10:17:57 +08:00
return (
2017-07-19 15:02:51 +08:00
<div className="m-container">
2017-07-14 16:54:20 +08:00
<Modal
title="创建项目"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<Form>
2017-07-14 16:54:20 +08:00
<FormItem
{...formItemLayout}
label="项目名称"
>
{getFieldDecorator('name', {
rules: [{
required: true, message: '请输入项目名称!'
}]
})(
<Input />
)}
</FormItem>
<FormItem
{...formItemLayout}
label={(
<span>
线上域名&nbsp;
<Tooltip title="将根据配置的线上域名访问mock数据">
<Icon type="question-circle-o" />
</Tooltip>
</span>
)}
>
{getFieldDecorator('prd_host', {
rules: [{
required: true, message: '请输入项目线上域名!'
}]
})(
<Input addonBefore={(
<Select defaultValue="http://" onChange={this.protocolChange}>
<Option value="http://">{'http:\/\/'}</Option>
<Option value="https://">{'https:\/\/'}</Option>
</Select>)} />
2017-07-14 16:54:20 +08:00
)}
</FormItem>
<FormItem
{...formItemLayout}
2017-07-19 20:59:59 +08:00
label="基本路径"
2017-07-14 16:54:20 +08:00
>
{getFieldDecorator('basepath', {
rules: [{
required: true, message: '请输入项目基本路径!'
}]
})(
<Input />
)}
</FormItem>
<FormItem
{...formItemLayout}
label="描述"
>
{getFieldDecorator('desc', {
rules: [{
required: true, message: '请输入描述!'
}]
})(
<TextArea rows={4} />
)}
</FormItem>
</Form>
</Modal>
2017-07-19 20:59:59 +08:00
<UpDateModal/>
2017-07-14 16:54:20 +08:00
<Table
loading={this.props.tableLoading}
2017-07-19 20:59:59 +08:00
columns={getColumns(this.state.projectData, this.props.delProject, this.props.currGroup._id, this.props.fetchProjectList, this.props.changeUpdateModal)}
dataSource={this.state.projectData}
2017-07-18 22:08:01 +08:00
title={() => <Button type="primary" onClick={this.showAddProjectModal}>创建项目</Button>}
2017-07-14 16:54:20 +08:00
/>
</div>
2017-07-12 10:17:57 +08:00
);
}
}
2017-07-14 16:54:20 +08:00
export default Form.create()(ProjectList);