From 9ccf23046b023746acec525f3c7d801d112ecd7d Mon Sep 17 00:00:00 2001
From: hyunfa <1598047833@qq.com>
Date: Wed, 20 Nov 2024 21:12:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9=20?=
 =?UTF-8?q?#=20Reviewed,=20transaction=20id:=2024398?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package.json                         |   2 +-
 .../src/components/RussianDolls/create.ts     |  20 +-
 frontend/src/components/common/key-value.vue  | 199 ++++++++++++++++++
 frontend/src/i18n/en.js                       |   1 +
 frontend/src/i18n/zh.js                       |   1 +
 .../plugin-rule-create/params-config.vue      |  23 +-
 6 files changed, 228 insertions(+), 18 deletions(-)
 create mode 100644 frontend/src/components/common/key-value.vue

diff --git a/frontend/package.json b/frontend/package.json
index e81da8f36..be38d5831 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -42,7 +42,7 @@
     }
   },
   "dependencies": {
-    "@blueking/bkui-form": "^0.0.42-beta.14",
+    "@blueking/bkui-form": "^0.0.42-beta.15",
     "@blueking/crypto-js-sdk": "0.0.4",
     "@blueking/ip-selector": "0.2.0-beta",
     "@blueking/login-modal": "^1.0.1",
diff --git a/frontend/src/components/RussianDolls/create.ts b/frontend/src/components/RussianDolls/create.ts
index be77092cf..7c269afa0 100644
--- a/frontend/src/components/RussianDolls/create.ts
+++ b/frontend/src/components/RussianDolls/create.ts
@@ -199,7 +199,7 @@ export const transformSchema = (schema: any, parentRequired: any[] = [], key: st
             prop['minItems'] = 1;
             prop['ui:group'] = {
               "props": {
-                "verifiable": true,
+                "verifiable": false,
               },
             };
           }
@@ -232,13 +232,19 @@ export const transformSchema = (schema: any, parentRequired: any[] = [], key: st
     if (schema.required !== undefined) {
       delete schema.required; // 删除数组项中的 required
     }
+    // 不展示组校验
+    schema['ui:group'] = {
+      "props": {
+        "verifiable": false,
+      },
+    };
+    // 添加样式修改
+    schema['ui:props'] = {
+      "size": 'large'
+    };
     // 处理描述信息
     if (schema.description) {
-      schema['ui:group'] = {
-        "props": {
-          "description": schema.description,
-        },
-      };
+      schema['ui:group']['props']['description'] = schema.description;
     }
     if (schema.items.properties && Object.keys(schema.items.properties).length >= 2) {
       // 如果是 key 和 value，添加 ui:component
@@ -255,7 +261,7 @@ export const transformSchema = (schema: any, parentRequired: any[] = [], key: st
       };
     }
     if (schema.items.type === 'string' || schema.items.type === 'boolean' || schema.items.type === 'integer') {
-      parentRequired.push(key);
+      // parentRequired.push(key);
     }
   }
 
diff --git a/frontend/src/components/common/key-value.vue b/frontend/src/components/common/key-value.vue
new file mode 100644
index 000000000..661057e28
--- /dev/null
+++ b/frontend/src/components/common/key-value.vue
@@ -0,0 +1,199 @@
+<template>
+  <div class="bfArray">
+    <template v-if="modelValue.length">
+      <div v-for="(item, index) in modelValue" :key="index" class="key-value-item">
+        <bk-input
+          v-model="item.key"
+          :placeholder="`Key ${index + 1}`"
+          :class="['key-input', { 'is-error': schema.items.required.includes('key') && item.key === '' && isValid[index]}]"
+        >
+          <span
+            slot="append"
+            class="error-tip is-error"
+            v-bk-tooltips="$t('必填项')">
+            <template v-if="schema.items.required.includes('key') && item.key === '' && isValid[index]">
+              <i class="bk-icon icon-exclamation-circle-shape"></i>
+            </template>
+          </span>
+        </bk-input>
+        <bk-input
+          v-model="item.value"
+          :placeholder="`Value ${index + 1}`"
+          :class="['value-input', { 'is-error': schema.items.required.includes('value') && item.value === '' && isValid[index] }]"
+        >
+          <span
+            slot="append"
+            class="error-tip is-error"
+            v-bk-tooltips="$t('必填项')">
+            <template v-if="schema.items.required.includes('value') && item.value === '' && isValid[index]">
+              <i class="bk-icon icon-exclamation-circle-shape"></i>
+            </template>
+          </span>
+        </bk-input>
+        <!-- 新增的增加按钮 -->
+        <bk-button @click="addItemAt(index)" icon="bk-icon icon-plus-circle" class="add-btn"></bk-button>
+        <bk-button @click="removeItem(index)" icon="bk-icon icon-minus-circle" class="remove-btn"></bk-button>
+      </div>
+    </template>
+    <div v-else>
+      <div :class="{'add-bar': schema['ui:props'].size === 'large'}" @click.stop="() => addItem()">
+        <i class="nodeman-icon nc-plus" />
+        {{ $t('添加') }}{{ schema['ui:props'].size === 'large' ? schema.title : '' }}
+      </div>
+    </div>
+    
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, watch, onMounted } from 'vue';
+import bus from '@/common/bus';
+
+export default defineComponent({
+  name: 'KeyValueComponent',
+  props: {
+    schema: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 当前路径（唯一标识）
+    path: {
+      type: String,
+      default: '',
+    },
+    // 是否必须字段
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    // 全量数据（只读）
+    rootData: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 当前值
+    value: {
+      type: [String, Number, Array, Object, Boolean],
+    },
+    // 布局配置
+    layout: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 当前全局变量上下文
+    context: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 当前项是否可移除
+    removeable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { emit }) {
+    const modelValue = ref([...props.value]);
+    // 填充校验，true表示已校验
+    const isValid = ref(new Array(props.value.length).fill(false));
+
+    watch(modelValue, (newValue) => {
+      emit('input', newValue);
+    }, { deep: true });
+
+    const addItem = () => {
+      isValid.value.push(false);
+      modelValue.value.push({ key: '', value: '' });
+    };
+
+    // 在指定位置插入新项
+    const addItemAt = (index) => {
+      isValid.value.push(false);
+      modelValue.value.splice(index + 1, 0, { key: '', value: '' });
+    };
+
+    const removeItem = (index) => {
+      isValid.value.pop();
+      modelValue.value.splice(index, 1);
+    };
+    const handleBlur = (index) => {
+      isValid.value[index] = true;
+    }
+    const handleFocus = (index) => {
+      isValid.value[index] = false;
+    }
+    const validate = (cb) => {
+      isValid.value.fill(true);
+      isValid.value = [...isValid.value];
+      const hasEmpty = modelValue.value.some((item) => 
+        (item.key === '' && props.schema.items.required.includes('key'))
+        || (item.value === '' && props.schema.items.required.includes('value')));
+      if (hasEmpty) {
+        cb(false);
+      }else{
+        cb(true);
+      }
+    }
+    onMounted(() => {
+      bus.$on('validate', validate)
+    });
+    return {
+      isValid,
+      modelValue,
+      handleBlur,
+      handleFocus,
+      addItem,
+      addItemAt,
+      removeItem
+    };
+  }
+});
+</script>
+
+<style lang="postcss" scoped>
+.key-value-item {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  padding-right: 20px;
+  background: #f5f7fa;
+  margin-bottom: 12px;
+  width: 100%;
+}
+
+.key-input{
+  margin-right: 20px;
+}
+
+.add-btn,.remove-btn {
+  border: none;
+  background-color: transparent;
+}
+
+.add-bar {
+  border: 1px dashed #3a84ff;
+  border-radius: 2px;
+  color: #3a84ff;
+  cursor: pointer;
+  text-align: center;
+}
+
+.key-input, .value-input {
+  position: relative;
+}
+.is-error {
+  /deep/ input[type=text] {
+    border-color: #ff5656;
+    color: #ff5656;
+  }
+  &.error-tip {
+    position: absolute;
+    right: 8px;
+    font-size: 16px;
+    color: #ea3636;
+    cursor: pointer;
+  }
+}
+/deep/ .bk-form-control .group-box {
+  border: none !important;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/i18n/en.js b/frontend/src/i18n/en.js
index fb9326624..24d6201c3 100644
--- a/frontend/src/i18n/en.js
+++ b/frontend/src/i18n/en.js
@@ -845,6 +845,7 @@ export default {
   选择版本: 'Choose version',
   '静态 - IP 选择': 'Static-IP selection',
   '动态 - 拓扑选择': 'Dynamic-Topo selection',
+  添加: 'Add',
   已部署: 'Deployed',
   全部主机: 'All hosts',
   搜索拓扑节点: 'Search topology node',
diff --git a/frontend/src/i18n/zh.js b/frontend/src/i18n/zh.js
index 6a1b0f2b0..170121900 100644
--- a/frontend/src/i18n/zh.js
+++ b/frontend/src/i18n/zh.js
@@ -839,6 +839,7 @@ export default {
   升级版本: '升级版本',
   升级目标: '升级目标',
   参数配置: '参数配置',
+  添加: '添加',
   执行预览: '执行预览',
   部署目标: '部署目标',
   部署版本: '部署版本',
diff --git a/frontend/src/views/plugin/plugin-rule/plugin-rule-create/params-config.vue b/frontend/src/views/plugin/plugin-rule/plugin-rule-create/params-config.vue
index ecfc87848..46f67ba7d 100644
--- a/frontend/src/views/plugin/plugin-rule/plugin-rule-create/params-config.vue
+++ b/frontend/src/views/plugin/plugin-rule/plugin-rule-create/params-config.vue
@@ -264,9 +264,14 @@ import { pluginOperate } from '../../operateConfig';
 import bus from '@/common/bus';
 import createForm from '@blueking/bkui-form';
 import '@blueking/bkui-form/dist/bkui-form.css';
-import { transformSchema } from '@/components/RussianDolls/create'
+import { transformSchema } from '@/components/RussianDolls/create';
+import keyValue from '@/components/common/key-value';
 
-const BKUIFrom = createForm()
+const BKUIFrom = createForm({
+  components: {
+    bfArray: keyValue
+  }
+})
 
 interface IVariables {
   title: string
@@ -613,11 +618,10 @@ export default class ParamsConfig extends Vue {
 
   // 检查表单
   public async handleValidateForm() {
-    // const validateRes: boolean[] = [];
-    // bus.$emit('validate', (result: boolean) => {
-    //   validateRes.push(result);
-    // });
-    // if(validateRes.some(res => !res)) return true;
+    const validateRes: boolean[] = [];
+    bus.$emit('validate', (result: boolean) => {
+      validateRes.push(result);
+    });
 
     // const checkList: Promise<boolean>[] = [];
     // this.list.forEach((item: IParamsConfig) => {
@@ -642,11 +646,10 @@ export default class ParamsConfig extends Vue {
     //       resolve(true);
     //     });
     // });
-    const validRes: boolean[] = [];
     (this.$refs.bkuiFormRef as Array<any>)?.forEach((item: any) => {
-      validRes.push(item.validateForm());
+      validateRes.push(item.validateForm());
     })
-    return validRes.some(valid => !valid);
+    return validateRes.some(valid => !valid);
   }
 
   // 更新策略的 params 和 configs 属性