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 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' // 确认删除项目 const deleteConfirm = (id, handleDelete, currGroupId, handleFetchList) => { const test = () => { handleDelete(id).then((res) => { console.log(res); console.log(handleFetchList, currGroupId); handleFetchList(currGroupId).then((res) => { console.log(res); }); }); } return test; }; const getColumns = (data, handleDelete, currGroupId, handleFetchList, handleUpdateModal) => { return [{ title: '项目名称', dataIndex: 'name', key: 'name', render: text => {text} }, { title: '创建人', dataIndex: 'owner', key: 'owner' }, { title: '创建时间', dataIndex: 'add_time', key: 'add_time', render: time => {common.formatTime(time)} }, { title: '操作', key: 'action', render: (text, record, index) => { const id = record._id; return ( handleUpdateModal(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, 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, 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.prd_host = this.state.protocol + values.prd_host; // 获取当前分组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 (
{getFieldDecorator('name', { rules: [{ required: true, message: '请输入项目名称!' }] })( )} 线上域名  )} > {getFieldDecorator('prd_host', { rules: [{ required: true, message: '请输入项目线上域名,不允许出现‘\/’!', pattern: /.+\w$/ }] })( )} /> )} {getFieldDecorator('basepath', { rules: [{ required: true, message: '基本路径应以\'\/\'开头,以\'\/\'结尾! ', pattern: /^\/.+\/$/ }] })( )} {getFieldDecorator('desc', { rules: [{ required: true, message: '请输入描述!' }] })(