git地址提示

This commit is contained in:
caishi 2020-07-22 15:50:08 +08:00
parent 46b5123fab
commit 904da46b8c
3 changed files with 110 additions and 52 deletions

View File

@ -14,6 +14,7 @@ class CloneAddress extends Component {
const { http_url, downloadUrl } = this.props;
return (
<div className="gitAddressClone">
<p className="addressTips"><span>版本库地址已变更请基于新地址提交代码</span></p>
{
http_url && <span>HTTP</span>
}

View File

@ -4,6 +4,7 @@ import { Blueback } from '../Component/layout';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import { Form , Input } from 'antd';
import axios from 'axios';
const P = styled.p`{
width:200px;
@ -14,56 +15,64 @@ const P = styled.p`{
margin-top:30px;
margin-bottom:30px!important;
}`;
export default Form.create()(
forwardRef(({ form })=>{
const { getFieldDecorator , validateFields } = form;
function About( props , ref){
const { form: { getFieldDecorator , validateFields } } = props;
const helper = useCallback(
(label, name, rules, widget, isRequired) => (
<React.Fragment>
<span className={isRequired?"required":""}>{label}</span>
<Form.Item>
{getFieldDecorator(name, { rules, validateFirst: true })(widget)}
</Form.Item>
</React.Fragment>
),
[]
);
const helper = useCallback(
(label, name, rules, widget, isRequired) => (
<React.Fragment>
<span className={isRequired?"required":""}>{label}</span>
<Form.Item>
{getFieldDecorator(name, { rules, validateFirst: true })(widget)}
</Form.Item>
</React.Fragment>
),
[]
);
function startActive(){
validateFields((error,value)=>{
if(!error){
console.log(value);
}
})
}
return(
<div className="activatePanel">
<img src={activate} alt="" width="250px"/>
<P>定义DevOps工作流帮助您检测bug发布代码</P>
<Link to={""} style={{color:"#5091FF",marginTop:"20px"}}>了解什么是DevOps</Link>
<Form>
{helper(
"服务器IP地址",
"IP",
[{ required: true, message: "请输入服务器IP地址" }],
<Input placeholder="请输入服务器IP地址" style={{width:"368px"}} size="large" />,true
)}
{helper(
"服务器用户名:",
"username",
[{ required: true, message: "请输入服务器用户名" }],
<Input placeholder="请输入服务器用户名" size="large" />,true
)}
{helper(
"服务器密码:",
"password",
[{ required: true, message: "请输入服务器密码" }],
<Input.Password placeholder="请输入服务器密码" size="large" />,true
)}
</Form>
<Blueback onClick={startActive}>开始激活</Blueback>
</div>
)
})
)
function startActive(){
console.log(props);
validateFields((error,values)=>{
if(!error){
const url = `/dev_ops/cloud_accounts.json`;
axios.post(url,{
...values,
}).then(result=>{
if(result){
}
}).catch(error=>{
console.log(error);
})
}
})
}
return(
<div className="activatePanel">
<img src={activate} alt="" width="250px"/>
<P>定义DevOps工作流帮助您检测bug发布代码</P>
<Link to={""} style={{color:"#5091FF",marginBottom:"20px"}}>了解什么是DevOps</Link>
<Form>
{helper(
"服务器IP地址",
"ip_num",
[{ required: true, message: "请输入服务器IP地址" }],
<Input placeholder="请输入服务器IP地址" style={{width:"368px"}} size="large" />,true
)}
{helper(
"服务器用户名:",
"account",
[{ required: true, message: "请输入服务器用户名" }],
<Input placeholder="请输入服务器用户名" size="large" />,true
)}
{helper(
"服务器密码:",
"secret",
[{ required: true, message: "请输入服务器密码" }],
<Input.Password placeholder="请输入服务器密码" size="large" />,true
)}
</Form>
<Blueback onClick={startActive}>开始激活</Blueback>
</div>
)
}
export default Form.create()(forwardRef(About));

View File

@ -332,6 +332,7 @@
border:1px solid #eee;
background: #fff;
margin-left: 20px;
position: relative;
}
.gitAddressClone > span{
display: flex;
@ -341,6 +342,53 @@
cursor: pointer;
align-items: center;
}
.addressTips{
position: absolute;
font-size: 12px;
color: #FF6E21;
top:-34px;
left: 30px;
background-color: #fff;
border:1px solid #FE881D;
padding:0px 5px;
height: 28px;
line-height: 28px;
}
.addressTips>span{position: relative;display: block;}
.addressTips>span::before{
box-sizing: content-box;
width: 0px;
height: 0px;
position: absolute;
top: 25px;
left:50%;
margin-left: -4px;
padding:0;
border-top:8px solid #FFFFFF;
border-bottom:8px solid transparent;
border-left:8px solid transparent;
border-right:8px solid transparent;
display: block;
content:'';
z-index: 12;
}
.addressTips>span::after{
box-sizing: content-box;
width: 0px;
height: 0px;
position: absolute;
top: 26px;
left:50%;
margin-left: -4px;
padding:0;
border-top:8px solid #FE881D;
border-bottom:8px solid transparent;
border-left:8px solid transparent;
border-right:8px solid transparent;
display: block;
content:'';
z-index: 11;
}
.gitAddressClone > span.addressType{
color: #4CACFF;
}