From 6c5fb7466bbec0968092169b961f072bdeebe713 Mon Sep 17 00:00:00 2001
From: hyunfa <1598047833@qq.com>
Date: Thu, 5 Sep 2024 22:38:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=BF=E6=8D=A2=E8=A1=A8=E5=8D=95=20?=
 =?UTF-8?q?#=20Reviewed,=20transaction=20id:=2025012?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package.json                         |   1 +
 .../src/components/RussianDolls/create.ts     | 114 ++++++++++
 frontend/src/components/common/key-value.vue  | 199 ++++++++++++++++++
 frontend/src/i18n/en.js                       |   1 +
 frontend/src/i18n/zh.js                       |   1 +
 .../plugin-rule/plugin-rule-create/index.vue  |   6 +
 .../plugin-rule-create/params-config.vue      | 119 +++++++----
 7 files changed, 404 insertions(+), 37 deletions(-)
 create mode 100644 frontend/src/components/common/key-value.vue

diff --git a/frontend/package.json b/frontend/package.json
index 686407982..162efbe6e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -42,6 +42,7 @@
     }
   },
   "dependencies": {
+    "@blueking/bkui-form": "^0.0.42-beta.16",
     "@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 403db524a..7c269afa0 100644
--- a/frontend/src/components/RussianDolls/create.ts
+++ b/frontend/src/components/RussianDolls/create.ts
@@ -184,6 +184,120 @@ export function initSchema(schema: IItem): Doll[] {
   // return formatSchema(schema, schema.property)
 }
 
+export const transformSchema = (schema: any, parentRequired: any[] = [], key: string = '') => {
+  if (!schema || typeof schema !== 'object') return schema;
+
+  // 处理对象类型的属性
+  if (schema.type === 'object' && schema.properties) {
+    const requiredProps = [];
+    for (const key in schema.properties) {
+      const prop = schema.properties[key];
+      if (typeof prop.required !== 'undefined') {
+        if (prop.required) {
+          requiredProps.push(key);
+          if (prop.type === 'array') {
+            prop['minItems'] = 1;
+            prop['ui:group'] = {
+              "props": {
+                "verifiable": false,
+              },
+            };
+          }
+          prop['ui:rules'] = ['required']; // 增加 ui:rules
+        }
+        // 删除所有的 required，无论是 true 还是 false
+        delete prop.required;
+      }
+      // 递归处理子属性
+      transformSchema(prop, requiredProps, key);
+    }
+    if (schema.required !== undefined) {
+      if (schema.required) {
+        parentRequired.push(key);
+      }
+      // 处理对象类型中的 required 属性
+      delete schema.required;
+    }
+    
+    if (requiredProps.length > 0) {
+      schema.required = requiredProps;
+    }
+  }
+
+  // 处理数组类型的项
+  if (schema.type === 'array' && schema.items) {
+    const itemRequiredProps: any = [];
+    // 递归处理数组的每个项
+    transformSchema(schema.items, itemRequiredProps, key);
+    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;
+    }
+    if (schema.items.properties && Object.keys(schema.items.properties).length >= 2) {
+      // 如果是 key 和 value，添加 ui:component
+      if (schema.items.properties.key && schema.items.properties.value) {
+        schema['ui:component'] = { "name": "bfArray" };
+      }
+      schema.items['ui:group'] = {
+        "props": {
+          "type": "card",
+        },
+        "style": {
+          "background": "#F5F7FA",
+        },
+      };
+    }
+    if (schema.items.type === 'string' || schema.items.type === 'boolean' || schema.items.type === 'integer') {
+      // parentRequired.push(key);
+    }
+  }
+
+  // 转换 ui_component 属性到 ui:component
+  if (schema.ui_component && schema.ui_component.type === 'select') {
+    const datasource = [];
+    for (const optionKey in schema.ui_component.properties) {
+      const option = schema.ui_component.properties[optionKey];
+      datasource.push({
+        label: option.title,
+        value: option.value
+      });
+    }
+    schema['ui:component'] = {
+      name: 'select',
+      props: {
+        datasource,
+        clearable: false
+      }
+    };
+    delete schema.ui_component; // 删除原始的 ui_component
+  }
+  
+  // 处理字符串、布尔和整数类型的属性，删除 required
+  if (schema.type === 'string' || schema.type === 'boolean' || schema.type === 'integer') {
+    if (schema.required !== undefined) {
+      if (schema.required) {
+        schema['ui:rules'] = ['required'];
+      }
+      // 删除 required
+      delete schema.required;
+    }
+  }
+
+  return schema;
+}
 export const createItem = (property: string, params: IItem, id?: string): Doll => {
   console.log('property: ', property, params.type, '; params: ', params);
   return {
diff --git a/frontend/src/components/common/key-value.vue b/frontend/src/components/common/key-value.vue
new file mode 100644
index 000000000..21b93037a
--- /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/index.vue b/frontend/src/views/plugin/plugin-rule/plugin-rule-create/index.vue
index 47459181f..b5cb65825 100644
--- a/frontend/src/views/plugin/plugin-rule/plugin-rule-create/index.vue
+++ b/frontend/src/views/plugin/plugin-rule/plugin-rule-create/index.vue
@@ -418,6 +418,7 @@ $bgColor: #f5f7fa;
   }
 }
 .rule-create {
+  height: 100%;
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -433,3 +434,8 @@ $bgColor: #f5f7fa;
   }
 }
 </style>
