优化

src/common/api.js

@@ -208,4 +208,7 @@ export default {
   },
   deployschool: `${dakaapi}member/one_key_deploy`,
   selectdeployschool: `${dakaapi}member/one_key_deploy_status`,
+  leaves: {
+    leaveList: `${dakaapi}member/erp/student/leaves`,
+  },
 };

src/components/CallStudents.less

@@ -22,3 +22,45 @@
     margin-top: 15px;
   }
 }
+.inform {
+  width: 303px;
+  height: 32px;
+  border-radius: 16px;
+  background:rgba(255,53,53,0.1);
+  border:1px solid rgba(255,53,53,1);
+  font-size:14px;
+  font-family:PingFang SC;
+  font-weight:400;
+  color:rgba(0,0,0,1);
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  &>img {
+    width: 26px;
+    height: 26px;
+    margin: 0 9px 0 3px;
+  }
+  &>span {
+    color: #FF3535;
+    display: inline-block;
+    min-width: 25px;
+    text-align: center;
+  }
+}
+.tableScroll {
+  :global {
+    .ant-table-body {
+      overflow-y: scroll;
+      max-height: 550px;
+    }
+  }
+}
+.detailtitle {
+  &>img {
+    width: 16px;
+    height: 16px;
+    margin-right: 5px;
+    vertical-align: -12%;
+  }
+}

src/components/LeaveDetailModal.js

 import React from 'react';
-import { Modal, Icon, Form, Descriptions, Button, Table } from 'antd';
+import { Modal, Empty, Form, Descriptions, Button, Table, Select, InputNumber } from 'antd';
+import moment from 'moment';
 import { imagify } from '../utils/index';
 import pageStyle from './LeaveDetailModal.less';
