447 lines
12 KiB
TypeScript
447 lines
12 KiB
TypeScript
import { Component, ReactNode } from 'react';
|
|
import { View } from '@tarojs/components';
|
|
import { getCurrentInstance } from '@tarojs/runtime';
|
|
import pt from '@/plain-text';
|
|
import {
|
|
AtActionSheet,
|
|
AtActionSheetItem,
|
|
AtButton,
|
|
AtFloatLayout,
|
|
AtForm,
|
|
AtMessage,
|
|
AtModal,
|
|
AtTextarea,
|
|
} from 'taro-ui';
|
|
import DetailFramework from '@/components/DetailFramework/DetailFramework';
|
|
import PageFooter from '@/components/PageFooter/PageFooter';
|
|
import { submitComment } from '@/service/submitComment';
|
|
import Taro from '@tarojs/taro';
|
|
import wechatUser from '@/wechat';
|
|
import { addToOreo } from '@/service/addToOreo';
|
|
import { pickTicket } from '@/service/pickTicket';
|
|
import { retrieve } from '@/service/retrieve';
|
|
import { changeStatus } from '@/service/changeStatus';
|
|
import { getDisable } from '@/service/getDisable';
|
|
|
|
const submitInterval = 5000;
|
|
|
|
interface TicketDetailState {
|
|
id: number;
|
|
isMember: boolean;
|
|
showOreoModal: boolean;
|
|
showCommentLayout: boolean;
|
|
showRetrieveModal: boolean;
|
|
showStatusSheet: boolean;
|
|
showPickModal: boolean;
|
|
comment: string;
|
|
isOreoLoading: boolean;
|
|
isOreoDisable: boolean;
|
|
isOreoDisable_main: boolean;
|
|
isPickLoading: boolean;
|
|
isPickDisable: boolean;
|
|
isPickDisable_main: boolean;
|
|
isRetrieveLoading: boolean;
|
|
isRetrieveDisable: boolean;
|
|
isRetrieveDisable_main: boolean;
|
|
isStatusLoading: boolean;
|
|
isStatusDisable: boolean;
|
|
isCommentLoading: boolean;
|
|
isCommentDisable: boolean;
|
|
isCommentDisable_main: boolean;
|
|
}
|
|
|
|
export default class TicketDetail extends Component<{}, TicketDetailState> {
|
|
state: Readonly<TicketDetailState> = {
|
|
id: 0,
|
|
isMember: false,
|
|
showOreoModal: false,
|
|
showCommentLayout: false,
|
|
showRetrieveModal: false,
|
|
showStatusSheet: false,
|
|
showPickModal: false,
|
|
comment: '',
|
|
isOreoLoading: false,
|
|
isOreoDisable: false,
|
|
isOreoDisable_main: false,
|
|
isPickLoading: false,
|
|
isPickDisable: false,
|
|
isPickDisable_main: false,
|
|
isRetrieveLoading: false,
|
|
isRetrieveDisable: false,
|
|
isRetrieveDisable_main: false,
|
|
isStatusLoading: false,
|
|
isStatusDisable: false,
|
|
isCommentLoading: false,
|
|
isCommentDisable: false,
|
|
isCommentDisable_main: false,
|
|
};
|
|
|
|
componentDidMount(): void {
|
|
const { router } = getCurrentInstance();
|
|
const id = router?.params.id as number;
|
|
this.setState({
|
|
id: id,
|
|
isMember: wechatUser.getAccess(),
|
|
});
|
|
getDisable(this, id);
|
|
}
|
|
|
|
onAddToOreo(): void {
|
|
this.setState({
|
|
showOreoModal: true,
|
|
});
|
|
}
|
|
|
|
onAddComment(): void {
|
|
this.setState({
|
|
showCommentLayout: true,
|
|
});
|
|
}
|
|
|
|
onRetrieved(): void {
|
|
this.setState({
|
|
showRetrieveModal: true,
|
|
});
|
|
}
|
|
|
|
onPick(): void {
|
|
this.setState({
|
|
showPickModal: true,
|
|
});
|
|
}
|
|
|
|
onChangeStatus(): void {
|
|
this.setState({
|
|
showStatusSheet: true,
|
|
});
|
|
}
|
|
|
|
handleOreoCancel(): void {
|
|
this.setState({
|
|
showOreoModal: false,
|
|
});
|
|
}
|
|
|
|
handleCommentCancel(): void {
|
|
this.setState({
|
|
showCommentLayout: false,
|
|
});
|
|
}
|
|
|
|
handleRetrieveCancel(): void {
|
|
this.setState({
|
|
showRetrieveModal: false,
|
|
});
|
|
}
|
|
|
|
handleStatusCancel(): void {
|
|
this.setState({
|
|
showStatusSheet: false,
|
|
});
|
|
}
|
|
|
|
handlePickCancel(): void {
|
|
this.setState({
|
|
showPickModal: false,
|
|
});
|
|
}
|
|
|
|
handleOreoConfirm(): void {
|
|
this.setState({
|
|
isOreoDisable: true,
|
|
showOreoModal: false,
|
|
});
|
|
addToOreo(this);
|
|
setTimeout(() => {
|
|
this.setState({
|
|
isOreoDisable: false,
|
|
});
|
|
}, submitInterval);
|
|
return;
|
|
}
|
|
|
|
handleRetrieveConfirm(): void {
|
|
this.setState({
|
|
isRetrieveDisable: true,
|
|
showRetrieveModal: false,
|
|
});
|
|
retrieve(this);
|
|
setTimeout(() => {
|
|
this.setState({
|
|
isRetrieveDisable: false,
|
|
});
|
|
}, submitInterval);
|
|
return;
|
|
}
|
|
|
|
handlePickConfirm(): void {
|
|
this.setState({
|
|
isPickDisable: true,
|
|
showPickModal: false,
|
|
});
|
|
pickTicket(this);
|
|
setTimeout(() => {
|
|
this.setState({
|
|
isPickDisable: false,
|
|
});
|
|
}, submitInterval);
|
|
return;
|
|
}
|
|
|
|
handleStatusChange(status: number): void {
|
|
this.setState({
|
|
showStatusSheet: false,
|
|
isStatusDisable: true,
|
|
});
|
|
changeStatus(this, status);
|
|
setTimeout(() => {
|
|
this.setState({
|
|
isStatusDisable: false,
|
|
});
|
|
}, submitInterval);
|
|
return;
|
|
}
|
|
|
|
handleCommentChange(comment: string) {
|
|
this.setState({
|
|
comment: comment,
|
|
});
|
|
return comment;
|
|
}
|
|
|
|
onCommentSubmit() {
|
|
this.setState({
|
|
isCommentDisable: true,
|
|
showCommentLayout: false,
|
|
});
|
|
if (this.state.comment == '') {
|
|
Taro.atMessage({
|
|
message: pt.get().button.submitText.blank,
|
|
type: 'error',
|
|
});
|
|
setTimeout(() => {
|
|
this.setState({
|
|
isCommentDisable: false,
|
|
});
|
|
}, submitInterval);
|
|
return;
|
|
}
|
|
submitComment(this);
|
|
setTimeout(() => {
|
|
this.setState({
|
|
isCommentDisable: false,
|
|
});
|
|
}, submitInterval);
|
|
}
|
|
|
|
render(): ReactNode {
|
|
const middleButton = this.state.isMember ? (
|
|
<View>
|
|
<View
|
|
className='at-row'
|
|
style={{ paddingTop: '20rpx', paddingBottom: '20rpx', width: '100%' }}
|
|
>
|
|
<View
|
|
className='at-col'
|
|
style={{ marginLeft: '20rpx', paddingRight: '10rpx', width: '50%' }}
|
|
>
|
|
<AtButton
|
|
loading={this.state.isPickLoading}
|
|
disabled={
|
|
this.state.isPickDisable || this.state.isPickDisable_main
|
|
}
|
|
type='secondary'
|
|
onClick={this.onPick.bind(this)}
|
|
>
|
|
{pt.get().ticketDetail.button.pick}
|
|
</AtButton>
|
|
</View>
|
|
<View
|
|
className='at-col'
|
|
style={{ marginLeft: '20rpx', paddingRight: '10rpx', width: '50%' }}
|
|
>
|
|
<AtButton
|
|
loading={this.state.isOreoLoading}
|
|
disabled={
|
|
this.state.isOreoDisable || this.state.isOreoDisable_main
|
|
}
|
|
type='primary'
|
|
onClick={this.onAddToOreo.bind(this)}
|
|
>
|
|
{pt.get().ticketDetail.button.addToOreo}
|
|
</AtButton>
|
|
</View>
|
|
</View>
|
|
<View
|
|
className='at-row'
|
|
style={{ paddingTop: '20rpx', paddingBottom: '40rpx', width: '100%' }}
|
|
>
|
|
<View
|
|
className='at-col'
|
|
style={{ marginLeft: '20rpx', paddingRight: '10rpx', width: '50%' }}
|
|
>
|
|
<AtButton
|
|
loading={this.state.isStatusLoading}
|
|
disabled={this.state.isStatusDisable}
|
|
type='primary'
|
|
onClick={this.onChangeStatus.bind(this)}
|
|
>
|
|
{pt.get().ticketDetail.button.status}
|
|
</AtButton>
|
|
</View>
|
|
<View
|
|
className='at-col'
|
|
style={{ marginLeft: '20rpx', paddingRight: '10rpx', width: '50%' }}
|
|
>
|
|
<AtButton
|
|
disabled={
|
|
this.state.isCommentDisable || this.state.isCommentDisable_main
|
|
}
|
|
loading={this.state.isCommentLoading}
|
|
type='secondary'
|
|
onClick={this.onAddComment.bind(this)}
|
|
>
|
|
{pt.get().ticketDetail.button.addNote}
|
|
</AtButton>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
) : (
|
|
<View
|
|
className='at-row'
|
|
style={{ paddingTop: '20rpx', paddingBottom: '40rpx', width: '100%' }}
|
|
>
|
|
<View
|
|
className='at-col'
|
|
style={{ marginLeft: '20rpx', paddingRight: '10rpx', width: '50%' }}
|
|
>
|
|
<AtButton
|
|
loading={this.state.isRetrieveLoading}
|
|
disabled={
|
|
this.state.isRetrieveDisable || this.state.isRetrieveDisable_main
|
|
}
|
|
type='primary'
|
|
onClick={this.onRetrieved.bind(this)}
|
|
>
|
|
{pt.get().ticketDetail.button.tookAway}
|
|
</AtButton>
|
|
</View>
|
|
<View
|
|
className='at-col'
|
|
style={{ marginRight: '20rpx', paddingLeft: '10rpx', width: '50%' }}
|
|
>
|
|
<AtButton
|
|
disabled={
|
|
this.state.isCommentDisable || this.state.isCommentDisable_main
|
|
}
|
|
loading={this.state.isCommentLoading}
|
|
type='secondary'
|
|
onClick={this.onAddComment.bind(this)}
|
|
>
|
|
{pt.get().ticketDetail.button.addNote}
|
|
</AtButton>
|
|
</View>
|
|
</View>
|
|
);
|
|
|
|
const isInfoShow = {
|
|
device: true,
|
|
createdTime: true,
|
|
description: true,
|
|
info: wechatUser.getAccess() ? true : false,
|
|
current: true,
|
|
notelist: true,
|
|
showAllNotes: true,
|
|
};
|
|
|
|
return (
|
|
<View>
|
|
<AtMessage />
|
|
<AtModal
|
|
isOpened={this.state.showOreoModal}
|
|
title={pt.get().modal.addToOreo.title}
|
|
cancelText={pt.get().modal.cancel}
|
|
confirmText={pt.get().modal.confirm}
|
|
onCancel={this.handleOreoCancel.bind(this)}
|
|
onConfirm={this.handleOreoConfirm.bind(this)}
|
|
content={pt.get().modal.addToOreo.content}
|
|
/>
|
|
<AtModal
|
|
isOpened={this.state.showRetrieveModal}
|
|
title={pt.get().modal.retrieve.title}
|
|
cancelText={pt.get().modal.cancel}
|
|
confirmText={pt.get().modal.confirm}
|
|
onCancel={this.handleRetrieveCancel.bind(this)}
|
|
onConfirm={this.handleRetrieveConfirm.bind(this)}
|
|
content={pt.get().modal.retrieve.content}
|
|
/>
|
|
<AtModal
|
|
isOpened={this.state.showPickModal}
|
|
title={pt.get().modal.pick.title}
|
|
cancelText={pt.get().modal.cancel}
|
|
confirmText={pt.get().modal.confirm}
|
|
onCancel={this.handlePickCancel.bind(this)}
|
|
onConfirm={this.handlePickConfirm.bind(this)}
|
|
content={pt.get().modal.pick.content}
|
|
/>
|
|
<AtFloatLayout
|
|
isOpened={this.state.showCommentLayout}
|
|
title={pt.get().ticketDetail.comment.title}
|
|
onClose={this.handleCommentCancel.bind(this)}
|
|
>
|
|
<AtForm onSubmit={this.onCommentSubmit.bind(this)}>
|
|
<AtTextarea
|
|
value={this.state.comment}
|
|
onChange={this.handleCommentChange.bind(this)}
|
|
maxLength={200}
|
|
height='400rpx'
|
|
placeholder={pt.get().ticketDetail.comment.placeholder}
|
|
/>
|
|
<AtButton formType='submit' type='primary'>
|
|
{pt.get().button.buttonText.submit}
|
|
</AtButton>
|
|
</AtForm>
|
|
</AtFloatLayout>
|
|
<AtActionSheet
|
|
isOpened={this.state.showStatusSheet}
|
|
cancelText={pt.get().ticketDetail.status.cancel}
|
|
title={pt.get().ticketDetail.status.title}
|
|
onCancel={this.handleStatusCancel.bind(this)}
|
|
onClose={this.handleStatusCancel.bind(this)}
|
|
>
|
|
<AtActionSheetItem onClick={this.handleStatusChange.bind(this, 0)}>
|
|
{pt.get().ticketDetail.statusModifyMessage['0']}
|
|
</AtActionSheetItem>
|
|
<AtActionSheetItem onClick={this.handleStatusChange.bind(this, 1)}>
|
|
{pt.get().ticketDetail.statusModifyMessage['1']}
|
|
</AtActionSheetItem>
|
|
<AtActionSheetItem onClick={this.handleStatusChange.bind(this, 2)}>
|
|
{pt.get().ticketDetail.statusModifyMessage['2']}
|
|
</AtActionSheetItem>
|
|
<AtActionSheetItem onClick={this.handleStatusChange.bind(this, 3)}>
|
|
{pt.get().ticketDetail.statusModifyMessage['3']}
|
|
</AtActionSheetItem>
|
|
<AtActionSheetItem onClick={this.handleStatusChange.bind(this, 4)}>
|
|
{pt.get().ticketDetail.statusModifyMessage['4']}
|
|
</AtActionSheetItem>
|
|
<AtActionSheetItem onClick={this.handleStatusChange.bind(this, 5)}>
|
|
{pt.get().ticketDetail.statusModifyMessage['5']}
|
|
</AtActionSheetItem>
|
|
<AtActionSheetItem onClick={this.handleStatusChange.bind(this, 6)}>
|
|
{pt.get().ticketDetail.statusModifyMessage['6']}
|
|
</AtActionSheetItem>
|
|
<AtActionSheetItem onClick={this.handleStatusChange.bind(this, 7)}>
|
|
{pt.get().ticketDetail.statusModifyMessage['7']}
|
|
</AtActionSheetItem>
|
|
</AtActionSheet>
|
|
<DetailFramework
|
|
middleButton={middleButton}
|
|
id={this.state.id}
|
|
isInfoShow={isInfoShow}
|
|
/>
|
|
<PageFooter />
|
|
</View>
|
|
);
|
|
}
|
|
}
|