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 @@ + + + + + \ 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; } } + 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 @@ - + @change="formChange" /> --> - + +