refactor DetailFramework and service/ticketsInfo

src/components/DetailFramework/DetailFramework.tsx

@@ -1,38 +1,21 @@
 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 { ShowElements } 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;
+  elements: ShowElements;
 }
 
 interface DetailFrameworkProps {
   middleButton: JSX.Element;
   id: number;
+  isInfoShow: { [key: string]: boolean };
 }
 
 export default class DetailFramework extends Component<
@@ -40,11 +23,8 @@ export default class DetailFramework extends Component<
   DetailFrameworkState
 > {
   state = {
-    current: 0,
-    items: [],
-    ticketInfo: new TicketInfo(),
-    notes: [new TicketNote()],
     rs: new RequestState(),
+    elements: new ShowElements(),
   };
 
   componentDidMount(): void {
@@ -52,16 +32,20 @@ export default class DetailFramework extends Component<
     Taro.setNavigationBarTitle({
       title: navBar.ticketDetail,
     });
-    const items = pt.get().ticketDetail.stepItems;
+    getTicketInfo(this, this.props.id, this.props.isInfoShow);
-    this.setState({
-      items: items,
-    });
-    getTicketInfo(this, this.props.id);
   }
 
   props: Readonly<DetailFrameworkProps> = {
     middleButton: <View></View>,
     id: 0,
+    isInfoShow: {
+      device: true,
+      createdTime: true,
+      description: true,
+      current: true,
+      notelist: true,
+      showAllNotes: true,
+    },
   };
 
   render(): ReactNode {
@@ -71,41 +55,14 @@ export default class DetailFramework extends Component<
       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.elements.device}
-          {this.state.ticketInfo.device +
+        {this.state.elements.createdTime}
-            ' ' +
+        {this.state.elements.description}
-            this.state.ticketInfo.deviceModel}
+        {this.state.elements.current}
-        </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}
-
+        {this.state.elements.notelist}
-        <View style={{ padding: 10 }}>
-          <NoteList noteList={this.state.notes} />
-        </View>
         <PageFooter />
       </View>
     );

src/pages/TicketDetail/TicketDetail.tsx

@@ -43,9 +43,22 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
       </View>
     );
 
+    const isInfoShow = {
+      device: true,
+      createdTime: true,
+      description: true,
+      current: true,
+      notelist: true,
+      showAllNotes: true,
+    };
+
     return (
       <View>
-        <DetailFramework middleButton={middleButton} id={this.state.id} />
+        <DetailFramework
+          middleButton={middleButton}
+          id={this.state.id}
+          isInfoShow={isInfoShow}
+        />
       </View>
     );
   }

src/pages/TicketDetail/TicketNote.ts

@@ -18,4 +18,12 @@ export class TicketNote {
   createdTime: moment.Moment;
 }
 
+export class ShowElements {
+  device: JSX.Element;
+  createdTime: JSX.Element;
+  description: JSX.Element;
+  current: JSX.Element;
+  notelist: JSX.Element;
+}
+
 export type StatusStr = '1' | '2' | '3' | '4' | '5';

src/service/ticketsInfo.ts

@@ -1,56 +0,0 @@
-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: DetailFramework, id: number) {
-  Taro.request({
-    url: getUrl('/tickets/info'),
-    method: 'GET',
-    data: {
-      id: id,
-    },
-  })
-    .then((res) => {
-      let former = that.state.rs;
-      if (!res.data.success) {
-        that.setState({
-          rs: former.trans(false),
-        });
-      } else {
-        const data = res.data.data;
-        const ticketDetail: TicketInfo = {
-          id: data.id,
-          type: data.type,
-          device: data.device,
-          deviceModel: data.deviceModel,
-          description: data.description,
-          createdTime: moment(data.createdTime as string),
-          status: data.status,
-        };
-        const notes: Array<TicketNote> = [];
-        data.notes.map((item) => {
-          notes.push({
-            id: item.id,
-            op: item.op,
-            type: item.type,
-            content: item.content,
-            createdTime: moment(item.createdTime as string),
-          });
-        });
-        that.setState({
-          ticketInfo: ticketDetail,
-          notes: notes,
-          rs: former.trans(true),
-        });
-      }
-    })
-    .catch((reason) => {
-      let former = that.state.rs;
-      that.setState({
-        rs: former.trans(false),
-      });
-      console.error(reason);
-    });
-}

