feat: 云版管理用户详情

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

@@ -3,13 +3,14 @@ import { Row, Col } from 'antd'
 import EditableForm from '@/components/EditableForm'
 
 const RoadpricingForm = props => {
-  const { cloudUser, updateKey } = props
+  const { cloudUser, updateKey, projectType } = props
+  const titleEnum = {
+    1: '养护云造价',
+    2: '大司空',
+    3: '公路云计价',
+    4: '大司空概算'
+  }
   const columns = [
-    // {
-    //   dataIndex: 'mobile',
-    //   label: '大司空用户',
-    //   span: 24
-    // },
     {
       dataIndex: 'mobile',
       label: '手机',
@@ -65,13 +66,13 @@ const RoadpricingForm = props => {
     <div>
       <Row>
         <Col span={8}>
-          <h2 className="text-gray-500">大司空用户</h2>
+          <h2 className="text-gray-500">{titleEnum[projectType]}用户</h2>
         </Col>
         <Col span={16} className="text-right text-gray-500">
-          aa 创建于 bb
+          创建于 {cloudUser.create_time}
         </Col>
         <Col span={22}>
-          <h2 className="text-2xl pb-4">fssf</h2>
+          <h2 className="text-2xl pb-4">{cloudUser.mobile}</h2>
         </Col>
         <Col span={2} />
       </Row>

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

@@ -1,9 +1,60 @@
 import React from 'react'
+import { Tabs, List, Row, Col } from 'antd'
+import { dayjsFormat } from '@/utils/utils'
 
-const RoadpricingLowerList = () => {
+const RoadpricingLowerList = props => {
+  const {
+    log: { log = [] },
+    serviceLog
+  } = props
+  const { TabPane } = Tabs
   return (
     <div>
-      <b>ffsdf</b>
+      <div className="pl-4">
+        <Tabs>
+          <TabPane tab="服务记录" key="服务记录">
+            <div className="sheet-panel-record">
+              <Row>
+                <Col span="8">类型/时间</Col>
+                <Col span="16">服务内容</Col>
+              </Row>
+              <List
+                dataSource={serviceLog}
+                split={false}
+                renderItem={item => (
+                  <List.Item>
+                    <Row className="w-full">
+                      <Col span="8">
+                        <a className="mr-1">@{item.staffName}</a>
+                        {item.status}
+                        {/* {servicelogEnum[item.status]} */}
+                        <List.Item.Meta description={dayjsFormat(item.date, 'YYYY-MM-DD')} />
+                      </Col>
+                      <Col span="16" className="whitespace-pre-line">
+                        {item.mark}
+                      </Col>
+                    </Row>
+                  </List.Item>
+                )}
+              />
+            </div>
+          </TabPane>
+          <TabPane tab="日志" key="日志">
+            <div className="sheet-panel-record">
+              <List
+                dataSource={log}
+                split={false}
+                renderItem={item => (
+                  <List.Item>
+                    <a>@{item.operatorName}</a> {item.content}
+                    <List.Item.Meta description={dayjsFormat(item.createTime)} />
+                  </List.Item>
+                )}
+              />
+            </div>
+          </TabPane>
+        </Tabs>
+      </div>
     </div>
   )
 }

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

@@ -1,9 +1,87 @@
-import React from 'react'
+import React, { useRef } from 'react'
+import { Tabs } from 'antd'
+import ProTable from '@ant-design/pro-table'
 
-const RoadpricingTabList = () => {
+const RoadpricingTabList = props => {
+  const {
+    compilationList,
+    cloudUser: { online_list = [] }
+  } = props
+  console.log(compilationList)
+  const { TabPane } = Tabs
+  const tRef = useRef(null)
+  const columns = [
+    {
+      title: '产品',
+      dataIndex: 'name',
+      onFilter: true,
+      width: '17%'
+    },
+    {
+      title: '状态',
+      dataIndex: 'lock',
+      onFilter: true,
+      width: '8%'
+    },
+    {
+      title: '专业版',
+      dataIndex: 'isUpgrade',
+      onFilter: true,
+      width: '8%'
+    },
+    {
+      title: '限期',
+      dataIndex: 'deadline',
+      onFilter: true,
+      width: '10%'
+    }
+  ]
+  const columnOnline = [
+    {
+      title: '日期',
+      dataIndex: 'dateString',
+      onFilter: true,
+      width: '12%'
+    },
+    {
+      title: '时长',
+      dataIndex: 'online_time',
+      onFilter: true,
+      width: '17%'
+    }
+  ]
   return (
     <div>
-      <b>asfasfasf</b>
+      <div className="pl-15px">
+        <Tabs>
+          <TabPane tab="客户" key="客户">
+            <div className="sheet-right-panel" ref={tRef}>
+              <ProTable
+                size="small"
+                columns={columns}
+                search={false}
+                dataSource={compilationList}
+                toolBarRender={false}
+                rowKey={record => record.id}
+                pagination={false}
+              />
+            </div>
+          </TabPane>
+          <TabPane tab="在线时长" key="在线时长">
+            <div className="sheet-right-panel">
+              <ProTable
+                size="small"
+                columns={columnOnline}
+                search={false}
+                toolBarRender={false}
+                rowKey={record => record.id}
+                dataSource={online_list}
+                pagination={false}
+              />
+            </div>
+          </TabPane>
+        </Tabs>
+      </div>
     </div>
   )
 }

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

@@ -9,18 +9,20 @@ import { apiRoadpricingDetail } from '@/services/product'
 
 const Detail = props => {
   const { dispatch, updateKey = 'cloud', refresh, visible, dataId = '', projectType } = props
-  console.log(projectType)
   const shouldUpdate = refresh[updateKey] || false
   const [state, setState] = useState({
     loading: false,
-    cloudUser: {}
+    cloudUser: {},
+    compilationList: {},
+    log: [],
+    serviceLog: []
   })
   const initData = async id => {
     setState({ ...state, loading: true })
     const {
-      data: { cloudUser = {} },
+      data: { cloudUser = {}, compilationList = {}, log = [], serviceLog = [] },
       code = -1
-    } = await apiRoadpricingDetail({ id, projectType })
+    } = await apiRoadpricingDetail({ ssoId: id, projectType })
     if (code === consts.RET_CODE.SUCCESS) {
       if (shouldUpdate) {
         dispatch({
@@ -28,7 +30,7 @@ const Detail = props => {
           payload: updateKey
         })
       }
-      setState({ ...state, cloudUser, loading: false })
+      setState({ ...state, cloudUser, compilationList, log, serviceLog, loading: false })
     }
   }
   useEffect(() => {
@@ -47,7 +49,7 @@ const Detail = props => {
           xl={{ span: 9 }}
           className="sheet-box-left">
           <div className="sheet-left-panel pr-4">
-            <Form cloudUser={state.cloudUser} updateKey={updateKey} />
+            <Form cloudUser={state.cloudUser} updateKey={updateKey} projectType={projectType} />
           </div>
         </Col>
         <Col
@@ -57,8 +59,8 @@ const Detail = props => {
           xl={{ span: 15 }}
           flex={{ flexDirection: 'column' }}
           className="sheet-box-right">
-          <TabList />
-          <LowerList />
+          <TabList compilationList={state.compilationList} cloudUser={state.cloudUser} />
+          <LowerList log={state.log} serviceLog={state.serviceLog} />
         </Col>
       </Row>
     </div>

src/pages/Product/Cloud/index.jsx

@@ -30,7 +30,7 @@ const Cloud = () => {
 
   const [state, setState] = useState({
     params: {
-      projectPype: roadpricingEnum[columnStateType],
+      projectType: roadpricingEnum[columnStateType],
       search: null
     }
   })
@@ -40,7 +40,7 @@ const Cloud = () => {
       dispatch({
         type: 'cloud/fetchCompilation',
         payload: {
-          projectPype: roadpricingEnum[columnStateType]
+          projectType: roadpricingEnum[columnStateType]
         }
       })
     }
@@ -48,7 +48,7 @@ const Cloud = () => {
       dispatch({
         type: 'cloud/fetchProvince',
         payload: {
-          projectPype: roadpricingEnum[columnStateType]
+          projectType: roadpricingEnum[columnStateType]
         }
       })
     }
@@ -63,7 +63,7 @@ const Cloud = () => {
         height: '100vh',
         overflowY: 'hidden'
       },
-      children: <Detail dataId={id} projectPype={roadpricingEnum[columnStateType]} />
+      children: <Detail dataId={id} projectType={roadpricingEnum[columnStateType]} />
     })
     toggleDrawer()
   }

src/services/product.js

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