参赛报名

2022-03-25 11:27:06 +08:00 · 2022-03-25 11:27:06 +08:00 · d52afc2cd4
parent dbcbc2c9ff
commit d52afc2cd4
9 changed files with 105 additions and 35 deletions
--- a/src/military/qz2022/api.js
+++ b/src/military/qz2022/api.js
@ -1,21 +1,13 @@
-import fetch,{main_web_site_url} from './fetch';
+import fetch,{main_web_site_url, current_main_site_url} from './fetch';
 import { notification } from 'antd';

-// 专家列表查询
-export async function expertList(params) {
+// 用户参与启智2022状态
+export async function userCompetitionStatus(id) {
  let res = await fetch({
-    url: '/api/experts/',
-    method: 'get',
-    params,
+    url: `${current_main_site_url}/api/competition_infos/${id}/enroll_status.json`,
+    method: 'get'
  });
-  if (res.data) {
-    return res.data;
-  } else {
-    notification.open({
-      message: "提示",
-      description: res.message || '请求错误',
-    });
-  }
+  return res;
 }

 //删除专家
--- a/src/military/qz2022/apply/index.jsx
+++ b/src/military/qz2022/apply/index.jsx
@ -3,10 +3,13 @@ import { Input, Select, Button, Form, DatePicker, Table, Pagination, Upload, Mod
 import {competitionArea, competitionType} from '../static.js';
 import { Link } from "react-router-dom";
 import { formatDuring } from 'educoder';
+import {userCompetitionStatus} from '../api';
 import EditTable from "../editTable";
 import apply_top from "../image/apply_top.png";
 import apply_down from "../image/apply_down.png";
 import apply_one_active from "../image/apply_one_active.png";
+import apply_one from "../image/apply_one.png";
+import apply_two_active from "../image/apply_two_active.png";
 import apply_two from "../image/apply_two.png";
 import apply_notice from "../image/apply_notice.png";

@ -16,7 +19,8 @@ const Option = Select.Option;

 export default Form.create()(({ match, history, showNotification, form, current_user }) => {
  const { getFieldDecorator, validateFields, setFieldsValue } = form;
-  const [applyStatue, setApplyState] = useState();
+  const [applyStatue, setApplyState] = useState(undefined);
+
  // form表单公共处理函数
  const helper = useCallback(
    (label, name, rules, widget) => (
@ -28,7 +32,12 @@ export default Form.create()(({ match, history, showNotification, form, current_
  );

  useEffect(() => {
-    
+    // 获取用户是否报名启智2022
+    userCompetitionStatus('qz2022').then(response=>{
+      if(response && response.message === "success"){
+        setApplyState(response.data.enroll_status);
+      }
+    })
  }, []);

  return (
@ -37,20 +46,20 @@ export default Form.create()(({ match, history, showNotification, form, current_
        <span className="left_tit">&nbsp;&nbsp;报名</span>
        <img src={apply_top} className="step_icon"/>
        <div className="border_dashed"></div>
-        <img src={apply_one_active} className="step_icon"/>
+        <img src={applyStatue ? apply_one : apply_one_active} className="step_icon"/>
        <div className="border_dashed"></div>
-        <img src={apply_two} className="step_icon"/>
+        <img src={applyStatue ? apply_two_active : apply_two} className="step_icon"/>
        <div className="border_dashed"></div>
        <img src={apply_down} className="step_icon"/>
      </div>
-      <div className="apply_tip font-15">
+      {!applyStatue && <div className="apply_tip font-15">
        <img src={apply_notice} className="apply_notice"/>
        请认真核对报名信息，务必与线下报名表信息一致！
-      </div>
-      <div className="apply_information mb30">
-        <div className="info_head">填写报名信息</div>
+      </div>}
+      <div className="apply_information mb60">
+        <div className="info_head">{!applyStatue && '填写'}报名信息</div>
        {/* 报名表单 */}
-        <Form className="info_form">
+        {!applyStatue && <Form className="info_form">
          {helper('参赛单位',
            'expertName',
            [{ required: true, message: "参赛单位不能为空" },
@ -79,14 +88,14 @@ export default Form.create()(({ match, history, showNotification, form, current_
            'expertName',
            [{ required: true, message: "军衔不能为空" }],
            <Select placeholder="请选择赛区">
-              {competitionArea.map(item=> {return <Option value={item.value}>{item.title}</Option>})}
+              {competitionArea.map(item=> {return <Option value={item.value} key={item.value}>{item.title}</Option>})}
            </Select>
          )}
          {helper('赛项',
            'expertName',
            [{ required: true, message: "军衔不能为空" }],
            <Select placeholder="请选择赛项">
-              {competitionType.map(item=> {return <Option value={item.value}>{item.title}</Option>})}
+              {competitionType.map(item=> {return <Option value={item.value} key={item.value}>{item.title}</Option>})}
            </Select>
          )}
          <div className="class_from">
@ -108,8 +117,28 @@ export default Form.create()(({ match, history, showNotification, form, current_
            {/*  */}
            <EditTable/>
          </div>
-        </Form>
+        </Form>}
+        {/* 已报名，报名信息 */}
+        {applyStatue && <div className="info">
+          <div><span>参赛单位 : </span></div>  
+          <div className="info-right"><span>参赛团队负责人姓名 : </span></div>  
+          <div><span>职务 : </span></div>  
+          <div className="info-right"><span>军衔 : </span></div>  
+          <div><span>赛区 : </span></div>  
+          <div className="info-right"><span>赛项 : </span></div>  
+          <div><span>课题来源 : </span></div>  
+          <div className="info-right"><span>成员 : </span></div>  
+          <div><span>电话 : </span></div>  
+        </div>}
      </div>
+      {!applyStatue && <div className="apply_but">
+        <Button type="primary" className="submit_info">
+          提交资料
+        </Button>
+        <Button className="add_member cancel_submit ml20">
+          取消
+        </Button>
+      </div>}
    </div>
  )
 })
--- a/src/military/qz2022/apply/index.scss
+++ b/src/military/qz2022/apply/index.scss
@ -29,16 +29,16 @@
    }
 }
 .apply_information{
-    // padding: 0 0 30px 30px;
    background-color:#ffffff;
    border-radius:4px;
    box-shadow:0px 3px 12px #ecf0ff;
+    padding-bottom: 1px;
    .info_head{
        border-bottom: 1px solid #eee;
        padding: 12px 30px;
    }
    .info_form{
-        padding: 8px 0 0 30px;
+        padding: 8px 0 30px 30px;
        .ant-form-item{
            display: inline-block;
            width: 33%;
@ -48,24 +48,71 @@
            display: inline;
        }
    }
+    .info{
+        border: 0.5px solid rgba(153, 153, 153, 0.3);
+        margin: 20px 70px 30px 25px;
+        div{
+            display: inline-block;
+            display: inline-block;
+            width: 50%;
+            border-right: 1px solid rgba(153, 153, 153, 0.3);
+            border-bottom: 1px solid rgba(153, 153, 153, 0.3);
+            height: 44px;
+            padding-left: 40px;
+            line-height: 44px;
+        }
+        .info-right{
+            border-right: none;
+        }
+        & div:last-child{
+            border-right: none;
+            border-bottom: none;
+        }
+    }
    .apply_team{
        color: red;
        .add_member{
+            padding: 0 12px;
            margin: 10px 0 20px;
            border-radius:4px;
        }
+        .member_info{
+            padding-right: 240px;
+        }
        .member_info .ant-table{
            margin-top: 20px;
            .ant-form-item{
                width: 76%;
+                margin: 0 0 10px 0;
+                position: relative;
+            }
+            .ant-form-item .has-error .ant-form-explain{
+                font-size: 12px;
+                position: absolute;
            }
        }
        .ant-table-thead > tr > th, .ant-table-tbody > tr > td{
-            padding: 3px 16px;
-            text-align: center;
+            padding: 12px 16px;
+            text-align: left;
        }
        .ant-table-thead > tr > th:first-child, .ant-table-tbody > tr > td:first-child{
-            padding: 3px 16px 3px 55px;
+            padding-left: 55px;
+        }
+        .apply_delete{
+            width: 16px;
+            margin-bottom: 12px;
+            &:hover{cursor: pointer;}
        }
    }
+}
+.apply_but{
+    padding-bottom: 60px;
+    text-align: center;
+    .cancel_submit, .submit_info{
+        padding: 0 18px;
+        height: 36px;
+    }
+    .cancel_submit{
+        padding: 0 30px;
+    }
 }
--- a/src/military/qz2022/editTable/index.jsx
+++ b/src/military/qz2022/editTable/index.jsx
@ -1,6 +1,7 @@
 import React, { useState, useCallback, useMemo, useEffect } from "react";
 import { Table, Input, Button, Popconfirm, Form } from 'antd';
 import './index.scss';
+import apply_delete from "../image/apply_delete.png";

 const EditableContext = React.createContext();

@ -72,13 +73,12 @@ class EditableTable extends React.Component {
        title: '姓名',
        dataIndex: 'name',
        editable: true,
-        align:'left'
      },
      {
        title: '单位',
-        width: '30%',
        dataIndex: 'age',
        editable: true,
+        width: '30%',
      },
      {
        title: '职务',
@ -93,10 +93,11 @@ class EditableTable extends React.Component {
      {
        title: '操作',
        dataIndex: 'operation',
+        width: '10%',
        render: (text, record) =>
          this.state.dataSource.length >= 1 ? (
            <Popconfirm title="确定删除此成员?" onConfirm={() => this.handleDelete(record.key)}>
-              <a>删除</a>
+              <img src={apply_delete} className="apply_delete"/>
            </Popconfirm>
          ) : null,
      },
--- a/src/military/qz2022/fetch.js
+++ b/src/military/qz2022/fetch.js
@ -7,4 +7,5 @@ let actionUrl = settings && settings.api_urls && settings.api_urls.task ? settin
 const service = javaFetch(actionUrl);
 export const httpUrl = actionUrl;
 export const main_web_site_url = settings && settings.main_web_site_url;
+export const current_main_site_url = settings && settings.current_main_site_url;
 export default service;
--- a/src/military/qz2022/image/apply_delete.png
+++ b/src/military/qz2022/image/apply_delete.png
--- a/src/military/qz2022/image/apply_one.png
+++ b/src/military/qz2022/image/apply_one.png
--- a/src/military/qz2022/image/apply_two_active.png
+++ b/src/military/qz2022/image/apply_two_active.png
--- a/src/military/qz2022/index.scss
+++ b/src/military/qz2022/index.scss
@ -36,7 +36,7 @@
  .qzCont{
    min-height: 35vh;
    border-radius:4px;
-    box-shadow:0px 3px 12px #ecf0ff;
+    // box-shadow:0px 3px 12px #ecf0ff;
  }
 }
 .qz_manage{