修改keys查询组件
This commit is contained in:
wangsongsole
parent
62941ada28
commit
ac7222e983
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue