You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
4.0 KiB
123 lines
4.0 KiB
import React, { useState, useEffect } from "react";
|
|
import {
|
|
Modal,
|
|
CheckboxGroup,
|
|
Checkbox,
|
|
} from "@douyinfe/semi-ui";
|
|
|
|
function Setup (props) {
|
|
const {
|
|
close,
|
|
tableType,
|
|
tableList,
|
|
length
|
|
} = props;
|
|
const [check, setCheck] = useState([]);
|
|
|
|
const checkboxcss = { width: "25%", height: 16, margin: "0 0 20px 0" };
|
|
|
|
useEffect(() => {
|
|
//获取是否勾选信息
|
|
const checkItem = localStorage.getItem(tableType);
|
|
setCheck(checkItem ? JSON.parse(checkItem) : [])
|
|
ischeck();
|
|
}, []);
|
|
function ischeck (value) {
|
|
if (check.length >= length) {
|
|
if (check.includes(value)) {
|
|
return false;
|
|
} else {
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Modal
|
|
title={
|
|
<div>
|
|
表格属性设置
|
|
<span
|
|
style={{
|
|
width: 50,
|
|
lineHeight: "19px",
|
|
display: "inline-block",
|
|
|
|
color: "white",
|
|
textAlign: "center",
|
|
marginLeft: 6,
|
|
background:
|
|
check.length == length
|
|
? "rgba(40, 123, 255, 1)"
|
|
: "rgba(176, 176, 176, 1)",
|
|
}}
|
|
>
|
|
{check.length}/{length}
|
|
</span>
|
|
</div>
|
|
}
|
|
visible={true}
|
|
style={{ width: 600 }}
|
|
onOk={() => {
|
|
localStorage.setItem(tableType, JSON.stringify(check));
|
|
close();
|
|
}}
|
|
onCancel={() => {
|
|
close();
|
|
}}
|
|
>
|
|
<CheckboxGroup
|
|
style={{ width: "100%", fontSize: 14 }}
|
|
key="primary1"
|
|
direction="horizontal"
|
|
defaultValue={check}
|
|
aria-label="表格属性设置"
|
|
onChange={(check) => {
|
|
setCheck(check);
|
|
ischeck();
|
|
}}
|
|
>
|
|
{tableList.map((item, index) => {
|
|
return (
|
|
<div
|
|
key={index}
|
|
style={{
|
|
width: 550,
|
|
border: "1px solid #EAEAEA",
|
|
padding: "0px 5px",
|
|
borderRadius: 4,
|
|
marginBottom: "20px",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
borderBottom: "1px solid #EAEAEA",
|
|
marginLeft: "10px",
|
|
padding: "8px 0px",
|
|
}}
|
|
>
|
|
{item.title}
|
|
</div>
|
|
<div style={{ padding: "15px 12px", width: 530 }}>
|
|
{item.list?.map((itm) => {
|
|
return (
|
|
<Checkbox
|
|
key={itm.value}
|
|
value={itm.value}
|
|
style={checkboxcss}
|
|
disabled={ischeck(itm.value)}
|
|
>
|
|
{itm.name}
|
|
</Checkbox>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</CheckboxGroup>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
export default Setup;
|
|
|