+<style>
+article {
+  height: 100%;
+}
+</style>
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 d1f862a33..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
@@ -47,16 +47,25 @@
 
             <!-- :ref="`form${mainItem.name}`" -->
             <!-- ref="nnnnnnnn" -->
-            <DollForm
+            <!-- <DollForm
               v-if="!isPluginType && mainItem.variables?.properties"
               :ref="`form${mainItem.name}`"
               :data="mainItem.variables"
               :label-width="200"
               :value="mainItem.form"
-              @change="formChange" />
+              @change="formChange" /> -->
               <!-- @focus="handleOperate(arguments, mainItem, 'focus')"
               @blur="handleOperate(arguments, mainItem, 'blur')" -->
-
+              <BKUIFrom
+                v-if="!isPluginType && mainItem.variables?.properties"
+                ref="bkuiFormRef"
+                :label-width="300"
+                v-model="mainItem.form"
+                :schema="mainItem.variables"
+                form-type="vertical"
+                :key="mainItem.id"
+              >
+              </BKUIFrom>
             <!-- <bk-form
               v-if="mainItem.data.length"
               :model="mainItem.form"
@@ -253,6 +262,16 @@ import ExceptionCard from '@/components/exception/exception-card.vue';
 import { reguRequired } from '@/common/form-check';
 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 keyValue from '@/components/common/key-value';
