Add 面试时间选择界面路由配置为#/time/:guid

2020-08-17 14:11:27 +08:00 · 2020-08-17 14:11:27 +08:00 · cf41689198
parent 55d229de68
commit cf41689198
5 changed files with 353 additions and 47 deletions
--- a/package.json
+++ b/package.json
@ -7,6 +7,7 @@
    "antd": "^3.26.8",
    "axios": "^0.19.2",
    "babel-plugin-import": "^1.13.0",
+    "co": "4",
    "customize-cra": "^0.9.1",
    "enquire-js": "^0.2.1",
    "http-proxy-middleware": "^0.20.0",
@ -23,7 +24,8 @@
    "react-dom": "^16.12.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.1.2",
-    "react-scripts": "3.2.0"
+    "react-scripts": "3.2.0",
+    "webpack": "4.41.0"
  },
  "scripts": {
    "start": "react-app-rewired start",
--- a/src/App.js
+++ b/src/App.js
@ -1,11 +1,13 @@
 import React, { Component } from "react";

-import { HashRouter, Route, Switch, Link } from "react-router-dom";
+import { HashRouter, Route, Switch} from "react-router-dom";
 import { enquireScreen } from "enquire-js";
 import Home from "./Home/main";
 import Page2 from "./Home/history";
 import Entry from "./Entry";
 import Login from "./components/Login";
+import ChooseTime from "./components/ChooseTime"
+
 let isMobile;
 enquireScreen((b) => {
  isMobile = b;
@ -32,6 +34,7 @@ class App extends Component {
            <Route exact path="/ticket" component={Entry} />
            <Route exact path="/" component={Home} />
            <Route exact path="/login" component={Login} />
+            <Route exact path="/time/:guid" component={ChooseTime}/>
          </Switch>
        </HashRouter>
      </div>
--- a/src/components/ChooseTime.js
+++ b/src/components/ChooseTime.js
@ -0,0 +1,302 @@
+import React from "react";
+import axios from "axios";
+import { Button, Form, Spin, message,Checkbox,Alert,BackTop,Layout,Card } from "antd";
+import "antd/dist/antd.css";
+import { confirmAlert } from "react-confirm-alert";
+import "react-confirm-alert/src/react-confirm-alert.css";
+import qs from "qs";
+import Background from '../background2.jpg';
+import { withRouter } from 'react-router-dom'
+
+
+const Wishes = ["电脑部","电器部","文宣部","人资部","财外部"]
+class TimePicker extends React.Component {
+  constructor(){
+    super()
+    this.state = {confirmed:false} 
+  }
+
+  componentDidMount(){
+  this.queryInfo()
+  this.queryTime()
+  }
+
+  handleSubmit = (e) => {
+    e.preventDefault();
+    const validateFieldsAndScroll = this.props.form.validateFieldsAndScroll;
+    confirmAlert({
+      title: "提交面试时间",
+      message:
+        "点击 Yes 进行提交。",
+      buttons: [
+        {
+          label: "Yes",
+          onClick: () => {
+            validateFieldsAndScroll((err, values) => {
+              if (err) {
+                message.error("填写不正确，请按照提示修改");
+              } else {
+                var Times = []
+                for(var i in values){
+                  for(var j = 0;j < values[i].length;j++)
+                  Times = Times.concat(values[i][j])
+                }
+                let addForm = async () => {
+                  let result = await axios("api/posttime", {
+                    headers: {
+                      "Content-Type": "application/x-www-form-urlencoded",
+                    },
+                    method: "POST",
+                    data: qs.stringify({ dto:JSON.stringify({Times:Times}),guid:this.props.match.params.guid}),
+                  });
+
+                  if (result.data.status === "success") {
+                    message.success(
+                      "提交成功！期待你的精彩面试表现！"
+                    );
+                  } else {
+                    message.error("提交失败！可能是网络问题。");
+                  }
+                };
+                if(Times.length !== 0){
+                  addForm()
+                }else{
+                  message.error("请至少选择一个场次！");
+                }
+              }
+            });
+          },
+        },
+        {
+          label: "No",
+          onClick: () => {},
+        },
+      ],
+    });
+  };
+  queryTime = async () => {
+    let result = await axios(
+          'api/gettime',
+          {
+              method: 'GET',
+          }
+      )
+      if(result.data.status === "success") {
+        var timetable = []
+        for(var time of result.data.data){
+          for(var index = 0;index < timetable.length;index++){
+            if(timetable[index].day === time.day){
+              for(var i = 0 ; i < timetable[index].time.length;i++){
+                if(time.beginTime === timetable[index].time[i].label){
+                  timetable[index].time[i].value.push(time.id)
+                  break
+                }
+              }
+              if(i === timetable[index].time.length){
+                timetable[index].time.push({label:time.beginTime,value:[time.id]})
+              }
+              break
+            }
+          }
+          if(index === timetable.length){
+            timetable.push({ day:time.day,time:[{label:time.beginTime,value:[time.id]}]})
+          }
+        }
+        this.setState(
+          {
+            option_list: timetable,
+            option_number: timetable.length
+          }
+        )
+      }else{
+        message.error("获取面试场次失败，请稍后重试")
+        this.props.history.push('/')
+      }
+  }
+  queryInfo = async () => {
+    let result = await axios(
+        'api/getinfo/'+this.props.match.params.guid,
+        {
+            method: 'GET',
+        }
+    )
+
+    if(result.data.status === "success") {
+      result.data.data.firstWish = Wishes[result.data.data.firstWish-1]
+      result.data.data.secondWish = Wishes[result.data.data.secondWish-1]
+      this.setState(
+      {
+        info: result.data.data,
+      }
+      )
+    }else{
+      message.error("获取个人信息失败，请稍后重试")
+      this.props.history.push('/')
+    }
+  }
+  render(){
+    const formItemLayout = {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 12 },
+      },
+    };
+
+    const tailFormItemLayout = {
+      wrapperCol: {
+        xs: {
+          span: 24,
+          offset: 0,
+        },
+        sm: {
+          span: 16,
+          offset: 8,
+        },
+      },
+    };
+
+    const { getFieldDecorator } = this.props.form;
+    if(this.state.confirmed){
+    return(
+      this.state.option_list ?
+      <Form {...formItemLayout} onSubmit={this.handleSubmit}>
+          <h4 class="ant-typography" style={{ textAlign: 'center' }}>
+          请尽量多选          
+          </h4>
+          <Form.Item label= {this.state.option_number > 0 ? this.state.option_list[0].day:0}>
+          {getFieldDecorator("time1", {
+            initialValue: [],
+            rules: [{ required: false }],
+          })( <Checkbox.Group options={this.state.option_number > 0 ? this.state.option_list[0].time:0} />)}
+        </Form.Item>
+
+        <Form.Item label={this.state.option_number > 1 ? this.state.option_list[1].day:0}>
+          {getFieldDecorator("time2", {
+            initialValue: [],
+            rules: [{ required: false }],
+          })( <Checkbox.Group options={this.state.option_number > 1 ? this.state.option_list[1].time:0} />)}
+        </Form.Item>
+
+        <Form.Item label={this.state.option_number > 2 ? this.state.option_list[2].day:0}>
+          {getFieldDecorator("time3", {
+            initialValue: [],
+            rules: [{ required: false }],
+          })( <Checkbox.Group options={this.state.option_number > 2 ? this.state.option_list[2].time:0} />)}
+        </Form.Item>
+
+        <Form.Item label={this.state.option_number > 3 ? this.state.option_list[3].day:0}>
+          {getFieldDecorator("time4", {
+            initialValue: [],
+            rules: [{ required: false }],
+          })( <Checkbox.Group options={this.state.option_number > 3 ? this.state.option_list[3].time:0} />)}
+        </Form.Item>
+
+        <Form.Item label={this.state.option_number > 4 ? this.state.option_list[4].day:0}>
+          {getFieldDecorator("time5", {
+            initialValue: [],
+            rules: [{ required: false }],
+          })( <Checkbox.Group options={this.state.option_number > 4 ?this.state.option_list[4].time:0} />)}
+        </Form.Item>
+
+        <Form.Item label={this.state.option_number > 5 ?this.state.option_list[5].day:0}>
+          {getFieldDecorator("time6", {
+            initialValue: [],
+            rules: [{ required: false }],
+          })( <Checkbox.Group options={this.state.option_number > 5 ?this.state.option_list[5].time:0} />)}
+        </Form.Item>
+
+        <Form.Item label={this.state.option_number > 6 ? this.state.option_list[6].day:0}>
+          {getFieldDecorator("time7", {
+            initialValue: [],
+            rules: [{ required: false }],
+          })( <Checkbox.Group options={this.state.option_number > 6 ? this.state.option_list[6].time:0} />)}
+        </Form.Item>
+
+          <Button
+              icon="copy"
+              style={{display:"block",margin:"0 auto" }}
+              type="primary"
+              htmlType="submit"
+          >
+              提交
+          </Button>
+      </Form>:
+      <div>
+      <Spin size="large" tip="Loading...">
+        <Alert
+        message="正在打开页面"
+        description="请耐心等待，长时间未加载请请尝试刷新页面"
+        style={{height:"700px",textAlign:"center"}}
+        type="info"
+        /> 
+      </Spin>
+      </div>
+    )}else{
+      return(this.state.info?
+          <div>
+          <Card title="个人信息" >
+            <Card type="inner" title="姓名" >
+              <h3>{this.state.info.name}</h3>
+            </Card>
+            <Card type="inner" title="学号">
+             <h3>{this.state.info.id_student}</h3>
+            </Card>
+            <Card type="inner" title="第一志愿" >
+              <h3>{this.state.info.firstWish}</h3>
+            </Card>
+            <Card type="inner" title="第二志愿" >
+              <h3>{this.state.info.secondWish}</h3>
+            </Card>
+          </Card>
+          <p></p>
+          <Button
+          style={{display:"block",margin:"0 auto" }}
+          type="primary"
+          onClick= {(e) => {this.setState({confirmed:true})
+          if(!this.state.option_list){this.queryTime()}
+          }}
+          >
+            确认个人信息
+          </Button>
+          </div>
+        : 
+        <div>
+        <Spin size="large" tip="Loading...">
+          <Alert
+          message="正在打开页面"
+          description="请耐心等待，长时间未加载请请尝试刷新页面"
+          type="info"
+          style={{height:"700px",textAlign:"center"}}
+          /> 
+        </Spin>
+        </div>
+      )
+    }
+  }
+}
+const Chooser = withRouter(Form.create({})(TimePicker));
+
+class ChooseTime extends React.Component {
+  render() {
+    return (
+      <Layout style={{backgroundImage: `url(${Background})`}}>
+        <div style={{background:'#fff',borderRadius:20,
+        paddingTop:48, paddingLeft:24, paddingRight:24, marginTop: 24, marginLeft: 24, marginRight: 24,marginBottom:24,opacity:0.92 }} >
+          <h2 class="ant-typography" style={{ textAlign: 'center' }}>
+            浙江大学学生E志者协会2020年面试时间
+          </h2>
+          <Chooser/>
+          <BackTop visibilityHeight={200} />
+          <p style={{textAlign: 'center'}}>
+            浙江大学学生E志者协会©2020 Created by EVATech
+          </p>
+        </ div>
+      </Layout>
+    );
+  }
+}
+export default ChooseTime
--- a/src/components/Sheet.js
+++ b/src/components/Sheet.js
@ -295,48 +295,6 @@ class NewForm extends React.Component {
            ],
          })(<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />)}
        </Form.Item>
