表单组件

包含文件：

入口： CreateForm.js
子组件：SelectForm SelectedForm
store: store/CreateFormStore
css:CreateForm.scss

CreateForm:

接收 selectProps selectedProps props
分别为选择区的props与已选择的props

/**
 * React Component会被注入field用来控制表单输入
 * field抛出是为了防止 外层控制输入组件导致修改值时候失去焦点
 * @param {
 *  initList <Array> 选择区的列表项
 *  SelectTable <React Component> 选择table
 *  SelectFormBefore? <React Component> table上面的自定义区域
 *  SelectContentBefore? <React Component> 
 * } selectProps 
 * @param {
 *  SelectedTable? <React Component> 已选择的table注入了删除(deleteProduct)与改变数量(changeNumber)的方法
 *  SelectedFormBefore? <React Component> table上面自定义区域
 * } selectedProps 
 * @returns reactComponent
 */

使用:

import CreateForm from "./CreateForm"

function(props) {
    // 传入的组件都会被注入 field表单控制 selectList setSelectList
    // selectedList setSelectedList
    // SelectFormBefore选择区table上部分
    // SelectTable 选择内容
    let SelectTable = (props) => (
      <Table {...props} fixedHeader maxBodyHeight="6.3rem">
        <Table.Column title="品名" dataIndex="name"/>
        <Table.Column title="通用名" dataIndex="alias"/>
        <Table.Column title="规格型号" dataIndex="norms"/>
        {/* <Table.Column title="可选数量"/> */}
      </Table>
    )
    
  let SelectedTable = ({selectedList,setSelectedList,changeNumber,deleteProduct,field}) => (
    <>
      <Table dataSource={selectedList} fixedHeader maxBodyHeight="6.4rem">
        <Table.Column title="品名" dataIndex="name"/>
        <Table.Column title="规格" dataIndex="norms"/>
        <Table.Column title="数量" dataIndex="number" cell={
          (number,index,record) => (
            <NumberPicker
              min={1}
              value={number}
              type="inline"
              onChange={(v)=>changeNumber(v,index,record)}
            />
          )
        }/>
        <Table.Column
          title="操作"
          dataIndex="id"
          cell={
            (id)=><Button text style={{color:'red'}} onClick={()=>deleteProduct(id)}>删除</Button>
          }
        />
      </Table>
      <Button
        className="fl-r mt-20"
        type="primary"
        onClick={()=>{
          field.validate((errors,values)=>{
            if(errors) return
            let body = {
              ...values,
              useItemList:selectedList,
            }
            UseRegistrationApi
              .createUseRegistration(body)
              .then((res)=>{
                if(!res) return
                Message.success(res.message)
                field.reset()
                setSelectedList([])
              })
          })
        }}>
        新建使用单
      </Button>
    </>
  )
  // field抛出是为了防止 外层控制输入组件导致修改值时候失去焦点
  let SelectFormBefore = ({field}) => (
    <div className="flex flex-between mb-10">
      <span className="text-24">可选耗材</span>
      <Input
        {...field.init('name')}
        innerAfter={
          <Icon
            type="search"
            size="xs"
            style={{margin: 4,cursor:'pointer'}}
            onClick={()=>changeScreening(field.getValue('name'),'name')}
          />
        }
        placeholder="请输入"
      />
    </div>
  )

  let SelectContentBefore = () => (
    <DatePicker2.RangePicker className="mt-10 mb-10"/>
  )

  let SelectedFormBefore = ({field}) => (
    <div className="flex flex-column">
      <span className="text-24">使用单</span>
      <div className="mt-10 mb-10 flex flex-row">
        <div style={{width:'33%'}} className="mr-20">
          <Select
            {
              ...field.init('operationRoomId',{
                rules:[
                  {
                    required:true,
                  },
                ],
              })
            }
            dataSource={operationList}
            style={{width:'100%'}}
            label="手术室:"
          />
          <span style={{color:'red'}}>{field.getError('operationRoomId')}</span>
        </div>
        <div style={{width:'40%'}}>
          <Input {...field.init('operationCode')} style={{width:'100%'}} label="手术单号(选填):"/>
        </div>
      </div>
    </div>
  )
    return (
      <CreateForm
        selectProps={{SelectFormBefore,SelectTable,initList}}
        selectedProps={{SelectedFormBefore,SelectedTable}}
      />
    )
  }