修改keys查询组件
This commit is contained in:
parent
62941ada28
commit
ac7222e983
|
@ -2,19 +2,18 @@
|
||||||
* @Author: Wind
|
* @Author: Wind
|
||||||
* @Date: 2022-07-25 10:53:41
|
* @Date: 2022-07-25 10:53:41
|
||||||
* @LastEditors: Wind
|
* @LastEditors: Wind
|
||||||
* @LastEditTime: 2022-07-25 14:44:27
|
* @LastEditTime: 2022-07-25 17:33:32
|
||||||
* @Description:
|
* @Description:
|
||||||
* @FilePath: \frontend\src\components\keysFind\index.jsx
|
* @FilePath: \frontend\src\components\keysFind\index.jsx
|
||||||
*/
|
*/
|
||||||
import './index.less'
|
import './index.less'
|
||||||
import {
|
import { useEffect, useState } from 'react'
|
||||||
Form,
|
import { Button, Notify, Select, DateRangePicker } from 'zent'
|
||||||
FormDateRangePickerField,
|
import Ipt from '@/components/input/main'
|
||||||
FormStrategy,
|
import Form from '@/components/form/main'
|
||||||
FormSelectField,
|
import FormItem from '@/components/form-item/main'
|
||||||
FormInputField,
|
import _ from 'lodash'
|
||||||
Button
|
import { getReSellerOption, handelResponse } from '../../assets/api'
|
||||||
} from 'zent'
|
|
||||||
|
|
||||||
const stateList = [
|
const stateList = [
|
||||||
{ key: 1, text: '全部' },
|
{ key: 1, text: '全部' },
|
||||||
|
@ -23,61 +22,103 @@ const stateList = [
|
||||||
{ key: 4, text: '已完结' },
|
{ key: 4, text: '已完结' },
|
||||||
{ key: 5, text: '已作废' }
|
{ key: 5, text: '已作废' }
|
||||||
]
|
]
|
||||||
|
function init() {
|
||||||
|
return {
|
||||||
|
date: [],
|
||||||
|
reseller: '',
|
||||||
|
plan: '',
|
||||||
|
state: '',
|
||||||
|
key: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default ({ onQuery }) => {
|
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 (
|
return (
|
||||||
<>
|
<div className='keysFind'>
|
||||||
<Form className='keysFind' ayout='horizontal' form={form}>
|
<Form>
|
||||||
<FormDateRangePickerField
|
<FormItem labelname='请选择日期:' required='' labelwidth='95px'>
|
||||||
name='date'
|
<DateRangePicker
|
||||||
dateFormat='YYYY-MM-DD'
|
dateFormat='YYYY-MM-DD'
|
||||||
label='请选择日期:'
|
value={models.date}
|
||||||
defaultValue={[]}
|
className='zent-datepicker-plan'
|
||||||
className='zent-datepicker-plan'
|
width={204}
|
||||||
/>
|
onChange={(va) => setModels({ ...models, date: va })}
|
||||||
<FormSelectField
|
/>
|
||||||
name='distributor'
|
</FormItem>
|
||||||
label='分销商:'
|
<FormItem labelname='分销商:' required='' labelwidth='70px'>
|
||||||
props={{
|
<Select
|
||||||
options: [
|
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: 1, text: '普通用户' },
|
||||||
{ key: 2, text: '高级用户' }
|
{ key: 2, text: '高级用户' }
|
||||||
]
|
]}
|
||||||
}}
|
value={models.plan}
|
||||||
/>
|
placeholder='请选择'
|
||||||
<FormSelectField
|
width={204}
|
||||||
name='plan'
|
onChange={(va) => setModels({ ...models, plan: va })}
|
||||||
label='计划名称:'
|
/>
|
||||||
props={{
|
</FormItem>
|
||||||
options: [
|
<FormItem labelname='状态:' required='' labelwidth='50px'>
|
||||||
{ key: 1, text: '普通用户' },
|
<Select
|
||||||
{ key: 2, text: '高级用户' }
|
name='state'
|
||||||
]
|
value={models.state}
|
||||||
}}
|
options={stateList}
|
||||||
/>
|
placeholder='请选择'
|
||||||
<FormSelectField
|
width={204}
|
||||||
name='state'
|
onChange={(va) => setModels({ ...models, state: va })}
|
||||||
label='状态:'
|
/>
|
||||||
props={{
|
</FormItem>
|
||||||
options: stateList
|
<FormItem labelname='KEY:' required='' labelwidth='50px'>
|
||||||
}}
|
<Ipt
|
||||||
/>
|
value={models.key}
|
||||||
<FormInputField
|
countShow={false}
|
||||||
name='key'
|
labelWidth='0px'
|
||||||
label='KEY:'
|
placeholder='请输入'
|
||||||
showClear
|
width={204}
|
||||||
props={{
|
onChange={(va) => setModels({ ...models, key: va })}
|
||||||
spellCheck: false
|
/>
|
||||||
}}
|
</FormItem>
|
||||||
/>
|
|
||||||
<div>
|
<div>
|
||||||
<Button type='primary' onClick={() => onQuery(form.getValue())}>
|
<Button type='primary' onClick={() => onQuery(models)}>
|
||||||
查询
|
查询
|
||||||
</Button>
|
</Button>
|
||||||
<Button onClick={() => form.reset()}>重置</Button>
|
<Button onClick={() => setModels(init())}>重置</Button>
|
||||||
</div>
|
</div>
|
||||||
</Form>
|
</Form>
|
||||||
</>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,20 +1,39 @@
|
||||||
.keysFind {
|
.keysFind {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
// display: grid;
|
|
||||||
// grid-template-columns: repeat(auto-fill, 500px);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
align-items: center;
|
||||||
|
|
||||||
.zent-form-control {
|
.form-compontent {
|
||||||
margin-right: 20px;
|
padding-top: 0px !important;
|
||||||
flex-direction: row !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 {
|
.zent-datepicker .zent-datepicker-trigger {
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
width: 150px !important;
|
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: #296BEF !important;
|
border-color: #296BEF !important;
|
||||||
background-color: #F7F9FC !important;
|
background-color: #F7F9FC !important;
|
||||||
|
|
Loading…
Reference in New Issue