add confirm modal in AskLeave

mock/api.ts

@@ -135,7 +135,7 @@ export default {
   'GET /checklogin': {
     success: true,
     data: {
-      islogin: false,
+      islogin: true,
     },
   },
 };

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,8 +122,19 @@ export default class AskLeavePage extends Component {
   render(): ReactNode {
     return (
       <View style={{ marginTop: '30rpx', width: '94%', marginLeft: '3%' }}>
-        <AtForm onSubmit={this.onSubmit.bind(this)}>
         <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)}>
+          <View style={{ width: '98%', marginLeft: '1%' }}>
             <Picker
               mode='multiSelector'
               range={this.state.range}
@@ -97,12 +151,20 @@ export default class AskLeavePage extends Component {
                 />
               </AtList>
             </Picker>
+          </View>
+          <View
+            className='at-article__h3'
+            style={{ marginTop: '20rpx', marginBottom: '20rpx' }}
+          >
+            {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}

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!',