导入调试

2021-12-21 17:06:04 +08:00 · 2021-12-21 17:06:04 +08:00 · 25bfefb809
parent 6d91801f2e
commit 25bfefb809
9 changed files with 385 additions and 93 deletions
--- a/src/common/TextUtil.js
+++ b/src/common/TextUtil.js
@ -69,7 +69,10 @@ export function appendFileSizeToUploadFile(item) {
 }
 export function appendFileSizeToUploadFileAll(fileList) {
    return fileList && fileList.map(item => {
-        if (item.name.indexOf(uploadNameSizeSeperator) == -1) {
+        if(!item.name)item.name=item.fileName;
+        if(!item.uid)item.uid="rc-upload" + item.id;
+        if(!item.size)item.size=item.fileSize;
+        if ((item.name).indexOf(uploadNameSizeSeperator) == -1) {
            return Object.assign({}, item, { name: `${item.name}${uploadNameSizeSeperator}${bytesToSize(item.size)}` })
        }
        return item
--- a/src/military/components/ModalFun/index.jsx
+++ b/src/military/components/ModalFun/index.jsx
@ -0,0 +1,133 @@
+/* eslint-disable react/jsx-no-duplicate-props */
+import React, { useState } from 'react';
+import * as ReactDOM from 'react-dom';
+import { Modal, Button } from 'antd';
+import './index.scss';
+
+// 函数式调用删除、通知等模态框
+
+InitModal.defaultProps = {
+  okText: '确认',     //确定按钮的文字
+  cancelText: '取消',  //取消按钮的文字
+  className: '',         //传入的模态框类名
+  inputId: 'copyText',    //要复制的文本的ID
+  onCancel:()=>{},        //取消的回调
+  onOk:()=>{},            //确认的回调
+  title:'提示',            //模态框名字
+  contentTitle:'',        //内容标题
+  content:'',             //详细内容
+  afterClose:()=>{},      //关闭模态框以后的回调
+};
+
+// 使用函数调用删除组件
+export default function DelModal(props) {
+  renderModal({ ...props, type: 'delete' })
+}
+
+// 使用函数调用选择模态框组件
+export function Confirm(props) {
+  renderModal({ ...props, type: 'confirm' })
+}
+
+// 使用函数调用选择模态框组件
+export function Info(props) {
+  renderModal({ ...props, type: 'info' })
+}
+
+
+function renderModal(props) {
+  const { type, afterClose } = props;
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+
+  function destroy() {
+    afterClose && afterClose();
+    const unmountResult = ReactDOM.unmountComponentAtNode(div);
+    if (unmountResult && div.parentNode) {
+      div.parentNode.removeChild(div);
+    }
+  }
+
+  function modalType(type) {
+    if (type === 'delete') {
+      return <InitModal
+        title="删除"
+        contentTitle="确定要删除吗？"
+        okText="确认删除"
+        {...props}
+
+        afterClose={destroy}
+        contentTitle={<React.Fragment>
+          <i className="red-circle iconfont icon-shanchu_tc_icon mr3"></i>
+          {props.contentTitle}
+        </React.Fragment>}
+      />
+    } else if (type === 'confirm') {
+      return <InitModal title="选择" afterClose={destroy} {...props} />
+    } else if (type === 'info') {
+      return <InitModal title="选择"  afterClose={destroy} {...props} okText="知道了"/>
+    } else {
+      return <InitModal title="选择" afterClose={destroy} {...props} />
+    }
+  }
+
+  function render() {
+    setTimeout(() => {
+      ReactDOM.render(
+        modalType(type),
+        div,
+      );
+    });
+  }
+  render();
+}
+
+// 选择模态框组件
+function InitModal({
+  onCancel,
+  onOk,
+  title,
+  contentTitle,
+  content,
+  okText,
+  cancelText,
+  afterClose,
+  className,
+}) {
+
+  const [visible, setVisible] = useState(true);
+
+  function onCancelModal() {
+    setVisible(false);
+    onCancel && onCancel()
+  }
+
+  function onSuccess() {
+    setVisible(false);
+    onOk && onOk();
+  }
+
+  return (
+    <Modal
+      visible={visible}
+      onCancel={onCancelModal}
+      afterClose={afterClose}
+      title={title}
+      className={`myself-modal ${className}`}
+      centered
+      footer={[
+        <Button type="default" key="back" onClick={onCancelModal}>
+          {cancelText}
+        </Button>,
+        <Button className="foot-submit" key="submit" onClick={onSuccess}>
+          {okText}
+        </Button>,
+      ]}
+    >
+      <div>
+        {contentTitle && <p className="content-title">{contentTitle}</p>}
+        <p className="content-descibe">{content}</p>
+      </div>
+    </Modal>
+  )
+}
--- a/src/military/components/ModalFun/index.scss
+++ b/src/military/components/ModalFun/index.scss
@ -0,0 +1,62 @@
+.myself-modal {
+  .ant-modal-header {
+    padding: 9px 24px;
+    background: #f8f8f8;
+    border-bottom: 1px solid #eee;
+  }
+  .ant-modal-title {
+    text-align: left;
+  }
+  .ant-modal-close {
+    top: 0px !important;
+  }
+  .ant-modal-close-x {
+    font-size: 24px;
+  }
+  .ant-modal-body {
+    text-align: center;
+  }
+  .content-title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 2rem 0 1rem !important;
+    font-size: 16px;
+    color: #333;
+    letter-spacing: 0;
+    line-height: 29px;
+    font-weight: 400;
+  }
+  .red-circle {
+    align-self: flex-start;
+    color: #ca0002;
+    font-size: 1.5rem !important;
+  }
+  .content-descibe {
+    font-size: 14px;
+    color: #666;
+    line-height: 33px;
+    font-weight: 400;
+  }
+  .ant-modal-footer {
+    padding: 2rem 0;
+    text-align: center;
+    border: 0;
+    .ant-btn {
+      width: 6rem;
+    }
+  }
+  .foot-submit {
+    margin-left: 3rem;
+    color: #4154F1;
+    &:hover {
+      border-color: #4154F1;
+    }
+  }
+  .ant-btn-default:hover,
+  .ant-btn-default:active,
+  .ant-btn-default:focus {
+    background: #5d6eff;
+    border-color: #5d6eff;
+  }
+}
--- a/src/military/expert/api.js
+++ b/src/military/expert/api.js
@ -45,6 +45,16 @@ export async function expertRegister(data){
  return res;
 }

+//更新专家信息
+export async function expertUpdate(data){
+  let res = await fetch({
+    url: '/api/experts/',
+    method: 'put',
+    data,
+  });
+  return res;
+}
+
 //管理员审核专家信息
 export async function registerCheck(data){
  let res = await fetch({
--- a/src/military/expert/expertList/index.jsx
+++ b/src/military/expert/expertList/index.jsx
@ -1,14 +1,16 @@
 import React, { useState, useMemo, useEffect } from "react";
-import { Input, Select, Button, Form, DatePicker, Table, Pagination, Modal } from 'antd';
+import { Input, Select, Button, Form, DatePicker, Table, Pagination, Upload, Modal } from 'antd';
+import cookie from 'react-cookies';
 import Paginationtable from "../../components/paginationTable";
-import Upload from '../components/Upload';
+import { Info } from '../../components/ModalFun';
 import { expertList, registerCheck } from "../api";
 import { professionalType, reviewArea } from "../static";
+import { httpUrl } from '../fetch';

 import './index.scss';
 import '../index.scss';
 const { Search } = Input;
-const Option=Select.Option;
+const Option = Select.Option;

 function RegisterList({ showNotification }) {
  const [reload, setReload] = useState();
@ -172,25 +174,64 @@ function RegisterList({ showNotification }) {
    });
  }

-  // 上传附件后得到的文件数组
-  function uploadExpert(fileList, files) {
-    setUploadExpertList(fileList);
-    setUploadExpertIds(files);
+  function beforeUpload(file) {
+    const isExcel = file.type.indexOf('xlsx') || file.type.indexOf('xls') || file.type.indexOf('sheet');
+    if (!isExcel) {
+      showNotification(`只支持.xlsx、xls格式!`);
+    }
+    return isExcel;
  }

+  function handleChange(info) {
+    if (info.file.status === 'uploading' || info.file.status === 'done') {
+      if (info.file.response) {
+        console.log(info.file.response.data);
+        let resData = info.file.response.data;
+        Info({
+          title: '提示',
+          content: <div className="import-important">
+            {resData.successMessage && <div>
+              <p>导入成功：</p>
+              <p dangerouslySetInnerHTML={{ __html: resData.successMessage }}></p>
+            </div>}
+            {resData.failMessage && <div>
+              <p>导入失败：</p>
+              <p dangerouslySetInnerHTML={{ __html: resData.failMessage }}></p>
+            </div>}
+          </div>,
+        });
+        setReload(Math.random());
+      }
+    }
+  }
+
+  const upload = {
+    name: 'file',
+    action: `${httpUrl}/api/experts/registerByExcel`,
+    onChange: handleChange,
+    beforeUpload: beforeUpload,
+    accept: ".xlsx,.xls",
+    showUploadList: false,
+    withCredentials: true,
+    headers: {
+      Authorization: cookie.load('autologin_forge_military') || sessionStorage.osredmToken,
+    },
+  };
+
  return (
    <div className="expert-list centerbox">
      <div className="center-screen" >
        <div className="center-right-but">
-          <div>
-            <span>查询条件：</span>
+          <Form.Item label={"全名/手机"}>
            <Search
              maxLength={20}
              style={{ width: "300px" }}
              placeholder="请输入专家全名或手机号"
              onSearch={(value) => { setSearchInput(value); setCurPage(1); }}
            />
-            <span className="ml20">专家类别：</span>
+          </Form.Item>
+
+          <Form.Item label={"专家类别"}>
            <Select
              style={{ width: "150px" }}
              placeholder="所有类别"
@ -201,28 +242,28 @@ function RegisterList({ showNotification }) {
                return <Option key={item.value} value={item.value}>{item.label}</Option>
              })}
            </Select>
-            <span>评审领域：</span>
+          </Form.Item>
+
+          <Form.Item label={"评审领域"}>
            <Select
              style={{ width: "150px" }}
              placeholder="所有领域"
              dropdownClassName="expert_register"
              onChange={(value) => { setSearchReviewArea(value) }}>
-              <Option value="">所有领域</Option>
+              <Option key={'all'} value="">所有领域</Option>
              {reviewArea.map(item => {
-                return <Option value={item.value}>{item.label}</Option>
+                return <Option key={item.value} value={item.value}>{item.label}</Option>
              })}
            </Select>
-          </div>
-          <div>
-            {/* <Upload
-              load={uploadExpert}
-              size={50}
-              showNotification={showNotification}
-              fileList={uploadExpertList}
-            ></Upload> */}
+          </Form.Item>
+        </div>
+        <div className="btn-group">
+          <Upload
+            {...upload}
+          >
            <button className="but41_fill">导入</button>
-            <button className="but41_fill">导出</button>
-          </div>
+          </Upload>
+          <button className="but41_fill">导出</button>
        </div>
      </div>
      <Paginationtable
--- a/src/military/expert/expertList/index.scss
+++ b/src/military/expert/expertList/index.scss
@ -2,8 +2,25 @@
  .ant-table-thead > tr > th, .ant-table-tbody > tr > td{
    padding:16px 6px;
  }
-  .center-right-but{
+  .center-screen{
+    display: flex;
    justify-content: space-between;
-    margin-bottom: 2.5em;
+  }
+  .center-right-but{
+    flex:auto;
+    justify-content: space-between;
+    margin:0 4em 2em 0;
+  }
+
+  .ant-form-item-control-wrapper{
+    display: inline-block;
+  }
+  .btn-group{
+    display: flex;
+  }
+  .import-important{
+    span{
+      color: #df0002;
+    }
  }
 }
--- a/src/military/expert/index.scss
+++ b/src/military/expert/index.scss
@ -1,42 +1,53 @@
 // 公共样式
-.but41_fill, .but41_border, .butE3_border{
+.but41_fill,
+.but41_border,
+.butE3_border {
  padding: 0 1.3em;
  height: 2.55em;
  border-radius: 4px;
  cursor: pointer;
 }
-.but41_fill{
+.but41_fill {
  color: white;
-  background-color: #4154F1;
-  &:hover{
-    background-color: #5D6EFF;
+  background-color: #4154f1;
+  &:hover {
+    background-color: #5d6eff;
  }
-  &:active{
-    background-color: #374BF2;
+  &:active {
+    background-color: #374bf2;
  }
 }
-.but41_border{
-  color: #4154F1;
-  border: 1px solid #4154F1;
-  &:hover{
-    color: #5D6EFF;
-    border: 1px solid #5D6EFF;
+.but41_border {
+  color: #4154f1;
+  border: 1px solid #4154f1;
+  &:hover {
+    color: #5d6eff;
+    border: 1px solid #5d6eff;
  }
-  &:active{
-    color: #374BF2;
-    border: 1px solid #374BF2;
+  &:active {
+    color: #374bf2;
+    border: 1px solid #374bf2;
  }
 }
-.butE3_border{
+.butE3_border {
  color: #404660;
-  border: 1px solid #E3E7ED;
+  border: 1px solid #e3e7ed;
  width: 7em;
-  &:hover{
-    background-color: #F8F8F8;
-    border: 1px solid #E3E7ED;
+  &:hover {
+    background-color: #f8f8f8;
+    border: 1px solid #e3e7ed;
  }
-  &:active{
-    background-color: #F3F3F3;
-    border: 1px solid #E3E7ED;
+  &:active {
+    background-color: #f3f3f3;
+    border: 1px solid #e3e7ed;
  }
-}
+}
+
+.ant-btn-primary {
+  background-color: #4154f1;
+  border-color: #4154f1;
+  &:hover {
+    background-color: #5d6eff;
+    border-color: #5d6eff;
+  }
+}
--- a/src/military/expert/register/index.jsx
+++ b/src/military/expert/register/index.jsx
@ -2,7 +2,7 @@ import React, { useEffect, useState, useCallback } from 'react';
 import { Button, Icon, Form, Modal, Input, Select } from 'antd';
 import Upload from '../components/Upload';
 import { unitType, natureOfWork, highestEducation, positionLevel, professionalType, reviewArea } from '../static';
-import { expertRegister, getCurrentExpert, getFile } from '../api';
+import { expertRegister, getCurrentExpert, getFile, expertUpdate } from '../api';

 import './index.scss';
 import '../index.scss';
@ -13,6 +13,7 @@ export default Form.create()(({ match, history, showNotification, form, current_
  const [cancelConfirmValue, setCancelConfirmValue] = useState(false);
  const [submitConfirmValue, setSubmitConfirmValue] = useState(false);
  const [expertRegisterValues, setExpertRegisterValues] = useState();
+  const [lastRegister, setLastRegister] = useState();

  const [resumeList, setResumeList] = useState([]);
  const [resumeIds, setResumeIds] = useState();
@ -23,15 +24,15 @@ export default Form.create()(({ match, history, showNotification, form, current_
  const [achievementList, setAchievementList] = useState([]);
  const [achievementIds, setAchievementIds] = useState();

-  const [honorList, setHonorListList] = useState([]);
+  const [honorList, setHonorList] = useState([]);
  const [honorIds, setHonorIds] = useState();

  // 获取列表
-  useEffect( () => {
+  useEffect(() => {
    let params = {};
-    getCurrentExpert(params).then( async res => {
+    getCurrentExpert(params).then(async res => {
      if (res && res.data && res.data.length) {
-        let lastRegister = res.data.shift();
+        let lastRegister = res.data.pop();
        let params = {
          bankAccount: lastRegister.bankAccount || "",
          bankName: lastRegister.bankName || "",
@ -55,28 +56,38 @@ export default Form.create()(({ match, history, showNotification, form, current_

        setFieldsValue(params);
        setExpertRegisterValues(params);
+        setLastRegister(lastRegister);

+        // 回写文件
        if (lastRegister.resume) {
          let resume = await getFiles(lastRegister.resume);
-          console.log(resume);
-          //  setResumeList(resume);
+          setResumeList(resume);
+          setResumeIds(lastRegister.resume);
        }

        if (lastRegister.titleCertificate) {
-          let titleCertificate =await getFiles(lastRegister.titleCertificate);
-          console.log(titleCertificate);
-          // setTitleCertList(titleCertificate);
+          let titleCertificate = await getFiles(lastRegister.titleCertificate);
+          setTitleCertList(titleCertificate);
+          setTitleCertIds(lastRegister.titleCertificate);
        }

-        // resume: resumeIds,
-        // titleCertificate: titleCertIds,
-        // academicAchievements: achievementIds,
-        // honors: honorIds,
+        if (lastRegister.academicAchievements) {
+          let academicAchievements = await getFiles(lastRegister.academicAchievements);
+          console.log(academicAchievements);
+          setAchievementList(academicAchievements);
+          setAchievementIds(lastRegister.academicAchievements);
+        }
+
+        if (lastRegister.honors) {
+          let honors = await getFiles(lastRegister.honors);
+          setHonorList(honors);
+          setHonorIds(lastRegister.honors);
+        }
      }
    });
  }, []);

-  async function getFiles(ids) {
+  function getFiles(ids) {
    let idArr = ids.split(',');
    let requireArr = idArr.map(i => {
      return new Promise((resolve) => {
@ -87,9 +98,7 @@ export default Form.create()(({ match, history, showNotification, form, current_
        });
      });
    })
-    let res = await Promise.all(requireArr);
-    return res;
-    // return Promise.all(requireArr);
+    return Promise.all(requireArr);
  }


@ -110,7 +119,7 @@ export default Form.create()(({ match, history, showNotification, form, current_
  }

  function uploadHonor(fileList, files) {
-    setHonorListList(fileList);
+    setHonorList(fileList);
    setHonorIds(files);
  }

@ -163,14 +172,18 @@ export default Form.create()(({ match, history, showNotification, form, current_
        honors: honorIds,
        userId: current_user.user_id,
      };
-      expertRegister(params).then(res => {
-        if (res && res.message && res.message.indexOf("成功") > -1) {
-          showNotification(res.message);
-          setSubmitConfirmValue(false);
-        } else {
-          showNotification(res && res.message || "操作失败");
-        }
-      });
+      if (lastRegister) {
+        expertUpdate({
+          ...params,
+          id: lastRegister.id
+        }).then(res => {
+          dealBack(res);
+        });
+      } else {
+        expertRegister(params).then(res => {
+          dealBack(res)
+        });
+      }
    }
  }

@ -187,17 +200,21 @@ export default Form.create()(({ match, history, showNotification, form, current_
          status: 3
        };
        expertRegister(params).then(res => {
-          if (res && res.message && res.message.indexOf("成功") > -1) {
-            showNotification(res.message);
-            setSubmitConfirmValue(false);
-          } else {
-            showNotification(res && res.message || "操作失败");
-          }
+          dealBack(res);
        });
      }
    })
  }

+  function dealBack(res) {
+    if (res && res.message && (res.message.indexOf("成功") > -1 || res.message.indexOf("更新") > -1)) {
+      showNotification("操作成功");
+      setSubmitConfirmValue(false);
+    } else {
+      showNotification(res && res.message || "操作失败");
+    }
+  }
+
  return (
    <div className="centerbox detail">
      <div className="navigation">
@ -461,8 +478,8 @@ export default Form.create()(({ match, history, showNotification, form, current_
            </table>
          </div>
          <div className='buts'>
-            <button className="but41_fill mr20" onClick={() => expertRegisterSubmit(true)}>提交资料</button>
-            <button className="but41_border mr20" onClick={draft}>保存资料</button>
+            <button className="but41_fill mr20" disabled={lastRegister && lastRegister.status === '-1'} onClick={() => expertRegisterSubmit(true)}>提交资料</button>
+            <button className="but41_border mr20" disabled={lastRegister && lastRegister.status === '-1'} onClick={draft}>保存资料</button>
            <button className="butE3_border" onClick={() => setCancelConfirmValue(true)}>取消</button>

            <Modal
--- a/src/military/expert/register/index.scss
+++ b/src/military/expert/register/index.scss
@ -1,25 +1,23 @@
 .centerbox.detail{
  font-size: 20px;
-  & .navigation{
+  .navigation{
    font-size: 0.6em;
    margin: -35px 0 15px;
  }
-  & .center_flex{
+  .center_flex{
    display: flex;
    justify-content: space-between;
-    & .register_left{
+    .register_left{
      height: 10em;
      font-size: 0.7em;
      background-color: white;
      padding: 0.4vw;
    }
-    & .register_right{
+    .register_right{
      background-color: white;
      &>p{
-        height: 5.1vh;
-        line-height: 5.1vh;
        border-bottom: 1px solid #EEEEEE;
-        padding-left: 2em;
+        padding:.5em 2em;
        color: #181818;
        font-size: 0.8em;
        font-weight: bold;