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

329 lines
9.0 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-20 16:03:36 +08:00
import { Link } from 'react-router-dom'
import variable from '../../../constants/variable';
2017-07-20 11:32:21 +08:00
import common from '../../../common';
import { autobind } from 'core-decorators';
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-20 20:24:06 +08:00
// 确认删除项目 handleDelete, currGroup._id, fetchProjectList
const deleteConfirm = (id, props) => {
const { delProject, currGroup, fetchProjectList } = props;
const handle = () => {
delProject(id).then((res) => {
2017-07-18 22:08:01 +08:00
console.log(res);
2017-07-20 20:24:06 +08:00
console.log(fetchProjectList, currGroup._id);
if (res.payload.data.errcode == 0) {
message.success('删除成功!')
fetchProjectList(currGroup._id).then((res) => {
console.log(res);
});
} else {
message.error(res.payload.data.errmsg);
}
2017-07-18 22:08:01 +08:00
});
}
2017-07-20 20:24:06 +08:00
return handle;
2017-07-18 22:08:01 +08:00
};
2017-07-20 17:53:28 +08:00
2017-07-20 17:08:29 +08:00
const getColumns = (data, props) => {
2017-07-20 20:24:06 +08:00
const { changeUpdateModal, userInfo } = props;
2017-07-18 22:08:01 +08:00
return [{
title: '项目名称',
dataIndex: 'name',
key: 'name',
2017-07-20 16:03:36 +08:00
render: (text, record) => {
2017-07-25 20:57:54 +08:00
return <Link to={`/Interface/${record._id}`}>{text}</Link>
2017-07-20 16:03:36 +08:00
}
2017-07-18 22:08:01 +08:00
}, {
title: '创建人',
dataIndex: 'owner',
2017-07-20 17:08:29 +08:00
key: 'owner',
render: (text, record, index) => {
// data是projectList的列表值
// 根据序号找到对应项的uid根据uid获取对应项目的创建人
2017-07-20 20:24:06 +08:00
return <span>{userInfo[data[index].uid] ? userInfo[data[index].uid].username : ''}</span>;
2017-07-20 17:08:29 +08:00
}
2017-07-18 22:08:01 +08:00
}, {
title: '创建时间',
dataIndex: 'add_time',
2017-07-20 11:32:21 +08:00
key: 'add_time',
render: time => <span>{common.formatTime(time)}</span>
2017-07-18 22:08:01 +08:00
}, {
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-20 17:08:29 +08:00
<a onClick={() => changeUpdateModal(true, index)}>修改</a>
2017-07-18 22:08:01 +08:00
<span className="ant-divider" />
2017-07-20 20:24:06 +08:00
<Popconfirm title="你确定要删除项目吗?" onConfirm={deleteConfirm(id, props)} 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,
2017-07-20 17:08:29 +08:00
userInfo: state.project.userInfo,
tableLoading: state.project.tableLoading,
currGroup: state.group.currGroup,
total: state.project.total,
currPage: state.project.currPage
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,
2017-07-20 17:08:29 +08:00
userInfo: PropTypes.object,
tableLoading: PropTypes.bool,
currGroup: PropTypes.object,
total: PropTypes.number,
currPage: PropTypes.number
2017-07-14 16:54:20 +08:00
}
// 显示模态框 - 创建项目
@autobind
showAddProjectModal() {
2017-07-14 16:54:20 +08:00
this.setState({
visible: true
});
}
2017-07-20 17:53:28 +08:00
// 确认添加项目
@autobind
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) {
2017-07-20 17:53:28 +08:00
values.protocol = this.state.protocol.split(':')[0];
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, this.props.currPage).then((res) => {
2017-07-19 21:32:44 +08:00
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
});
}
});
}
// 取消修改
@autobind
handleCancel() {
2017-07-14 16:54:20 +08:00
this.props.form.resetFields();
this.setState({
visible: false
});
}
// 修改线上域名的协议类型 (http/https)
@autobind
protocolChange(value) {
this.setState({
protocol: value
})
2017-07-14 16:54:20 +08:00
}
// 分页逻辑
@autobind
paginationChange(pageNum) {
this.props.fetchProjectList(this.props.currGroup._id, pageNum).then((res) => {
if (res.payload.data.errcode) {
message.error(res.payload.data.errmsg);
} else {
this.props.changeTableLoading(false);
}
});
}
componentWillReceiveProps(nextProps) {
// 切换分组
if (this.props.currGroup !== nextProps.currGroup) {
this.props.fetchProjectList(nextProps.currGroup._id, this.props.currPage).then((res) => {
2017-07-18 22:08:01 +08:00
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,
2017-07-20 17:08:29 +08:00
message: '请输入项目线上域名!'
2017-07-14 16:54:20 +08:00
}]
})(
<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: [{
2017-07-20 17:08:29 +08:00
required: true, message: '请输入项目基本路径'
2017-07-14 16:54:20 +08:00
}]
})(
<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-20 22:24:31 +08:00
<Button className="m-btn" icon="plus" type="primary" onClick={this.showAddProjectModal}>创建项目</Button>
2017-07-14 16:54:20 +08:00
<Table
2017-07-20 22:24:31 +08:00
className="m-table"
bordered={true}
loading={this.props.tableLoading}
2017-07-20 17:08:29 +08:00
columns={getColumns(this.state.projectData, this.props)}
dataSource={this.state.projectData}
pagination={{
total: this.props.total * variable.PAGE_LIMIT,
defaultPageSize: variable.PAGE_LIMIT,
onChange: this.paginationChange
}}
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);