6 changed files with 342 additions and 243 deletions
@ -1,125 +1,123 @@ |
|||
import React, { useState, useEffect } from "react"; |
|||
import { |
|||
Modal, |
|||
CheckboxGroup, |
|||
Checkbox, |
|||
Modal, |
|||
CheckboxGroup, |
|||
Checkbox, |
|||
} from "@douyinfe/semi-ui"; |
|||
|
|||
function Setup(props) { |
|||
const { |
|||
close, |
|||
tableType, |
|||
tableList, |
|||
length |
|||
} = props; |
|||
function Setup (props) { |
|||
const { |
|||
close, |
|||
tableType, |
|||
tableList, |
|||
length |
|||
} = props; |
|||
const [check, setCheck] = useState([]); |
|||
|
|||
console.log(tableType, |
|||
tableList); |
|||
const [check, setCheck] = useState([]); |
|||
|
|||
const checkboxcss = { width: "25%", height: 16, margin: "0 0 20px 0" }; |
|||
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; |
|||
} |
|||
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", |
|||
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)", |
|||
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(); |
|||
}} |
|||
> |
|||
{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", |
|||
onCancel={() => { |
|||
close(); |
|||
}} |
|||
> |
|||
<CheckboxGroup |
|||
style={{ width: "100%", fontSize: 14 }} |
|||
key="primary1" |
|||
direction="horizontal" |
|||
defaultValue={check} |
|||
aria-label="表格属性设置" |
|||
onChange={(check) => { |
|||
setCheck(check); |
|||
ischeck(); |
|||
}} |
|||
> |
|||
<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) => { |
|||
{tableList.map((item, index) => { |
|||
return ( |
|||
<Checkbox |
|||
key={itm.value} |
|||
value={itm.value} |
|||
style={checkboxcss} |
|||
disabled={ischeck(itm.value)} |
|||
<div |
|||
key={index} |
|||
style={{ |
|||
width: 550, |
|||
border: "1px solid #EAEAEA", |
|||
padding: "0px 5px", |
|||
borderRadius: 4, |
|||
marginBottom: "20px", |
|||
}} |
|||
> |
|||
{itm.name} |
|||
</Checkbox> |
|||
); |
|||
})} |
|||
</div> |
|||
</div> |
|||
)})} |
|||
</CheckboxGroup> |
|||
</Modal> |
|||
); |
|||
<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; |
|||
|
|||
@ -0,0 +1,9 @@ |
|||
.semi-table{ |
|||
.semi-table-row:first-child{ |
|||
.semi-table-row-head{ |
|||
background: #F2F3F5; |
|||
color: #4A4A4A; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue