6 changed files with 342 additions and 243 deletions
@ -1,125 +1,123 @@ |
|||||
import React, { useState, useEffect } from "react"; |
import React, { useState, useEffect } from "react"; |
||||
import { |
import { |
||||
Modal, |
Modal, |
||||
CheckboxGroup, |
CheckboxGroup, |
||||
Checkbox, |
Checkbox, |
||||
} from "@douyinfe/semi-ui"; |
} from "@douyinfe/semi-ui"; |
||||
|
|
||||
function Setup(props) { |
function Setup (props) { |
||||
const { |
const { |
||||
close, |
close, |
||||
tableType, |
tableType, |
||||
tableList, |
tableList, |
||||
length |
length |
||||
} = props; |
} = props; |
||||
|
const [check, setCheck] = useState([]); |
||||
|
|
||||
console.log(tableType, |
const checkboxcss = { width: "25%", height: 16, margin: "0 0 20px 0" }; |
||||
tableList); |
|
||||
const [check, setCheck] = useState([]); |
|
||||
|
|
||||
const checkboxcss = { width: "25%", height: 16, margin: "0 0 20px 0" }; |
|
||||
|
|
||||
useEffect(() => { |
useEffect(() => { |
||||
//获取是否勾选信息 |
//获取是否勾选信息 |
||||
const checkItem = localStorage.getItem(tableType); |
const checkItem = localStorage.getItem(tableType); |
||||
setCheck(checkItem?JSON.parse(checkItem) : []) |
setCheck(checkItem ? JSON.parse(checkItem) : []) |
||||
ischeck(); |
ischeck(); |
||||
}, []); |
}, []); |
||||
function ischeck(value) { |
function ischeck (value) { |
||||
if (check.length >= length) { |
if (check.length >= length) { |
||||
if (check.includes(value)) { |
if (check.includes(value)) { |
||||
return false; |
return false; |
||||
} else { |
} else { |
||||
return true; |
return true; |
||||
} |
} |
||||
|
} |
||||
} |
} |
||||
} |
|
||||
|
|
||||
return ( |
return ( |
||||
<Modal |
<Modal |
||||
title={ |
title={ |
||||
<div> |
<div> |
||||
表格属性设置 |
表格属性设置 |
||||
<span |
<span |
||||
style={{ |
style={{ |
||||
width: 50, |
width: 50, |
||||
lineHeight: "19px", |
lineHeight: "19px", |
||||
display: "inline-block", |
display: "inline-block", |
||||
|
|
||||
color: "white", |
color: "white", |
||||
textAlign: "center", |
textAlign: "center", |
||||
marginLeft: 6, |
marginLeft: 6, |
||||
background: |
background: |
||||
check.length == length |
check.length == length |
||||
? "rgba(40, 123, 255, 1)" |
? "rgba(40, 123, 255, 1)" |
||||
: "rgba(176, 176, 176, 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={() => { |
||||
{check.length}/length |
close(); |
||||
</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", |
|
||||
}} |
}} |
||||
|
> |
||||
|
<CheckboxGroup |
||||
|
style={{ width: "100%", fontSize: 14 }} |
||||
|
key="primary1" |
||||
|
direction="horizontal" |
||||
|
defaultValue={check} |
||||
|
aria-label="表格属性设置" |
||||
|
onChange={(check) => { |
||||
|
setCheck(check); |
||||
|
ischeck(); |
||||
|
}} |
||||
> |
> |
||||
<div |
{tableList.map((item, index) => { |
||||
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 ( |
return ( |
||||
<Checkbox |
<div |
||||
key={itm.value} |
key={index} |
||||
value={itm.value} |
style={{ |
||||
style={checkboxcss} |
width: 550, |
||||
disabled={ischeck(itm.value)} |
border: "1px solid #EAEAEA", |
||||
|
padding: "0px 5px", |
||||
|
borderRadius: 4, |
||||
|
marginBottom: "20px", |
||||
|
}} |
||||
> |
> |
||||
{itm.name} |
<div |
||||
</Checkbox> |
style={{ |
||||
); |
borderBottom: "1px solid #EAEAEA", |
||||
})} |
marginLeft: "10px", |
||||
</div> |
padding: "8px 0px", |
||||
</div> |
}} |
||||
)})} |
> |
||||
</CheckboxGroup> |
{item.title} |
||||
</Modal> |
</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; |
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