feat: 编辑项目

This commit is contained in:
wenbo.dong 2017-08-17 22:19:58 +08:00
parent 7d73241dc8
commit 1cc8f3d43a
4 changed files with 134 additions and 131 deletions

View File

@ -1,32 +1,14 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { message, Row, Col, Icon } from 'antd'; import { Row, Col, Icon } from 'antd';
import { addProject, fetchProjectList, delProject, changeUpdateModal, changeTableLoading } from '../../../reducer/modules/project'; import { addProject, fetchProjectList, delProject, changeUpdateModal } from '../../../reducer/modules/project';
import ProjectCard from '../../../components/ProjectCard/ProjectCard.js'; import ProjectCard from '../../../components/ProjectCard/ProjectCard.js';
// import variable from '../../../constants/variable'; // import variable from '../../../constants/variable';
import { autobind } from 'core-decorators'; import { autobind } from 'core-decorators';
import './ProjectList.scss' import './ProjectList.scss'
// 确认删除项目 handleDelete, currGroup._id, fetchProjectList
// const deleteConfirm = (id, props) => {
// const { delProject, currGroup, fetchProjectList } = props;
// const handle = () => {
// delProject(id).then((res) => {
// if (res.payload.data.errcode == 0) {
// message.success('删除成功!')
// fetchProjectList(currGroup._id).then(() => {
// });
// } else {
// message.error(res.payload.data.errmsg);
// }
// });
// }
// return handle;
// };
@connect( @connect(
state => { state => {
return { return {
@ -42,8 +24,7 @@ import './ProjectList.scss'
fetchProjectList, fetchProjectList,
addProject, addProject,
delProject, delProject,
changeUpdateModal, changeUpdateModal
changeTableLoading
} }
) )
class ProjectList extends Component { class ProjectList extends Component {
@ -61,7 +42,6 @@ class ProjectList extends Component {
addProject: PropTypes.func, addProject: PropTypes.func,
delProject: PropTypes.func, delProject: PropTypes.func,
changeUpdateModal: PropTypes.func, changeUpdateModal: PropTypes.func,
changeTableLoading: PropTypes.func,
projectList: PropTypes.array, projectList: PropTypes.array,
userInfo: PropTypes.object, userInfo: PropTypes.object,
tableLoading: PropTypes.bool, tableLoading: PropTypes.bool,
@ -103,16 +83,7 @@ class ProjectList extends Component {
// 切换分组 // 切换分组
if (this.props.currGroup !== nextProps.currGroup) { if (this.props.currGroup !== nextProps.currGroup) {
if (nextProps.currGroup._id) { if (nextProps.currGroup._id) {
this.props.fetchProjectList(nextProps.currGroup._id, this.props.currPage).then((res) => { this.props.fetchProjectList(nextProps.currGroup._id, this.props.currPage)
if (res.payload.data.errcode) {
message.error(res.payload.data.errmsg);
} else {
this.props.changeTableLoading(false);
}
});
} else {
// 无分组的时候停止loading状态
this.props.changeTableLoading(false);
} }
} }

View File

@ -1,11 +1,13 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import { Form, Input, Icon, Tooltip, Select, Button, Row, Col, message } from 'antd'; import { Form, Input, Icon, Tooltip, Select, Button, Row, Col, message, Card } from 'antd';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { updateProject, fetchProjectList, delProject, changeUpdateModal, changeTableLoading } from '../../../reducer/modules/project'; import { updateProject, delProject, getProjectMsg } from '../../../reducer/modules/project';
import { fetchGroupMsg } from '../../../reducer/modules/group';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
const { TextArea } = Input; const { TextArea } = Input;
const FormItem = Form.Item; const FormItem = Form.Item;
const Option = Select.Option; const Option = Select.Option;
import './Setting.scss';
// layout // layout
const formItemLayout = { const formItemLayout = {
@ -21,29 +23,20 @@ const formItemLayout = {
}, },
className: 'form-item' className: 'form-item'
}; };
const formItemLayoutWithOutLabel = { let uuid = 0; // 环境配置的计数
wrapperCol: {
xs: { span: 24, offset: 0 },
sm: { span: 20, offset: 6 }
}
};
let uuid = 0;
@connect( @connect(
state => { state => {
return { return {
projectList: state.project.projectList, projectList: state.project.projectList,
handleUpdateIndex: state.project.handleUpdateIndex, projectMsg: state.project.projectMsg
tableLoading: state.project.tableLoading,
currGroup: state.group.currGroup
} }
}, },
{ {
fetchProjectList,
updateProject, updateProject,
delProject, delProject,
changeUpdateModal, getProjectMsg,
changeTableLoading fetchGroupMsg
} }
) )
class Setting extends Component { class Setting extends Component {
@ -51,41 +44,36 @@ class Setting extends Component {
super(props); super(props);
this.state = { this.state = {
protocol: 'http:\/\/', protocol: 'http:\/\/',
envProtocolChange: 'http:\/\/' envProtocolChange: 'http:\/\/',
projectMsg: {}
} }
} }
static propTypes = { static propTypes = {
match: PropTypes.object,
form: PropTypes.object, form: PropTypes.object,
fetchProjectList: PropTypes.func,
updateProject: PropTypes.func, updateProject: PropTypes.func,
delProject: PropTypes.func, delProject: PropTypes.func,
changeUpdateModal: PropTypes.func, getProjectMsg: PropTypes.func,
changeTableLoading: PropTypes.func, fetchGroupMsg: PropTypes.func,
projectList: PropTypes.array, projectList: PropTypes.array,
currGroup: PropTypes.object, projectMsg: PropTypes.object
handleUpdateIndex: PropTypes.number
} }
// 修改线上域名的协议类型 (http/https) // 修改线上域名的协议类型 (http/https)
protocolChange = (value) => { protocolChange = (value) => {
this.setState({ this.setState({
protocol: value protocol: value,
currGroup: ''
}) })
} }
handleCancel = () => {
this.props.form.resetFields();
this.props.changeUpdateModal(false, -1);
}
// 确认修改 // 确认修改
handleOk = (e) => { handleOk = (e) => {
e.preventDefault(); e.preventDefault();
const { form, updateProject, changeUpdateModal, currGroup, projectList, handleUpdateIndex, fetchProjectList, changeTableLoading } = this.props; const { form, updateProject, projectMsg } = this.props;
form.validateFields((err, values) => { form.validateFields((err, values) => {
if (!err) { if (!err) {
// console.log(projectList[handleUpdateIndex]); let assignValue = Object.assign(projectMsg, values);
let assignValue = Object.assign(projectList[handleUpdateIndex], values);
values.protocol = this.state.protocol.split(':')[0]; values.protocol = this.state.protocol.split(':')[0];
assignValue.env = assignValue.envs.map((item, index) => { assignValue.env = assignValue.envs.map((item, index) => {
return { return {
@ -95,20 +83,14 @@ class Setting extends Component {
}); });
// console.log(assignValue); // console.log(assignValue);
changeTableLoading(true);
updateProject(assignValue).then((res) => { updateProject(assignValue).then((res) => {
console.log(res);
if (res.payload.data.errcode == 0) { if (res.payload.data.errcode == 0) {
changeUpdateModal(false, -1);
message.success('修改成功! '); message.success('修改成功! ');
fetchProjectList(currGroup._id).then(() => {
changeTableLoading(false);
});
} else { } else {
changeTableLoading(false);
message.error(res.payload.data.errmsg); message.error(res.payload.data.errmsg);
} }
}).catch(() => { }).catch(() => {
changeTableLoading(false);
}); });
form.resetFields(); form.resetFields();
} }
@ -148,29 +130,38 @@ class Setting extends Component {
}); });
} }
handleDelete = () => {
console.log(this.props); // 出问题了
this.props.delProject(this.props.match.params.id).then((res) => {
if (res.payload.data.errcode == 0) {
message.success('删除成功!');
}
});
}
async componentWillMount() {
await this.props.getProjectMsg(this.props.match.params.id);
const groupMsg = await this.props.fetchGroupMsg(this.props.projectMsg.group_id);
this.setState({
currGroup: groupMsg.payload.data.data.group_name
})
}
render () { render () {
const { getFieldDecorator, getFieldValue } = this.props.form; const { getFieldDecorator, getFieldValue } = this.props.form;
// const that = this; // const that = this;
const { projectList, handleUpdateIndex } = this.props; const { projectMsg } = this.props;
console.log(this.props);
let initFormValues = {}; let initFormValues = {};
let envMessage = []; let envMessage = [];
// 如果列表存在且用户点击修改按钮时,设置表单默认值 const { name, basepath, desc, env } = projectMsg;
if (projectList.length !== 0 && handleUpdateIndex !== -1) { initFormValues = { name, basepath, desc, env };
// console.log(projectList[handleUpdateIndex]); if (env && env.length !== 0) {
const { name, basepath, desc, env } = projectList[handleUpdateIndex]; envMessage = env;
initFormValues = { name, basepath, desc, env };
if (env.length !== 0) {
envMessage = env;
}
initFormValues.prd_host = projectList[handleUpdateIndex].prd_host;
initFormValues.prd_protocol = projectList[handleUpdateIndex].protocol + '\:\/\/';
} }
getFieldDecorator('envs', { initialValue: envMessage }); getFieldDecorator('envs', { initialValue: envMessage });
const envs = getFieldValue('envs'); const envs = getFieldValue('envs');
const formItems = envs.map((k, index) => { const envSettingItems = envs.map((k, index) => {
const secondIndex = 'next' + index; // 为保证key的唯一性 const secondIndex = 'next' + index; // 为保证key的唯一性
return ( return (
<Row key={index} type="flex" justify="space-between" align={index === 0 ? 'middle' : 'top'}> <Row key={index} type="flex" justify="space-between" align={index === 0 ? 'middle' : 'top'}>
@ -286,27 +277,9 @@ class Setting extends Component {
<FormItem <FormItem
{...formItemLayout} {...formItemLayout}
label={( label="所属分组"
<span>
线上域名&nbsp;
<Tooltip title="将根据配置的线上域名访问mock数据">
<Icon type="question-circle-o" />
</Tooltip>
</span>
)}
> >
{getFieldDecorator('prd_host', { <Input value={this.state.currGroup} disabled={true} />
initialValue: initFormValues.prd_host,
rules: [{
required: true, message: '请输入项目线上域名!'
}]
})(
<Input addonBefore={(
<Select defaultValue={initFormValues.prd_protocol} onChange={this.protocolChange}>
<Option value="http://">{'http:\/\/'}</Option>
<Option value="https://">{'https:\/\/'}</Option>
</Select>)} />
)}
</FormItem> </FormItem>
<FormItem <FormItem
@ -344,13 +317,41 @@ class Setting extends Component {
)} )}
</FormItem> </FormItem>
{formItems} <FormItem
<FormItem {...formItemLayoutWithOutLabel}> {...formItemLayout}
label="所属分组"
>
{envSettingItems}
</FormItem>
<FormItem {...formItemLayout}>
<Button type="dashed" onClick={this.add} style={{ width: '60%' }}> <Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
<Icon type="plus" /> 添加环境配置 <Icon type="plus" /> 添加环境配置
</Button> </Button>
</FormItem> </FormItem>
</Form> </Form>
<Row>
<Col sm={{ offset: 6 }} lg={{ offset: 3 }}>
<Button className="m-btn" icon="plus" type="primary"
onClick={this.handleOk}
>修改项目</Button>
</Col>
</Row>
<hr className="breakline" />
<FormItem
{...formItemLayout}
label="危险操作"
>
<Card noHovering={true} className="card-danger">
<div className="card-danger-content">
<h3>删除项目</h3>
<p>项目一旦删除将无法恢复数据请慎重操作</p>
</div>
<Button type="danger" ghost className="card-danger-btn" onClick={this.handleDelete}>删除</Button>
</Card>
</FormItem>
</div> </div>
) )
} }

View File

@ -2,3 +2,24 @@
.form-item { .form-item {
margin-bottom: .16rem; margin-bottom: .16rem;
} }
.breakline {
margin-top: .18rem;
margin-bottom: .18rem;
border: 0;
border-top: 1px solid #eeeeee;
}
.card-danger {
border-color: #ff561b;
border-radius: 4px;
.ant-card-body {
display: flex;
align-items: center;
}
.card-danger-content {
flex: 1;
}
.card-danger-btn {
flex-grow: 0;
flex-shrink: 1;
}
}

View File

@ -3,10 +3,10 @@ import variable from '../../constants/variable';
// Actions // Actions
const FETCH_PROJECT_LIST = 'yapi/project/FETCH_PROJECT_LIST'; const FETCH_PROJECT_LIST = 'yapi/project/FETCH_PROJECT_LIST';
const GET_PROJECT_MSG = 'yapi/project/GET_PROJECT_MSG';
const PROJECT_ADD = 'yapi/project/PROJECT_ADD'; const PROJECT_ADD = 'yapi/project/PROJECT_ADD';
const PROJECT_DEL = 'yapi/project/PROJECT_DEL'; const PROJECT_DEL = 'yapi/project/PROJECT_DEL';
const CHANGE_UPDATE_MODAL = 'yapi/project/CHANGE_UPDATE_MODAL'; // const CHANGE_TABLE_LOADING = 'yapi/project/CHANGE_TABLE_LOADING';
const CHANGE_TABLE_LOADING = 'yapi/project/CHANGE_TABLE_LOADING';
const PROJECT_UPDATE = 'yapi/project/PROJECT_UPDATE'; const PROJECT_UPDATE = 'yapi/project/PROJECT_UPDATE';
const GET_CURR_PROJECT = 'yapi/project/GET_CURR_PROJECT' const GET_CURR_PROJECT = 'yapi/project/GET_CURR_PROJECT'
@ -15,6 +15,7 @@ const initialState = {
isUpdateModalShow: false, isUpdateModalShow: false,
handleUpdateIndex: -1, handleUpdateIndex: -1,
projectList: [], projectList: [],
projectMsg: {},
userInfo: {}, userInfo: {},
tableLoading: true, tableLoading: true,
total: 0, total: 0,
@ -30,19 +31,19 @@ export default (state = initialState, action) => {
currProject: action.payload.data currProject: action.payload.data
} }
} }
case CHANGE_UPDATE_MODAL: { // case CHANGE_UPDATE_MODAL: {
return { // return {
...state, // ...state,
isUpdateModalShow: action.payload.data, // isUpdateModalShow: action.payload.data,
handleUpdateIndex: action.payload.index // handleUpdateIndex: action.payload.index
}; // };
} // }
case CHANGE_TABLE_LOADING: { // case CHANGE_TABLE_LOADING: {
return { // return {
...state, // ...state,
tableLoading: action.payload // tableLoading: action.payload
} // }
} // }
case FETCH_PROJECT_LIST: { case FETCH_PROJECT_LIST: {
return { return {
...state, ...state,
@ -51,6 +52,12 @@ export default (state = initialState, action) => {
userInfo: action.payload.data.data.userinfo userInfo: action.payload.data.data.userinfo
}; };
} }
case GET_PROJECT_MSG: {
return {
...state,
projectMsg: action.payload.data.data
};
}
case PROJECT_ADD: { case PROJECT_ADD: {
return state; return state;
} }
@ -62,7 +69,7 @@ export default (state = initialState, action) => {
} }
}; };
// Action Creators // 获取某分组下的项目列表
export function fetchProjectList(id, pageNum) { export function fetchProjectList(id, pageNum) {
return { return {
type: FETCH_PROJECT_LIST, type: FETCH_PROJECT_LIST,
@ -76,19 +83,22 @@ export function fetchProjectList(id, pageNum) {
}; };
} }
export function changeUpdateModal(data, index) { // 获取项目信息
export function getProjectMsg(id) {
return { return {
type: CHANGE_UPDATE_MODAL, type: GET_PROJECT_MSG,
payload: { data, index } payload: axios.get('/api/project/get', {
params: { id }
})
}; };
} }
export function changeTableLoading(data) { // export function changeTableLoading(data) {
return { // return {
type: CHANGE_TABLE_LOADING, // type: CHANGE_TABLE_LOADING,
payload: data // payload: data
}; // };
} // }
export function addProject(data) { export function addProject(data) {
const { name, prd_host, basepath, desc, group_id, protocol } = data; const { name, prd_host, basepath, desc, group_id, protocol } = data;