antd From Item labelCol和wrapperCol样式细节调整

1：
  const formLayoutActivityLog={
   
        labelCol: {
    span: 7 },
        wrapperCol: {
    span: 17 },
        labelAlign: 'right'
    }

2

					 <Col span={
   6}>  这句代码  确定每一个 Item的 宽度 弹性的 6
                            <Form.Item
                                label='Function'
                                name="Function"
                                {
   ...formLayoutActivityLog}   相当于：
                                 labelCol: {
    span: 7 },   
        						 wrapperCol: {
    span: 17 },
       							 labelAlign: 'right'
labelCol和wrapperCol 总共加起来 24 份， 24份 等于 上面的 span={
   6}  的宽度；就是说 把 span={
   6} 分成24份；7是labelCol  17是wrapperCol；

                            >
                                <Select>
                                    {
   
                                        !!Function && Function.length ? Function.map((item, index) => (
                                            <Option value={
   item.Code} key={
   index + 1}> {
   item.Value} </Option>
                                        )) : ""
                                    }
                                </Select>
                            </Form.Item>
                        </Col>
3建议  全局 写好 formLayoutActivityLog； 组件中引入；这样 可以确保 全局的 From Item 样式统一  好维护；
如：

组件  ：
import {
    formLayout } from '@/utils/formLayout';

 <Col span={
   12}>
        <Form.Item
          label="Function"
          name="TargetFunction"
          {
   ...formLayout}
        >

 formLayout.js  ：
 // 表单一行两个的单项布局
export const formLayout = {
   
    labelCol: {
    span: 6 },
    wrapperCol: {
    span: 14 },
    labelAlign: 'left'
};
 

修改后
在这里插入图片描述

整个组件参考代码：
import styles from './common.less';
import {
    v4 as uuidv4 } from 'uuid';
import {
    uploadWhiteUrl } from '@/utils/config';
import {
    GetTargetGroupSelect } from '@/services/course';
import {
    GetServiceLine } from '@/services/courseSetting';
import {
    MessageError, blobDownload } from '@/utils/utils';
import React, {
    useEffect, useState, useRef } from 'react';
import {
    DownloadWhiteListTemplate } from '@/services/microLearning';
import {
    FileExcelTwoTone, UploadOutlined } from '@ant-design/icons';
import {
    Row, Col, Form, Upload, Select, Button, message } from 'antd';
import {
    formLayout } from '@/utils/formLayout';

const TargetGroup = (props) => {
   

  let arr = [
    {
   
      Code: '105001',
      Value: "ALL",
    },
    {
   
      Code: "0",
      Value: "0",
    }
    ,
    {
   
      Code: "1",
      Value: "1",
    },
    {
   
      Code: "2",
      Value: "2",
    },
    {
   
      Code: "3",
      Value: "3",
    },
    {
   
      Code: "4",
      Value: "4",
    },
    {
   
      Code: "5",
      Value: "5",
    },
    {
   
      Code: "6",
      Value: "6",
    },
    {
   
      Code: "7",
      Value: "7",
    },
  ]
  const {
    uploadType, form, initKeys } = props;
  const {
    Option } = Select;
  const [limit, setLimit] = useState(false);
  const [loading, setLoading] = useState(false);
  const [targetDeptOpt, setTargetDeptOpt] = useState([]);
  const [targetLevelOpt, setTargetLevelOpt] = useState([]);
  const [whiteAttachment, setWhiteAttachment] = useState([]);


  const [targetFunctionOpt, setTargetFunctionOpt] = useState([]);
  const [TargetStaffLevel, setTargetStaffLevel] = useState(arr);



  const [targetGroup, setTargetGroup] = useState({
   
    TargetFunction: ['1005001'],
    TargetLevel: ['1007001'],
    TargetDept: ['1006001'],
    TargetStaffLevel: ['105001']
  });
  let WhiteFileList = useRef([]);




  useEffect(() =