查看分数明细

src/military/expert/reviewResult/gradesModal/index.jsx

@@ -0,0 +1,133 @@
+import React, { useState, useCallback, useMemo, useEffect } from "react";
+import { Button, Modal } from 'antd';
+import Paginationtable from "../../../components/paginationTable";
+import { getOpsScoringDetails } from "../../api";
+import { httpUrl } from '../../fetch';
+
+import './index.scss';
+import '../../index.scss';
+
+function GradesModal({ setVisible, visible, opsId, opsType }) {
+  // 主table参数
+  const [loading, setLoading] = useState(false);
+  const [dataList, setDataList] = useState([]);
+  // 评分规则
+  const [rules, setRules] = useState({});
+  // 通用列
+  const columns = [
+    {
+      title: '评审专家',
+      dataIndex: 'expertName',
+      key: 'expertName',
+    },
+    {
+      title: '评审打分',
+      dataIndex: 'gradesAverage',
+      key: 'gradesAverage',
+      render: (text, record, index) => {
+        return text|| '--'
+      }
+    },
+    {
+      title: '评审意见',
+      dataIndex: 'comments',
+      key: 'comments',
+      render: (text, record, index) => {
+        return text|| '--'
+      }
+    },
+    {
+      title: '评审时间',
+      dataIndex: 'reviewedOn',
+      key: 'reviewedOn',
+      render: (text, record, index) => {
+        return text|| '--'
+      }
+    },
+  ];
+
+  // 评分列
+  const gradesColumns = [{
+    title: '评分一',
+    dataIndex: 'gradesOne',
+    key: 'gradesOne',
+    render: (text, record, index) => {
+      return text|| '--'
+    }
+  },
+  {
+    title: '评分二',
+    dataIndex: 'gradesTwo',
+    key: 'gradesTwo',
+    render: (text, record, index) => {
+      return text|| '--'
+    }
+  },
+  {
+    title: '评分三',
+    dataIndex: 'gradesThree',
+    key: 'gradesThree',
+    render: (text, record, index) => {
+      return text|| '--'
+    }
+  },
+  {
+    title: '评分四',
+    dataIndex: 'gradesFour',
+    key: 'gradesFour',
+    render: (text, record, index) => {
+      return text|| '--'
+    }
+  },
+  {
+    title: '评分五',
+    dataIndex: 'gradesFive',
+    key: 'gradesFive',
+    render: (text, record, index) => {
+      return text|| '--'
+    }
+  }];
+
+  let gradesNum = rules.criterias && rules.criterias.length || 5;
+
+  if (gradesNum) {
+    let thisGradesColumns = gradesColumns.slice(0, gradesNum);
+    columns.splice(3, 0, ...thisGradesColumns);
+  }
+
+  // 获取评分列表
+  useEffect(() => {
+    setLoading(true);
+    let params = {
+      opsId,
+      opsType,
+      orderBy: '',
+    };
+    opsId && getOpsScoringDetails(params).then(res => {
+      if (res.data && res.data.length) {
+        setDataList(res.data);
+        setLoading(false);
+      }
+    });
+  }, [opsId, opsType]);
+
+
+  return (
+    <Modal
+      title="评审明细"
+      visible={visible}
+      onCancel={() => { setVisible(false) }}
+      footer={null}
+      draggable={true}
+      width="90%"
+    >
+      <Paginationtable
+        loading={loading}
+        dataSource={dataList}
+        columns={columns}
+        pagination={false}
+      />
+    </Modal>
+  )
+}
+export default GradesModal;

src/military/expert/reviewResult/gradesModal/index.scss

@@ -0,0 +1,86 @@
+.register_right.task_detail {
+  background: #fff;
+  padding-bottom: 1rem;
+
+  .ant-tabs {
+    background: #f5f5f5;
+    .ant-tabs-content {
+      background: #fff;
+    }
+    .ant-tabs-bar {
+      background: #fff;
+      margin-bottom: 1.25rem;
+    }
+
+    .ant-tabs-tab {
+      margin: 0;
+      padding: 19px 32px;
+      font-size: 1rem;
+      &:hover {
+        color: #4154f1;
+      }
+    }
+
+    .ant-tabs-ink-bar {
+      background-color: #4154f1;
+    }
+  }
+
+  .ant-tabs-nav .ant-tabs-tab-active {
+    color: #4154f1;
+  }
+
+  .task-head {
+    position: relative;
+    border-bottom: 1px solid #eeeeee;
+    padding: 0.5em 2em;
+    color: #181818;
+    background: #fff;
+    font-size: 0.8em;
+    font-weight: bold;
+    .back-button{
+      position: absolute;
+      z-index: 1;
+      right: 1rem;
+      bottom: -52px;
+    }
+  }
+
+
+
+  .button-div {
+    line-height: 1.5;
+  }
+  .pagination-table {
+    margin: .75rem  1.75rem 1.25rem;
+  }
+
+  .task-rules {
+    background: #f5f5f5;
+    .rules-box{
+      margin-bottom: 1.25rem;
+      background: #fff;
+    }
+    .rules-head {
+      font-size: 16px;
+      color: rgba(51, 51, 51, 1);
+      border-bottom: 1px solid #eeeeee;
+      padding: 10px 20px;
+    }
+    .rules-content{
+      padding: 10px 20px 30px;
+    }
+    .rules-content-last{
+      padding: 10px 20px;
+    }
+    .rules-content-item{
+      line-height: 2rem;
+    }
+  }
+
+  .warning{
+    color: #DE0000;
+    font-size: .7rem;
+    margin: .75rem 1.75rem;
+  }
+}

src/military/expert/reviewResult/index.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import Link from "react-router-dom/Link";
 import PaginationTable from "src/military/components/paginationTable";
+import GradesModal from "./gradesModal";
 import { getScoringDetails, getWinnersAndPublicists, selectWinnersAndPublicists } from "../api";
 import { Checkbox, Input, message, Modal } from "antd";
 import './index.scss';
@@ -15,6 +16,11 @@ function ReviewResult({ location, history }) {
   const [errorMessage,setErrorMessage] = useState("若未填写此排名，则公示所有名次");
   const [result, setResult] = useState(undefined);
 
+  // 模态框
+  const [opsId, setOpsId] = useState();
+  const [opsType, setOpsType] = useState();
+  const [visible, setVisible] = useState(false);
+
   const columns = [
     {
       title: '综合排名',
@@ -34,7 +40,7 @@ function ReviewResult({ location, history }) {
       title: '评审细节',
       ket: 'detali',
       render: (text, record) => {
-        return <a className="lookDetail">查看明细</a>
+        return <a className="lookDetail" onClick={()=>{detail(record)}}>查看明细</a>
       }
     },
     {
@@ -76,6 +82,12 @@ function ReviewResult({ location, history }) {
     })
   },[])
 
+  function detail(item){
+    setOpsId(item.opsId);
+    setOpsType(item.opsType);
+    setVisible(true);
+    console.log(item);
+  }
 
   function changeIsWin(id, checked){
     const ids = new Set(winIds);
@@ -156,6 +168,13 @@ function ReviewResult({ location, history }) {
           </div>
           <p className="mt5">{errorMessage}</p>
       </Modal>
+
+      <GradesModal
+        visible={visible}
+        setVisible={setVisible}
+        opsId={opsId}
+        opsType={opsType}
+      />
     </div>
   )
 }