+const FormItem = Form.Item;
 class LeaveDetailModal extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      status: '',
     };
   }
   componentDidMount() { // 挂载
@@ -13,64 +16,164 @@ class LeaveDetailModal extends React.Component {
   }
   componentWillUnmount() { // 卸载
 
+  }
+  close = () => {
+    const { close } = this.props;
+    close();
+  }
+  checkData = (value) => {
+    let str = value.replace(/[^\d\.]/g, '');
+    const pointIndex = str.search(/\./);
+    if (pointIndex !== -1) {
+      str = str.substr(0, pointIndex + 1).replace(/\./, '.5');
+    }
+    return str;
+  }
+  expendChange = (e) => {
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        let value = 0;
+        value = this.checkData(e.target.value);
+        this.props.form.setFieldsValue({
+          expend: value,
+        });
+      }
+    });
+  }
+  handleSubmit = (e) => {
+    e.preventDefault();
+    const { status } = this.state;
+    const {
+      detail, save, form, close,
+    } = this.props;
+    form.validateFields((err, values) => {
+      if (!err) {
+        const {
+          expend,
+        } = values;
+        save({
+          expend,
+          status,
+          id: detail.id,
+          callBack: () => {
+            form.resetFields();
+            close();
+          },
+        });
+      }
+    });
+  }
+  handleStatus = (status) => {
+    this.setState({
+      status,
+    });
   }
   render() {
     const {
       visible,
+      detail,
+      form: { getFieldDecorator, getFieldValue },
+      leaveSubmitLoading,
     } = this.props;
     return (
       <Modal
         visible={visible}
         title="请假详情"
         cancelText="关闭"
-        zIndex={110}
-        onCancel={this.cancelLeaveModal}
+        zIndex={120}
+        onCancel={this.close}
         maskClosable={false}
         width={700}
         footer={null}
         bodyStyle={{ padding: '20px 0' }}
       >
-        <div className={pageStyle.modalBox}>
-          <div className={pageStyle.modalHead}>
-            <div className={pageStyle.left}>
-              <img className={pageStyle.avatar} src="" alt="" />
-              <div className={pageStyle.leftInfo}>
-                <div className={pageStyle.infoline} style={{ marginBottom: 10 }}><img src={`${__IMGCDN__}teacher/people_icon.png`} alt="" />余瑞剑</div>
-                <div className={pageStyle.infoline}><img src={`${__IMGCDN__}teacher/phone_icon.png`} alt="" />18735113246</div>
+        {
+          detail ?
+            <div className={pageStyle.modalBox}>
+              <div className={pageStyle.modalHead}>
+                <div className={pageStyle.left}>
+                  <img className={pageStyle.avatar} src={imagify(detail.student.avatar)} alt="" />
+                  <div className={pageStyle.leftInfo}>
+                    <div className={pageStyle.infoline} style={{ marginBottom: 10 }}><img src={`${__IMGCDN__}teacher/people_icon.png`} alt="" />{detail.student.name}</div>
+                    <div className={pageStyle.infoline}><img src={`${__IMGCDN__}teacher/phone_icon.png`} alt="" />{detail.student.mobile}</div>
+                  </div>
+                </div>
+                <div className={pageStyle.right}>
+                  <div className={pageStyle.rightNum}>{detail.student.leave_count}</div>
+                  <div className={pageStyle.rightTip}>历史请假（次）</div>
+                </div>
               </div>
-            </div>
-            <div className={pageStyle.right}>
-              <div className={pageStyle.rightNum}>8</div>
-              <div className={pageStyle.rightTip}>历史请假（次）</div>
-            </div>
-          </div>
-          <div className={pageStyle.modalBody}>
-            <Descriptions>
-              <Descriptions.Item label="请假课次" className={pageStyle.size}>小星星英语培训（2019.12.05 14:48~15.20</Descriptions.Item>
-            </Descriptions>
-            <Descriptions>
-              <Descriptions.Item label="请假原因" className={pageStyle.size}>家里有事情</Descriptions.Item>
-            </Descriptions>
-          </div>
-          <div className={pageStyle.modalFooter}>
-            <Descriptions>
-              <Descriptions.Item label="申请时间" className={pageStyle.size1}>2019.12.05 14：50</Descriptions.Item>
-            </Descriptions>
-            <Descriptions>
-              <Descriptions.Item label="撤销时间" className={pageStyle.size1}>2019.12.05 14：50</Descriptions.Item>
-            </Descriptions>
-          </div>
-          <div className={pageStyle.triangle}>
-            <div className={pageStyle.text}>已通过</div>
-          </div>
-        </div>
+              <div className={pageStyle.modalBody}>
+                <Descriptions>
+                  <Descriptions.Item label="请假课次" className={pageStyle.size}>{detail.course.title}（{moment(detail.schedule.start_time).format('YYYY-MM-DD HH:mm')}~{moment(detail.schedule.end_time).format('HH:mm')}）</Descriptions.Item>
+                </Descriptions>
+                <Descriptions>
+                  <Descriptions.Item label="请假原因" className={pageStyle.size}>{detail.content}</Descriptions.Item>
+                </Descriptions>
+              </div>
+              <div className={pageStyle.modalFooter}>
+                {detail.status === 1 &&
+                  <div className={pageStyle.formBox}>
+                    <Form layout="inline" labelAlign="right" onSubmit={this.handleSubmit}>
+                      <FormItem label="额外扣除课时">
+                        {getFieldDecorator('expend',
+                          {
+                            rules: [{ required: true, message: '请输入额外扣除课时' }],
+                          },
+                          )(
+                            <InputNumber
+                              min={0}
+                              onBlur={e => this.expendChange(e)}
+                              style={{ width: 200 }}
+                              placeholder="请输入额外扣除课时"
+                            />,
+                        )}
+                      </FormItem>
+                      <div className={pageStyle.btnList}>
+                        <Button htmlType="submit" loading={leaveSubmitLoading} onClick={() => this.handleStatus(4)}>驳回申请</Button>
+                        <Button htmlType="submit" loading={leaveSubmitLoading} onClick={() => this.handleStatus(3)} type="primary" style={{ marginLeft: 20 }}>通过申请</Button>
+                      </div>
+                    </Form>
+                  </div>
+                }
+                {(detail.status === 3 || detail.status === 4) &&
+                <Descriptions>
+                  <Descriptions.Item label="额外扣除课时" className={pageStyle.size1}>{detail.expend}</Descriptions.Item>
+                </Descriptions>
+                }
+                <Descriptions>
+                  <Descriptions.Item label="申请时间" className={pageStyle.size1}>{detail.created_at}</Descriptions.Item>
+                </Descriptions>
+                {detail.status === 2 &&
+                  <Descriptions>
+                    <Descriptions.Item label="撤销时间" className={pageStyle.size1}>{detail.handled_at}</Descriptions.Item>
+                  </Descriptions>
+                }
+                {(detail.status === 3 || detail.status === 4) &&
+                <Descriptions>
+                  <Descriptions.Item label="审批人" className={pageStyle.size1}>{detail.operator && detail.operator.nickname}</Descriptions.Item>
+                </Descriptions>
+                }
+              </div>
+              { detail.status === 2 &&
+              <div className={pageStyle.triangle}>
+                <div className={pageStyle.text}>已撤销</div>
+              </div>}
+              {detail.status === 3 &&
+              <div className={pageStyle.triangle1}>
+                <div className={pageStyle.text}>已通过</div>
+              </div>
+              }
+              {detail.status === 4 &&
+              <div className={pageStyle.triangle2}>
+                <div className={pageStyle.text}>已驳回</div>
+              </div>
+              }
+            </div> : <Empty />
+        }
       </Modal>
     );
   }
 }
