fork from bc4552c5a8
This commit is contained in:
217
client/containers/Group/ProjectList/ProjectList.js
Normal file
217
client/containers/Group/ProjectList/ProjectList.js
Normal file
@@ -0,0 +1,217 @@
|
||||
import React, { PureComponent as Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { Row, Col, Button, Tooltip } from 'antd';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
addProject,
|
||||
fetchProjectList,
|
||||
delProject,
|
||||
changeUpdateModal
|
||||
} from '../../../reducer/modules/project';
|
||||
import ProjectCard from '../../../components/ProjectCard/ProjectCard.js';
|
||||
import ErrMsg from '../../../components/ErrMsg/ErrMsg.js';
|
||||
import { autobind } from 'core-decorators';
|
||||
import { setBreadcrumb } from '../../../reducer/modules/user';
|
||||
|
||||
import './ProjectList.scss';
|
||||
|
||||
@connect(
|
||||
state => {
|
||||
return {
|
||||
projectList: state.project.projectList,
|
||||
userInfo: state.project.userInfo,
|
||||
tableLoading: state.project.tableLoading,
|
||||
currGroup: state.group.currGroup,
|
||||
currPage: state.project.currPage
|
||||
};
|
||||
},
|
||||
{
|
||||
fetchProjectList,
|
||||
addProject,
|
||||
delProject,
|
||||
changeUpdateModal,
|
||||
setBreadcrumb
|
||||
}
|
||||
)
|
||||
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,
|
||||
projectList: PropTypes.array,
|
||||
userInfo: PropTypes.object,
|
||||
tableLoading: PropTypes.bool,
|
||||
currGroup: PropTypes.object,
|
||||
setBreadcrumb: PropTypes.func,
|
||||
currPage: PropTypes.number,
|
||||
studyTip: PropTypes.number,
|
||||
study: PropTypes.bool
|
||||
};
|
||||
|
||||
// 取消修改
|
||||
@autobind
|
||||
handleCancel() {
|
||||
this.props.form.resetFields();
|
||||
this.setState({
|
||||
visible: false
|
||||
});
|
||||
}
|
||||
|
||||
// 修改线上域名的协议类型 (http/https)
|
||||
@autobind
|
||||
protocolChange(value) {
|
||||
this.setState({
|
||||
protocol: value
|
||||
});
|
||||
}
|
||||
|
||||
// 获取 ProjectCard 组件的关注事件回调，收到后更新数据
|
||||
|
||||
receiveRes = () => {
|
||||
this.props.fetchProjectList(this.props.currGroup._id, this.props.currPage);
|
||||
};
|
||||
|
||||
UNSAFE_componentWillReceiveProps(nextProps) {
|
||||
this.props.setBreadcrumb([{ name: '' + (nextProps.currGroup.group_name || '') }]);
|
||||
|
||||
// 切换分组
|
||||
if (this.props.currGroup !== nextProps.currGroup && nextProps.currGroup._id) {
|
||||
this.props.fetchProjectList(nextProps.currGroup._id, this.props.currPage);
|
||||
}
|
||||
|
||||
// 切换项目列表
|
||||
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() {
|
||||
let projectData = this.state.projectData;
|
||||
let noFollow = [];
|
||||
let followProject = [];
|
||||
for (var i in projectData) {
|
||||
if (projectData[i].follow) {
|
||||
followProject.push(projectData[i]);
|
||||
} else {
|
||||
noFollow.push(projectData[i]);
|
||||
}
|
||||
}
|
||||
followProject = followProject.sort((a, b) => {
|
||||
return b.up_time - a.up_time;
|
||||
});
|
||||
noFollow = noFollow.sort((a, b) => {
|
||||
return b.up_time - a.up_time;
|
||||
});
|
||||
projectData = [...followProject, ...noFollow];
|
||||
|
||||
const isShow = /(admin)|(owner)|(dev)/.test(this.props.currGroup.role);
|
||||
|
||||
const Follow = () => {
|
||||
return followProject.length ? (
|
||||
<Row>
|
||||
<h3 className="owner-type">我的关注</h3>
|
||||
{followProject.map((item, index) => {
|
||||
return (
|
||||
<Col xs={8} lg={6} xxl={4} key={index}>
|
||||
<ProjectCard projectData={item} callbackResult={this.receiveRes} />
|
||||
</Col>
|
||||
);
|
||||
})}
|
||||
</Row>
|
||||
) : null;
|
||||
};
|
||||
const NoFollow = () => {
|
||||
return noFollow.length ? (
|
||||
<Row style={{ borderBottom: '1px solid #eee', marginBottom: '15px' }}>
|
||||
<h3 className="owner-type">我的项目</h3>
|
||||
{noFollow.map((item, index) => {
|
||||
return (
|
||||
<Col xs={8} lg={6} xxl={4} key={index}>
|
||||
<ProjectCard projectData={item} callbackResult={this.receiveRes} isShow={isShow} />
|
||||
</Col>
|
||||
);
|
||||
})}
|
||||
</Row>
|
||||
) : null;
|
||||
};
|
||||
|
||||
const OwnerSpace = () => {
|
||||
return projectData.length ? (
|
||||
<div>
|
||||
<NoFollow />
|
||||
<Follow />
|
||||
</div>
|
||||
) : (
|
||||
<ErrMsg type="noProject" />
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ paddingTop: '24px' }} className="m-panel card-panel card-panel-s project-list">
|
||||
<Row className="project-list-header">
|
||||
<Col span={16} style={{ textAlign: 'left' }}>
|
||||
{this.props.currGroup.group_name} 分组共 ({projectData.length}) 个项目
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
{isShow ? (
|
||||
<Link to="/add-project">
|
||||
<Button type="primary">添加项目</Button>
|
||||
</Link>
|
||||
) : (
|
||||
<Tooltip title="您没有权限,请联系该分组组长或管理员">
|
||||
<Button type="primary" disabled>
|
||||
添加项目
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
{/* {projectData.length ? projectData.map((item, index) => {
|
||||
return (
|
||||
<Col xs={8} md={6} xl={4} key={index}>
|
||||
<ProjectCard projectData={item} callbackResult={this.receiveRes} />
|
||||
</Col>);
|
||||
}) : <ErrMsg type="noProject" />} */}
|
||||
{this.props.currGroup.type === 'private' ? (
|
||||
<OwnerSpace />
|
||||
) : projectData.length ? (
|
||||
projectData.map((item, index) => {
|
||||
return (
|
||||
<Col xs={8} lg={6} xxl={4} key={index}>
|
||||
<ProjectCard
|
||||
projectData={item}
|
||||
callbackResult={this.receiveRes}
|
||||
isShow={isShow}
|
||||
/>
|
||||
</Col>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<ErrMsg type="noProject" />
|
||||
)}
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ProjectList;
|
||||
62
client/containers/Group/ProjectList/ProjectList.scss
Normal file
62
client/containers/Group/ProjectList/ProjectList.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
.ant-tabs-bar {
|
||||
border-bottom: 1px solid transparent;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
.m-panel{
|
||||
background-color: #fff;
|
||||
padding: 24px;
|
||||
min-height: 4.68rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.project-list{
|
||||
.project-list-header{
|
||||
background: #eee;
|
||||
height: 64px;
|
||||
line-height: 40px;
|
||||
border-radius: 4px;
|
||||
text-align: right;
|
||||
padding: 0 10px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: rgba(39, 56, 72, 0.85);
|
||||
font-weight: 500;
|
||||
}
|
||||
.owner-type{
|
||||
// padding: 10px;
|
||||
font-size: 15px;
|
||||
// background-color: #eee;
|
||||
// border-radius: 4px;
|
||||
// margin-bottom: 15px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 0.16rem;
|
||||
border-left: 3px solid #2395f1;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ant-input-group-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dynamic-delete-button {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
font-size: 24px;
|
||||
color: #999;
|
||||
transition: all .3s;
|
||||
}
|
||||
.dynamic-delete-button:hover {
|
||||
color: #777;
|
||||
}
|
||||
.dynamic-delete-button[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
387
client/containers/Group/ProjectList/UpDateModal.js
Normal file
387
client/containers/Group/ProjectList/UpDateModal.js
Normal file
@@ -0,0 +1,387 @@
|
||||
import React, { PureComponent as Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { Modal, Form, Input, Icon, Tooltip, Select, message, Button, Row, Col } from 'antd';
|
||||
import {
|
||||
updateProject,
|
||||
fetchProjectList,
|
||||
delProject,
|
||||
changeUpdateModal,
|
||||
changeTableLoading
|
||||
} from '../../../reducer/modules/project';
|
||||
const { TextArea } = Input;
|
||||
const FormItem = Form.Item;
|
||||
const Option = Select.Option;
|
||||
|
||||
import './ProjectList.scss';
|
||||
|
||||
// layout
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 14 }
|
||||
}
|
||||
};
|
||||
const formItemLayoutWithOutLabel = {
|
||||
wrapperCol: {
|
||||
xs: { span: 24, offset: 0 },
|
||||
sm: { span: 20, offset: 6 }
|
||||
}
|
||||
};
|
||||
let uuid = 0;
|
||||
|
||||
@connect(
|
||||
state => {
|
||||
return {
|
||||
projectList: state.project.projectList,
|
||||
isUpdateModalShow: state.project.isUpdateModalShow,
|
||||
handleUpdateIndex: state.project.handleUpdateIndex,
|
||||
tableLoading: state.project.tableLoading,
|
||||
currGroup: state.group.currGroup
|
||||
};
|
||||
},
|
||||
{
|
||||
fetchProjectList,
|
||||
updateProject,
|
||||
delProject,
|
||||
changeUpdateModal,
|
||||
changeTableLoading
|
||||
}
|
||||
)
|
||||
class UpDateModal extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
protocol: 'http://',
|
||||
envProtocolChange: 'http://'
|
||||
};
|
||||
}
|
||||
static propTypes = {
|
||||
form: PropTypes.object,
|
||||
fetchProjectList: PropTypes.func,
|
||||
updateProject: PropTypes.func,
|
||||
delProject: PropTypes.func,
|
||||
changeUpdateModal: PropTypes.func,
|
||||
changeTableLoading: PropTypes.func,
|
||||
projectList: PropTypes.array,
|
||||
currGroup: PropTypes.object,
|
||||
isUpdateModalShow: PropTypes.bool,
|
||||
handleUpdateIndex: PropTypes.number
|
||||
};
|
||||
|
||||
// 修改线上域名的协议类型 (http/https)
|
||||
protocolChange = value => {
|
||||
this.setState({
|
||||
protocol: value
|
||||
});
|
||||
};
|
||||
|
||||
handleCancel = () => {
|
||||
this.props.form.resetFields();
|
||||
this.props.changeUpdateModal(false, -1);
|
||||
};
|
||||
|
||||
// 确认修改
|
||||
handleOk = e => {
|
||||
e.preventDefault();
|
||||
const {
|
||||
form,
|
||||
updateProject,
|
||||
changeUpdateModal,
|
||||
currGroup,
|
||||
projectList,
|
||||
handleUpdateIndex,
|
||||
fetchProjectList,
|
||||
changeTableLoading
|
||||
} = this.props;
|
||||
form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
// console.log(projectList[handleUpdateIndex]);
|
||||
let assignValue = Object.assign(projectList[handleUpdateIndex], values);
|
||||
values.protocol = this.state.protocol.split(':')[0];
|
||||
assignValue.env = assignValue.envs.map((item, index) => {
|
||||
return {
|
||||
name: values['envs-name-' + index],
|
||||
domain: values['envs-protocol-' + index] + values['envs-domain-' + index]
|
||||
};
|
||||
});
|
||||
// console.log(assignValue);
|
||||
|
||||
changeTableLoading(true);
|
||||
updateProject(assignValue)
|
||||
.then(res => {
|
||||
if (res.payload.data.errcode == 0) {
|
||||
changeUpdateModal(false, -1);
|
||||
message.success('修改成功! ');
|
||||
fetchProjectList(currGroup._id).then(() => {
|
||||
changeTableLoading(false);
|
||||
});
|
||||
} else {
|
||||
changeTableLoading(false);
|
||||
message.error(res.payload.data.errmsg);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
changeTableLoading(false);
|
||||
});
|
||||
form.resetFields();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 项目的修改操作 - 删除一项环境配置
|
||||
remove = id => {
|
||||
const { form } = this.props;
|
||||
// can use data-binding to get
|
||||
const envs = form.getFieldValue('envs');
|
||||
// We need at least one passenger
|
||||
if (envs.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// can use data-binding to set
|
||||
form.setFieldsValue({
|
||||
envs: envs.filter(key => {
|
||||
const realKey = key._id ? key._id : key;
|
||||
return realKey !== id;
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
// 项目的修改操作 - 添加一项环境配置
|
||||
add = () => {
|
||||
uuid++;
|
||||
const { form } = this.props;
|
||||
// can use data-binding to get
|
||||
const envs = form.getFieldValue('envs');
|
||||
const nextKeys = envs.concat(uuid);
|
||||
// can use data-binding to set
|
||||
// important! notify form to detect changes
|
||||
form.setFieldsValue({
|
||||
envs: nextKeys
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { getFieldDecorator, getFieldValue } = this.props.form;
|
||||
// const that = this;
|
||||
const { isUpdateModalShow, projectList, handleUpdateIndex } = this.props;
|
||||
let initFormValues = {};
|
||||
let envMessage = [];
|
||||
// 如果列表存在且用户点击修改按钮时，设置表单默认值
|
||||
if (projectList.length !== 0 && handleUpdateIndex !== -1) {
|
||||
// console.log(projectList[handleUpdateIndex]);
|
||||
const { name, basepath, desc, env } = projectList[handleUpdateIndex];
|
||||
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 });
|
||||
const envs = getFieldValue('envs');
|
||||
const formItems = envs.map((k, index) => {
|
||||
const secondIndex = 'next' + index; // 为保证key的唯一性
|
||||
return (
|
||||
<Row key={index} type="flex" justify="space-between" align={index === 0 ? 'middle' : 'top'}>
|
||||
<Col span={10} offset={2}>
|
||||
<FormItem label={index === 0 ? <span>环境名称</span> : ''} required={false} key={index}>
|
||||
{getFieldDecorator(`envs-name-${index}`, {
|
||||
validateTrigger: ['onChange', 'onBlur'],
|
||||
initialValue: envMessage.length !== 0 ? k.name : '',
|
||||
rules: [
|
||||
{
|
||||
required: false,
|
||||
whitespace: true,
|
||||
validator(rule, value, callback) {
|
||||
if (value) {
|
||||
if (value.length === 0) {
|
||||
callback('请输入环境域名');
|
||||
} else if (!/\S/.test(value)) {
|
||||
callback('请输入环境域名');
|
||||
} else if (/prd/.test(value)) {
|
||||
callback('环境域名不能是"prd"');
|
||||
} else {
|
||||
return callback();
|
||||
}
|
||||
} else {
|
||||
callback('请输入环境域名');
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
})(<Input placeholder="请输入环境名称" style={{ width: '90%', marginRight: 8 }} />)}
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span={10}>
|
||||
<FormItem
|
||||
label={index === 0 ? <span>环境域名</span> : ''}
|
||||
required={false}
|
||||
key={secondIndex}
|
||||
>
|
||||
{getFieldDecorator(`envs-domain-${index}`, {
|
||||
validateTrigger: ['onChange', 'onBlur'],
|
||||
initialValue: envMessage.length !== 0 && k.domain ? k.domain.split('//')[1] : '',
|
||||
rules: [
|
||||
{
|
||||
required: false,
|
||||
whitespace: true,
|
||||
message: '请输入环境域名',
|
||||
validator(rule, value, callback) {
|
||||
if (value) {
|
||||
if (value.length === 0) {
|
||||
callback('请输入环境域名');
|
||||
} else if (!/\S/.test(value)) {
|
||||
callback('请输入环境域名');
|
||||
} else {
|
||||
return callback();
|
||||
}
|
||||
} else {
|
||||
callback('请输入环境域名');
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
})(
|
||||
<Input
|
||||
placeholder="请输入环境域名"
|
||||
style={{ width: '90%', marginRight: 8 }}
|
||||
addonBefore={getFieldDecorator(`envs-protocol-${index}`, {
|
||||
initialValue:
|
||||
envMessage.length !== 0 && k.domain
|
||||
? k.domain.split('//')[0] + '//'
|
||||
: 'http://',
|
||||
rules: [
|
||||
{
|
||||
required: true
|
||||
}
|
||||
]
|
||||
})(
|
||||
<Select>
|
||||
<Option value="http://">{'http://'}</Option>
|
||||
<Option value="https://">{'https://'}</Option>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span={2}>
|
||||
{/* 新增的项中，只有最后一项有删除按钮 */}
|
||||
{(envs.length > 0 && k._id) || envs.length == index + 1 ? (
|
||||
<Icon
|
||||
className="dynamic-delete-button"
|
||||
type="minus-circle-o"
|
||||
onClick={() => {
|
||||
return this.remove(k._id ? k._id : k);
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<Modal
|
||||
title="修改项目"
|
||||
visible={isUpdateModalShow}
|
||||
onOk={this.handleOk}
|
||||
onCancel={this.handleCancel}
|
||||
>
|
||||
<Form>
|
||||
<FormItem {...formItemLayout} label="项目名称">
|
||||
{getFieldDecorator('name', {
|
||||
initialValue: initFormValues.name,
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入项目名称!'
|
||||
}
|
||||
]
|
||||
})(<Input />)}
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label={
|
||||
<span>
|
||||
线上域名
|
||||
<Tooltip title="将根据配置的线上域名访问mock数据">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
{getFieldDecorator('prd_host', {
|
||||
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
|
||||
{...formItemLayout}
|
||||
label={
|
||||
<span>
|
||||
基本路径
|
||||
<Tooltip title="基本路径为空表示根路径">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
{getFieldDecorator('basepath', {
|
||||
initialValue: initFormValues.basepath,
|
||||
rules: [
|
||||
{
|
||||
required: false,
|
||||
message: '请输入项目基本路径! '
|
||||
}
|
||||
]
|
||||
})(<Input />)}
|
||||
</FormItem>
|
||||
|
||||
<FormItem {...formItemLayout} label="描述">
|
||||
{getFieldDecorator('desc', {
|
||||
initialValue: initFormValues.desc,
|
||||
rules: [
|
||||
{
|
||||
required: false,
|
||||
message: '请输入描述!'
|
||||
}
|
||||
]
|
||||
})(<TextArea rows={4} />)}
|
||||
</FormItem>
|
||||
|
||||
{formItems}
|
||||
<FormItem {...formItemLayoutWithOutLabel}>
|
||||
<Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
|
||||
<Icon type="plus" /> 添加环境配置
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Form.create()(UpDateModal);
|
||||
Reference in New Issue
Block a user