-        <Form.Item style={{ display: "none" }}>
-          {getFieldDecorator("time1", {
-            initialValue: 0,
-            rules: [{ required: true }],
-          })}
-        </Form.Item>
-        <Form.Item style={{ display: "none" }}>
-          {getFieldDecorator("time2", {
-            initialValue: 0,
-            rules: [{ required: true }],
-          })}
-        </Form.Item>
-        <Form.Item style={{ display: "none" }}>
-          {getFieldDecorator("time3", {
-            initialValue: 0,
-            rules: [{ required: true }],
-          })}
-        </Form.Item>
-        <Form.Item style={{ display: "none" }}>
-          {getFieldDecorator("time4", {
-            initialValue: 0,
-            rules: [{ required: true }],
-          })}
-        </Form.Item>
-        <Form.Item style={{ display: "none" }}>
-          {getFieldDecorator("time5", {
-            initialValue: 0,
-            rules: [{ required: true }],
-          })}
-        </Form.Item>
-        <Form.Item style={{ display: "none" }}>
-          {getFieldDecorator("time6", {
-            initialValue: 0,
-            rules: [{ required: true }],
-          })}
-        </Form.Item>
-        <Form.Item style={{ display: "none" }}>
-          {getFieldDecorator("time7", {
-            initialValue: 0,
-            rules: [{ required: true }],
-          })}
-        </Form.Item>
        <Form.Item {...tailFormItemLayout}>
          <Button
            icon="copy"