+
+const BKUIFrom = createForm({
+  components: {
+    bfArray: keyValue
+  }
+})
 
 interface IVariables {
   title: string
@@ -284,6 +303,7 @@ interface IVariablesItem {
   components: {
     VariablePopover,
     ExceptionCard,
+    BKUIFrom,
   },
 })
 /**
@@ -320,6 +340,7 @@ export default class ParamsConfig extends Vue {
     [key: string]: IVariablesItem[]
   } = {};
   private popoverInstance: any = null;
+  private bkuiFormRef: any = null;
 
   @Ref('popoverRef') private readonly popoverRef!: any;
   @Ref('configContent') private readonly configContent!: any;
@@ -393,7 +414,30 @@ export default class ParamsConfig extends Vue {
     });
     this.variableMap = res;
   }
-
+  private getDefaultValue(type: string) {
+    let defaultValue;
+    switch(type){
+      case 'string':
+        defaultValue = '';
+        break;
+      case 'boolean':
+        defaultValue = false;
+        break;
+      case 'number':
+        defaultValue = 0;
+        break;
+      case 'object':
+        defaultValue = {};
+        break;
+      case 'array':
+        defaultValue = [];
+        break;
+      default:
+        defaultValue = '';
+        break;
+    }
+    return defaultValue;
+  }
   // 初始化主配置和子配置，并按操作系统分类 && 回填表单
   private async getVariablesConfig() {
     let idList: number[] = [];
@@ -406,7 +450,7 @@ export default class ParamsConfig extends Vue {
     idList = Array.from(new Set(idList));
     if (idList.length) {
       this.loading = true;
-      const list = await PluginStore.getConfigVariables({ config_tpl_ids: idList });
+      let list = await PluginStore.getConfigVariables({ config_tpl_ids: idList });
       this.loading = false;
       list.forEach((item: IVariablesRes) => {
         const itemList = Object.entries(item.variables?.properties || {});
@@ -414,7 +458,7 @@ export default class ParamsConfig extends Vue {
         let variableList: IParamsData[] = [];
         // 处理表单遍历所需的统一格式 && 回填参数
         itemList.forEach(([key, value]) => {
-          form[key] = value.default || '';
+          form[key] = value.default || this.getDefaultValue(value.type);
           variableList.push({
             prop: key,
             type: value.type === 'number' ? 'number' : 'string', // 强制转为字符串
@@ -460,6 +504,7 @@ export default class ParamsConfig extends Vue {
                 variables: item.variables || {},
               });
             }
+            sysItem.variables = transformSchema(item.variables);
           }
         });
       });
@@ -577,46 +622,46 @@ export default class ParamsConfig extends Vue {
     bus.$emit('validate', (result: boolean) => {
       validateRes.push(result);
     });
-    bus.$emit('validateKV', (result: boolean) => {
-      validateRes.push(result);
-    });
-    if(validateRes.some(res => !res)) return true;
-
-    const checkList: Promise<boolean>[] = [];
-    this.list.forEach((item: IParamsConfig) => {
-      const refs: any = this.$refs[`form${item.name}`];
-      if (refs?.length) {
-        refs.reduce((list: Promise<boolean>[], ref: any) => {
-          list.push(ref.validate());
-          return list;
-        }, checkList);
-      }
-    });
-    return new Promise((resolve) => {
-      Promise.all(checkList)
-        .then(() => {
-          resolve(false);
-        })
-        .catch(() => {
-          // const active = this.list.filter(item =>
-          //   Object.values(item.form).some(value => !value)).map(item => item.name);
-          // this.activeName = Array.from(new Set((active as string[])
-          //   .concat(this.activeName)));
-          resolve(true);
-        });
-    });
+
+    // const checkList: Promise<boolean>[] = [];
+    // this.list.forEach((item: IParamsConfig) => {
+    //   const refs: any = this.$refs[`form${item.name}`];
+    //   if (refs?.length) {
+    //     refs.reduce((list: Promise<boolean>[], ref: any) => {
+    //       list.push(ref.validate());
+    //       return list;
+    //     }, checkList);
+    //   }
+    // });
+    // return new Promise((resolve) => {
+    //   Promise.all(checkList)
+    //     .then(() => {
+    //       resolve(false);
+    //     })
+    //     .catch(() => {
+    //       // const active = this.list.filter(item =>
+    //       //   Object.values(item.form).some(value => !value)).map(item => item.name);
+    //       // this.activeName = Array.from(new Set((active as string[])
+    //       //   .concat(this.activeName)));
+    //       resolve(true);
+    //     });
+    // });
+    (this.$refs.bkuiFormRef as Array<any>)?.forEach((item: any) => {
+      validateRes.push(item.validateForm());
+    })
+    return validateRes.some(valid => !valid);
   }
 
   // 更新策略的 params 和 configs 属性
   public async beforeStepLeave() {
     await this.handleValidateForm();
     const formatValue = JSON.parse(JSON.stringify(PluginStore.strategyData.params));
-    this.list.forEach((item) => {
-      const formRef = (this.$refs[`form${item.name}`] as any)?.[0];
+    this.list.forEach((item, ind) => {
+      const formRef = (this.$refs.bkuiFormRef as Array<any>)?.[ind];
       const params: Dictionary = {
         cpu_arch: item.cpu_arch,
         os: item.os,
-        context: formRef?.getFormData?.(), // 主配置、子配置的值都集合到context
+        context: formRef?.value, // 主配置、子配置的值都集合到context
       };
       // const itemList = Object.entries(item.form);
       // itemList.forEach(([key, value]) => {