feats

config/routes.js

@@ -641,6 +641,12 @@ export default [
                 name: '工单管理',
                 component: './property/ticket',
               },
+              {
+                path: 'bill/ticket/detail',
+                name: '工单详情',
+                component: './property/ticket/Detail',
+                hideInMenu: true,
+              },
             ]
           },
           // {

src/pages/property/ticket/Detail.jsx

@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from 'react'
+import { PageHeader, Descriptions, List, Steps, Row, Col, Rate  } from 'antd'
+import { fetch, fetchList, apis } from '@/utils/request'
+
+const TicketTypeDict = {
+  '0': '投诉',
+  '1': '报修',
+  '2': '联系物业',
+}
+
+const RepairTypeDict = {
+  '0': '公共区域',
+  '1': '房屋质量',
+  '2': '户内设施',
+}
+
+const imgGrid = {
+  gutter: 16,
+  xs: 1,
+  sm: 2,
+  md: 6,
+  lg: 6,
+  xl: 6,
+  xxl: 10,
+}
+
+const getTicketDetail = fetch(apis.ticket.ticketEdit)
+
+export default props => {
+  const [loading, setLoading] = useState(false)
+  const [ticketData, setTicketData] = useState({})
+  const [approvalProcessList, setApprovalProcessList] = useState([])
+
+  const ticketType = [
+    TicketTypeDict[ticketData.type] || '',
+    ticketData.type === '2' ? (RepairTypeDict[ticketData.repairType] || '') : ''
+  ].join('-')
+
+  const { id } = props.location.query
+
+  useEffect(() => {
+    getTicketDetail({data: {id}}).then(res => {
+      const { recordList } = res || {}
+      setTicketData(res)
+      setApprovalProcessList(res)
+    })
+  }, [])
+
+  return (
+    <div>
+      <PageHeader
+        title={ticketData.ticketTitle}
+        subTitle="工单详情"
+        backIcon={false}
+        style={{ borderBottom: '1px solid rgb(235, 237, 240)' }}
+      >
+        <Descriptions column={3}>
+          <Descriptions.Item label="工单号">{ticketData.id}</Descriptions.Item>
+          <Descriptions.Item label="工单类型">{ticketType}</Descriptions.Item>
+          <Descriptions.Item label="发起时间">{ticketData.createDate}</Descriptions.Item>
+          <Descriptions.Item label="发起人">{ticketData.createUserNmae}</Descriptions.Item>
+          <Descriptions.Item label="联系方式">{ticketData.loginName}</Descriptions.Item>
+          <Descriptions.Item label="负责人">{ticketData.tpUserNmae || '暂无'}</Descriptions.Item>
+          <Descriptions.Item label="工单内容">{ticketData.ticketContent}</Descriptions.Item>
+        </Descriptions>
+        {
+          ticketData.contentImageUrl && ticketData.contentImageUrl.length && (
+            <List dataSource={ticketData.contentImageUrl} grid={imgGrid} renderItem={it => {
+              <img src={it} alt="" style="width: 100%" />
+            }} />
+          )
+        }
+      </PageHeader>
+
+      <div>
+        <h4 style={{marginTop: '24px'}}>沟通记录</h4>
+        <Steps progressDot direction="vertical" current={1}>
+        {
+          (approvalProcessList || {}).map(item => {
+            return (
+              <Steps.Step key={item.id} title={item.statusName} subTitle={item.createDate} description={(
+                <div>
+                  {
+                    item.status - 0 === 5 && (
+                      <Descriptions column={2}>
+                        <Descriptions.Item label="评分"><Rate value={item.score}/></Descriptions.Item>
+                        <Descriptions.Item label="时间"><Rate value={item.createDate}/></Descriptions.Item>
+                        <Descriptions.Item label="评语">{item.comment}</Descriptions.Item>
+                      </Descriptions>
+                    )
+                  }
+                  {
+                    item.statusContent && item.statusContent.length && (
+                      item.statusContent.map(ctt => {
+                        return (
+                          <div>
+                            <div>{ `${ctt.userName} : ${ctt.content}` }</div>
+                            {
+                              ctt.imgURL && ctt.imgURL.length && (
+                                <List dataSource={ctt.imgURL} grid={imgGrid} renderItem={it => {
+                                  <img src={it.imageUrl} alt="" style="width: 100%" />
+                                }} />
+                              )
+                            }
+                          </div>
+                        )
+                      })
+                    )
+                  }
+                </div>
+              )}/>
+            )
+          })
+        }
+        </Steps>
+      </div>
+    </div>
+  )
+}