perf(src/packages): 信息控件下新增树形控件

+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
+import { interactActions, ComponentInteractEventEnum } from './interact'
+import { TreeConfig } from './index'
+
+export const option = {
+  // 时间组件展示类型，必须和 interactActions 中定义的数据一致
+  [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
+  // 暴露配置内容给用户
+  dataset: [
+    {
+      id: '1',
+      name: '根组织',
+      children: [
+        {
+          id: '11',
+          name: '第一级'
+        },
+        {
+          id: '12',
+          name: '第二级'
+        },
+        {
+          id: '13',
+          name: '第三级'
+        }
+      ]
+    }
+  ],
+  treeConfig: {
+    accordion: false,
+    checkable: false,
+    defaultExpandAll: false
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = TreeConfig.key
+  public attr = { ...chartInitConfig, w: 300, h: 40, zIndex: -1 }
+  public chartConfig = cloneDeep(TreeConfig)
+  public interactActions = interactActions
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="树配置" :expanded="true">
+    <setting-item-box name="手风琴">
+      <setting-item name="是否开启">
+        <n-switch v-model:value="optionData.treeConfig.accordion" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="选择框">
+      <setting-item name="是否开启">
+        <n-switch v-model:value="optionData.treeConfig.checkable" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="展开">
+      <setting-item name="是否开启">
+        <n-switch v-model:value="optionData.treeConfig.defaultExpandAll" />
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>
+<style lang="scss" scoped></style>

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Informations/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('Tree', true)
+
+export const TreeConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '自定义树形控件',
+  category: ChatCategoryEnum.INPUTS,
+  categoryName: ChatCategoryEnumName.INPUTS,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'button.png'
+}

+<template>
+  <div>
+    <n-tree
+      :accordion="treeConfig.accordion"
+      :checkable="treeConfig.checkable"
+      :default-expand-all="treeConfig.defaultExpandAll"
+      block-line
+      block-node
+      :data="dataset"
+      key-field="id"
+      label-field="name"
+      children-field="children"
+      @update:selected-keys="onClick"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartInteract } from '@/hooks/external/useChartSelectInteract.hook'
+import { InteractEventOn } from '@/enums/eventEnum'
+import { ComponentInteractParamsEnum } from './interact'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { dataset, treeConfig } = toRefs(props.chartConfig.option)
+
+const onClick = (v: string[]) => {
+  useChartInteract(
+    props.chartConfig,
+    useChartEditStore,
+    { [ComponentInteractParamsEnum.DATA]: v[0] },
+    InteractEventOn.CHANGE
+  )
+}
+</script>
+
+<style lang="scss" scoped></style>

+import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
+
+// 时间组件类型
+export enum ComponentInteractEventEnum {
+  DATA = 'data'
+}
+
+// 联动参数
+export enum ComponentInteractParamsEnum {
+  DATA = 'data'
+}
+
+// 定义组件触发回调事件
+export const interactActions: InteractActionsType[] = [
+  {
+    interactType: InteractEventOn.CHANGE,
+    interactName: '选择完成',
+    componentEmitEvents: {
+      [ComponentInteractEventEnum.DATA]: [
+        {
+          value: ComponentInteractParamsEnum.DATA,
+          label: '选择项'
+        }
+      ]
+    }
+  }
+]

@@ -70,7 +70,17 @@ const transitionDuration = computed(() => {
 
 // 预览更新
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
-  option.dataset = newData
+  const chartEditStore = useChartEditStore()
+  //判断只要是分组并且分组绑定了ws
+  let hasGroupWs = false
+  chartEditStore.componentList.some((item: CreateComponentType) => {
+    if (item.request.requestUrl?.includes('ws')) {
+      hasGroupWs = true
+    }
+  })
+  if (!hasGroupWs) {
+    option.dataset = newData
+  }
 })
 </script>
 

@@ -57,7 +57,17 @@ watch(
 
 // 预览更新
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
-  option.dataset = newData
+  const chartEditStore = useChartEditStore()
+  //判断只要是分组并且分组绑定了ws
+  let hasGroupWs = false
+  chartEditStore.componentList.some((item: CreateComponentType) => {
+    if (item.request.requestUrl?.includes('ws')) {
+      hasGroupWs = true
+    }
+  })
+  if (!hasGroupWs) {
+    option.dataset = newData
+  }
 })
 
 //打开链接

@@ -38,7 +38,17 @@ watch(
 )
 
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
-  // option.dataset = newData
+  const chartEditStore = useChartEditStore()
+  //判断只要是分组并且分组绑定了ws
+  let hasGroupWs = false
+  chartEditStore.componentList.some((item: CreateComponentType) => {
+    if (item.request.requestUrl?.includes('ws')) {
+      hasGroupWs = true
+    }
+  })
+  if (!hasGroupWs) {
+    option.dataset = newData
+  }
 })
 </script>
 

@@ -11,6 +11,7 @@ import { OverrideInputsDateConfig } from '@/packages/components/external/Informa
 import { OverrideInputsTabConfig } from '@/packages/components/external/Informations/Inputs/OverrideInputsTab'
 import { OverrideIframeConfig } from '@/packages/components/external/Informations/Mores/OverrideIframe'
 import { ButtonConfig } from '@/packages/components/external/Informations/Inputs/Button'
+import { TreeConfig } from '@/packages/components/external/Informations/Inputs/Tree'
 import { OverrideTextCommonConfig } from '@/packages/components/external/Informations/Texts/OverrideTextCommon'
 import { OverrideTextBarrageConfig } from '@/packages/components/external/Informations/Texts/OverrideTextBarrage'
 import { OverrideTextGradientConfig } from '@/packages/components/external/Informations/Texts/OverrideTextGradient'
@@ -80,6 +81,7 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideCarouselConfig)//重写信息下的轮播图
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideSelectConfig)//重写信息下的select
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, ButtonConfig)//新增信息下的按钮
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, TreeConfig)//新增信息下的树形控件
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideIframeConfig)//重写信息下的远程加载网页
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsDateConfig)//重写信息下的日期
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsTabConfig)//重写信息下的tab