perf: 销售业绩数据: 筛选顾问

src/components/search/Input.jsx

@@ -128,6 +128,8 @@ class SearchInput extends React.Component {
         notFoundContent={null}
         allowClear={true}
         onClear={this.handleClear}
+        maxTagCount={1}
+        maxTagPlaceholder={(omittedValues) => `+${omittedValues.length}`}
       >
         {options}
       </Select>

src/components/search/SearchForm.jsx

@@ -87,7 +87,8 @@ export default observer((props) => {
       },
       'operator': {
         key: 'operator',
-        transform: (value) => value?.key || '',
+        // transform: (value) => value?.key || '',
+        transform: (value) => Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? (!isNaN(parseInt(value.key), 10) ? value.key : '') : '',
         default: '',
       },
       'applyDate': [
@@ -207,11 +208,11 @@ export default observer((props) => {
   };
   const onValuesChange = (...args) => {
     const [changedValues, allValues] = args;
-    // console.log('form onValuesChange', Object.keys(changedValues), args);
 
     const dest = formValuesMapper(allValues);
     searchFormStore.setFormValues(allValues);
     searchFormStore.setFormValuesToSub(dest);
+    // console.log('form onValuesChange', Object.keys(changedValues), args);
   };
 
   return (
@@ -265,20 +266,14 @@ function getFields(props) {
     item(
       'agency',
       99,
-      <Form.Item name={'agency'} >
-        <SearchInput
-          autoGet
-          url="/service-web/QueryData/GetVEIName"
-          map={{ 'CAV_VEI_SN': 'key', 'VEI2_CompanyBN': 'label' }}
-          resultkey={'result1'}
-          placeholder="所有地接社"
-        />
+      <Form.Item name={'agency'}>
+        <SearchInput autoGet url="/service-web/QueryData/GetVEIName" map={{ 'CAV_VEI_SN': 'key', 'VEI2_CompanyBN': 'label' }} resultkey={'result1'} placeholder="所有地接社" />
       </Form.Item>
     ),
     item(
       'billtype',
       99,
-      <Form.Item name={'billtype'} >
+      <Form.Item name={'billtype'}>
         <SearchInput
           autoGet
           url="/service-web/QueryData/GetCreditCardBillType"
@@ -344,9 +339,11 @@ function getFields(props) {
       99,
       <Form.Item name={`countryArea`} initialValue={at(props, 'initialValue.countryArea')[0] || (fieldProps?.countryArea?.show_all ? { key: 'all', label: '所有国家' } : undefined)}>
         <Select style={{ width: '100%' }} placeholder="所有国家" labelInValue>
-          {fieldProps?.countryArea?.show_all && <Option key="all" value="">
+          {fieldProps?.countryArea?.show_all && (
+            <Option key="all" value="">
               所有国家
-          </Option>}
+            </Option>
+          )}
           <Option key="china" value="china">
             国内
           </Option>
@@ -362,9 +359,11 @@ function getFields(props) {
       99,
       <Form.Item name={`orderStatus`} initialValue={at(props, 'initialValue.orderStatus')[0] || (fieldProps?.orderStatus?.show_all ? { key: '-1', label: '所有' } : undefined)}>
         <Select style={{ width: '100%' }} placeholder="所有状态" labelInValue>
-          {fieldProps?.orderStatus?.show_all && <Select.Option key="所有" value="-1">
+          {fieldProps?.orderStatus?.show_all && (
+            <Select.Option key="所有" value="-1">
               所有
-          </Select.Option> }
+            </Select.Option>
+          )}
           <Select.Option key="已成行" value="1">
             已成行
           </Select.Option>
@@ -414,12 +413,25 @@ function getFields(props) {
       99,
       <Form.Item name={'operator'} dependencies={['DepartmentList']}>
         <SearchInput
+          {...fieldProps.operator}
           autoGet
           url="/service-Analyse2/GetOperatorInfo"
           map={{ 'op_id': 'key', 'cn_name': 'label' }}
           resultkey={'result'}
           placeholder="输入搜索顾问: 中/英名字"
-          dependenciesFun={() => ({ dept_id: (form.getFieldValue('DepartmentList')?.value || '').replace('ALL', ''), ...(fieldProps?.operator?.param || {}) })}
+          dependenciesFun={() => {
+            let dependenciesValue = '';
+            if (Array.isArray(form.getFieldValue('DepartmentList'))) {
+              dependenciesValue = form
+                .getFieldValue('DepartmentList')
+                .map((e) => e.value)
+                .join(',')
+                .replace('ALL', '');
+            } else {
+              dependenciesValue = (form.getFieldValue('DepartmentList')?.value || '').replace('ALL', '');
+            }
+            return { dept_id: dependenciesValue, ...(fieldProps?.operator?.param || {}) };
+          }}
         />
       </Form.Item>
     ),

src/stores/SaleStore.js

@@ -37,6 +37,7 @@ class SaleStore {
     WebCode: { key: 'All', label: '所有来源'},
     IncludeTickets: { key: '1', label: '含门票'},
     DepartmentList: [groupsMappedByCode.GH],
+    operator: '',
   };
 
   setSearchValues(obj, values) {
@@ -44,6 +45,7 @@ class SaleStore {
     this.webcode = obj.WebCode;
     this.include_tickets = obj.IncludeTickets;
     this.date_type = obj.DateType;
+    this.searchValues.operator = obj.operator;
   }
 
   salesTrade = {
@@ -165,7 +167,10 @@ class SaleStore {
         // eslint-disable-next-line no-constant-condition
         if (false) {
         } else {
+          const result1 = comm.isEmpty(this.searchValues.operator) ? json.result1 : json.result1.filter(row => (this.searchValues.operator.split(',')).includes(String(row.OPI_SN)));
+          const result2 = comm.isEmpty(this.searchValues.operator) ? json.result2 : json.result2.filter(row => (this.searchValues.operator.split(',')).includes(String(row.OPI_SN)));
           if (this.active_tab_key === 'All') {
+            const allOPI = result1.map(rr => ({ text: rr.OPI_Name, value: rr.OPI_SN })).sort((a, b) => a.text.localeCompare(b.text));
             result.columns = [
               {
                 title: '账户名',
@@ -176,25 +181,28 @@ class SaleStore {
                   },
                 ],
                 sorter: (a, b) => (a?.OPI_Name || '').localeCompare(b.OPI_Name, 'zh-CN'),
+                filters: allOPI,
+                onFilter: (value, record) => record.OPI_SN === value,
+                filterSearch: true,
               },
               {
                 title: '毛利',
-                children: [{ title: json.result1.reduce((a, b) => a + comm.price_to_number(b.COLI_ML), 0), dataIndex: 'COLI_ML' }],
+                children: [{ title: result1.reduce((a, b) => a + comm.price_to_number(b.COLI_ML), 0), dataIndex: 'COLI_ML' }],
                 sorter: (a, b) => comm.price_to_number(b.COLI_ML) - comm.price_to_number(a.COLI_ML),
               },
               {
                 title: '成行率',
-                children: [{ title: comm.formatPercent(json.result1.reduce((a, b) => a + b.COLI_CJCount, 0) / json.result1.reduce((a, b) => a + b.COLI_OrderCount, 0)), dataIndex: 'COLI_CJrate' }],
+                children: [{ title: comm.formatPercent(result1.reduce((a, b) => a + b.COLI_CJCount, 0) / result1.reduce((a, b) => a + b.COLI_OrderCount, 0)), dataIndex: 'COLI_CJrate' }],
                 sorter: (a, b) => parseInt(b.COLI_CJrate) - parseInt(a.COLI_CJrate),
               },
               {
                 title: '成团数',
-                children: [{ title: json.result1.reduce((a, b) => a + b.COLI_CJCount, 0), dataIndex: 'COLI_CJCount' }],
+                children: [{ title: result1.reduce((a, b) => a + b.COLI_CJCount, 0), dataIndex: 'COLI_CJCount' }],
                 sorter: (a, b) => b.COLI_CJCount - a.COLI_CJCount,
               },
               {
                 title: '订单数',
-                children: [{ title: json.result1.reduce((a, b) => a + b.COLI_OrderCount, 0), dataIndex: 'COLI_OrderCount' }],
+                children: [{ title: result1.reduce((a, b) => a + b.COLI_OrderCount, 0), dataIndex: 'COLI_OrderCount' }],
                 sorter: (a, b) => b.COLI_OrderCount - a.COLI_OrderCount,
               },
               {
@@ -214,7 +222,7 @@ class SaleStore {
               },
 
             ];
-            result.dataSource = json.result1;
+            result.dataSource = result1;
           }  else if (this.active_tab_key === 'ResponseRateByWL') {
             result.columns = [
               {
@@ -229,46 +237,48 @@ class SaleStore {
               },
               {
                 title: '报价次数',
-                children: [{ title: json.result1.reduce((a, b) => a + b.PriceTime, 0), dataIndex: 'PriceTime' }],
+                children: [{ title: result1.reduce((a, b) => a + b.PriceTime, 0), dataIndex: 'PriceTime' }],
                 sorter: (a, b) => b.PriceTime - a.PriceTime,
               },
               {
                 title: '邮件发送次数',
-                children: [{ title: json.result1.reduce((a, b) => a + b.mailSendTime, 0), dataIndex: 'mailSendTime' }],
+                children: [{ title: result1.reduce((a, b) => a + b.mailSendTime, 0), dataIndex: 'mailSendTime' }],
                 sorter: (a, b) => b.mailSendTime - a.mailSendTime,
               },
               {
                 title: 'WhatsApp客人会话次数',
-                children: [{ title: json.result1.reduce((a, b) => a + b.WhatsAppGuestChatCount, 0), dataIndex: 'WhatsAppGuestChatCount' }],
+                children: [{ title: result1.reduce((a, b) => a + b.WhatsAppGuestChatCount, 0), dataIndex: 'WhatsAppGuestChatCount' }],
                 sorter: (a, b) => b.WhatsAppGuestChatCount - a.WhatsAppGuestChatCount,
               },
               {
                 title: 'WhatsApp外联会话次数',
-                children: [{ title: json.result1.reduce((a, b) => a + b.WhatsAppWLChatCount, 0), dataIndex: 'WhatsAppWLChatCount' }],
+                children: [{ title: result1.reduce((a, b) => a + b.WhatsAppWLChatCount, 0), dataIndex: 'WhatsAppWLChatCount' }],
                 sorter: (a, b) => b.WhatsAppWLChatCount - a.WhatsAppWLChatCount,
               },
               {
                 title: 'WhatsApp新增客户数',
-                children: [{ title: json.result1.reduce((a, b) => a + b.WhatsAppNewGuestCount, 0), dataIndex: 'WhatsAppNewGuestCount' }],
+                children: [{ title: result1.reduce((a, b) => a + b.WhatsAppNewGuestCount, 0), dataIndex: 'WhatsAppNewGuestCount' }],
                 sorter: (a, b) => b.WhatsAppNewGuestCount - a.WhatsAppNewGuestCount,
               },
               {
                 title: '微信客人会话次数',
-                children: [{ title: json.result1.reduce((a, b) => a + b.WXGuestChatCount, 0), dataIndex: 'WXGuestChatCount' }],
+                children: [{ title: result1.reduce((a, b) => a + b.WXGuestChatCount, 0), dataIndex: 'WXGuestChatCount' }],
                 sorter: (a, b) => b.WXGuestChatCount - a.WXGuestChatCount,
               },
               {
                 title: '微信外联会话次数',
-                children: [{ title: json.result1.reduce((a, b) => a + b.WXWLChatCount, 0), dataIndex: 'WXWLChatCount' }],
+                children: [{ title: result1.reduce((a, b) => a + b.WXWLChatCount, 0), dataIndex: 'WXWLChatCount' }],
                 sorter: (a, b) => b.WXWLChatCount - a.WXWLChatCount,
               },
               {
                 title: '微信新增客户数',
-                children: [{ title: json.result1.reduce((a, b) => a + b.WXNewGuestCount, 0), dataIndex: 'WXNewGuestCount' }],
+                children: [{ title: result1.reduce((a, b) => a + b.WXNewGuestCount, 0), dataIndex: 'WXNewGuestCount' }],
                 sorter: (a, b) => b.WXNewGuestCount - a.WXNewGuestCount,
               },
             ];
-            result.dataSource = json.result1.sort(comm.sortBy('PriceTime')).reverse();
+            result.dataSource = result1
+                  .sort(comm.sortBy('PriceTime'))
+                  .reverse();
           } else if (this.active_tab_key === 'ResponseRateWhatsApp') {
             result.columns = [
               {
@@ -345,11 +355,13 @@ class SaleStore {
                 sorter: (a, b) => b.COLI_ConfirmTimeAVG - a.COLI_ConfirmTimeAVG,
               },
             ];
-            result.dataSource = json.result1.sort(comm.sortBy('COLI_ConfirmTimeAVG')).reverse();
+            result.dataSource = result1
+                  .sort(comm.sortBy('COLI_ConfirmTimeAVG'))
+                  .reverse();
           } else {
             const diffDateFlagYes = !comm.isEmpty(date_moment.start_date_cp);
             // if (this.active_tab_key == "Country")
-            const mergeDiffData = calcDiff({result1: json.result1, result2: json.result2});
+            const mergeDiffData = calcDiff({result1, result2});
             // 获取类型的项目，去掉重复，作为列名
             const type_name_arr = [];
             mergeDiffData.map((item) => {
@@ -475,6 +487,7 @@ class SaleStore {
             {
               title: '',
               dataIndex: 'OPI_Name',
+              sorter: (a, b) => (a?.OPI_Name || '').localeCompare(b.OPI_Name, 'zh-CN'),
             },
             {
               title: '毛利',

src/views/Sale.jsx

@@ -219,6 +219,7 @@ const Sale = () => {
               DepartmentList: { show_all: false, mode: 'multiple' },
               WebCode: { show_all: false, mode: 'multiple'  },
               years: { hide_vs: true },
+              operator: { mode: 'multiple'},
             },
           }}
           onSubmit={(_err, obj, form, str) => {