mirror/yapi
2
0
Fork 0
mirror of https://github.com/YMFE/yapi.git synced 2025-01-06 12:45:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 项目表格的loading状态由state转到store存储

Browse Source
This commit is contained in:
wenbo.dong 2017-07-19 21:21:40 +08:00
parent 62a9683c39
commit 524448c4bf
6 changed files with 56 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
client/actions/project.js
View File

@ -2,8 +2,9 @@ import {
FETCH_PROJECT_LIST,
PROJECT_ADD,
PROJECT_DEL,
OPRATE_UPDATE_MODAL,
PROJECT_UPDATE
CHANGE_UPDATE_MODAL,
PROJECT_UPDATE,
CHANGE_TABLE_LOADING
} from '../constants/action-types.js';
import axios from 'axios';
@ -16,11 +17,18 @@ const fetchProjectList = (id) => {
const changeUpdateModal = (data, index) => {
return {
type: OPRATE_UPDATE_MODAL,
type: CHANGE_UPDATE_MODAL,
payload: { data, index }
};
};
const changeTableLoading = (data) => {
return {
type: CHANGE_TABLE_LOADING,
payload: data
};
};
const addProject = (data) => {
const { name, prd_host, basepath, desc, group_id } = data;
const param = {
@ -67,5 +75,6 @@ export default {
addProject,
delProject,
changeUpdateModal,
updateProject
updateProject,
changeTableLoading
};

19
client/constants/action-types.js
View File

@ -8,17 +8,18 @@ export const FETCH_GROUP_LIST = 'FETCH_GROUP_LIST'
export const SET_CURR_GROUP = 'SET_CURR_GROUP'
// project
export const OPRATE_UPDATE_MODAL = 'OPRATE_UPDATE_MODAL' // 控制模态框 - 修改项目
export const OPRATE_ADD_MODAL = 'OPRATE_ADD_MODAL' // 控制模态框 - 创建项目
export const FETCH_PROJECT_LIST = 'FETCH_PROJECT_LIST' // 获取项目列表
export const PROJECT_ADD = 'PROJECT_ADD' // 添加项目
export const PROJECT_UPDATE = 'PROJECT_UPDATE' // 修改项目
export const PROJECT_DEL = 'PROJECT_DEL' // 删除项目
export const CHANGE_TABLE_LOADING = 'CHANGE_TABLE_LOADING' // 控制表格的Loading状态
export const CHANGE_UPDATE_MODAL = 'CHANGE_UPDATE_MODAL' // 控制模态框 - 修改项目
export const OPRATE_ADD_MODAL = 'OPRATE_ADD_MODAL' // 控制模态框 - 创建项目
export const FETCH_PROJECT_LIST = 'FETCH_PROJECT_LIST' // 获取项目列表
export const PROJECT_ADD = 'PROJECT_ADD' // 添加项目
export const PROJECT_UPDATE = 'PROJECT_UPDATE' // 修改项目
export const PROJECT_DEL = 'PROJECT_DEL' // 删除项目
// login
export const LOGIN = 'LOGIN'; // 登录
export const GET_LOGIN_STATE = 'GET_LOGIN_STATE'; // 获取登录信息
export const REGISTER = 'REGISTER'; // 注册
export const LOGIN = 'LOGIN'; // 登录
export const GET_LOGIN_STATE = 'GET_LOGIN_STATE'; // 获取登录信息
export const REGISTER = 'REGISTER'; // 注册
//header
export const LOGIN_TYPE = 'LOGIN_TYPE';

29
client/containers/ProjectGroups/ProjectList/ProjectList.js
View File

@ -2,7 +2,7 @@ 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 } from '../../../actions/project';
import { addProject, fetchProjectList, delProject, changeUpdateModal, changeTableLoading } from '../../../actions/project';
import UpDateModal from './UpDateModal';
const { TextArea } = Input;
const FormItem = Form.Item;
@ -69,6 +69,7 @@ const formItemLayout = {
state => {
return {
projectList: state.project.projectList,
tableLoading: state.project.tableLoading,
currGroup: state.group.currGroup
}
},
@ -76,7 +77,8 @@ const formItemLayout = {
fetchProjectList,
addProject,
delProject,
changeUpdateModal
changeUpdateModal,
changeTableLoading
}
)
class ProjectList extends Component {
@ -84,7 +86,6 @@ class ProjectList extends Component {
super(props);
this.state = {
visible: false,
tabelLoading: true,
protocol: 'http:\/\/',
projectData: []
}
@ -95,7 +96,9 @@ class ProjectList extends Component {
addProject: PropTypes.func,
delProject: PropTypes.func,
changeUpdateModal: PropTypes.func,
changeTableLoading: PropTypes.func,
projectList: PropTypes.array,
tableLoading: PropTypes.bool,
currGroup: PropTypes.object
}
showAddProjectModal = () => {
@ -114,23 +117,19 @@ class ProjectList extends Component {
console.log('Received values of form: ', values);
this.setState({
visible: false,
tabelLoading: true
visible: false
});
this.props.changeTableLoading(true);
this.props.addProject(values).then((res) => {
console.log(res);
// 添加项目成功后再次请求列表
this.props.fetchProjectList(this.props.currGroup._id).then((res) => {
this.setState({
tabelLoading: false
});
console.log(117,res);
this.props.changeTableLoading(false);
console.log(129,res);
});
}).catch((err) => {
console.log(err);
this.setState({
tabelLoading: false
});
this.props.changeTableLoading(false);
});
this.props.form.resetFields();
}
@ -159,9 +158,7 @@ class ProjectList extends Component {
if (res.payload.data.errcode) {
message.error(res.payload.data.errmsg);
} else {
this.setState({
tabelLoading: false
});
this.props.changeTableLoading(false);
}
});
}
@ -257,7 +254,7 @@ class ProjectList extends Component {
</Modal>
<UpDateModal/>
<Table
loading={this.state.tabelLoading}
loading={this.props.tableLoading}
columns={getColumns(this.state.projectData, this.props.delProject, this.props.currGroup._id, this.props.fetchProjectList, this.props.changeUpdateModal)}
dataSource={this.state.projectData}
title={() => <Button type="primary" onClick={this.showAddProjectModal}>创建项目</Button>}

24
client/containers/ProjectGroups/ProjectList/UpDateModal.js
View File

@ -2,7 +2,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Modal, Form, Input, Icon, Tooltip, Select, message } from 'antd';
import { updateProject, fetchProjectList, delProject, changeUpdateModal } from '../../../actions/project';
import { updateProject, fetchProjectList, delProject, changeUpdateModal, changeTableLoading } from '../../../actions/project';
const { TextArea } = Input;
const FormItem = Form.Item;
const Option = Select.Option;
@ -26,6 +26,7 @@ const formItemLayout = {
projectList: state.project.projectList,
isUpdateModalShow: state.project.isUpdateModalShow,
handleUpdateIndex: state.project.handleUpdateIndex,
tableLoading: state.project.tableLoading,
currGroup: state.group.currGroup
}
},
@ -33,15 +34,14 @@ const formItemLayout = {
fetchProjectList,
updateProject,
delProject,
changeUpdateModal
changeUpdateModal,
changeTableLoading
}
)
class UpDateModal extends Component {
constructor(props) {
super(props);
this.state = {
visible: false,
tabelLoading: true,
protocol: 'http:\/\/'
}
}
@ -51,6 +51,7 @@ class UpDateModal extends Component {
updateProject: PropTypes.func,
delProject: PropTypes.func,
changeUpdateModal: PropTypes.func,
changeTableLoading: PropTypes.func,
projectList: PropTypes.array,
currGroup: PropTypes.object,
isUpdateModalShow: PropTypes.bool,
@ -71,33 +72,28 @@ class UpDateModal extends Component {
handleOk = (e) => {
e.preventDefault();
const { form, updateProject, changeUpdateModal, currGroup, projectList, handleUpdateIndex, fetchProjectList } = this.props;
const { form, updateProject, changeUpdateModal, currGroup, projectList, handleUpdateIndex, fetchProjectList, changeTableLoading } = this.props;
form.validateFields((err, values) => {
if (!err) {
let assignValue = Object.assign(projectList[handleUpdateIndex], values);
assignValue.prd_host = this.state.protocol + assignValue.prd_host;
this.setState({
tabelLoading: true
});
changeTableLoading(true);
updateProject(assignValue).then((res) => {
if (res.payload.data.errcode == 0) {
changeUpdateModal(false, -1);
message.success('修改成功! ');
fetchProjectList(currGroup._id).then((res) => {
this.setState({
tabelLoading: false
});
console.log(res);
changeTableLoading(false);
});
} else {
changeTableLoading(false);
message.error(res.payload.data.errmsg);
}
}).catch((err) => {
console.log(err);
this.setState({
tabelLoading: false
});
changeTableLoading(false);
});
form.resetFields();
}

220
client/containers/ProjectGroups/ProjectList/addProjectModal.js
View File

@ -1,220 +0,0 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Modal, Form, Input, Icon, Tooltip, Select, message } from 'antd';
import { addProject, fetchProjectList, delProject } from '../../../actions/project';
const { TextArea } = Input;
const FormItem = Form.Item;
const Option = Select.Option;
import './ProjectList.scss'
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 6 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 14 }
}
};
@connect(
state => {
return {
projectList: state.project.projectList,
isAddModalShow: state.project.isAddModalShow,
currGroup: state.group.currGroup
}
},
{
fetchProjectList,
addProject,
delProject
}
)
class addProjectModal extends Component {
constructor(props) {
super(props);
this.state = {
visible: false,
tabelLoading: true,
protocol: 'http:\/\/',
projectData: []
}
}
static propTypes = {
form: PropTypes.object,
fetchProjectList: PropTypes.func,
addProject: PropTypes.func,
delProject: PropTypes.func,
projectList: PropTypes.array,
currGroup: PropTypes.object,
isAddModalShow: PropTypes.bool
}
showAddProjectModal = () => {
this.setState({
visible: true
});
}
handleOk = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
values.prd_host = this.state.protocol + values.prd_host;
// 获取当前分组id传入values
values.group_id = this.props.currGroup._id;
console.log('Received values of form: ', values);
this.setState({
visible: false,
tabelLoading: true
});
this.props.addProject(values).then((res) => {
console.log(res);
// 添加项目成功后再次请求列表
this.props.fetchProjectList(this.props.currGroup._id).then((res) => {
this.setState({
tabelLoading: false
});
console.log(117,res);
});
}).catch((err) => {
console.log(err);
this.setState({
tabelLoading: false
});
});
this.props.form.resetFields();
}
});
}
// 取消修改
handleCancel = () => {
this.props.form.resetFields();
this.setState({
visible: false
});
}
// 修改线上域名的协议类型 (http/https)
protocolChange = (value) => {
this.setState({
protocol: value
})
}
componentWillReceiveProps(nextProps){
// 切换分组
if (this.props.currGroup !== nextProps.currGroup) {
this.props.fetchProjectList(nextProps.currGroup._id).then((res) => {
if (res.payload.data.errcode) {
message.error(res.payload.data.errmsg);
} else {
this.setState({
tabelLoading: 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
});
}
}
componentWillMount() {
console.log(this.props);
}
render() {
console.log(12);
const { getFieldDecorator } = this.props.form;
console.log(this.props);
return (
<Modal
title="创建项目"
visible={true}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<Form>
<FormItem
{...formItemLayout}
label="项目名称"
>
{getFieldDecorator('name', {
rules: [{
required: true, message: '请输入项目名称!'
}]
})(
<Input />
)}
</FormItem>
<FormItem
{...formItemLayout}
label={(
<span>
线上域名&nbsp;
<Tooltip title="将根据配置的线上域名访问mock数据">
<Icon type="question-circle-o" />
</Tooltip>
</span>
)}
>
{getFieldDecorator('prd_host', {
rules: [{
required: true, message: '请输入项目线上域名!'
}]
})(
<Input addonBefore={(
<Select defaultValue="http://" onChange={this.protocolChange}>
<Option value="http://">{'http:\/\/'}</Option>
<Option value="https://">{'https:\/\/'}</Option>
</Select>)} />
)}
</FormItem>
<FormItem
{...formItemLayout}
label="基本路径"
>
{getFieldDecorator('basepath', {
rules: [{
required: true, message: '请输入项目基本路径!'
}]
})(
<Input />
)}
</FormItem>
<FormItem
{...formItemLayout}
label="描述"
>
{getFieldDecorator('desc', {
rules: [{
required: true, message: '请输入描述!'
}]
})(
<TextArea rows={4} />
)}
</FormItem>
</Form>
</Modal>
);
}
}
export default Form.create()(addProjectModal);

12
client/reducer/group/project.js
View File

@ -2,25 +2,33 @@ import {
FETCH_PROJECT_LIST,
PROJECT_ADD,
PROJECT_DEL,
OPRATE_UPDATE_MODAL
CHANGE_UPDATE_MODAL,
CHANGE_TABLE_LOADING
} from '../../constants/action-types';
const initialState = {
isUpdateModalShow: false,
handleUpdateIndex: -1,
projectList: [],
tableLoading: true,
total: null
};
export default (state = initialState, action) => {
switch (action.type) {
case OPRATE_UPDATE_MODAL: {
case CHANGE_UPDATE_MODAL: {
return {
...state,
isUpdateModalShow: action.payload.data,
handleUpdateIndex: action.payload.index
};
}
case CHANGE_TABLE_LOADING: {
return {
...state,
tableLoading: action.payload
}
}
case FETCH_PROJECT_LIST: {
return {
...state,