From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/iot/rule/data/sink/config/components/KeyValueEditor.vue | 73 ++++++++++++++++++++++++++++++++++++
1 files changed, 73 insertions(+), 0 deletions(-)
diff --git a/src/views/iot/rule/data/sink/config/components/KeyValueEditor.vue b/src/views/iot/rule/data/sink/config/components/KeyValueEditor.vue
new file mode 100644
index 0000000..d0b115c
--- /dev/null
+++ b/src/views/iot/rule/data/sink/config/components/KeyValueEditor.vue
@@ -0,0 +1,73 @@
+<template>
+ <div v-for="(item, index) in items" :key="index" class="flex mb-2 w-full">
+ <el-input v-model="item.key" class="mr-2" placeholder="閿�" />
+ <el-input v-model="item.value" placeholder="鍊�" />
+ <el-button class="ml-2" text type="danger" @click="removeItem(index)">
+ <el-icon>
+ <Delete />
+ </el-icon>
+ 鍒犻櫎
+ </el-button>
+ </div>
+ <el-button text type="primary" @click="addItem">
+ <el-icon>
+ <Plus />
+ </el-icon>
+ {{ addButtonText }}
+ </el-button>
+</template>
+
+<script lang="ts" setup>
+import { Delete, Plus } from '@element-plus/icons-vue'
+import { isEmpty } from '@/utils/is'
+
+defineOptions({ name: 'KeyValueEditor' })
+
+interface KeyValueItem {
+ key: string
+ value: string
+}
+
+const props = defineProps<{
+ modelValue: Record<string, string>
+ addButtonText: string
+}>()
+const emit = defineEmits(['update:modelValue'])
+const items = ref<KeyValueItem[]>([]) // 鍐呴儴 key-value 椤瑰垪琛�
+
+/** 娣诲姞椤圭洰 */
+const addItem = () => {
+ items.value.push({ key: '', value: '' })
+ updateModelValue()
+}
+
+/** 绉婚櫎椤圭洰 */
+const removeItem = (index: number) => {
+ items.value.splice(index, 1)
+ updateModelValue()
+}
+
+/** 鏇存柊 modelValue */
+const updateModelValue = () => {
+ const result: Record<string, string> = {}
+ items.value.forEach((item) => {
+ if (item.key) {
+ result[item.key] = item.value
+ }
+ })
+ emit('update:modelValue', result)
+}
+
+/** 鐩戝惉椤圭洰鍙樺寲 */
+watch(items, updateModelValue, { deep: true })
+watch(
+ () => props.modelValue,
+ (val) => {
+ // 鍒楄〃鏈夊�煎悗浠ュ垪琛ㄤ腑鐨勫�间负鍑�
+ if (isEmpty(val) || !isEmpty(items.value)) {
+ return
+ }
+ items.value = Object.entries(props.modelValue).map(([key, value]) => ({ key, value }))
+ }
+)
+</script>
--
Gitblit v1.8.0