新建

src/forge/Team/Component/UploadImage.jsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { Upload , Icon , message } from "antd";
+import { getUploadActionUrl } from 'educoder';
+
+function UploadImage({ getImage }){
+  const [ imageUrl , setImageUrl ] = useState(undefined);
+
+  function getBase64(img, callback) {
+    const reader = new FileReader();
+    reader.addEventListener('load', () => callback(reader.result));
+    reader.readAsDataURL(img);
+    reader.onload = function(e) {
+      getImage && getImage(e.target.result);  // 上传的图片的编码
+    }
+  }
+  // 上传前
+  function beforeUpload(file){
+    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+    if (!isJpgOrPng) {
+      message.error('上传的图片只能是JPG或者PNG格式!');
+    }
+    const isLt2M = file.size / 1024 / 1024 < 2;
+    if (!isLt2M) {
+      message.error('上传的图片不能超过2MB!');
+    }
+    return isJpgOrPng && isLt2M;
+  }
+  // 上传完成后
+  function handleChange(info){
+    if(info && info.file && info.file.status === "done"){
+      getBase64(info.file.originFileObj, imageUrl =>
+        setImageUrl(imageUrl)
+      );
+    }
+  }
+  return(
+    <Upload
+      name="file"
+      listType="picture-card"
+      className="avatar-uploader"
+      showUploadList={false}
+      action={getUploadActionUrl()}
+      beforeUpload={beforeUpload}
+      onChange={handleChange}
+    >
+      {
+        imageUrl ? 
+        <img src={imageUrl} alt="avatar" style={{ width: '100%' }} />
+        :
+        <div>
+          <Icon type={'plus'} />
+          <div className="ant-upload-text">点击上传</div>
+        </div>
+      }
+    </Upload>
+  )
+}
+export default UploadImage;

src/forge/Team/New.jsx

@@ -1,11 +1,15 @@
-import React,{ forwardRef , useCallback } from 'react';
+import React,{ forwardRef , useCallback, useEffect, useState } from 'react';
 import './Index.scss';
-import { Form , Input , Cascader , Radio , Checkbox , Upload , Button } from "antd";
-import { locData } from "../Utils/locData";
+import { Form , Input , Radio , Checkbox , Button, InputNumber } from "antd";
+import UploadImage from './Component/UploadImage';
+import axios from 'axios';
 
 export default Form.create()(
-  forwardRef(({form})=>{
-    const { getFieldDecorator, validateFields, setFieldsValue } = form;
+  forwardRef(({form , showNotification ,history})=>{
+    const [ image , setImage ] = useState(undefined);
+
+    const { getFieldDecorator, validateFields , setFieldsValue } = form;
+
     const radioStyle = {
       display: 'block',
       height: '30px',
@@ -14,7 +18,7 @@ export default Form.create()(
     const helper = useCallback(
       (label, name, rules, widget, isRequired = true) => (
         <React.Fragment>
-          <span className={isRequired?"lables must":"lables"}>{label}</span>
+          <span className={isRequired ? "lables must ": "lables"}>{label}</span>
           <Form.Item>
             {getFieldDecorator(name, { rules, validateFirst: true })(widget)}
           </Form.Item>
@@ -22,6 +26,28 @@ export default Form.create()(
       ),
       []
     );
+
+    // 获取上传的图片
+    function getImage(image){
+      setImage(image);
+    }
+
+    // 创建组织
+    function createOrganize(){
+      validateFields((error,values)=>{
+        if(!error){
+          const url = `/organizations.json`;
+          axios.post(url,{
+            ...values,image
+          }).then(result=>{
+            if(result && result.data){
+              showNotification("组织创建成功！");
+            }
+          }).catch(error=>{})
+        }
+      })
+    }
+
     return(
       <div className="newMain">
         <div className="main">
@@ -49,24 +75,22 @@ export default Form.create()(
                 '所在地区',
                 "location",
                 [],
-                <Cascader placeholder="请选择城市" options={locData}/>,false
+                // <Cascader placeholder="请选择城市" options={locData}/>,false
+                <Input placeholder="请输入地址"/>,false
               )}
               {helper(
                 '可见性',
                 "visibility",
                 [{ required: true, message: "请选择可见性" }],
                 <Radio.Group name="exposure">
-                  <Radio style={radioStyle} value="1" key={1}>公开</Radio>
-                  <Radio style={radioStyle} value="2" key={2}>受限<span className="color-grey-8">（仅对登录用户可见）</span></Radio>
-                  <Radio style={radioStyle} value="3" key={3}>公开<span className="color-grey-8">（仅对组织成员可见）</span></Radio>
+                  <Radio style={radioStyle} value="common" key={1}>公开</Radio>
+                  <Radio style={radioStyle} value="limited" key={2}>受限<span className="color-grey-8">（仅对登录用户可见）</span></Radio>
+                  <Radio style={radioStyle} value="privacy" key={3}>公开<span className="color-grey-8">（仅对组织成员可见）</span></Radio>
                 </Radio.Group>
               )}
-              {helper(
-                '选择头像',
-                "image",
-                [],
-                <Upload></Upload>,false
-              )}
+              <p className="font-16">选择头像</p>
+              <UploadImage getImage={getImage}/>
+
               {helper(
                 '权限',
                 "repo_admin_change_team_access",
@@ -77,14 +101,14 @@ export default Form.create()(
                 <span>最大仓库数：<span className="color-grey-8">（设置为-1表示使用全局默认值）</span></span>,
                 "max_repo_creation",
                 [],
-                <Input
+                <InputNumber
                   placeholder="最大仓库数" style={{width:"100px"}}
                 />,false
               )}
             </Form>
           </div>
           <p className="mt20">
-            <Button type="primary" className="mr30">创建组织</Button>
+            <Button type="primary" className="mr30" onClick={createOrganize}>创建组织</Button>
             <Button className="grey">取消</Button>
           </p>
         </div>