Merge branch 'master' into master

src/pages/Result/Result.jsx

@@ -1,4 +1,46 @@
+import { Routes, Route, Link } from 'react-router-dom'
 import styles from './Result.module.css'
+import { Backdrop } from "../../UI/Backdrop/Backdrop";
+import { useSelector } from 'react-redux';
+import Header from './component/Header/header'
+import List from './component/list/list'
+import Foot from './component/foot/foot';
+import PersonalInfo from '../Result/component/list/detail/detail'
 export const Result = () => {
-    return <div className={styles.box}>我是面试结果</div>
+ const isEnterBackdrop=useSelector(state=>state.list.isEnterBackdrop)
+    return (
+        <div className={styles.box}>
+            <div>
+                <Header />
+                <div className={styles.table} align="center">
+                    <table className={styles.firstTable}>
+                        <caption>面试学员信息</caption>
+                        <tr>
+                            <td>姓名</td>
+                            <td>学号</td>
+                            <td>面试官</td>
+                            <td>结果</td>
+                            <td>详情信息</td>
+                        </tr>
+                        <List />
+                    </table>
+                </div>
+                <Foot />
+
+                {
+                    isEnterBackdrop &&
+                    <div>
+                        <Backdrop>
+                            <Routes>
+                                <Route path='personalInfo/:id' element={<PersonalInfo />} >
+                                </Route>
+                            </Routes>
+                        </Backdrop>
+                    </div>
+                }
+
+
+            </div>
+        </div>
+    )
 }

src/pages/Result/Result.module.css

@@ -2,4 +2,17 @@
     width: 100%;
     height: 100%;
     background-color: pink;
