feat: 联调

src/components/question-list/index.jsx

@@ -1,33 +1,40 @@
-import React, { Fragment, useState } from "react";
-import { Tag, Table, Input, Radio, Space, Button, Divider } from "antd";
-import { filterDifficulty, gradeObject } from "@constants";
-import { useNavigate } from "react-router-dom";
-import "./index.less";
+import { filterDifficulty, gradeObject } from '@constants'
+import { Button, Input, Radio, Space, Table, Tag } from 'antd'
+import React, { Fragment, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import './index.less'
 
-const { Search } = Input;
+const { Search } = Input
 
-const colors = ['#ffffb8', '#f4ffb8', '#b5f5ec', '#bae0ff', '#d9f7be', '#efdbff', ' #ffd6e7', '#d6e4ff']
-
-
-const QuestionList = (props) => {
+const colors = [
+  '#ffffb8',
+  '#f4ffb8',
+  '#b5f5ec',
+  '#bae0ff',
+  '#d9f7be',
+  '#efdbff',
+  ' #ffd6e7',
+  '#d6e4ff'
+]
 
+const QuestionList = props => {
   const [difficuty, setDifficuty] = useState(0)
-  const navigate = useNavigate();
+  const navigate = useNavigate()
 
   const RandomNumBoth = (Min, Max) => {
     //差值
-    const Range = Max - Min;
+    const Range = Max - Min
     // 随机数
-    const Rand = Math.random();
-    return Min + Math.round(Rand * Range); //四舍五入 
+    const Rand = Math.random()
+    return Min + Math.round(Rand * Range) //四舍五入
   }
 
-  const handleSearch = (close) => {
+  const handleSearch = close => {
     props.changeDifficuty(difficuty)
     close()
   }
 
-  const changeDifficuty = (e) => {
+  const changeDifficuty = e => {
     setDifficuty(e.target.value)
   }
 
@@ -36,69 +43,88 @@ const QuestionList = (props) => {
    */
   const questionColumns = [
     {
-      title: <div style={{ display: 'flex' }}>题目 <div className="question-count-box" style={{ marginLeft: '10px', color: 'rgba(0, 0, 0, 0.5)' }}>
-        （当前
-        <span style={{ color: "rgba(0, 0, 0, 0.65)" }}> {props.total || 0} </span>
-        道题）
-      </div></div>,
-      key: "questionNo",
-      align: "centlefter",
+      title: (
+        <div style={{ display: 'flex' }}>
+          题目{' '}
+          <div
+            className='question-count-box'
+            style={{ marginLeft: '10px', color: 'rgba(0, 0, 0, 0.5)' }}
+          >
+            （当前
+            <span style={{ color: 'rgba(0, 0, 0, 0.65)' }}> {props.total || 0} </span>
+            道题）
+          </div>
+        </div>
+      ),
+      key: 'questionNo',
+      align: 'centlefter',
       render: (item, record) => {
         return (
-          <div className="question-info-container">
-            <div className="question-info-desc">
-              {record.id}: {record.subjectName}
-            </div>
-            <div className="question-info-tags">
+          <div className='question-info-container'>
+            <div className='question-info-desc'>{record.subjectName}</div>
+            <div className='question-info-tags'>
               {item?.labelName?.length > 0 &&
-                item.labelName.map((tagsItem) => {
+                item.labelName.map(tagsItem => {
                   return (
-                    <div className="question-info-tag" key={tagsItem} style={{ backgroundColor: colors[RandomNumBoth(0, 7)] }}>
+                    <div
+                      className='question-info-tag'
+                      key={tagsItem}
+                      style={{ backgroundColor: colors[RandomNumBoth(0, 7)] }}
+                    >
                       {tagsItem}
                     </div>
-                  );
+                  )
                 })}
             </div>
           </div>
-        );
-      },
+        )
+      }
     },
     {
-      title: "难度",
-      dataIndex: "subjectDifficult",
-      key: "subjectDifficult",
-      align: "center",
+      title: '难度',
+      dataIndex: 'subjectDifficult',
+      key: 'subjectDifficult',
+      align: 'center',
       filterDropdown: ({ close }) => (
-        <div style={{ padding: 16 }} onKeyDown={(e) => e.stopPropagation()}>
-          <div style={{ textAlign: 'center', fontSize: '16px', fontWeight: 'bold', marginBottom: 10 }}>请选择</div>
-          <Radio.Group style={{ width: '100%', textAlign: 'center' }} value={difficuty} onChange={changeDifficuty}>
-            <Space direction="vertical">
-              {
-                filterDifficulty.map(item => {
-                  return <Radio value={item.id} key={item.id}>{item.title}</Radio>
-                })
-              }
+        <div style={{ padding: 16 }} onKeyDown={e => e.stopPropagation()}>
+          <div
+            style={{ textAlign: 'center', fontSize: '16px', fontWeight: 'bold', marginBottom: 10 }}
+          >
+            请选择
+          </div>
+          <Radio.Group
+            style={{ width: '100%', textAlign: 'center' }}
+            value={difficuty}
+            onChange={changeDifficuty}
+          >
+            <Space direction='vertical'>
+              {filterDifficulty.map(item => {
+                return (
+                  <Radio value={item.id} key={item.id}>
+                    {item.title}
+                  </Radio>
+                )
+              })}
             </Space>
           </Radio.Group>
 
           <Button
             block
-            size="small"
-            type="primary"
+            size='small'
+            type='primary'
             style={{ marginTop: 12 }}
             onClick={() => handleSearch(close)}
           >
             确定
           </Button>
-        </div>),
+        </div>
+      ),
       width: 90,
-      render: (key) => {
-        return (
-          <Tag color={gradeObject?.[key]?.color}>{gradeObject?.[key]?.title}</Tag>
-        );
-      },
-    },
-  ];
+      render: key => {
+        return <Tag color={gradeObject?.[key]?.color}>{gradeObject?.[key]?.title}</Tag>
+      }
+    }
+  ]
 
   /**
    * 进入详情
@@ -106,61 +132,57 @@ const QuestionList = (props) => {
    * @param {*} type
    * @returns
    */
-  const onChangeAction = (item) => () => {
-    navigate("/brush-question/" + item.id)
+  const onChangeAction = item => () => {
+    navigate('/brush-question/' + item.id)
     // let { isNotToDetail } = props;
-    // !isNotToDetail && 
+    // !isNotToDetail &&
     // if (!isNotToDetail) return;
-  };
-
+  }
 
   /**
    * 过滤框-搜索框-模块
    * @returns
    */
   const renderFilterContainer = () => {
-    const { total, isShowSearch, setSearchStr } = props;
+    const { total, isShowSearch, setSearchStr } = props
     return (
-      <div className="question-filter-container">
+      <div className='question-filter-container'>
         {isShowSearch && (
           <Search
-            placeholder="请输入感兴趣的内容～"
-            onSearch={(value) => setSearchStr(value)}
+            placeholder='请输入感兴趣的内容～'
+            onSearch={value => setSearchStr(value)}
             style={{ width: 240 }}
             allowClear
-            size="small"
+            size='small'
           />
         )}
       </div>
-    );
-  };
+    )
+  }
 
-  const { questionList, isHideSelect } = props;
+  const { questionList, isHideSelect } = props
 
   return (
     <Fragment>
-      <div className="question-list-filter">
+      <div className='question-list-filter'>
         {!isHideSelect && renderFilterContainer()}
-        <div className="question-list-container">
+        <div className='question-list-container'>
           <Table
             onRow={(record, index) => {
               return {
-                onClick: onChangeAction(record, index), // 点击行
-              };
+                onClick: onChangeAction(record, index) // 点击行
+              }
             }}
             columns={questionColumns}
             dataSource={questionList}
-            rowKey="id"
+            rowKey='id'
             pagination={false}
-            rowClassName="question-table-row"
+            rowClassName='question-table-row'
           />
         </div>
       </div>
     </Fragment>
-  );
-
-
+  )
 }
 
-
-export default QuestionList;
+export default QuestionList