table-bill v1.0.3

表单组件

包含文件：

入口： 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 ( ) }