feat: 云版相关组件

src/pages/Product/Cloud/Building/index.jsx

@@ -1,13 +1,257 @@
-import React from 'react'
-import { Card } from 'antd'
+/* eslint-disable no-underscore-dangle */
+import React, { useState, useEffect } from 'react'
+import BasicTable from '@/components/Table'
+import { dayjsFormat, refactorSortField } from '@/utils/utils'
+import { queryRoadpricingList } from '@/services/product'
+import { Input, Tag, Tooltip } from 'antd'
+import consts from '@/consts'
+import { useSelector, useDispatch } from 'umi'
+
+export const roadpricingEnum = {
+  CURING: 1, // 养护云
+  BUILDING: 2, // 大司空
+  HIGHWAY: 3, // 公路云
+  GS: 4 // 大司空概算
+}
+
+// const CloudTable = () =>
+//   connect(({ cloud, refresh }) => ({
+//     cloud,
+//     shouldUpdate: refresh.cloud
+//   }))()
+const CloudTable = ({ columnStateType }) => {
+  const dispatch = useDispatch()
+  const { cloud } = useSelector(state => ({
+    cloud: state.cloud,
+    shouldUpdate: state.refresh.cloud
+  }))
+  const roadpricing = cloud.roadpricing[roadpricingEnum[columnStateType]]
+  const [state, setState] = useState({
+    params: {
+      projectPype: roadpricingEnum[columnStateType],
+      search: null
+    }
+  })
+
+  useEffect(() => {
+    if (!roadpricing?.length) {
+      dispatch({
+        type: 'cloud/fetchCompilation',
+        payload: {
+          projectPype: roadpricingEnum[columnStateType]
+        }
+      })
+    }
+  }, [])
+
+  if (!roadpricing?.length) return null
+  const columns = [
+    {
+      title: '通行账号',
+      dataIndex: 'mobile',
+      key: 'mobile',
+      fixed: 'left',
+      search: false,
+      width: 50
+    },
+    {
+      title: '称呼',
+      dataIndex: 'username',
+      key: 'username',
+      ellipsis: true,
+      width: 60,
+      search: false
+    },
+    {
+      title: '真实姓名',
+      dataIndex: 'real_name',
+      key: 'real_name',
+      ellipsis: true,
+      width: 60,
+      search: false
+    },
+    {
+      title: 'QQ',
+      dataIndex: 'qq',
+      key: 'qq',
+      search: false,
+      ellipsis: true,
+      width: 60
+    },
+    {
+      title: '企业名称',
+      dataIndex: 'company',
+      search: false,
+      key: 'company',
+      ellipsis: true,
+      width: 100
+    },
+    {
+      title: 'CLD联系人',
+      dataIndex: 'cld',
+      search: false,
+      key: 'cld',
+      ellipsis: true,
+      width: 50,
+      renderText: cld => cld.clientName
+    },
+    {
+      title: '最近使用',
+      dataIndex: 'latestUsedName',
+      key: 'latestUsedName',
+      valueType: 'select',
+      width: 50,
+      valueEnum: roadpricing.reduce((prev, curr) => {
+        const obj = { ...prev }
+        if (curr._id) {
+          obj[curr._id] = {
+            text: curr.name
+          }
+        }
+        return obj
+      }, {}),
+      renderText: text => text && <Tag color="purple">{text}</Tag>
+    },
+    {
+      title: '截至上一次登录时长',
+      dataIndex: 'all_online_times',
+      key: 'all_online_times',
+      valueType: 'select',
+      width: 70,
+      valueEnum: {
+        1: { text: '超过30分钟' },
+        2: { text: '超过1小时' },
+        3: { text: '超过2小时' },
+        4: { text: '超过3小时' }
+      },
+      renderText: (t, record) => {
+        if (t && record.online_list?.length) {
+          return (
+            <Tooltip
+              title={
+                <div>
+                  <div>最近登陆：</div>
+                  {record.online_list?.map(
+                    (item, i) =>
+                      i < 10 && (
+                        <div className="flex justify-between">
+                          <span>{item.online_times}</span>
+                          <span className="ml-4">{item.dateString}</span>
+                        </div>
+                      )
+                  )}
+                </div>
+              }
+            >
+              {t}
+            </Tooltip>
+          )
+        }
+        return '-'
+      }
+    },
+    {
+      title: '注册时间',
+      dataIndex: 'create_time',
+      key: 'create_time',
+      search: false,
+      sorter: true,
+      ellipsis: true,
+      width: 60,
+      renderText: text => dayjsFormat(text, 'YYYY-MM-DD HH:mm')
+    },
+    {
+      title: '已升级专业版',
+      dataIndex: 'upgrade_list',
+      key: 'upgrade_list',
+      search: false,
+      filters: true,
+      width: 150,
+      valueEnum: roadpricing.reduce((prev, curr) => {
+        const obj = { ...prev }
+        if (curr._id) {
+          obj[curr._id] = {
+            text: curr.name
+          }
+        }
+        return obj
+      }, {}),
+      renderText: text => (
+        <div>
+          {text
+            .filter(item => item.isUpgrade)
+            .map(item => {
+              return (
+                <Tag color="purple" key={item.compilationID}>
+                  {roadpricing?.find(i => i._id === item.compilationID)?.name}
+                </Tag>
+              )
+            })}
+        </div>
+      )
+    }
+  ]
+  const columnsMap = {
+    username: {
+      show: false
+    },
+    qq: {
+      show: false
+    },
+    latestUsedName: {
+      show: false
+    },
+    create_time: {
+      show: false
+    },
+    cld: {
+      show: false
+    },
+    upgrade_list: {
+      show: false
+    }
+  }
+
+  const handleSearch = value => {
+    setState({ ...state, params: { ...state.params, search: value } })
+  }
 
-const Building = () => {
-  // const { modalVisible, onCancel } = props;
   return (
-    <Card bordered={false}>
-      Building
-    </Card>
+    <BasicTable
+      rowKey={record => record._id}
+      columnStateType={columnStateType}
+      params={state.params}
+      request={async (params, sort, filter) => {
+        const sortOrder = refactorSortField(sort)
+        const {
+          code = -1,
+          data: { list = [], total = 0 }
+        } = await queryRoadpricingList({ ...params, ...sortOrder, ...filter })
+        return {
+          data: list,
+          success: code === consts.RET_CODE.SUCCESS,
+          total
+        }
+      }}
+      toolbar={{
+        search: (
+          <Input.Search
+            style={{ width: '300px' }}
+            allowClear={true}
+            placeholder="请输入手机、QQ进行搜索"
+            onSearch={handleSearch}
+          />
+        )
+      }}
+      search={{ filterType: 'light' }}
+      columns={columns}
+      columnsStateMap={columnsMap}
+    />
   )
 }
 
+const Building = () => {
+  return <CloudTable columnStateType="BUILDING" />
+}
+
 export default Building

src/pages/Product/Cloud/Gs/index.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { Card } from 'antd'
+
+const Curing = () => {
+  // const { modalVisible, onCancel } = props;
+  return <Card bordered={false}>Curing</Card>
+}
+
+export default Curing

src/pages/Product/Cloud/Highway/index.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { Card } from 'antd'
+
+const Curing = () => {
+  // const { modalVisible, onCancel } = props;
+  return <Card bordered={false}>Curing</Card>
+}
+
+export default Curing

src/pages/Product/Cloud/model.js

@@ -0,0 +1,37 @@
+import consts from '@/consts'
+import { queryCompilationList } from '@/services/product'
+import { roadpricingEnum } from './Building'
+
+export default {
+  namespace: 'cloud',
+  state: {
+    roadpricing: {
+      [roadpricingEnum.BUILDING]: [],
+      [roadpricingEnum.CURING]: [],
+      [roadpricingEnum.GS]: [],
+      [roadpricingEnum.HIGHWAY]: []
+    }
+  },
+  effects: {
+    *fetchCompilation({ payload }, { call, put }) {
+      const response = yield call(queryCompilationList, payload)
+      if (response && response.code === consts.RET_CODE.SUCCESS) {
+        yield put({
+          type: 'changeRoadpricingState',
+          payload: {
+            key: payload?.projectPype,
+            data: response.data
+          }
+        })
+      }
+    }
+  },
+  reducers: {
+    changeRoadpricingState(state, action) {
+      return {
+        ...state,
+        roadpricing: { ...state.roadpricing, [action.payload.key]: action.payload.data }
+      }
+    }
+  }
+}

src/pages/Product/Lock/model.js

@@ -1,5 +1,5 @@
 import consts from '@/consts'
-import { querySoftwareProducts } from '@/services/lock'
+import { querySoftwareProducts } from '@/services/product'
 
 export default {
   namespace: 'lock',