From f17bfa2a9e5d88982034f4e20ad4e6aa4b6eeb5f Mon Sep 17 00:00:00 2001 From: FrozenArcher Date: Tue, 12 Mar 2024 13:28:20 +0800 Subject: [PATCH] refactor note card to component --- src/components/NoteCard/NoteCard.config.ts | 3 + src/components/NoteCard/NoteCard.scss | 0 src/components/NoteCard/NoteCard.tsx | 45 ++++++++++++ src/components/NoteList/NoteList.config.ts | 3 + src/components/NoteList/NoteList.scss | 0 src/components/NoteList/NoteList.tsx | 25 +++++++ src/pages/TicketDetail/TicketDetail.tsx | 82 ++++++---------------- src/pages/TicketDetail/TicketNote.ts | 21 ++++++ src/plain-text/index.ts | 4 +- src/service/ticketsInfo.ts | 6 +- 10 files changed, 121 insertions(+), 68 deletions(-) create mode 100644 src/components/NoteCard/NoteCard.config.ts create mode 100644 src/components/NoteCard/NoteCard.scss create mode 100644 src/components/NoteCard/NoteCard.tsx create mode 100644 src/components/NoteList/NoteList.config.ts create mode 100644 src/components/NoteList/NoteList.scss create mode 100644 src/components/NoteList/NoteList.tsx create mode 100644 src/pages/TicketDetail/TicketNote.ts diff --git a/src/components/NoteCard/NoteCard.config.ts b/src/components/NoteCard/NoteCard.config.ts new file mode 100644 index 0000000..fd50080 --- /dev/null +++ b/src/components/NoteCard/NoteCard.config.ts @@ -0,0 +1,3 @@ +export default { + component: true, +}; diff --git a/src/components/NoteCard/NoteCard.scss b/src/components/NoteCard/NoteCard.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/components/NoteCard/NoteCard.tsx b/src/components/NoteCard/NoteCard.tsx new file mode 100644 index 0000000..f25998b --- /dev/null +++ b/src/components/NoteCard/NoteCard.tsx @@ -0,0 +1,45 @@ +import { View } from '@tarojs/components'; +import { Component, ReactNode } from 'react'; +import { TicketNote, StatusStr } from '@/pages/TicketDetail/TicketNote'; +import pt from '@/plain-text'; +import { timeFormat } from '@/utils'; +import './NoteCard.scss'; + +interface NoteCardProps { + note: TicketNote; +} + +export default class NoteCard extends Component { + props: Readonly = { + note: new TicketNote(), + }; + render(): ReactNode { + var message = ''; + const note = this.props.note; + const td = pt.get().ticketDetail; + const createMessage = td.createTicketMessage; + const modifyMessage = td.statusModifyMessage; + const prefix = td.statusModifyPrefix; + + switch (note.type) { + case 0: + message = createMessage; + break; + case 1: + message = note.content; + break; + case 2: + message = prefix + modifyMessage.get(note.content as StatusStr) || ''; + break; + } + + return ( + + + {note.op} {note.createdTime.format(timeFormat)} + + {message} + + ); + } +} diff --git a/src/components/NoteList/NoteList.config.ts b/src/components/NoteList/NoteList.config.ts new file mode 100644 index 0000000..fd50080 --- /dev/null +++ b/src/components/NoteList/NoteList.config.ts @@ -0,0 +1,3 @@ +export default { + component: true, +}; diff --git a/src/components/NoteList/NoteList.scss b/src/components/NoteList/NoteList.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/components/NoteList/NoteList.tsx b/src/components/NoteList/NoteList.tsx new file mode 100644 index 0000000..62b9798 --- /dev/null +++ b/src/components/NoteList/NoteList.tsx @@ -0,0 +1,25 @@ +import { Component, ReactNode } from 'react'; +import NoteCard from '@/components/NoteCard/NoteCard'; +import { TicketNote } from '@/pages/TicketDetail/TicketNote'; +import { View } from '@tarojs/components'; + +interface NoteListProps { + noteList: Array; +} + +export default class NoteList extends Component { + props: Readonly = { + noteList: [], + }; + render(): ReactNode { + return ( + + {this.props.noteList.map((note, idx) => ( + + + + ))} + + ); + } +} diff --git a/src/pages/TicketDetail/TicketDetail.tsx b/src/pages/TicketDetail/TicketDetail.tsx index 2d4a6f7..1027871 100644 --- a/src/pages/TicketDetail/TicketDetail.tsx +++ b/src/pages/TicketDetail/TicketDetail.tsx @@ -3,13 +3,13 @@ import { View } from '@tarojs/components'; import { getCurrentInstance } from '@tarojs/runtime'; import Taro from '@tarojs/taro'; import pt from '@/plain-text'; -import { AtSteps } from 'taro-ui'; -import moment from 'moment'; +import { AtCard, AtSteps } from 'taro-ui'; import { RequestState } from '@/service'; import { getTicketInfo } from '@/service/ticketsInfo'; import { FixStatus } from '@/common'; -import { timeFormat } from '@/utils'; import PageFooter from '@/components/PageFooter/PageFooter'; +import NoteList from '@/components/NoteList/NoteList'; +import { TicketNote, TicketInfo } from './TicketNote'; const mapStatusStep: Map = new Map([ [1, 0], @@ -23,55 +23,6 @@ interface StepItemData { title: string; } -export class TicketInfo { - id: number; - type: 0 | 1; - device: string; - deviceModel: string; - description: string; - createdTime: moment.Moment; - status: FixStatus; -} - -export class TicketNote { - id: number; - op: string; - type: 0 | 1 | 2; - content: string; - createdTime: moment.Moment; -} - -type StatusStr = '1' | '2' | '3' | '4' | '5'; - -function renderNote(n: TicketNote): JSX.Element { - var message = ''; - const td = pt.get().ticketDetail; - const createMessage = td.createTicketMessage; - const modifyMessage = td.statusModifyMessage; - const prefix = td.statusModifyPrefix; - - switch (n.type) { - case 0: - message = createMessage; - break; - case 1: - message = n.content; - break; - case 2: - message = prefix + modifyMessage.get(n.content as StatusStr) || ''; - break; - } - - return ( - - - {n.op} {n.createdTime.format(timeFormat)} - - {message} - - ); -} - interface TicketDetailState { current: number; items: Array; @@ -124,18 +75,25 @@ export default class TicketDetail extends Component<{}, TicketDetailState> { this.state.ticketInfo.deviceModel} - {'创建于 '} - {this.state.ticketInfo.createdTime.format(timeFormat)} + {pt.get().common.createdAtText(this.state.ticketInfo.createdTime)} - - {this.state.ticketInfo.description} + + + + {this.state.ticketInfo.description} + + + + + {}} + /> + + + - {}} - /> - {this.state.notes.map(item => renderNote(item))} ); diff --git a/src/pages/TicketDetail/TicketNote.ts b/src/pages/TicketDetail/TicketNote.ts new file mode 100644 index 0000000..4cde4e5 --- /dev/null +++ b/src/pages/TicketDetail/TicketNote.ts @@ -0,0 +1,21 @@ +import { FixStatus } from '@/common'; + +export class TicketInfo { + id: number; + type: 0 | 1; + device: string; + deviceModel: string; + description: string; + createdTime: moment.Moment; + status: FixStatus; +} + +export class TicketNote { + id: number; + op: string; + type: 0 | 1 | 2; + content: string; + createdTime: moment.Moment; +} + +export type StatusStr = '1' | '2' | '3' | '4' | '5'; diff --git a/src/plain-text/index.ts b/src/plain-text/index.ts index 392576b..dcabe4b 100644 --- a/src/plain-text/index.ts +++ b/src/plain-text/index.ts @@ -15,7 +15,7 @@ import { ticketDetailEnUs, ticketDetailZhCn, } from './TicketDetail'; -import { CommonText, commonTextZhCn } from './common'; +import { CommonText, commonTextEnUs, commonTextZhCn } from './common'; interface TextRecord { common: CommonText; @@ -52,7 +52,7 @@ const textZhCn: TextRecord = { }; const textEnUs: TextRecord = { - common: commonTextZhCn, + common: commonTextEnUs, pageFooter: pageFooterEnUs, mainPage: mainPageEnUs, userPage: userPageEnUs, diff --git a/src/service/ticketsInfo.ts b/src/service/ticketsInfo.ts index 850458c..554b4ab 100644 --- a/src/service/ticketsInfo.ts +++ b/src/service/ticketsInfo.ts @@ -1,7 +1,5 @@ -import TicketDetail, { - TicketInfo, - TicketNote, -} from '@/pages/TicketDetail/TicketDetail'; +import TicketDetail from '@/pages/TicketDetail/TicketDetail'; +import { TicketInfo, TicketNote } from '@/pages/TicketDetail/TicketNote'; import Taro from '@tarojs/taro'; import moment from 'moment'; import { getUrl } from '.';