Dawn_Ocean
/
EVA-Notify
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor DetailFramework and service/ticketsInfo

yhy
Dawn_Ocean 2024-03-14 10:42:30 +08:00
parent b1c0e5d8b1
commit c070b356fe
5 changed files with 172 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/DetailFramework/DetailFramework.tsx
View File

@ -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 NoteList from '@/components/NoteList/NoteList';
import { ShowElements } from '@/pages/TicketDetail/TicketNote';
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;
this.setState({
items: items,
});
getTicketInfo(this, this.props.id);
getTicketInfo(this, this.props.id, this.props.isInfoShow);
}
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.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.state.elements.device}
{this.state.elements.createdTime}
{this.state.elements.description}
{this.state.elements.current}
{this.props.middleButton}
<View style={{ padding: 10 }}>
<NoteList noteList={this.state.notes} />
</View>
{this.state.elements.notelist}
<PageFooter />
</View>
);

15
src/pages/TicketDetail/TicketDetail.tsx
View File

@ -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>
);
}

8
src/pages/TicketDetail/TicketNote.ts
View File

@ -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';

56
src/service/ticketsInfo.ts
View File

@ -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);
});
}

132
src/service/ticketsInfo.tsx 100644
View File

@ -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);
});
}