From 0dac2ad18584aba54b0d3ea443da4b1dc44fe55c Mon Sep 17 00:00:00 2001
From: FrozenArcher <yhy242989105@hotmail.com>
Date: Tue, 12 Mar 2024 23:01:24 +0800
Subject: [PATCH] refactor ticket detail

---
 .../DetailFramework/DetailFramework.config.ts |   3 +
 .../DetailFramework/DetailFramework.scss      |   0
 .../DetailFramework/DetailFramework.tsx       | 113 +++++++++++++++++
 src/pages/TicketDetail/TicketDetail.tsx       | 120 ++++--------------
 src/service/ticketsInfo.ts                    |   4 +-
 5 files changed, 144 insertions(+), 96 deletions(-)
 create mode 100644 src/components/DetailFramework/DetailFramework.config.ts
 create mode 100644 src/components/DetailFramework/DetailFramework.scss
 create mode 100644 src/components/DetailFramework/DetailFramework.tsx

diff --git a/src/components/DetailFramework/DetailFramework.config.ts b/src/components/DetailFramework/DetailFramework.config.ts
new file mode 100644
index 0000000..fd50080
--- /dev/null
+++ b/src/components/DetailFramework/DetailFramework.config.ts
@@ -0,0 +1,3 @@
+export default {
+  component: true,
+};
diff --git a/src/components/DetailFramework/DetailFramework.scss b/src/components/DetailFramework/DetailFramework.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/DetailFramework/DetailFramework.tsx b/src/components/DetailFramework/DetailFramework.tsx
new file mode 100644
index 0000000..796b896
--- /dev/null
+++ b/src/components/DetailFramework/DetailFramework.tsx
@@ -0,0 +1,113 @@
+import { View } from '@tarojs/components';
+import { AtCard, AtSteps } from 'taro-ui';
+import { Component, ReactNode } from 'react';
+import Taro from '@tarojs/taro';
+import { TicketInfo, TicketNote } from '@/pages/TicketDetail/TicketNote';
+import NoteList from '@/components/NoteList/NoteList';
+import PageFooter from '@/components/PageFooter/PageFooter';
+import pt from '@/plain-text';
+import { RequestState } from '@/service';
+import { getTicketInfo } from '@/service/ticketsInfo';
+import { FixStatus } from '@/common';
+
+const mapStatusStep: Map<FixStatus, 0 | 1 | 2 | 3> = new Map([
+  [1, 0],
+  [2, 1],
+  [3, 2],
+  [4, 2],
+  [5, 3],
+]);
+
+interface StepItemData {
+  title: string;
+}
+
+interface DetailFrameworkState {
+  current: number;
+  items: Array<StepItemData>;
+  ticketInfo: TicketInfo;
+  notes: Array<TicketNote>;
+  rs: RequestState;
+}
+
+interface DetailFrameworkProps {
+  middleButton: JSX.Element;
+  id: number;
+}
+
+export default class DetailFramework extends Component<
+  DetailFrameworkProps,
+  DetailFrameworkState
+> {
+  state = {
+    current: 0,
+    items: [],
+    ticketInfo: new TicketInfo(),
+    notes: [new TicketNote()],
+    rs: new RequestState(),
+  };
+
+  componentDidMount(): void {
+    const navBar = pt.get().navBar;
+    Taro.setNavigationBarTitle({
+      title: navBar.ticketDetail,
+    });
+    const items = pt.get().ticketDetail.stepItems;
+    this.setState({
+      items: items,
+    });
+    getTicketInfo(this, this.props.id);
+  }
+
+  props: Readonly<DetailFrameworkProps> = {
+    middleButton: <View></View>,
+    id: 0,
+  };
+
+  render(): ReactNode {
+    if (this.state.rs.loading) {
+      return <View>Loading</View>;
+    } else if (!this.state.rs.success) {
+      return <View>Request failed</View>;
+    }
+
+    const status = this.state.ticketInfo.status;
+    this.setState({
+      current: mapStatusStep.get(status) || 0,
+    });
+
+    return (
+      <View>
+        <View className='at-article__h1'>
+          {this.state.ticketInfo.device +
+            ' ' +
+            this.state.ticketInfo.deviceModel}
+        </View>
+        <View className='at-article__info'>
+          {pt.get().common.createdAtText(this.state.ticketInfo.createdTime)}
+        </View>
+        <View style={{ marginTop: 10, marginBottom: 10 }}>
+          <AtCard title={pt.get().ticketDetail.descTitle}>
+            <View className='at-article__h3'>
+              {this.state.ticketInfo.description}
+            </View>
+          </AtCard>
+        </View>
+        <View style={{ padding: 10 }}>
+          <AtSteps
+            items={this.state.items}
+            current={this.state.current}
+            onChange={() => {}}
+          />
+        </View>
+
+        {this.props.middleButton}
+
+        <View style={{ padding: 10 }}>
+          <NoteList noteList={this.state.notes} />
+        </View>
+        <PageFooter />
+      </View>
+    );
+  }
+}
diff --git a/src/pages/TicketDetail/TicketDetail.tsx b/src/pages/TicketDetail/TicketDetail.tsx
index ebbb667..68977c9 100644
--- a/src/pages/TicketDetail/TicketDetail.tsx
+++ b/src/pages/TicketDetail/TicketDetail.tsx
@@ -1,119 +1,51 @@
 import { Component, ReactNode } from 'react';
 import { View } from '@tarojs/components';
 import { getCurrentInstance } from '@tarojs/runtime';
