feat: 统计下软件锁、发票收款入账汇总筛选增加数据持久化

src/pages/Statistic/Product/InvoiceAggregate/index.jsx

@@ -1,7 +1,6 @@
 import BasicTable from '@/components/Table'
 import consts from '@/consts'
 import { querySoftInvoiceAggregateList } from '@/services/statistic'
-import { isMobile } from '@/utils/is'
 import { Column } from '@ant-design/charts'
 import { Table, DatePicker } from 'antd'
 import dayjs from 'dayjs'
@@ -74,14 +73,12 @@ const InvoiceAggregate = () => {
   }
   return (
     <div className="flex flex-col">
-      {!isMobile() ? (
-        <div className="flex flex-row justify-between mb-4">
-          <div className="card-transition bg-white w-full">
-            {/* {pieData.pieLeft ? <Pie {...leftConfig} /> : null} */}
-            {state.list?.length ? <Column {...columnConfig} /> : null}
-          </div>
+      <div className="flex flex-row justify-between mb-4">
+        <div className="card-transition bg-white w-full">
+          {/* {pieData.pieLeft ? <Pie {...leftConfig} /> : null} */}
+          {state.list?.length ? <Column {...columnConfig} /> : null}
         </div>
-      ) : null}
+      </div>
 
       <BasicTable
         manualRequest
@@ -90,7 +87,7 @@ const InvoiceAggregate = () => {
         actionRef={tRef}
         rowkey="id"
         toolbar={{
-          title: <OptionSelect onChange={optionChange} />,
+          title: <OptionSelect onChange={optionChange} type="InvoiceAggregate" />,
           actions: [
             <DatePicker.RangePicker
               picker="month"

src/pages/Statistic/Product/SoftwareUsage/index.jsx

@@ -5,7 +5,6 @@ import { querySoftwareUsageList } from '@/services/statistic'
 import consts from '@/consts'
 import dayjs from 'dayjs'
 import { Pie } from '@ant-design/charts'
-import { isMobile } from '@/utils/is'
 import OptionSelect from '../../components/OptionSelect'
 
 const { Text } = Typography
@@ -38,7 +37,7 @@ const Usage = () => {
     const pieRight = []
     rightKeys.forEach(item => {
       const v = state.sum[item]
-      if (item !== 'receiveCount') {
+      if (!['receiveCount', 'createCount'].includes(item)) {
         pieRight.push({ label: colLabelValToZH[item], value: v })
       }
     })
@@ -111,7 +110,7 @@ const Usage = () => {
     angleField: 'value',
     colorField: 'label',
     radius: 0.9,
-    color: ['#40B7E6', '#79CE67', '#FBD743', '#FB7A53'],
+    color: ['#40B7E6', '#79CE67', '#FBD743'],
     interactions: [{ type: 'element-active' }]
   }
 
@@ -120,25 +119,23 @@ const Usage = () => {
 
   return (
     <div className="flex flex-col">
-      {!isMobile() ? (
-        <div className="flex flex-row justify-between mb-4">
-          <div className="card-transition  w-1/2 bg-white mr-2">
-            {pieData.pieLeft ? <Pie {...leftConfig} /> : null}
-          </div>
-          <div className="card-transition w-1/2 bg-white ml-2">
-            {pieData.pieRight ? <Pie {...rightConfig} /> : null}
-          </div>
+      <div className="flex flex-row justify-between mb-4">
+        <div className="card-transition  w-1/2 bg-white mr-2">
+          {pieData.pieLeft ? <Pie {...leftConfig} /> : null}
         </div>
-      ) : null}
+        <div className="card-transition w-1/2 bg-white ml-2">
+          {pieData.pieRight ? <Pie {...rightConfig} /> : null}
+        </div>
+      </div>
 
       <BasicTable
-        manualRequest
+        // manualRequest
         search={false}
         columns={columns}
         actionRef={tRef}
         rowkey="id"
         toolbar={{
-          title: <OptionSelect onChange={optionChange} />,
+          title: <OptionSelect onChange={optionChange} type="SoftwareUsage" />,
           actions: [
             <DatePicker.RangePicker
               picker="month"

src/pages/Statistic/components/OptionSelect.tsx

@@ -1,21 +1,27 @@
 import consts from '@/consts'
 import { queryUsageSelectOptions } from '@/services/statistic'
+import { getAuthCache, setAuthCache } from '@/utils/auth'
+import { STATISTIC_OPTION_KEY } from '@/utils/cache/cacheEnum'
 import { useDebounceFn } from 'ahooks'
 import { Select, TreeSelect } from 'antd'
 import React, { useState, useEffect } from 'react'
 
-enum opMap {
+export enum statisticOptionMap {
   STAFF = 'staff',
   DEPARTMENT = 'department'
 }
 
 type OptionSelectProps = {
+  type: string
   onChange: (type: 'staff' | 'department', value) => void
 }
-const OptionSelect: React.FC<OptionSelectProps> = ({ onChange }) => {
+const OptionSelect: React.FC<OptionSelectProps> = ({ type, onChange }) => {
+  const authOptions = getAuthCache(STATISTIC_OPTION_KEY)
+  const { optionType, dataIds } = authOptions?.[type] || {}
+
   const [state, setState] = useState({
-    optionType: opMap.STAFF,
-    opIds: [],
+    optionType: optionType || statisticOptionMap.STAFF,
+    dataIds: dataIds || [],
     department: [],
     staff: []
   })
@@ -33,12 +39,19 @@ const OptionSelect: React.FC<OptionSelectProps> = ({ onChange }) => {
       }
     }
     queryStaffAndDepartment()
+    if (optionType && dataIds?.length) {
+      onChange(optionType, dataIds)
+    }
   }, [])
 
   const { run: trySetOpIds } = useDebounceFn(
     ids => {
-      setState({ ...state, opIds: ids })
+      setState({ ...state, dataIds: ids })
       onChange(state.optionType, ids)
+      setAuthCache(STATISTIC_OPTION_KEY, {
+        ...authOptions,
+        [type]: { optionType: state.optionType, dataIds: ids }
+      })
     },
     { wait: 500 }
   )
@@ -46,19 +59,19 @@ const OptionSelect: React.FC<OptionSelectProps> = ({ onChange }) => {
     <div>
       <span className="mr-2">
         <Select
-          defaultValue="staff"
+          defaultValue={state.optionType}
           options={[
             { label: '按部门', value: 'department' },
             { label: '按员工', value: 'staff' }
           ]}
-          onChange={val => setState({ ...state, optionType: val, opIds: [] })}
+          onChange={val => setState({ ...state, optionType: val, dataIds: [] })}
         />
       </span>
-      {state.optionType === opMap.STAFF ? (
+      {state.optionType === statisticOptionMap.STAFF ? (
         <TreeSelect
-          value={state.opIds}
+          value={state.dataIds}
           className="min-w-180px"
-          defaultOpen
+          // defaultOpen
           treeCheckable
           showCheckedStrategy="SHOW_PARENT"
           dropdownMatchSelectWidth
@@ -67,9 +80,9 @@ const OptionSelect: React.FC<OptionSelectProps> = ({ onChange }) => {
         />
       ) : (
         <TreeSelect
-          value={state.opIds}
+          value={state.dataIds}
           className="min-w-180px"
-          defaultOpen
+          // defaultOpen
           treeData={state.department}
           dropdownMatchSelectWidth
           multiple

src/utils/cache/cacheEnum.ts

@@ -28,6 +28,9 @@ export const BUSINESS_GROUP_KEY = 'BUSINESS_GROUP_KEY'
 // default project layout setting
 export const LAYOUT_COLLAPSED_KEY = 'LAYOUT_COLLAPSED_KEY'
 
+// 统计栏option的key
+export const STATISTIC_OPTION_KEY = 'STATISTIC_OPTION_KEY'
+
 // permission select component defualtValue key
 export enum MainMenuKeyEnum {
   /** @name 客户 */

src/utils/cache/persistent.ts

@@ -12,10 +12,13 @@ import {
   MAIN_MENU_KEY,
   TABLE_COLUMNS_MAP,
   WORKBENCH_CYCLICAL_KEY,
-  BUSINESS_GROUP_KEY
+  BUSINESS_GROUP_KEY,
+  STATISTIC_OPTION_KEY
 } from './cacheEnum'
 import { DEFAULT_CACHE_TIME } from '@/settings/encryptionSetting'
 import { pick, omit } from 'lodash-es'
+import { statisticOptionMap } from '@/pages/Statistic/components/OptionSelect'
+import { Dayjs } from 'dayjs'
 
 interface BasicStore {
   [TOKEN_KEY]: string | null | undefined
@@ -24,6 +27,10 @@ interface BasicStore {
   [TABLE_COLUMNS_MAP]: { [key in MAIN_MENU_KEY]: Record<string, ColumnsState> } | null | underfined
   [WORKBENCH_CYCLICAL_KEY]: string
   [BUSINESS_GROUP_KEY]: string
+  [STATISTIC_OPTION_KEY]: Record<
+    string,
+    { optionType: statisticOptionMap; dataIds: string[]; startMonth: [Dayjs, Dayjs] }
+  >
 }
 
 type LocalStore = BasicStore