From b18e67face739aa78f4f5d419491d5d708c95cad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Thu, 16 Mar 2023 14:06:00 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20tab=20=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../images/chart/informations/inputs_tab.png | Bin 0 -> 7037 bytes .../Inputs/InputsSelect/index.vue | 2 - .../Informations/Inputs/InputsTab/config.ts | 40 ++++++++++++ .../Informations/Inputs/InputsTab/config.vue | 31 ++++++++++ .../Informations/Inputs/InputsTab/index.ts | 14 +++++ .../Informations/Inputs/InputsTab/index.vue | 58 ++++++++++++++++++ .../Informations/Inputs/InputsTab/interact.ts | 27 ++++++++ .../components/Informations/Inputs/index.ts | 3 +- 8 files changed, 172 insertions(+), 3 deletions(-) create mode 100644 src/assets/images/chart/informations/inputs_tab.png create mode 100644 src/packages/components/Informations/Inputs/InputsTab/config.ts create mode 100644 src/packages/components/Informations/Inputs/InputsTab/config.vue create mode 100644 src/packages/components/Informations/Inputs/InputsTab/index.ts create mode 100644 src/packages/components/Informations/Inputs/InputsTab/index.vue create mode 100644 src/packages/components/Informations/Inputs/InputsTab/interact.ts diff --git a/src/assets/images/chart/informations/inputs_tab.png b/src/assets/images/chart/informations/inputs_tab.png new file mode 100644 index 0000000000000000000000000000000000000000..af13ef8182d547c7d986b59088d7d97b5127adfd GIT binary patch literal 7037 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 Ci`7N| literal 0 HcmV?d00001 diff --git a/src/packages/components/Informations/Inputs/InputsSelect/index.vue b/src/packages/components/Informations/Inputs/InputsSelect/index.vue index f57b3a60..714d4021 100644 --- a/src/packages/components/Informations/Inputs/InputsSelect/index.vue +++ b/src/packages/components/Informations/Inputs/InputsSelect/index.vue @@ -23,8 +23,6 @@ const props = defineProps({ }) const { w, h } = toRefs(props.chartConfig.attr) -const rangeDate = ref() - const option = shallowReactive({ value: { selectValue: props.chartConfig.option.selectValue, diff --git a/src/packages/components/Informations/Inputs/InputsTab/config.ts b/src/packages/components/Informations/Inputs/InputsTab/config.ts new file mode 100644 index 00000000..6d8067ac --- /dev/null +++ b/src/packages/components/Informations/Inputs/InputsTab/config.ts @@ -0,0 +1,40 @@ +import dayjs from 'dayjs' +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 { InputsTabConfig } from './index' + +export const option = { + // 时间组件展示类型，必须和 interactActions 中定义的数据一致 + [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA, + // 默认值 + tabLabel: '选项1', + // 样式 + tabType: 'segment', + // 暴露配置内容给用户 + dataset: [ + { + label: '选项1', + value: '1' + }, + { + label: '选项2', + value: '2' + }, + { + label: '选项3', + value: '3' + } + ] +} + +export default class Config extends PublicConfigClass implements CreateComponentType { + public key = InputsTabConfig.key + public attr = { ...chartInitConfig, w: 460, h: 32, zIndex: -1 } + public chartConfig = cloneDeep(InputsTabConfig) + public interactActions = interactActions + public option = cloneDeep(option) +} diff --git a/src/packages/components/Informations/Inputs/InputsTab/config.vue b/src/packages/components/Informations/Inputs/InputsTab/config.vue new file mode 100644 index 00000000..39d9cad5 --- /dev/null +++ b/src/packages/components/Informations/Inputs/InputsTab/config.vue @@ -0,0 +1,31 @@ + + + diff --git a/src/packages/components/Informations/Inputs/InputsTab/index.ts b/src/packages/components/Informations/Inputs/InputsTab/index.ts new file mode 100644 index 00000000..29276c2c --- /dev/null +++ b/src/packages/components/Informations/Inputs/InputsTab/index.ts @@ -0,0 +1,14 @@ +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d' +import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' + +export const InputsTabConfig: ConfigType = { + key: 'InputsTab', + chartKey: 'VInputsTab', + conKey: 'VCInputsTab', + title: '标签选择器', + category: ChatCategoryEnum.INPUTS, + categoryName: ChatCategoryEnumName.INPUTS, + package: PackagesCategoryEnum.INFORMATIONS, + chartFrame: ChartFrameEnum.STATIC, + image: 'inputs_tab.png' +} diff --git a/src/packages/components/Informations/Inputs/InputsTab/index.vue b/src/packages/components/Informations/Inputs/InputsTab/index.vue new file mode 100644 index 00000000..f048a482 --- /dev/null +++ b/src/packages/components/Informations/Inputs/InputsTab/index.vue @@ -0,0 +1,58 @@ + + + + + diff --git a/src/packages/components/Informations/Inputs/InputsTab/interact.ts b/src/packages/components/Informations/Inputs/InputsTab/interact.ts new file mode 100644 index 00000000..adc75306 --- /dev/null +++ b/src/packages/components/Informations/Inputs/InputsTab/interact.ts @@ -0,0 +1,27 @@ +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: '选择项' + } + ] + } + } +] diff --git a/src/packages/components/Informations/Inputs/index.ts b/src/packages/components/Informations/Inputs/index.ts index 555f97da..1f4f22a7 100644 --- a/src/packages/components/Informations/Inputs/index.ts +++ b/src/packages/components/Informations/Inputs/index.ts @@ -1,4 +1,5 @@ import { InputsDateConfig } from './InputsDate/index' import { InputsSelectConfig } from './InputsSelect/index' +import { InputsTabConfig } from './InputsTab/index' -export default [InputsDateConfig, InputsSelectConfig] +export default [InputsDateConfig, InputsSelectConfig, InputsTabConfig]