dispose

src/forge/DevOps/Dispose/Choosen.jsx

@@ -1,7 +1,16 @@
 import React , { useEffect , useState } from 'react';
 
-function Choosen({name,options,chooseFunc}){
+function Choosen({name,chooseFunc}){
   const [ index, setIndex ] = useState(undefined);
+  const [ models , setModels ] = useState(undefined);
+
+  useEffect(()=>{
+    let list = [
+      {id:1,name:"docker/arm64/linux"},
+      {id:2,name:"docker/x86/linux"}
+    ]
+    setModels(list);
+  },[])
 
   // 选择选项
   function chooseOption(id,k){
@@ -14,7 +23,7 @@ function Choosen({name,options,chooseFunc}){
       <span>{name}</span>
       <ul>
         {
-          options && options.map((item,key)=>{
+          models && models.map((item,key)=>{
             return(
               <li className={index && index === key+1 ? "active":""} onClick={()=>chooseOption(item.id,key+1)}>{item.name}</li>
             )

src/forge/DevOps/Dispose/Init.jsx

@@ -6,16 +6,8 @@ import Editors from './Editors';
 function Init(){
   const [ name , setName ] = useState(undefined);
   const [ modelsId , setModelsId ] = useState(undefined);
-  const [ models , setModels ] = useState(undefined);
   const [ ymlValue , setYmlValue ] = useState(undefined);
 
-  useEffect(()=>{
-    let list = [
-      {id:1,name:"docker/arm64/linux"},
-      {id:2,name:"docker/x86/linux"}
-    ]
-    setModels(list);
-  },[])
 
   function chooseFunc(id){
     setModelsId(id);
@@ -26,7 +18,7 @@ function Init(){
         <span>流水线名称:</span>
         <Input value={name} onChange={(e)=>setName(e.target.value)} placeholder="请输入名称" style={{width:"340px",margin:"6px 0px"}}/>
       </div>
-      <Choosen name={"模板选择:"} options ={models} chooseFunc={chooseFunc}/>
+      <Choosen name={"模板选择:"} chooseFunc={chooseFunc}/>
       <div className="mt15">
         <Editors value={ymlValue} onChange={setYmlValue} theme={"vs-dark"} height={"400px"}/>
       </div>

src/forge/DevOps/Dispose/Stage.jsx

@@ -0,0 +1,45 @@
+import React , { useEffect , useState } from 'react';
+import { Button } from 'antd';
+import { Cancel } from '../../Component/layout';
+import Item from './StageItem';
+
+function Stage({}){
+  const [ stepList , setStepList ] = useState(undefined);
+
+  useEffect(()=>{
+    let l = [
+      {
+        "step_name": "编译构建-gradle",
+        "show_index": 1,
+        "content": "xxxxxxxxxxx",
+        "template_id":1
+      },
+      {
+        "step_name": "编译构建-maven",
+        "show_index": 1,
+        "content": "xxxxxxxxxxx",
+        "template_id":1
+      }
+    ]
+    setStepList(l);
+  },[])
+
+  return(
+    <div>
+      {
+        stepList && stepList.map((item,key)=>{
+          return(
+            <Item item={item}/>
+          )
+        })
+      }
+      <a className="addBtn">+ 添加步骤</a>
+      <div className="mt20">
+        <Button type="primary">下一步</Button>
+        <Button className="ml20" type="primary">下一步</Button>
+        <Cancel className="ml20">删除</Cancel>
+      </div>
+    </div>
+  )
+}
+export default Stage;

src/forge/DevOps/Dispose/StageItem.jsx

@@ -0,0 +1,27 @@
+import React , { useEffect , useState } from 'react';
+import { FlexAJ } from '../../Component/layout';
+import Editors from './Editors';
+
+
+function StageItem({item}){
+  const [ value , setValue ] = useState(undefined);
+
+  function onChangevalue(value){
+    console.log(value);
+  }
+  return(
+    <div className="stepsItem">
+      <FlexAJ className="stepsHead">
+        <span>{item.step_name}</span>
+        <span className="color-grey-9">
+          <a><i className="iconfont iconlajitong1 font-14"></i></a>
+          <a><i className="iconfont iconsanjiaoxing-down font-14"></i></a>
+        </span>
+      </FlexAJ>
+      <div className="stepsBody">
+        <Editors value={value} onChange={onChangevalue} theme="vs-dark" height="120px" />
+      </div>
+    </div>
+  )
+}
+export default StageItem;

src/forge/DevOps/Dispose/menusRename.jsx

@@ -1,6 +1,7 @@
 import React , { useEffect , useState } from 'react';
 import { Input } from 'antd';
 
+const regexp = /[^a-zA-Z0-9_]/g;
 
 function menusRename({ name , edit }){
   const [ n , setN ] = useState(undefined);
@@ -27,8 +28,8 @@ function menusRename({ name , edit }){
         { show && 
           <Input value={n} size="small" maxLength={8} onClick={(e)=>e.stopPropagation()} onBlur={blurInput} style={{width:"75px"}} onChange={(e)=>setN(e.target.value)}/>
         }
+        { !show && edit && <i className="iconfont iconeditUnder font-16 color-grey-9" onClick={changeShow}></i> }
       </span>
-      { !show && edit && <i className="iconfont iconeditUnder font-16 color-grey-9" onClick={changeShow}></i> }
     </div>
   )
 }

src/forge/DevOps/disposePipeline.jsx

@@ -1,9 +1,10 @@
 import React , { useEffect , useState } from 'react';
-import { WhiteBack , Banner } from '../Component/layout';
+import { WhiteBack } from '../Component/layout';
 import Head from './Dispose/head';
 import Menus from './Dispose/menus';
 import Init from './Dispose/Init';
 import Sure from './Dispose/Sure';
+import Stage from './Dispose/Stage';
 
 
 function disposePipeline(){
@@ -31,10 +32,11 @@ function disposePipeline(){
         <div style={{minHeight:"450px"}}>
           <Menus step={step} changeStep={changeStep} menuList={menuList}/>
           {
-            step === 1  && <Init />
-          }
-          {
-            menuList && (step === menuList.length)  && <Sure />
+            step === 1  ? <Init />
+            :
+            menuList && (step === menuList.length)  ? <Sure />
+            :
+            <Stage />
           }
         </div>
       </WhiteBack>

src/forge/DevOps/ops.scss

@@ -366,23 +366,20 @@
       background-color: #1890FF;
       content: "";
     }
-    & > div{
-      width: 100%;
-    }
     .aboutEdit{
-      position: relative;
+      width: 100%;
       .operateName{
         position: relative;
         line-height: 20px;
+        & > i{
+          position: absolute;
+          right:-22px;
+          top:50%;
+          margin-top: -11px;
+          display: none;
+        }
       }
-      & > i{
-        position: absolute;
-        right:-22px;
-        top:50%;
-        margin-top: -16px;
-        display: none;
-      }
-      &:hover > i{
+      &:hover i{
         display: block;
       }
     }
@@ -453,4 +450,32 @@
       background-color: #1890FF;
     }
   }
+}
+.addBtn{
+  display: block;
+  width: 100%;
+  border:1px solid #e1e4e8;
+  height: 48px;
+  line-height: 48px;
+  color: #1890FF;
+  font-size: 16px;
+  border-radius: 3px;
+  padding: 0px 20px;
+}
+.stepsItem{
+  border:1px solid #e1e4e8;
+  border-radius: 4px;
+  margin-bottom: 15px;
+  .stepsHead{
+    border-bottom: 1px solid #e1e4e8;
+    padding:8px 15px;
+    span > a > i{
+      margin-left: 8px;
+      color: #666!important;
+    }
+  }
+  .stepsBody{
+    padding:10px 15px;
+    background-color: rgb(251, 251, 251);
+  }
 }