add AskLeave page

doc/api.md

@@ -479,7 +479,7 @@ Request
 ```json
 {
   "token": "token_test",
-  "week": 1,
+  "week": "1",
   "shift": "2",
   "reason": "家庭原因",
   "substitute": "晓洋"  // 未找人代班则为空

mock/api.ts

@@ -123,6 +123,9 @@ export default {
       place: '204',
     },
   },
+  'POST /member/askleave': {
+    success: true,
+  },
   'POST /login': {
     success: true,
     data: {

src/app.config.ts

@@ -10,6 +10,7 @@ export default defineAppConfig({
     'pages/user/member/member',
     'pages/TicketDetail/TicketDetail',
     'pages/TicketList/TicketList',
+    'pages/AskLeave/AskLeave',
     'pages/404/404',
   ],
   window: {

src/pages/AskLeave/AskLeave.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  usingComponents: {},
+});

src/pages/AskLeave/AskLeave.tsx

@@ -0,0 +1,128 @@
+import {
+  AtTextarea,
+  AtButton,
+  AtForm,
+  AtMessage,
+  AtInput,
+  AtList,
+  AtListItem,
+} from 'taro-ui';
+import { Component, ReactNode } from 'react';
+import Taro from '@tarojs/taro';
+import pt from '@/plain-text';
+import { Picker, View } from '@tarojs/components';
+import { askLeave } from '@/service/askleave';
+import './AskLeave.scss';
+
+const submitInterval = 5000;
+
+export default class AskLeavePage extends Component {
+  state = {
+    isLoading: false,
+    isDisable: false,
+    range: [
+      ['1', '2', '3', '4', '5', '6', '7'],
+      ['1', '2', '3'],
+    ],
+    shift: [],
+    reason: '',
+    substitute: '',
+  };
+
+  componentDidMount(): void {
+    Taro.setNavigationBarTitle({
+      title: pt.get().navBar.askLeave,
+    });
+  }
+
+  onShiftSelect(shift: []) {
+    this.setState({
+      shift,
+    });
+  }
+
+  handleReasonChange(reason: string) {
+    this.setState({
+      reason,
+    });
+  }
+
+  handleSubstituteChange(substitute: string) {
+    this.setState({
+      substitute,
+    });
+  }
+
+  onSubmit() {
+    this.setState({
+      isDisable: true,
+    });
+    if (this.state.reason == '') {
+      Taro.atMessage({
+        message: pt.get().button.submitText.blank,
+        type: 'error',
+      });
+      setTimeout(() => {
+        this.setState({
+          isDisable: false,
+        });
+      }, submitInterval);
+      return;
+    }
+    askLeave(this);
+    setTimeout(() => {
+      this.setState({
+        isDisable: false,
+      });
+    }, submitInterval);
+  }
+  render(): ReactNode {
+    return (
+      <View style={{ marginTop: '30rpx', width: '94%', marginLeft: '3%' }}>
+        <AtForm onSubmit={this.onSubmit.bind(this)}>
+          <AtMessage />
+          <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>
+          <AtTextarea
+            value={this.state.reason}
+            onChange={this.handleReasonChange.bind(this)}
+            maxLength={200}
+            placeholder={pt.get().reportPage.placeHolderText}
+          />
+          <AtInput
+            name='substitute'
+            title={pt.get().askLeave.substitute.title}
+            type='text'
+            placeholder={pt.get().askLeave.substitute.placeHolder}
+            value={this.state.substitute}
+            onChange={this.handleSubstituteChange.bind(this)}
+          />
+          <View>
+            <AtButton
+              loading={this.state.isLoading}
+              formType='submit'
+              type='primary'
+              disabled={this.state.isDisable}
+            >
+              {pt.get().button.buttonText.submit}
+            </AtButton>
+          </View>
+        </AtForm>
+      </View>
+    );
+  }
+}

src/plain-text/AskLeave.ts

@@ -0,0 +1,35 @@
+export interface AskLeaveText {
+  shift: {
+    title: string;
+    week: string[];
+    shift: string[];
+  };
+  substitute: {
+    title: string;
+    placeHolder: string;
+  };
+}
+
+export const askLeaveZhCn: AskLeaveText = {
+  shift: {
+    title: '值班时间',
+    week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+    shift: ['第一班', '第二班', '第三班'],
+  },
+  substitute: {
+    title: '替班人员',
+    placeHolder: '人数少于 4 时必填！',
+  },
+};
+
+export const askLeaveEnUs: AskLeaveText = {
+  shift: {
+    title: 'Duty time',
+    week: ['Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.', 'Sun.'],
+    shift: ['1st Shift', '2nd Shift', '3rd Shift'],
+  },
+  substitute: {
+    title: 'Substitute',
+    placeHolder: 'Must have if members are less than 4!',
+  },
+};

src/plain-text/NavBarTitle.ts

@@ -2,6 +2,7 @@ export interface NavBarTitle {
   notFound: string;
   ticketDetail: string;
   ticketList: string;
+  askLeave: string;
   user: {
     myTicket: string;
     report: string;
@@ -16,6 +17,7 @@ export const navBarTitleZhCn: NavBarTitle = {
   notFound: '连接失败',
   ticketDetail: '工单详情',
   ticketList: '所有工单',
+  askLeave: '请假单填写',
   user: {
     myTicket: '我的工单',
     report: '意见反馈',
@@ -30,6 +32,7 @@ export const navBarTitleEnUs: NavBarTitle = {
   notFound: 'Failed',
   ticketDetail: 'Ticket Detail',
   ticketList: 'All Tickets',
+  askLeave: 'Ask for leave',
   user: {
     myTicket: 'My Tickets',
     report: 'Report',

src/plain-text/index.ts

@@ -25,6 +25,7 @@ import {
   actIndicatorZhCn,
 } from './ActIndicator';
 import { NotFoundText, notFound } from './404';
+import { AskLeaveText, askLeaveEnUs, askLeaveZhCn } from './AskLeave';
 
 interface TextRecord {
   common: CommonText;
@@ -46,6 +47,7 @@ interface TextRecord {
   toast: ToastText;
   actIndicator: ActIndicatorText;
   notFound: NotFoundText;
+  askLeave: AskLeaveText;
 }
 
 const textZhCn: TextRecord = {
@@ -68,6 +70,7 @@ const textZhCn: TextRecord = {
   toast: toastZhCn,
   actIndicator: actIndicatorZhCn,
   notFound: notFound,
+  askLeave: askLeaveZhCn,
 };
 
 const textEnUs: TextRecord = {
@@ -90,6 +93,7 @@ const textEnUs: TextRecord = {
   toast: toastEnUs,
   actIndicator: actIndicatorEnUs,
   notFound: notFound,
+  askLeave: askLeaveEnUs,
 };
 
 // type Lang = 'zh_CN' | 'en_US' | ...;

src/service/askleave.ts

@@ -4,7 +4,7 @@ import pt from '@/plain-text';
 import wechatUser from '@/wechat';
 import { getUrl } from '.';
 
-export function reportMessage(that: AskLeavePage) {
+export function askLeave(that: AskLeavePage) {
   that.setState({
     isLoading: true,
   });
@@ -13,8 +13,8 @@ export function reportMessage(that: AskLeavePage) {
     method: 'POST',
     data: {
       token: wechatUser.getToken(),
-      week: that.state.week,
-      shift: that.state.shift,
+      week: that.state.range[0][that.state.shift[0]],
+      shift: that.state.range[1][that.state.shift[1]],
       reason: that.state.reason,
       substitute: that.state.substitute,
     },