--- a/yarn.lock
+++ b/yarn.lock
@ -2,6 +2,17 @@
 # yarn lockfile v1


+"@alicloud/pop-core@^1.7.9":
+  version "1.7.9"
+  resolved "https://registry.npm.taobao.org/@alicloud/pop-core/download/@alicloud/pop-core-1.7.9.tgz#97c0c5bb591894feda87e8a82d45c117bebbde13"
+  integrity sha1-l8DFu1kYlP7ah+ioLUXBF7673hM=
+  dependencies:
+    debug "^3.1.0"
+    httpx "^2.1.2"
+    json-bigint "^0.2.3"
+    kitx "^1.2.1"
+    xml2js "^0.4.17"
+
 "@ant-design/colors@^3.1.0":
  version "3.2.2"
  resolved "https://registry.npm.taobao.org/@ant-design/colors/download/@ant-design/colors-3.2.2.tgz#5ad43d619e911f3488ebac303d606e66a8423903"
@ -1320,6 +1331,11 @@
  resolved "https://registry.npm.taobao.org/@types/json-schema/download/@types/json-schema-7.0.4.tgz#38fd73ddfd9b55abb1e1b2ed578cb55bd7b7d339"
  integrity sha1-OP1z3f2bVaux4bLtV4y1W9e30zk=