-LeaveDetailModal.propTypes = {
-
-
-};
 const LeaveDetail = Form.create()(LeaveDetailModal);
 export default LeaveDetail;

src/components/LeaveDetailModal.less

@@ -4,6 +4,39 @@
     position: relative;
     right: 0;
     bottom: 0;
+
+    .text {
+      z-index: 11;
+      font-size: 20px;
+      font-family: PingFang SC;
+      font-weight: bold;
+      color: rgba(255, 255, 255, 1);
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      transform: rotate(-50deg);
+      letter-spacing: 2px;
+    }
+
+    &:after {
+      content: '';
+      width: 0;
+      height: 0;
+      overflow: hidden;
+      font-size: 0;
+      line-height: 0;
+      border-color: transparent #FFAD1F transparent transparent;
+      border-style: solid solid dashed dashed;
+      border-width: 100px 100px 0 0;
+      bottom: -20px;
+      right: 0;
+      position: absolute;
+    }
+  }
+  .triangle1 {
+    position: relative;
+    right: 0;
+    bottom: 0;
     .text {
       z-index: 11;
       font-size:20px;
@@ -27,7 +60,38 @@
       border-style:solid solid dashed dashed;
       border-width:100px 100px 0 0 ;
       bottom: -20px;
-      right: 0px;
+      right: 0;
+      position: absolute;
+    }
+  }
+  .triangle2 {
+    position: relative;
+    right: 0;
+    bottom: 0;
+    .text {
+      z-index: 11;
+      font-size:20px;
+      font-family:PingFang SC;
+      font-weight:bold;
+      color:#929292;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      transform: rotate(-50deg);
+      letter-spacing: 2px;
+    }
+    &:after {
+      content: '';
+      width: 0;
+      height: 0;
+      overflow: hidden;
+      font-size: 0;
+      line-height: 0;
+      border-color:transparent #EBEBEB transparent transparent;
+      border-style:solid solid dashed dashed;
+      border-width:100px 100px 0 0 ;
+      bottom: -20px;
+      right: 0;
       position: absolute;
     }
   }
@@ -92,6 +156,20 @@
 }
 .modalFooter {
   padding: 25px 25px 0;
+  height: 203px;
+  .expendInput {
+    &>span {
+      display: inline-block;
+      margin-right: 15px;
+      font-size: 14px;
+      color: #575757;
+    }
+  }
+  .btnList {
+    position: absolute;
+    right: 20px;
+    bottom: 0;
+  }
   .size1 {
     font-size:14px;
     font-family:PingFang SC;
@@ -104,3 +182,6 @@
     }
   }
 }
+.formBox {
+  margin-bottom: 10px;
+}

src/models/callstudents.js

 
 import { routerRedux } from 'dva/router';
 import { message, Modal } from 'antd';
