d

src/models/clockmember.js

@@ -26,6 +26,8 @@ export default {
     },
     subjectNumList: [],
     subjectCount: 0,
+    memberVisible: false,
+    memberRecord: {},
   },
   subscriptions: {
     setup({ dispatch, history }) {  // eslint-disable-line
@@ -71,11 +73,20 @@ export default {
       }
     },
     * handleTickOut({ payload }, { call, put, select }) {
-      const { record } = payload;
+      const { record, type } = payload;
       const data = yield call(memberListAjax.deleteSubjectStudent, {
         id: record.id,
+        type,
       });
       if (data.code == 200) {
+        message.success('操作成功', 0.5);
+        yield put({
+          type: 'updateState',
+          payload: {
+            memberVisible: false,
+            memberRecord: {},
+          },
+        });
         yield put({
           type: 'queryList',
           payload: {
@@ -208,6 +219,8 @@ export default {
           },
           subjectNumList: [],
           subjectCount: 0,
+          memberVisible: false,
+          memberRecord: {},
         },
       });
     },

src/pages/clockmember/index.js

@@ -42,19 +42,31 @@ class LiveClass extends React.Component {
   }
   handleTickOut = (record) => {
     const { dispatch } = this.props;
-    Modal.confirm({
-      title: '提示',
-      content: '该学生将从此打卡活动活动中踢出，此次打卡记录也将会清除。',
-      okText: '确定',
-      cancelText: '取消',
-      icon: <Icon type="info-circle" theme="filled" style={{ color: '#1890ff', fontSize: 30 }} />,
-      onOk() {
-        dispatch({
-          type: 'clockmember/handleTickOut',
-          payload: {
-            record,
-          },
-        });
+    dispatch({
+      type: 'clockmember/updateState',
+      payload: {
+        memberVisible: true,
+        memberRecord: record,
+      },
+    });
+  }
+  handleCancelMember = () => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'clockmember/updateState',
+      payload: {
+        memberVisible: false,
+        memberRecord: {},
+      },
+    });
+  }
+  handleClearPerson = (type) => {
+    const { dispatch, memberRecord } = this.props;
+    dispatch({
+      type: 'clockmember/handleTickOut',
+      payload: {
+        record: memberRecord,
+        type,
       },
     });
   }
@@ -114,6 +126,8 @@ class LiveClass extends React.Component {
       clockList,
       subjectNumList,
       subjectCount,
+      memberRecord,
+      memberVisible,
     } = this.props;
     const columns = [
       {
@@ -215,6 +229,30 @@ class LiveClass extends React.Component {
             />
           </div>
         </div>
+        <Modal
+          visible={memberVisible}
+          onCancel={this.handleCancelMember}
+          footer={null}
+          record={memberRecord}
+          maskClosable={false}
+          className={pageStyle.modalMember}
+          bodyStyle={{ padding: '32px 32px 24px' }}
+          width={387}
+        >
+          <div className={pageStyle.memberWrap}>
+            <div className={pageStyle.body}>
+              <div className={pageStyle.infoFlex}>
+                <Icon style={{ color: '#1890ff', fontSize: 30, marginRight: 16 }} type="info-circle" theme="filled" />
+                <span className={pageStyle.infoTitle}>提示</span>
+              </div>
+              <div className={pageStyle.infoContent}>该学生将从此打卡活动中踢出，是否要清除该学生在 当前打卡的历史记录。</div>
+            </div>
+            <div className={pageStyle.infoBtn}>
+              <Button type="primary" style={{ marginRight: 34 }} onClick={() => this.handleClearPerson(2)}>不清除</Button>
+              <Button type="danger" onClick={() => this.handleClearPerson(1)}>清除</Button>
+            </div>
+          </div>
+        </Modal>
       </div>
     );
   }
@@ -231,6 +269,8 @@ function mapStateToProps(state) {
     clockList,
     subjectNumList,
     subjectCount,
+    memberRecord,
+    memberVisible,
   } = state.clockmember;
   const {
     guideStep,
@@ -250,7 +290,8 @@ function mapStateToProps(state) {
     clockList,
     subjectNumList,
     subjectCount,
+    memberRecord,
+    memberVisible,
   };
 }
 export default connect(mapStateToProps)(LiveClassForm);
-

src/pages/clockmember/index.less

@@ -172,3 +172,34 @@
 .formList {
   margin: 10px 0;
 }
+.modalMember {
+  .memberWrap {
+    .body {
+      min-height: 130px;
+      .infoFlex {
+        display: flex;
+        align-items: center;
+      }
+      .infoTitle {
+        color: rgba(0,0,0,.85);
+        font-weight: 600;
+        font-size: 16px;
+        line-height: 1.4;
+      }
+      .infoContent {
+        margin-left: 38px;
+        margin-top: 8px;
+        color: rgba(0,0,0,.65);
+        font-size: 14px;
+      }
+    }
+    .infoBtn {
+      text-align: right;
+    }
+  }
+  :global {
+    .ant-modal-close-x {
+      font-size: 30px;
+    }
+  }
+}