src/service/ticketsInfo.tsx

@@ -0,0 +1,132 @@
+import {
+  TicketInfo,
+  TicketNote,
+  ShowElements,
+} from '@/pages/TicketDetail/TicketNote';
+import DetailFramework from '@/components/DetailFramework/DetailFramework';
+import Taro from '@tarojs/taro';
+import { View } from '@tarojs/components';
+import pt from '@/plain-text';
+import { AtCard, AtSteps } from 'taro-ui';
+import moment from 'moment';
+import NoteList from '@/components/NoteList/NoteList';
+import { FixStatus } from '@/common';
+import { getUrl } from '.';
+
+const mapStatusStep: Map<FixStatus, 0 | 1 | 2 | 3> = new Map([
+  [1, 0],
+  [2, 1],
+  [3, 2],
+  [4, 2],
+  [5, 3],
+]);
+
+interface StepItemData {
+  title: string;
+}
+
+export function getTicketInfo(
+  that: DetailFramework,
+  id: number,
+  isInfoShow: { [key: string]: boolean },
+) {
+  const items: Array<StepItemData> = pt.get().ticketDetail.stepItems;
+  Taro.request({
+    url: getUrl('/tickets/info'),
+    method: 'GET',
+    data: {
+      id: id,
+    },
+  })
+    .then((res) => {
+      let former = that.state.rs;
+      if (!res.data.success) {
+        that.setState({
+          rs: former.trans(false),
+        });
+      } else {
+        const data = res.data.data;
+        const ticketDetail: TicketInfo = {
+          id: data.id,
+          type: data.type,
+          device: data.device,
+          deviceModel: data.deviceModel,
+          description: data.description,
+          createdTime: moment(data.createdTime as string),
+          status: data.status,
+        };
+        const notes: Array<TicketNote> = [];
+        data.notes.map((item) => {
+          notes.push({
+            id: item.id,
+            op: item.op,
+            type: item.type,
+            content: item.content,
+            createdTime: moment(item.createdTime as string),
+          });
+        });
+        const elements: ShowElements = {
+          device: isInfoShow['device'] ? (
+            <View className='at-article__h1'>
+              {ticketDetail.device + ' ' + ticketDetail.deviceModel}
+            </View>
+          ) : (
+            <View></View>
+          ),
+          createdTime: isInfoShow['createdTime'] ? (
+            <View className='at-article__info'>
+              {pt.get().common.createdAtText(ticketDetail.createdTime)}
+            </View>
+          ) : (
+            <View></View>
+          ),
+          description: isInfoShow['description'] ? (
+            <View style={{ marginTop: 10, marginBottom: 10 }}>
+              <AtCard title={pt.get().ticketDetail.descTitle}>
+                <View className='at-article__h3'>
+                  {ticketDetail.description}
+                </View>
+              </AtCard>
+            </View>
+          ) : (
+            <View></View>
+          ),
+          current: isInfoShow['current'] ? (
+            <View style={{ padding: 10 }}>
+              <AtSteps
+                items={items}
+                current={mapStatusStep.get(ticketDetail.status) || 0}
+                onChange={() => {}}
+              />
+            </View>
+          ) : (
+            <View></View>
+          ),
+          notelist: isInfoShow['notelist'] ? (
+            isInfoShow['showAllNotes'] ? (
+              <View style={{ padding: 10 }}>
+                <NoteList noteList={notes} />
+              </View>
+            ) : (
+              <View style={{ padding: 10 }}>
+                <NoteList noteList={[notes[-1]]} />
+              </View>
+            )
+          ) : (
+            <View></View>
+          ),
+        };
+        that.setState({
+          rs: former.trans(true),
+          elements: elements,
+        });
+      }
+    })
+    .catch((reason) => {
+      let former = that.state.rs;
+      that.setState({
+        rs: former.trans(false),
+      });
+      console.error(reason);
+    });
+}