This is an automated email from the ASF dual-hosted git repository.
juzhiyuan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-apisix-dashboard.git
The following commit(s) were added to refs/heads/master by this push:
new 329b092 feature: add object property editor (#170)
329b092 is described below
commit 329b092dcaa7a505dcdec86c667b6803f5863d94
Author: bzp2010 <[email protected]>
AuthorDate: Tue Apr 7 22:04:27 2020 +0800
feature: add object property editor (#170)
* feat: add object property editor
* fix some problem
Co-authored-by: bzp2010 <[email protected]>
---
src/components/PluginDialog/index.vue | 100 ++++++++++++++++++++++++++++++++++
1 file changed, 100 insertions(+)
diff --git a/src/components/PluginDialog/index.vue
b/src/components/PluginDialog/index.vue
index 0456266..d31d4b9 100644
--- a/src/components/PluginDialog/index.vue
+++ b/src/components/PluginDialog/index.vue
@@ -156,6 +156,39 @@
{{ $t('button.addValue') }}
</el-button>
</div>
+
+ <!-- object property -->
+ <div
+ v-if="schema.properties[key].type === 'object'"
+ class="object-input-container"
+ >
+ <div
+ v-for="(objectItem, objectIndex) in objectPropertiesArray[key]"
+ :key="objectIndex"
+ class="object-input-item"
+ >
+ <el-input
+ v-model="objectPropertiesArray[key][objectIndex].key"
+ :placeholder="`${key} [key ${objectIndex}]`"
+ @input="onObjectPropertyChange(key, $event, true)"
+ />
+ <el-input
+ v-model="objectPropertiesArray[key][objectIndex].value"
+ :placeholder="`${key} [value ${objectIndex}]`"
+ @input="onObjectPropertyChange(key, $event, false)"
+ />
+ <el-button
+ @click="deleteObjectItem(key, objectIndex)"
+ >
+ {{ $t('button.delete') }}
+ </el-button>
+ </div>
+ <el-button
+ @click="addObjectItem(key)"
+ >
+ {{ $t('button.addValue') }}
+ </el-button>
+ </div>
</el-form-item>
</el-form>
<span
@@ -202,6 +235,7 @@ export default class extends Vue {
private isDataChanged: boolean = false
private showDialog: boolean = false
private arrayPropertiesLength = {}
+ private objectPropertiesArray = {}
@Watch('show')
private onShowChange(value: boolean) {
@@ -282,6 +316,15 @@ export default class extends Vue {
break
case 'object':
schemaKeys[key] = {}
+ this.objectPropertiesArray[key] = []
+ if (this.pluginData[key]) {
+ Object.keys(this.pluginData[key]).map(item => {
+ this.objectPropertiesArray[key].push({
+ key: item,
+ value: this.pluginData[key][item]
+ })
+ })
+ }
break
case 'boolean':
schemaKeys[key] = false
@@ -333,6 +376,8 @@ export default class extends Vue {
(this.$refs.form as any).validate((valid: boolean) => {
// 标记该插件数据是否通过校验
if (valid) {
+ // Reorganize an array of object properties into objects
+ this.data = Object.assign({}, this.data,
this.reorganizeObjectProperty())
this.data = this.processOneOfProp(this.data)
this.$emit('save', this.name, this.data)
this.$message.warning(`${this.$t('message.clickSaveButton')}`)
@@ -355,6 +400,53 @@ export default class extends Vue {
}
}
+ /**
+ * Add item to object property
+ * @param key
+ */
+ private addObjectItem(key: any) {
+ this.objectPropertiesArray[key].push({
+ key: '',
+ value: ''
+ })
+ this.isDataChanged = true
+ this.$forceUpdate()
+ }
+
+ /**
+ * Delete item form object property
+ * @param key
+ * @param index
+ */
+ private deleteObjectItem(key: any, index: number) {
+ this.objectPropertiesArray[key].splice(index, 1)
+ this.isDataChanged = true
+ this.$forceUpdate()
+ }
+
+ /**
+ * Reorganize an array of object properties into objects
+ */
+ private reorganizeObjectProperty() {
+ let data = {}
+ for (let i in this.objectPropertiesArray) {
+ let objectItem = {}
+ this.objectPropertiesArray[i].map((item: any) => {
+ objectItem[item.key] = item.value
+ })
+ data[i] = objectItem
+ }
+ return data
+ }
+
+ /**
+ * Force rerender on object property content changed
+ */
+ private onObjectPropertyChange() {
+ this.isDataChanged = true
+ this.$forceUpdate()
+ }
+
private onPropertyChange(key: any, value: any) {
this.data[key] = value
this.isDataChanged = true
@@ -419,5 +511,13 @@ export default class extends Vue {
display: flex;
margin-top: 5px;
}
+
+ .object-input-container > * {
+ display: flex;
+ margin-top: 5px;
+ :not(:first-child){
+ margin-left: 5px;
+ }
+ }
}
</style>
