perf: 封装资产创建基本组件 (#2053)

Co-authored-by: “huailei000” <2280131253@qq.com>
Co-authored-by: 老广 <ibuler@qq.com>
This commit is contained in:
fit2bot
2022-09-15 17:27:12 +08:00
committed by GitHub
parent f50445032f
commit c4bc4a1d9b
8 changed files with 132 additions and 185 deletions

View File

@@ -157,7 +157,7 @@ export default {
}
break
}
this.$log.debug('Field: ', type, col.prop, col)
// this.$log.debug('Field: ', type, col.prop, col)
return col
},
addHelpTipsIfNeed(col) {

View File

@@ -1,46 +1,23 @@
<template>
<GenericCreateUpdatePage v-if="!loading" v-bind="$data" />
<BaseCreateUpdate v-bind="$data" />
</template>
<script>
import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
import { assetFieldsMeta, setPlatformInitial } from '@/views/assets/const'
import BaseCreateUpdate from './components/BaseCreateUpdate'
export default {
name: 'DatabaseCreateUpdate',
components: {
GenericCreateUpdatePage
},
name: 'CloudCreateUpdate',
components: { BaseCreateUpdate },
data() {
return {
loading: true,
initial: {},
url: '/api/v1/assets/databases/',
createSuccessNextRoute: { name: 'AssetList' },
hasDetailInMsg: false,
fields: [
[this.$t('common.Basic'), ['name', 'ip', 'platform', 'cluster']],
[this.$t('assets.Protocols'), ['protocols']],
[this.$t('assets.Domain'), ['domain']],
[this.$t('assets.Node'), ['nodes']],
[this.$t('assets.Label'), ['labels']],
[this.$t('common.Other'), ['is_active', 'comment']]
],
fieldsMeta: assetFieldsMeta(this)
url: '/api/v1/assets/clouds/',
addFields: [
[this.$t('common.Basic'), ['cluster']]
]
}
},
async created() {
try {
await setPlatformInitial(this)
} finally {
this.loading = false
}
},
methods: {
}
}
</script>
<style>
</style>

View File

@@ -1,46 +1,23 @@
<template>
<GenericCreateUpdatePage v-if="!loading" v-bind="$data" />
<BaseCreateUpdate v-bind="$data" />
</template>
<script>
import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
import { assetFieldsMeta, setPlatformInitial } from '@/views/assets/const'
import BaseCreateUpdate from './components/BaseCreateUpdate'
export default {
name: 'DatabaseCreateUpdate',
components: {
GenericCreateUpdatePage
},
components: { BaseCreateUpdate },
data() {
return {
loading: true,
initial: {},
url: '/api/v1/assets/databases/',
createSuccessNextRoute: { name: 'AssetList' },
hasDetailInMsg: false,
fields: [
[this.$t('common.Basic'), ['name', 'ip', 'platform', 'db_name']],
[this.$t('assets.Protocols'), ['protocols']],
[this.$t('assets.Domain'), ['domain']],
[this.$t('assets.Node'), ['nodes']],
[this.$t('assets.Label'), ['labels']],
[this.$t('common.Other'), ['is_active', 'comment']]
],
fieldsMeta: assetFieldsMeta(this)
addFields: [
[this.$t('common.Basic'), ['db_name']]
]
}
},
async created() {
try {
await setPlatformInitial(this)
} finally {
this.loading = false
}
},
methods: {
}
}
</script>
<style>
</style>

View File

@@ -1,47 +1,20 @@
<template>
<GenericCreateUpdatePage v-if="!loading" v-bind="$data" />
<BaseCreateUpdate v-bind="$data" />
</template>
<script>
import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
import { assetFieldsMeta, setPlatformInitial } from '../../const'
import BaseCreateUpdate from './components/BaseCreateUpdate'
export default {
name: 'HostCreateUpdate',
components: {
GenericCreateUpdatePage
},
components: { BaseCreateUpdate },
data() {
return {
loading: true,
initial: {},
platform: {},
url: '/api/v1/assets/hosts/',
createSuccessNextRoute: { name: 'AssetList' },
hasDetailInMsg: false,
fields: [
[this.$t('common.Basic'), ['name', 'ip', 'platform', 'domain']],
[this.$t('assets.Protocols'), ['protocols']],
[this.$t('assets.Node'), ['nodes']],
this.$route.params.id ? null : [this.$t('assets.Account'), ['accounts']],
[this.$t('assets.Label'), ['labels']],
[this.$t('common.Other'), ['is_active', 'comment']]
],
fieldsMeta: assetFieldsMeta(this)
url: '/api/v1/assets/hosts/'
}
},
async mounted() {
try {
await setPlatformInitial(this)
} finally {
this.loading = false
}
},
methods: {
}
}
</script>
<style>
</style>

View File

@@ -1,47 +1,20 @@
<template>
<GenericCreateUpdatePage v-if="!loading" v-bind="$data" />
<BaseCreateUpdate v-bind="$data" />
</template>
<script>
import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
import { assetFieldsMeta, setPlatformInitial } from '../../const'
import BaseCreateUpdate from './components/BaseCreateUpdate'
export default {
name: 'HostCreateUpdate',
components: {
GenericCreateUpdatePage
},
name: 'NetworkingCreateUpdate',
components: { BaseCreateUpdate },
data() {
return {
loading: true,
initial: {},
platform: {},
url: '/api/v1/assets/assets/',
createSuccessNextRoute: { name: 'AssetList' },
hasDetailInMsg: false,
fields: [
[this.$t('common.Basic'), ['name', 'ip', 'platform', 'domain']],
[this.$t('assets.Protocols'), ['protocols']],
[this.$t('assets.Node'), ['nodes']],
this.$route.params.id ? null : [this.$t('assets.Account'), ['accounts']],
[this.$t('assets.Label'), ['labels']],
[this.$t('common.Other'), ['is_active', 'comment']]
],
fieldsMeta: assetFieldsMeta(this)
url: '/api/v1/assets//assets/networks/'
}
},
async created() {
try {
await setPlatformInitial(this)
} finally {
this.loading = false
}
},
methods: {
}
}
</script>
<style>
</style>

View File

@@ -1,47 +1,23 @@
<template>
<GenericCreateUpdatePage v-if="!loading" v-bind="$data" />
<BaseCreateUpdate v-bind="$data" />
</template>
<script>
import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
import { assetFieldsMeta, setPlatformInitial } from '../../const'
import BaseCreateUpdate from './components/BaseCreateUpdate'
export default {
name: 'HostCreateUpdate',
components: {
GenericCreateUpdatePage
},
name: 'WebCreateUpdate',
components: { BaseCreateUpdate },
data() {
return {
loading: true,
initial: {},
platform: {},
url: '/api/v1/assets/web/',
createSuccessNextRoute: { name: 'AssetList' },
hasDetailInMsg: false,
fields: [
[this.$t('common.Basic'), ['name', 'ip', 'platform', 'domain', 'url']],
[this.$t('assets.Protocols'), ['protocols']],
[this.$t('assets.Node'), ['nodes']],
this.$route.params.id ? null : [this.$t('assets.Account'), ['accounts']],
[this.$t('assets.Label'), ['labels']],
[this.$t('common.Other'), ['is_active', 'comment']]
],
fieldsMeta: assetFieldsMeta(this)
addFields: [
[this.$t('common.Basic'), ['url']]
]
}
},
async created() {
try {
await setPlatformInitial(this)
} finally {
this.loading = false
}
},
methods: {
}
}
</script>
<style>
</style>

View File

@@ -0,0 +1,100 @@
<template>
<GenericCreateUpdatePage v-if="!iConfig.loading" v-bind="iConfig" />
</template>
<script>
import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
import { assetFieldsMeta } from '@/views/assets/const'
export default {
components: { GenericCreateUpdatePage },
props: {
url: {
type: String,
default: () => '',
required: true
},
addFields: {
type: Array,
default: () => []
}
},
data() {
return {
defaultConfig: {
loading: true,
initial: {},
platform: {},
url: '/api/v1/assets/hosts/',
createSuccessNextRoute: { name: 'AssetList' },
hasDetailInMsg: false,
fields: [
[this.$t('common.Basic'), ['name', 'ip', 'platform', 'domain']],
[this.$t('assets.Protocols'), ['protocols']],
[this.$t('assets.Node'), ['nodes']],
this.$route.params.id ? null : [this.$t('assets.Account'), ['accounts']],
[this.$t('assets.Label'), ['labels']],
[this.$t('common.Other'), ['is_active', 'comment']]
],
fieldsMeta: assetFieldsMeta()
},
platform: {}
}
},
computed: {
iConfig() {
const { url, addFields, defaultConfig } = this
const config = _.merge(defaultConfig, { url })
if (addFields.length > 0) {
const defaultFields = Object.fromEntries(defaultConfig.fields)
for (const [key, value] of addFields) {
if (Object.prototype.hasOwnProperty.call(defaultFields, key)) {
defaultFields[key] = new Set([...defaultFields[key], ...(value || [])])
}
}
config.fields = Object.entries(defaultFields)
}
return config
}
},
async created() {
try {
await this.setPlatformInitial()
} finally {
this.defaultConfig.loading = false
}
},
methods: {
async setPlatformInitial() {
const nodesInitial = []
if (!this.defaultConfig.initial) this.$set(this.defaultConfig, 'initial', {})
if (this.$route.query['node']) {
nodesInitial.push(this.$route.query.node)
}
const platformId = this.$route.query['platform'] || 1
const url = `/api/v1/assets/platforms/${platformId}/`
this.platform = await this.$axios.get(url)
const initial = {
labels: [],
is_active: true,
nodes: nodesInitial,
platform: parseInt(platformId),
protocols: this.platform.protocols || []
}
this.defaultConfig.initial = Object.assign({}, initial, this.defaultConfig.initial)
this.$set(this.defaultConfig.fieldsMeta.protocols.el, 'choices', (this.platform['protocols'] || []))
const hiddenCheckFields = ['protocols', 'domain']
for (const field of hiddenCheckFields) {
if (this.platform[field + '_enabled'] === false) {
this.defaultConfig.fieldsMeta[field].hidden = () => true
}
}
}
}
}
</script>
<style>
</style>

View File

@@ -4,7 +4,7 @@ import AssetAccounts from '@/components/FormFields/AssetAccounts'
import rules from '@/components/DataForm/rules'
import { Select2 } from '@/components/FormFields'
export const assetFieldsMeta = (vm) => {
export const assetFieldsMeta = () => {
return {
ip: {
label: i18n.t('assets.ipDomain')
@@ -82,35 +82,6 @@ export const assetFieldsMeta = (vm) => {
}
}
export const setPlatformInitial = async(vm) => {
const nodesInitial = []
if (!vm.initial) vm.$set(vm, 'initial', {})
if (vm.$route.query['node']) {
nodesInitial.push(vm.$route.query.node)
}
const platformId = vm.$route.query['platform'] || 1
const url = `/api/v1/assets/platforms/${platformId}/`
vm.platform = await vm.$axios.get(url)
const initial = {
labels: [],
is_active: true,
nodes: nodesInitial,
platform: parseInt(platformId),
protocols: vm.platform.protocols || []
}
vm.initial = Object.assign({}, initial, vm.initial)
vm.$set(vm.fieldsMeta.protocols.el, 'choices', (vm.platform['protocols'] || []))
vm.$set(vm.fieldsMeta.accounts.el, 'protocols', (vm.platform['protocols'] || []))
console.log('fieldsMeta: ', vm.fieldsMeta)
const hiddenCheckFields = ['protocols', 'domain']
for (const field of hiddenCheckFields) {
if (vm.platform[field + '_enabled'] === false) {
vm.fieldsMeta[field].hidden = () => true
}
}
}
export const Categories = [
{
title: '主机',