-import Taro from '@tarojs/taro';
 import pt from '@/plain-text';
-import { AtCard, AtSteps, AtButton } from 'taro-ui';
-import { RequestState } from '@/service';
-import { getTicketInfo } from '@/service/ticketsInfo';
-import { FixStatus } from '@/common';
-import PageFooter from '@/components/PageFooter/PageFooter';
-import NoteList from '@/components/NoteList/NoteList';
-import { TicketNote, TicketInfo } from './TicketNote';
-
-const mapStatusStep: Map<FixStatus, 0 | 1 | 2 | 3> = new Map([
-  [1, 0],
-  [2, 1],
-  [3, 2],
-  [4, 2],
-  [5, 3],
-]);
-
-interface StepItemData {
-  title: string;
-}
+import { AtButton } from 'taro-ui';
+import DetailFramework from '@/components/DetailFramework/DetailFramework';
 
 interface TicketDetailState {
-  current: number;
-  items: Array<StepItemData>;
-  ticketInfo: TicketInfo;
-  notes: Array<TicketNote>;
-  rs: RequestState;
+  id: number;
 }
 
 export default class TicketDetail extends Component<{}, TicketDetailState> {
-  state = {
-    current: 0,
-    items: [],
-    ticketInfo: new TicketInfo(),
-    notes: [new TicketNote()],
-    rs: new RequestState(),
+  state: Readonly<TicketDetailState> = {
+    id: 0,
   };
 
   componentDidMount(): void {
-    const navBar = pt.get().navBar;
-    Taro.setNavigationBarTitle({
-      title: navBar.ticketDetail,
-    });
     const { router } = getCurrentInstance();
     const id = router?.params.id as number;
-    const items = pt.get().ticketDetail.stepItems;
     this.setState({
-      items: items,
+      id: id,
     });
-
-    getTicketInfo(this, id);
   }
 
   render(): ReactNode {
-    if (this.state.rs.loading) {
-      return <View>Loading</View>;
-    } else if (!this.state.rs.success) {
-      return <View>Request failed</View>;
-    }
-
-    const status = this.state.ticketInfo.status;
-    this.setState({
-      current: mapStatusStep.get(status) || 0,
-    });
+    const middleButton = (
+      <View
+        className='at-row'
+        style={{ paddingTop: 10, paddingBottom: 10, width: '100%' }}
+      >
+        <View
+          className='at-col'
+          style={{ marginLeft: 10, paddingRight: 5, width: '50%' }}
+        >
+          <AtButton type='primary'>{pt.get().ticketDetail.tookAway}</AtButton>
+        </View>
+        <View
+          className='at-col'
+          style={{ marginRight: 10, paddingLeft: 5, width: '50%' }}
+        >
+          <AtButton type='secondary'>{pt.get().ticketDetail.addNote}</AtButton>
+        </View>
+      </View>
+    );
 
     return (
       <View>
-        <View className='at-article__h1'>
-          {this.state.ticketInfo.device +
-            ' ' +
-            this.state.ticketInfo.deviceModel}
-        </View>
-        <View className='at-article__info'>
-          {pt.get().common.createdAtText(this.state.ticketInfo.createdTime)}
-        </View>
-        <View style={{ marginTop: 10, marginBottom: 10 }}>
-          <AtCard title={pt.get().ticketDetail.descTitle}>
-            <View className='at-article__h3'>
-              {this.state.ticketInfo.description}
-            </View>
-          </AtCard>
-        </View>
-        <View style={{ padding: 10 }}>
-          <AtSteps
-            items={this.state.items}
-            current={this.state.current}
-            onChange={() => {}}
-          />
-        </View>
-        <View
-          className='at-row'
-          style={{ paddingTop: 10, paddingBottom: 10, width: '100%' }}
-        >
-          <View
-            className='at-col'
-            style={{ marginLeft: 10, paddingRight: 5, width: '50%' }}
-          >
-            <AtButton type='primary'>{pt.get().ticketDetail.tookAway}</AtButton>
-          </View>
-          <View
-            className='at-col'
-            style={{ marginRight: 10, paddingLeft: 5, width: '50%' }}
-          >
-            <AtButton type='secondary'>
-              {pt.get().ticketDetail.addNote}
-            </AtButton>
-          </View>
-        </View>
-        <View style={{ padding: 10 }}>
-          <NoteList noteList={this.state.notes} />
-        </View>
-        <PageFooter />
+        <DetailFramework middleButton={middleButton} id={this.state.id} />
       </View>
     );
   }
diff --git a/src/service/ticketsInfo.ts b/src/service/ticketsInfo.ts
index 4de89a6..9e6c42d 100644
--- a/src/service/ticketsInfo.ts
+++ b/src/service/ticketsInfo.ts
@@ -1,10 +1,10 @@
-import TicketDetail from '@/pages/TicketDetail/TicketDetail';
 import { TicketInfo, TicketNote } from '@/pages/TicketDetail/TicketNote';
+import DetailFramework from '@/components/DetailFramework/DetailFramework';
 import Taro from '@tarojs/taro';
 import moment from 'moment';
 import { getUrl } from '.';
 
-export function getTicketInfo(that: TicketDetail, id: number) {
+export function getTicketInfo(that: DetailFramework, id: number) {
   Taro.request({
     url: getUrl('/tickets/info'),
     method: 'GET',