feat: 锁统计

src/pages/Statistic/Software/Usage/index.jsx

@@ -1,8 +1,10 @@
 import { useState, useEffect, useRef, useMemo } from 'react'
 import BasicTable from '@/components/Table'
-import { Select, TreeSelect } from 'antd'
+import { DatePicker, Select, TreeSelect } from 'antd'
 import { querySoftwareUsageList, queryUsageSelectOptions } from '@/services/statistic'
 import consts from '@/consts'
+import { useDebounceFn } from 'ahooks'
+import dayjs from 'dayjs'
 
 const opMap = {
   STAFF: 'staff',
@@ -12,10 +14,11 @@ const opMap = {
 const Usage = () => {
   const tRef = useRef(null)
   const [state, setState] = useState({
-    optionType: 'staff',
+    optionType: opMap.STAFF,
     opIds: [],
     department: null,
-    staff: null
+    staff: null,
+    startMonth: [dayjs(new Date()), dayjs(new Date())]
   })
 
   const queryStaffAndDepartment = async () => {
@@ -27,27 +30,45 @@ const Usage = () => {
         department,
         staff
       })
+      tRef.current?.reload()
     }
   }
 
   const mainParams = useMemo(() => {
-    const p = { optionType: state.optionType }
+    console.log(state.startMonth)
+    const p = { optionType: state.optionType, startMonth: state.startMonth[0].format('YYYY-MM') }
     if (state.optionType === opMap.STAFF) {
       p.staffIds = state.opIds
     } else {
       p.departmentIds = state.opIds
     }
     return p
-  }, [state.optionType, state.opIds])
+  }, [state.optionType, state.opIds, state.startMonth])
+
+  const options = useMemo(() => {
+    if (state.optionType === opMap.STAFF) {
+      return state.staff?.map(item => ({ label: item.username, value: item.id })) || []
+    }
+    return state.department || []
+  }, [state.optionType, state.staff, state.department])
   useEffect(() => {
     queryStaffAndDepartment()
   }, [])
-  // useEffect(() => {
-  //   // 重新发起请求
-  // }, [state.op])
+  const { run: trySetOpIds } = useDebounceFn(
+    ids => {
+      setState({ ...state, opIds: ids })
+    },
+    { wait: 2000 }
+  )
+  useEffect(() => {
+    // 发起请求
+    if (state.opIds?.length) {
+      tRef.current?.reload()
+    }
+  }, [state.opIds])
   const columns = [
     {
-      title: '',
+      title: '名称',
       dataIndex: 'name',
       key: 'name',
       width: 100,
@@ -90,55 +111,70 @@ const Usage = () => {
     }
   ]
 
-  console.log(state.staff)
   return (
-    <div>
-      <div>
-        <Select
-          defaultValue="staff"
-          options={[
-            { label: '部门', value: 'department' },
-            { label: '员工', value: 'staff' }
-          ]}
-          onChange={val => setState({ ...state, optionType: val })}
-        />
-        {(state.department || state.staff) && state.optionType === opMap.STAFF ? (
+    <BasicTable
+      manualRequest
+      search={false}
+      columns={columns}
+      actionRef={tRef}
+      rowkey={record => record.name}
+      toolbar={{
+        title: [
           <Select
-            className="min-w-120px"
-            dropdownMatchSelectWidth
-            options={state.staff.map(item => ({ label: item.username, value: item.id }))}
-            mode="multiple"
-            onChange={value => setState({ ...state, opIds: value })}
+            key="Select"
+            defaultValue="staff"
+            options={[
+              { label: '部门', value: 'department' },
+              { label: '员工', value: 'staff' }
+            ]}
+            onChange={val => setState({ ...state, optionType: val })}
+          />,
+          state.optionType === opMap.STAFF ? (
+            <Select
+              key="StaffSelect"
+              className="min-w-120px"
+              dropdownMatchSelectWidth
+              options={options}
+              mode="multiple"
+              onChange={value => trySetOpIds(value)}
+            />
+          ) : (
+            <TreeSelect
+              key="DepartmentSelect"
+              treeData={options}
+              className="min-w-120px"
+              dropdownMatchSelectWidth
+              multiple
+              onChange={value => trySetOpIds(value)}
+            />
+          )
+        ],
+        actions: [
+          <DatePicker.RangePicker
+            picker="month"
+            key="DatePicker"
+            disabled={[false, true]}
+            value={state.startMonth}
+            onChange={val => setState({ ...state, startMonth: val })}
           />
-        ) : (
-          <TreeSelect
-            treeData={state.department}
-            className="min-w-120px"
-            dropdownMatchSelectWidth
-            multiple
-            onChange={value => setState({ ...state, opIds: value })}
-          />
-        )}
-      </div>
-      <BasicTable
-        manualRequest={true}
-        columns={columns}
-        actionRef={tRef}
-        params={mainParams}
-        request={async (params, sort, filter) => {
-          const {
-            code = -1,
-            data: { list, sum, chart, create }
-          } = await querySoftwareUsageList({ ...params, ...sort, ...filter })
-          setState({ ...state, sum, chart, create })
-          return {
-            data: list,
-            success: code === consts.RET_CODE.SUCCESS,
-            total: list?.length || 0
-          }
-        }}
-      />
-    </div>
+        ]
+      }}
+      params={mainParams}
+      pagination={false}
+      bordered
+      request={async (params, sort, filter) => {
+        const {
+          code = -1,
+          data: { list, sum, chart, create }
+        } = await querySoftwareUsageList({ ...params, ...sort, ...filter })
+        setState({ ...state, sum, chart, create })
+        return {
+          data: list,
+          success: code === consts.RET_CODE.SUCCESS,
+          total: list?.length || 0
+        }
+      }}
+    />
   )
 }