+import { delay } from 'redux-saga';
 import {
   LocalStorage,
   SessionStorage,
@@ -9,6 +10,7 @@ import {
 import errorcode from '../common/errorcode';
 import * as classMgtAjax from '../services/classmgt';
 import * as schedulemgtAjax from '../services/schedulemgt';
+import * as leaveAjax from '../services/leaves';
 
 export default {
   namespace: 'callstudents',
@@ -70,6 +72,14 @@ export default {
     canAddStudent: true,
     classDetail: {},
     searchCallStudentValue: '',
+    leaveParams: {
+      status: 1,
+      page: 1,
+      perPage: 10,
+    },
+    leaveList: [],
+    leaveTotal: 0,
+    leaveSubmitLoading: false,
   },
   subscriptions: {
     setup({ dispatch, history }) {  // eslint-disable-line
@@ -181,6 +191,7 @@ export default {
       const {
         queryCallStudentListParams, callStudentTotal, callStudentListLoading, expend, classId, courseId,
       } = yield select(state => state.callstudents);
+      const { sid } = yield select(state => state.webapp);
       const { callStudentSchedule, callType } = payload;
       if (callStudentListLoading) {
         return;
@@ -193,7 +204,6 @@ export default {
           callType,
         },
       });
-      const { sid } = yield select(state => state.webapp);
       let newcallStudentTotal = callStudentTotal;
       let newqueryScheduleStudentListParams = {};
       if (callType == 1 || callType == 3) { // 正常点名
@@ -238,6 +248,7 @@ export default {
           ELE.mobile = ele.mobile;
           ELE.surplus = (callCourse && callCourse.course_mode == 1 && callCourse.surplus_buy !== undefined && callCourse.surplus_buy) || '-';
           ELE.mobile = ele.mobile;
+          ELE.leave = ele.leave;
           callStudentOperateList.push(ELE);
         });
         yield put({
@@ -488,7 +499,11 @@ export default {
       callStudentOperateList.forEach((ele) => {
         const ELE = ele;
         ELE.expend = expend;
-        ELE.type = 1;
+        if (ELE.leave != null && Number(ELE.leave.status) === 3) {
+          ELE.type = 3;
+        } else {
+          ELE.type = 1;
+        }
       });
       yield put({
         type: 'updateState',
@@ -627,6 +642,111 @@ export default {
             data: studentCallsDate,
           },
         });
+        yield delay(300);
+        yield put({
+          type: 'updateState',
+          payload: {
+            leaveListVisible: true,
+          },
+        });
+      }
+    },
+    * queryLeaveList({ payload }, { call, put, select }) {
+      const { params } = payload;
+      const { sid } = yield select(state => state.webapp);
+      const { leaveParams, leaveTotal } = yield select(state => state.callstudents);
+      const newParams = Object.assign(leaveParams, params, {
+        school_id: sid,
+      });
+      const data = yield call(leaveAjax.getLeaveList, newParams);
+      let newTotal = leaveTotal;
+      if (data.code === 200) {
+        if (data.data.total != undefined) {
+          newTotal = data.data.total;
+        }
+        yield put({
+          type: 'updateState',
+          payload: {
+            leaveList: data.data.list,
+            leaveTotal: newTotal,
+          },
+        });
+      } else {
+        yield put({
+          type: 'webapp/errorrequestresolve',
+          payload: {
+            data,
+          },
+        });
+      }
+    },
+    * queryLeaveDetail({ payload }, { call, put, select }) {
+      const { id } = payload;
+      const data = yield call(leaveAjax.getDetail, {
+        id,
+      });
+      if (data.code === 200) {
+        yield put({
+          type: 'updateState',
+          payload: {
+            leaveDetail: data.data,
+          },
+        });
+      }
+    },
+    * saveLeave({ payload }, { call, put, select }) {
+      const {
+        expend, status, id, callBack,
+      } = payload;
+      const { leaveSubmitLoading, callStudentSchedule } = yield select(state => state.callstudents);
+      if (leaveSubmitLoading) {
+        return;
+      }
+      yield put({
+        type: 'updateState',
+        payload: {
+          leaveSubmitLoading: true,
+        },
+      });
+      const loadmessage = message.loading('数据保存中...', 0);
+      const data = yield call(leaveAjax.saveLeave, {
+        expend,
+        status,
+        id,
+      });
+      yield put({
+        type: 'updateState',
+        payload: {
+          leaveSubmitLoading: false,
+        },
+      });
+      setTimeout(loadmessage);
+      if (data.code === 200) {
+        message.success('操作成功', 1);
+        if (callBack && (typeof callBack == 'function')) {
+          callBack();
+        }
+        yield put({
+          type: 'queryLeaveList',
+          payload: {
+            params: {
+            },
+          },
+        });
+        yield put({
+          type: 'queryCallStudentList',
+          payload: {
+            callStudentSchedule,
+            callType: 3,
+          },
+        });
+      } else {
+        yield put({
+          type: 'webapp/errorrequestresolve',
+          payload: {
+            data,
+          },
+        });
       }
     },
     * pageInit({ payload }, { call, put, select }) {
@@ -690,6 +810,14 @@ export default {
           canAddStudent: true,
           classDetail: {},
           searchCallStudentValue: '',
+          leaveParams: {
+            status: 1,
+            page: 1,
+            perPage: 10,
+          },
+          leaveList: [],
+          leaveTotal: 0,
+          leaveSubmitLoading: false,
         },
       });
     },

src/models/indexstaic.js

@@ -17,6 +17,7 @@ import * as courseAjax from '../services/course';
 import * as classroommgtAjax from '../services/classroommgt';
 import * as classMgtAjax from '../services/classmgt';
 import * as commonAjax from '../services/common';
+import * as leaveAjax from '../services/leaves';
 import errorcode from '../common/errorcode';
 export default {
   namespace: 'indexstaic',
@@ -69,6 +70,15 @@ export default {
     changeScheduleShow: false,
     selectScheduleinfo: {},
     changeScheduleIndex: 1,
+    leaveParams: {
+      status: 1,
+      page: 1,
+      perPage: 10,
+      name: '',
+    },
+    leaveList: [],
+    leaveTotal: 0,
+    leaveSubmitLoading: false,
   },
   subscriptions: {
     setup({ dispatch, history }) {  // eslint-disable-line
@@ -588,6 +598,90 @@ export default {
         // message.error(clockCharts.msg, 1);
       }
     },
+    * queryLeaveList({ payload }, { call, put, select }) {
+      const { params } = payload;
+      const { sid } = yield select(state => state.webapp);
+      const { leaveParams, leaveTotal } = yield select(state => state.indexstaic);
+      const newParams = Object.assign(leaveParams, params, {
+        school_id: sid,
+      });
+      const data = yield call(leaveAjax.getLeaveList, newParams);
+      let newTotal = leaveTotal;
+      if (data.code === 200) {
+        if (data.data.total != undefined) {
+          newTotal = data.data.total;
+        }
+        yield put({
+          type: 'updateState',
+          payload: {
+            leaveList: data.data.list,
+            leaveTotal: newTotal,
+          },
+        });
+      }
+    },
+    * queryLeaveDetail({ payload }, { call, put, select }) {
+      const { id } = payload;
+      const data = yield call(leaveAjax.getDetail, {
+        id,
+      });
+      if (data.code === 200) {
+        yield put({
+          type: 'updateState',
+          payload: {
+            leaveDetail: data.data,
+          },
+        });
+      }
+    },
+    * saveLeave({ payload }, { call, put, select }) {
+      const {
+        expend, status, id, callBack,
+      } = payload;
+      const { leaveSubmitLoading } = yield select(state => state.indexstaic);
+      if (leaveSubmitLoading) {
+        return;
+      }
+      yield put({
+        type: 'updateState',
+        payload: {
+          leaveSubmitLoading: true,
+        },
+      });
+      const loadmessage = message.loading('数据保存中...', 0);
+      const data = yield call(leaveAjax.saveLeave, {
+        expend,
+        status,
+        id,
+      });
+      yield put({
+        type: 'updateState',
+        payload: {
+          leaveSubmitLoading: false,
+        },
+      });
+      setTimeout(loadmessage);
+      if (data.code === 200) {
+        message.success('操作成功', 1);
+        if (callBack && (typeof callBack == 'function')) {
+          callBack();
+        }
+        yield put({
+          type: 'queryLeaveList',
+          payload: {
+            params: {
+            },
+          },
+        });
+      } else {
+        yield put({
+          type: 'webapp/errorrequestresolve',
+          payload: {
+            data,
+          },
+        });
+      }
+    },
     * pageInit({ payload }, { call, put, select }) {
       yield put({
         type: 'updateState',
@@ -637,6 +731,15 @@ export default {
           end_time: '',
           courseTimeListShow: false,
         },
+        leaveParams: {
+          status: 1,
+          page: 1,
+          perPage: 10,
+          name: '',
+        },
+        leaveList: [],
+        leaveTotal: 0,
+        leaveSubmitLoading: false,
       });
     },
   },

src/models/webapp.js

@@ -161,6 +161,13 @@ export default {
           dispatch({
             type: 'indexstaic/todoSchedule',
           });
+          dispatch({
+            type: 'indexstaic/queryLeaveList',
+            payload: {
+              params: {
+              },
+            },
+          });
           dispatch({
             type: 'updateState',
             payload: {

src/pages/classdetail/index.js

@@ -781,6 +781,7 @@ class ClassDetailForm extends React.Component {
     });
   }
   toCallStudents = (schedule) => {
+    console.log(schedule, 'schedule');
     const {
       dispatch, datetime, classDetail, classStudentTotal,
     } = this.props;
@@ -815,6 +816,14 @@ class ClassDetailForm extends React.Component {
         callType: 1,
       },
     });
+    dispatch({
+      type: 'callstudents/queryLeaveList',
+      payload: {
+        params: {
+          schedule_id: schedule.id,
+        },
+      },
+    });
   }
   toEditCallStudents = (schedule) => {
     const { dispatch, classDetail } = this.props;

src/pages/classrecord/index.js

@@ -195,6 +195,14 @@ class StaticCenter extends React.Component {
         callType: 1,
       },
     });
+    dispatch({
+      type: 'callstudents/queryLeaveList',
+      payload: {
+        params: {
+          schedule_id: schedule.id,
+        },
+      },
+    });
   }
   toEditCallStudents = (schedule) => {
     const { dispatch } = this.props;

src/pages/index/StudentLeaveModal.js

 import React from 'react';
 import { connect } from 'dva';
-import { Row, Col, Modal, Form, Input, Button, Table, Alert, Select } from 'antd';
+import { Row, Col, Modal, Form, Input, Button, Table, Alert, Select, Pagination } from 'antd';
+import moment from 'moment';
 import pageStyles from './StudentLeaveModal.less';
 import { pageIn, imagify } from '../../utils/index';
 import LeaveDetailModal from '../../components/LeaveDetailModal';
@@ -16,7 +17,6 @@ class StudentLeaveModal extends React.Component {
   componentDidMount() {
   }
   componentWillUnmount() {
-    const { dispatch } = this.props;
   }
   cancelLeaveModal = () => {
     const { dispatch } = this.props;
@@ -29,6 +29,12 @@ class StudentLeaveModal extends React.Component {
   }
   goDetail = (record) => {
     const { dispatch } = this.props;
+    dispatch({
+      type: 'indexstaic/queryLeaveDetail',
+      payload: {
+        id: record.id,
+      },
+    });
     dispatch({
       type: 'indexstaic/updateState',
       payload: {
@@ -36,54 +42,147 @@ class StudentLeaveModal extends React.Component {
       },
     });
   }
+  detailClose = () => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'indexstaic/updateState',
+      payload: {
+        detailVisible: false,
+        leaveDetail: null,
+      },
+    });
+  }
+  handleSearch = (e) => {
+    const { dispatch, form } = this.props;
+    e.preventDefault();
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        const {
+          name,
+          status,
+        } = values;
+        dispatch({
+          type: 'indexstaic/queryLeaveList',
+          payload: {
+            params: {
+              page: 1,
+              name,
+              status,
+            },
+          },
+        });
+      }
+    });
+  }
+  handleSearchReset = () => {
+    const { dispatch, form } = this.props;
+    form.resetFields();
+    dispatch({
+      type: 'indexstaic/queryLeaveList',
+      payload: {
+        params: {
+          perPage: 10,
+          page: 1,
+          name: '',
+          status: '',
+        },
+      },
+    });
+  }
+  changeSizeChange = (page, perPage) => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'indexstaic/queryLeaveList',
+      payload: {
+        params: {
+          page: 1,
+          perPage,
+        },
+      },
+    });
+  }
+  changePage = (page, perPage) => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'indexstaic/queryLeaveList',
+      payload: {
+        params: {
+          page,
+          perPage,
+        },
+      },
+    });
+  }
+  detailSave = (values) => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'indexstaic/saveLeave',
+      payload: values,
+    });
+  }
   render() {
     const {
       visible,
       detailVisible,
+      leaveParams,
+      leaveList,
+      leaveTotal,
+      leaveDetail,
+      leaveSubmitLoading,
     } = this.props;
-    const dataSource = [
-      {
-        key: '1',
-        name: '胡彦斌',
-        age: 32,
-        address: '西湖区湖底公园1号',
-      },
-      {
-        key: '2',
-        name: '胡彦祖',
-        age: 42,
-        address: '西湖区湖底公园1号',
-      },
-    ];
-
     const columns = [
       {
         title: '申请学员',
-        dataIndex: 'name',
+        dataIndex: 'student.name',
         key: 'name',
+        render: (text, record) => {
+          return (
+            <div>
+              <span>{text}</span>  <br />
+              <span>{record.student.mobile}</span>
+            </div>
+          );
+        },
       },
       {
         title: '请假课次',
-        dataIndex: 'age',
-        key: 'age',
+        dataIndex: 'course.title',
+        key: 'course',
+        render: (text, record) => {
+          return (
+            <div>
+              <span>{text}</span> <br />
+              <span> {moment(record.schedule.start_time).format('YYYY-MM-DD HH:mm')}~{moment(record.schedule.end_time).format('HH:mm')}</span>
+            </div>
+          );
+        },
       },
       {
         title: '申请时间',
-        dataIndex: 'address',
-        key: 'address',
+        dataIndex: 'created_at',
+        key: 'created_at',
       },
       {
         title: '处理时间',
-        dataIndex: 'address',
-        key: 'address',
+        dataIndex: 'handled_at',
+        key: 'handled_at',
+        render: (text) => {
+          return (
+            <div>{text || '-'}</div>
+          );
+        },
       },
       {
         title: '处理状态',
-        dataIndex: 'address',
+        dataIndex: 'status',
         render: (text, record) => {
           return (
             <div className={pageStyles.typeColor}>
-              <div className={pageStyles.typeColor1}>到课</div>
+              {text === 1 && <div className={pageStyles.typeColor1}>待处理</div>}
+              {text === 3 && <div className={pageStyles.typeColor2}>已通过</div>}
+              {text === 2 && <div className={pageStyles.typeColor4}>已撤销</div>}
+              {text === 4 && <div className={pageStyles.typeColor3}>已驳回</div>}
+
             </div>
           );
         },
@@ -115,8 +214,8 @@ class StudentLeaveModal extends React.Component {
         >
           <Form layout="inline" labelAlign="right" onSubmit={this.handleSearch}>
             <FormItem label="学员姓名">
-              {getFieldDecorator('class_id', {
-                initialValue: '',
+              {getFieldDecorator('name', {
+                initialValue: leaveParams.name,
               })(
                 <Search
                   placeholder="请输入学员姓名"
@@ -125,15 +224,15 @@ class StudentLeaveModal extends React.Component {
               )}
             </FormItem>
             <FormItem label="状态">
-              {getFieldDecorator('class_id', {
-                initialValue: '',
+              {getFieldDecorator('status', {
+                initialValue: leaveParams.status,
               })(
                 <Select style={{ width: 130 }}>
                   <Option value="">全部</Option>
                   <Option value={1}>待处理</Option>
-                  <Option value={2}>已通过</Option>
-                  <Option value={3}>已驳回</Option>
-                  <Option value={4}>已撤销</Option>
+                  <Option value={3}>已通过</Option>
+                  <Option value={4}>已驳回</Option>
+                  <Option value={2}>已撤销</Option>
                 </Select>,
               )}
             </FormItem>
@@ -149,13 +248,33 @@ class StudentLeaveModal extends React.Component {
           <div className={pageStyles.tableBox}>
             <Table
               rowKey="id"
-              dataSource={dataSource}
+              dataSource={leaveList}
               columns={columns}
+              pagination={false}
+              scroll={{ x: 'max-content' }}
+              footer={() => (
+                <div className="tablefooterbox">
+                  <span className="tablefooterstatic">共{leaveTotal}条数据</span>
+                  <Pagination
+                    pageSize={leaveParams.perPage}
+                    total={Number(leaveTotal)}
+                    onChange={this.changePage}
+                    showSizeChanger
+                    showQuickJumper
+                    onShowSizeChange={this.changeSizeChange}
+                    current={Number(leaveParams.page) || 1}
+                  />
+                </div>
+              )}
             />
           </div>
         </Modal>
         <LeaveDetailModal
           visible={detailVisible}
+          close={this.detailClose}
+          detail={leaveDetail}
+          save={this.detailSave}
+          leaveSubmitLoading={leaveSubmitLoading}
         />
       </div>
     );
@@ -171,10 +290,20 @@ function mapStateToProps(state) {
   const {
     leaveVisible,
     detailVisible,
+    leaveParams,
+    leaveList,
+    leaveTotal,
+    leaveDetail,
+    leaveSubmitLoading,
   } = state.indexstaic;
   return {
     leaveVisible,
     detailVisible,
+    leaveParams,
+    leaveList,
+    leaveTotal,
+    leaveDetail,
+    leaveSubmitLoading,
   };
 }
 export default connect(mapStateToProps)(StudentLeave);

src/pages/index/StudentLeaveModal.less

@@ -21,7 +21,7 @@
 }
 .typeColor3 {
   color: #929292;
-  background:rgba(233,233,233,0.1);
+  background:rgba(233,233,233,0.9);
 }
 .typeColor4 {
   color: #FFAD1F;

src/pages/index/index.js

@@ -468,6 +468,14 @@ class StaticCenter extends React.Component {
         callType: 3,
       },
     });
+    dispatch({
+      type: 'callstudents/queryLeaveList',
+      payload: {
+        params: {
+          schedule_id: schedule.id,
+        },
+      },
+    });
   }
   toEditCallStudents = (schedule) => {
     const { dispatch } = this.props;
@@ -649,7 +657,11 @@ class StaticCenter extends React.Component {
   }
   // 请假弹框
   goLeaveShow = () => {
-    const { dispatch } = this.props;
+    const { dispatch, leaveTotal } = this.props;
+    if (leaveTotal === 0) {
+      message.warning('当前暂无学员请假喔');
+      return;
+    }
     dispatch({
       type: 'indexstaic/updateState',
       payload: {
@@ -695,6 +707,7 @@ class StaticCenter extends React.Component {
       studentChangeScheduleListTotal,
       studentChangeScheduleListQueryParams,
       leaveVisible,
+      leaveTotal,
     } = this.props;
     const studentChangeScheduleColumns = [
       {
@@ -946,7 +959,7 @@ class StaticCenter extends React.Component {
               <Col xs={{ span: 8, offset: 0 }} sm={{ span: 8, offset: 0 }} md={{ span: 4, offset: 0 }} lg={{ span: 4, offset: 0 }} xl={{ span: 4, offset: 0 }}>
                 <div className={pageStyle.informItem} onClick={this.goLeaveShow}>
                   <div className={pageStyle.informImg} id="index_paywarn"><img src={`${__IMGCDN__}index/inform_icon6.png`} alt="" />
-                    <Badge className={pageStyle.informNum} overflowCount={999} count={renew.total}>
+                    <Badge className={pageStyle.informNum} overflowCount={999} count={leaveTotal}>
                     </Badge>
                   </div>
                   <div className={pageStyle.informTip}>请假提醒</div>
@@ -1056,6 +1069,7 @@ function mapStateToProps(state) {
     courseTimeListShow,
     datetime,
     leaveVisible,
+    leaveTotal,
   } = state.indexstaic;
   // eslint-disable-next-line no-empty-pattern
   const {} = state.createtheme;
@@ -1139,6 +1153,7 @@ function mapStateToProps(state) {
     schoolUserInfo,
     guideShow,
     leaveVisible,
+    leaveTotal,
   };
 }
 export default connect(mapStateToProps)(StaticCenter);

src/services/leaves.js

+import qs from 'qs';
+import request from '../utils/request';
+import api from '../common/api';
+export function getLeaveList(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.leaves.leaveList}?${data}`,
+    method: 'GET',
+  });
+}
+export function getDetail(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.leaves.leaveList}/${params.id}`,
+    method: 'GET',
+    data,
+  });
+}
+export function saveLeave(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.leaves.leaveList}/${params.id}`,
+    method: 'PUT',
+    data,
+  });
+}