From 58b7b4c5dfa5337c4c1c3e988c7e3551c8679ca8 Mon Sep 17 00:00:00 2001 From: manzhenhua Date: Wed, 13 May 2020 00:16:02 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=8E=A7=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/dataView-V2/DataViewReducer.ts | 2 +- .../baseComponent/rangePicker/index.tsx | 19 ++++++++ .../baseComponent/selectSearch/index.tsx | 46 +++++++++++++++++++ .../_components/searchView/index.tsx | 24 +++++++++- .../_components/searchView/styles.less | 2 + components/dataView-V2/index.tsx | 19 +++++--- 6 files changed, 104 insertions(+), 8 deletions(-) create mode 100644 components/dataView-V2/_components/searchView/baseComponent/rangePicker/index.tsx create mode 100644 components/dataView-V2/_components/searchView/baseComponent/selectSearch/index.tsx diff --git a/components/dataView-V2/DataViewReducer.ts b/components/dataView-V2/DataViewReducer.ts index bfc2714..870cfb4 100644 --- a/components/dataView-V2/DataViewReducer.ts +++ b/components/dataView-V2/DataViewReducer.ts @@ -73,7 +73,7 @@ export const effect = (reduceArr: any, registerFun: { fetch: Function }) => { newParams = await registerFun.fetch({ searchForm: { ...state.searchForm, ...(payload.searchForm || {}) } }) break case 'onResert': - newParams = await registerFun.fetch({ searchForm: undefined, pagination: initState.pagination }) + newParams = await registerFun.fetch({ searchForm: null, pagination: initState.pagination }) dispatch({ type: 'onResert', payload: { diff --git a/components/dataView-V2/_components/searchView/baseComponent/rangePicker/index.tsx b/components/dataView-V2/_components/searchView/baseComponent/rangePicker/index.tsx new file mode 100644 index 0000000..c2e9819 --- /dev/null +++ b/components/dataView-V2/_components/searchView/baseComponent/rangePicker/index.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import moment from 'moment'; +import { DatePicker } from 'antd'; + +export const formatStr = 'YYYY-MM-DD HH:mm:ss'; + +const { RangePicker } = DatePicker +const CustomInput = (props: any) => { + const value = props.value && Array.isArray(props.value) ? props.value.map((ls: string) => moment(ls)) : props.value + const onChange = (val: any) => { + if (props.onChange) { + let setFormat = formatStr; + const newVal = val && Array.isArray(val) ? val.map(ls => ls.format ? ls.format(setFormat) : ls) : val; + return props.onChange(newVal) + } + } + return +} +export default CustomInput; \ No newline at end of file diff --git a/components/dataView-V2/_components/searchView/baseComponent/selectSearch/index.tsx b/components/dataView-V2/_components/searchView/baseComponent/selectSearch/index.tsx new file mode 100644 index 0000000..949e45f --- /dev/null +++ b/components/dataView-V2/_components/searchView/baseComponent/selectSearch/index.tsx @@ -0,0 +1,46 @@ +import React, { useState } from 'react'; +import { Select } from 'antd'; +import { SelectProps } from 'antd/es/select'; + +const Option: any = Select.Option; +export interface ApolloSelectProps extends SelectProps { + request: Function; + isMultiple?: boolean; + options?: any[]; + optionsKey?: { + label: string; + value: string; + } +} +const Custom = (props: ApolloSelectProps) => { + const [dataSource, setData] = useState([]) + const optionsKey = props.optionsKey || { value: 'id', label: 'name' } + const getList = async (val: string) => { + if (props.request && typeof props.request === 'function') { + const data = await props.request(val); + if (data && Array.isArray(data)) { + const newData = data.map(ls => ({ + ...ls, + _id: ls[optionsKey.value], + _name: ls[optionsKey.label] + })) + setData(newData) + } + } + } + const handleSearch = (val: string) => { + getList(val); + }; + return +} +Custom.Option = Option +export default Custom; \ No newline at end of file diff --git a/components/dataView-V2/_components/searchView/index.tsx b/components/dataView-V2/_components/searchView/index.tsx index 8b5f2bd..22cd59b 100644 --- a/components/dataView-V2/_components/searchView/index.tsx +++ b/components/dataView-V2/_components/searchView/index.tsx @@ -9,6 +9,8 @@ import { // base-component import Input from './baseComponent/input'; import DatePicker from './baseComponent/date'; +import RangePicker from './baseComponent/rangePicker'; +import Search from './baseComponent/selectSearch' import Filter from '../filterCondition'; import styles from './styles.less'; @@ -76,7 +78,26 @@ const SearchForm = (props: Props) => { disabled={disabled} /> ); - + case 'daterange': + return ( + + ); + case 'search': + return ( + + ); default: return ( {
{node ? ( diff --git a/components/dataView-V2/_components/searchView/styles.less b/components/dataView-V2/_components/searchView/styles.less index 09a7c2f..d42a4ac 100644 --- a/components/dataView-V2/_components/searchView/styles.less +++ b/components/dataView-V2/_components/searchView/styles.less @@ -22,6 +22,7 @@ justify-content: flex-start; width: 100%; margin-right: 20px; + text-align: left; } .checkboxContainer { display: flex; @@ -33,6 +34,7 @@ } .timeStyle{ max-width: 320px; + } .searchBtnWrap { display: inline-block; diff --git a/components/dataView-V2/index.tsx b/components/dataView-V2/index.tsx index 51c279c..94e7178 100644 --- a/components/dataView-V2/index.tsx +++ b/components/dataView-V2/index.tsx @@ -1,4 +1,4 @@ -import React, { useReducer, useEffect } from 'react'; +import React, { useReducer, useEffect, MutableRefObject, useRef, forwardRef, useImperativeHandle, Ref } from 'react'; import _ from 'lodash'; import { Button } from 'antd'; import IconFont from '@/submodule/components/CustomIcon/IconFont'; @@ -32,10 +32,11 @@ interface State { } -const DataView = (props: Props) => { +const DataView = (props: Props, ref: Ref) => { let registerFun: any = { fetch: _fetch } + const testRef: MutableRefObject = useRef(); const { style, hideForm, tips } = props; const [state, dispatch, effectDispatch] = effect(useReducer(reducer, initState), registerFun); const initView = async () => { @@ -50,9 +51,10 @@ const DataView = (props: Props) => { useEffect(() => { initView() }, []) + const _beforeFetch = (params: any) => { - const { pagination = {}, searchForm } = params || {}; - const newSearchForm = searchForm === undefined ? {} : { ...state.searchForm, ...(searchForm || {}) } // 手动清空 + const { pagination = {}, searchForm = {} } = params || {}; + const newSearchForm = searchForm === null ? {} : { ...state.searchForm, ...(searchForm || {}) } // 手动清空 return Object.assign({}, newSearchForm, { pageSize: state.pagination.pageSize, pageNum: state.pagination.pageNum, @@ -73,6 +75,11 @@ const DataView = (props: Props) => { return await onAfterFetch(res) } } + useImperativeHandle(ref, () => {//第一个参数，要暴露给哪个(ref)？第二个参数要暴露出什么？ + return { + fetch: effectDispatch.bind(null, { type: 'onSearch' }) + } + }); const _renderBtns = () => { if (props.btns && props.btns.length > 0) { return (
@@ -116,7 +123,7 @@ const DataView = (props: Props) => { <>
{/* 基本筛选条件 */} - +
@@ -131,4 +138,4 @@ const DataView = (props: Props) => {
) } -export default DataView \ No newline at end of file +export default forwardRef(DataView) \ No newline at end of file -- 2.21.0