feat: 搜索框

src/components/SearchForm.jsx

@@ -0,0 +1,225 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import { Form, Input, Row, Col, Select, DatePicker, Space, Button } from 'antd';
+import { objectMapper, at, isEmpty } from '@/utils/commons';
+import { DATE_FORMAT } from '@/config';
+import useFormStore from '@/stores/Form';
+import usePresets from '@/hooks/usePresets';
+import { useTranslation } from 'react-i18next';
+
+const { RangePicker } = DatePicker;
+
+const SearchForm = ({ initialValue, onSubmit, onReset, ...props }) => {
+  const { t } = useTranslation();
+  const presets = usePresets();
+  const [formValues, setFormValues] = useFormStore((state) => [state.formValues, state.setFormValues]);
+  const [formValuesToSub, setFormValuesToSub] = useFormStore((state) => [state.formValuesToSub, state.setFormValuesToSub]);
+  const [form] = Form.useForm();
+  const { sort,  hides, shows, fieldProps } = {
+    sort: '',
+    // initialValue: '',
+    fieldProps: '',
+    hides: [],
+    shows: [],
+    ...props.defaultValue,
+  };
+  const { confirmText } = props;
+  const readValues = { ...initialValue, ...formValues };
+
+  const formValuesMapper = (values) => {
+    const destinationObject = {
+      'referenceNo': { key: 'referenceNo' },
+      'dates': [
+        { key: 'startdate', transform: (arrVal) => (arrVal ? arrVal[0].format(DATE_FORMAT) : '') },
+        { key: 'enddate', transform: (arrVal) => (arrVal ? arrVal[1].format(DATE_FORMAT) : '') },
+      ],
+      'invoiceStatus': { key: 'invoiceStatus', transform: (value) => value?.value || value?.key || '', default: '' },
+    };
+    let dest = {};
+    const { dates, ...omittedValue } = values;
+    dest = { ...omittedValue, ...objectMapper(values, destinationObject) };
+    for (const key in dest) {
+      if (Object.prototype.hasOwnProperty.call(dest, key)) {
+        dest[key] = typeof dest[key] === 'string' ? (dest[key] || '').trim() : dest[key];
+      }
+    }
+    // omit empty
+    Object.keys(dest).forEach((key) => (dest[key] == null || dest[key] === '' || dest[key].length === 0) && delete dest[key]);
+    return dest;
+  };
+
+  useEffect(() => {
+    const dest = formValuesMapper(formValues);
+    setFormValuesToSub(dest);
+    return () => {};
+  }, []);
+
+  const onFinish = (values) => {
+    console.log('Received values of form, origin form value: ', values);
+    const dest = formValuesMapper(values);
+    console.log('form value send to onSubmit:', dest);
+    const str = new URLSearchParams(dest).toString();
+    setFormValues(values);
+    setFormValuesToSub(dest);
+    if (typeof onSubmit === 'function') {
+      onSubmit(null, dest, values, str);
+    }
+  };
+
+  const handleReset = () => {
+    form.setFieldsValue({
+      // 'DateType': undefined,
+    });
+    if (typeof onReset === 'function') {
+      onReset();
+    }
+  };
+  const onValuesChange = (changedValues, allValues) => {
+
+    const dest = formValuesMapper(allValues);
+    setFormValues(allValues);
+    setFormValuesToSub(dest);
+    // console.log('form onValuesChange', Object.keys(changedValues), args);
+  };
+  return (
+    <>
+      <Form form={form} name='advanced_search' className='orders-search-form' onFinish={onFinish} onValuesChange={onValuesChange}>
+        {/* <EditableContext.Provider value={form}> */}
+        <Row gutter={16}>
+          {getFields({ sort, initialValue: readValues, hides, shows, fieldProps, form, presets, t })}
+          {/* 'textAlign': 'right' */}
+          <Col flex='1 0 90px' className='flex justify-normal items-start' >
+            <Space align='center'>
+              <Button size={'middle'} type='primary' htmlType='submit'>
+                {confirmText || t('Search')}
+              </Button>
+              {/* <Button size="small" onClick={onReset}>
+                重置
+              </Button> */}
+            </Space>
+          </Col>
+        </Row>
+        {/* </EditableContext.Provider> */}
+      </Form>
+    </>
+  );
+};
+
+function getFields(props) {
+  const { fieldProps, form, presets, t } = props;
+  const bigCol = 4 * 2;
+  const midCol = 6;
+  const layoutProps = {
+    // gutter: { xs: 8, sm: 8, lg: 16 },
+    lg: { span: 4 },
+    md: { span: 8 },
+    sm: { span: 12 },
+    xs: { span: 24 },
+  };
+  const item = (name, sort = 0, render, col) => {
+    const customCol = col || 4;
+    const mdCol = customCol * 2;
+    return {
+      'key': '',
+      sort,
+      name,
+      render,
+      'hide': false,
+      'col': { lg: { span: customCol }, md: { span: mdCol < 8 ? 10 : mdCol }, flex: mdCol < 8 ? '1 0' : '' },
+    };
+  };
+  let baseChildren = [];
+  baseChildren = [
+    item(
+      'referenceNo',
+      99,
+      <Form.Item name='referenceNo'>
+        <Input placeholder={t('group:RefNo')} allowClear />
+      </Form.Item>,4
+    ),
+    item(
+      'invoiceStatus',
+      99,
+      <Form.Item name={`invoiceStatus`} initialValue={at(props, 'initialValue.invoiceStatus')[0] || (fieldProps?.invoiceStatus?.show_all ? { key: '-1', label: '所有' } : undefined)}>
+        <Select style={{ width: '100%' }} placeholder='所有状态' labelInValue>
+          {fieldProps?.invoiceStatus?.show_all && (
+            <Select.Option key='所有' value='-1'>
+              所有
+            </Select.Option>
+          )}
+          <Select.Option key='已成行' value='1'>
+            已成行
+          </Select.Option>
+          <Select.Option key='未成行' value='0'>
+            未成行
+          </Select.Option>
+        </Select>
+      </Form.Item>,
+      3
+    ),
+    item(
+      'dates',
+      99,
+      <Form.Item name={'dates'} {...fieldProps.dates} initialValue={at(props, 'initialValue.dates')[0]}>
+        {/* <DatePickerCharts isform={true} {...fieldProps.dates} form={form} /> */}
+        <RangePicker
+          allowClear={true}
+          inputReadOnly={true}
+          presets={presets}
+          // defaultValue={toJS(arrivalDateRange)}
+          placeholder={['From', 'Thru']}
+          // onChange={(dateRange) => {
+          // reservationStore.updatePropertyValue('arrivalDateRange', dateRange == null ? [] : dateRange)
+          // }}
+        />
+      </Form.Item>,
+      fieldProps?.dates?.col || midCol
+    ),
+  ];
+  baseChildren = baseChildren
+    .map((x) => {
+      x.hide = false;
+      if (props.sort === undefined) {
+        return x;
+      }
+      const tmpSort = props.sort;
+      for (const key in tmpSort) {
+        if (Object.prototype.hasOwnProperty.call(tmpSort, key)) {
+          if (x.name === key) {
+            x.sort = tmpSort[key];
+          }
+        }
+      }
+      return x;
+    })
+    .map((x) => {
+      if (props.hides.length === 0 && props.shows.length === 0) {
+        return x;
+      }
+      if (props.hides.length === 0) {
+        x.hide = !props.shows.includes(x.name);
+      } else if (props.shows.length === 0) {
+        x.hide = props.hides.includes(x.name);
+      }
+      return x;
+    })
+    .filter((x) => !x.hide)
+    .sort((a, b) => {
+      return a.sort < b.sort ? -1 : 1;
+    });
+  const children = [];
+  const leftStyle = {}; // { borderRight: '1px solid #dedede' };
+  for (let i = 0; i < baseChildren.length; i++) {
+    let style = {}; // { padding: '0px 2px' };
+    style = i % 2 === 0 && baseChildren[i].col === 12 ? { ...style, ...leftStyle } : style;
+    style = !baseChildren[i].hide ? { ...style, display: 'block' } : { ...style, display: 'none' };
+    const Item = (
+      <Col key={String(i)} style={style} {...layoutProps} {...baseChildren[i].col}>
+        {baseChildren[i].render}
+      </Col>
+    );
+    children.push(Item);
+  }
+  return children;
+}
+
+export default SearchForm;

