feat: filter form 搜索组件
Lei OT
2 years ago
parent
836d4b9597
commit
08aecb6fdb
@ -0,0 +1,324 @@
|
||||
import { createContext } from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { DATE_FORMAT } from './../../config';
|
||||
import { SearchOutlined, } from "@ant-design/icons";
|
||||
import { Form, Row, Col, Select, Button, Space, DatePicker } from 'antd';
|
||||
import moment from 'moment';
|
||||
// import locale from 'antd/es/date-picker/locale/zh_CN';
|
||||
import BusinessSelect from './BusinessSelect';
|
||||
import GroupSelect from './GroupSelect';
|
||||
import SiteSelect from './SiteSelect';
|
||||
import DateTypeSelect from './DataTypeSelect';
|
||||
import DatePickerCharts from './DatePickerCharts';
|
||||
import YearPickerCharts from './YearPickerCharts';
|
||||
import { objectMapper, at } from './../../utils/commons';
|
||||
import './search.css';
|
||||
|
||||
const EditableContext = createContext();
|
||||
const Option = Select.Option;
|
||||
|
||||
/**
|
||||
* 搜索表单
|
||||
* @property defaultValue
|
||||
* * { initialValue, fieldProps, hides, shows, sort }
|
||||
* @property onSubmit
|
||||
*/
|
||||
export default observer((props) => {
|
||||
const [form] = Form.useForm();
|
||||
const { sort, initialValue, hides, shows, fieldProps } = {
|
||||
sort: '',
|
||||
initialValue: '',
|
||||
fieldProps: '',
|
||||
hides: [],
|
||||
shows: [],
|
||||
...props.defaultValue,
|
||||
};
|
||||
|
||||
const { onSubmit } = props;
|
||||
|
||||
const onFinish = (values) => {
|
||||
console.log('Received values of form, origin form value: ', values);
|
||||
const destinationObject = {
|
||||
'DateType': {
|
||||
key: 'DateType',
|
||||
transform: (value) => value?.key || '',
|
||||
default: '',
|
||||
},
|
||||
'businessUnits': {
|
||||
key: 'businessUnits',
|
||||
transform: (value) => {
|
||||
return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? (!isNaN(parseInt(value.key), 10) ? value.key : '') : '-1';
|
||||
},
|
||||
default: '',
|
||||
},
|
||||
'DepartmentList': {
|
||||
key: 'DepartmentList',
|
||||
transform: (value) => {
|
||||
return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? (!isNaN(parseInt(value.key), 10) ? value.key : '') : '-1';
|
||||
},
|
||||
default: '',
|
||||
},
|
||||
'WebCode': {
|
||||
key: 'WebCode',
|
||||
transform: (value) => {
|
||||
return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? (!isNaN(parseInt(value.key), 10) ? value.key : '') : '-1';
|
||||
},
|
||||
default: '',
|
||||
},
|
||||
'IncludeTickets': {
|
||||
key: 'IncludeTickets',
|
||||
transform: (value) => value?.key || '',
|
||||
default: '',
|
||||
},
|
||||
'applyDate': [
|
||||
{
|
||||
key: 'Date1',
|
||||
transform: (value) => (value === '' || !Array.isArray(value) ? undefined : moment(value[0]).format(DATE_FORMAT)),
|
||||
default: '',
|
||||
},
|
||||
{
|
||||
key: 'Date2',
|
||||
transform: (value) => (value === '' || !Array.isArray(value) ? undefined : moment(value[1]).format(`${DATE_FORMAT} 23:59:59`)),
|
||||
default: '',
|
||||
},
|
||||
],
|
||||
'applyDate2': [
|
||||
{
|
||||
key: 'DateDiff1',
|
||||
transform: (value) => (value === '' || !Array.isArray(value) ? undefined : value[0] ? moment(value[0]).format(DATE_FORMAT) : undefined),
|
||||
default: '',
|
||||
},
|
||||
{
|
||||
key: 'DateDiff2',
|
||||
transform: (value) => (value === '' || !Array.isArray(value) ? undefined : value[1] ? moment(value[1]).format(`${DATE_FORMAT} 23:59:59`) : undefined),
|
||||
default: '',
|
||||
},
|
||||
],
|
||||
'year': [
|
||||
{
|
||||
key: 'Date1',
|
||||
transform: (value) => (value ? moment(value).format(`YYYY-01-01`) : undefined),
|
||||
default: '',
|
||||
},
|
||||
{
|
||||
key: 'Date2',
|
||||
transform: (value) => (value ? moment(value).format(`YYYY-12-31 23:59:59`) : undefined),
|
||||
default: '',
|
||||
},
|
||||
],
|
||||
'yearDiff': [
|
||||
{
|
||||
key: 'DateDiff1',
|
||||
transform: (value) => (value ? moment(value).format(`YYYY-01-01`) : undefined),
|
||||
default: '',
|
||||
},
|
||||
{
|
||||
key: 'DateDiff2',
|
||||
transform: (value) => (value ? moment(value).format(`YYYY-12-31 23:59:59`) : undefined),
|
||||
default: '',
|
||||
},
|
||||
],
|
||||
};
|
||||
let dest = {};
|
||||
const { applyDate, applyDate2, year, yearDiff, ...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]);
|
||||
console.log('form value send to onSubmit:', dest);
|
||||
const str = new URLSearchParams(dest).toString();
|
||||
if (typeof onSubmit === 'function') {
|
||||
onSubmit(null, dest, values, str);
|
||||
}
|
||||
};
|
||||
|
||||
const onReset = () => {
|
||||
form.setFieldsValue({
|
||||
// 'DateType': undefined,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
// layout="inline"
|
||||
<Form form={form} name="advanced_search" className="orders-search-form" onFinish={onFinish}>
|
||||
<EditableContext.Provider value={form}>
|
||||
<Row gutter={10} style={{ background: '#f9fafa', margin: '0px 0px 10px 0px', padding: '16px 8px' }}>
|
||||
{getFields({ sort, initialValue, hides, shows, fieldProps })}
|
||||
{/* 'textAlign': 'right' */}
|
||||
<Col flex="1 0 120px" style={{ padding: '0px 5px', }}>
|
||||
<Space align="center">
|
||||
<Button size={'middle'} type="primary" icon={<SearchOutlined />} htmlType="submit">
|
||||
统计
|
||||
</Button>
|
||||
{/* <Button size="small" onClick={onReset}>
|
||||
重置
|
||||
</Button> */}
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
</EditableContext.Provider>
|
||||
</Form>
|
||||
);
|
||||
});
|
||||
|
||||
function getFields(props) {
|
||||
const { fieldProps } = props;
|
||||
const bigCol = 4 * 2;
|
||||
const midCol = 6;
|
||||
const layoutProps = {
|
||||
gutter: { xs: 8, sm: 8, lg: 16 },
|
||||
lg: { span: 4 },
|
||||
sm: { span: 12 },
|
||||
xs: { span: 24 },
|
||||
};
|
||||
const item = (name, sort = 0, render, col) => {
|
||||
const customCol = col || 4;
|
||||
return {
|
||||
'key': '',
|
||||
sort,
|
||||
name,
|
||||
render,
|
||||
'hide': false,
|
||||
'col': { lg: { span: customCol } },
|
||||
};
|
||||
};
|
||||
let baseChildren = [];
|
||||
baseChildren = [
|
||||
item(
|
||||
'businessUnits',
|
||||
99,
|
||||
<Form.Item name={`businessUnits`} initialValue={at(props, 'initialValue.businessUnits')[0] || undefined}>
|
||||
<BusinessSelect {...fieldProps.businessUnits} />
|
||||
</Form.Item>
|
||||
),
|
||||
item(
|
||||
'DepartmentList',
|
||||
99,
|
||||
<Form.Item name={`DepartmentList`} initialValue={at(props, 'initialValue.DepartmentList')[0] || (fieldProps?.DepartmentList?.show_all ? { key: '0', label: '所有小组' } : undefined)}>
|
||||
<GroupSelect {...fieldProps.DepartmentList} />
|
||||
</Form.Item>
|
||||
),
|
||||
item(
|
||||
'WebCode',
|
||||
99,
|
||||
<Form.Item name={`WebCode`} initialValue={at(props, 'initialValue.WebCode')[0] || (fieldProps?.WebCode?.show_all ? { key: 'ALL', label: '所有来源' } : undefined)}>
|
||||
<SiteSelect {...fieldProps.WebCode} />
|
||||
</Form.Item>
|
||||
),
|
||||
item(
|
||||
'IncludeTickets',
|
||||
99,
|
||||
// value={orders_store.include_tickets} onChange={orders_store.handleChange_include_tickets}
|
||||
<Form.Item name={`IncludeTickets`} initialValue={at(props, 'initialValue.IncludeTickets')[0] || { key: '1', label: '含门票' }}>
|
||||
<Select style={{ width: '100%' }} placeholder="是否含门票" labelInValue>
|
||||
<Option key="1" value="1">
|
||||
含门票
|
||||
</Option>
|
||||
<Option key="0" value="0">
|
||||
不含门票
|
||||
</Option>
|
||||
</Select>
|
||||
</Form.Item>,
|
||||
2
|
||||
),
|
||||
//
|
||||
item(
|
||||
'DateType',
|
||||
99,
|
||||
<Form.Item name={`DateType`} initialValue={at(props, 'initialValue.DateType')[0] || { key: 'applyDate', label: '提交日期' }}>
|
||||
<DateTypeSelect />
|
||||
</Form.Item>,
|
||||
2
|
||||
),
|
||||
// item(
|
||||
// 'applyDate',
|
||||
// 99,
|
||||
// <Form.Item
|
||||
// name={`applyDate`}
|
||||
// initialValue={[moment('2015/01/01', DATE_FORMAT), moment('2015/01/01', DATE_FORMAT)]}
|
||||
// // initialValue={at(props, 'initialValue.applyDate')[0] || undefined}
|
||||
// >
|
||||
// <RangePicker ranges={quickRange} format={DATE_FORMAT} style={{ width: '100%' }} locale={locale} />
|
||||
// </Form.Item>,
|
||||
// midCol
|
||||
// ),
|
||||
// item(
|
||||
// 'applyDate2',
|
||||
// 99,
|
||||
// <Form.Item>
|
||||
// <Form.Item name={`applyDate1`} noStyle>
|
||||
// <RangePicker ranges={quickRange} format={DATE_FORMAT} style={{ width: '100%' }} locale={locale} />
|
||||
// </Form.Item>
|
||||
// <Form.Item name={`applyDate2`} noStyle>
|
||||
// <RangePicker ranges={quickRange} format={DATE_FORMAT} style={{ width: '100%' }} locale={locale} />
|
||||
// </Form.Item>
|
||||
// </Form.Item>,
|
||||
// 12
|
||||
// ),
|
||||
item(
|
||||
'dates',
|
||||
99,
|
||||
<Form.Item>
|
||||
<DatePickerCharts {...fieldProps.dates} />
|
||||
</Form.Item>,
|
||||
midCol
|
||||
),
|
||||
item(
|
||||
'year',
|
||||
99,
|
||||
<Form.Item>
|
||||
{/* <DatePicker picker="year" placeholder='年份' /> */}
|
||||
<YearPickerCharts {...fieldProps.years} />
|
||||
</Form.Item>,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;
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
.ant-form-item{
|
||||
margin: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
{
|
||||
"get|/service-web/QueryData/GetOrderCount/test": {
|
||||
"errcode": "",
|
||||
"errmsg": "",
|
||||
"data": null,
|
||||
"ordercount1|10": [
|
||||
{
|
||||
"id|10-99": 1,
|
||||
"key|10-99": 1,
|
||||
"orderCount|1-100": 5,
|
||||
"WebCode|1": ["ah", "cht"],
|
||||
"groups": "groups1",
|
||||
"ApplyDate": "@date(\"2023-08-dd\")"
|
||||
}
|
||||
],
|
||||
"ordercount2|10": [
|
||||
{
|
||||
"id|100-200": 1,
|
||||
"key|100-200": 1,
|
||||
"orderCount|1-100": 5,
|
||||
"WebCode|1": ["ah", "cht"],
|
||||
"groups": "groups2",
|
||||
"ApplyDate": "@date(\"2023-08-dd\")"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
{
|
||||
"get|/service-web/baseinfo/operator/test": {
|
||||
"errcode": 0,
|
||||
"errmsg": "",
|
||||
"data": null,
|
||||
"loading": null,
|
||||
"result|10": [
|
||||
{
|
||||
"mobile": "13@integer(99999999,999999999)",
|
||||
"op_id": "@integer(10,99)",
|
||||
"cn_name": "@cname",
|
||||
"email": "@email",
|
||||
"en_name": "@first",
|
||||
"code": "@word(2,3)",
|
||||
"key": "@increment"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,54 @@
|
||||
import { makeAutoObservable, runInAction, toJS } from 'mobx';
|
||||
import * as req from '../utils/request';
|
||||
import { isEmpty, sortBy, objectMapper } from '../utils/commons';
|
||||
|
||||
const modelMapper = {
|
||||
'operator': {
|
||||
url: '/service-web/baseinfo/operator/test',
|
||||
mapper: {
|
||||
op_id: [{ key: 'key' }, { key: 'value' }],
|
||||
cn_name: { key: 'label' },
|
||||
en_name: { key: 'label_alias' },
|
||||
},
|
||||
},
|
||||
'vendor': {
|
||||
url: '/service-web/QueryData/GetVEIName',
|
||||
mapper: {
|
||||
CAV_VEI_SN: [{ key: 'key' }, { key: 'value' }],
|
||||
VEI2_CompanyBN: { key: 'label' },
|
||||
},
|
||||
},
|
||||
'creditcardbilltype': {
|
||||
url: '/service-web/QueryData/GetCreditCardBillType',
|
||||
mapper: {
|
||||
cb_billtype: [{ key: 'key' }, { key: 'value' }, { key: 'label' }],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
class DictData {
|
||||
constructor(appStore) {
|
||||
this.appStore = appStore;
|
||||
makeAutoObservable(this);
|
||||
}
|
||||
|
||||
async fetchDictData(model = '') {
|
||||
const mkey = model.toLowerCase();
|
||||
this[mkey] = { loading: true, dataSource: [] };
|
||||
const json = await req.fetchJSON(modelMapper[mkey].url);
|
||||
if (json.errcode === 0) {
|
||||
runInAction(() => {
|
||||
this[mkey].loading = false;
|
||||
this[mkey].dataSource = objectMapper(json.result, modelMapper[mkey].mapper);
|
||||
console.log({ loading: false, ...json }, model, 'DictData', toJS(this[mkey]));
|
||||
});
|
||||
}
|
||||
return this[mkey];
|
||||
}
|
||||
|
||||
data = {};
|
||||
operator = { loading: false, dataSource: [] };
|
||||
vendor = { loading: false, dataSource: [] };
|
||||
creditcardbilltype = { loading: false, dataSource: [] };
|
||||
}
|
||||
export default DictData;
|
||||
Loading…
Reference in New Issue