antd-form-search

1.2.1 • Public • Published

antd-form-search

安装包

`npm i antd-form-search

调用方法

    import FormSeach from 'antd-form-search'
    <FormSeach
      formData={data}
      col={3}
      onSeach={(seachData)=>{
        this.seachlist(seachData)
      }}
      onReset={(seachData)=>{
        this.seachlist(seachData)
      }}
    ></FormSeach>

参数说明 formData

整体参数格式

    type              //  类型              必传      String
    label             //  label             必传      String
    value             //  返回参数key       必传      String
    defaultValue      //  默认值            非必传    String || data || [] || {}
    defaultAttribute  //  支持antd默认参数  非必传    {}

输入框 参数及示例

   {
     type:"input",
     label:'输入框',
     value:'orderSn',
     // defaultValue:'123',
     defaultAttribute:{
       placeholder:'输入框11',
     }
   },

日期 参数及示例

   defaultValue   moment('2019-11-11') 格式
   {
     type:"dataPicker",
     label:'日期',
     value:'dataPicker',
     // defaultValue:moment('2019-11-11'),
     defaultAttribute:{
       placeholder:'请选择日期',
     }
   },

月份 参数及示例

   defaultValue   moment('2019-11-11') 格式
   {
     type:"monthPicker",
     label:'月份',
     value:'monthPicker',
     // defaultValue:moment('2019-11-11'),
     defaultAttribute:{
       placeholder:'请选择月份',
     }
   },

双日历 参数及示例 两个单独的日历组成的双日历

   defaultValue   [moment('2019-11-11'),moment('2019-11-15')] 格式
   value 需要传两个参数 逗号隔开'towdatapickerStart1,towdatapickerEnd1' 用来接收选中的两个时间

   {
     type:"twoDataPicker",
     label:'双日历',
     value:'towdatapickerStart1,towdatapickerEnd1',
     // defaultValue:[moment('2019-11-11'),moment('2019-11-15')],
     defaultAttribute:{
       placeholder:['开始日期','结束日期'],
     }
   },

双日历 参数及示例 rangePicker

   defaultValue   [moment('2019-11-11'),moment('2019-11-15')] 格式
   value 需要传两个参数 逗号隔开'rangepickerStart1,rangepickerEnd1' 用来接收选中的两个时间

   {
     type:"rangePicker",
     label:'双日历',
     value:'rangepickerStart1,rangepickerEnd1',
     // defaultValue:[moment('2019-11-11'),moment('2019-11-15')],
     defaultAttribute:{
       placeholder:['开始日期','结束日期'],
     }
   },

普通下拉选择框 参数及示例

    data  [{value:'',label:'全部'},{value:'1',label:'待审核'},{value:'2',label:'已审核'},{value:'3',label:'已拒绝'}], 数组
    每一项的 key 都为 label,value

    不传data的话可传dataDom
    dataDom:companyNameChildren,   // 例 const companyNameChildren = companyNameData.map(d => <Option key={d} value={d}>{d}</Option>);
    配和 isAll 使用可在选项中增加全部选项

   {
     type:"select",
     label:'select',
     value:'status',
     // defaultValue:'1',
     data:[{value:'',label:'全部'},{value:'1',label:'待审核'},{value:'2',label:'已审核'},{value:'3',label:'已拒绝'}],

     // dataDom:companyNameChildren,   // 例 const companyNameChildren = companyNameData.map(d => <Option key={d} value={d}>{d}</Option>);
     // isAll:true, // 是否添加全部选项  与dataDom 配和使用  单独使用不生效
     defaultAttribute:{
       placeholder:'select',
     }
   },

带搜索的下拉单选 参数及示例

       seachSelectRadioData 参数为 [{value:'11',label:'全部'},{value:'1',label:'待审核'},{value:'2',label:'已审核'},{value:'3',label:'已拒绝'}],数组
       onSearch 输入框输入内容回调 需要返回新的 seachSelectRadioData 数组
   {
     type:"searchSelectRadio",
     label:'下拉单选',
     value:'statusradio',
     data:seachSelectRadioData,
     onSearch:this.onSeachSelectRadio.bind(this),
     // defaultValue:'11',
     defaultAttribute:{
       placeholder:'带搜索的下拉单选',
     }
   },

带搜索的下拉多选 参数及示例

       seachSelectRadioData 参数为 [{value:'11',label:'全部'},{value:'1',label:'待审核'},{value:'2',label:'已审核'},{value:'3',label:'已拒绝'}],数组
       onSearch 输入框输入内容回调 需要返回新的 seachSelectRadioData 数组
       defaultValue 默认选中  ['11','2'] 数组
       maxTagCount  最大显示数量

   {
     type:"searchSelectCheckbox",
     label:'下拉多选',
     value:'statuscheckbox',
     data:seachSelectRadioData,
     onSearch:this.onSeachSelectRadio.bind(this),
     // defaultValue:['11','2'],
     defaultAttribute:{
       placeholder:'带搜索的下拉多选',
       maxTagCount:2,
     }
   },

级联选择 参数及示例

       cascaderData = [
         {
           value: '1',
           label: 'Zhejiang',
           children: [
             {
               value: '11',
               label: 'Hangzhou',
               children: [
                 {
                   value: '111',
                   label: 'West Lake',
                 },
               ],
             },
           ],
         },
         {
           value: '2',
           label: 'Jiangsu',
           children: [
             {
               value: '21',
               label: 'Nanjing',
               children: [
                 {
                   value: '22',
                   label: 'Zhong Hua Men',
                 },
               ],
             },
           ],
         },
       ];
       seachSelectRadioData antd组件数据类型
       defaultValue:['2','21','22'],

   {
     type:"cascader",
     label:'级联选择',
     value:'cascader1',
     data:cascaderData,
     // defaultValue:['2','21','22'],
     defaultAttribute:{
       placeholder:'级联选择',
     }
   },

金额范围 参数及示例

       value:'amount1,amount2', 两个参数逗号隔开 用来接收最小最大值
       defaultValue:['1','100'],

   {
     type:"amountRange",
     label:'金额范围',
     value:'amount1,amount2',
     // defaultValue:['1','100'],
     defaultAttribute:{
       placeholder:['1','1000'],
     }
   },

省市区 参数及示例

       regions = addressdata.data[0].children; 统一接口返回数据取第1个的children 过滤掉国
       defaultValue:{
         cityId:52,
         cityName:"北京",
         districtId:517,
         districtName:"延庆区",
         provinceId:2,
         provinceName:"北京",
       },

    {
       type:"regionSelect",
       label:'省市区',
       value:'value',
       data:regions,
       // defaultValue:{
       //   cityId:52,
       //   cityName:"北京",
       //   districtId:517,
       //   districtName:"延庆区",
       //   provinceId:2,
       //   provinceName:"北京",
       // },
       defaultAttribute:{
         placeholder:'请选择省市区',
       }
     },

整体参数格式

       let data = [{
         type:"input",
         label:'输入框',
         value:'orderSn',
         // defaultValue:'123',
         defaultAttribute:{
           placeholder:'输入框11',
         }
       },{
         type:"dataPicker",
         label:'日期',
         value:'dataPicker',
         // defaultValue:moment('2019-11-11'),
         defaultAttribute:{
           placeholder:'请选择日期',
         }
       },{
         type:"monthPicker",
         label:'月份',
         value:'monthPicker',
         // defaultValue:moment('2019-11-11'),
         defaultAttribute:{
           placeholder:'请选择月份',
         }
       },{
         type:"twoDataPicker",
         label:'双日历',
         value:'towdatapickerStart1,towdatapickerEnd1',
         // defaultValue:[moment('2019-11-11'),moment('2019-11-15')],
         defaultAttribute:{
           placeholder:['开始日期','结束日期'],
         }
       },{
         type:"rangePicker",
         label:'双日历',
         value:'rangepickerStart1,rangepickerEnd1',
         // defaultValue:[moment('2019-11-11'),moment('2019-11-15')],
         defaultAttribute:{
           placeholder:['开始日期','结束日期'],
         }
       },{
         type:"select",
         label:'select',
         value:'status',
         // defaultValue:'1',
         data:[{value:'',label:'全部'},{value:'1',label:'待审核'},{value:'2',label:'已审核'},{value:'3',label:'已拒绝'}],

         // dataDom:companyNameChildren,   // 例 const companyNameChildren = companyNameData.map(d => <Option key={d} value={d}>{d}</Option>);
         // isAll:true, // 是否添加全部选项  与dataDom 配和使用  单独使用不生效
         defaultAttribute:{
           placeholder:'select',
         }
       },{
         type:"searchSelectRadio",
         label:'下拉单选',
         value:'statusradio',
         data:seachSelectRadioData,
         onSearch:this.onSeachSelectRadio.bind(this),
         // defaultValue:'11',
         defaultAttribute:{
           placeholder:'带搜索的下拉单选',
         }
       },{
         type:"searchSelectCheckbox",
         label:'下拉多选',
         value:'statuscheckbox',
         data:seachSelectRadioData,
         onSearch:this.onSeachSelectRadio.bind(this),
         // defaultValue:['11','2'],
         defaultAttribute:{
           placeholder:'带搜索的下拉多选',
           maxTagCount:2,
         }
       },{
         type:"cascader",
         label:'级联选择',
         value:'cascader1',
         data:cascaderData,
         // defaultValue:['2','21','22'],
         defaultAttribute:{
           placeholder:'级联选择',
         }
       },{
         type:"amountRange",
         label:'金额范围',
         value:'amount1,amount2',
         // defaultValue:['1','100'],
         defaultAttribute:{
           placeholder:['1','1000'],
         }
       },
         {
           type:"regionSelect",
           label:'省市区',
           value:'value',
           data:regions,
           // defaultValue:{
           //   cityId:52,
           //   cityName:"北京",
           //   districtId:517,
           //   districtName:"延庆区",
           //   provinceId:2,
           //   provinceName:"北京",
           // },
           defaultAttribute:{
             placeholder:'请选择省市区',
           }
         },
       ];

返回参数示例

       {
           "orderSn":"123",
           "dataPicker":1575993599000,
           "monthPicker":1575129599999,
           "status":"1",
           "statusradio":"1",
           "statuscheckbox":["2"],
           "cascader1":["2","21","22"],
           "value":{
               "provinceId":3,
               "provinceName":"安徽",
               "cityId":36,
               "cityName":"安庆",
               "districtId":400,
               "districtName":"宜秀区"
           },
           "towdatapickerStart1":1575907200000,
           "towdatapickerEnd1":1577375999000,
           "rangepickerStart1":1575907200000,
           "rangepickerEnd1":1576857599000,
           "amount1":"1",
           "amount2":"2"
       }

demo地址

http://zhj.acglouvre.art/

const promise = new Promise((resolve, reject) => { console.log(1) resolve() console.log(2) }) promise.then(() => { console.log(3) }) console.log(4)

let a; const b = new Promise((resolve, reject) => { console.log('promise1'); resolve(); }).then(() => { console.log('promise2'); }).then(() => { console.log('promise3'); }).then(() => { console.log('promise4'); });

a = new Promise(async (resolve, reject) => { console.log(a); await b; console.log(a); console.log('after1'); await a resolve(true); console.log('after2'); });

console.log('end');

test() console.log(a) var a = '11111' function test(){ console.log('2222222') }

Readme

Keywords

none

Package Sidebar

Install

npm i antd-form-search

Weekly Downloads

18

Version

1.2.1

License

ISC

Unpacked Size

34.3 kB

Total Files

3

Last publish

Collaborators

  • (00)