perf: 信用卡账单: 搜索组件

src/components/search/Input.jsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import { Select } from 'antd';
-import querystring from 'querystring';
-// import * as oMapper from 'object-mapper';
 import { fetchJSON } from './../../utils/request';
 import { observer } from 'mobx-react';
 import { isEmpty, merge, objectMapper } from './../../utils/commons';
@@ -19,7 +17,6 @@ function curl(opts, callback) {
   currentValue = opts.value;
 
   function fake() {
-    // console.log(currentValue, opts.value);
     if (currentValue === opts.value && opts.value === '空') {
       const _p = [{ 'key': '0', 'label': '空' }];
       return callback(_p);
@@ -29,11 +26,12 @@ function curl(opts, callback) {
     //   code: 'utf-8',
     //   q: opts.value,
     // }).toString();
+    const resultkey = opts.resultkey || 'result';
 
     fetchJSON(`${opts.url}`, param)
       .then(d => {
         if (currentValue === opts.value) {
-          const result = objectMapper(d.result, opts.map) || [];
+          const result = objectMapper(d[resultkey], opts.map) || [];
           callback(result);
         }
       });
@@ -65,7 +63,7 @@ class SearchInput extends React.Component {
     if (this.props.autoGet === true) {
       const { map, resultkey, dependenciesFun } = this.props;
       const param = typeof dependenciesFun === 'function' ? dependenciesFun() : {};
-      const mapKey = Object.keys(map).reduce((r, v) => ({ ...r, [v]: { key: map[v] } }), {});
+      const mapKey = Object.keys(map).reduce((r, v) => ({ ...r, [v]: typeof map[v] === 'string' ? { key: map[v] } : (map[v] || []).map(vi => ({ key: vi})) }), {});
       curl({ value: '', url: this.props.url || '', map: mapKey, resultkey, param }, (data) =>
         this.setState({ data, autoData: data }, () => (typeof this.props.onSearchAfter === 'function' ? this.props.onSearchAfter(data, this.state.value) : ''))
       );
@@ -90,7 +88,9 @@ class SearchInput extends React.Component {
     }
     const { map, resultkey, dependenciesFun } = this.props;
     const param = typeof dependenciesFun === 'function' ? dependenciesFun() : {};
-    const mapKey = Object.keys(map).reduce((r, v) => ({ ...r, [v]: { key: map[v] } }), {});
+    // const mapKey = Object.keys(map).reduce((r, v) => ({ ...r, [v]: { key: map[v] } }), {});
+    const mapKey = Object.keys(map).reduce((r, v) => ({ ...r, [v]: typeof map[v] === 'string' ? { key: map[v] } : (map[v] || []).map(vi => ({ key: vi})) }), {});
+
     if (value || !isEmpty(param)) {
       curl({ value, url: this.props.url || '', map: mapKey, resultkey, param }, (data) =>
         this.setState({ data }, () => (typeof this.props.onSearchAfter === 'function' ? this.props.onSearchAfter(data, this.state.value) : ''))

src/components/search/SearchForm.jsx

@@ -62,7 +62,7 @@ export default observer((props) => {
       'businessUnits': {
         key: 'businessUnits',
         transform: (value) => {
-          return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? (!isNaN(parseInt(value.key), 10) ? value.key : '') : '';
+          return isEmpty(value) ? 'ALL': Array.isArray(value) ? value.map((ele) => ele.value).join(',') : value ? value.value : '';
         },
         default: '',
       },
@@ -148,6 +148,11 @@ export default observer((props) => {
         transform: (value) => value?.key || '',
         default: '',
       },
+      'billtype': {
+        key: 'billtype',
+        transform: (value) => isEmpty(value) ? 'ALL' :  value?.key || '',
+        default: '',
+      },
     };
     let dest = {};
     const { applyDate, applyDate2, year, yearDiff, dates, months, ...omittedValue } = values;
@@ -242,6 +247,20 @@ function getFields(props) {
   };
   let baseChildren = [];
   baseChildren = [
+    item(
+      'billtype',
+      99,
+      <Form.Item name={'billtype'} >
+        <SearchInput
+          autoGet
+          url="/service-web/QueryData/GetCreditCardBillType"
+          map={{ 'cb_billtype': ['key', 'label'] }}
+          // map={{ 'cb_billtype': 'key' }}
+          resultkey={'billtype'}
+          placeholder="所有账单类型"
+        />
+      </Form.Item>
+    ),
     item(
       'HTBusinessUnits',
       99,

src/stores/FinancialStore.js

@@ -85,11 +85,17 @@ class FinancialStore {
         this.credit_card_data.groups = value;
     };
 
+    setSearchValues(obj, values) {
+      this.credit_card_data.business_units = obj.businessUnits;
+      // this.credit_card_data.groups = obj.businessUnits;
+      this.bill_type_data.bill_types = obj.billtype;
+    }
+
     // 请求信用卡账单
     get_credit_card_bills() {
         const date_picker_store = this.rootStore.date_picker_store;
         let url = '/service-web/QueryData/GetCreditCardBills';
-        url += `?business_unit=${this.credit_card_data.business_units.toString()}&groups=${this.credit_card_data.groups.toString()}&billtype=${this.bill_type_data.bill_types.toString()}`;
+        url += `?business_unit=${this.credit_card_data.business_units}&groups=${this.credit_card_data.groups.toString()}&billtype=${this.bill_type_data.bill_types}`;
         url += '&billdate1=' + date_picker_store.start_date.format(config.DATE_FORMAT) + '&billdate2=' + date_picker_store.end_date.format(config.DATE_FORMAT) + '%2023:59:59';
         if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) {
             url += '&billdateOld1=' + date_picker_store.start_date_cp.format(config.DATE_FORMAT) + '&billdateOld2=' + date_picker_store.end_date_cp.format(config.DATE_FORMAT) + '%2023:59:59';
@@ -110,7 +116,7 @@ class FinancialStore {
     get_credit_card_bills_by_type() {
         const date_picker_store = this.rootStore.date_picker_store;
         let url = '/service-web/QueryData/GetCreditCardBillsByType';
-        url += `?business_unit=${this.credit_card_data.business_units.toString()}&groups=${this.credit_card_data.groups.toString()}`;
+        url += `?business_unit=${this.credit_card_data.business_units}&groups=${this.credit_card_data.groups.toString()}`;
         url += '&billdate1=' + date_picker_store.start_date.format(config.DATE_FORMAT) + '&billdate2=' + date_picker_store.end_date.format(config.DATE_FORMAT) + '%2023:59:59';
         if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) {
             url += '&billdateOld1=' + date_picker_store.start_date_cp.format(config.DATE_FORMAT) + '&billdateOld2=' + date_picker_store.end_date_cp.format(config.DATE_FORMAT) + '%2023:59:59';

src/views/Credit_card_bill.jsx

@@ -9,6 +9,7 @@ import BillTypeSelect from "../components/search/BillTypeSelect";
 import GroupSelect from "../components/search/GroupSelect";
 import Business_unit from "../components/search/BusinessSelect";
 import DatePickerCharts from "../components/search/DatePickerCharts";
+import SearchForm from './../components/search/SearchForm';
 import { Line, Pie } from "@ant-design/charts";
 import * as comm from "../utils/commons";
 import * as config from "../config";
@@ -266,36 +267,32 @@ const Credit_card_bill = () => {
 
 	return (
 		<div>
-			<Row>
+    <Row gutter={16} style={{ margin: '-16px -8px', position: 'relative', top: 0, zIndex: 10 }}>
+      <Col className="gutter-row" span={24}>
+        <SearchForm
+          defaultValue={{
+            initialValue: {
+              ...date_picker_store.formValues,
+              // ...sale_store.searchValues,
+            },
+            shows: ['billtype', 'businessUnits', 'dates', ],
+            fieldProps: {
+              DepartmentList: { show_all: false, mode: 'multiple' },
+              WebCode: { show_all: false, mode: 'multiple'  },
+              years: { hide_vs: true },
+            },
+          }}
+          onSubmit={(_err, obj, form, str) => {
+            financial_store.setSearchValues(obj, form);
+            financial_store.get_credit_card_bills();
+            financial_store.get_credit_card_bills_by_type();
+            financial_store.set_bill_filtered(false);
+          }}
+        />
+      </Col>
 				<Col span={11}>
 					<h2>信用卡账单</h2>
 				</Col>
-				<Col span={10}>
-					<Row>
-						<Col span={12}>
-							<BillTypeSelect store={bill_type_data} show_all={true} />
-							<Business_unit store={credit_card_data} show_all={true} />
-						</Col>
-						<Col span={12}>
-							<DatePickerCharts />
-						</Col>
-					</Row>
-				</Col>
-				<Col span={1}></Col>
-				<Col span={2}>
-					<Button
-						type="primary"
-						icon={<SearchOutlined />}
-						size="large"
-						loading={credit_card_data.loading}
-						onClick={() => {
-							financial_store.get_credit_card_bills();
-							financial_store.get_credit_card_bills_by_type();
-							financial_store.set_bill_filtered(false);
-						}}>
-						统计
-					</Button>
-				</Col>
 			</Row>
 
 			<Row>
@@ -315,7 +312,7 @@ const Credit_card_bill = () => {
 								</span>
 							}
 							key="summarized_data">
-							<Table id="table_by_type" dataSource={credit_card_bills_by_type.dataSource} columns={credit_card_bills_by_type.columns} pagination={false} size="small" />
+							<Table id="table_by_type" dataSource={credit_card_bills_by_type.dataSource} columns={credit_card_bills_by_type.columns} pagination={false} size="small" scroll={{x: 600}} />
 							<Divider orientation="right">
 								<a
 									onClick={() => {
@@ -334,7 +331,7 @@ const Credit_card_bill = () => {
 								</span>
 							}
 							key="detail_data">
-							<Table id="table_by_detail" dataSource={credit_card_bills.dataSource} columns={credit_card_bills.columns} pagination={false} onChange={credit_card_data.set_table_handleChange} size="small" />
+							<Table id="table_by_detail" dataSource={credit_card_bills.dataSource} columns={credit_card_bills.columns} pagination={false} onChange={credit_card_data.set_table_handleChange} size="small" scroll={{x: 800}} />
 							<Divider orientation="right">
 								<a
 									onClick={() => {