6 changed files with 716 additions and 536 deletions
@ -1,122 +1,124 @@ |
|||||
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, |
||||
} = props; |
layout, //格式 |
||||
|
} = props; |
||||
|
|
||||
const [check, setCheck] = useState([]); |
const [check, setCheck] = useState([]); |
||||
|
|
||||
const checkboxcss = { width: "25%", height: 16, margin: "0 0 20px 0" }; |
|
||||
|
|
||||
useEffect(() => { |
const checkboxcss = { width: "25%", height: 16, margin: "0 0 20px 0" }; |
||||
//获取是否勾选信息 |
|
||||
const checkItem = localStorage.getItem(tableType); |
useEffect(() => { |
||||
setCheck(checkItem?JSON.parse(checkItem) : []) |
//获取是否勾选信息 |
||||
ischeck(); |
const checkItem = localStorage.getItem(tableType); |
||||
}, []); |
setCheck(checkItem ? JSON.parse(checkItem) : []) |
||||
function ischeck(value) { |
ischeck(); |
||||
if (check.length >= 8) { |
}, []); |
||||
if (check.includes(value)) { |
function ischeck (value) { |
||||
return false; |
if (check.length >= 8) { |
||||
} else { |
if (check.includes(value)) { |
||||
return true; |
return false; |
||||
|
} else { |
||||
|
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 == 8 |
check.length == 8 |
||||
? "rgba(40, 123, 255, 1)" |
? "rgba(40, 123, 255, 1)" |
||||
: "rgba(176, 176, 176, 1)", |
: "rgba(176, 176, 176, 1)", |
||||
}} |
}} |
||||
> |
> |
||||
{check.length}/8 |
{check.length}/8 |
||||
</span> |
</span> |
||||
</div> |
</div> |
||||
} |
} |
||||
visible={true} |
visible={true} |
||||
style={{ width: 600 }} |
style={{ width: 600 }} |
||||
onOk={() => { |
onOk={() => { |
||||
localStorage.setItem(tableType, JSON.stringify(check)); |
localStorage.setItem(tableType, JSON.stringify(check)); |
||||
close(); |
close(); |
||||
}} |
}} |
||||
onCancel={() => { |
onCancel={() => { |
||||
close(); |
close(); |
||||
}} |
}} |
||||
> |
|
||||
<CheckboxGroup |
|
||||
style={{ width: "100%", fontSize: 14 }} |
|
||||
key="primary1" |
|
||||
direction="horizontal" |
|
||||
defaultValue={check} |
|
||||
aria-label="表格属性设置" |
|
||||
onChange={(check) => { |
|
||||
setCheck(check); |
|
||||
ischeck(); |
|
||||
}} |
|
||||
> |
> |
||||
{tableList.map((item,index)=>{ |
<CheckboxGroup |
||||
return( |
style={{ width: "100%", fontSize: 14 }} |
||||
<div |
key="primary1" |
||||
key={index} |
direction="horizontal" |
||||
style={{ |
defaultValue={check} |
||||
width: 550, |
aria-label="表格属性设置" |
||||
border: "1px solid #EAEAEA", |
onChange={(check) => { |
||||
padding: "0px 5px", |
setCheck(check); |
||||
borderRadius: 4, |
ischeck(); |
||||
marginBottom: "20px", |
|
||||
}} |
}} |
||||
> |
> |
||||
<div |
{tableList.map((item, index) => { |
||||
style={{ |
return ( |
||||
borderBottom: "1px solid #EAEAEA", |
<div |
||||
marginLeft: "10px", |
key={index} |
||||
padding: "8px 0px", |
style={{ |
||||
}} |
width: 550, |
||||
> |
border: "1px solid #EAEAEA", |
||||
{item.title} |
padding: "0px 5px", |
||||
</div> |
borderRadius: 4, |
||||
<div style={{ padding: "15px 12px", width: 530 }}> |
marginBottom: "20px", |
||||
{item.list?.map((itm) => { |
}} |
||||
return ( |
> |
||||
<Checkbox |
<div |
||||
key={itm.value} |
style={{ |
||||
value={itm.value} |
borderBottom: "1px solid #EAEAEA", |
||||
style={checkboxcss} |
marginLeft: "10px", |
||||
disabled={ischeck(itm.value)} |
padding: "8px 0px", |
||||
> |
}} |
||||
{itm.name} |
> |
||||
</Checkbox> |
{item.title} |
||||
); |
</div> |
||||
})} |
<div style={{ padding: "15px 12px", width: 530, display: layout == 'long' ? 'flex' : "", flexDirection: layout == 'long' ? 'column' : "" }}> |
||||
</div> |
{item.list?.map((itm) => { |
||||
</div> |
return ( |
||||
)})} |
<Checkbox |
||||
</CheckboxGroup> |
key={itm.value} |
||||
</Modal> |
value={itm.value} |
||||
); |
style={layout == 'long' ? {} : checkboxcss} |
||||
|
disabled={ischeck(itm.value) || ['workbench', 'dynamic', 'handle', 'DeviceAccess','discovery'].includes(itm.value)} |
||||
|
> |
||||
|
{itm.name} |
||||
|
</Checkbox> |
||||
|
); |
||||
|
})} |
||||
|
</div> |
||||
|
</div> |
||||
|
) |
||||
|
})} |
||||
|
</CheckboxGroup> |
||||
|
</Modal> |
||||
|
); |
||||
} |
} |
||||
|
|
||||
export default Setup; |
export default Setup; |
||||
|
|||||
File diff suppressed because it is too large
Loading…
Reference in new issue