diff --git a/src/components/PluginDialog/index.vue b/src/components/PluginDialog/index.vue index a1a5f4be03..045626605b 100644 --- a/src/components/PluginDialog/index.vue +++ b/src/components/PluginDialog/index.vue @@ -95,6 +95,7 @@ :prop="key" > + + + + + + +
+ + + + {{ $t('button.addValue') }} + +
- Cancel + {{ $t('button.cancel') }} - Confirm + {{ $t('button.confirm') }} @@ -177,6 +201,7 @@ export default class extends Vue { private data: any = {} private isDataChanged: boolean = false private showDialog: boolean = false + private arrayPropertiesLength = {} @Watch('show') private onShowChange(value: boolean) { @@ -242,8 +267,34 @@ export default class extends Vue { this.rules = rules + // Generate initial data and merge current data + let schemaKeys = {} + for (let key in schema.properties) { + if (schema.properties[key].default) { + schemaKeys[key] = schema.properties[key].default + continue + } + + switch (schema.properties[key].type) { + case 'array': + schemaKeys[key] = [] + this.arrayPropertiesLength[key] = [...new Array(this.pluginData[key] ? this.pluginData[key].length : schema.properties[key].minItems).keys()] + break + case 'object': + schemaKeys[key] = {} + break + case 'boolean': + schemaKeys[key] = false + break + default: + schemaKeys[key] = '' + } + } + if (this.pluginData) { - this.data = Object.assign({}, this.pluginData) + this.data = Object.assign(schemaKeys, this.pluginData) + } else { + this.data = schemaKeys } if (this.name === 'key-auth' && !this.pluginData) { @@ -284,13 +335,26 @@ export default class extends Vue { if (valid) { this.data = this.processOneOfProp(this.data) this.$emit('save', this.name, this.data) - this.$message.warning('Your data will be saved after you click the Save button') + this.$message.warning(`${this.$t('message.clickSaveButton')}`) } else { return false } }) } + /** + * Add item to array property + * @param key + */ + private addArrayItem(key: any) { + if (this.arrayPropertiesLength[key].length < this.schema.properties[key].maxItems) { + this.arrayPropertiesLength[key].push(this.arrayPropertiesLength[key].length) + this.$forceUpdate() + } else { + this.$message.warning(`${this.$t('message.cannotAddMoreItems')}`) + } + } + private onPropertyChange(key: any, value: any) { this.data[key] = value this.isDataChanged = true @@ -314,6 +378,15 @@ export default class extends Vue { private processOneOfProp(data: any) { if (!this.schema.oneOf) { + // remove empty field + for (let key in data) { + if (data[key] === '') { + delete data[key] + } + if (typeof data[key] === 'object' && Object.keys(data[key]).length === 0) { + delete data[key] + } + } return data } @@ -341,5 +414,10 @@ export default class extends Vue { margin-left: 10px; } } + + .array-input-container > * { + display: flex; + margin-top: 5px; + } } diff --git a/src/lang/en.ts b/src/lang/en.ts index c82338e987..58623f7438 100644 --- a/src/lang/en.ts +++ b/src/lang/en.ts @@ -64,6 +64,7 @@ export default { }, button: { save: 'Save', + confirm: 'Confirm', cancel: 'Cancel', add_plugin: 'Add Plugin', add_node: 'Add Node', @@ -85,5 +86,9 @@ export default { }, keyTip: 'You can edit and input any value here,and press Enter to confirm.', hashOnTip: 'Select a hash on.' + }, + message: { + cannotAddMoreItems: 'You cannot add more item!', + clickSaveButton: 'Your data will be saved after you click the Save button!' } } diff --git a/src/lang/zh.ts b/src/lang/zh.ts index b35ad59682..5eb56c4db9 100644 --- a/src/lang/zh.ts +++ b/src/lang/zh.ts @@ -72,6 +72,7 @@ export default { }, button: { save: '保存', + confirm: '确认', cancel: '取消', add_plugin: '添加 Plugin', add_node: '添加 Node', @@ -93,5 +94,9 @@ export default { }, keyTip: '你可以编辑并输入任何值,输入值后回车确认。', hashOnTip: '选择 chash 参数来源。' + }, + message: { + cannotAddMoreItems: '不能添加更多项了!', + clickSaveButton: '你的数据将在点击保存按钮后被保存!' } }