From 3375e00b37e8490eeb308166cb68a694bd35ba0b Mon Sep 17 00:00:00 2001 From: Dawn1Ocean <1785590531@qq.com> Date: Sat, 6 Apr 2024 01:47:12 +0800 Subject: [PATCH] refactor state structure in ticketdetail --- mock/ticketInfo.json | 2 +- src/pages/TicketDetail/TicketDetail.tsx | 437 +++++++++++++++++------- src/pages/TicketDetail/TicketNote.ts | 2 +- src/pages/user/user.tsx | 2 +- src/service/addToOreo.ts | 15 +- src/service/changeStatus.ts | 19 +- src/service/getDisable.ts | 19 +- src/service/pickTicket.ts | 15 +- src/service/retrieve.ts | 15 +- src/service/submitComment.ts | 15 +- 10 files changed, 389 insertions(+), 152 deletions(-) diff --git a/mock/ticketInfo.json b/mock/ticketInfo.json index e219387..e536d2f 100644 --- a/mock/ticketInfo.json +++ b/mock/ticketInfo.json @@ -8,7 +8,7 @@ "description": "清灰", "workers": ["宇航员"], "createdTime": "2024-03-07T19:52:48.523303", - "status": 5, + "status": 4, "isConfirmed": false, "notes": [ { diff --git a/src/pages/TicketDetail/TicketDetail.tsx b/src/pages/TicketDetail/TicketDetail.tsx index ec12414..f02c586 100644 --- a/src/pages/TicketDetail/TicketDetail.tsx +++ b/src/pages/TicketDetail/TicketDetail.tsx @@ -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; statusToBe: number; } @@ -60,29 +75,43 @@ export default class TicketDetail extends Component<{}, TicketDetailState> { state: Readonly = { 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%' }} > { style={{ marginLeft: '20rpx', paddingRight: '10rpx', width: '50%' }} > { style={{ marginLeft: '20rpx', paddingRight: '10rpx', width: '50%' }} > @@ -370,9 +558,10 @@ export default class TicketDetail extends Component<{}, TicketDetailState> { > @@ -391,9 +580,10 @@ export default class TicketDetail extends Component<{}, TicketDetailState> { style={{ marginLeft: '20rpx', paddingRight: '10rpx', width: '50%' }} > { > @@ -419,6 +609,26 @@ export default class TicketDetail extends Component<{}, TicketDetailState> { ); + const actionSheetItemList: Array = [ + '0', + '1', + '2', + '3', + '4', + '5', + '6', + '7', + ]; + + const sheetItemsRenderer = actionSheetItemList.map((item, idx) => ( + + {pt.get().ticketDetail.statusModifyMessage.get(item)} + + )); + const isInfoShow = { device: true, createdTime: true, @@ -433,7 +643,7 @@ export default class TicketDetail extends Component<{}, TicketDetailState> { { content={pt.get().modal.addToOreo.content} /> { content={pt.get().modal.retrieve.content} /> { content={pt.get().modal.pick.content} /> @@ -478,7 +688,7 @@ export default class TicketDetail extends Component<{}, TicketDetailState> { @@ -489,46 +699,23 @@ export default class TicketDetail extends Component<{}, TicketDetailState> { onChange={this.handleReminderChange.bind(this)} /> {pt.get().button.buttonText.submit} - - {pt.get().ticketDetail.statusModifyMessage.get('0')} - - - {pt.get().ticketDetail.statusModifyMessage.get('1')} - - - {pt.get().ticketDetail.statusModifyMessage.get('2')} - - - {pt.get().ticketDetail.statusModifyMessage.get('3')} - - - {pt.get().ticketDetail.statusModifyMessage.get('4')} - - - {pt.get().ticketDetail.statusModifyMessage.get('5')} - - - {pt.get().ticketDetail.statusModifyMessage.get('6')} - - - {pt.get().ticketDetail.statusModifyMessage.get('7')} - + {sheetItemsRenderer} - EVA Eta v1.0.1 + EVA Eta v1.0.2 { 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, diff --git a/src/service/changeStatus.ts b/src/service/changeStatus.ts index a1096d4..39b4445 100644 --- a/src/service/changeStatus.ts +++ b/src/service/changeStatus.ts @@ -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, diff --git a/src/service/getDisable.ts b/src/service/getDisable.ts index 09ef6fe..4a6cdce 100644 --- a/src/service/getDisable.ts +++ b/src/service/getDisable.ts @@ -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)) { - that.setState({ - isPickDisable_main: true, - }); + isDisable_main.pick = true; } } + that.setState({ + isDisable_main: { + ...that.state.isDisable_main, + retrieve: isDisable_main.retrieve, + comment: isDisable_main.comment, + pick: isDisable_main.pick, + }, + }); }) .catch((reason) => { console.log(reason.errMsg); diff --git a/src/service/pickTicket.ts b/src/service/pickTicket.ts index 5b70219..47ebc04 100644 --- a/src/service/pickTicket.ts +++ b/src/service/pickTicket.ts @@ -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, diff --git a/src/service/retrieve.ts b/src/service/retrieve.ts index 9edd6eb..fd06372 100644 --- a/src/service/retrieve.ts +++ b/src/service/retrieve.ts @@ -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, diff --git a/src/service/submitComment.ts b/src/service/submitComment.ts index cc5f9d7..32134a0 100644 --- a/src/service/submitComment.ts +++ b/src/service/submitComment.ts @@ -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,