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