Merge remote-tracking branch 'origin/main'
Lei OT
10 months ago
commit
d26a0a94bd
@ -1,350 +1,347 @@
|
|||||||
import { useEffect } from 'react';
|
import { useEffect } from "react";
|
||||||
import { Form, Input, Row, Col, Select, DatePicker, Space, Button, Checkbox } from 'antd';
|
import { Form, Input, Row, Col, Select, DatePicker, Space, Button, Checkbox } from "antd";
|
||||||
import { objectMapper, at } from '@/utils/commons';
|
import { objectMapper, at } from "@/utils/commons";
|
||||||
import { DATE_FORMAT, SMALL_DATETIME_FORMAT } from '@/config';
|
import { DATE_FORMAT, SMALL_DATETIME_FORMAT } from "@/config";
|
||||||
import useFormStore from '@/stores/Form';
|
import useFormStore from "@/stores/Form";
|
||||||
import { useDatePresets } from '@/hooks/useDatePresets';
|
import { useDatePresets } from "@/hooks/useDatePresets";
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
import SearchInput from './SearchInput';
|
import SearchInput from "./SearchInput";
|
||||||
import AuditStateSelector from './AuditStateSelector';
|
import AuditStateSelector from "./AuditStateSelector";
|
||||||
import DeptSelector from './DeptSelector';
|
import DeptSelector from "./DeptSelector";
|
||||||
import ProductsTypesSelector from './ProductsTypesSelector';
|
import ProductsTypesSelector from "./ProductsTypesSelector";
|
||||||
import CitySelector from '@/components/CitySelector';
|
import CitySelector from "@/components/CitySelector";
|
||||||
import VendorSelector from '@/components/VendorSelector';
|
import VendorSelector from "@/components/VendorSelector";
|
||||||
|
|
||||||
const { RangePicker } = DatePicker;
|
const { RangePicker } = DatePicker;
|
||||||
|
|
||||||
const SearchForm = ({ initialValue, onSubmit, onReset, onMounted, confirmText, formName, formLayout, loading, ...props }) => {
|
const SearchForm = ({ initialValue, onSubmit, onReset, onMounted, confirmText, formName, formLayout, loading, ...props }) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const presets = useDatePresets();
|
const presets = useDatePresets();
|
||||||
const [formValues, setFormValues] = useFormStore((state) => [state.formValues, state.setFormValues]);
|
const [formValues, setFormValues] = useFormStore(state => [state.formValues, state.setFormValues]);
|
||||||
const [formValuesToSub, setFormValuesToSub] = useFormStore((state) => [state.formValuesToSub, state.setFormValuesToSub]);
|
const [formValuesToSub, setFormValuesToSub] = useFormStore(state => [state.formValuesToSub, state.setFormValuesToSub]);
|
||||||
const [form] = Form.useForm();
|
const [form] = Form.useForm();
|
||||||
const { sort, hides, shows, fieldProps, fieldComProps } = {
|
const { sort, hides, shows, fieldProps, fieldComProps } = {
|
||||||
sort: '',
|
sort: "",
|
||||||
// initialValue: '',
|
// initialValue: '',
|
||||||
fieldProps: '',
|
fieldProps: "",
|
||||||
fieldComProps: '',
|
fieldComProps: "",
|
||||||
hides: [],
|
hides: [],
|
||||||
shows: [],
|
shows: [],
|
||||||
...props.fieldsConfig,
|
...props.fieldsConfig,
|
||||||
};
|
};
|
||||||
const readValues = { ...initialValue, ...formValues };
|
const readValues = { ...initialValue, ...formValues };
|
||||||
|
|
||||||
const formValuesMapper = (values) => {
|
const formValuesMapper = values => {
|
||||||
const destinationObject = {
|
const destinationObject = {
|
||||||
'keyword': { key: 'keyword', transform: (value) => value || '' },
|
keyword: { key: "keyword", transform: value => value || "" },
|
||||||
'username': { key: 'username', transform: (value) => value || '' },
|
username: { key: "username", transform: value => value || "" },
|
||||||
'referenceNo': { key: 'referenceNo', transform: (value) => value || '' },
|
referenceNo: { key: "referenceNo", transform: value => value || "" },
|
||||||
'dates': [
|
dates: [
|
||||||
{ key: 'startdate', transform: (arrVal) => (arrVal ? arrVal[0].format(DATE_FORMAT) : '') },
|
{ key: "startdate", transform: arrVal => (arrVal ? arrVal[0].format(DATE_FORMAT) : "") },
|
||||||
{ key: 'enddate', transform: (arrVal) => (arrVal ? arrVal[1].format(DATE_FORMAT) : '') },
|
{ key: "enddate", transform: arrVal => (arrVal ? arrVal[1].format(DATE_FORMAT) : "") },
|
||||||
{ key: 'starttime', transform: (arrVal) => (arrVal ? arrVal[0].format(DATE_FORMAT) : '') },
|
{ key: "starttime", transform: arrVal => (arrVal ? arrVal[0].format(DATE_FORMAT) : "") },
|
||||||
{ key: 'endtime', transform: (arrVal) => (arrVal ? arrVal[1].format(SMALL_DATETIME_FORMAT) : '') },
|
{ key: "endtime", transform: arrVal => (arrVal ? arrVal[1].format(SMALL_DATETIME_FORMAT) : "") },
|
||||||
],
|
],
|
||||||
'invoiceStatus': { key: 'invoiceStatus', transform: (value) => value?.value || value?.key || '', default: '' },
|
invoiceStatus: { key: "invoiceStatus", transform: value => value?.value || value?.key || "", default: "" },
|
||||||
'audit_state': { key: 'audit_state', transform: (value) => value?.value || value?.key || '', default: '' },
|
audit_state: { key: "audit_state", transform: value => value?.value || value?.key || "", default: "" },
|
||||||
'agency': {
|
agency: {
|
||||||
key: 'agency',
|
key: "agency",
|
||||||
transform: (value) => {
|
transform: value => {
|
||||||
return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.value : '';
|
return Array.isArray(value) ? value.map(ele => ele.key).join(",") : value ? value.value : "";
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
'year': [
|
year: [{ key: "year", transform: arrVal => (arrVal ? arrVal.format("YYYY") : "") }],
|
||||||
{ key: 'year', transform: (arrVal) => (arrVal ? arrVal.format('YYYY') : '') },
|
products_types: {
|
||||||
],
|
key: "products_types",
|
||||||
'products_types': {
|
transform: value => {
|
||||||
key: 'products_types',
|
return Array.isArray(value) ? value.map(ele => ele.key).join(",") : value ? value.value : "";
|
||||||
transform: (value) => {
|
},
|
||||||
return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.value : '';
|
},
|
||||||
},
|
dept: {
|
||||||
},
|
key: "dept",
|
||||||
'dept': {
|
transform: value => {
|
||||||
key: 'dept',
|
console.log(value);
|
||||||
transform: (value) => {
|
return Array.isArray(value) ? value.map(ele => ele.key).join(",") : value ? value.value : "";
|
||||||
console.log(value);
|
},
|
||||||
return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.value : '';
|
},
|
||||||
},
|
city: {
|
||||||
},
|
key: "city",
|
||||||
'city': {
|
transform: value => {
|
||||||
key: 'city',
|
return Array.isArray(value) ? value.map(ele => ele.key).join(",") : value ? value.value : "";
|
||||||
transform: (value) => {
|
},
|
||||||
return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.value : '';
|
},
|
||||||
},
|
unconfirmed: { key: "unconfirmed", transform: value => (value ? 1 : 0) },
|
||||||
},
|
};
|
||||||
'unconfirmed': { key: 'unconfirmed', transform: (value) => value ? 1 : 0 },
|
let dest = {};
|
||||||
};
|
const { dates, ...omittedValue } = values;
|
||||||
let dest = {};
|
dest = { ...omittedValue, ...objectMapper(values, destinationObject) };
|
||||||
const { dates, ...omittedValue } = values;
|
for (const key in dest) {
|
||||||
dest = { ...omittedValue, ...objectMapper(values, destinationObject) };
|
if (Object.prototype.hasOwnProperty.call(dest, key)) {
|
||||||
for (const key in dest) {
|
dest[key] = typeof dest[key] === "string" ? (dest[key] || "").trim() : dest[key];
|
||||||
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]);
|
||||||
// omit empty
|
return dest;
|
||||||
// Object.keys(dest).forEach((key) => (dest[key] == null || dest[key] === '' || dest[key].length === 0) && delete dest[key]);
|
};
|
||||||
return dest;
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setFormValues(readValues);
|
setFormValues(readValues);
|
||||||
const dest = formValuesMapper(readValues);
|
const dest = formValuesMapper(readValues);
|
||||||
setFormValuesToSub(dest);
|
setFormValuesToSub(dest);
|
||||||
|
|
||||||
if (typeof onMounted === 'function') {
|
if (typeof onMounted === "function") {
|
||||||
onMounted(dest)
|
onMounted(dest);
|
||||||
}
|
}
|
||||||
|
|
||||||
return () => {};
|
return () => {};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const onFinish = (values) => {
|
const onFinish = values => {
|
||||||
console.log('Received values of form, origin form value: \n', values);
|
console.log("Received values of form, origin form value: \n", values);
|
||||||
const dest = formValuesMapper(values);
|
const dest = formValuesMapper(values);
|
||||||
console.log('form value send to onSubmit:\n', dest);
|
console.log("form value send to onSubmit:\n", dest);
|
||||||
const str = new URLSearchParams(dest).toString();
|
const str = new URLSearchParams(dest).toString();
|
||||||
setFormValues(values);
|
setFormValues(values);
|
||||||
setFormValuesToSub(dest);
|
setFormValuesToSub(dest);
|
||||||
if (typeof onSubmit === 'function') {
|
if (typeof onSubmit === "function") {
|
||||||
onSubmit(null, dest, values, str);
|
onSubmit(null, dest, values, str);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleReset = () => {
|
const handleReset = () => {
|
||||||
form.setFieldsValue({
|
form.setFieldsValue({
|
||||||
// 'DateType': undefined,
|
// 'DateType': undefined,
|
||||||
});
|
});
|
||||||
if (typeof onReset === 'function') {
|
if (typeof onReset === "function") {
|
||||||
onReset();
|
onReset();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const onValuesChange = (changedValues, allValues) => {
|
const onValuesChange = (changedValues, allValues) => {
|
||||||
|
const dest = formValuesMapper(allValues);
|
||||||
|
setFormValues(allValues);
|
||||||
|
setFormValuesToSub(dest);
|
||||||
|
// console.log('form onValuesChange', Object.keys(changedValues), args);
|
||||||
|
};
|
||||||
|
|
||||||
const dest = formValuesMapper(allValues);
|
const onFinishFailed = ({ values, errorFields }) => {
|
||||||
setFormValues(allValues);
|
console.log("form validate failed", "\nform values:", values, "\nerrorFields", errorFields);
|
||||||
setFormValuesToSub(dest);
|
};
|
||||||
// console.log('form onValuesChange', Object.keys(changedValues), args);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onFinishFailed = ({ values, errorFields }) => {
|
return (
|
||||||
console.log('form validate failed', '\nform values:', values, '\nerrorFields', errorFields);
|
<>
|
||||||
};
|
<Form form={form} layout={"horizontal"} name={formName || "advanced_search"} className="orders-search-form" onFinish={onFinish} onValuesChange={onValuesChange} onFinishFailed={onFinishFailed}>
|
||||||
|
{/* <EditableContext.Provider value={form}> */}
|
||||||
return (
|
<Row gutter={16}>
|
||||||
<>
|
{getFields({ sort, initialValue: readValues, hides, shows, fieldProps, fieldComProps, form, presets, t })}
|
||||||
<Form form={form} layout={'horizontal'} name={formName || 'advanced_search'} className='orders-search-form' onFinish={onFinish} onValuesChange={onValuesChange} onFinishFailed={onFinishFailed} >
|
{/* 'textAlign': 'right' */}
|
||||||
{/* <EditableContext.Provider value={form}> */}
|
<Col flex="1 0 90px" className="flex justify-normal items-start">
|
||||||
<Row gutter={16}>
|
<Space align="center">
|
||||||
{getFields({ sort, initialValue: readValues, hides, shows, fieldProps, fieldComProps, form, presets, t })}
|
<Button size={"middle"} type="primary" htmlType="submit" loading={loading}>
|
||||||
{/* 'textAlign': 'right' */}
|
{confirmText || t("Search")}
|
||||||
<Col flex='1 0 90px' className='flex justify-normal items-start' >
|
</Button>
|
||||||
<Space align='center'>
|
{/* <Button size="small" onClick={onReset}>
|
||||||
<Button size={'middle'} type='primary' htmlType='submit' loading={loading}>
|
|
||||||
{confirmText || t('Search')}
|
|
||||||
</Button>
|
|
||||||
{/* <Button size="small" onClick={onReset}>
|
|
||||||
重置
|
重置
|
||||||
</Button> */}
|
</Button> */}
|
||||||
</Space>
|
</Space>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
{/* </EditableContext.Provider> */}
|
{/* </EditableContext.Provider> */}
|
||||||
</Form>
|
</Form>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
function getFields(props) {
|
function getFields(props) {
|
||||||
const { fieldProps, fieldComProps, form, presets, t } = props;
|
const { fieldProps, fieldComProps, form, presets, t } = props;
|
||||||
const bigCol = 4 * 2;
|
const bigCol = 4 * 2;
|
||||||
const midCol = 6;
|
const midCol = 6;
|
||||||
const layoutProps = {
|
const layoutProps = {
|
||||||
// gutter: { xs: 8, sm: 8, lg: 16 },
|
// gutter: { xs: 8, sm: 8, lg: 16 },
|
||||||
lg: { span: 4 },
|
lg: { span: 4 },
|
||||||
md: { span: 8 },
|
md: { span: 8 },
|
||||||
sm: { span: 12 },
|
sm: { span: 12 },
|
||||||
xs: { span: 24 },
|
xs: { span: 24 },
|
||||||
};
|
};
|
||||||
const item = (name, sort = 0, render, col) => {
|
const item = (name, sort = 0, render, col) => {
|
||||||
const customCol = col || 4;
|
const customCol = col || 4;
|
||||||
const mdCol = customCol * 2;
|
const mdCol = customCol * 2;
|
||||||
return {
|
return {
|
||||||
'key': '',
|
key: "",
|
||||||
sort,
|
sort,
|
||||||
name,
|
name,
|
||||||
render,
|
render,
|
||||||
'hide': false,
|
hide: false,
|
||||||
'col': { lg: { span: customCol }, md: { span: mdCol < 8 ? 10 : mdCol }, flex: mdCol < 8 ? '1 0' : '' },
|
col: { lg: { span: customCol }, md: { span: mdCol < 8 ? 10 : mdCol }, flex: mdCol < 8 ? "1 0" : "" },
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
let baseChildren = [];
|
let baseChildren = [];
|
||||||
baseChildren = [
|
baseChildren = [
|
||||||
item(
|
item(
|
||||||
'keyword',
|
"keyword",
|
||||||
99,
|
99,
|
||||||
<Form.Item name='keyword' {...fieldProps.keyword}>
|
<Form.Item name="keyword" {...fieldProps.keyword}>
|
||||||
<Input allowClear {...fieldComProps.keyword} />
|
<Input allowClear {...fieldComProps.keyword} />
|
||||||
</Form.Item>,
|
</Form.Item>,
|
||||||
fieldProps?.keyword?.col || 6
|
fieldProps?.keyword?.col || 6
|
||||||
),
|
),
|
||||||
item(
|
item(
|
||||||
'referenceNo',
|
"referenceNo",
|
||||||
99,
|
99,
|
||||||
<Form.Item name='referenceNo' label={t('group:RefNo')} {...fieldProps.referenceNo}>
|
<Form.Item name="referenceNo" label={t("group:RefNo")} {...fieldProps.referenceNo}>
|
||||||
<Input placeholder={t('group:RefNo')} allowClear />
|
<Input placeholder={t("group:RefNo")} allowClear />
|
||||||
</Form.Item>,
|
</Form.Item>,
|
||||||
fieldProps?.referenceNo?.col || 6
|
fieldProps?.referenceNo?.col || 6
|
||||||
),
|
),
|
||||||
item(
|
item(
|
||||||
'PNR',
|
"PNR",
|
||||||
99,
|
99,
|
||||||
<Form.Item name='PNR' label='PNR'>
|
<Form.Item name="PNR" label="PNR">
|
||||||
<Input placeholder={t('group:PNR')} allowClear />
|
<Input placeholder={t("group:PNR")} allowClear />
|
||||||
</Form.Item>,
|
</Form.Item>,
|
||||||
fieldProps?.PNR?.col || 4
|
fieldProps?.PNR?.col || 4
|
||||||
),
|
),
|
||||||
item(
|
item(
|
||||||
'invoiceStatus',
|
"invoiceStatus",
|
||||||
99,
|
99,
|
||||||
<Form.Item name={`invoiceStatus`} initialValue={at(props, 'initialValue.invoiceStatus')[0] || { value: '0', label: 'Status' }}>
|
<Form.Item name={`invoiceStatus`} initialValue={at(props, "initialValue.invoiceStatus")[0] || { value: "0", label: t("invoiceStatus.Status") }}>
|
||||||
<Select
|
<Select
|
||||||
labelInValue
|
labelInValue
|
||||||
options={[
|
options={[
|
||||||
{ value: '0', label: 'Status' },
|
{ value: "0", label: t("invoiceStatus.Status") },
|
||||||
{ value: '1', label: 'Not submitted' },
|
{ value: "1", label: t("invoiceStatus.Not_submitted") },
|
||||||
{ value: '2', label: 'Submitted' },
|
{ value: "2", label: t("invoiceStatus.Submitted") },
|
||||||
{ value: '3', label: 'Travel advisor approved' },
|
{ value: "3", label: t("invoiceStatus.Travel_advisor_approved") },
|
||||||
{ value: '4', label: 'Finance Dept arrproved' },
|
{ value: "4", label: t("invoiceStatus.Finance_Dept_arrproved") },
|
||||||
{ value: '5', label: 'Paid' },
|
{ value: "5", label: t("invoiceStatus.Paid") },
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</Form.Item>,
|
</Form.Item>,
|
||||||
fieldProps?.invoiceStatus?.col || 3
|
fieldProps?.invoiceStatus?.col || 3
|
||||||
),
|
),
|
||||||
item(
|
item(
|
||||||
'dates',
|
"dates",
|
||||||
99,
|
99,
|
||||||
<Form.Item name={'dates'} label={t('group:ArrivalDate')} {...fieldProps.dates} initialValue={at(props, 'initialValue.dates')[0]}>
|
<Form.Item name={"dates"} label={t("group:ArrivalDate")} {...fieldProps.dates} initialValue={at(props, "initialValue.dates")[0]}>
|
||||||
{/* <DatePickerCharts isform={true} {...fieldProps.dates} form={form} /> */}
|
{/* <DatePickerCharts isform={true} {...fieldProps.dates} form={form} /> */}
|
||||||
<RangePicker allowClear={true} inputReadOnly={true} presets={presets} placeholder={['From', 'Thru']} {...fieldComProps.dates} />
|
<RangePicker allowClear={true} inputReadOnly={true} presets={presets} placeholder={["From", "Thru"]} {...fieldComProps.dates} />
|
||||||
</Form.Item>,
|
</Form.Item>,
|
||||||
fieldProps?.dates?.col || midCol
|
fieldProps?.dates?.col || midCol
|
||||||
),
|
),
|
||||||
item(
|
item(
|
||||||
'username',
|
"username",
|
||||||
99,
|
99,
|
||||||
<Form.Item name='username' label={t('account:username')} {...fieldProps.username}>
|
<Form.Item name="username" label={t("account:username")} {...fieldProps.username}>
|
||||||
<Input placeholder={t('account:username')} allowClear />
|
<Input placeholder={t("account:username")} allowClear />
|
||||||
</Form.Item>,
|
</Form.Item>,
|
||||||
fieldProps?.username?.col || 4
|
fieldProps?.username?.col || 4
|
||||||
),
|
),
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
item(
|
item(
|
||||||
'year',
|
"year",
|
||||||
99,
|
99,
|
||||||
<Form.Item name={'year'} label={t('products:UseYear')} {...fieldProps.year} initialValue={at(props, 'initialValue.year')[0]}>
|
<Form.Item name={"year"} label={t("products:UseYear")} {...fieldProps.year} initialValue={at(props, "initialValue.year")[0]}>
|
||||||
<DatePicker picker='year' allowClear {...fieldComProps.year} />
|
<DatePicker picker="year" allowClear {...fieldComProps.year} />
|
||||||
</Form.Item>,
|
</Form.Item>,
|
||||||
fieldProps?.year?.col || 3
|
fieldProps?.year?.col || 3
|
||||||
),
|
),
|
||||||
item(
|
item(
|
||||||
'agency',
|
"agency",
|
||||||
99,
|
99,
|
||||||
<Form.Item name='agency' label={t('products:Vendor')} {...fieldProps.agency} initialValue={at(props, 'initialValue.agency')[0]}>
|
<Form.Item name="agency" label={t("products:Vendor")} {...fieldProps.agency} initialValue={at(props, "initialValue.agency")[0]}>
|
||||||
<VendorSelector {...fieldComProps.agency} />
|
<VendorSelector {...fieldComProps.agency} />
|
||||||
</Form.Item>,
|
</Form.Item>,
|
||||||
fieldProps?.agency?.col || 6
|
fieldProps?.agency?.col || 6
|
||||||
),
|
),
|
||||||
item(
|
item(
|
||||||
'audit_state',
|
"audit_state",
|
||||||
99,
|
99,
|
||||||
<Form.Item name={`audit_state`} initialValue={at(props, 'initialValue.audit_state')[0] || { value: '', label: 'Status' }}>
|
<Form.Item name={`audit_state`} initialValue={at(props, "initialValue.audit_state")[0] || { value: "", label: "Status" }}>
|
||||||
<AuditStateSelector {...fieldComProps.audit_state} />
|
<AuditStateSelector {...fieldComProps.audit_state} />
|
||||||
</Form.Item>,
|
</Form.Item>,
|
||||||
fieldProps?.audit_state?.col || 3
|
fieldProps?.audit_state?.col || 3
|
||||||
),
|
),
|
||||||
item(
|
item(
|
||||||
'products_types',
|
"products_types",
|
||||||
99,
|
99,
|
||||||
<Form.Item name={`products_types`} label={t('products:ProductType')} {...fieldProps.products_types} initialValue={at(props, 'initialValue.products_types')[0] || undefined}>
|
<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} />
|
<ProductsTypesSelector maxTagCount={1} {...fieldComProps.products_types} />
|
||||||
</Form.Item>,
|
</Form.Item>,
|
||||||
fieldProps?.products_types?.col || 6
|
fieldProps?.products_types?.col || 6
|
||||||
),
|
),
|
||||||
item(
|
item(
|
||||||
'dept',
|
"dept",
|
||||||
99,
|
99,
|
||||||
<Form.Item name={`dept`} label={t('products:Dept')} {...fieldProps.dept} initialValue={at(props, 'initialValue.dept')[0] || undefined}>
|
<Form.Item name={`dept`} label={t("products:Dept")} {...fieldProps.dept} initialValue={at(props, "initialValue.dept")[0] || undefined}>
|
||||||
<DeptSelector {...fieldComProps.dept} />
|
<DeptSelector {...fieldComProps.dept} />
|
||||||
</Form.Item>,
|
</Form.Item>,
|
||||||
fieldProps?.dept?.col || 6
|
fieldProps?.dept?.col || 6
|
||||||
),
|
),
|
||||||
item(
|
item(
|
||||||
'city',
|
"city",
|
||||||
99,
|
99,
|
||||||
<Form.Item name={`city`} label={t('products:City')} {...fieldProps.city} initialValue={at(props, 'initialValue.city')[0] || undefined}>
|
<Form.Item name={`city`} label={t("products:City")} {...fieldProps.city} initialValue={at(props, "initialValue.city")[0] || undefined}>
|
||||||
<CitySelector {...fieldComProps.city} />
|
<CitySelector {...fieldComProps.city} />
|
||||||
</Form.Item>,
|
</Form.Item>,
|
||||||
fieldProps?.city?.col || 4
|
fieldProps?.city?.col || 4
|
||||||
),
|
),
|
||||||
item(
|
item(
|
||||||
'unconfirmed',
|
"unconfirmed",
|
||||||
99,
|
99,
|
||||||
<Form.Item name={`unconfirmed`} valuePropName='checked' initialValue={at(props, 'initialValue.unconfirmed') || false}>
|
<Form.Item name={`unconfirmed`} valuePropName="checked" initialValue={at(props, "initialValue.unconfirmed") || false}>
|
||||||
<Checkbox>{t('group:unconfirmed')}</Checkbox>
|
<Checkbox>{t("group:unconfirmed")}</Checkbox>
|
||||||
</Form.Item>,
|
</Form.Item>,
|
||||||
fieldProps?.unconfirmed?.col || 2
|
fieldProps?.unconfirmed?.col || 2
|
||||||
),
|
),
|
||||||
];
|
];
|
||||||
baseChildren = baseChildren
|
baseChildren = baseChildren
|
||||||
.map((x) => {
|
.map(x => {
|
||||||
x.hide = false;
|
x.hide = false;
|
||||||
if (props.sort === undefined) {
|
if (props.sort === undefined) {
|
||||||
return x;
|
return x;
|
||||||
}
|
}
|
||||||
const tmpSort = props.sort;
|
const tmpSort = props.sort;
|
||||||
for (const key in tmpSort) {
|
for (const key in tmpSort) {
|
||||||
if (Object.prototype.hasOwnProperty.call(tmpSort, key)) {
|
if (Object.prototype.hasOwnProperty.call(tmpSort, key)) {
|
||||||
if (x.name === key) {
|
if (x.name === key) {
|
||||||
x.sort = tmpSort[key];
|
x.sort = tmpSort[key];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return x;
|
return x;
|
||||||
})
|
})
|
||||||
.map((x) => {
|
.map(x => {
|
||||||
if (props.hides.length === 0 && props.shows.length === 0) {
|
if (props.hides.length === 0 && props.shows.length === 0) {
|
||||||
return x;
|
return x;
|
||||||
}
|
}
|
||||||
if (props.hides.length === 0) {
|
if (props.hides.length === 0) {
|
||||||
x.hide = !props.shows.includes(x.name);
|
x.hide = !props.shows.includes(x.name);
|
||||||
} else if (props.shows.length === 0) {
|
} else if (props.shows.length === 0) {
|
||||||
x.hide = props.hides.includes(x.name);
|
x.hide = props.hides.includes(x.name);
|
||||||
}
|
}
|
||||||
return x;
|
return x;
|
||||||
})
|
})
|
||||||
.filter((x) => !x.hide)
|
.filter(x => !x.hide)
|
||||||
.sort((a, b) => {
|
.sort((a, b) => {
|
||||||
return a.sort < b.sort ? -1 : 1;
|
return a.sort < b.sort ? -1 : 1;
|
||||||
});
|
});
|
||||||
const children = [];
|
const children = [];
|
||||||
const leftStyle = {}; // { borderRight: '1px solid #dedede' };
|
const leftStyle = {}; // { borderRight: '1px solid #dedede' };
|
||||||
for (let i = 0; i < baseChildren.length; i++) {
|
for (let i = 0; i < baseChildren.length; i++) {
|
||||||
let style = {}; // { padding: '0px 2px' };
|
let style = {}; // { padding: '0px 2px' };
|
||||||
style = i % 2 === 0 && baseChildren[i].col === 12 ? { ...style, ...leftStyle } : style;
|
style = i % 2 === 0 && baseChildren[i].col === 12 ? { ...style, ...leftStyle } : style;
|
||||||
style = !baseChildren[i].hide ? { ...style, display: 'block' } : { ...style, display: 'none' };
|
style = !baseChildren[i].hide ? { ...style, display: "block" } : { ...style, display: "none" };
|
||||||
const Item = (
|
const Item = (
|
||||||
<Col key={String(i)} style={style} {...layoutProps} {...baseChildren[i].col}>
|
<Col key={String(i)} style={style} {...layoutProps} {...baseChildren[i].col}>
|
||||||
{baseChildren[i].render}
|
{baseChildren[i].render}
|
||||||
</Col>
|
</Col>
|
||||||
);
|
);
|
||||||
children.push(Item);
|
children.push(Item);
|
||||||
}
|
}
|
||||||
return children;
|
return children;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default SearchForm;
|
export default SearchForm;
|
||||||
|
|||||||
Loading…
Reference in New Issue