mirror of
https://github.com/YMFE/yapi.git
synced 2025-02-05 13:29:43 +08:00
feat: 编辑项目
This commit is contained in:
parent
7d73241dc8
commit
1cc8f3d43a
@ -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);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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>
|
|
||||||
线上域名
|
|
||||||
<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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user