diff --git a/src/packages/components/Informations/Inputs/InputsInput/config.ts b/src/packages/components/Informations/Inputs/InputsInput/config.ts new file mode 100644 index 00000000..f99c35d7 --- /dev/null +++ b/src/packages/components/Informations/Inputs/InputsInput/config.ts @@ -0,0 +1,24 @@ +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 {InputsInputConfig} from "./index"; + +export const option = { + // 时间组件展示类型,必须和 interactActions 中定义的数据一致 + [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA, + // 默认值 + inputValue: "0", + // 暴露配置内容给用户 + dataset: "" +} + +export default class Config extends PublicConfigClass implements CreateComponentType { + public key = InputsInputConfig.key + public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 } + public chartConfig = cloneDeep(InputsInputConfig) + public interactActions = interactActions + public option = cloneDeep(option) +} \ No newline at end of file diff --git a/src/packages/components/Informations/Inputs/InputsInput/config.vue b/src/packages/components/Informations/Inputs/InputsInput/config.vue new file mode 100644 index 00000000..1c7900ee --- /dev/null +++ b/src/packages/components/Informations/Inputs/InputsInput/config.vue @@ -0,0 +1,18 @@ +<template> + <collapse-item name="输入框配置" :expanded="true"> + <setting-item-box name="默认值" :alone="true"> + <n-input v-model:value="optionData.dataset" placeholder="若未输入,则默认值为0"/> + </setting-item-box> + </collapse-item> +</template> +<script setup lang="ts"> +import { PropType } from 'vue' +import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting' +import { option } from './config' +defineProps({ + optionData: { + type: Object as PropType<typeof option>, + required: true + } +}) +</script> \ No newline at end of file diff --git a/src/packages/components/Informations/Inputs/InputsInput/index.ts b/src/packages/components/Informations/Inputs/InputsInput/index.ts new file mode 100644 index 00000000..0828ea35 --- /dev/null +++ b/src/packages/components/Informations/Inputs/InputsInput/index.ts @@ -0,0 +1,14 @@ +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d' +import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' + +export const InputsInputConfig: ConfigType = { + key: 'InputsInput', + chartKey: 'VInputsInput', + conKey: 'VCInputsInput', + title: '输入框', + category: ChatCategoryEnum.INPUTS, + categoryName: ChatCategoryEnumName.INPUTS, + package: PackagesCategoryEnum.INFORMATIONS, + chartFrame: ChartFrameEnum.STATIC, + image: 'inputs_select.png' +} \ No newline at end of file diff --git a/src/packages/components/Informations/Inputs/InputsInput/index.vue b/src/packages/components/Informations/Inputs/InputsInput/index.vue new file mode 100644 index 00000000..e01e75f3 --- /dev/null +++ b/src/packages/components/Informations/Inputs/InputsInput/index.vue @@ -0,0 +1,64 @@ +<template> + <div> + <n-input :style="`width:${w}px;`" type="text" + v-model:value="option.value.dataset" + placeholder="请输入" + @change="onChange"> + + </n-input> + </div> +</template> + +<script lang="ts" setup> +import { PropType, toRefs, shallowReactive, watch } from 'vue' +import { CreateComponentType } from '@/packages/index.d' +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' +import { useChartInteract } from '@/hooks' +import { InteractEventOn } from '@/enums/eventEnum' +import { ComponentInteractParamsEnum } from './interact' + +const props = defineProps({ + chartConfig: { + type: Object as PropType<CreateComponentType>, + required: true + } +}) + +const { w, h } = toRefs(props.chartConfig.attr) +const option = shallowReactive({ + value: { + inputValue: props.chartConfig.option.inputValue, + dataset: props.chartConfig.option.dataset + } +}) + +const onChange = (v: string) => { + if(v == undefined) return; + // 存储到联动数据 + useChartInteract( + props.chartConfig, + useChartEditStore, + { [ComponentInteractParamsEnum.DATA]: v }, + InteractEventOn.CHANGE + ) +} + +// 手动更新 +watch( + () => props.chartConfig.option, + (newData: any) => { + option.value = newData + onChange(newData.inputValue) + }, + { + immediate: true, + deep: true + } +) + +</script> + + + + + diff --git a/src/packages/components/Informations/Inputs/InputsInput/interact.ts b/src/packages/components/Informations/Inputs/InputsInput/interact.ts new file mode 100644 index 00000000..d6c070f4 --- /dev/null +++ b/src/packages/components/Informations/Inputs/InputsInput/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 bea83789..215dd78a 100644 --- a/src/packages/components/Informations/Inputs/index.ts +++ b/src/packages/components/Informations/Inputs/index.ts @@ -2,5 +2,6 @@ import { InputsDateConfig } from './InputsDate/index' import { InputsSelectConfig } from './InputsSelect/index' import { InputsTabConfig } from './InputsTab/index' import { InputsPaginationConfig } from "./InputsPagination/index"; +import { InputsInputConfig} from "./InputsInput/index"; -export default [InputsDateConfig, InputsSelectConfig, InputsTabConfig,InputsPaginationConfig] +export default [InputsDateConfig, InputsSelectConfig, InputsTabConfig,InputsPaginationConfig,InputsInputConfig]