table-bill

表单组件

包含文件：

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

CreateForm:

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

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

使用:

import CreateForm from "./CreateForm"

function(props) {
    // 传入的组件都会被注入 field表单控制 selectList setSelectList
    // selectedList setSelectedList
    // SelectFormBefore选择区table上部分
    // SelectTable 选择内容
    let SelectTable = (props) => (
      
        
        
        {/*  */}
      <table>
        </table>
    )
    
  let SelectedTable = ({selectedList,setSelectedList,changeNumber,deleteProduct,field}) =&gt; (
    &lt;&gt;
      
        
         (
            changeNumber(v,index,record)}
            /&gt;
          )
        }/&gt;
        <button style="{{color:'red'}}">deleteProduct(id)}&gt;删除</button>
          }
        /&gt;
      <table>
        </table>
      <button type="primary">{
          field.validate((errors,values)=&gt;{
            if(errors) return
            let body = {
              ...values,
              useItemList:selectedList,
            }
            UseRegistrationApi
              .createUseRegistration(body)
              .then((res)=&gt;{
                if(!res) return
                Message.success(res.message)
                field.reset()
                setSelectedList([])
              })
          })
        }}&gt;
        新建使用单
      </button>
    
  )
  // field抛出是为了防止 外层控制输入组件导致修改值时候失去焦点
  let SelectFormBefore = ({field}) =&gt; (
    <div>
      <span>可选耗材</span>
      <input style="{{margin:" size="xs" type="search">changeScreening(field.getValue('name'),'name')}
          /&gt;
        }
        placeholder="请输入"
      /&gt;
    </div>
  )

  let SelectContentBefore = () =&gt; (
    
  )

  let SelectedFormBefore = ({field}) =&gt; (
    <div>
      <span>使用单</span>
      <div>
        <div style="{{width:'33%'}}">
          <select label="手术室:" style="{{width:'100%'}}">
          {field.getError('operationRoomId')}
        
        
          </select><input label="手术单号(选填):" style="{{width:'100%'}}">
        </div>
      </div>
    </div>
  )
    return (
      
    )
  }