工作流-参数管理

src/forge/DevOps/Manage/Params.jsx

@@ -13,8 +13,8 @@ const Div = styled.div`{
   min-height:420px;
 }`;
 function Params(props){
-  const [ search ,setSearch ] = useState(undefined);
   const [ list ,setList ] = useState(undefined);
+  const [ editList ,setEditList ] = useState(undefined);
   const [ visible ,setVisible ] = useState(false);
   
   let projectsId = props.match.params.projectsId; 
@@ -37,12 +37,6 @@ function Params(props){
     }).catch(error=>{})
   }
 
-  // 搜索
-  function searchValue(){
-    
-  }
-  
-
   const columns=[
     {
       title:"参数名",
@@ -50,18 +44,6 @@ function Params(props){
       key:1,
       ellipsis:true
     },
-    {
-      title:"参数值",
-      dataIndex:"data",
-      key:2,
-      ellipsis:true
-    },
-    {
-      title:"仓库",
-      dataIndex:"repo",
-      key:3,
-      ellipsis:true
-    },
     {
       title:"操作",
       dataIndex:"operation",
@@ -70,7 +52,7 @@ function Params(props){
         return(
           <React.Fragment>
             <a className="mr10 color-grey-6" onClick={()=>editMouldFunc(item)}><i className="iconfont icon-zaibianji font-13 mr3"></i>编辑</a>
-            <Popconfirm title={"确定要删除此模板？"} onConfirm={()=>deleteMouldFunc(item.id)} okText="确定" cancelText={"取消"}>
+            <Popconfirm title={"确定要删除此模板？"} onConfirm={()=>deleteMouldFunc(item.id,item.name)} okText="确定" cancelText={"取消"}>
               <a className="mr10 color-grey-6"><i className="iconfont icon-lajitong font-13 mr3"></i>删除</a>
             </Popconfirm>
           </React.Fragment>
@@ -81,16 +63,36 @@ function Params(props){
 
   // 编辑
   function editMouldFunc(item){
-
+    setEditList(item);
+    setVisible(true);
   }
 
   // 删除
-  function deleteMouldFunc(id){
-
+  function deleteMouldFunc(id,name){
+    if(id && name){
+      const url = `/ci/secrets/${id}/${name}.json`;
+      axios.delete(url,{
+        params:{owner,repo:projectsId}
+      }).then(result=>{
+        if(result){
+          Init();
+          props.showNotification(`参数删除成功！`);
+        }
+      }).catch(error=>{})
+    }
   }
 
-  function successFunc(){
-
+  function successFunc(values,id){
+    const url = `/ci/secrets.json?owner=${owner}&repo=${projectsId}`;
+    axios.post(url,{
+      ...values,id
+    }).then(result=>{
+      if(result){
+        CancelFunc();
+        props.showNotification(`${id ? '参数编辑':"新增参数"}成功！`);
+        Init();
+      }
+    }).catch(error=>{})
   }
 
   function CancelFunc(){
@@ -99,7 +101,7 @@ function Params(props){
 
   return(
     <div>
-      <New visble={visible} successFunc={successFunc} CancelFunc={CancelFunc}/>
+      <New visble={visible} successFunc={successFunc} CancelFunc={CancelFunc} editList={editList}/>
       <Banner>
         <FlexAJ>
           <span className="font-18">工作流 - 参数管理</span>

src/forge/DevOps/Manage/ParamsNew.jsx

@@ -3,18 +3,32 @@ import { Modal , Input , Form } from 'antd';
 
 const { TextArea } = Input;
 
-function ParamsNew({ form , visble,successFunc,CancelFunc}){
+function ParamsNew({ form , visble,successFunc,CancelFunc ,editList }){
   const { getFieldDecorator, validateFields , setFieldsValue } = form;
   const layout = {
     labelCol: { span: 5 },
     wrapperCol: { span: 18 },
   };
 
+  useEffect(()=>{
+    if(editList && editList.id){
+      setFieldsValue({
+        name:editList.name,
+        data:editList.data
+      })
+    }else{
+      setFieldsValue({
+        name:undefined,
+        data:undefined
+      })
+    }
+  },[editList])
+
   // 确定
   function onConfirmFunc(){
     validateFields((error,values)=>{
       if(!error){
-        successFunc(values);
+        successFunc(values,editList && editList.id);
       }
     })
   }
@@ -38,7 +52,7 @@ function ParamsNew({ form , visble,successFunc,CancelFunc}){
           )}
         </Form.Item>
         <Form.Item label="参数值">
-          {getFieldDecorator("value",{
+          {getFieldDecorator("data",{
             rules:[{required:true,message:"请输入参数值"}]
           })(
             <TextArea placeholder="请输入参数值" width="220px" autoSize={{ minRows: 4, maxRows: 4 }}/>

src/forge/Settings/Setting.js

@@ -1,7 +1,6 @@
 import React, { Component } from "react";
-import { Form, Input, Checkbox, Select } from "antd";
+import { Form, Input, Checkbox, Select , Spin } from "antd";
 import Title from '../Component/Title';
-import Mirror from './SettingMirror';
 import {WhiteBack} from '../Component/layout';
 
 import axios from "axios";
@@ -15,6 +14,7 @@ class Setting extends Component {
       CategoryList: undefined,
       LanguageList: undefined,
       private_check: undefined,
+      loading:true
     };
   }
 
@@ -56,6 +56,7 @@ class Setting extends Component {
           });
           this.setState({
             private_check: result.data.private,
+            loading:false
           });
         }
       })
@@ -99,6 +100,9 @@ class Setting extends Component {
   resetSetting = () => {
     this.props.form.validateFields((err, values) => {
       if (!err) {
+        this.setState({
+          loading:true
+        })
         const { projectsId , owner } = this.props.match.params;
 
         const { private_check } = this.state;
@@ -115,10 +119,16 @@ class Setting extends Component {
               this.props.showNotification(`仓库信息修改成功！`);
               const { getDetail } = this.props;
               getDetail && getDetail();
+              this.setState({
+                loading:false
+              })
             }
           })
           .catch((error) => {
             console.log(error);
+            this.setState({
+              loading:false
+            })
           });
       }
     });
@@ -152,77 +162,78 @@ class Setting extends Component {
   render() {
     const { getFieldDecorator } = this.props.form;
 
-    const { CategoryList, LanguageList, private_check } = this.state;
+    const { CategoryList, LanguageList, private_check ,loading } = this.state;
     return (
       <div>
-        <WhiteBack style={{paddingBottom:"20px"}}>
-          <Title>基本设置</Title>
-          <Form className="baseForm">
-            <Form.Item label="项目名称">
-              {getFieldDecorator("project_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", {
+        <Spin spinning={loading}>
+          <WhiteBack style={{paddingBottom:"20px"}}>
+            <Title>基本设置</Title>
+            <Form className="baseForm">
+              <Form.Item label="项目名称">
+                {getFieldDecorator("project_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
+                      checked={private_check}
+                      onChange={this.changePrivate}
+                    >
+                      将仓库设为私有
+                    </Checkbox>
+                  )}
+                </Form.Item>
+              </div>
+              <Form.Item label="仓库描述">
+                {getFieldDecorator("project_description", {
                   rules: [],
                 })(
-                  <Checkbox
-                    checked={private_check}
-                    onChange={this.changePrivate}
-                  >
-                    将仓库设为私有
-                  </Checkbox>
+                  <TextArea
+                    placeholder="请输入仓库描述"
+                    style={{ height: "80px" }}
+                  />
                 )}
               </Form.Item>
-            </div>
-            <Form.Item label="仓库描述">
-              {getFieldDecorator("project_description", {
-                rules: [],
-              })(
-                <TextArea
-                  placeholder="请输入仓库描述"
-                  style={{ height: "80px" }}
-                />
-              )}
-            </Form.Item>
-            <Form.Item label="项目类别">
-              {getFieldDecorator("project_category_id", {
-                rules: [
-                  {
-                    required: true,
-                    message: "请选择大类别",
-                  },
-                ],
-              })(<Select>{CategoryList}</Select>)}
-            </Form.Item>
-            <Form.Item label="项目语言">
-              {getFieldDecorator("project_language_id", {
-                rules: [
-                  {
-                    required: true,
-                    message: "请选择项目语言",
-                  },
-                ],
-              })(<Select>{LanguageList}</Select>)}
-            </Form.Item>
-            <p className="clearfix">
-              <a className="submitBtn" onClick={this.resetSetting}>
-                更新仓库设置
-              </a>
-            </p>
-          </Form>
-          {/* 镜像设置部分，暂无接口，先不显示 */}
-          {/* <Mirror /> */}
-        </WhiteBack>
-        <WhiteBack className="dangerousBox mb20">
+              <Form.Item label="项目类别">
+                {getFieldDecorator("project_category_id", {
+                  rules: [
+                    {
+                      required: true,
+                      message: "请选择大类别",
+                    },
+                  ],
+                })(<Select>{CategoryList}</Select>)}
+              </Form.Item>
+              <Form.Item label="项目语言">
+                {getFieldDecorator("project_language_id", {
+                  rules: [
+                    {
+                      required: true,
+                      message: "请选择项目语言",
+                    },
+                  ],
+                })(<Select>{LanguageList}</Select>)}
+              </Form.Item>
+              <p className="clearfix">
+                <a className="submitBtn" onClick={this.resetSetting}>
+                  更新仓库设置
+                </a>
+              </p>
+            </Form>
+            {/* 镜像设置部分，暂无接口，先不显示 */}
+            {/* <Mirror /> */}
+          </WhiteBack>
+          <WhiteBack className="dangerousBox mb20">
           <div>
             <div className="dangerousTitle">危险操作区</div>
             <div className="flex-a-center padding15-10">
@@ -239,6 +250,7 @@ class Setting extends Component {
             </div>
           </div>
         </WhiteBack>
+        </Spin>
       </div>
     );
   }