todo: KPI 设置和查看 分标签页设置各种对象

src/components/search/SearchForm.jsx

@@ -268,13 +268,20 @@ function getFields(props) {
       midCol
     ),
     item(
-      'year',
+      'years',
       99,
       <Form.Item>
         {/* <DatePicker picker="year" placeholder='年份' /> */}
         <YearPickerCharts {...fieldProps.years} />
       </Form.Item>,2
     ),
+    item(
+      'months',
+      99,
+      <Form.Item>
+        <DatePicker picker="month" placeholder='月份' />
+      </Form.Item>,2
+    ),
   ];
   baseChildren = baseChildren
     .map((x) => {

src/libs/ht.js

@@ -88,3 +88,16 @@ export const dataFieldAlias = dataFieldOptions.reduce(
   }),
   {}
 );
+
+/**
+ * KPI对象
+ */
+export const KPIObjects = [
+  { value: 'overview', label: '总额' },
+  { value: 'bu', label: '事业部' },
+  { value: 'dept', label: '小组' },
+  { value: 'du', label: '顾问小组' },
+  { value: 'operator', label: '顾问' },
+  { value: 'destination', label: '目的地' },
+  { value: 'country', label: '国籍' },
+];

src/views/KPI.jsx

@@ -3,17 +3,19 @@ import { observer, useLocalStore } from 'mobx-react';
 import { toJS } from 'mobx';
 // import type { ProColumns } from '@ant-design/pro-components';
 import { EditableProTable, ProCard, ProFormField } from '@ant-design/pro-components';
-import { Button, Table, Switch, Input, Space, Typography } from 'antd';
+import { Button, Table, Switch, Input, Space, Typography, Row, Col, Spin, Radio } from 'antd';
 import { stores_Context } from '../config';
 import { isEmpty, fixTo4Decimals, cloneDeep } from './../utils/commons';
+import SearchForm from './../components/search/SearchForm';
+import { KPIObjects } from './../libs/ht';
 
-const {Text} = Typography;
-const initialPercentKey = new Array(12).fill(1).reduce((r, v, i) => ({ ...r, [`M${i+1}Percent`]: [8, 9].includes(i) ? 10 : 8 }), {});
+const { Text } = Typography;
+const initialPercentKey = new Array(12).fill(1).reduce((r, v, i) => ({ ...r, [`M${i + 1}Percent`]: [8, 9].includes(i) ? 10 : 8 }), {});
 
 export default observer((props) => {
   const [dataSource, setDataSource] = useState([]);
   const { KPIStore, DictDataStore } = useContext(stores_Context);
-  const { settingYear,  } = KPIStore;
+  const { settingYear } = KPIStore;
   const { operator } = DictDataStore;
   useEffect(() => {
     // KPIStore.saveOrUpdate();
@@ -41,7 +43,7 @@ export default observer((props) => {
     };
     return (
       <Space direction={'vertical'}>
-        <Input suffix="%" type={'number'} value={value} onChange={onChange}  />
+        <Input suffix="%" type={'number'} value={value} onChange={onChange} />
         {/* onBlur={handleInputConfirm} onPressEnter={handleInputConfirm} */}
         {/* <span className='ant-typography ant-typography-secondary'>1</span> */}
         <Text type={'secondary'}>{calcV}</Text>
@@ -52,7 +54,10 @@ export default observer((props) => {
     // console.log(toJS(row), mon);
     return (
       <Space direction={'vertical'}>
-        <div>{row.kpiDataMapped?.[`M${mon}`]?.percentVal}<span>%</span></div>
+        <div>
+          {row.kpiDataMapped?.[`M${mon}`]?.percentVal}
+          <span>%</span>
+        </div>
         <div>{row.kpiDataMapped?.[`M${mon}`]?.value}</div>
       </Space>
     );
@@ -64,7 +69,7 @@ export default observer((props) => {
       valueType: 'percent',
       width: '6.5em',
       fieldProps: { min: 0, max: 100, style: { width: '4em' } },
-      renderFormItem: ({ dataIndex, ...item }, { record, isEditable ,...e }, form) => {
+      renderFormItem: ({ dataIndex, ...item }, { record, isEditable, ...e }, form) => {
         return <PercentInput {...{ record }} month={index + 1} />;
       },
       render: (_, row) => RenderInput(row, index + 1),
@@ -78,7 +83,7 @@ export default observer((props) => {
       valueType: 'select',
       // ...valueEnum
       // fieldProps: { labelInValue: true },
-      render: (_, r) => r.object_name
+      render: (_, r) => r.object_name,
     },
     // {
     //   title: 'Name',
@@ -127,8 +132,38 @@ export default observer((props) => {
     setDataSource(argrs[0]);
     // KPIStore.handleTableEdit(argrs[0]);
   };
+  const handleRadioChange = (val) => {
+    console.log(val, 'sss');
+  };
   return (
     <>
+    <Row>
+      <Col span={24}>
+        <Radio.Group options={KPIObjects} optionType="button" onChange={(e) => handleRadioChange(e.target.value)} />
+      </Col>
+    </Row>
+      <Row gutter={16} style={{ margin: '0 0 1em' }}>
+        <Col className="gutter-row" span={24} style={{ margin: '0 0 -16px 0', padding: 0 }}>
+          <SearchForm
+            defaultValue={{
+              'initialValue': {
+                // ...searchPayloadHome,
+              },
+              hides: ['businessUnits', 'months', 'WebCode', 'dates'],
+              // shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'applyDate'],
+              'fieldProps': {
+                DepartmentList: { show_all: true },
+                WebCode: { show_all: true },
+                years: { hide_vs: true },
+              },
+            }}
+            onSubmit={(_err, obj, form, str) => {
+              // TradeStore.setStateSearch(form);
+              // pageRefresh(obj);
+            }}
+          />
+        </Col>
+      </Row>
       <EditableProTable
         key={settingYear}
         headerTitle={settingYear}
@@ -144,7 +179,7 @@ export default observer((props) => {
             ? {
                 newRecordType: 'dataSource',
                 record: () => ({
-                  key: (Date.now().toString(32)), // dataSource.length + 1, // Number(Date.now().toString()),
+                  key: Date.now().toString(32), // dataSource.length + 1, // Number(Date.now().toString()),
                   ...initialRow,
                   object_name: '',
                   value: 0,
@@ -200,7 +235,11 @@ export default observer((props) => {
           },
         }}
       />
-      {(operator?.dataSource || []).map(ele => <div key={ele.value}>{ele.label} <span className="a">{ele.mobile}</span></div>)}
+      {(operator?.dataSource || []).map((ele) => (
+        <div key={ele.value}>
+          {ele.label} <span className="a">{ele.mobile}</span>
+        </div>
+      ))}
     </>
   );
 });