feat: 财务>文旅局服务人数

src/App.jsx

@@ -39,6 +39,7 @@ import ExchangeRate from './charts/ExchangeRate';
 import KPI from './views/KPI';
 import Distribution from './views/Distribution';
 import Detail from './views/Detail';
+import ServicePersonNum from './views/ServicePersonNum';
 
 const App = () => {
   const { Content, Footer, Sider } = Layout;
@@ -110,6 +111,7 @@ const App = () => {
           label: <NavLink to="/credit_card_bill">信用卡账单</NavLink>,
         },
         { key: 42, label: <NavLink to="/exchange_rate">汇率</NavLink> },
+        { key: 'service_person_num', label: <NavLink to="/service_person_num">服务人数</NavLink> },
       ],
     },
     {
@@ -197,6 +199,7 @@ const App = () => {
               <Route element={<ProtectedRoute auth={['admin', 'director_bu', 'financial']} />}>
                 <Route path="/credit_card_bill" element={<Credit_card_bill />} />
                 <Route path="/exchange_rate" element={<ExchangeRate />} />
+                <Route path="/service_person_num" element={<ServicePersonNum />} />
               </Route>
               <Route element={<ProtectedRoute auth={['admin', 'director_bu']} />}>
                 <Route path="/kpi" element={<KPI />} />

src/mock/2.0/personnum.json

@@ -0,0 +1,27 @@
+{
+  "get|/inbound_person_num/test": {
+    "errcode": 0,
+    "errmsg": "",
+    "data": null,
+    "loading": null,
+    "resultTotal": {
+      "orgz": "@integer(10,99)",
+      "orgzPDays": "@integer(10,99)",
+      "hosts": "@integer(10,99)",
+      "hostsPDays": "@integer(10,99)",
+      "IndividualService": "@integer(10,99)",
+      "groupsKey": "0",
+      "groupsLabel": "总"
+    },
+    "result|10": [
+      {
+        "orgz": "@integer(10,99)",
+        "orgzPDays": "@integer(10,99)",
+        "hosts": "@integer(10,99)",
+        "hostsPDays": "@integer(10,99)",
+        "groupsKey": "@id",
+        "groupsLabel": "@region"
+      }
+    ]
+  }
+}

src/stores/FinancialStore.js

@@ -1,7 +1,7 @@
 import {makeAutoObservable, runInAction} from "mobx";
-import * as dd from 'dingtalk-jsapi';
 import * as config from "../config";
 import * as comm from '../utils/commons';
+import { fetchJSON } from '../utils/request';
 
 
 // 财务管理
@@ -126,6 +126,39 @@ class FinancialStore {
                 console.log('fetch data failed', error);
             });
     }
+
+    /**
+     * 服务人数页面 ----
+     */
+
+    servicePersonNum = { curTab: 'inbound',
+      'inbound': { loading: false, dataSource: [], total: {} },
+      'outbound': { loading: false, dataSource: [], total: {} },
+      'domestic': { loading: false, dataSource: [], total: {} },
+    };
+
+    setCurTab(v) {
+      this.servicePersonNum.curTab = v;
+    }
+
+    /**
+     * 获取服务人数
+     */
+    async getPersonNum(queryData) {
+      this.servicePersonNum[this.servicePersonNum.curTab].loading = true;
+      const json = await fetchJSON('/inbound_person_num/test', queryData);
+      if (json.errcode === 0) {
+        runInAction(() => {
+          this.servicePersonNum[this.servicePersonNum.curTab].loading = false;
+          this.servicePersonNum[this.servicePersonNum.curTab].dataSource = [].concat([json.resultTotal], json.result);
+          this.servicePersonNum[this.servicePersonNum.curTab].total = json.resultTotal;
+        });
+      }
+      return json;
+    }
+    /**
+     * ---- end 服务人数页面
+     */
 }
 
 

src/views/ServicePersonNum.jsx

@@ -0,0 +1,96 @@
+import { useContext } from 'react';
+import { observer } from 'mobx-react';
+import { stores_Context } from '../config';
+import { Spin, Table, Row, Col, Tabs } from 'antd';
+import SearchForm from './../components/search/SearchForm';
+import './kpi.css';
+
+const apartOptions = [
+  { key: 'inbound', value: 'inbound', label: '入境' },
+  { key: 'outbound', value: 'outbound', label: '出境' },
+  { key: 'domestic', value: 'domestic', label: '国内' },
+];
+
+export default observer((props) => {
+  const { financial_store: financialStore, date_picker_store: searchFormStore } = useContext(stores_Context);
+  const { formValues, formValuesToSub } = searchFormStore;
+  const { servicePersonNum } = financialStore;
+  const { curTab } = servicePersonNum;
+
+  const pageRefresh = (queryData = formValuesToSub) => {
+    // console.log(queryData, 'qqqq');
+    financialStore.getPersonNum(queryData);
+  };
+
+  const columns = [
+    { title: '名称', dataIndex: 'groupsLabel' },
+    {
+      title: '人次数',
+      children: [
+        { title: '外联', dataIndex: 'orgz' },
+        { title: '接待', dataIndex: 'hosts' },
+      ],
+    },
+    {
+      title: '人天',
+      children: [
+        { title: '外联', dataIndex: 'orgzPDays' },
+        { title: '接待', dataIndex: 'hostsPDays' },
+      ],
+    },
+  ];
+
+  return (
+    <>
+      <Row gutter={16} style={{ margin: '-16px -8px', position: 'sticky', top: 0, zIndex: 10 }}>
+        <Col className="gutter-row" span={24}>
+          <SearchForm
+            defaultValue={{
+              initialValue: {
+                ...formValues,
+                DateType: { key: 'startDate', value: 'startDate', label: '走团日期' },
+              },
+              shows: ['DateType', 'dates'],
+              fieldProps: {
+                dates: { hide_vs: true },
+              },
+            }}
+            onSubmit={(_err, obj, form, str) => {
+              pageRefresh(obj);
+            }}
+          />
+        </Col>
+      </Row>
+
+      <section>
+        <Tabs
+          activeKey={curTab}
+          onChange={(v) => {
+            financialStore.setCurTab(v);
+            pageRefresh();
+          }}
+          type="card"
+          items={apartOptions.map((ele) => {
+            return {
+              ...ele,
+              children: (
+                <Spin spinning={servicePersonNum[curTab].loading}>
+                  <Table
+                    id="table_to_xlsx_sale"
+                    dataSource={servicePersonNum[curTab].dataSource}
+                    rowKey='groupsKey'
+                    columns={columns}
+                    size="small"
+                    loading={servicePersonNum[curTab].loading}
+                    pagination={false}
+                    scroll={{ x: '100%' }}
+                  />
+                </Spin>
+              ),
+            };
+          })}
+        />
+      </section>
+    </>
+  );
+});