import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Table, Button, Modal, Form, Input, Icon, Tooltip, Select, Popconfirm, message } from 'antd';
import { addProject, fetchProjectList, delProject, changeUpdateModal, changeTableLoading } from '../../../actions/project';
import UpDateModal from './UpDateModal';
import { Link } from 'react-router-dom'
import variable from '../../../constants/variable';
import common from '../../../common';
import { autobind } from 'core-decorators';
const { TextArea } = Input;
const FormItem = Form.Item;
const Option = Select.Option;
import './ProjectList.scss'
// 确认删除项目 handleDelete, currGroup._id, fetchProjectList
const deleteConfirm = (id, props) => {
const { delProject, currGroup, fetchProjectList } = props;
const handle = () => {
delProject(id).then((res) => {
console.log(res);
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);
}
});
}
return handle;
};
const getColumns = (data, props) => {
const { changeUpdateModal, userInfo } = props;
return [{
title: '项目名称',
dataIndex: 'name',
key: 'name',
render: (text, record) => {
return {text}
}
}, {
title: '创建人',
dataIndex: 'owner',
key: 'owner',
render: (text, record, index) => {
// data是projectList的列表值
// 根据序号找到对应项的uid,根据uid获取对应项目的创建人
return {userInfo[data[index].uid] ? userInfo[data[index].uid].username : ''};
}
}, {
title: '创建时间',
dataIndex: 'add_time',
key: 'add_time',
render: time => {common.formatTime(time)}
}, {
title: '操作',
key: 'action',
render: (text, record, index) => {
const id = record._id;
return (
changeUpdateModal(true, index)}>修改
删除
)}
}];
}
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 6 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 14 }
}
};
@connect(
state => {
return {
projectList: state.project.projectList,
userInfo: state.project.userInfo,
tableLoading: state.project.tableLoading,
currGroup: state.group.currGroup,
total: state.project.total,
currPage: state.project.currPage
}
},
{
fetchProjectList,
addProject,
delProject,
changeUpdateModal,
changeTableLoading
}
)
class ProjectList extends Component {
constructor(props) {
super(props);
this.state = {
visible: false,
protocol: 'http:\/\/',
projectData: []
}
}
static propTypes = {
form: PropTypes.object,
fetchProjectList: PropTypes.func,
addProject: PropTypes.func,
delProject: PropTypes.func,
changeUpdateModal: PropTypes.func,
changeTableLoading: PropTypes.func,
projectList: PropTypes.array,
userInfo: PropTypes.object,
tableLoading: PropTypes.bool,
currGroup: PropTypes.object,
total: PropTypes.number,
currPage: PropTypes.number
}
// 显示模态框 - 创建项目
@autobind
showAddProjectModal() {
this.setState({
visible: true
});
}
// 确认添加项目
@autobind
handleOk(e) {
const { form, currGroup, changeTableLoading, addProject, fetchProjectList } = this.props;
const that = this;
e.preventDefault();
form.validateFields((err, values) => {
if (!err) {
values.protocol = this.state.protocol.split(':')[0];
// 获取当前分组id传入values
values.group_id = currGroup._id;
changeTableLoading(true);
addProject(values).then((res) => {
console.log(res);
// 添加项目成功后再次请求列表
if (res.payload.data.errcode == 0) {
that.setState({
visible: false
});
form.resetFields();
message.success('创建成功! ');
fetchProjectList(currGroup._id, this.props.currPage).then((res) => {
changeTableLoading(false);
console.log(131,res);
});
} else {
changeTableLoading(false);
message.error(res.payload.data.errmsg);
}
}).catch((err) => {
console.log(err);
changeTableLoading(false);
});
}
});
}
// 取消修改
@autobind
handleCancel() {
this.props.form.resetFields();
this.setState({
visible: false
});
}
// 修改线上域名的协议类型 (http/https)
@autobind
protocolChange(value) {
this.setState({
protocol: value
})
}
// 分页逻辑
@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) => {
if (res.payload.data.errcode) {
message.error(res.payload.data.errmsg);
} else {
this.props.changeTableLoading(false);
}
});
}
// 切换项目列表
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
});
}
}
render() {
const { getFieldDecorator } = this.props.form;
return (
);
}
}
export default Form.create()(ProjectList);