add confirm modal for buttons in ticketdetail

2024-03-16 16:45:41 +08:00 · 2024-03-16 16:45:41 +08:00 · cce351750d
parent ac9645b987
commit cce351750d
4 changed files with 202 additions and 38 deletions
--- a/src/components/TicketListItem/TicketListItem.tsx
+++ b/src/components/TicketListItem/TicketListItem.tsx
@ -15,7 +15,6 @@ export class TicketListItem {
  status: FixStatus;
  createAt: moment.Moment;
  iconMap: Map<FixStatus, string>;
-  isMember: boolean;

  constructor(
    id: number,
@ -23,14 +22,12 @@ export class TicketListItem {
    model: string,
    status: FixStatus,
    createAt: moment.Moment,
-    isMember: boolean,
  ) {
    this.id = id;
    this.brand = brand;
    this.model = model;
    this.status = status;
    this.createAt = createAt;
-    this.isMember = isMember;
    this.iconMap = new Map<FixStatus, string>([
      [1, repair],
      [2, repair],
@ -51,11 +48,7 @@ export class TicketListItem {
        thumb={this.iconMap.get(this.status)}
        onClick={() => {
          Taro.navigateTo({
-            url:
-              '/pages/TicketDetail/TicketDetail?id=' +
-              this.id +
-              '&isMember=' +
-              this.isMember,
+            url: '/pages/TicketDetail/TicketDetail?id=' + this.id,
          });
        }}
      />
--- a/src/pages/TicketDetail/TicketDetail.tsx
+++ b/src/pages/TicketDetail/TicketDetail.tsx
@ -3,6 +3,8 @@ import { View } from '@tarojs/components';
 import { getCurrentInstance } from '@tarojs/runtime';
 import pt from '@/plain-text';
 import {
+  AtActionSheet,
+  AtActionSheetItem,
  AtButton,
  AtFloatLayout,
  AtForm,
@ -14,6 +16,7 @@ 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';

 const submitInterval = 5000;

@ -22,6 +25,9 @@ interface TicketDetailState {
  isMember: boolean;
  showOreoModal: boolean;
  showCommentModal: boolean;
+  showRetrieveModal: boolean;
+  showStatusSheet: boolean;
+  showPickModal: boolean;
  comment: string;
  isLoading: boolean;
  isDisable: boolean;
@ -33,6 +39,9 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
    isMember: false,
    showOreoModal: false,
    showCommentModal: false,
+    showRetrieveModal: false,
+    showStatusSheet: false,
+    showPickModal: false,
    comment: '',
    isLoading: false,
    isDisable: false,
@ -41,10 +50,9 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
  componentDidMount(): void {
    const { router } = getCurrentInstance();
    const id = router?.params.id as number;
-    const isMember = router?.params.isMember as boolean;
    this.setState({
      id: id,
-      isMember: isMember,
+      isMember: wechatUser.getAccess(),
    });
  }

@ -60,6 +68,24 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
    });
  }

+  onRetrieved(): void {
+    this.setState({
+      showRetrieveModal: true,
+    });
+  }
+
+  onPick(): void {
+    this.setState({
+      showPickModal: true,
+    });
+  }
+
+  onChangeStatus(): void {
+    this.setState({
+      showStatusSheet: true,
+    });
+  }
+
  handleOreoCancel(): void {
    this.setState({
      showOreoModal: false,
@ -72,6 +98,24 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
    });
  }

+  handleRetrieveCancel(): void {
+    this.setState({
+      showRetrieveModal: false,
+    });
+  }
+
+  handleStatusCancel(): void {
+    this.setState({
+      showStatusSheet: false,
+    });
+  }
+
+  handlePickCancel(): void {
+    this.setState({
+      showPickModal: false,
+    });
+  }
+
  handleOreoConfirm(): void {
    return;
  }
@ -80,6 +124,20 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
    return;
  }

+  handleRetrieveConfirm(): void {
+    return;
+  }
+
+  handlePickConfirm(): void {
+    return;
+  }
+
+  handleStatusChange(status: number): void {
+    this.setState({
+      showStatusSheet: false,
+    });
+  }
+
  handleCommentChange(comment: string) {
    this.setState({
      comment: comment,
@ -113,29 +171,48 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {

  render(): ReactNode {
    const middleButton = this.state.isMember ? (
+      <View>
        <View
          className='at-row'
          style={{ paddingTop: 10, paddingBottom: 10, width: '100%' }}
        >
          <View
            className='at-col'
-          style={{ marginLeft: 10, paddingRight: 5, width: '33%' }}
+            style={{ marginLeft: 10, paddingRight: 5, width: '50%' }}
          >
-          <AtButton type='secondary'>{pt.get().ticketDetail.pick}</AtButton>
+            <AtButton type='secondary' onClick={this.onPick.bind(this)}>
+              {pt.get().ticketDetail.pick}
+            </AtButton>
          </View>
          <View
            className='at-col'
-          style={{ marginLeft: 10, paddingRight: 5, width: '33%' }}
-          onClick={this.onAddToOreo.bind(this)}
+            style={{ marginLeft: 10, paddingRight: 5, width: '50%' }}
          >
-          <AtButton type='primary'>{pt.get().ticketDetail.addToOreo}</AtButton>
+            <AtButton type='primary' onClick={this.onAddToOreo.bind(this)}>
+              {pt.get().ticketDetail.addToOreo}
+            </AtButton>
+          </View>
+        </View>
+        <View
+          className='at-row'
+          style={{ paddingTop: 10, paddingBottom: 10, width: '100%' }}
+        >
+          <View
+            className='at-col'
+            style={{ marginLeft: 10, paddingRight: 5, width: '50%' }}
+          >
+            <AtButton type='primary' onClick={this.onChangeStatus.bind(this)}>
+              {pt.get().ticketDetail.status.button}
+            </AtButton>
          </View>
          <View
            className='at-col'
-          style={{ marginRight: 10, paddingLeft: 5, width: '33%' }}
-          onClick={this.onAddComment.bind(this)}
+            style={{ marginLeft: 10, paddingRight: 5, width: '50%' }}
          >
-          <AtButton type='secondary'>{pt.get().ticketDetail.addNote}</AtButton>
+            <AtButton type='secondary' onClick={this.onAddComment.bind(this)}>
+              {pt.get().ticketDetail.addNote}
+            </AtButton>
+          </View>
        </View>
      </View>
    ) : (
@ -147,13 +224,17 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
          className='at-col'
          style={{ marginLeft: 10, paddingRight: 5, width: '50%' }}
        >
-          <AtButton type='primary'>{pt.get().ticketDetail.tookAway}</AtButton>
+          <AtButton type='primary' onClick={this.onRetrieved.bind(this)}>
+            {pt.get().ticketDetail.tookAway}
+          </AtButton>
        </View>
        <View
          className='at-col'
          style={{ marginRight: 10, paddingLeft: 5, width: '50%' }}
        >
-          <AtButton type='secondary'>{pt.get().ticketDetail.addNote}</AtButton>
+          <AtButton type='secondary' onClick={this.onChangeStatus.bind(this)}>
+            {pt.get().ticketDetail.addNote}
+          </AtButton>
        </View>
      </View>
    );
@ -178,6 +259,24 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
          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.showCommentModal}
          title={pt.get().ticketDetail.comment.title}
@ -202,6 +301,32 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
            </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.status.status0}
+          </AtActionSheetItem>
+          <AtActionSheetItem onClick={this.handleStatusChange.bind(this, 1)}>
+            {pt.get().ticketDetail.status.status1}
+          </AtActionSheetItem>
+          <AtActionSheetItem onClick={this.handleStatusChange.bind(this, 2)}>
+            {pt.get().ticketDetail.status.status2}
+          </AtActionSheetItem>
+          <AtActionSheetItem onClick={this.handleStatusChange.bind(this, 3)}>
+            {pt.get().ticketDetail.status.status3}
+          </AtActionSheetItem>
+          <AtActionSheetItem onClick={this.handleStatusChange.bind(this, 4)}>
+            {pt.get().ticketDetail.status.status4}
+          </AtActionSheetItem>
+          <AtActionSheetItem onClick={this.handleStatusChange.bind(this, 5)}>
+            {pt.get().ticketDetail.status.status5}
+          </AtActionSheetItem>
+        </AtActionSheet>
        <DetailFramework
          middleButton={middleButton}
          id={this.state.id}
--- a/src/plain-text/Modal.ts
+++ b/src/plain-text/Modal.ts
@ -1,5 +1,5 @@
 export interface ModalText {
-  comment: {
+  pick: {
    title: string;
    content: string;
  };
@ -7,32 +7,45 @@ export interface ModalText {
    title: string;
    content: string;
  };
+  retrieve: {
+    title: string;
+    content: string;
+  };
  cancel: string;
  confirm: string;
 }

 export const modalZhCn: ModalText = {
-  comment: {
-    title: '添加评论',
-    content: '',
+  pick: {
+    title: '认领此工单',
+    content: '工单可多人认领！认领后将无法撤销！',
  },
  addToOreo: {
    title: '将工单加入 Oreo',
    content: '确认加入 Oreo？加入后将无法撤回！',
  },
+  retrieve: {
+    title: '机器取回确认',
+    content: '确认该机器已取回？取回后工单完成，将无法添加评论！',
+  },
  cancel: '取消',
  confirm: '确认',
 };

 export const modalEnUs: ModalText = {
-  comment: {
-    title: 'Add comment',
-    content: '',
+  pick: {
+    title: 'Pick this ticket',
+    content: '工单可多人认领！认领后将无法撤销！',
  },
  addToOreo: {
    title: 'Add ticket to Oreo',
    content: 'Once Confirmed, the change will be irrevocably!',
  },
+  retrieve: {
+    title: 'Confirm the retrieving',
+    content:
+      'Once Confirmed, the ticket will be closed and cannot add any comment!',
+  },
  cancel: 'Cancel',
  confirm: 'Confirm',
 };
--- a/src/plain-text/TicketDetail.ts
+++ b/src/plain-text/TicketDetail.ts
@ -18,6 +18,17 @@ export interface TicketDetailText {
    title: string;
    placeholder: string;
  };
+  status: {
+    button: string;
+    title: string;
+    cancel: string;
+    status0: string;
+    status1: string;
+    status2: string;
+    status3: string;
+    status4: string;
+    status5: string;
+  };
 }

 export const ticketDetailZhCn: TicketDetailText = {
@ -45,6 +56,17 @@ export const ticketDetailZhCn: TicketDetailText = {
    title: '添加评论',
    placeholder: '可以在这里交流机器情况、维修进度、提出问题~',
  },
+  status: {
+    button: '改变工单状态',
+    title: '请选择要改变成为的状态',
+    cancel: '取消',
+    status0: '',
+    status1: '',
+    status2: '',
+    status3: '',
+    status4: '',
+    status5: '',
+  },
 };

 export const ticketDetailEnUs: TicketDetailText = {
@ -69,7 +91,18 @@ export const ticketDetailEnUs: TicketDetailText = {
  addNote: 'Comment',
  pick: 'Pick',
  comment: {
-    title: '添加评论',
+    title: 'Add Comment',
    placeholder: '可以在这里交流机器情况、维修进度、提出问题~',
  },
+  status: {
+    button: 'Change Status',
+    title: '请选择要改变成为的状态',
+    cancel: 'Cancel',
+    status0: '',
+    status1: '',
+    status2: '',
+    status3: '',
+    status4: '',
+    status5: '',
+  },
 };