【Ant.designPro】常用输入框与弹窗组件

一、输入框组件

• 1.ProFormSelect 下拉选择框
• 下拉框多选方法：
• fieldProps={{
  mode: ‘multiple’,
  }}
• 2.ProFormTextArea 大段内容框
• 3.ProFormRadio 单选框
• 4.ProFormText 输入框

<ProFormSelect
	label={"1"}
   	name={"num"}
    options={[
       {label:"1",value:"1"},
       {label:"2",value:"2"},
       {label:"3",value:"3"},
     ]}
     fieldProps={{
       mode: 'multiple',//下拉框多选方法 multiple
     }}
/>

<Popconfirm
 title={'确认是否删除'}
 onConfirm={async ()=>{
   const values = {}
   values.id = record.id
   const res = await delete_g_id(values)
   console.log(res)
   if(res.success){
     message.success('删除成功')
     if(Ref.current){
       Ref.current.reload()
       return true
     }
   }}}
>
 <a>删除</a>
</Popconfirm>

<ProFormRadio.Group
	name={"gender"}
	label="性别"
	rules={[{required: true, message: '请选择一个选项!',}]}
	options={[{label:"男",value:"1"}, {label:"女",value:"0"}]}
/>

  <ProFormText label={"用户名"} name={"username"} disabled initialValue={data.username}/>

二、弹窗组件

• Popconfirm 确认框弹窗
• ModalForm 弹窗

<Popconfirm
	title={'确认是否删除'}
	onConfirm={async ()=>{
	 const values = {}
	 values.g_id = record.g_id
	 const res = await delete_g_id(values)
	 console.log(res)
	 if(res.success){
	   message.success('删除成功')
	   if(Ref.current){
	     Ref.current.reload()
	     return true
	   }
	 }}}
>
	 <a style={{marginRight:"2%"}}>删除</a>
</Popconfirm>

<ModalForm
 title={"新增用户"}
 width={"23%"}
 trigger={<Button type={"primary"}>新建</Button>}
 modalProps={{destroyOnClose:true}}
 onFinish={async(values)=>{
   const re = await addUser(values)
   if(re.success){
     message.success('新增成功')
     if(ref.current){
       ref.current.reload()
     }
     return true
   }
   else{
     return false
   }}}
>
 <ProFormText label={"用户名"} name={"username"}/>
 <ProFormText label={"密码"} name={"password"}/>
 <ProFormText label={"用户权限"} name={"user_authority"}/>
</ModalForm>