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

refactor state structure in ticketdetail

dev
Dawn1Ocean 2024-04-06 01:47:12 +08:00
parent b14d9c363d
commit 3375e00b37
10 changed files with 389 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
mock/ticketInfo.json
View File

@ -8,7 +8,7 @@
"description": "清灰",
"workers": ["宇航员"],
"createdTime": "2024-03-07T19:52:48.523303",
"status": 5,
"status": 4,
"isConfirmed": false,
"notes": [
{

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

@ -23,35 +23,50 @@ import { pickTicket } from '@/service/pickTicket';
import { retrieve } from '@/service/retrieve';
import { changeStatus } from '@/service/changeStatus';
import { getDisable } from '@/service/getDisable';
import { StatusStr } from './TicketNote';
const submitInterval = 5000;
interface TicketDetailState {
id: number;
isMember: boolean;
showOreoModal: boolean;
showCommentLayout: boolean;
showReminderLayout: boolean;
showRetrieveModal: boolean;
showStatusSheet: boolean;
showPickModal: boolean;
show: {
modal: {
oreo: boolean;
retrieve: boolean;
pick: boolean;
};
layout: {
comment: boolean;
reminder: boolean;
};
actionSheet: {
status: 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;
isReminderLoading: boolean;
isReminderDisable: boolean;
isLoading: {
oreo: boolean;
pick: boolean;
retrieve: boolean;
comment: boolean;
status: boolean;
reminder: boolean;
};
isDisable: {
oreo: boolean;
pick: boolean;
retrieve: boolean;
comment: boolean;
status: boolean;
reminder: boolean;
};
isDisable_main: {
oreo: boolean;
pick: boolean;
retrieve: boolean;
comment: boolean;
};
reminderList: Array<number>;
statusToBe: number;
}
@ -60,29 +75,43 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
state: Readonly<TicketDetailState> = {
id: 0,
isMember: false,
showOreoModal: false,
showCommentLayout: false,
showReminderLayout: false,
showRetrieveModal: false,
showStatusSheet: false,
showPickModal: false,
show: {
modal: {
oreo: false,
retrieve: false,
pick: false,
},
layout: {
comment: false,
reminder: false,
},
actionSheet: {
status: 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,
isReminderDisable: false,
isReminderLoading: false,
isLoading: {
oreo: false,
pick: false,
retrieve: false,
comment: false,
status: false,
reminder: false,
},
isDisable: {
oreo: false,
pick: false,
retrieve: false,
comment: false,
status: false,
reminder: false,
},
isDisable_main: {
oreo: false,
pick: false,
retrieve: false,
comment: false,
},
reminderList: [],
statusToBe: 0,
};
@ -99,79 +128,157 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
onAddToOreo(): void {
this.setState({
showOreoModal: true,
show: {
...this.state.show,
modal: {
...this.state.show.modal,
oreo: true,
},
},
});
}
onAddComment(): void {
this.setState({
showCommentLayout: true,
show: {
...this.state.show,
layout: {
...this.state.show.layout,
comment: true,
},
},
});
}
onRetrieved(): void {
this.setState({
showRetrieveModal: true,
show: {
...this.state.show,
modal: {
...this.state.show.modal,
retrieve: true,
},
},
});
}
onPick(): void {
this.setState({
showPickModal: true,
show: {
...this.state.show,
modal: {
...this.state.show.modal,
pick: true,
},
},
});
}
onChangeStatus(): void {
this.setState({
showStatusSheet: true,
show: {
...this.state.show,
actionSheet: {
...this.state.show.actionSheet,
status: true,
},
},
});
}
handleOreoCancel(): void {
this.setState({
showOreoModal: false,
show: {
...this.state.show,
modal: {
...this.state.show.modal,
oreo: false,
},
},
});
}
handleCommentCancel(): void {
this.setState({
showCommentLayout: false,
show: {
...this.state.show,
layout: {
...this.state.show.layout,
comment: false,
},
},
});
}
handleReminderCancel(): void {
this.setState({
showReminderLayout: false,
show: {
...this.state.show,
layout: {
...this.state.show.layout,
reminder: false,
},
},
});
}
handleRetrieveCancel(): void {
this.setState({
showRetrieveModal: false,
show: {
...this.state.show,
modal: {
...this.state.show.modal,
retrieve: false,
},
},
});
}
handleStatusCancel(): void {
this.setState({
showStatusSheet: false,
show: {
...this.state.show,
actionSheet: {
...this.state.show.actionSheet,
status: false,
},
},
});
}
handlePickCancel(): void {
this.setState({
showPickModal: false,
show: {
...this.state.show,
modal: {
...this.state.show.modal,
pick: false,
},
},
});
}
handleOreoConfirm(): void {
this.setState({
isOreoDisable: true,
showOreoModal: false,
isDisable: {
...this.state.isDisable,
oreo: true,
},
show: {
...this.state.show,
modal: {
...this.state.show.modal,
oreo: false,
},
},
});
addToOreo(this);
setTimeout(() => {
this.setState({
isOreoDisable: false,
isDisable: {
...this.state.isDisable,
oreo: false,
},
});
}, submitInterval);
return;
@ -179,13 +286,25 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
handleRetrieveConfirm(): void {
this.setState({
isRetrieveDisable: true,
showRetrieveModal: false,
isDisable: {
...this.state.isDisable,
retrieve: true,
},
show: {
...this.state.show,
modal: {
...this.state.show.modal,
retrieve: false,
},
},
});
retrieve(this);
setTimeout(() => {
this.setState({
isRetrieveDisable: false,
isDisable: {
...this.state.isDisable,
retrieve: false,
},
});
}, submitInterval);
return;
@ -193,34 +312,72 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
handlePickConfirm(): void {
this.setState({
isPickDisable: true,
showPickModal: false,
isDisable: {
...this.state.isDisable,
pick: true,
},
show: {
...this.state.show,
modal: {
...this.state.show.modal,
pick: false,
},
},
});
pickTicket(this);
setTimeout(() => {
this.setState({
isPickDisable: false,
isDisable: {
...this.state.isDisable,
pick: false,
},
});
}, submitInterval);
return;
}
handleStatusChange(status: number): void {
this.setState({
showStatusSheet: false,
isStatusDisable: true,
});
if (status == 3 || status == 5 || status == 7) {
this.setState({
showReminderLayout: true,
isDisable: {
...this.state.isDisable,
status: true,
},
show: {
...this.state.show,
actionSheet: {
...this.state.show.actionSheet,
status: false,
},
layout: {
...this.state.show.layout,
reminder: true,
},
},
statusToBe: status,
});
} else {
changeStatus(this, status);
this.setState({
isDisable: {
...this.state.isDisable,
status: true,
},
show: {
...this.state.show,
actionSheet: {
...this.state.show.actionSheet,
status: false,
},
},
});
changeStatus(this);
}
setTimeout(() => {
this.setState({
isStatusDisable: false,
isDisable: {
...this.state.isDisable,
status: false,
},
});
}, submitInterval);
return;
@ -235,8 +392,17 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
onCommentSubmit() {
this.setState({
isCommentDisable: true,
showCommentLayout: false,
isDisable: {
...this.state.isDisable,
comment: true,
},
show: {
...this.state.show,
layout: {
...this.state.show.layout,
comment: false,
},
},
});
if (this.state.comment == '') {
Taro.atMessage({
@ -245,7 +411,10 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
});
setTimeout(() => {
this.setState({
isCommentDisable: false,
isDisable: {
...this.state.isDisable,
comment: false,
},
});
}, submitInterval);
return;
@ -253,7 +422,10 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
submitComment(this);
setTimeout(() => {
this.setState({
isCommentDisable: false,
isDisable: {
...this.state.isDisable,
comment: false,
},
});
}, submitInterval);
}
@ -266,18 +438,31 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
}
onReminderSubmit() {
this.setState({
isReminderDisable: true,
});
if (
this.state.reminderList.includes(1) &&
this.state.reminderList.includes(3)
) {
this.setState({
showReminderLayout: false,
isDisable: {
...this.state.isDisable,
reminder: true,
},
show: {
...this.state.show,
layout: {
...this.state.show.layout,
reminder: false,
},
},
});
changeStatus(this, this.state.statusToBe);
changeStatus(this);
} else {
this.setState({
isDisable: {
...this.state.isDisable,
reminder: true,
},
});
Taro.atMessage({
message: pt.get().ticketDetail.reminder.error,
type: 'error',
@ -285,7 +470,10 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
}
setTimeout(() => {
this.setState({
isReminderDisable: false,
isDisable: {
...this.state.isDisable,
reminder: false,
},
});
}, submitInterval);
}
@ -321,9 +509,9 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
style={{ marginLeft: '20rpx', paddingRight: '10rpx', width: '50%' }}
>
<AtButton
loading={this.state.isPickLoading}
loading={this.state.isLoading.pick}
disabled={
this.state.isPickDisable || this.state.isPickDisable_main
this.state.isDisable.pick || this.state.isDisable_main.pick
}
type='secondary'
onClick={this.onPick.bind(this)}
@ -336,9 +524,9 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
style={{ marginLeft: '20rpx', paddingRight: '10rpx', width: '50%' }}
>
<AtButton
loading={this.state.isOreoLoading}
loading={this.state.isLoading.oreo}
disabled={
this.state.isOreoDisable || this.state.isOreoDisable_main
this.state.isDisable.oreo || this.state.isDisable_main.oreo
}
type='primary'
onClick={this.onAddToOreo.bind(this)}
@ -356,8 +544,8 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
style={{ marginLeft: '20rpx', paddingRight: '10rpx', width: '50%' }}
>
<AtButton
loading={this.state.isStatusLoading}
disabled={this.state.isStatusDisable}
loading={this.state.isLoading.status}
disabled={this.state.isDisable.status}
type='primary'
onClick={this.onChangeStatus.bind(this)}
>
@ -370,9 +558,10 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
>
<AtButton
disabled={
this.state.isCommentDisable || this.state.isCommentDisable_main
this.state.isDisable.comment ||
this.state.isDisable_main.comment
}
loading={this.state.isCommentLoading}
loading={this.state.isLoading.comment}
type='secondary'
onClick={this.onAddComment.bind(this)}
>
@ -391,9 +580,10 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
style={{ marginLeft: '20rpx', paddingRight: '10rpx', width: '50%' }}
>
<AtButton
loading={this.state.isRetrieveLoading}
loading={this.state.isLoading.retrieve}
disabled={
this.state.isRetrieveDisable || this.state.isRetrieveDisable_main
this.state.isDisable.retrieve ||
this.state.isDisable_main.retrieve
}
type='primary'
onClick={this.onRetrieved.bind(this)}
@ -407,9 +597,9 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
>
<AtButton
disabled={
this.state.isCommentDisable || this.state.isCommentDisable_main
this.state.isDisable.comment || this.state.isDisable_main.comment
}
loading={this.state.isCommentLoading}
loading={this.state.isLoading.comment}
type='secondary'
onClick={this.onAddComment.bind(this)}
>
@ -419,6 +609,26 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
</View>
);
const actionSheetItemList: Array<StatusStr> = [
'0',
'1',
'2',
'3',
'4',
'5',
'6',
'7',
];
const sheetItemsRenderer = actionSheetItemList.map((item, idx) => (
<AtActionSheetItem
key={idx}
onClick={this.handleStatusChange.bind(this, idx)}
>
{pt.get().ticketDetail.statusModifyMessage.get(item)}
</AtActionSheetItem>
));
const isInfoShow = {
device: true,
createdTime: true,
@ -433,7 +643,7 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
<View>
<AtMessage />
<AtModal
isOpened={this.state.showOreoModal}
isOpened={this.state.show.modal.oreo}
title={pt.get().modal.addToOreo.title}
cancelText={pt.get().modal.cancel}
confirmText={pt.get().modal.confirm}
@ -442,7 +652,7 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
content={pt.get().modal.addToOreo.content}
/>
<AtModal
isOpened={this.state.showRetrieveModal}
isOpened={this.state.show.modal.retrieve}
title={pt.get().modal.retrieve.title}
cancelText={pt.get().modal.cancel}
confirmText={pt.get().modal.confirm}
@ -451,7 +661,7 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
content={pt.get().modal.retrieve.content}
/>
<AtModal
isOpened={this.state.showPickModal}
isOpened={this.state.show.modal.pick}
title={pt.get().modal.pick.title}
cancelText={pt.get().modal.cancel}
confirmText={pt.get().modal.confirm}
@ -460,7 +670,7 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
content={pt.get().modal.pick.content}
/>
<AtFloatLayout
isOpened={this.state.showCommentLayout}
isOpened={this.state.show.layout.comment}
title={pt.get().ticketDetail.comment.title}
onClose={this.handleCommentCancel.bind(this)}
>
@ -478,7 +688,7 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
</AtForm>
</AtFloatLayout>
<AtFloatLayout
isOpened={this.state.showReminderLayout}
isOpened={this.state.show.layout.reminder}
title={pt.get().ticketDetail.reminder.title}
onClose={this.handleReminderCancel.bind(this)}
>
@ -489,46 +699,23 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
onChange={this.handleReminderChange.bind(this)}
/>
<AtButton
loading={this.state.isReminderLoading}
loading={this.state.isLoading.reminder}
formType='submit'
type='primary'
disabled={this.state.isReminderDisable}
disabled={this.state.isDisable.reminder}
>
{pt.get().button.buttonText.submit}
</AtButton>
</AtForm>
</AtFloatLayout>
<AtActionSheet
isOpened={this.state.showStatusSheet}
isOpened={this.state.show.actionSheet.status}
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.get('0')}
</AtActionSheetItem>
<AtActionSheetItem onClick={this.handleStatusChange.bind(this, 1)}>
{pt.get().ticketDetail.statusModifyMessage.get('1')}
</AtActionSheetItem>
<AtActionSheetItem onClick={this.handleStatusChange.bind(this, 2)}>
{pt.get().ticketDetail.statusModifyMessage.get('2')}
</AtActionSheetItem>
<AtActionSheetItem onClick={this.handleStatusChange.bind(this, 3)}>
{pt.get().ticketDetail.statusModifyMessage.get('3')}
</AtActionSheetItem>
<AtActionSheetItem onClick={this.handleStatusChange.bind(this, 4)}>
{pt.get().ticketDetail.statusModifyMessage.get('4')}
</AtActionSheetItem>
<AtActionSheetItem onClick={this.handleStatusChange.bind(this, 5)}>
{pt.get().ticketDetail.statusModifyMessage.get('5')}
</AtActionSheetItem>
<AtActionSheetItem onClick={this.handleStatusChange.bind(this, 6)}>
{pt.get().ticketDetail.statusModifyMessage.get('6')}
</AtActionSheetItem>
<AtActionSheetItem onClick={this.handleStatusChange.bind(this, 7)}>
{pt.get().ticketDetail.statusModifyMessage.get('7')}
</AtActionSheetItem>
{sheetItemsRenderer}
</AtActionSheet>
<DetailFramework
middleButton={middleButton}

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

@ -30,4 +30,4 @@ export class ShowElements {
notelist: JSX.Element;
}
export type StatusStr = '1' | '2' | '3' | '4' | '5';
export type StatusStr = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7';

2
src/pages/user/user.tsx
View File

@ -123,7 +123,7 @@ export default class UserPage extends Component {
className='at-row at-row__justify--center at-row__align--center'
style='height:120rpx;color:#696969;'
>
<Text style={{ fontSize: '32rpx' }}> EVA Eta v1.0.1</Text>
<Text style={{ fontSize: '32rpx' }}> EVA Eta v1.0.2</Text>
</View>
<AtList>
<AtListItem

15
src/service/addToOreo.ts
View File

@ -6,7 +6,10 @@ import { getUrl } from '.';
export function addToOreo(that: TicketDetail) {
that.setState({
isOreoLoading: true,
isLoading: {
...that.state.isLoading,
oreo: true,
},
});
Taro.request({
url: getUrl('/tickets/addtooreo'),
@ -19,7 +22,10 @@ export function addToOreo(that: TicketDetail) {
.then((res) => {
console.log(res.data);
that.setState({
isOreoLoading: false,
isLoading: {
...that.state.isLoading,
oreo: false,
},
});
Taro.atMessage({
message: pt.get().button.submitText.success,
@ -29,7 +35,10 @@ export function addToOreo(that: TicketDetail) {
.catch((err) => {
console.log(err.errMsg);
that.setState({
isOreoLoading: false,
isLoading: {
...that.state.isLoading,
oreo: false,
},
});
Taro.atMessage({
message: pt.get().button.submitText.error + err.errMsg,

19
src/service/changeStatus.ts
View File

@ -6,9 +6,12 @@ import { getUrl } from '.';
const reLaunchInterval = 1000;
export function changeStatus(that: TicketDetail, status: number) {
export function changeStatus(that: TicketDetail) {
that.setState({
isStatusLoading: true,
isLoading: {
...that.state.isLoading,
status: true,
},
});
Taro.request({
url: getUrl('/tickets/update'),
@ -16,13 +19,16 @@ export function changeStatus(that: TicketDetail, status: number) {
data: {
token: wechatUser.getToken(),
id: that.state.id,
status: status,
status: that.state.statusToBe,
},
})
.then((res) => {
console.log(res.data);
that.setState({
isStatusLoading: false,
isLoading: {
...that.state.isLoading,
status: false,
},
});
Taro.atMessage({
message: pt.get().button.submitText.success,
@ -37,7 +43,10 @@ export function changeStatus(that: TicketDetail, status: number) {
.catch((err) => {
console.log(err.errMsg);
that.setState({
isStatusLoading: false,
isLoading: {
...that.state.isLoading,
status: false,
},
});
Taro.atMessage({
message: pt.get().button.submitText.error + err.errMsg,

19
src/service/getDisable.ts
View File

@ -13,19 +13,24 @@ export function getDisable(that: TicketDetail, id: number) {
})
.then((res) => {
const data = res.data.data;
let isDisable_main = that.state.isDisable_main;
if (data.status === 3 || data.status === 5 || data.status === 7) {
that.setState({
isRetrieveDisable_main: true,
isCommentDisable_main: true,
});
isDisable_main.retrieve = true;
isDisable_main.comment = true;
}
if (wechatUser.getAccess()) {
if (data.workers.includes(wechatUser.getInfo().name)) {
isDisable_main.pick = true;
}
}
that.setState({
isPickDisable_main: true,
isDisable_main: {
...that.state.isDisable_main,
retrieve: isDisable_main.retrieve,
comment: isDisable_main.comment,
pick: isDisable_main.pick,
},
});
}
}
})
.catch((reason) => {
console.log(reason.errMsg);

15
src/service/pickTicket.ts
View File

@ -8,7 +8,10 @@ const reLaunchInterval = 1000;
export function pickTicket(that: TicketDetail) {
that.setState({
isPickLoading: true,
isLoading: {
...that.state.isLoading,
pick: true,
},
});
Taro.request({
url: getUrl('/tickets/pick'),
@ -21,7 +24,10 @@ export function pickTicket(that: TicketDetail) {
.then((res) => {
console.log(res.data);
that.setState({
isPickLoading: false,
isLoading: {
...that.state.isLoading,
pick: false,
},
});
Taro.atMessage({
message: pt.get().button.submitText.success,
@ -36,7 +42,10 @@ export function pickTicket(that: TicketDetail) {
.catch((err) => {
console.log(err.errMsg);
that.setState({
isPickLoading: false,
isLoading: {
...that.state.isLoading,
pick: false,
},
});
Taro.atMessage({
message: pt.get().button.submitText.error + err.errMsg,

15
src/service/retrieve.ts
View File

@ -8,7 +8,10 @@ const reLaunchInterval = 1000;
export function retrieve(that: TicketDetail) {
that.setState({
isRetrieveLoading: true,
isLoading: {
...that.state.isLoading,
retrieve: true,
},
});
Taro.request({
url: getUrl('/tickets/retrieve'),
@ -21,7 +24,10 @@ export function retrieve(that: TicketDetail) {
.then((res) => {
console.log(res.data);
that.setState({
isRetrieveLoading: false,
isLoading: {
...that.state.isLoading,
retrieve: false,
},
});
Taro.atMessage({
message: pt.get().button.submitText.success,
@ -36,7 +42,10 @@ export function retrieve(that: TicketDetail) {
.catch((err) => {
console.log(err.errMsg);
that.setState({
isRetrieveLoading: false,
isLoading: {
...that.state.isLoading,
retrieve: false,
},
});
Taro.atMessage({
message: pt.get().button.submitText.error + err.errMsg,

15
src/service/submitComment.ts
View File

@ -8,7 +8,10 @@ const reLaunchInterval = 1000;
export function submitComment(that: TicketDetail) {
that.setState({
isCommentLoading: true,
isLoading: {
...that.state.isLoading,
comment: true,
},
});
Taro.request({
url: getUrl('/report'),
@ -21,7 +24,10 @@ export function submitComment(that: TicketDetail) {
.then((res) => {
console.log(res.data);
that.setState({
isCommentLoading: false,
isLoading: {
...that.state.isLoading,
comment: false,
},
});
Taro.atMessage({
message: pt.get().button.submitText.success,
@ -36,7 +42,10 @@ export function submitComment(that: TicketDetail) {
.catch((err) => {
console.log(err.errMsg);
that.setState({
isCommentLoading: false,
isLoading: {
...that.state.isLoading,
comment: false,
},
});
Taro.atMessage({
message: pt.get().button.submitText.error + err.errMsg,