+"@types/node@^12.0.2":
+  version "12.12.54"
+  resolved "https://registry.npm.taobao.org/@types/node/download/@types/node-12.12.54.tgz?cache=0&sync_timestamp=1596839697045&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fnode%2Fdownload%2F%40types%2Fnode-12.12.54.tgz#a4b58d8df3a4677b6c08bfbc94b7ad7a7a5f82d1"
+  integrity sha1-pLWNjfOkZ3tsCL+8lLetenpfgtE=
+
 "@types/parse-json@^4.0.0":
  version "4.0.0"
  resolved "https://registry.npm.taobao.org/@types/parse-json/download/@types/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
@ -2252,6 +2268,11 @@ big.js@^5.2.2:
  resolved "https://registry.npm.taobao.org/big.js/download/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
  integrity sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg=

+bignumber.js@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.npm.taobao.org/bignumber.js/download/bignumber.js-4.1.0.tgz#db6f14067c140bd46624815a7916c92d9b6c24b1"
+  integrity sha1-228UBnwUC9RmJIFaeRbJLZtsJLE=
+
 binary-extensions@^1.0.0:
  version "1.13.1"
  resolved "https://registry.npm.taobao.org/binary-extensions/download/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
@ -2761,7 +2782,7 @@ co-defer@^1.0.0:
  resolved "https://registry.npm.taobao.org/co-defer/download/co-defer-1.0.0.tgz#3e4a787a8eed6b0a21ee287c094f7e8de0d3c818"
  integrity sha1-Pkp4eo7tawoh7ih8CU9+jeDTyBg=

