---
title: 表单操作
order: 4
---

表单操作

```jsx
import React, { Component ,useRef,useState} from 'react';
import ReactDOM from 'react-dom';
import ResAdvancedSearch,{tfConditions} from '@riil-frontend/component-res-advanced-search';
import AdvancedSearchDrawer from '@riil-frontend/advanced-search-drawer';
import { Table, Icon, Loading, Drawer, Overlay,Button ,Radio,Checkbox} from '@alifd/next';

const { Group: CheckboxGroup } = Checkbox;
import request from './request.js'

const list = [
   {
        value: 'disabledFirstSelect',
        label: '失禁资源选项'
    }, {
        value: 'domainIsOptional',
        label: '是否可选中级联第一层'
    }
];

function App() {
     const dataSource=[{value:'resourceCenter',name:'资源中心'},
     {value:'moduleManagement',name:'模型管理'},
     {value:'dataStore',name:'数据仓库'},
     {value:'customStrategy',name:'自定义策略'},
     {value:'defaultStrategy',name:'默认策略'}]
      const [visible,setVisible] = useState(false)
      const [selected,onchangeSelect] = useState({})
      const [isOpenReset,onChangeReset] = useState(false);
      const myref = useRef();
       const myform = useRef();
            
      function openDrawer(){
        setVisible(true)
      }
      function closeDrawer(type){
     
          setVisible(false)
        
      }
     function onChange(value){
      const selected=   value.reduce((obj,current)=>{
         obj[current]=true;
       return obj;
       },{});
          console.log(selected)
       onchangeSelect(selected)
     }
     /**
      * 点击保存
      * **/
     function save(){
                const {
                error,//校验
                searchConditions,//搜索会先
                searchValue,//查询
                content,
                conditionGroup
              } = myform.current.getAdvancedSearchData();
               console.log('校验error状态：',error)
                console.log(' 拼接的cmdb查询：', searchConditions)
                 console.log('回显表单数据：',searchValue)
                         console.log('中文：', content)
                         console.log('新的参数',conditionGroup)
              if (error) {
                console.log('校验失败')
              }

              console.log(tfConditions(searchValue),11212)
     }

    function  search(){
           const {
                error,//校验
                searchConditions,//搜索会先
                searchValue,//查询
              } = myform.current.getAdvancedSearchData();
               console.log('校验error状态：',error)
                console.log('回显表单数据：', searchConditions)
                 console.log('拼接的cmdb查询：：',searchValue)
              if (!error) {
                console.log('校验失败')
              }
    }
    function resetFunc(){
             myform.current.reSetDefaultSearch();
    }
 
    return (
      <div className="AdvancedSearchDrawerDmo"  ref={myref} style={{height:800}} >
        <div >
          <AdvancedSearchDrawer  
              visible={visible} 
              closeDrawer={closeDrawer}  
              container={myref} 
              buttonCells={[<Button type="primary" key="action2"  onClick={save} >保存</Button>,<Button type="primary" key="action1" >搜索</Button>,<Button type="primary" key="action3" disabled={!isOpenReset}  onClick={resetFunc} >重置</Button>]}  >
               <ResAdvancedSearch 
               hasComponent={true}
               renderFinish={(content)=>{
                  //  const {content} = myform.current.getAdvancedSearchData();
                 console.log(content)
              }}
               canSelectDomain={true}
               resetButtonStateCallBack={(isOpen)=>{
                 onChangeReset(isOpen)
               }}
               ref={myform}
               filterSearchWayFunc={(value,ci,level)=>{
                console.log(value,ci,level)
                return value;
               }}
               disabledFirstSelect={selected['disabledFirstSelect']?true:false}
              domainIsOptional={selected['domainIsOptional']?true:false}
			   cascaderSelectProps={{
                    // changeOnSelect:false,
                   listStyle:{ width: '200px', height: '256px' }
                 }}
			          filterSearchWay={["all","attributes","relation"]}
                 ciType="switch"
               
				          initValues={[
    {
        "relation": "and",
        "children": [
            {
                "key": 1,
                "type": {
                    "rootCi": "switch",
                    "type": "attributes",
                    "attributes": "name",
                    "option": "=",
                    "searchValue": "ruijie",
                    //"dataType": "string",
                    "attributesOption": [
                        {
                            "value": "owned_computer_room",
                            "name": "所属机房"
                        },
                        {
                            "value": "owned_cabinet",
                            "name": "所属机柜"
                        },
                        {
                            "value": "start_u_location",
                            "name": "起始U位"
                        },
                        {
                            "value": "end_u_location",
                            "name": "结束U位"
                        },
                        {
                            "value": "type",
                            "name": "类型"
                        },
                        {
                            "value": "company",
                            "name": "厂商"
                        },
                        {
                            "value": "model",
                            "name": "型号"
                        },
                        {
                            "value": "serial_number",
                            "name": "序列号"
                        },
                        {
                            "value": "version",
                            "name": "版本"
                        },
                        {
                            "value": "purchase_date",
                            "name": "购置日期"
                        },
                        {
                            "value": "start_date",
                            "name": "启用日期"
                        },
                        {
                            "value": "service_years",
                            "name": "服役年限"
                        },
                        {
                            "value": "service_expiration_time",
                            "name": "服役到期时间"
                        },
                        {
                            "value": "maintenance_situation",
                            "name": "维保情况"
                        },
                        {
                            "value": "maintenance_expiration_time",
                            "name": "维保到期时间"
                        },
                        {
                            "value": "asset_number",
                            "name": "资产编号"
                        },
                        {
                            "value": "asset_status",
                            "name": "资产状态"
                        },
                        {
                            "value": "name",
                            "name": "名称"
                        },
                        {
                            "value": "display_name",
                            "name": "显示名称"
                        },
                        {
                            "value": "use",
                            "name": "用途"
                        },
                        {
                            "value": "mac_address",
                            "name": "MAC地址"
                        },
                        {
                            "value": "is_support_stack",
                            "name": "是否堆叠"
                        },
                        {
                            "value": "ipv4_address",
                            "name": "IPv4地址"
                        },
                        {
                            "value": "ipv6_address",
                            "name": "IPv6地址"
                        },
                        {
                            "value": "ipv4_address_list",
                            "name": "IPv4地址列表"
                        },
                        {
                            "value": "ipv6_address_list",
                            "name": "IPv6地址列表"
                        },
                        {
                            "value": "loopback_address_list",
                            "name": "Loopback地址表"
                        },
                        {
                            "value": "cluster_member_role",
                            "name": "成员角色"
                        },
                        {
                            "value": "cluster_member_owned_cluster",
                            "name": "所属集群"
                        },
                        {
                            "value": "cluster_member_id",
                            "name": "集群成员ID"
                        },
                        {
                            "value": "is_support_poe",
                            "name": "是否支持POE"
                        }
                    ],
                    "relationOption": null,
                    "instanceOption": null
                }
            }
        ]
    }
]}
        request={request}
          />
            </AdvancedSearchDrawer>
                   
          <Button onClick={openDrawer} >打开抽屉</Button>
   
 
        </div>
      </div>
    );
  
}

ReactDOM.render((
  <App />
), mountNode);
```