账单页面，搜索功能
YCC
10 months ago
parent
31720a2930
commit
ecdba1ee09
@ -1,350 +1,347 @@
|
||||
import { useEffect } from 'react';
|
||||
import { Form, Input, Row, Col, Select, DatePicker, Space, Button, Checkbox } from 'antd';
|
||||
import { objectMapper, at } from '@/utils/commons';
|
||||
import { DATE_FORMAT, SMALL_DATETIME_FORMAT } from '@/config';
|
||||
import useFormStore from '@/stores/Form';
|
||||
import { useDatePresets } from '@/hooks/useDatePresets';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useEffect } from "react";
|
||||
import { Form, Input, Row, Col, Select, DatePicker, Space, Button, Checkbox } from "antd";
|
||||
import { objectMapper, at } from "@/utils/commons";
|
||||
import { DATE_FORMAT, SMALL_DATETIME_FORMAT } from "@/config";
|
||||
import useFormStore from "@/stores/Form";
|
||||
import { useDatePresets } from "@/hooks/useDatePresets";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import SearchInput from './SearchInput';
|
||||
import AuditStateSelector from './AuditStateSelector';
|
||||
import DeptSelector from './DeptSelector';
|
||||
import ProductsTypesSelector from './ProductsTypesSelector';
|
||||
import CitySelector from '@/components/CitySelector';
|
||||
import VendorSelector from '@/components/VendorSelector';
|
||||
import SearchInput from "./SearchInput";
|
||||
import AuditStateSelector from "./AuditStateSelector";
|
||||
import DeptSelector from "./DeptSelector";
|
||||
import ProductsTypesSelector from "./ProductsTypesSelector";
|
||||
import CitySelector from "@/components/CitySelector";
|
||||
import VendorSelector from "@/components/VendorSelector";
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
const SearchForm = ({ initialValue, onSubmit, onReset, onMounted, confirmText, formName, formLayout, loading, ...props }) => {
|
||||
const { t } = useTranslation();
|
||||
const presets = useDatePresets();
|
||||
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, fieldComProps } = {
|
||||
sort: '',
|
||||
// initialValue: '',
|
||||
fieldProps: '',
|
||||
fieldComProps: '',
|
||||
hides: [],
|
||||
shows: [],
|
||||
...props.fieldsConfig,
|
||||
};
|
||||
const readValues = { ...initialValue, ...formValues };
|
||||
const { t } = useTranslation();
|
||||
const presets = useDatePresets();
|
||||
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, fieldComProps } = {
|
||||
sort: "",
|
||||
// initialValue: '',
|
||||
fieldProps: "",
|
||||
fieldComProps: "",
|
||||
hides: [],
|
||||
shows: [],
|
||||
...props.fieldsConfig,
|
||||
};
|
||||
const readValues = { ...initialValue, ...formValues };
|
||||
|
||||
const formValuesMapper = (values) => {
|
||||
const destinationObject = {
|
||||
'keyword': { key: 'keyword', transform: (value) => value || '' },
|
||||
'username': { key: 'username', transform: (value) => value || '' },
|
||||
'referenceNo': { key: 'referenceNo', transform: (value) => value || '' },
|
||||
'dates': [
|
||||
{ key: 'startdate', transform: (arrVal) => (arrVal ? arrVal[0].format(DATE_FORMAT) : '') },
|
||||
{ key: 'enddate', transform: (arrVal) => (arrVal ? arrVal[1].format(DATE_FORMAT) : '') },
|
||||
{ key: 'starttime', transform: (arrVal) => (arrVal ? arrVal[0].format(DATE_FORMAT) : '') },
|
||||
{ key: 'endtime', transform: (arrVal) => (arrVal ? arrVal[1].format(SMALL_DATETIME_FORMAT) : '') },
|
||||
],
|
||||
'invoiceStatus': { key: 'invoiceStatus', transform: (value) => value?.value || value?.key || '', default: '' },
|
||||
'audit_state': { key: 'audit_state', transform: (value) => value?.value || value?.key || '', default: '' },
|
||||
'agency': {
|
||||
key: 'agency',
|
||||
transform: (value) => {
|
||||
return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.value : '';
|
||||
},
|
||||
},
|
||||
'year': [
|
||||
{ key: 'year', transform: (arrVal) => (arrVal ? arrVal.format('YYYY') : '') },
|
||||
],
|
||||
'products_types': {
|
||||
key: 'products_types',
|
||||
transform: (value) => {
|
||||
return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.value : '';
|
||||
},
|
||||
},
|
||||
'dept': {
|
||||
key: 'dept',
|
||||
transform: (value) => {
|
||||
console.log(value);
|
||||
return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.value : '';
|
||||
},
|
||||
},
|
||||
'city': {
|
||||
key: 'city',
|
||||
transform: (value) => {
|
||||
return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.value : '';
|
||||
},
|
||||
},
|
||||
'unconfirmed': { key: 'unconfirmed', transform: (value) => value ? 1 : 0 },
|
||||
};
|
||||
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;
|
||||
};
|
||||
const formValuesMapper = values => {
|
||||
const destinationObject = {
|
||||
keyword: { key: "keyword", transform: value => value || "" },
|
||||
username: { key: "username", transform: value => value || "" },
|
||||
referenceNo: { key: "referenceNo", transform: value => value || "" },
|
||||
dates: [
|
||||
{ key: "startdate", transform: arrVal => (arrVal ? arrVal[0].format(DATE_FORMAT) : "") },
|
||||
{ key: "enddate", transform: arrVal => (arrVal ? arrVal[1].format(DATE_FORMAT) : "") },
|
||||
{ key: "starttime", transform: arrVal => (arrVal ? arrVal[0].format(DATE_FORMAT) : "") },
|
||||
{ key: "endtime", transform: arrVal => (arrVal ? arrVal[1].format(SMALL_DATETIME_FORMAT) : "") },
|
||||
],
|
||||
invoiceStatus: { key: "invoiceStatus", transform: value => value?.value || value?.key || "", default: "" },
|
||||
audit_state: { key: "audit_state", transform: value => value?.value || value?.key || "", default: "" },
|
||||
agency: {
|
||||
key: "agency",
|
||||
transform: value => {
|
||||
return Array.isArray(value) ? value.map(ele => ele.key).join(",") : value ? value.value : "";
|
||||
},
|
||||
},
|
||||
year: [{ key: "year", transform: arrVal => (arrVal ? arrVal.format("YYYY") : "") }],
|
||||
products_types: {
|
||||
key: "products_types",
|
||||
transform: value => {
|
||||
return Array.isArray(value) ? value.map(ele => ele.key).join(",") : value ? value.value : "";
|
||||
},
|
||||
},
|
||||
dept: {
|
||||
key: "dept",
|
||||
transform: value => {
|
||||
console.log(value);
|
||||
return Array.isArray(value) ? value.map(ele => ele.key).join(",") : value ? value.value : "";
|
||||
},
|
||||
},
|
||||
city: {
|
||||
key: "city",
|
||||
transform: value => {
|
||||
return Array.isArray(value) ? value.map(ele => ele.key).join(",") : value ? value.value : "";
|
||||
},
|
||||
},
|
||||
unconfirmed: { key: "unconfirmed", transform: value => (value ? 1 : 0) },
|
||||
};
|
||||
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(() => {
|
||||
setFormValues(readValues);
|
||||
const dest = formValuesMapper(readValues);
|
||||
setFormValuesToSub(dest);
|
||||
useEffect(() => {
|
||||
setFormValues(readValues);
|
||||
const dest = formValuesMapper(readValues);
|
||||
setFormValuesToSub(dest);
|
||||
|
||||
if (typeof onMounted === 'function') {
|
||||
onMounted(dest)
|
||||
}
|
||||
if (typeof onMounted === "function") {
|
||||
onMounted(dest);
|
||||
}
|
||||
|
||||
return () => {};
|
||||
}, []);
|
||||
return () => {};
|
||||
}, []);
|
||||
|
||||
const onFinish = (values) => {
|
||||
console.log('Received values of form, origin form value: \n', values);
|
||||
const dest = formValuesMapper(values);
|
||||
console.log('form value send to onSubmit:\n', dest);
|
||||
const str = new URLSearchParams(dest).toString();
|
||||
setFormValues(values);
|
||||
setFormValuesToSub(dest);
|
||||
if (typeof onSubmit === 'function') {
|
||||
onSubmit(null, dest, values, str);
|
||||
}
|
||||
};
|
||||
const onFinish = values => {
|
||||
console.log("Received values of form, origin form value: \n", values);
|
||||
const dest = formValuesMapper(values);
|
||||
console.log("form value send to onSubmit:\n", 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 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);
|
||||
};
|
||||
|
||||
const dest = formValuesMapper(allValues);
|
||||
setFormValues(allValues);
|
||||
setFormValuesToSub(dest);
|
||||
// console.log('form onValuesChange', Object.keys(changedValues), args);
|
||||
};
|
||||
const onFinishFailed = ({ values, errorFields }) => {
|
||||
console.log("form validate failed", "\nform values:", values, "\nerrorFields", errorFields);
|
||||
};
|
||||
|
||||
const onFinishFailed = ({ values, errorFields }) => {
|
||||
console.log('form validate failed', '\nform values:', values, '\nerrorFields', errorFields);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form form={form} layout={'horizontal'} name={formName || 'advanced_search'} className='orders-search-form' onFinish={onFinish} onValuesChange={onValuesChange} onFinishFailed={onFinishFailed} >
|
||||
{/* <EditableContext.Provider value={form}> */}
|
||||
<Row gutter={16}>
|
||||
{getFields({ sort, initialValue: readValues, hides, shows, fieldProps, fieldComProps, 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' loading={loading}>
|
||||
{confirmText || t('Search')}
|
||||
</Button>
|
||||
{/* <Button size="small" onClick={onReset}>
|
||||
return (
|
||||
<>
|
||||
<Form form={form} layout={"horizontal"} name={formName || "advanced_search"} className="orders-search-form" onFinish={onFinish} onValuesChange={onValuesChange} onFinishFailed={onFinishFailed}>
|
||||
{/* <EditableContext.Provider value={form}> */}
|
||||
<Row gutter={16}>
|
||||
{getFields({ sort, initialValue: readValues, hides, shows, fieldProps, fieldComProps, 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" loading={loading}>
|
||||
{confirmText || t("Search")}
|
||||
</Button>
|
||||
{/* <Button size="small" onClick={onReset}>
|
||||
重置
|
||||
</Button> */}
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
{/* </EditableContext.Provider> */}
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
{/* </EditableContext.Provider> */}
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
function getFields(props) {
|
||||
const { fieldProps, fieldComProps, 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(
|
||||
'keyword',
|
||||
99,
|
||||
<Form.Item name='keyword' {...fieldProps.keyword}>
|
||||
<Input allowClear {...fieldComProps.keyword} />
|
||||
</Form.Item>,
|
||||
fieldProps?.keyword?.col || 6
|
||||
),
|
||||
item(
|
||||
'referenceNo',
|
||||
99,
|
||||
<Form.Item name='referenceNo' label={t('group:RefNo')} {...fieldProps.referenceNo}>
|
||||
<Input placeholder={t('group:RefNo')} allowClear />
|
||||
</Form.Item>,
|
||||
fieldProps?.referenceNo?.col || 6
|
||||
),
|
||||
item(
|
||||
'PNR',
|
||||
99,
|
||||
<Form.Item name='PNR' label='PNR'>
|
||||
<Input placeholder={t('group:PNR')} allowClear />
|
||||
</Form.Item>,
|
||||
fieldProps?.PNR?.col || 4
|
||||
),
|
||||
item(
|
||||
'invoiceStatus',
|
||||
99,
|
||||
<Form.Item name={`invoiceStatus`} initialValue={at(props, 'initialValue.invoiceStatus')[0] || { value: '0', label: 'Status' }}>
|
||||
<Select
|
||||
labelInValue
|
||||
options={[
|
||||
{ value: '0', label: 'Status' },
|
||||
{ value: '1', label: 'Not submitted' },
|
||||
{ value: '2', label: 'Submitted' },
|
||||
{ value: '3', label: 'Travel advisor approved' },
|
||||
{ value: '4', label: 'Finance Dept arrproved' },
|
||||
{ value: '5', label: 'Paid' },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>,
|
||||
fieldProps?.invoiceStatus?.col || 3
|
||||
),
|
||||
item(
|
||||
'dates',
|
||||
99,
|
||||
<Form.Item name={'dates'} label={t('group:ArrivalDate')} {...fieldProps.dates} initialValue={at(props, 'initialValue.dates')[0]}>
|
||||
{/* <DatePickerCharts isform={true} {...fieldProps.dates} form={form} /> */}
|
||||
<RangePicker allowClear={true} inputReadOnly={true} presets={presets} placeholder={['From', 'Thru']} {...fieldComProps.dates} />
|
||||
</Form.Item>,
|
||||
fieldProps?.dates?.col || midCol
|
||||
),
|
||||
item(
|
||||
'username',
|
||||
99,
|
||||
<Form.Item name='username' label={t('account:username')} {...fieldProps.username}>
|
||||
<Input placeholder={t('account:username')} allowClear />
|
||||
</Form.Item>,
|
||||
fieldProps?.username?.col || 4
|
||||
),
|
||||
/**
|
||||
*
|
||||
*/
|
||||
item(
|
||||
'year',
|
||||
99,
|
||||
<Form.Item name={'year'} label={t('products:UseYear')} {...fieldProps.year} initialValue={at(props, 'initialValue.year')[0]}>
|
||||
<DatePicker picker='year' allowClear {...fieldComProps.year} />
|
||||
</Form.Item>,
|
||||
fieldProps?.year?.col || 3
|
||||
),
|
||||
item(
|
||||
'agency',
|
||||
99,
|
||||
<Form.Item name='agency' label={t('products:Vendor')} {...fieldProps.agency} initialValue={at(props, 'initialValue.agency')[0]}>
|
||||
<VendorSelector {...fieldComProps.agency} />
|
||||
</Form.Item>,
|
||||
fieldProps?.agency?.col || 6
|
||||
),
|
||||
item(
|
||||
'audit_state',
|
||||
99,
|
||||
<Form.Item name={`audit_state`} initialValue={at(props, 'initialValue.audit_state')[0] || { value: '', label: 'Status' }}>
|
||||
<AuditStateSelector {...fieldComProps.audit_state} />
|
||||
</Form.Item>,
|
||||
fieldProps?.audit_state?.col || 3
|
||||
),
|
||||
item(
|
||||
'products_types',
|
||||
99,
|
||||
<Form.Item name={`products_types`} label={t('products:ProductType')} {...fieldProps.products_types} initialValue={at(props, 'initialValue.products_types')[0] || undefined}>
|
||||
<ProductsTypesSelector maxTagCount={1} {...fieldComProps.products_types} />
|
||||
</Form.Item>,
|
||||
fieldProps?.products_types?.col || 6
|
||||
),
|
||||
item(
|
||||
'dept',
|
||||
99,
|
||||
<Form.Item name={`dept`} label={t('products:Dept')} {...fieldProps.dept} initialValue={at(props, 'initialValue.dept')[0] || undefined}>
|
||||
<DeptSelector {...fieldComProps.dept} />
|
||||
</Form.Item>,
|
||||
fieldProps?.dept?.col || 6
|
||||
),
|
||||
item(
|
||||
'city',
|
||||
99,
|
||||
<Form.Item name={`city`} label={t('products:City')} {...fieldProps.city} initialValue={at(props, 'initialValue.city')[0] || undefined}>
|
||||
<CitySelector {...fieldComProps.city} />
|
||||
</Form.Item>,
|
||||
fieldProps?.city?.col || 4
|
||||
),
|
||||
item(
|
||||
'unconfirmed',
|
||||
99,
|
||||
<Form.Item name={`unconfirmed`} valuePropName='checked' initialValue={at(props, 'initialValue.unconfirmed') || false}>
|
||||
<Checkbox>{t('group:unconfirmed')}</Checkbox>
|
||||
</Form.Item>,
|
||||
fieldProps?.unconfirmed?.col || 2
|
||||
),
|
||||
];
|
||||
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;
|
||||
const { fieldProps, fieldComProps, 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(
|
||||
"keyword",
|
||||
99,
|
||||
<Form.Item name="keyword" {...fieldProps.keyword}>
|
||||
<Input allowClear {...fieldComProps.keyword} />
|
||||
</Form.Item>,
|
||||
fieldProps?.keyword?.col || 6
|
||||
),
|
||||
item(
|
||||
"referenceNo",
|
||||
99,
|
||||
<Form.Item name="referenceNo" label={t("group:RefNo")} {...fieldProps.referenceNo}>
|
||||
<Input placeholder={t("group:RefNo")} allowClear />
|
||||
</Form.Item>,
|
||||
fieldProps?.referenceNo?.col || 6
|
||||
),
|
||||
item(
|
||||
"PNR",
|
||||
99,
|
||||
<Form.Item name="PNR" label="PNR">
|
||||
<Input placeholder={t("group:PNR")} allowClear />
|
||||
</Form.Item>,
|
||||
fieldProps?.PNR?.col || 4
|
||||
),
|
||||
item(
|
||||
"invoiceStatus",
|
||||
99,
|
||||
<Form.Item name={`invoiceStatus`} initialValue={at(props, "initialValue.invoiceStatus")[0] || { value: "0", label: t("invoiceStatus.Status") }}>
|
||||
<Select
|
||||
labelInValue
|
||||
options={[
|
||||
{ value: "0", label: t("invoiceStatus.Status") },
|
||||
{ value: "1", label: t("invoiceStatus.Not_submitted") },
|
||||
{ value: "2", label: t("invoiceStatus.Submitted") },
|
||||
{ value: "3", label: t("invoiceStatus.Travel_advisor_approved") },
|
||||
{ value: "4", label: t("invoiceStatus.Finance_Dept_arrproved") },
|
||||
{ value: "5", label: t("invoiceStatus.Paid") },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>,
|
||||
fieldProps?.invoiceStatus?.col || 3
|
||||
),
|
||||
item(
|
||||
"dates",
|
||||
99,
|
||||
<Form.Item name={"dates"} label={t("group:ArrivalDate")} {...fieldProps.dates} initialValue={at(props, "initialValue.dates")[0]}>
|
||||
{/* <DatePickerCharts isform={true} {...fieldProps.dates} form={form} /> */}
|
||||
<RangePicker allowClear={true} inputReadOnly={true} presets={presets} placeholder={["From", "Thru"]} {...fieldComProps.dates} />
|
||||
</Form.Item>,
|
||||
fieldProps?.dates?.col || midCol
|
||||
),
|
||||
item(
|
||||
"username",
|
||||
99,
|
||||
<Form.Item name="username" label={t("account:username")} {...fieldProps.username}>
|
||||
<Input placeholder={t("account:username")} allowClear />
|
||||
</Form.Item>,
|
||||
fieldProps?.username?.col || 4
|
||||
),
|
||||
/**
|
||||
*
|
||||
*/
|
||||
item(
|
||||
"year",
|
||||
99,
|
||||
<Form.Item name={"year"} label={t("products:UseYear")} {...fieldProps.year} initialValue={at(props, "initialValue.year")[0]}>
|
||||
<DatePicker picker="year" allowClear {...fieldComProps.year} />
|
||||
</Form.Item>,
|
||||
fieldProps?.year?.col || 3
|
||||
),
|
||||
item(
|
||||
"agency",
|
||||
99,
|
||||
<Form.Item name="agency" label={t("products:Vendor")} {...fieldProps.agency} initialValue={at(props, "initialValue.agency")[0]}>
|
||||
<VendorSelector {...fieldComProps.agency} />
|
||||
</Form.Item>,
|
||||
fieldProps?.agency?.col || 6
|
||||
),
|
||||
item(
|
||||
"audit_state",
|
||||
99,
|
||||
<Form.Item name={`audit_state`} initialValue={at(props, "initialValue.audit_state")[0] || { value: "", label: "Status" }}>
|
||||
<AuditStateSelector {...fieldComProps.audit_state} />
|
||||
</Form.Item>,
|
||||
fieldProps?.audit_state?.col || 3
|
||||
),
|
||||
item(
|
||||
"products_types",
|
||||
99,
|
||||
<Form.Item name={`products_types`} label={t("products:ProductType")} {...fieldProps.products_types} initialValue={at(props, "initialValue.products_types")[0] || undefined}>
|
||||
<ProductsTypesSelector maxTagCount={1} {...fieldComProps.products_types} />
|
||||
</Form.Item>,
|
||||
fieldProps?.products_types?.col || 6
|
||||
),
|
||||
item(
|
||||
"dept",
|
||||
99,
|
||||
<Form.Item name={`dept`} label={t("products:Dept")} {...fieldProps.dept} initialValue={at(props, "initialValue.dept")[0] || undefined}>
|
||||
<DeptSelector {...fieldComProps.dept} />
|
||||
</Form.Item>,
|
||||
fieldProps?.dept?.col || 6
|
||||
),
|
||||
item(
|
||||
"city",
|
||||
99,
|
||||
<Form.Item name={`city`} label={t("products:City")} {...fieldProps.city} initialValue={at(props, "initialValue.city")[0] || undefined}>
|
||||
<CitySelector {...fieldComProps.city} />
|
||||
</Form.Item>,
|
||||
fieldProps?.city?.col || 4
|
||||
),
|
||||
item(
|
||||
"unconfirmed",
|
||||
99,
|
||||
<Form.Item name={`unconfirmed`} valuePropName="checked" initialValue={at(props, "initialValue.unconfirmed") || false}>
|
||||
<Checkbox>{t("group:unconfirmed")}</Checkbox>
|
||||
</Form.Item>,
|
||||
fieldProps?.unconfirmed?.col || 2
|
||||
),
|
||||
];
|
||||
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;
|
||||
|
||||
Loading…
Reference in New Issue