修改keys查询组件

This commit is contained in:
wangsongsole 2022-07-25 17:34:52 +08:00
parent 62941ada28
commit ac7222e983
2 changed files with 122 additions and 62 deletions

View File

@ -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'
dateFormat='YYYY-MM-DD'
label='请选择日期:'
defaultValue={[]}
className='zent-datepicker-plan'
/>
<FormSelectField
name='distributor'
label='分销商:'
props={{
options: [
<div className='keysFind'>
<Form>
<FormItem labelname='请选择日期:' required='' labelwidth='95px'>
<DateRangePicker
dateFormat='YYYY-MM-DD'
value={models.date}
className='zent-datepicker-plan'
width={204}
onChange={(va) => setModels({ ...models, date: va })}
/>
</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: '高级用户' }
]
}}
/>
<FormSelectField
name='plan'
label='计划名称:'
props={{
options: [
{ key: 1, text: '普通用户' },
{ key: 2, text: '高级用户' }
]
}}
/>
<FormSelectField
name='state'
label='状态:'
props={{
options: stateList
}}
/>
<FormInputField
name='key'
label='KEY'
showClear
props={{
spellCheck: false
}}
/>
]}
value={models.plan}
placeholder='请选择'
width={204}
onChange={(va) => setModels({ ...models, plan: va })}
/>
</FormItem>
<FormItem labelname='状态:' required='' labelwidth='50px'>
<Select
name='state'
value={models.state}
options={stateList}
placeholder='请选择'
width={204}
onChange={(va) => setModels({ ...models, state: va })}
/>
</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>
)
}

View File

@ -1,20 +1,39 @@
.keysFind {
width: 100%;
// display: grid;
// grid-template-columns: repeat(auto-fill, 500px);
display: flex;
flex-wrap: wrap;
align-items: center;
.zent-form-control {
margin-right: 20px;
flex-direction: row !important;
.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;
.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;