+    overflow: scroll;
+}
+.box::-webkit-scrollbar {
+    display: none
+}
+
+
+table { border-collapse: collapse;}
+table,table tr th, table tr td { border:1px solid #000000; }
+.firstTable{
+    width: 50vw;
+    height: 30vh;
+    text-align: center;
 }

src/pages/Result/component/Header/header.jsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import styles from './header.module.css'
+import { useRef } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+import { setList } from '../../../../store/ResultSlice'
+export default function Header() {
+    const isAdmin = useSelector(state => state.list.isAdmin)
+    // const list = useSelector(state => state.list.list)
+    // 原来的数组别动
+    const BackUp = useSelector(state => state.list.BackUp)
+    const dispatch = useDispatch()
+    const nameSearch = useRef()
+    const nameChange = () => {
+        const newList = BackUp.filter((itemObj) => {
+            if (itemObj.name.includes(nameSearch.current.value)) {
+                return itemObj
+            }
+        })
+        dispatch(setList(newList))
+    }
+    const interviewerSearch = useRef()
+    const interviewerChange = () => {
+        const newList = BackUp.filter((itemObj) => {
+            return itemObj.interviewer.includes(interviewerSearch.current.value)
+        })
+        dispatch(setList(newList))
+    }
+    const idSearch = useRef()
+    const idChange = () => {
+        const newList = BackUp.filter((itemObj) => {
+            return itemObj.cardId.includes(idSearch.current.value)
+        })
+        dispatch(setList(newList))
+    }
+    return (
+        <div>
+            {
+                isAdmin &&
+                <div className={styles.adminHeader}>
+                    {/*模糊搜索列表内的内容 */}
+                    <div>
+                        <label>姓名</label>
+                        <input type="text" placeholder='通过姓名查找学生' ref={nameSearch} onChange={nameChange} />
+                    </div>
+                    <div>
+                        <label>面试官</label>
+                        <input type="text" placeholder='通过面试官查找学生' ref={interviewerSearch} onChange={interviewerChange} />
+                    </div>
+                    <div>
+                        <label>学号</label>
+                        <input type="text" placeholder='通过学号查找学生' ref={idSearch} onChange={idChange} />
+                    </div>
+                </div>
+            }
+            {
+                !isAdmin && <>
+                    <h3 className={styles.userHeader}>我面试的学员</h3>
+                </>
+            }
+        </div>
+    )
+}

src/pages/Result/component/Header/header.module.css

@@ -0,0 +1,8 @@
+.adminHeader{
+    display: flex;
+    justify-content: center;
+
+}
+.userHeader{
+    text-align: center
+}

src/pages/Result/component/foot/foot.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import styles from './foot.module.css'
+import { Button, } from 'antd';
+import { useDispatch, useSelector } from 'react-redux'
+import { handlePassView } from '../../../../store/ResultSlice'
+import { useSubmitAdminListMutation } from '../../../../store/ResultApi';
+export default function Foot() {
+    const list = useSelector(state => state.list.list)
+    const isAdmin = useSelector(state => state.list.isAdmin)
+    const dispatch = useDispatch()
+    const passView = () => {
+        // 可以拿到list了,不过变成了一个对象
+        const newList = list.filter(itemObj => {
+            return itemObj.result === 'true'
+        })
+        dispatch(handlePassView(newList))
+    }
+    // useMutation返回的是数组
+    const [handlePassSubmit, outcom] = useSubmitAdminListMutation()
+    const passSubmit = () => {
+        // console.log(list) 
+        handlePassSubmit(list)
+    }
+    return (
+        <div >
+            <div className={styles.leftButton}>
+                <Button onClick={passView}>仅显示通过列表</Button>
+                {/* 点击了之后，只显示value为真的item，过滤生成新数组 */}
+            </div>
+            {
+                isAdmin && <div className={styles.rightButton}>
+                    <Button onClick={passSubmit}>确认最终名单并提交</Button>
+                </div>
+            }
+            {
+
+                !isAdmin && <div className={styles.rightButton}>
+                    <Button onClick={passSubmit}>确认名单并提交</Button>
+                </div>
+
+            }
+        </div>
+    )
+}

src/pages/Result/component/foot/foot.module.css

@@ -0,0 +1,14 @@
+.leftButton{
+    height: 30px;
+    position: fixed;
+    bottom: 50px;
+    left: 230px;
+    background-color: antiquewhite;
+}
+.rightButton{
+    height: 30px;
+    position: fixed;
+    bottom: 50px;
+    right: 30px;
+    background-color: antiquewhite;
+}

src/pages/Result/component/list/detail/detail.jsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import styles from './detail.module.css'
+// import { useGetPersonalInfoQuery } from '../../../../store/ResultApi';
+import { useDispatch, useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom'
+import { Button } from 'antd';
+import { useParams } from 'react-router-dom';
+import { hiddenBackdrop } from '../../../../../store/ResultSlice'
+export default function PersonalInfo() {
+  // 传入指定id的人的信息
+  // const result=useGetPersonalInfoQuery(null,{
+  // selectFromResult:result=>{
+  //   if(){
+  // result.data=result.data.filter(itemObj=>
+  //   itemObj.attributes.id===
+  //   )
+  //   }
+  // }
+  // })
+  //点击隐藏遮罩层
+  const dispatch = useDispatch()
+  const navigate = useNavigate();
+  const goBack = () => {
+    navigate('/result',{replace:true});
+    dispatch(hiddenBackdrop())
+  }
+
+  const { id } = useParams()
+  const list = useSelector(state => state.list.list)
+  const personalInfo = list.find(itemObj => itemObj.id === id)
+  return (
+    <div className={styles.box} align="center">
+      {
+       <>
+        <div className={styles.title}> <h3 >{personalInfo.name}的详细信息</h3></div>
+        <table className={styles.secondTable}>
+          <tbody>
+            <tr>
+              <td>姓名：{personalInfo.name}</td>
+              <td rowSpan="3"><img src="https://chibaoshaitaiyang-1316184616.cos.ap-beijing.myqcloud.com/R-C.jpg" alt="" /></td>
+            </tr>
+            <tr>
+              <td>专业：{personalInfo.subject}</td>
+              <td></td>
+            </tr>
+            <tr>
+              <td>学号：{personalInfo.cardId}</td>
+              <td></td>
+            </tr>
+            <tr>
+              <td colSpan="2">面试官：{personalInfo.interviewer}</td>
+              <td></td>
+            </tr>
+            <tr >
+              <td rowSpan="3" colSpan="2"><label style={{ verticalAlign: "middle" }} htmlFor="textarea">面试记录：</label><textarea style={{ verticalAlign: "middle" }} id="textarea"></textarea></td>
+              <td rowSpan="3"></td>
+            </tr>
+            <tr>
+              <td></td>
+            </tr>
+            <tr>
+              <td></td>
+            </tr>
+            <tr>
+              <td colSpan="2">面评:{personalInfo.review}</td>
+              <td></td>
+            </tr>
+            <tr>
+              <td colSpan="2">最终分数：{personalInfo.count}</td>
+              <td></td>
+            </tr>
+          </tbody>
+        </table></>
+      }
+      <Button onClick={goBack} className={styles.goBack}>返回</Button>
+    </div>
+  )
+}

src/pages/Result/component/list/detail/detail.module.css

@@ -0,0 +1,35 @@
+.box{
+    background-color: bisque;
+    width: 45vw;
+    height: 45vw;
+    position: absolute;
+    top: 50%;
+    left: 55%;
+    transform: translate(-50%, -50%);
+}
+.title{
+    width: 14vw;
+    height: 12vh;
+    /* background-color: aqua; */
+    line-height: 12vh;
+}
+img{
+    width: 6vw;
+    height: 15vh;
+}
+.secondTable{
+    width: 40vw;
+    height: 62vh;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+.goBack{
+    position: relative;
+    top: 65vh;
+}
+textarea{
+    width: 30vw;
+    height: 30vh;
+}