<el-form-item label="选择节点" prop="node_ids">
<el-checkbox
v-if="regionList.length"
v-model="selectAll"
:disabled="selectDisabled"
:indeterminate="isIndeterminate"
:show-checkbox="!selectDisabled"
label="全选"
@change="selectAllChange"
/>
<el-tree
v-if="regionList.length"
ref="tree"
class="w-full"
:data="regionList"
node-key="id"
show-checkbox
default-expand-all
:default-checked-keys="formState.node_ids"
:props="defaultProps"
@check-change="handleChange"
/>
<span v-else class="text-[#2D2E33]">暂无数据</span>
</el-form-item>
const formState = reactive<WafData>({
node_ids: [],
})
const selectAllChange = () => {
if (selectAll.value) {
const levelTwoNodes = regionList.value.flatMap((node: any) =>
node.nodes ? node.nodes.map((child: any) => child.id) : []
)
tree.value.setCheckedKeys(levelTwoNodes)
} else {
tree.value.setCheckedKeys([])
}
isIndeterminate.value = false
}
const handleChange = () => {
formState.node_ids = tree.value.getCheckedKeys(true)
if (regionKeysLength.value === formState?.node_ids?.length) {
selectAll.value = true
} else {
selectAll.value = false
}
const length = formState?.node_ids?.length as number
isIndeterminate.value =
length > 0 && length < getAllChildren(regionList.value).length
}
const getAllChildren = (nodeArr: any = [], arr: any = []) => {
for (const item of nodeArr) {
if (!item.nodes && item.id) arr.push(item.id)
if (item.nodes && item.nodes.length) {
getAllChildren(item.nodes, arr)
}
}
return arr
}
watch(
() => regionList.value,
val => {
regionKeysLength.value = getAllChildren(val).length
if (regionKeysLength.value === formState?.node_ids?.length) {
selectAll.value = true
} else {
selectAll.value = false
}
const length = formState?.node_ids?.length as number
isIndeterminate.value =
length > 0 && length < getAllChildren(regionList.value).length
},
{ deep: true }
)
const handleConfirm = async () => {
await Promise.all([formEl.value?.validate(), matchingView.value.validate()])
const { id } = activeSite.value
const expression = matchingView.value?.generateTemplate() as string
const data = {
site_id: id,
rule_id: formState?.rule_id,
name: formState?.name,
operation: formState?.operation,
expression,
expression_template: JSON.stringify(ruleGroups.value),
node_ids: tree.value.getCheckedKeys(true).join(','),
region_id: undefined,
priority: formState.priority
}
if (data.expression) {
handleEditorUser(data)
} else {
ElNotification.error({
title: '失败',
message: '请输入匹配规则'
})
}
}
const getRegion = () => {
get_region_nodes({})
.then(res => {
let list = res.list
list = JSON.parse(
JSON.stringify(list)
.replaceAll('region_id', 'id')
.replaceAll('region_name', 'name')
)
regionList.value = list
if (JSON.stringify(regionList.value).indexOf('nodes') === -1) {
selectDisabled.value = true
} else {
selectDisabled.value = false
}
regionKeysLength.value = getAllChildren(regionList.value).length
})
.finally(() => {})
}