wrap up detailframework in atcard in repair page

mock/mytickets.json

@@ -3,7 +3,7 @@
     {
       "id": 6830,
       "type": 1,
-      "status": 5,
+      "status": 2,
       "device": "主机",
       "deviceModel": "技嘉",
       "owner": "武技栏",

mock/ticketInfo.json

@@ -1,5 +1,5 @@
 {
-  "id": 6847,
+  "id": 6830,
   "type": 1,
   "device": "华硕",
   "deviceModel": "灵耀X14",
@@ -8,7 +8,7 @@
   "description": "清灰",
   "workers": [],
   "createdTime": "2024-03-07T19:52:48.523303",
-  "status": 5,
+  "status": 2,
   "isConfirmed": false,
   "notes": [
     {

mock/uncompleted.json

@@ -1,7 +1,7 @@
 {
   "list": [
     {
-      "id": 6830,
+      "id": 6832,
       "type": 1,
       "status": 2,
       "device": "ROG",

src/components/DetailFramework/DetailFramework.config.ts

@@ -0,0 +1,3 @@
+export default {
+  component: true,
+};

src/components/DetailFramework/DetailFramework.tsx

@@ -0,0 +1,155 @@
+import { View } from '@tarojs/components';
+import { Component, ReactNode } from 'react';
+import Taro from '@tarojs/taro';
+import {
+  ShowElements,
+  TicketInfo,
+  TicketNote,
+} from '@/pages/TicketDetail/TicketNote';
+import pt from '@/plain-text';
+import { RequestState } from '@/service';
+import { getTicketInfo } from '@/service/ticketsInfo';
+import { FixStatus } from '@/common';
+import { AtCard, AtSteps } from 'taro-ui';
+import NoteList from '../NoteList/NoteList';
+
+interface StepItemData {
+  title: string;
+}
+
+const mapStatusStep: Map<FixStatus, 0 | 1 | 2 | 3> = new Map([
+  [1, 0],
+  [2, 1],
+  [3, 2],
+  [4, 2],
+  [5, 3],
+]);
+
+interface DetailFrameworkState {
+  current: number;
+  items: Array<StepItemData>;
+  ticketInfo: TicketInfo;
+  notes: Array<TicketNote>;
+  rs: RequestState;
+}
+
+interface DetailFrameworkProps {
+  middleButton: JSX.Element;
+  id: number;
+  isInfoShow: { [key: string]: boolean };
+}
+
+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,
+    });
+    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 {
+    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,
+      items: pt.get().ticketDetail.stepItems,
+    });
+
+    const elements: ShowElements = {
+      device: this.props.isInfoShow['device'] ? (
+        <View className='at-article__h1'>
+          {this.state.ticketInfo.device +
+            ' ' +
+            this.state.ticketInfo.deviceModel}
+        </View>
+      ) : (
+        <View></View>
+      ),
+      createdTime: this.props.isInfoShow['createdTime'] ? (
+        <View className='at-article__info'>
+          {pt.get().common.createdAtText(this.state.ticketInfo.createdTime)}
+        </View>
+      ) : (
+        <View></View>
+      ),
+      description: this.props.isInfoShow['description'] ? (
+        <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></View>
+      ),
+      current: this.props.isInfoShow['current'] ? (
+        <View style={{ padding: 10 }}>
+          <AtSteps
+            items={this.state.items}
+            current={this.state.current}
+            onChange={() => {}}
+          />
+        </View>
+      ) : (
+        <View></View>
+      ),
+      notelist: this.props.isInfoShow['notelist'] ? (
+        this.props.isInfoShow['showAllNotes'] ? (
+          <View style={{ padding: 10 }}>
+            <NoteList noteList={this.state.notes} />
+          </View>
+        ) : (
+          <View style={{ padding: 10 }}>
+            <NoteList
+              noteList={[this.state.notes[this.state.notes.length - 1]]}
+            />
+          </View>
+        )
+      ) : (
+        <View></View>
+      ),
+    };
+
+    return (
+      <View>
+        {elements.device}
+        {elements.createdTime}
+        {elements.description}
+        {elements.current}
+        {this.props.middleButton}
+        {elements.notelist}
+      </View>
+    );
+  }
+}

src/components/TicketListItem/TicketListItem.config.ts

@@ -0,0 +1,3 @@
+export default {
+  component: true,
+};

src/pages/TicketDetail/TicketDetail.tsx

@@ -1,118 +1,65 @@
 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 { AtButton } from 'taro-ui';
-import { RequestState } from '@/service';
+import DetailFramework from '@/components/DetailFramework/DetailFramework';
-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;
-}
 
 interface TicketDetailState {
-  current: number;
+  id: number;
-  items: Array<StepItemData>;
-  ticketInfo: TicketInfo;
-  notes: Array<TicketNote>;
-  rs: RequestState;
 }
 
 export default class TicketDetail extends Component<{}, TicketDetailState> {
-  state = {
+  state: Readonly<TicketDetailState> = {
-    current: 0,
+    id: 0,
-    items: [],
-    ticketInfo: new TicketInfo(),
-    notes: [new TicketNote()],
-    rs: new RequestState(),
   };
 
   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) {
+    const middleButton = (
-      return <View>Loading</View>;
+      <View
-    } else if (!this.state.rs.success) {
+        className='at-row'
-      return <View>Request failed</View>;
+        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>
+    );
 
-    const status = this.state.ticketInfo.status;
+    const isInfoShow = {
-    this.setState({
+      device: true,
-      current: mapStatusStep.get(status) || 0,
+      createdTime: true,
-    });
+      description: true,
+      current: true,
+      notelist: true,
+      showAllNotes: true,
+    };
 
     return (
       <View>
-        <View className='at-article__h1'>
+        <DetailFramework
-          {this.state.ticketInfo.device +
+          middleButton={middleButton}
-            ' ' +
+          id={this.state.id}
-            this.state.ticketInfo.deviceModel}
+          isInfoShow={isInfoShow}
-        </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 />
       </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/pages/repair/repair.tsx

@@ -15,6 +15,8 @@ import PageFooter from '@/components/PageFooter/PageFooter';
 import { submitTicket } from '@/service/submitTicket';
 import type CustomTabBar from '@/custom-tab-bar';
 import repairLogo from '@/assets/icons/RepairPage/repair.svg';
+import DetailFramework from '@/components/DetailFramework/DetailFramework';
+import { getCurrentTicket } from '@/service/currentTicket';
 import './repair.scss';
 
 interface RepairPageState {
@@ -27,10 +29,22 @@ interface RepairPageState {
   isLoading: boolean;
   isDisable: boolean;
   checkedList: Array<number>;
+  currentTicketsId: Array<number>;
 }
 
 const submitInterval = 5000;
 
+const middleButton = <View></View>;
+
+const isInfoShow = {
+  device: true,
+  createdTime: true,
+  description: false,
+  current: true,
+  notelist: true,
+  showAllNotes: false,
+};
+
 export default class RepairPage extends Component<{}, RepairPageState> {
   state = {
     type: 1 as 0 | 1,
@@ -42,9 +56,12 @@ export default class RepairPage extends Component<{}, RepairPageState> {
     isLoading: false,
     isDisable: true,
     checkedList: [0],
+    currentTicketsId: [] as Array<number>,
   };
 
   componentDidMount(): void {
+    getCurrentTicket(this, middleButton, isInfoShow);
+
     setTimeout(() => {
       this.setState({
         isDisable: false,
@@ -145,9 +162,20 @@ export default class RepairPage extends Component<{}, RepairPageState> {
   }
 
   render(): ReactNode {
+    const ticketsRenderer = this.state.currentTicketsId.map((id, idx) => (
+      <AtCard key={idx}>
+        <DetailFramework
+          id={id}
+          isInfoShow={isInfoShow}
+          middleButton={middleButton}
+        />
+      </AtCard>
+    ));
+    console.log(ticketsRenderer);
     return (
       <View>
         <AtMessage />
+        {ticketsRenderer}
         <AtCard
           note={pt.get().repairPage.cardText.note}
           title={pt.get().repairPage.cardText.title}

src/pages/user/myTicket/myTicket.tsx

@@ -6,8 +6,8 @@ import moment from 'moment';
 import pt from '@/plain-text';
 import { RequestState } from '@/service';
 import { getMyTicketList } from '@/service/myTicket';
+import { TicketListItem } from '@/components/TicketListItem/TicketListItem';
 import './myTicket.scss';
-import { TicketListItem } from './TicketListItem';
 
 interface MyTicketState {
   fixList: Array<TicketListItem>;

src/plain-text/RepairPage.ts

@@ -1,4 +1,10 @@
 export interface RepairPageText {
+  currentTicket: {
+    errorMessage: string;
+    title: string;
+    note: string;
+    extra: string;
+  };
   typeText: {
     computer: string;
     appliance: string;
@@ -40,6 +46,12 @@ export interface RepairPageText {
 }
 
 export const repairPageZhCn: RepairPageText = {
+  currentTicket: {
+    errorMessage: '未获取到工单！',
+    title: '',
+    note: '',
+    extra: '',
+  },
   typeText: {
     computer: '电脑',
     appliance: '电器',
@@ -81,6 +93,12 @@ export const repairPageZhCn: RepairPageText = {
 };
 
 export const repairPageEnUs: RepairPageText = {
+  currentTicket: {
+    errorMessage: '未获取到工单！',
+    title: '',
+    note: '',
+    extra: '',
+  },
   typeText: {
     computer: 'Computer',
     appliance: 'Appliance',

src/service/currentTicket.ts

@@ -0,0 +1,35 @@
+import RepairPage from '@/pages/repair/repair';
+import Taro from '@tarojs/taro';
+import { TicketListItem } from '@/components/TicketListItem/TicketListItem';
+import pt from '@/plain-text';
+import DetailFramework from '@/components/DetailFramework/DetailFramework';
+import { getUrl } from '.';
+
+export function getCurrentTicket(that: RepairPage, middleButton, isInfoShow) {
+  Taro.request({
+    url: getUrl('/user/mytickets'),
+    method: 'GET',
+    data: {
+      token: 'token_test',
+    },
+  })
+    .then((res) => {
+      const data = res.data.data;
+      let newIdList: Array<number> = [];
+      data.list.map((ticket: TicketListItem) => {
+        if (ticket['status'] !== 5) {
+          newIdList.push(ticket.id);
+        }
+      });
+      that.setState({
+        currentTicketsId: newIdList,
+      });
+    })
+    .catch((err) => {
+      console.log(err);
+      Taro.atMessage({
+        message: pt.get().button.submitText.error + err.toString(),
+        type: 'error',
+      });
+    });
+}

src/service/myTicket.ts

@@ -1,5 +1,5 @@
 import MyTicketPage from '@/pages/user/myTicket/myTicket';
-import { TicketListItem } from '@/pages/user/myTicket/TicketListItem';
+import { TicketListItem } from '@/components/TicketListItem/TicketListItem';
 import Taro from '@tarojs/taro';
 import moment from 'moment';
 import { getUrl } from '.';
@@ -13,20 +13,15 @@ export function getMyTicketList(that: MyTicketPage) {
     },
   })
     .then((res) => {
+      let former = that.state.rs;
       if (!res.data.success) {
         that.setState({
-          rs: {
+          rs: former.trans(false),
-            loading: false,
-            success: false,
-          },
         });
         return;
       }
       that.setState({
-        rs: {
+        rs: former.trans(true),
-          loading: false,
-          success: true,
-        },
         fixList: res.data.data.list.map(
           (item) =>
             new TicketListItem(
@@ -40,11 +35,9 @@ export function getMyTicketList(that: MyTicketPage) {
       });
     })
     .catch((reason) => {
+      let former = that.state.rs;
       that.setState({
-        rs: {
+        rs: former.trans(false),
-          loading: false,
-          success: false,
-        },
       });
       console.log(reason);
     });

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',