From 0351819fa2a527a5995ed62db523b5a73f0bdbb9 Mon Sep 17 00:00:00 2001
From: Dawn1Ocean <1785590531@qq.com>
Date: Thu, 11 Apr 2024 17:01:08 +0800
Subject: [PATCH] add confirm modal in AskLeave

---
 mock/api.ts                     |   2 +-
 src/pages/AskLeave/AskLeave.tsx | 106 +++++++++++++++++++++++++-------
 src/plain-text/AskLeave.ts      |  25 ++++++++
 3 files changed, 110 insertions(+), 23 deletions(-)

diff --git a/mock/api.ts b/mock/api.ts
index 6291236..fc7b1b3 100644
--- a/mock/api.ts
+++ b/mock/api.ts
@@ -135,7 +135,7 @@ export default {
   'GET /checklogin': {
     success: true,
     data: {
-      islogin: false,
+      islogin: true,
     },
   },
 };
diff --git a/src/pages/AskLeave/AskLeave.tsx b/src/pages/AskLeave/AskLeave.tsx
index 2e25aea..80dd156 100644
--- a/src/pages/AskLeave/AskLeave.tsx
+++ b/src/pages/AskLeave/AskLeave.tsx
@@ -6,6 +6,7 @@ import {
   AtInput,
   AtList,
   AtListItem,
+  AtModal,
 } from 'taro-ui';
 import { Component, ReactNode } from 'react';
 import Taro from '@tarojs/taro';
@@ -20,11 +21,12 @@ export default class AskLeavePage extends Component {
   state = {
     isLoading: false,
     isDisable: false,
+    showModal: false,
     range: [
-      ['1', '2', '3', '4', '5', '6', '7'],
-      ['1', '2', '3'],
+      ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+      ['第一班', '第二班', '第三班'],
     ],
-    shift: [],
+    shift: [0, 0],
     reason: '',
     substitute: '',
   };
@@ -35,10 +37,45 @@ export default class AskLeavePage extends Component {
     });
   }
 
-  onShiftSelect(shift: []) {
+  onShiftSelect(event) {
     this.setState({
-      shift,
+      shift: event.detail.value,
     });
+    console.log(event);
+  }
+
+  onModalClose() {
+    this.setState({
+      showModal: false,
+    });
+    setTimeout(() => {
+      this.setState({
+        isDisable: false,
+      });
+    }, submitInterval);
+  }
+
+  onModalCancel() {
+    this.setState({
+      showModal: false,
+    });
+    setTimeout(() => {
+      this.setState({
+        isDisable: false,
+      });
+    }, submitInterval);
+  }
+
+  onModalConfirm() {
+    this.setState({
+      showModal: false,
+    });
+    askLeave(this);
+    setTimeout(() => {
+      this.setState({
+        isDisable: false,
+      });
+    }, submitInterval);
   }
 
   handleReasonChange(reason: string) {
@@ -69,6 +106,12 @@ export default class AskLeavePage extends Component {
       }, submitInterval);
       return;
     }
+    if (this.state.substitute == '') {
+      this.setState({
+        showModal: true,
+      });
+      return;
+    }
     askLeave(this);
     setTimeout(() => {
       this.setState({
@@ -79,30 +122,49 @@ export default class AskLeavePage extends Component {
   render(): ReactNode {
     return (
       <View style={{ marginTop: '30rpx', width: '94%', marginLeft: '3%' }}>
+        <AtMessage />
+        <AtModal
+          isOpened={this.state.showModal}
+          title={pt.get().askLeave.modal.title}
+          cancelText={pt.get().modal.cancel}
+          confirmText={pt.get().modal.confirm}
+          onClose={this.onModalClose.bind(this)}
+          onCancel={this.onModalCancel.bind(this)}
+          onConfirm={this.onModalConfirm.bind(this)}
+          content={pt.get().askLeave.modal.content}
+        />
         <AtForm onSubmit={this.onSubmit.bind(this)}>
-          <AtMessage />
-          <Picker
-            mode='multiSelector'
-            range={this.state.range}
-            onChange={this.onShiftSelect.bind(this)}
-            value={this.state.shift}
+          <View style={{ width: '98%', marginLeft: '1%' }}>
+            <Picker
+              mode='multiSelector'
+              range={this.state.range}
+              onChange={this.onShiftSelect.bind(this)}
+              value={this.state.shift}
+            >
+              <AtList>
+                <AtListItem
+                  title={pt.get().askLeave.shift.title}
+                  extraText={
+                    pt.get().askLeave.shift.week[this.state.shift[0]] +
+                    pt.get().askLeave.shift.shift[this.state.shift[1]]
+                  }
+                />
+              </AtList>
+            </Picker>
+          </View>
+          <View
+            className='at-article__h3'
+            style={{ marginTop: '20rpx', marginBottom: '20rpx' }}
           >
-            <AtList>
-              <AtListItem
-                title={pt.get().askLeave.shift.title}
-                extraText={
-                  pt.get().askLeave.shift.week[this.state.shift[0]] +
-                  pt.get().askLeave.shift.shift[this.state.shift[1]]
-                }
-              />
-            </AtList>
-          </Picker>
+            {pt.get().askLeave.reason.title}
+          </View>
           <AtTextarea
             value={this.state.reason}
             onChange={this.handleReasonChange.bind(this)}
             maxLength={200}
-            placeholder={pt.get().reportPage.placeHolderText}
+            placeholder={pt.get().askLeave.reason.placeHolder}
           />
+
           <AtInput
             name='substitute'
             title={pt.get().askLeave.substitute.title}
diff --git a/src/plain-text/AskLeave.ts b/src/plain-text/AskLeave.ts
index fc71aae..dfb82f9 100644
--- a/src/plain-text/AskLeave.ts
+++ b/src/plain-text/AskLeave.ts
@@ -1,9 +1,17 @@
 export interface AskLeaveText {
+  modal: {
+    title: string;
+    content: string;
+  };
   shift: {
     title: string;
     week: string[];
     shift: string[];
   };
+  reason: {
+    title: string;
+    placeHolder: string;
+  };
   substitute: {
     title: string;
     placeHolder: string;
@@ -11,11 +19,19 @@ export interface AskLeaveText {
 }
 
 export const askLeaveZhCn: AskLeaveText = {
+  modal: {
+    title: '确认无代班？',
+    content: '值班人数少于 4 时须填写代班人员。请假记录将会被上传保存！',
+  },
   shift: {
     title: '值班时间',
     week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
     shift: ['第一班', '第二班', '第三班'],
   },
+  reason: {
+    title: '请假原因',
+    placeHolder: '请在此说明请假原因',
+  },
   substitute: {
     title: '替班人员',
     placeHolder: '人数少于 4 时必填！',
@@ -23,11 +39,20 @@ export const askLeaveZhCn: AskLeaveText = {
 };
 
 export const askLeaveEnUs: AskLeaveText = {
+  modal: {
+    title: 'Confirm no substitute?',
+    content:
+      'Must have substitute if members are less than 4! The ticket will be uploaded and saved!',
+  },
   shift: {
     title: 'Duty time',
     week: ['Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.', 'Sun.'],
     shift: ['1st Shift', '2nd Shift', '3rd Shift'],
   },
+  reason: {
+    title: 'Reason',
+    placeHolder: 'Leave your reason for leaving here',
+  },
   substitute: {
     title: 'Substitute',
     placeHolder: 'Must have if members are less than 4!',