修改控件

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: {

components/dataView-V2/_components/searchView/baseComponent/rangePicker/index.tsx

+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 <RangePicker placeholder={props.placeholder || ['开始时间', '结束时间']}{...props} value={value} onChange={onChange} />
+}
+export default CustomInput;
\ No newline at end of file

components/dataView-V2/_components/searchView/baseComponent/selectSearch/index.tsx

+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<any> {
+    request: Function;
+    isMultiple?: boolean;
+    options?: any[];
+    optionsKey?: {
+        label: string;
+        value: string;
+    }
+}
+const Custom = (props: ApolloSelectProps) => {
+    const [dataSource, setData] = useState<any[]>([])
+    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 <Select
+        showSearch
+        filterOption={false}
+        onSearch={handleSearch}
+        onFocus={getList.bind(null, '')}
+        labelInValue
+        {...props}>
+        {dataSource.map((ls: any) => (
+            <Option key={ls._id}>{ls._name}</Option>)
+        )}</Select>
+}
+Custom.Option = Option
+export default Custom;
\ No newline at end of file

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 (
+                    <RangePicker
+                        {...componentAttr}
+                        placeholder={placeholder}
+                        className={classnames(styles.timeStyle, className || styles.itemContent)}
+                        disabled={disabled}
+                    />
+                );
+            case 'search':
+                return (
+                    <Search
+                        {...componentAttr}
+                        request={col.request}
+                        optionsKey={col.optionsKey}
+                        placeholder={placeholder}
+                        className={classnames(styles.timeStyle, className || styles.itemContent)}
+                        disabled={disabled}
+                    />
+                );
             default:
                 return (
                     <Input
@@ -98,6 +119,7 @@ const SearchForm = (props: Props) => {
                     <div className={styles.itemContent}>
                         {node ? (
                             <Form.Item
+
                                 {...(ls.itemAttr || {})}
                                 name={ls.key}
                             >

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;

components/dataView-V2/index.tsx

-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<any>) => {
     let registerFun: any = {
         fetch: _fetch
     }
+    const testRef: MutableRefObject<any> = 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 (<div className={styles.row}>
@@ -116,7 +123,7 @@ const DataView = (props: Props) => {
                         <>
                             <div className={styles.formWrap}>
                                 {/* 基本筛选条件 */}
-                                <SearchForm searchCols={props.searchCols} />
+                                <SearchForm searchCols={props.searchCols} ref={testRef} />
                             </div>
                             <div className={styles.split} />
                         </>
@@ -131,4 +138,4 @@ const DataView = (props: Props) => {
         </div>
     )
 }
-export default DataView
+export default forwardRef(DataView)
\ No newline at end of file