修改keys查询组件

src/components/keysFind/index.jsx

@@ -2,19 +2,18 @@
  * @Author: Wind
  * @Date: 2022-07-25 10:53:41
  * @LastEditors: Wind
- * @LastEditTime: 2022-07-25 14:44:27
+ * @LastEditTime: 2022-07-25 17:33:32
  * @Description:
  * @FilePath: \frontend\src\components\keysFind\index.jsx
  */
 import './index.less'
-import {
-  Form,
-  FormDateRangePickerField,
-  FormStrategy,
-  FormSelectField,
-  FormInputField,
-  Button
-} from 'zent'
+import { useEffect, useState } from 'react'
+import { Button, Notify, Select, DateRangePicker } from 'zent'
+import Ipt from '@/components/input/main'
+import Form from '@/components/form/main'
+import FormItem from '@/components/form-item/main'
+import _ from 'lodash'
+import { getReSellerOption, handelResponse } from '../../assets/api'
 
 const stateList = [
   { key: 1, text: '全部' },
@@ -23,61 +22,103 @@ const stateList = [
   { key: 4, text: '已完结' },
   { key: 5, text: '已作废' }
 ]
+function init() {
+  return {
+    date: [],
+    reseller: '',
+    plan: '',
+    state: '',
+    key: ''
+  }
+}
+
 export default ({ onQuery }) => {
-  const form = Form.useForm(FormStrategy.View)
+  const [reseller_option, setReseller_option] = useState([])
+  const [models, setModels] = useState(init())
+
+  useEffect(() => {
+    getReSellerOption().then((res) => {
+      handelResponse(
+        res,
+        (req, msg) => {
+          let arr = _.map(req, (o) => {
+            let obj = {}
+            obj.key = o.id
+            obj.text = o.name
+            obj.direct_reseller_id = o.direct_reseller_id
+            return obj
+          })
+          setReseller_option(arr)
+        },
+        (err) => {
+          Notify.error(err)
+        }
+      )
+    })
+  }, [])
 
   return (
-    <>
-      <Form className='keysFind' ayout='horizontal' form={form}>
-        <FormDateRangePickerField
-          name='date'
+    <div className='keysFind'>
+      <Form>
+        <FormItem labelname='请选择日期：' required='' labelwidth='95px'>
+          <DateRangePicker
             dateFormat='YYYY-MM-DD'
-          label='请选择日期：'
-          defaultValue={[]}
+            value={models.date}
             className='zent-datepicker-plan'
+            width={204}
+            onChange={(va) => setModels({ ...models, date: va })}
           />
-        <FormSelectField
-          name='distributor'
-          label='分销商：'
-          props={{
-            options: [
+        </FormItem>
+        <FormItem labelname='分销商：' required='' labelwidth='70px'>
+          <Select
+            options={reseller_option}
+            value={models.reseller}
+            placeholder='请选择'
+            width={204}
+            onChange={(va) => setModels({ ...models, reseller: va })}
+          />
+        </FormItem>
+
+        <FormItem labelname='计划名称：' required='' labelwidth='90px'>
+          <Select
+            options={[
               { key: 1, text: '普通用户' },
               { key: 2, text: '高级用户' }
-            ]
-          }}
+            ]}
+            value={models.plan}
+            placeholder='请选择'
+            width={204}
+            onChange={(va) => setModels({ ...models, plan: va })}
           />
-        <FormSelectField
-          name='plan'
-          label='计划名称：'
-          props={{
-            options: [
-              { key: 1, text: '普通用户' },
-              { key: 2, text: '高级用户' }
-            ]
-          }}
-        />
-        <FormSelectField
+        </FormItem>
+        <FormItem labelname='状态：' required='' labelwidth='50px'>
+          <Select
             name='state'
-          label='状态：'
-          props={{
-            options: stateList
-          }}
+            value={models.state}
+            options={stateList}
+            placeholder='请选择'
+            width={204}
+            onChange={(va) => setModels({ ...models, state: va })}
           />
-        <FormInputField
-          name='key'
-          label='KEY：'
-          showClear
-          props={{
-            spellCheck: false
-          }}
+        </FormItem>
+        <FormItem labelname='KEY：' required='' labelwidth='50px'>
+          <Ipt
+            value={models.key}
+            countShow={false}
+            labelWidth='0px'
+            placeholder='请输入'
+            width={204}
+            onChange={(va) => setModels({ ...models, key: va })}
           />
+        </FormItem>
+
         <div>
-          <Button type='primary' onClick={() => onQuery(form.getValue())}>
+          <Button type='primary' onClick={() => onQuery(models)}>
             查询
           </Button>
-          <Button onClick={() => form.reset()}>重置</Button>
+          <Button onClick={() => setModels(init())}>重置</Button>
         </div>
       </Form>
-    </>
+    </div>
   )
 }

src/components/keysFind/index.less

@@ -1,20 +1,39 @@
 .keysFind {
     width: 100%;
-    // display: grid;
-    // grid-template-columns: repeat(auto-fill, 500px);
+    display: flex;
+    align-items: center;
+
+    .form-compontent {
+        padding-top: 0px !important;
+
+        .iptfillself:not(:last-child) {
+            margin-bottom: 0 !important;
+        }
+
+        .keep-ipt {
+            height: 32px !important;
+        }
+    }
+
+    .form {
+        width: 100%;
         display: flex;
         flex-wrap: wrap;
 
-    .zent-form-control {
-        margin-right: 20px;
-        flex-direction: row !important;
+        .form-Item {
+            width: auto;
+            margin-right: 15px;
+            margin-bottom: 15px;
         }
+    }
+
+
 
     .zent-datepicker .zent-datepicker-trigger {
         background-color: transparent !important;
-        width: 150px !important;
         border-radius: 0 !important;
 
+
         &:hover {
             border-color: #296BEF !important;
             background-color: #F7F9FC !important;