-co@^4.6.0:
+co@4, co@^4.6.0:
  version "4.6.0"
  resolved "https://registry.npm.taobao.org/co/download/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
  integrity sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=
@ -5202,6 +5223,14 @@ https-proxy-agent@^3.0.0:
    agent-base "^4.3.0"
    debug "^3.1.0"

+httpx@^2.1.2:
+  version "2.2.4"
+  resolved "https://registry.npm.taobao.org/httpx/download/httpx-2.2.4.tgz#a06f0fbc27286c76e67667601793bf3253713052"
+  integrity sha1-oG8PvCcobHbmdmdgF5O/MlNxMFI=
+  dependencies:
+    "@types/node" "^12.0.2"
+    debug "^4.1.1"
+
 humanize-ms@^1.2.0, humanize-ms@^1.2.1:
  version "1.2.1"
  resolved "https://registry.npm.taobao.org/humanize-ms/download/humanize-ms-1.2.1.tgz#c46e3159a293f6b896da29316d8b6fe8bb79bbed"
@ -6294,6 +6323,13 @@ jsesc@~0.5.0:
  resolved "https://registry.npm.taobao.org/jsesc/download/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
  integrity sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=

+json-bigint@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.npm.taobao.org/json-bigint/download/json-bigint-0.2.3.tgz#118d7f6ff1d38659f19f94cf73e64a75a3f988a8"
+  integrity sha1-EY1/b/HThlnxn5TPc+ZKdaP5iKg=
+  dependencies:
+    bignumber.js "^4.0.0"
+
 json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
  version "1.0.2"
  resolved "https://registry.npm.taobao.org/json-parse-better-errors/download/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
@ -6423,6 +6459,11 @@ kind-of@^6.0.0, kind-of@^6.0.2:
  resolved "https://registry.npm.taobao.org/kind-of/download/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
  integrity sha1-B8BQNKbDSfoG4k+jWqdttFgM5N0=

+kitx@^1.2.1:
+  version "1.3.0"
+  resolved "https://registry.npm.taobao.org/kitx/download/kitx-1.3.0.tgz#ab3ee7c598d2b1d629fd55568f868c4440c200ea"
+  integrity sha1-qz7nxZjSsdYp/VVWj4aMREDCAOo=
+
 kleur@^3.0.3:
  version "3.0.3"
  resolved "https://registry.npm.taobao.org/kleur/download/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
@ -11713,9 +11754,9 @@ xml-name-validator@^3.0.0:
  resolved "https://registry.npm.taobao.org/xml-name-validator/download/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
  integrity sha1-auc+Bt5NjG5H+fsYH3jWSK1FfGo=

-xml2js@^0.4.16:
+xml2js@^0.4.16, xml2js@^0.4.17:
  version "0.4.23"
-  resolved "https://registry.npm.taobao.org/xml2js/download/xml2js-0.4.23.tgz#a0c69516752421eb2ac758ee4d4ccf58843eac66"
+  resolved "https://registry.npm.taobao.org/xml2js/download/xml2js-0.4.23.tgz?cache=0&sync_timestamp=1576776179444&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fxml2js%2Fdownload%2Fxml2js-0.4.23.tgz#a0c69516752421eb2ac758ee4d4ccf58843eac66"
  integrity sha1-oMaVFnUkIesqx1juTUzPWIQ+rGY=
  dependencies:
    sax ">=0.6.0"