import React, { Component } from 'react' import PropTypes from 'prop-types' import { connect } from 'react-redux' import { Button, Icon, Modal, Input, message, Menu, Row, Col } from 'antd' import { autobind } from 'core-decorators'; import axios from 'axios'; const Search = Input.Search; const confirm = Modal.confirm; const TYPE_EDIT = 'edit'; import { fetchGroupList, setCurrGroup, addGroup, fetchProjectList } from '../../../actions/group.js' import './GroupList.scss' @connect( state => ({ groupList: state.group.groupList, currGroup: state.group.currGroup }), { fetchGroupList, setCurrGroup, addGroup, fetchProjectList } ) export default class GroupList extends Component { static propTypes = { groupList: PropTypes.array, currGroup: PropTypes.object, fetchGroupList: PropTypes.func, setCurrGroup: PropTypes.func, fetchProjectList: PropTypes.func } state = { addGroupModalVisible: false, editGroupModalVisible: false, newGroupName: '', newGroupDesc: '' } constructor(props) { super(props) } componentWillMount() { this.props.fetchGroupList().then(() => { const currGroup = this.props.groupList[0] || { group_name: '', group_desc: '' }; this.props.setCurrGroup(currGroup) }); } @autobind showModal(type) { if (type === 'edit') { const { currGroup } = this.props; this.setState({ currGroupName: currGroup.group_name, currGroupDesc: currGroup.group_desc, editGroupModalVisible: true }); } else { this.setState({ addGroupModalVisible: true }); } } @autobind hideModal(type) { if (type === TYPE_EDIT) { this.setState({ editGroupModalVisible: false }); } else { this.setState({ addGroupModalVisible: false }); } } @autobind addGroup() { const { newGroupName: group_name, newGroupDesc: group_desc } = this.state; axios.post('/group/add', { group_name, group_desc }).then(res => { if (res.data.errcode) { message.error(res.data.errmsg); } else { this.setState({ addGroupModalVisible: false }); this.props.fetchGroupList() this.props.setCurrGroup(res.data.data) } }); } @autobind editGroup() { const { currGroupName: group_name, currGroupDesc: group_desc } = this.state; const id = this.props.currGroup._id; axios.post('/group/up', { group_name, group_desc, id }).then(res => { if (res.data.errcode) { message.error(res.data.errmsg); } else { this.setState({ editGroupModalVisible: false }); this.props.setCurrGroup({ group_name, group_desc, _id: id }); } }); } @autobind inputNewGroupName(e, type) { if (type === TYPE_EDIT) { this.setState({ currGroupName: e.target.value}) } else { this.setState({newGroupName: e.target.value}); } } @autobind inputNewGroupDesc(e, type) { if (type === TYPE_EDIT) { this.setState({ currGroupDesc: e.target.value}) } else { this.setState({newGroupDesc: e.target.value}); } } @autobind selectGroup(e) { const groupId = e.key; const currGroup = this.props.groupList.find((group) => { return +group._id === +groupId }); this.props.setCurrGroup(currGroup); } @autobind deleteGroup() { const self = this; const { currGroup } = self.props; confirm({ title: `你确定要删除分组 ${currGroup.group_name}?`, content: `分组简介:${currGroup.group_desc}`, onOk() { axios.post('/group/del', {id: currGroup._id}).then(res => { if (res.data.errcode) { message.error(res.data.errmsg); } else { message.success('删除成功'); self.props.fetchGroupList().then(() => { const currGroup = self.props.groupList[0] || { group_name: '', group_desc: '' }; self.props.setCurrGroup(currGroup) }); } }); } }); } render () { const { groupList, currGroup } = this.props; return (