parent
476bbc60d2
commit
2e4297d770
@ -0,0 +1,89 @@
|
||||
import React , { Component } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Input , AutoComplete , Dropdown , Menu , Icon } from 'antd';
|
||||
import axios from 'axios';
|
||||
|
||||
const { Option } = AutoComplete;
|
||||
const MENU_LIST = ['管理员','可读权限','可写权限'];
|
||||
class Collaborator extends Component{
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state={
|
||||
userDataSource:undefined
|
||||
}
|
||||
}
|
||||
|
||||
// 选择用户
|
||||
changeInputUser=(e)=>{
|
||||
console.log(e);
|
||||
const url = `/users/list.json`;
|
||||
axios.get(url,{
|
||||
params:{
|
||||
search:e
|
||||
}
|
||||
}).then(result=>{
|
||||
if(result){
|
||||
this.setState({
|
||||
userDataSource:result.data
|
||||
})
|
||||
}
|
||||
}).catch(error=>{
|
||||
console.log(error);
|
||||
})
|
||||
}
|
||||
|
||||
changeOperaiton=(e,id)=>{
|
||||
console.log(e,id);
|
||||
}
|
||||
render(){
|
||||
const { userDataSource } = this.state;
|
||||
|
||||
const menu =(id)=> (
|
||||
<Menu>
|
||||
{
|
||||
MENU_LIST.map((item,key)=>{
|
||||
return(
|
||||
<Menu.Item key="key" onClick={(e)=>this.changeOperaiton(e,id)}>{item}</Menu.Item>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Menu>
|
||||
)
|
||||
|
||||
const source = userDataSource && userDataSource.map((item,key)=>{
|
||||
return(
|
||||
<Option value={item.login}>{item.username}</Option>
|
||||
)
|
||||
})
|
||||
return(
|
||||
<div className="normalBox">
|
||||
<div className="normalBox-title font-16">
|
||||
协作者
|
||||
</div>
|
||||
<div className="collaboratorList">
|
||||
<div className="collaboratorItem">
|
||||
<span><Link to={``} className="color-blue">caicai</Link></span>
|
||||
<span>
|
||||
<Dropdown overlay={menu(1)} placement={"bottomCenter"}>
|
||||
<span>管理员<Icon type="down" /></span>
|
||||
</Dropdown>
|
||||
</span>
|
||||
<span style={{justifyContent:"center"}}>
|
||||
<a className="red_btn">删除</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="addPanel">
|
||||
<AutoComplete
|
||||
dataSource={source}
|
||||
style={{ width: 200 }}
|
||||
onChange={this.changeInputUser}
|
||||
placeholder="搜索用户"
|
||||
/>
|
||||
<a className="small_submitBtn ml20" onClick={this.addCollaborator}>增加协作者</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default Collaborator;
|
||||
@ -0,0 +1,62 @@
|
||||
import React , { Component } from 'react';
|
||||
import { Link , Route , Switch } from 'react-router-dom';
|
||||
|
||||
import '../css/index.css';
|
||||
import './setting.css';
|
||||
|
||||
import Loadable from 'react-loadable';
|
||||
import Loading from '../../Loading';
|
||||
|
||||
const Branch = Loadable({
|
||||
loader: () => import('./Branch'),
|
||||
loading: Loading,
|
||||
})
|
||||
const Setting = Loadable({
|
||||
loader: () => import('./Setting'),
|
||||
loading: Loading,
|
||||
})
|
||||
const Collaborator = Loadable({
|
||||
loader: () => import('./Collaborator'),
|
||||
loading: Loading,
|
||||
})
|
||||
class Index extends Component{
|
||||
render(){
|
||||
const { projectsId } = this.props.match.params;
|
||||
console.log(this.props);
|
||||
const { pathname } = this.props.history.location;
|
||||
|
||||
const flag = (pathname === `/projects/${projectsId}/setting`);
|
||||
return(
|
||||
<div>
|
||||
<ul className="settingNav">
|
||||
<li className={flag?"active":""}><Link to={`/projects/${projectsId}/setting`}>仓库</Link></li>
|
||||
<li className={pathname.indexOf('setting/collaborator')>-1?"active":""}><Link to={`/projects/${projectsId}/setting/collaborator`}>协作者</Link></li>
|
||||
<li className={pathname.indexOf('setting/branch')>-1?"active":""}><Link to={`/projects/${projectsId}/setting/branch`}>分支列表</Link></li>
|
||||
</ul>
|
||||
<div className="main">
|
||||
<Switch {...this.props}>
|
||||
{/* 分支列表 */}
|
||||
<Route path="/projects/:projectsId/setting/branch"
|
||||
render={
|
||||
(props) => (<Branch {...this.props} {...props} {...this.state}/>)
|
||||
}
|
||||
></Route>
|
||||
{/* 协作者 */}
|
||||
<Route path="/projects/:projectsId/setting/collaborator"
|
||||
render={
|
||||
(props) => (<Collaborator {...this.props} {...props} {...this.state}/>)
|
||||
}
|
||||
></Route>
|
||||
{/* 修改仓库信息 */}
|
||||
<Route path="/projects/:projectsId/setting"
|
||||
render={
|
||||
(props) => (<Setting {...this.props} {...props} {...this.state}/>)
|
||||
}
|
||||
></Route>
|
||||
</Switch>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default Index;
|
||||
@ -0,0 +1,143 @@
|
||||
import React , { Component } from 'react';
|
||||
import { Form , Input , Checkbox , Select } from 'antd';
|
||||
|
||||
import axios from 'axios';
|
||||
const { TextArea } = Input;
|
||||
const { Option } = Select;
|
||||
class Setting extends Component{
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state={
|
||||
preType:"1",
|
||||
CategoryList:undefined
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount=()=>{
|
||||
this.getCategory();
|
||||
this.getInfo();
|
||||
}
|
||||
|
||||
getInfo=()=>{
|
||||
const { current_user } = this.props;
|
||||
const { projectsId } = this.props.match.params;
|
||||
const url = `/${current_user.login}/${projectsId}.json`;
|
||||
axios.get(url).then(result=>{
|
||||
if(result){
|
||||
this.props.form.setFieldsValue({
|
||||
...result.data
|
||||
})
|
||||
}
|
||||
}).catch(error=>{
|
||||
console.log(error);
|
||||
})
|
||||
}
|
||||
|
||||
getCategory=()=>{
|
||||
const url = `/project_categories.json`
|
||||
axios.get(url).then((result)=>{
|
||||
if(result){
|
||||
let CategoryList = this.setOptionsList(result.data.project_categories)
|
||||
this.setState({
|
||||
CategoryList
|
||||
})
|
||||
}
|
||||
}).catch((error)=>{})
|
||||
}
|
||||
|
||||
setOptionsList = (data) =>{
|
||||
let list = undefined;
|
||||
if(data && data.length > 0){
|
||||
list = data.map((item,key)=>{
|
||||
return(
|
||||
<Option key={item.id}>{item.name}</Option>
|
||||
)
|
||||
})
|
||||
}
|
||||
return list;
|
||||
}
|
||||
|
||||
// 更新仓库设置
|
||||
resetSetting=()=>{
|
||||
this.props.form.validateFields((err,values)=>{
|
||||
if(!err){
|
||||
const { projectsId } = this.props.match.params;
|
||||
const url = `/projects/${projectsId}.json`;
|
||||
axios.patch(url,{
|
||||
...values
|
||||
}).then(result=>{
|
||||
if(result){
|
||||
this.props.showNotification(`仓库信息修改成功！`)
|
||||
}
|
||||
}).catch(error=>{
|
||||
console.log(error);
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
render(){
|
||||
const { getFieldDecorator } = this.props.form;
|
||||
|
||||
const { preType , CategoryList } = this.state;
|
||||
return(
|
||||
<div className="normalBox">
|
||||
<div className="normalBox-title font-16">
|
||||
基本设置
|
||||
</div>
|
||||
<Form className="baseForm">
|
||||
<Form.Item
|
||||
label="项目名称"
|
||||
>
|
||||
{getFieldDecorator('name', {
|
||||
rules: [{
|
||||
required: true, message: '请输入项目名称'
|
||||
}],
|
||||
})(
|
||||
<Input placeholder="请输入项目名称"/>
|
||||
)}
|
||||
</Form.Item >
|
||||
<div className="df" style={{alignItems:"center"}}>
|
||||
<span className="mr20 mb15 font-16">可见性</span>
|
||||
<Form.Item
|
||||
label=""
|
||||
>
|
||||
{getFieldDecorator('private', {
|
||||
rules: [],
|
||||
})(
|
||||
<Checkbox value="private">将仓库设为私有</Checkbox>
|
||||
)}
|
||||
</Form.Item >
|
||||
</div>
|
||||
<Form.Item
|
||||
label="仓库描述"
|
||||
>
|
||||
{getFieldDecorator('description', {
|
||||
rules: [],
|
||||
})(
|
||||
<TextArea placeholder="请输入仓库描述" style={{height:"80px"}}/>
|
||||
)}
|
||||
</Form.Item >
|
||||
<Form.Item
|
||||
label="项目类别"
|
||||
>
|
||||
{getFieldDecorator('project_category_id', {
|
||||
rules: [{
|
||||
required: true, message: '请选择大类别'
|
||||
}],
|
||||
})(
|
||||
<Select value={preType}>
|
||||
{CategoryList}
|
||||
</Select>
|
||||
)}
|
||||
</Form.Item>
|
||||
<p className="clearfix">
|
||||
<a className="submitBtn" onClick={this.resetSetting}>更新仓库设置</a>
|
||||
</p>
|
||||
</Form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
const WrappedSettingIndexForm = Form.create({ name: 'settingForm' })(Setting);
|
||||
export default WrappedSettingIndexForm;
|
||||
@ -0,0 +1,75 @@
|
||||
.settingNav{
|
||||
display: flex;
|
||||
border-bottom: 1px solid #ddd;
|
||||
justify-content: center;
|
||||
}
|
||||
.settingNav li{
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
position: relative;
|
||||
padding:0px 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.settingNav li.active a{
|
||||
color: #4CACFF!important;
|
||||
}
|
||||
.settingNav li.active::after{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0px;
|
||||
height: 2px;
|
||||
left: 0px;
|
||||
background: #4CACFF;
|
||||
content: '';
|
||||
}
|
||||
.baseForm{
|
||||
padding:15px 20px!important;
|
||||
}
|
||||
.baseForm .ant-row.ant-form-item{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.submitBtn{
|
||||
display: block;
|
||||
float: left;
|
||||
padding:0px 12px;
|
||||
border-radius: 4px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
color: #fff!important;
|
||||
background: #4CACFF;
|
||||
}
|
||||
.small_submitBtn{
|
||||
display: block;
|
||||
padding:0px 12px;
|
||||
border-radius: 4px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
color: #fff!important;
|
||||
background: #4CACFF;
|
||||
}
|
||||
.addPanel{
|
||||
display: flex;
|
||||
padding:15px;
|
||||
}
|
||||
.red_btn{
|
||||
display: block;
|
||||
padding:0px 8px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
color: #fff;
|
||||
background: #db2828;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.collaboratorItem{
|
||||
display: flex;
|
||||
border-bottom: 1px solid #f4f4f4;
|
||||
padding:15px;
|
||||
}
|
||||
.collaboratorItem>span{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
.branchSelect{
|
||||
width: 200px;
|
||||
height: 32px;
|
||||
}
|
||||
Loading…
Reference in new issue