Merge branch 'master' of http://192.168.1.41:3000/outaozhen/cldV2react

config/config.js

@@ -32,9 +32,9 @@ export default defineConfig({
     // default true, when it is true, will use `navigator.language` overwrite default
     baseNavigator: false
   },
-  dynamicImport: {
-    loading: '@/components/PageLoading/index'
-  },
+  // dynamicImport: {
+  //   loading: '@/components/PageLoading/index'
+  // },
   targets: {
     ie: 11
   },

src/components/EditableForm/src/editableForm.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Row } from 'antd'
 import EditableFormItem from './editableFormItem'
+import { isNullOrUnDef } from '@/utils/is'
 
 const EditableForm = ({ dataSource, columns, type, tartgetUrl }) => {
   // console.log(store)
@@ -8,17 +9,17 @@ const EditableForm = ({ dataSource, columns, type, tartgetUrl }) => {
     const newItem = { ...item }
 
     // 控制col span
-    if (!item.span) {
+    if (isNullOrUnDef(item.span)) {
       newItem.span = 24
     }
 
     // 默认编辑
-    if (!item.editable) {
+    if (isNullOrUnDef(item.editable)) {
       newItem.editable = true
     }
 
     // 默认组件
-    if (!item.editCellType) {
+    if (isNullOrUnDef(item.editCellType)) {
       newItem.editCellType = 'input'
     }
 
@@ -33,11 +34,10 @@ const EditableForm = ({ dataSource, columns, type, tartgetUrl }) => {
             key={column.dataIndex}
             label={column.label}
             dataSource={dataSource}
+            editable={column.editable}
+            disable={column.disable}
             dataIndex={column.dataIndex}
-            // record={dataSource[column.dataIndex]}
             span={column.span}
-            // dataId={dataSource.id}
-            editable={column.editable}
             editCellType={column.editCellType}
             customCell={column.customCell}
             requestUrl={tartgetUrl}

src/components/EditableForm/src/editableFormItem.jsx

@@ -3,12 +3,12 @@ import { editFormApi } from '@/services/common'
 import { Input, Row, Col } from 'antd'
 import React, { useState, useEffect, useRef } from 'react'
 import LazyCascader from '../../LazyCascader'
-import { connect } from 'dva'
-import './index.less'
+import { useDispatch } from 'umi'
 import useOptions from './useOptions'
 import ChangeSelect from './components/ChangeSelect'
 import ChangeTreeSelect from './components/ChangeTreeSelect'
 import ChangeDatePicker from './components/ChangeDatePicker'
+import './index.less'
 
 const extraValArr = ['cascader', 'select', 'treeSelect'] // 需要设置ExtraVal的类型
 const EditableFormItem = ({
@@ -17,11 +17,12 @@ const EditableFormItem = ({
   dataSource,
   dataIndex,
   span,
+  editable,
   editCellType,
   requestUrl,
-  customCell,
-  dispatch
+  customCell
 }) => {
+  const dispatch = useDispatch()
   const record = dataSource[dataIndex]
   const dataId = dataSource.id
   const options = useOptions(dataIndex)
@@ -105,6 +106,7 @@ const EditableFormItem = ({
   }, [dataId, record])
 
   const toggleEdit = () => {
+    if (!editable) return
     setEditing(!editing)
   }
 
@@ -198,7 +200,9 @@ const EditableFormItem = ({
     }
 
     cell = (
-      <div className="editable-cell-value-wrap" onClick={toggleEdit}>
+      <div
+        className={['editable-cell-value-wrap', !editable ? 'disable' : ''].join(' ')}
+        onClick={toggleEdit}>
         {content}
       </div>
     )
@@ -216,4 +220,4 @@ const EditableFormItem = ({
   )
 }
 
-export default connect()(EditableFormItem)
+export default EditableFormItem

src/components/EditableForm/src/index.less

@@ -4,8 +4,10 @@
   background: #f7f7f7;
   border: 1px solid #f7f7f7;
   cursor: pointer;
+  &.disable {
+    cursor: no-drop;
+  }
 }
-
 .editable-cell-value-wrap:hover {
   padding: 4px 12px;
   border: 1px solid #d9d9d9;

src/global.less

@@ -111,6 +111,10 @@ input:-webkit-autofill:active {
 .ant-drawer-body {
   padding: 0;
 }
+
+.ant-skeleton-element {
+  width: 100% !important;
+}
 // 弹窗左右结构
 .sheet-box {
   overflow: hidden;

src/pages/Customer/Client/index.jsx

@@ -20,6 +20,7 @@ import { useTableScroll } from '@/hooks/useAutoTable'
 import { apiAddClient, queryClient } from '@/services/customer'
 import { apiBatchLink } from '@/services/customer'
 import styles from './index.less'
+import { refactorSortField } from '@/utils/utils'
 
 const Client = props => {
   const { toggleDrawer, setDrawerProps } = useModal()
@@ -46,7 +47,7 @@ const Client = props => {
     const personOptions = []
     const teamOptions = []
     personTags.forEach(item => {
-      personOptions.push({ label: item.name, value: item.id })
+      // personOptions.push({ label: item.name, value: item.id })
       personTagMap[item.id] = {
         text: (
           <>
@@ -61,7 +62,7 @@ const Client = props => {
     })
 
     teamTags.forEach(item => {
-      teamOptions.push({ label: item.name, value: item.id })
+      // teamOptions.push({ label: item.name, value: item.id })
       teamTagMap[item.id] = {
         text: (
           <>
@@ -240,14 +241,15 @@ const Client = props => {
       key: 'tagIds',
       width: 60,
       filters: true,
+      search: false,
       // onFilter: true,
       valueEnum: tag.personTagMap,
-      valueType: 'select',
-      fieldProps: {
-        mode: 'multiple',
-        options: tag.personOptions,
-        showArrow: true
-      },
+      // valueType: 'select',
+      // fieldProps: {
+      //   mode: 'multiple',
+      //   options: tag.personOptions,
+      //   showArrow: true
+      // },
       render: (_, record) => (
         <div className="flex items-center flex-wrap">
           {record.tagIds.map(item => (
@@ -276,13 +278,14 @@ const Client = props => {
       key: 'tagCooperationIds',
       width: 60,
       filters: true,
+      search: false,
       valueEnum: tag.teamTagMap,
-      valueType: 'select',
-      fieldProps: {
-        mode: 'multiple',
-        options: tag.teamOptions,
-        showArrow: true
-      },
+      // valueType: 'select',
+      // fieldProps: {
+      //   mode: 'multiple',
+      //   options: tag.teamOptions,
+      //   showArrow: true
+      // },
       render: (_, record) => (
         <div className="flex items-center flex-wrap">
           {record.tagCooperationIds.map(item => (
@@ -525,10 +528,11 @@ const Client = props => {
         rowKey={record => record.id}
         columns={columns}
         request={async (params, sort, filter) => {
+          const srotOrder = refactorSortField(sort)
           const {
             code = -1,
             data: { client = [], total = 0 }
-          } = await queryClient({ ...params, ...sort, ...filter })
+          } = await queryClient({ ...params, ...srotOrder, ...filter })
           setState({ ...state, orderIds: client.map(item => item.id) })
           return {
             data: client,

src/pages/Customer/Company/index.jsx

@@ -15,6 +15,7 @@ import { TagTypeEnum, TagDataTypeEnum, LabelModeType } from './components/Person
 import { Add, Down, Check } from '@icon-park/react'
 import { apiBatchLink } from '@/services/customer'
 import styles from './index.less'
+import { refactorSortField } from '@/utils/utils'
 
 const Company = props => {
   const {
@@ -43,12 +44,12 @@ const Company = props => {
     const personOptions = []
     const teamOptions = []
     personTags.forEach(item => {
-      personOptions.push({ label: item.name, value: item.id })
+      // personOptions.push({ label: item.name, value: item.id })
       personTagMap[item.id] = {
         text: (
           <>
             <span
-              className="inline-block w-12px h-12px rounded-1\/2 mr-3px"
+              className="inline-block w-12px h-12px rounded-1/2 mr-3px"
               style={{ backgroundColor: personTagColorMap[item.id] }}
             />
             <span>{item.name}</span>
@@ -57,7 +58,7 @@ const Company = props => {
       }
     })
     teamTags.forEach(item => {
-      teamOptions.push({ label: item.name, value: item.id })
+      // teamOptions.push({ label: item.name, value: item.id })
       teamTagMap[item.id] = {
         text: (
           <>
@@ -80,10 +81,6 @@ const Company = props => {
     visible: false,
     orderIds: []
   })
-  const [addCompany, setAddCompany] = useState({
-    visible: false,
-    loading: false
-  })
 
   // 重置到默认值，包括表单
   const initData = () => {
@@ -96,15 +93,12 @@ const Company = props => {
   }
 
   const handleAddCompany = async values => {
-    setAddCompany({ ...addCompany, loading: true })
     const params = formatValues(values)
     const { code = -1 } = await apiAddCompany(params)
     if (code === consts.RET_CODE.SUCCESS) {
       message.success('新增成功')
+      initData()
     }
-    // 请求完了
-    setAddCompany({ ...addCompany, loading: false, visible: false })
-    initData()
   }
 
   useEffect(() => {
@@ -183,13 +177,14 @@ const Company = props => {
       dataIndex: 'tagIds',
       width: 100,
       filters: true,
+      search: false,
       valueEnum: tag.personTagMap,
-      valueType: 'select',
-      fieldProps: {
-        mode: 'multiple',
-        options: tag.personOptions,
-        showArrow: true
-      },
+      // valueType: 'select',
+      // fieldProps: {
+      //   mode: 'multiple',
+      //   options: tag.personOptions,
+      //   showArrow: true
+      // },
       render: (_, record) => (
         <div className="items-center flex-wrap">
           {record.tagIds.map(item => (
@@ -217,14 +212,15 @@ const Company = props => {
       dataIndex: 'tagCooperationIds',
       key: 'tagCooperationIds',
       width: 80,
+      search: false,
       filters: true,
       valueEnum: tag.teamTagMap,
-      valueType: 'select',
-      fieldProps: {
-        mode: 'multiple',
-        options: tag.teamOptions,
-        showArrow: true
-      },
+      // valueType: 'select',
+      // fieldProps: {
+      //   mode: 'multiple',
+      //   options: tag.teamOptions,
+      //   showArrow: true
+      // },
       render: (_, record) => (
         <div className="flex items-center flex-wrap">
           {record.tagCooperationIds.map(item => (
@@ -448,8 +444,9 @@ const Company = props => {
         actionRef={tRef}
         params={state.params}
         request={async (params, sort, filter) => {
+          const srotOrder = refactorSortField(sort)
           const { code = -1, data: { customer = [], total = 0 } = { customer: [], total: 0 } } =
-            await queryCompany({ ...params, ...sort, ...filter })
+            await queryCompany({ ...params, ...srotOrder, ...filter })
           setState({ ...state, orderIds: customer.map(item => item.id) })
           return {
             data: customer,

src/pages/Hr/Employee/components/EmployeeDetail/Form.jsx

@@ -42,6 +42,7 @@ const EmployeeForm = props => {
     {
       dataIndex: 'hiredate',
       label: '入职时间',
+      editable: false,
       span: 12
     },
     {

src/pages/workbench/Dashboard/components/LeaderBoard.jsx

@@ -1,5 +1,5 @@
 import ProTable from '@ant-design/pro-table'
-import { Select } from 'antd'
+import { Select, Card } from 'antd'
 import Iconfont from '@/components/SvgIcon'
 import React, { useState, useMemo } from 'react'
 
@@ -18,7 +18,7 @@ const colorMap = {
   2: 'text-hex-1dc9b7',
   3: 'text-hex-868e96'
 }
-const LeaderBoard = ({ dataList = [] }) => {
+const LeaderBoard = ({ loading = false, dataList = [] }) => {
   const [activeOp, setActiveOp] = useState('customer')
   const columns = useMemo(() => {
     const oColumns = [
@@ -93,20 +93,24 @@ const LeaderBoard = ({ dataList = [] }) => {
   }, [activeOp])
 
   return (
-    <>
-      <div className="px-4 pt-2 pb-0 flex items-center justify-between">
-        <span>排行榜</span>
-        <Select defaultValue="customer" onChange={e => setActiveOp(e)}>
-          <Option value="customer">新增客户</Option>
-          <Option value="customerService">客户服务</Option>
-          <Option value="client">新增联系人</Option>
-          <Option value="clientService">联系人服务</Option>
-          <Option value="business">新增商机</Option>
-          <Option value="businessService">商机服务</Option>
-          {/* <Option value="开票金额">开票金额</Option>
-          <Option value="回款金额">回款金额</Option> */}
-        </Select>
-      </div>
+    <Card
+      loading={loading}
+      bodyStyle={{ padding: loading ? '24px' : 0 }}
+      title={
+        <div className="px-4 pt-2 pb-0 flex items-center justify-between">
+          <span>排行榜</span>
+          <Select defaultValue="customer" onChange={e => setActiveOp(e)}>
+            <Option value="customer">新增客户</Option>
+            <Option value="customerService">客户服务</Option>
+            <Option value="client">新增联系人</Option>
+            <Option value="clientService">联系人服务</Option>
+            <Option value="business">新增商机</Option>
+            <Option value="businessService">商机服务</Option>
+            {/* <Option value="开票金额">开票金额</Option>
+      <Option value="回款金额">回款金额</Option> */}
+          </Select>
+        </div>
+      }>
       <div className="text-center border border-x-0 mt-2 p-2">{opMap[activeOp]}排行榜</div>
       <div className="">
         <ProTable
@@ -120,7 +124,7 @@ const LeaderBoard = ({ dataList = [] }) => {
           pagination={false}
         />
       </div>
-    </>
+    </Card>
   )
 }
 

src/pages/workbench/Dashboard/index.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import ProTable from '@ant-design/pro-table'
 import { connect, useModel } from 'umi'
-import { Row, Col, Divider, Select } from 'antd'
+import { Row, Col, Select, Card, Skeleton } from 'antd'
 import { AddressBook, City, Finance, Comment } from '@icon-park/react'
 import { DualAxes } from '@ant-design/charts'
 import consts from '@/consts'
@@ -14,6 +14,7 @@ import { cyclicalOp } from './consts'
 const Dashboard = ({ dispatch, groupList = [] }) => {
   const { initialState: { permData } = { permData: {} } } = useModel('@@initialState')
   const [state, setState] = useState({
+    loading: true,
     visible: false,
     reminderData: [],
     leaderboard: [],
@@ -50,17 +51,20 @@ const Dashboard = ({ dispatch, groupList = [] }) => {
       }
     } = await queryDashboard(payload)
     if (code === consts.RET_CODE.SUCCESS) {
-      setState({
-        ...state,
-        reminderData,
-        leaderboard,
-        clientChainRatio,
-        customerChainRatio,
-        businessChainRatio,
-        serviceLogChainRatio,
-        aggregation,
-        businessChar
-      })
+      setTimeout(() => {
+        setState({
+          ...state,
+          loading: false,
+          reminderData,
+          leaderboard,
+          clientChainRatio,
+          customerChainRatio,
+          businessChainRatio,
+          serviceLogChainRatio,
+          aggregation,
+          businessChar
+        })
+      }, 1000)
     }
   }
   useEffect(() => {
@@ -201,11 +205,17 @@ const Dashboard = ({ dispatch, groupList = [] }) => {
       <div className="shadow-card">
         <ProTable
           bordered
+          loading={state.loading}
           rowKey={record => record.type + Date.now()}
           columns={columns}
           dataSource={state.reminderData}
           search={false}
           toolBarRender={false}
+          tableRender={(_, dom) => (
+            <Card bodyStyle={{ padding: state.loading ? '24px' : 0 }} loading={state.loading}>
+              {dom}
+            </Card>
+          )}
           pagination={false}
         />
       </div>
@@ -226,128 +236,162 @@ const Dashboard = ({ dispatch, groupList = [] }) => {
         </span>
       </div>
       <div className="mt-4">
-        <div className="p-4 bg-white border rounded-lg shadow-card">
-          <Row gutter={16}>
-            <Col className="gutter-row" span={6}>
-              <div className="p-4 bg-white border rounded-lg">
+        <Row gutter={16}>
+          <Col className="gutter-row" span={6}>
+            <div className="p-4 bg-white border rounded-2px border-hex-f0f0f0">
+              {state.loading ? (
+                <Skeleton active avatar />
+              ) : (
                 <Row>
                   <Col span={6}>
                     <div className="w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
-                      {/* <span className="absolute top-9px left-9px"> */}
                       <City size="26" fill="#fff" />
-                      {/* </span> */}
                     </div>
                   </Col>
-                  <Col span={9}>
-                    <h3 className="text-2xl">{state.customerChainRatio.count}</h3>
-                    <span>新增客户</span>
-                  </Col>
-                  <Col span={9} className="text-right">
-                    <h3 className="text-xl text-green-500">
-                      {state.customerChainRatio.percentage}
-                    </h3>
-                    <span>
-                      {cyclicalOp.find(item => item.value === state.params.cyclical)?.title}
-                    </span>
+                  <Col span={18} flex="wrap">
+                    <div className="flex items-center justify-between ">
+                      <div className="text-2xl">{state.customerChainRatio.count}</div>
+                      <span className="text-xl text-green-500">
+                        {state.customerChainRatio.percentage}
+                      </span>
+                    </div>
+
+                    <div className="flex justify-between items-center">
+                      <div>新增客户</div>
+                      <span>
+                        {cyclicalOp.find(item => item.value === state.params.cyclical)?.title}
+                      </span>
+                    </div>
                   </Col>
                 </Row>
-              </div>
-            </Col>
-            <Col className="gutter-row" span={6}>
-              <div className="p-4 bg-white border rounded-lg shadow-card">
+              )}
+            </div>
+          </Col>
+          <Col className="gutter-row" span={6}>
+            <div className="p-4 bg-white border rounded-2px border-hex-f0f0f0">
+              {state.loading ? (
+                <Skeleton active avatar />
+              ) : (
                 <Row>
                   <Col span={6}>
                     <div className="w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
                       <AddressBook size="26" fill="#fff" />
                     </div>
                   </Col>
-                  <Col span={9}>
-                    <h3 className="text-2xl">{state.clientChainRatio.count}</h3>
-                    <span>新增联系人</span>
-                  </Col>
-                  <Col span={9} className="text-right">
-                    <h3 className="text-xl text-red-500">{state.clientChainRatio.percentage}</h3>
-                    <span>
-                      {cyclicalOp.find(item => item.value === state.params.cyclical)?.title}
-                    </span>
+                  <Col span={18} flex="wrap">
+                    <div className="flex items-center justify-between ">
+                      <div className="text-2xl">{state.clientChainRatio.count}</div>
+                      <span className="text-xl text-green-500">
+                        {state.clientChainRatio.percentage}
+                      </span>
+                    </div>
+                    <div className="flex justify-between items-center">
+                      <div>新增联系人</div>
+                      <span>
+                        {cyclicalOp.find(item => item.value === state.params.cyclical)?.title}
+                      </span>
+                    </div>
                   </Col>
                 </Row>
-              </div>
-            </Col>
-            <Col className="gutter-row" span={6}>
-              <div className="p-4 bg-white border rounded-lg">
+              )}
+            </div>
+          </Col>
+          <Col className="gutter-row" span={6}>
+            <div className="p-4 bg-white border rounded-2px border-hex-f0f0f0">
+              {state.loading ? (
+                <Skeleton active avatar />
+              ) : (
                 <Row>
                   <Col span={6}>
                     <div className="w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
                       <Finance size="26" fill="#fff" />
                     </div>
                   </Col>
-                  <Col span={9}>
-                    <h3 className="text-2xl">{state.businessChainRatio.count}</h3>
-                    <span>新增商机</span>
-                  </Col>
-                  <Col span={9} className="text-right">
-                    <h3 className="text-xl text-green-500">
-                      {state.businessChainRatio.percentage}
-                    </h3>
-                    <span>
-                      {cyclicalOp.find(item => item.value === state.params.cyclical)?.title}
-                    </span>
+                  <Col span={18} flex="wrap">
+                    <div className="flex items-center justify-between ">
+                      <div className="text-2xl">{state.businessChainRatio.count}</div>
+                      <span className="text-xl text-green-500">
+                        {state.businessChainRatio.percentage}
+                      </span>
+                    </div>
+
+                    <div className="flex justify-between items-center">
+                      <div>新增商机</div>
+                      <span>
+                        {cyclicalOp.find(item => item.value === state.params.cyclical)?.title}
+                      </span>
+                    </div>
                   </Col>
                 </Row>
-              </div>
-            </Col>
-            <Col className="gutter-row" span={6}>
-              <div className="p-4 bg-white border rounded-lg">
+              )}
+            </div>
+          </Col>
+          <Col className="gutter-row" span={6}>
+            <div className="p-4 bg-white border rounded-2px border-hex-f0f0f0">
+              {state.loading ? (
+                <Skeleton active avatar />
+              ) : (
                 <Row>
                   <Col span={6}>
                     <div className="w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
                       <Comment size="26" fill="#fff" />
                     </div>
                   </Col>
-                  <Col span={9}>
-                    <h3 className="text-2xl">{state.serviceLogChainRatio.count}</h3>
-                    <span>服务记录</span>
-                  </Col>
-                  <Col span={9} className="text-right">
-                    <h3 className="text-xl text-green-500">
-                      {state.serviceLogChainRatio.percentage}
-                    </h3>
-                    <span>
-                      {cyclicalOp.find(item => item.value === state.params.cyclical)?.title}
-                    </span>
+                  <Col span={18} flex="wrap">
+                    <div className="flex items-center justify-between ">
+                      <div className="text-2xl">{state.serviceLogChainRatio.count}</div>
+                      <span className="text-xl text-green-500">
+                        {state.serviceLogChainRatio.percentage}
+                      </span>
+                    </div>
+
+                    <div className="flex justify-between items-center">
+                      <div>服务记录</div>
+                      <span>
+                        {cyclicalOp.find(item => item.value === state.params.cyclical)?.title}
+                      </span>
+                    </div>
                   </Col>
                 </Row>
-              </div>
-            </Col>
-          </Row>
-        </div>
+              )}
+            </div>
+          </Col>
+        </Row>
       </div>
       <div className="mt-4">
         <Row gutter={16}>
           <Col className="gutter-row" span={16}>
-            <div className="p-4 bg-white border rounded-lg shadow-card">
-              <div className="relative">
-                <span>销售漏斗</span>
-                <div className="absolute right-1 top-0">
-                  {groupList ? (
-                    <Select
-                      defaultValue={groupList[0]?.value}
-                      options={groupList}
-                      onChange={e =>
-                        setState({ ...state, params: { ...state.params, businessGroupId: e } })
-                      }
-                    />
-                  ) : null}
+            <Card
+              loading={state.loading}
+              bodyStyle={{ minHeight: '230px' }}
+              title={
+                <div className="relative">
+                  <span>销售漏斗</span>
+                  <div className="absolute right-1 top-0">
+                    {groupList ? (
+                      <Select
+                        defaultValue={groupList[0]?.value}
+                        options={groupList}
+                        onChange={e =>
+                          setState({ ...state, params: { ...state.params, businessGroupId: e } })
+                        }
+                      />
+                    ) : null}
+                  </div>
                 </div>
-              </div>
-              <Divider />
+              }>
               {char && thread && <DualAxes {...config} />}
-            </div>
+            </Card>
+            {/* <div className="p-4 bg-white border rounded-lg shadow-card"> */}
+            {/* <Divider /> */}
+            {/* </div> */}
           </Col>
           <Col className="gutter-row" span={8}>
-            <div className="bg-white border rounded-lg shadow-card">
-              <h4 className="px-12px py-16px border-b-1">数据汇总</h4>
+            <Card
+              headStyle={{ padding: '0 12px' }}
+              title="数据汇总"
+              bodyStyle={{ padding: state.loading ? '24px' : 0 }}
+              loading={state.loading}>
               <ul>
                 <li className="px-12px py-16px border-b-1">
                   新增客户<b className="px-1">{state.aggregation.customerCount}</b>个，服务
@@ -364,16 +408,16 @@ const Dashboard = ({ dispatch, groupList = [] }) => {
                   条，赢单<b className="px-1">{state.aggregation.businessWinCount}</b>个
                 </li>
               </ul>
-            </div>
+            </Card>
           </Col>
         </Row>
       </div>
       <div className="mt-4">
         <Row gutter={16}>
           <Col className="gutter-row" span={12}>
-            <div className="bg-white border rounded-lg shadow-card">
-              <LeaderBoard dataList={state.leaderboard} />
-            </div>
+            {/* <div className="bg-white border rounded-lg shadow-card"> */}
+            <LeaderBoard dataList={state.leaderboard} loading={state.loading} />
+            {/* </div> */}
           </Col>
         </Row>
       </div>

src/utils/utils.js

@@ -2,7 +2,8 @@ import { parse } from 'querystring'
 import dayjs from 'dayjs'
 /* eslint no-useless-escape:0 import/prefer-default-export:0 */
 
-const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/
+const reg =
+  /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/
 export const isUrl = path => reg.test(path)
 export const isAntDesignPro = () => {
   if (ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION === 'site') {
@@ -28,6 +29,23 @@ export const getPageQuery = () => parse(window.location.href.split('?')[1])
  * @param format - 格式
  */
 export const dayjsFormat = (date, format = 'YYYY-MM-DD HH:mm:ss') => {
-  if (date === "0001-01-01 00:00:00" || !date) return ''
+  if (date === '0001-01-01 00:00:00' || !date) return ''
   return dayjs(date).format(format)
 }
+
+/** 处理表格排序字段 */
+export const refactorSortField = sort => {
+  if (!sort) return
+  // 处理后的排序，格式{ field: 'xxxxx', order: 'desc/asc' }
+  const s = { field: null, order: null }
+  const keys = Object.keys(sort)
+  const orKey = keys[0]
+  if (orKey) {
+    s.field = orKey
+    s.order = sort[orKey].replace('end', '')
+    // eslint-disable-next-line consistent-return
+    return s
+  }
+  // eslint-disable-next-line consistent-return
+  return {}
+}