src/stores/Form.js

@@ -0,0 +1,12 @@
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+
+export const useFormStore = create(
+  devtools((set, get) => ({
+    formValues: {},
+    setFormValues: (values) => set((state) => ({ formValues: { ...state.formValues, ...values } })),
+    formValuesToSub: {},
+    setFormValuesToSub: (values) => set((state) => ({ formValuesToSub: { ...state.formValuesToSub, ...values } })),
+  }))
+);
+export default useFormStore;

src/utils/commons.js

@@ -340,7 +340,7 @@ export function objectMapper(input, keyMap) {
         if (map) {
           let value = input[key];
           if (map.transform) value = map.transform(value);
-          mappedObj[map.key || key] = value;
+          mappedObj[map.key || map] = value;
         }
       }
     });

src/views/reservation/Newest.jsx

@@ -5,11 +5,12 @@ import { toJS } from "mobx";
 import { Row, Col, Space, Button, Table, Input, Typography, DatePicker, Modal, App, Select } from 'antd';
 import dayjs from "dayjs";
 import { useStore } from '@/stores/StoreContext.js';
-import { isEmpty } from "@/utils/commons";
+import { isEmpty, objectMapper } from "@/utils/commons";
 import { useTranslation } from 'react-i18next';
 import usePresets from '@/hooks/usePresets';
 import useAuthStore from '@/stores/Auth'
 import useReservationStore from '@/stores/Reservation'
+import SearchForm from '@/components/SearchForm';
 
 const { Title } = Typography;
 
@@ -218,6 +219,22 @@ function Newest() {
       </Modal>
       <Space direction="vertical" style={{ width: '100%' }}>
         <Title level={3}></Title>
+        <SearchForm
+          // initialValue={
+          //   {
+          //   }
+          // }
+          defaultValue={{
+            shows: ['referenceNo', 'dates'],
+            fieldProps: {
+              dates: { label: t('group:ArrivalDate') },
+            },
+          }}
+          onSubmit={(err, formVal, filedsVal) => {
+            const _ff = objectMapper(formVal, { startdate: 'DateStart', enddate: 'DateEnd', referenceNo: 'GroupNo' })
+            console.log('from form', formVal, 'mappered for search', _ff);
+          }}
+        />
         <Row gutter={16}>
 				  <Col md={24} lg={6} xxl={4}>
             <Input placeholder={t('group:RefNo')} value={referenceNo} onChange={(e) => { reservationStore.updatePropertyValue('referenceNo', e.target.value)} } />