cxt
5 years ago
commit
b571e805ca
|
After Width: | Height: | Size: 770 B |
|
After Width: | Height: | Size: 785 B |
@ -0,0 +1,127 @@
|
|||||||
|
/*
|
||||||
|
* @Description: 知识点
|
||||||
|
* @Author: tangjiang
|
||||||
|
* @Github:
|
||||||
|
* @Date: 2019-12-30 13:51:19
|
||||||
|
* @LastEditors : tangjiang
|
||||||
|
* @LastEditTime : 2020-01-03 09:32:24
|
||||||
|
*/
|
||||||
|
import './index.scss';
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Select, notification } from 'antd';
|
||||||
|
|
||||||
|
const { Option } = Select;
|
||||||
|
|
||||||
|
function KnowLedge (props) {
|
||||||
|
|
||||||
|
const {
|
||||||
|
options = [], // 下拉选项
|
||||||
|
values = [], // 已选择的下拉项
|
||||||
|
onChange // 获取选择的值
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const _options = [];
|
||||||
|
const _selects = [];
|
||||||
|
options.forEach(opt => {
|
||||||
|
if (!values.includes(opt.id)) {
|
||||||
|
_options.push(opt);
|
||||||
|
} else {
|
||||||
|
_selects.push(opt);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
setSelectOptions(_options || []);
|
||||||
|
setSelectValue(_selects || []);
|
||||||
|
}, [props]);
|
||||||
|
|
||||||
|
// 显示的下拉项
|
||||||
|
const [selectOptions, setSelectOptions] = useState(options);
|
||||||
|
// 已选择的下拉项
|
||||||
|
const [selectValue, setSelectValue] = useState([]);
|
||||||
|
//
|
||||||
|
const [value] = useState([]);
|
||||||
|
|
||||||
|
// 渲染下拉选项
|
||||||
|
const renderOptions = (options = []) => {
|
||||||
|
return options.map((opt, i) => (
|
||||||
|
<Option key={`opt_${i}`} value={`${opt.id}`}>{opt.name}</Option>
|
||||||
|
));
|
||||||
|
}
|
||||||
|
// 过滤下拉列表项
|
||||||
|
const handleSelectChange = (value) => {
|
||||||
|
value = +value.join('');
|
||||||
|
const tempArr = [...selectValue];
|
||||||
|
const _result = selectOptions.filter(item => {
|
||||||
|
if (item.id === value && tempArr.findIndex(t => t.id === value) === -1) {
|
||||||
|
tempArr.push(item);
|
||||||
|
}
|
||||||
|
return item.id !== value;
|
||||||
|
});
|
||||||
|
if (tempArr.length > 50) {
|
||||||
|
notification.warning({
|
||||||
|
message: '提示',
|
||||||
|
description: '知识点不能超过50个'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setSelectValue(tempArr);
|
||||||
|
setSelectOptions(_result);
|
||||||
|
// 将选择值返回
|
||||||
|
onChange && onChange(tempArr);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除
|
||||||
|
const handleRemoveResult = (item) => {
|
||||||
|
// console.log('点击了删除按钮===>>>>', item);
|
||||||
|
// 将删除的值重新加入到列表中
|
||||||
|
const tempOptions = [...selectOptions];
|
||||||
|
const tempValue = selectValue.filter(t => t.id !== item.id);
|
||||||
|
// console.log(selectValue);
|
||||||
|
tempOptions.push(item);
|
||||||
|
setSelectOptions(tempOptions);
|
||||||
|
setSelectValue(tempValue);
|
||||||
|
// 将选择值返回
|
||||||
|
onChange && onChange(tempValue);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 渲染下拉结果
|
||||||
|
const renderResult = (arrs) => {
|
||||||
|
return arrs.map((item) => (
|
||||||
|
<span className="knowledge-item" key={`item_${item.name}`}>
|
||||||
|
{item.name}
|
||||||
|
<span
|
||||||
|
onClick={() => handleRemoveResult(item)}
|
||||||
|
className="iconfont icon-roundclose knowledge-close"
|
||||||
|
></span>
|
||||||
|
</span>
|
||||||
|
));
|
||||||
|
}
|
||||||
|
// 渲染下拉列表
|
||||||
|
const renderSelect = (options = []) => {
|
||||||
|
// console.log('+++++', options);
|
||||||
|
// setSelectValue(_selects);
|
||||||
|
return (
|
||||||
|
<Select
|
||||||
|
value={value}
|
||||||
|
mode="tags"
|
||||||
|
placeholder="请选择"
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
onChange={handleSelectChange}
|
||||||
|
>
|
||||||
|
{renderOptions(options)}
|
||||||
|
</Select>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="knowledge-select-area">
|
||||||
|
{ renderSelect(selectOptions) }
|
||||||
|
{/* 渲染下拉选择项 */}
|
||||||
|
<div className="knowledge-result">
|
||||||
|
{ renderResult(selectValue) }
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default KnowLedge;
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
.knowledge-select-area{
|
||||||
|
.ant-select-selection__rendered{
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
.ant-select-search--inline{
|
||||||
|
margin-left: 5px;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.knowledge-result{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
// margin-top: 15px;
|
||||||
|
|
||||||
|
.knowledge-item{
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid #DDDDDD;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 10px;
|
||||||
|
background: #fff;
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-top: 10px;
|
||||||
|
// margin-bottom: 10px;
|
||||||
|
|
||||||
|
.knowledge-close{
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
right: -10px;
|
||||||
|
top: -10px;
|
||||||
|
background-color: rgba(250,250,250,1);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
.knowledge-close{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
/*
|
||||||
|
* @Description:
|
||||||
|
* @Author: tangjiang
|
||||||
|
* @Github:
|
||||||
|
* @Date: 2020-01-03 10:24:43
|
||||||
|
* @LastEditors : tangjiang
|
||||||
|
* @LastEditTime : 2020-01-03 11:45:22
|
||||||
|
*/
|
||||||
|
import types from './actionTypes';
|
||||||
|
|
||||||
|
export const showOrHideTpiTestCase = (flag) => {
|
||||||
|
return {
|
||||||
|
type: types.SHOW_OR_HIDE_TPI_TEST_CASE,
|
||||||
|
payload: flag
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const isCollpaseTsetCase = (flag) => {
|
||||||
|
return {
|
||||||
|
type: types.IS_COLLAPSE_TEST_CASE,
|
||||||
|
payload: flag
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
/*
|
||||||
|
* @Description:
|
||||||
|
* @Author: tangjiang
|
||||||
|
* @Github:
|
||||||
|
* @Date: 2020-01-03 10:24:31
|
||||||
|
* @LastEditors : tangjiang
|
||||||
|
* @LastEditTime : 2020-01-03 11:44:26
|
||||||
|
*/
|
||||||
|
import types from "../actions/actionTypes";
|
||||||
|
|
||||||
|
const initialState = {
|
||||||
|
showOrHide: false,
|
||||||
|
isCollapse: false, // 是否展开测试集
|
||||||
|
};
|
||||||
|
|
||||||
|
const tpiReducer = (state = initialState, action) => {
|
||||||
|
const { type, payload } = action;
|
||||||
|
switch (type) {
|
||||||
|
case types.SHOW_OR_HIDE_TPI_TEST_CASE:
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
showOrHide: payload
|
||||||
|
}
|
||||||
|
case types.IS_COLLAPSE_TEST_CASE:
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
isCollapse: payload
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
return {
|
||||||
|
...state
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default tpiReducer;
|
||||||
Loading…
Reference in new issue