155 lines
3.8 KiB
TypeScript
155 lines
3.8 KiB
TypeScript
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);
|
|
const status = this.state.ticketInfo.status;
|
|
this.setState({
|
|
current: mapStatusStep.get(status) || 0,
|
|
items: pt.get().ticketDetail.stepItems,
|
|
});
|
|
}
|
|
|
|
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 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>
|
|
);
|
|
}
|
|
}
|