编辑评审规则和选择评审专家

2021-12-24 09:27:06 +08:00 · 2021-12-24 09:27:06 +08:00 · 7e6bb3c714
parent 95265e5f64
commit 7e6bb3c714
8 changed files with 367 additions and 101 deletions
--- a/src/military/components/paginationTable/index.jsx
+++ b/src/military/components/paginationTable/index.jsx
@ -3,7 +3,7 @@ import { Table, Pagination } from 'antd';
 import './index.scss';

 export default (props) => {
-  const { loading, dataSource, columns, handleRow, total, setCurPage, current } =props;
+  const { loading, dataSource, columns, handleRow, total, setCurPage, current, rowSelection, expandedRowRender, expandIconColumnIndex } =props;

  return (
    <Fragment>
@ -14,6 +14,9 @@ export default (props) => {
        columns={columns}
        pagination={false}
        onRow={handleRow}
+        rowSelection={rowSelection}
+        expandedRowRender={expandedRowRender}
+        expandIconColumnIndex={expandIconColumnIndex}
        {...props}
      />
      {total > 10 &&
--- a/src/military/expert/register/image/warning.svg
+++ b/src/military/expert/register/image/warning.svg
--- a/src/military/expert/index.scss
+++ b/src/military/expert/index.scss
@ -50,3 +50,68 @@
    border-color: #5d6eff;
  }
 }
+
+//弹出确认框样式
+.expert_modal .ant-modal-content{
+  width: 550px;
+  height: 318px;
+  & .ant-modal-header{
+    padding: 0.6em 2.1em;
+    background: #F2F2FF;
+    & .ant-modal-title {
+      text-align: left;
+    }
+  }
+  & .ant-modal-body{
+    padding-left: 120px;
+    & p{
+      font-size: 16px;
+      color: #666666;
+      font-family: PingFangSC-Regular, PingFang SC;
+      line-height: 2.9em;
+    }
+    & .weight_bold{
+      font-weight: bold;
+    }
+    & .warning::before{
+      content: url('./image/warning.svg');
+      width: 32px;
+      position: relative;
+      top: 11px;
+      left: -15px;
+    }
+  }
+  & .ant-btn{
+    padding: 0 1.3em;
+    height: 2.55em;
+    border-radius: 4px;
+    cursor: pointer;
+    color: #404660;
+    border: 1px solid #E3E7ED;
+    width: 7em;
+    &:hover{
+      background-color: #F8F8F8;
+      border: 1px solid #E3E7ED;
+    }
+    &:active{
+      background-color: #F3F3F3;
+      border: 1px solid #E3E7ED;
+    }
+  }
+  & .ant-btn.ant-btn-primary{
+    color: white;
+    background-color: #4154F1;
+    margin-left: 2.5em;
+    &:hover{
+      background-color: #5D6EFF;
+    }
+    &:active{
+      background-color: #374BF2;
+    }
+  }
+  & .ant-modal-footer {margin-top: 15px; }
+}
+.expert_modal.submit .ant-modal-body{
+  padding-left: 0;
+  text-align: center;
+}
--- a/src/military/expert/register/index.scss
+++ b/src/military/expert/register/index.scss
@ -80,66 +80,3 @@
 .expert_register .ant-select-dropdown-menu-item:hover, .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled){
  background-color: #F2F3FF;
 }
-.expert_modal .ant-modal-content{
-  width: 550px;
-  height: 318px;
-  & .ant-modal-header{
-    padding: 0.6em 2.1em;
-    background: #F2F2FF;
-    & .ant-modal-title {
-      text-align: left;
-    }
-  }
-  & .ant-modal-body{
-    padding-left: 120px;
-    & p{
-      font-size: 16px;
-      color: #666666;
-      font-family: PingFangSC-Regular, PingFang SC;
-      line-height: 2.9em;
-    }
-    & .weight_bold{
-      font-weight: bold;
-    }
-    & .warning::before{
-      content: url('./image/warning.svg');
-      width: 32px;
-      position: relative;
-      top: 11px;
-      left: -15px;
-    }
-  }
-  & .ant-btn{
-    padding: 0 1.3em;
-    height: 2.55em;
-    border-radius: 4px;
-    cursor: pointer;
-    color: #404660;
-    border: 1px solid #E3E7ED;
-    width: 7em;
-    &:hover{
-      background-color: #F8F8F8;
-      border: 1px solid #E3E7ED;
-    }
-    &:active{
-      background-color: #F3F3F3;
-      border: 1px solid #E3E7ED;
-    }
-  }
-  & .ant-btn.ant-btn-primary{
-    color: white;
-    background-color: #4154F1;
-    margin-left: 2.5em;
-    &:hover{
-      background-color: #5D6EFF;
-    }
-    &:active{
-      background-color: #374BF2;
-    }
-  }
-  & .ant-modal-footer {margin-top: 15px; }
-}
-.expert_modal.submit .ant-modal-body{
-  padding-left: 0;
-  text-align: center;
-}
--- a/src/military/expert/registerList/index.jsx
+++ b/src/military/expert/registerList/index.jsx
@ -62,7 +62,7 @@ function RegisterList({ showNotification }) {
      dataIndex: 'professionalYears',
    },
    {
-      title: '专业类别',
+      title: '专家类别',
      dataIndex: 'expertType',
    },
    {
--- a/src/military/expert/selectExpert/index.jsx
+++ b/src/military/expert/selectExpert/index.jsx
@ -1,13 +1,22 @@
-import React, { Component, useCallback } from "react";
-import { Tabs, Input, Select } from 'antd';
-import { unitType, reviewArea } from '../static.js';
+import React, { useState, useEffect, useMemo } from "react";
+import { Tabs, Input, Select, Button, Modal, Form } from 'antd';
+import { professionalType, reviewArea } from '../static.js';
+import { expertList } from "../api.js";
+import Paginationtable from "../../components/paginationTable";
 import './index.scss';
 import '../index.scss';
+import { Link } from "react-router-dom";

 const { TabPane } = Tabs;
 const { Option } = Select;
+const { Search } = Input;

-function SelectExpert() {
+function SelectExpert(props) {
+  console.log('选择专家', props);
+  const { form, location } = props;
+  const { getFieldDecorator, setFieldsValue, getFieldsValue } = form;
+  const { taskRecord } = location && location.state;
+  console.log('信息',taskRecord);

  // const TaskDetail = (
  //   <div>
@ -15,7 +24,143 @@ function SelectExpert() {
  //     <p className="mt10">任务名称</p>
  //     <p className="mt10 pb20">任务链接</p>
  //   </div>
-  // ) 
+  // )
+  const [reload, setReload] = useState();
+  const [loading, setLoading] = useState(false);
+  const [curPage, setCurPage] = useState(1);
+  const [dataList, setDataList] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [pageSize, setPageSize] = useState(10);
+  const [searchInput, setSearchInput] = useState('');
+  const [expertType, setExpertType] = useState('');
+  const [reviewAreaSel, setReviewAreaSel] = useState('');
+  //是否支持多选
+  const [selectExperts, setSelectExperts] = useState(false);
+  //专家多选确认框
+  const [okConfirmExps, setOkConfirmExps] = useState(false);
+  //专家多选-选择个数
+  const [selectExpertCount, setSelectExpertCount] = useState(0);
+  //随机抽取专家确认框
+  const [okConfirmExtract, setOkConfirmExtract] = useState(false);
+  //批量删除专家
+  const [deleteExperts, setDeleteExperts] = useState(false);
+
+  const columns = useMemo(() => {
+    return [
+      {
+        title: '编号',
+        dataIndex: 'index',
+        width: 80,
+        align: 'center',
+      },
+      {
+        title: '专家姓名',
+        dataIndex: 'expertName',
+        key: 'expertName',
+      },
+      {
+        title: '手机号码',
+        dataIndex: 'phone',
+        width: 150,
+        key: 'phone',
+      },
+      {
+        title: '最高学历',
+        dataIndex: 'highestDegree',
+        key: 'highestDegree',
+      },
+      {
+        title: '专业职称',
+        dataIndex: 'professionalTitle',
+      },
+      {
+        title: '专家类别',
+        dataIndex: 'expertType',
+      },
+      {
+        title: '评审领域',
+        dataIndex: 'reviewAreas',
+        align: 'center',
+      },
+      {
+        title: '专家评分',
+        dataIndex: 'expertScore',
+        align: 'center',
+      },
+      {
+        title: '操作',
+        dataIndex: 'action',
+        width: 180,
+        align: 'center',
+        render: (text, record) => {
+          return <React.Fragment>
+            <Button className="mr5 font-12" type="primary" size="small" onClick={() => { check(record, '1') }}>专家详情</Button>
+            <Button className="mr5 font-12" type="danger" size="small" onClick={() => { check(record, '2') }}>已添加</Button>
+          </React.Fragment>
+        }
+      }
+    ];
+  }, []);
+
+  const rowSelection = {
+    onChange: (selectedRowKeys, selectedRows) => {
+      setSelectExpertCount(selectedRows.length);
+      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows, selectedRows.length);
+    },
+    getCheckboxProps: record => ({
+      name: record.name,
+    }),
+  };
+
+  // const SelectExpertsBus = (
+  //   <button className="but41_fill" onClick={() => setSelectExperts(false)}>取消</button>
+  // )
+
+  // 获取列表
+  useEffect(() => {
+    setLoading(true);
+    let params = {
+      searchInput,
+      expertType: expertType === 'all' ? '' : expertType,
+      reviewArea: reviewAreaSel === 'all' ? '' : reviewAreaSel,
+      pageSize,
+      curPage,
+      statusString: '1',
+    };
+    expertList(params).then(data => {
+      if (data && Array.isArray(data.rows)) {
+        let index = 1;
+        for (const item of data.rows) {
+          item.reviewAreas = `${item.reviewAreaOne} ${item.reviewAreaTwo && `、`} ${item.reviewAreaTwo} ${item.reviewAreaThree && `、`} ${item.reviewAreaThree} `;
+          item.index = (index++) + (curPage > 1 ? (curPage - 1) * 10 : 0);
+        }
+      }
+      setDataList(data.rows || []);
+      setLoading(false);
+      setTotal(data.total);
+    });
+  }, [curPage, reload, searchInput, expertType, reviewAreaSel]);
+
+  function check(record, checkStatus) {
+    Modal.confirm({
+      title: "警告",
+      content: checkStatus == '1' ? "确认通过吗？通过后该用户将成为专家库的一员" : "确认拒绝吗？拒绝后该用户此次不能成为专家",
+      okText: '确定',
+      cancelText: '取消',
+      onOk() {
+        registerCheck({
+          expertId: record.id,
+          isPassed: checkStatus,
+          userId: record.userId,
+        }).then(res => {
+          if (res.message === 'success') {
+            showNotification('操作成功!');
+            setReload(Math.random());
+          }
+        });
+      },
+    });
+  }

  return (
    <div className="centerbox select_expert">
@ -24,47 +169,127 @@ function SelectExpert() {
        <TabPane tab="已选专家" key='0'>
          <div>
            <div className="box"></div>
-            <p className="font-16">任务信息</p>
-            <p className="mt10">任务名称</p>
-            <p className="mt10 pb20">任务链接</p>
+            <p className="font-16 pt15">任务信息</p>
+            <p className="mt10">任务名称<span className="ml10">{taskRecord.name}</span></p>
+            <p className="mt10 pb20">任务链接<Link className="taskLink ml10" target="_blank" to={`/task/taskDetail/${taskRecord.id}`} >{`/task/taskDetail/${taskRecord.id}`}</Link></p>
          </div>
+          <div className="df mb20">
+            <p className="font-16">已选取评审专家</p>
+            <div>
+              {!deleteExperts && <button className="but41_fill" onClick={() => setDeleteExperts(true)}>批量删除</button>}
+              {deleteExperts && <button className="butE3_border" onClick={() => setDeleteExperts(false)}>取消</button>}
+              {deleteExperts && <button className="but41_fill ml20" onClick={() => selectExpertCount !== 0 && setOkConfirmExps(true)}>添加</button>}
+              <Modal
+                title="批量添加"
+                visible={okConfirmExps}
+                onOk={() => { history.go(-1) }}
+                onCancel={() => setOkConfirmExps(false)}
+                wrapClassName="expert_modal"
+              >
+                <p className='weight_bold warning'>您确定要添加选中的{selectExpertCount}个专家吗？</p>
+                <p className='ml30'>此操作将添加选中的{selectExpertCount}个专家，请进行确认</p>
+              </Modal>
+            </div>
+          </div>
+          <Paginationtable
+            loading={loading}
+            dataSource={dataList}
+            columns={columns}
+            total={total}
+            setCurPage={setCurPage}
+            current={curPage}
+            rowSelection={selectExperts ? rowSelection : null}
+          />
        </TabPane>
        <TabPane tab="专家选取" key='1'>
          <div>
            <div className="box"></div>
-            <p className="font-16">任务信息</p>
-            <p className="mt10">任务名称</p>
-            <p className="mt10 pb20">任务链接</p>
+            <p className="font-16 pt15">任务信息</p>
+            <p className="mt10">任务名称<span className="ml10">{taskRecord.name}</span></p>
+            <p className="mt10 pb20">任务链接<Link className="taskLink ml10" target="_blank" to={`/task/taskDetail/${taskRecord.id}`} >{`/task/taskDetail/${taskRecord.id}`}</Link></p>
          </div>
-          <div className="df">
-            <p>添加评审专家</p>
+          <div className="df mb20">
+            <p className="font-16">添加评审专家</p>
            <div>
-              <button className="but41_fill">批量添加</button>
-              <button className="but41_fill">随机抽取</button>
+              {!selectExperts && <button className="but41_fill" onClick={() => setSelectExperts(true)}>批量添加</button>}
+              {selectExperts && <button className="butE3_border" onClick={() => setSelectExperts(false)}>取消</button>}
+              {selectExperts && <button className="but41_fill ml20" onClick={() => selectExpertCount !== 0 && setOkConfirmExps(true)}>添加</button>}
+              <button className="but41_fill ml20" onClick={() => setOkConfirmExtract(true)}>随机抽取</button>
+              <Modal
+                title="批量添加"
+                visible={okConfirmExps}
+                onOk={() => { history.go(-1) }}
+                onCancel={() => setOkConfirmExps(false)}
+                wrapClassName="expert_modal"
+              >
+                <p className='weight_bold warning'>您确定要添加选中的{selectExpertCount}个专家吗？</p>
+                <p className='ml30'>此操作将添加选中的{selectExpertCount}个专家，请进行确认</p>
+              </Modal>
+
+              <Modal
+                title="随机抽取"
+                visible={okConfirmExtract}
+                onOk={() => { history.go(-1) }}
+                onCancel={() => setOkConfirmExtract(false)}
+                wrapClassName="expert_modal extract"
+              >
+                <span>请输入数量：</span><Input placeholder="请输入"></Input>
+              </Modal>
            </div>
          </div>
-          <div className="df">
-            查询条件：<Input style={{ width: 220 }}></Input>
-            专家类别：
-            <Select placeholder="所有类别" style={{ width: 220 }}>
-              <Option value='all'>所有类别</Option>
-              {unitType.map(item => {
-                return <Option key={item.value} value={item.value}>{item.label}</Option>
-              })}
-            </Select>
-            评审领域：
-            <Select style={{ width: 220 }}>
-              <Option value='all'>所有领域</Option>
-              {reviewArea.map(item => {
-                return <Option key={item.value} value={item.value}>{item.label}</Option>
-              })}
-            </Select>
-            <button className="but41_fill ml80">查询</button>
-            <button className="butE3_border">清除</button>
+          <div className="df search">
+            <Form className="df">
+              <Form.Item label="查询条件：">
+                {getFieldDecorator('searchInput', {})(<Search
+                  maxLength={20}
+                  style={{ width: "200px" }}
+                  placeholder="请输入专家全名或手机号"
+                  onSearch={(value) => { setSearchInput(value); setCurPage(1); }}
+                />)}
+              </Form.Item>
+              <Form.Item label="专家类别：">
+                {getFieldDecorator('expertType', {})(
+                  <Select placeholder="所有类别" style={{ width: 220 }} onChange={(value) => { setExpertType(value) }}>
+                    <Option value='all'>所有类别</Option>
+                    {professionalType.map(item => {
+                      return <Option key={item.value} value={item.value}>{item.label}</Option>
+                    })}
+                </Select>)}
+              </Form.Item>
+              <Form.Item label="评审领域：">
+                {getFieldDecorator('reviewAreaSel', {})(
+                  <Select placeholder="所有领域" style={{ width: 220 }} onChange={value => setReviewAreaSel(value)}>
+                    <Option value='all'>所有领域</Option>
+                    {reviewArea.map(item => {
+                      return <Option key={item.value} value={item.value}>{item.label}</Option>
+                    })}
+                </Select>)}
+              </Form.Item>
+            </Form>
+            <button className="butE3_border ml120 mb25" onClick={() => {
+              setSearchInput('');
+              setExpertType('');
+              setReviewAreaSel('');
+              setFieldsValue({
+                searchInput: '',
+                expertType: 'all',
+                reviewAreaSel: 'all'
+              });}}>清除</button>
          </div>
+          <Paginationtable
+            loading={loading}
+            dataSource={dataList}
+            columns={columns}
+            total={total}
+            setCurPage={setCurPage}
+            current={curPage}
+            // rowSelection={selectExperts ? rowSelection : null}
+            rowSelection={ rowSelection}
+            expandedRowRender={record => <p style={{ margin: 0 }}>{record.graduatedFrom}</p>}
+            expandIconColumnIndex={10}
+          />
        </TabPane>
-
      </Tabs>
    </div>)
 }
-export default SelectExpert;
+export default Form.create()(SelectExpert);
--- a/src/military/expert/selectExpert/index.scss
+++ b/src/military/expert/selectExpert/index.scss
@ -1,4 +1,6 @@
 .centerbox.select_expert{
+  margin: -10px auto;
+  padding-top: 16px;
  background: white;
  .title_one, .ant-tabs-nav-wrap, .ant-tabs .ant-tabs-top-content{
    padding: 0 2em;
@ -12,5 +14,39 @@
    display: flex;
    justify-content: space-between;
    align-items: center;
+    &.ant-form{
+      width: 78vw;
+    }
+  }
+  .search{
+    .ant-form-item{
+      display: flex;
+    }
+  }
+  .ant-pagination{
+    text-align: right;
+    margin: 20px 0;
+  }
+  .ant-table-thead > tr > th, .ant-table-tbody > tr > td{
+    padding: 16px 0 16px 10px;
+  }
+  .ml120{
+    margin-left: 120px;
+    width: 6em;
+  }
+  .taskLink{color:#4154F1}
+}
+.expert_modal.extract{
+  .ant-modal-content {
+    width: 387px;
+    height: 230px;
+    .ant-modal-body {
+      padding: 3.5vh 2.1em;
+      display: flex;
+      align-items: center;
+    }
+  }
+  .ant-input{
+    width: 12vw;
  }
 }
--- a/src/military/task/taskAdmin/index.jsx
+++ b/src/military/task/taskAdmin/index.jsx
@ -242,7 +242,7 @@ export default Form.create()(({ form, showNotification, match, history }) => {
        title: '专家选取',
        dataIndex: 'expertSelectedCount',
        render: (text, record) => {
-          return record.expertReview ? '' : <Link className="line_1 primary-link" to='/expert/admin/task/review/select'>选择</Link>
+          return record.expertReview ? '' : <Link className="line_1 primary-link" to={{ pathname: '/expert/admin/task/review/select', state: { 'taskRecord': record } }}>选择</Link>
        }
      },
      {