From c5788f79b3a90d51278f124d5b1f28bd4544dba3 Mon Sep 17 00:00:00 2001
From: luoyp <2456821174@qq.com>
Date: Mon, 14 Aug 2023 11:01:04 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=BE=93=E5=85=A5=E6=A1=86?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Informations/Inputs/InputsInput/config.ts | 24 +++++++
 .../Inputs/InputsInput/config.vue             | 18 ++++++
 .../Informations/Inputs/InputsInput/index.ts  | 14 ++++
 .../Informations/Inputs/InputsInput/index.vue | 64 +++++++++++++++++++
 .../Inputs/InputsInput/interact.ts            | 27 ++++++++
 .../components/Informations/Inputs/index.ts   |  3 +-
 6 files changed, 149 insertions(+), 1 deletion(-)
 create mode 100644 src/packages/components/Informations/Inputs/InputsInput/config.ts
 create mode 100644 src/packages/components/Informations/Inputs/InputsInput/config.vue
 create mode 100644 src/packages/components/Informations/Inputs/InputsInput/index.ts
 create mode 100644 src/packages/components/Informations/Inputs/InputsInput/index.vue
 create mode 100644 src/packages/components/Informations/Inputs/InputsInput/interact.ts

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]