From 348847e196586d0016c7c8b8b46362420660d3d3 Mon Sep 17 00:00:00 2001 From: ibuler Date: Thu, 5 May 2022 09:54:38 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BF=AE=E6=94=B9=20platform?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../FormFields/ProtocolSelector.vue | 36 +++++++++++-------- src/store/modules/assets.js | 2 ++ src/views/assets/Host/HostCreateUpdate.vue | 1 + .../assets/Platform/PlatformCreateUpdate.vue | 31 ++++++++++++++-- src/views/assets/Platform/PlatformList.vue | 20 +++++------ src/views/assets/const.js | 6 +++- 6 files changed, 68 insertions(+), 28 deletions(-) diff --git a/src/components/FormFields/ProtocolSelector.vue b/src/components/FormFields/ProtocolSelector.vue index 7142fe2d3..071bb7833 100644 --- a/src/components/FormFields/ProtocolSelector.vue +++ b/src/components/FormFields/ProtocolSelector.vue @@ -54,7 +54,7 @@ export default { computed: { protocols() { return this.choices.map(item => { - const proto = item.value.split('/') + const proto = item.split('/') return { name: proto[0], port: proto[1] } }) }, @@ -83,22 +83,15 @@ export default { }, immediate: true, deep: true + }, + choices: { + handler(value) { + this.setDefaultItems() + } } }, mounted() { - if (this.value.length !== 0) { - const items = this.value.map(item => { - const proto = item.split('/') - return { name: proto[0], port: proto[1] } - }) - const protocolsNames = this.protocols.map(item => item.name) - this.items = items.filter(item => { - return protocolsNames[item.name] - }) - } else { - this.items.push({ ...this.protocols[0] }) - } - console.log('Choices: ', this.choices) + this.setDefaultItems() }, methods: { onInput(val) { @@ -116,6 +109,21 @@ export default { const selected = this.protocols.find(item => item.name === evt) item.name = selected.name item.port = selected.port + }, + setDefaultItems() { + let items = [] + if (this.value.length !== 0) { + items = this.value.map(item => { + const proto = item.split('/') + return { name: proto[0], port: proto[1] } + }) + const protocolsNames = this.protocols.map(item => item.name) + items = items.filter(item => protocolsNames[item.name]) + } + if (items.length === 0) { + items.push({ ...this.protocols[0] }) + } + this.items = items } } } diff --git a/src/store/modules/assets.js b/src/store/modules/assets.js index 56354d29e..cbbc2c34e 100644 --- a/src/store/modules/assets.js +++ b/src/store/modules/assets.js @@ -49,6 +49,8 @@ const actions = { apiGetCategoryTypes().then(data => { commit('SET_CATEGORIES', data) commit('SET_CATEGORIES_DROPDOWN', data) + console.log('Set done') + resolve(true) }) }) } diff --git a/src/views/assets/Host/HostCreateUpdate.vue b/src/views/assets/Host/HostCreateUpdate.vue index 52bcce688..7cc86a8a8 100644 --- a/src/views/assets/Host/HostCreateUpdate.vue +++ b/src/views/assets/Host/HostCreateUpdate.vue @@ -50,6 +50,7 @@ export default { nodes: nodesInitial, admin_user: this.platform['admin_user_default'] } + this.fieldsMeta.protocols.el.choices = this.platform this.initial = initial this.loading = false } diff --git a/src/views/assets/Platform/PlatformCreateUpdate.vue b/src/views/assets/Platform/PlatformCreateUpdate.vue index bc8e5aa8e..9debcd5fd 100644 --- a/src/views/assets/Platform/PlatformCreateUpdate.vue +++ b/src/views/assets/Platform/PlatformCreateUpdate.vue @@ -23,8 +23,8 @@ export default { loading: true, initial: { comment: 'Hello world', - charset: 'utf8' - // category_type: ['host', 'linux'] + charset: 'utf8', + category_type: ['host', 'linux'] }, fields: [ [this.$t('common.Basic'), [ @@ -86,11 +86,27 @@ export default { el: { multiple: false, options: this.$store.state.assets.assetCategoriesCascader + }, + on: { + change: ([event], formValue) => { + const category = event[0] + const type = event[1] + const url = `/api/v1/assets/platforms/type-limits/?category=${category}&type=${type}` + this.$axios.get(url).then(limits => { + this.changeLimits(limits) + }) + console.log('On change: ', event) + } } }, domain_default: assetFieldsMeta.domain, admin_user_default: assetFieldsMeta.admin_user, - protocols_default: assetFieldsMeta.protocols + protocols_default: assetFieldsMeta.protocols, + domain_enabled: { + el: { + disabled: true + } + } }, url: `/api/v1/assets/platforms/?category=${category}&type=${type}`, cleanFormValue: (values) => { @@ -113,6 +129,7 @@ export default { setCategoryOnCreate() { const category = this.$route.query.category const type = this.$route.query.type + console.log('Category rdop down: ', this.$store.state.assets.assetCategoriesCascader) if (!category || !type) { return } @@ -122,6 +139,14 @@ export default { label: choice['display_name'], value: choice['value'] } + }, + changeLimits(limits) { + console.log('Limits: ', limits) + const hasDomain = limits['has_domain'] + const protocolLimits = limits['protocols_limit'] + this.fieldsMeta.domain_enabled.el.disabled = !hasDomain + this.fieldsMeta.domain_default.el.disabled = !hasDomain + this.fieldsMeta.protocols_default.el.choices = protocolLimits } } } diff --git a/src/views/assets/Platform/PlatformList.vue b/src/views/assets/Platform/PlatformList.vue index e83ba8b9b..4a0de72f9 100644 --- a/src/views/assets/Platform/PlatformList.vue +++ b/src/views/assets/Platform/PlatformList.vue @@ -58,16 +58,16 @@ export default { hasRightActions: true, hasMoreActions: false, hasBulkDelete: false, - createRoute: 'PlatformCreate', - moreCreates: { - callback: (item) => { - this.$router.push({ - name: 'PlatformCreate', - query: { type: item.name, category: item.category } - }) - }, - dropdown: this.$store.state.assets.assetCategoriesDropdown - } + createRoute: 'PlatformCreate' + // moreCreates: { + // callback: (item) => { + // this.$router.push({ + // name: 'PlatformCreate', + // query: { type: item.name, category: item.category } + // }) + // }, + // dropdown: this.$store.state.assets.assetCategoriesDropdown + // } } } } diff --git a/src/views/assets/const.js b/src/views/assets/const.js index 2e01c91ec..ce073e069 100644 --- a/src/views/assets/const.js +++ b/src/views/assets/const.js @@ -35,7 +35,10 @@ export const AssetCascader = groupedDropdownToCascader(AssetProtocols) export const assetFieldsMeta = { protocols: { - component: ProtocolSelector + component: ProtocolSelector, + el: { + choices: [] + } }, platform: { el: { @@ -50,6 +53,7 @@ export const assetFieldsMeta = { } }, domain: { + disabled: false, el: { multiple: false, clearable: true,