树形多选

 

<script setup lang="ts">
import { useVModel } from '@vueuse/core';

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => { },
  },
});
/*
AI视觉应用
*/
const emit = defineEmits(['update:modelValue']);
const form = useVModel(props, 'modelValue', emit);
const lastDataHandleai = ref(null); // 上次选择的dataHandle值
if (form.value) {
  form.value.aiApplyChecked = form.value.isAi === 1;
  if (form.value.dataSources) {
    form.value.dataSourcearr = [form.value.dataSources];
    setLastDataHandle1('dataSourcearr');
  }
  if (form.value.outType) {
    form.value.resultOut = [form.value.outType];
    setLastDataHandle1('resultOut');
  }

  _getAlgorithmSceneTree();
}
const isOpen3 = ref<boolean>(true);

const dataSourceList = ref([
  { label: '照片', value: 1 },
  { label: '视频', value: 2 },
]);
const resultOutList = ref([
  { label: '同步', value: 1 },
  { label: '异步', value: 2 },
]);

// 节点数列表
const checkContentList: any = ref([
]);

function openClose() {
  isOpen3.value = !isOpen3.value;
}

// 获取节点树
function _getAlgorithmSceneTree() {
  getAlgorithmSceneTree().then((res) => {
    if (res.success) {
      const d = res.data ? res.data : [];
      let d2 = [];
      if (d && d.length) {
        d2 = d.map((item) => {
          if (item.sceneList && item.sceneList.length) {
            item.sceneList.forEach((element) => {
              element.label = element.name;
              element.value = element.id;
            });
          }
          return {
            checkedAll: false, // 全选
            indeterminate: false, // 半勾选
            checkedList: [], // 选中的
            children: item.sceneList,
            ...item,
          };
        });
        checkContentList.value = d2;
      }
    }
    // 编辑回显检测内容
    if (form.value.detection) {
      checkEdit(form.value.detection);
    }
  });
}
function getisAi1(v: any) {
  form.value.isAi = v ? 1 : 0;
  // 没有勾选 检查内容都置空
  if (!v) {
    form.value.dataSources = '';
    form.value.outType = '';
    form.value.detection = '';
  }
}
// 编辑回显检测内容
function checkEdit(val: any) {
  const detectionarr = val.split(',');
  if (checkContentList.value && checkContentList.value.length) {
    checkContentList.value.forEach((item: any) => {
      if (item.children && item.children.length) {
        item.indeterminate = false;
        item.checkedAll = false;
        item.checkedList = [];
        item.children.forEach((itemchild: any) => {
          detectionarr.forEach((deteitem: any) => {
            if (+deteitem === itemchild.id) {
              item.checkedList.push(+deteitem);
            }
          });
        });
      }
      // 全选半选回显
      if (item.checkedList.length) {
        item.indeterminate = true;
        item.checkedAll = false;
        if (item.children.length === item.checkedList.length) {
          item.checkedAll = true;
          item.indeterminate = false;
        }
      }
    });
  }
}
// 监听变化
watch(() => form.value, (val) => {
  // console.log('1', val)
  if (val) {
    form.value.aiApplyChecked = val.isAi === 1;
    if (val.dataSources) {
      form.value.dataSourcearr = [val.dataSources];
      setLastDataHandle1('dataSourcearr');
    }
    if (val.outType) {
      form.value.resultOut = [val.outType];
      setLastDataHandle1('resultOut');
    }
    // 编辑回显检测内容
    if (val.detection) {
      checkEdit(val.detection);
    }
    else {
      // 切换清空
      checkContentList.value.forEach((item: any) => {
        if (item.children && item.children.length) {
          item.indeterminate = false;
          item.checkedAll = false;
          item.checkedList = [];
        }
        // 全选半选回显
        if (item.checkedList.length) {
          item.indeterminate = true;
          item.checkedAll = false;
          if (item.children.length === item.checkedList.length) {
            item.checkedAll = true;
            item.indeterminate = false;
          }
        }
      });
    }
  }
}, {
  immediate: true,
});
// 检测内容勾选所有
function checkedAll(e: any, index: any) {
  checkContentList.value[index].checkedList = e.target.checked ? checkContentList.value[index].children.map(v => v.value) : [];
  checkContentList.value[index].indeterminate = false;
  handleAiApply();
}

