forgeplus-react/src/glcc/apply/taskApply.jsx

import React, { useEffect, useState } from 'react';
import {Form, Icon, Input, Radio, Select, Tooltip } from 'antd';
import TextArea from 'antd/lib/input/TextArea';
import { rewardMoney } from '../api';
const Option = Select.Option;
// 课题信息编辑
function TaskApply(props) {
  const {helper, disabled, taskKey, phonereg, emailreg, getFieldDecorator, rewardList, getFieldValue, resetFields} = props;
  // 低、中、高
  const difficultyList = [
    {id: 1, name: "低"},
    {id: 2, name: "中"},
    {id: 3, name: "高"}
  ]
  // 奖金数额
  const amountList = [12000, 11000, 10000, 9000, 8000, 7000, 6000]
  const disabledProps = {
    disabled: disabled,
    className: disabled? "disabledInput":""
  }
  // 选中的奖励方式
  const rewardId = getFieldValue(`settingRewardId${taskKey}`);
  const rewardItem = rewardId && rewardList && rewardList.filter(item=>item.id === rewardId);
  const rewardName = rewardItem && rewardItem[0] && rewardItem[0].value;

  return(
    <div className="taskApplyForm">
      <div className="pt20 glcc_info_form">
        <Form.Item label="课题id" hidden>
          {getFieldDecorator(`taskId${taskKey}`, {})(<Input/>)}
        </Form.Item>
        {helper('课题名称',
          '',
          `taskName${taskKey}`,
          [{ required: true, message: "请输入课题名称，长度限制32个字符" },
          { max: 32, message: '超出限制长度32位字符，请重新编辑' }],
          <Input placeholder="请输入课题名称" {...disabledProps}/>
        )}
        <div className='hasQuestionBox'>
          {helper('课题链接',
            '',
            `taskUrl${taskKey}`,
            [{ required: true, message: "请输入课题链接" },
            { max: 252, message: '超出限制长度252位字符，请重新编辑' }],
            <Input placeholder="请输入课题链接" {...disabledProps}/>
          )}
          <Tooltip title={<div>
            以issue的形式发布课题的具体内容，可参考 <a href='https://www.gitlink.org.cn/KomachiSion/nacos/issues/1' target="_blank" style={{color: "#466aff"}}>课题样例</a>
          </div>}
          >
            <Icon type="question-circle" theme="filled" className="question mt12 ml10"/>
          </Tooltip>
        </div>
        
        {helper('课题难度',
          '',
          `taskDifficulty${taskKey}`,
          [{ required: true, message: "请选择课题难度" }],
          <Select placeholder="请选择课题难度" {...disabledProps}>
            {difficultyList && difficultyList.map(item=> {return <Option value={item.id} key={item.id}>{item.name}</Option>})}
          </Select>
        )}
        <div className='introArea'>
          {helper('课题奖励',
            '',
            `settingRewardId${taskKey}`,
            [{ required: true, message: "请选择课题奖励" },
            ],
            <Radio.Group {...disabledProps} onChange={()=>{
              resetFields([`settingRewardRemark${taskKey}`]);
            }}>
              {rewardList && rewardList.map(item=> {return <Radio value={item.id} key={item.id}>{item.value}</Radio>})}
            </Radio.Group>
          )}
        </div>
        {/* <Form.Item label={rewardName === rewardMoney ? "奖金数额": "奖励备注"}>
          {getFieldDecorator(`settingRewardRemark${taskKey}`, {
            initialValue: '1233',
            rules: rewardName === rewardMoney ? [{ required: true, message: "请选择课题奖金" }] : []
          })(rewardName === rewardMoney ? <Select placeholder="请根据课题难度选择奖金" {...disabledProps}>
            {amountList.map(item=> {return <Option value={item} key={item}>{item}</Option>})}
          </Select> : <Input maxLength={200} placeholder="请填写您可以提供的奖励方式，并详细描述奖励内容，例如可以提供2025年2月-6月，xxx部门的后端开发实习岗位" {...disabledProps}/>)}
        </Form.Item> */}
        {rewardName && <div className='introArea'>
          {helper(rewardName === rewardMoney ? "奖金数额": "奖励备注",
            '',
            `settingRewardRemark${taskKey}`,
            rewardName === rewardMoney ? [{ required: true, message: "请选择课题奖金" }] : [],
            rewardName === rewardMoney ? <Select placeholder="请根据课题难度选择奖金" {...disabledProps}>
              {amountList.map(item=> {return <Option value={item} key={item}>{item}</Option>})}
            </Select> : <Input maxLength={200} placeholder="请填写您可以提供的奖励方式，并详细描述奖励内容，例如可以提供2025年2月-6月，xxx部门的后端开发实习岗位" {...disabledProps}/>
          )}
        </div>}
        {/* {helper(rewardName === rewardMoney ? "奖金数额": "奖励备注",
            '',
            `settingRewardRemark${taskKey}`,
            rewardName === rewardMoney ? [{ required: true, message: "请选择课题奖金" }] : [],
            rewardName === rewardMoney ? <Select placeholder="请根据课题难度选择奖金" {...disabledProps}>
              {amountList.map(item=> {return <Option value={item} key={item}>{item}</Option>})}
            </Select> : <Input maxLength={200} placeholder="请填写您可以提供的奖励方式，并详细描述奖励内容，例如可以提供2025年2月-6月，xxx部门的后端开发实习岗位" {...disabledProps}/>
          )} */}
        {helper('导师姓名',
          '',
          `tutorName${taskKey}`,
          [{ required: true, message: "请输入导师姓名" },
          { max: 32, message: '超出限制长度32位字符，请重新编辑' }],
          <Input placeholder="请输入导师姓名" {...disabledProps}/>
        )}
        {helper('导师手机号',
          '',
          `tutorPhone${taskKey}`,
          [{ required: true, message: "请输入导师手机号" },
          { pattern: phonereg, message: "请输入正确的电话号码"},],
          <Input placeholder="请输入导师手机号" {...disabledProps}/>
        )}
        {helper('导师邮箱',
          '',
          `tutorMail${taskKey}`,
          [{ required: true, message: "请输入导师邮箱地址" },
          { pattern: emailreg, message: "请输入正确的邮箱地址"},],
          <Input placeholder="请输入导师邮箱地址" {...disabledProps}/>
        )}
        {helper('导师邮寄地址',
          '',
          `tutorAddress${taskKey}`,
          [{ required: true, message: "请输入导师地址" }],
          <Input maxLength={200} placeholder="请输入导师邮寄地址，仅用于后续奖品邮寄" {...disabledProps}/>
        )}
        <div className='introArea'>{helper('课题简介',
          '',
          `taskDesc${taskKey}`,
          [{ required: true, message: "请输入课题简介" },
          { max: 200, message: '超出限制长度200位字符，请重新编辑' }],
          <TextArea placeholder="请输入课题简介，以便学生快速了解课题" rows={4} {...disabledProps}/>
        )}</div>
      </div>
    </div>
  )
}
export default Form.create()(TaskApply);