el-tree业务

 <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

const formState = reactive<WafData>({
  node_ids: [],
})
1
2
3

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) //pushData是树形节点的data
  } else {
    tree.value.setCheckedKeys([])
  }
  isIndeterminate.value = false
}
const handleChange = () => {
  formState.node_ids = tree.value.getCheckedKeys(true)
  //   .concat(tree.value.getHalfCheckedKeys(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
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

//获取所有子节点数据
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
}
1
2
3
4
5
6
7
8
9
10

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 }
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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: '请输入匹配规则'
    })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// 获取区域列表
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(() => {})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20