// 检测内容勾选单个
function checkedOne(val: any, index: any) {
  const checkedCount = val.length;
  checkContentList.value[index].checkedAll = checkedCount === checkContentList.value[index].children.length;
  checkContentList.value[index].indeterminate = checkedCount > 0 && checkedCount < checkContentList.value[index].children.length;
  handleAiApply();
}
function setLastDataHandle1(field: any) {
  lastDataHandleai.value = form.value[field].length > 0 ? form.value[field][0] : null;
}

// 处理AI应用
function handleAiApply() {
  form.value.detection = checkContentList.value.flatMap((o: any) => o.checkedList).join(',');
}
// 数据来源
function handleAiApply1(checkedValue: any) {
  form.value.dataSourcearr = checkedValue.filter((item: any) => lastDataHandleai.value !== item);
  setLastDataHandle1('dataSourcearr');
  if (form.value.dataSourcearr && form.value.dataSourcearr.length) {
    form.value.dataSources = form.value.dataSourcearr[0];
  }
  else {
    form.value.dataSources = '';
  }
}
// 结果输出
function handleAiApply2(checkedValue: any) {
  form.value.resultOut = checkedValue.filter((item: any) => lastDataHandleai.value !== item);
  setLastDataHandle1('resultOut');
  if (form.value.resultOut && form.value.resultOut.length) {
    form.value.outType = form.value.resultOut[0];
  }
  else {
    form.value.outType = '';
  }
}
</script>

<template>
  <!-- AI视觉识别应用 全局和单点都需要 -->
  <!-- 全局 -->
  <div class="mt-3" :class="isOpen3 ? 'border_box_6' : 'border_box_6_title'" style="z-index: 1;">
    <div class="h-12 px-4 flex items-center justify-between">
      <div class="flex items-center">
        <PubSvgIcon name="ai-icon" size="2.4rem" />

        <span class="text-white text-lg font-medium ml-2">AI视觉识别应用信息</span>
      </div>
      <div class="flex items-center">
        <a-switch v-model:checked="form.aiApplyChecked" @change="getisAi1" />
        <PubSvgIcon
          class="toggle-icon cursor-pointer ml-2" :class="isOpen3 ? '' : 'close'" name="doubleleft" :size="16"
          @click="openClose()"
        />
      </div>
    </div>
    <div v-show="isOpen3" class="p-4">
      <a-form v-if="form.aiApplyChecked" :colon="false" label-align="left" :label-col="{ style: { width: '7rem' } }">
        <a-form-item label="数据来源">
          <a-checkbox-group v-model:value="form.dataSourcearr" :options="dataSourceList" @change="handleAiApply1" />
        </a-form-item>
        <a-form-item>
          <template #label>
            <div class="flex items-center">
              <span class="mr-1">结果输出</span>
              <PubSvgIcon name="notice-icon" size="1.2rem" />
            </div>
          </template>
          <a-checkbox-group v-model:value="form.resultOut" :options="resultOutList" @change="handleAiApply2" />
        </a-form-item>
        <a-form-item label="检测内容">
          <div v-for="(item, index) in checkContentList" :key="index" class="w-full">
            <div class="flex items-center" style="min-height: 32px;">
              <!-- 父级 -->
              <a-checkbox
                v-model:checked="item.checkedAll" :indeterminate="item.indeterminate"
                @change="checkedAll($event, index)"
              >
                {{ item.name }}
              </a-checkbox>
            </div>
            <div class="pl-4 py-1 -ml-4 mb-3 bg-white/10 flex items-center" style="min-height: 32px;" v-if="item.children?.length">
              <a-checkbox-group
                v-model:value="item.checkedList" :options="item.children"
                @change="checkedOne($event, index)" 
              />
            </div>
          </div>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<style lang="less" scoped>
// 展开收起
:deep(.toggle-icon) {
  transition: all 0.3s ease;
  transform: rotate(90deg);

  &.close {
    transform: rotate(-90deg);
  }
}
</style>