feat: 云版详情报错1

src/pages/Product/Cloud/components/RoadpricingDetail/Form.jsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import { Row, Col } from 'antd'
+import EditableForm from '@/components/EditableForm'
+
+const RoadpricingForm = props => {
+  const { updateKey } = props
+  const columns = [
+    {
+      dataIndex: 'mobile',
+      label: '大司空用户',
+      span: 24
+    },
+    {
+      dataIndex: 'mobile',
+      label: '手机',
+      span: 24
+    },
+    {
+      dataIndex: 'email',
+      label: '邮箱',
+      span: 24
+    },
+    {
+      dataIndex: 'username',
+      label: '称呼',
+      span: 24
+    },
+    {
+      dataIndex: 'qq',
+      label: 'QQ',
+      span: 24
+    },
+    {
+      dataIndex: 'real_name',
+      label: '真实姓名',
+      span: 24
+    },
+    {
+      dataIndex: 'create_time',
+      label: '注册云版',
+      span: 24
+    },
+    {
+      dataIndex: 'company',
+      label: '企业名称',
+      span: 24
+    },
+    {
+      dataIndex: 'province',
+      label: '企业地区',
+      span: 24
+    },
+    {
+      dataIndex: 'latest_usedName',
+      label: '最近使用',
+      span: 24
+    },
+    {
+      dataIndex: 'online_times',
+      label: '累计时长',
+      span: 24
+    }
+  ]
+  return (
+    <div>
+      <Row>
+        <Col span={8}>
+          <h2 className="text-gray-500">大司空用户</h2>
+        </Col>
+        <Col span={16} className="text-right text-gray-500">
+          aa 创建于 bb
+        </Col>
+        <Col span={22}>
+          <h2 className="text-2xl pb-4">fssf</h2>
+        </Col>
+        <Col span={2} />
+      </Row>
+      <EditableForm
+        // dataSource={customer}
+        columns={columns}
+        tartgetUrl="/cloud/update"
+        type={updateKey}
+      />
+    </div>
+  )
+}
+
+export default RoadpricingForm

src/pages/Product/Cloud/components/RoadpricingDetail/LowerList.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const RoadpricingLowerList = () => {
+  return (
+    <div>
+      <b>ffsdf</b>
+    </div>
+  )
+}
+
+export default RoadpricingLowerList

src/pages/Product/Cloud/components/RoadpricingDetail/TabList.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const RoadpricingTabList = () => {
+  return (
+    <div>
+      <b>asfasfasf</b>
+    </div>
+  )
+}
+
+export default RoadpricingTabList

src/pages/Product/Cloud/components/RoadpricingDetail/index.jsx

@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from 'react'
+import { Row, Col } from 'antd'
+import { connect } from 'umi'
+import consts from '@/consts'
+import RoadpricingForm from './Form'
+import RoadpricingLowerList from './LowerList'
+import RoadpricingTabList from './TabList'
+import { apiRoadpricingDetail } from '@/services/product'
+import roadpricingEnum from '../RoadpricingDetail'
+
+const RoadpricingDetail = props => {
+  const { dispatch, updateKey = 'cloud', refresh, visible, dataId = '' } = props
+  const shouldUpdate = refresh[updateKey] || false
+  const columnStateType = pathname?.match(/\/([^/]*)$/)[1]?.toUpperCase()
+  const [state, setState] = useState({
+    loading: false,
+    cloudUser: {},
+    projectPype: roadpricingEnum[columnStateType]
+  })
+  console.log(state.projectPype)
+  const initData = async (id = dataId) => {
+    setState({ ...state, loading: true, projectPype })
+    const {
+      data: { cloudUser = {} },
+      code = -1
+    } = await apiRoadpricingDetail(id)
+    if (code === consts.RET_CODE.SUCCESS) {
+      if (shouldUpdate) {
+        dispatch({
+          type: 'refresh/commitAction',
+          payload: updateKey
+        })
+      }
+      setState({ ...state, cloudUser, loading: false, projectPype })
+    }
+  }
+  useEffect(() => {
+    shouldUpdate && initData(dataId)
+  }, [shouldUpdate])
+  useEffect(() => {
+    visible && initData(dataId)
+  }, [visible])
+  return (
+    <div className="sheet-box">
+      <Row>
+        <Col
+          sm={{ span: 24 }}
+          md={{ span: 24 }}
+          lg={{ span: 9 }}
+          xl={{ span: 9 }}
+          className="sheet-box-left">
+          <div className="sheet-left-panel pr-4">
+            <RoadpricingForm updateKey={updateKey} />
+          </div>
+        </Col>
+        <Col
+          sm={{ span: 24 }}
+          md={{ span: 24 }}
+          lg={{ span: 15 }}
+          xl={{ span: 15 }}
+          flex={{ flexDirection: 'column' }}
+          className="sheet-box-right">
+          <RoadpricingTabList />
+          <RoadpricingLowerList />
+        </Col>
+      </Row>
+    </div>
+  )
+}
+
+export default connect(({ refresh, single }) => ({
+  refresh,
+  visible: single.drawer.visible
+}))(RoadpricingDetail)

src/pages/Product/Cloud/index.jsx

@@ -5,7 +5,9 @@ import { dayjsFormat, refactorSortField } from '@/utils/utils'
 import { queryRoadpricingList } from '@/services/product'
 import { Input, Tag, Tooltip } from 'antd'
 import consts from '@/consts'
+import { useModal } from '@/components/Modal'
 import { useLocation, useSelector, useDispatch } from 'umi'
+import RoadpricingDetail from '@/pages/Product/Cloud/components/RoadpricingDetail'
 
 export const roadpricingEnum = {
   CURING: 1, // 养护云
@@ -18,6 +20,7 @@ const Cloud = () => {
   const { pathname = '' } = useLocation()
   const columnStateType = pathname?.match(/\/([^/]*)$/)[1]?.toUpperCase()
   const dispatch = useDispatch()
+  const { toggleDrawer, setDrawerProps } = useModal()
   const { cloud } = useSelector(state => ({
     cloud: state.cloud,
     shouldUpdate: state.refresh.cloud
@@ -51,13 +54,34 @@ const Cloud = () => {
     }
   }, [])
 
+  // 展示DrawerClient
+  const showDrawerRoadpricing = id => {
+    setDrawerProps({
+      closable: true,
+      onClose: () => toggleDrawer(),
+      bodyStyle: {
+        height: '100vh',
+        overflowY: 'hidden'
+      },
+      children: <RoadpricingDetail dataId={id} />
+    })
+    toggleDrawer()
+  }
+
   const columns = [
     {
       title: '通行账号',
       dataIndex: 'mobile',
       key: 'mobile',
       fixed: 'left',
-      width: 80
+      width: 80,
+      render: (text, record) => (
+        <span
+          onClick={() => showDrawerRoadpricing(record.ssoId)}
+          className="text-primary cursor-pointer hover:text-[#967bbd]">
+          {text}
+        </span>
+      )
     },
     {
       title: '称呼',
@@ -161,8 +185,7 @@ const Cloud = () => {
                       )
                   )}
                 </div>
-              }
-            >
+              }>
               {record.all_online_times}
             </Tooltip>
           )

src/services/product.js

@@ -75,3 +75,8 @@ export async function queryProvinceList(params) {
     params
   })
 }
+
+/** 获得云版详情 */
+export async function apiRoadpricingDetail(params) {
+  return request('/roadpricing/detail', { params })
+}