perf: 修改 v3

This commit is contained in:
ibuler 2022-09-01 15:06:39 +08:00
parent 22738982cb
commit a9e38b2be6
11 changed files with 50 additions and 126 deletions

View File

@ -1,7 +1,5 @@
<template>
<div>
<AutoDataForm v-bind="$data" @submit="confirm" />
</div>
<AutoDataForm v-bind="$data" @submit="confirm" />
</template>
<script>
@ -53,7 +51,8 @@ export default {
},
methods: {
confirm(form) {
if (this.account && this.account._id) {
console.log('Account form: accout is: ', this.account)
if (this.account) {
this.$emit('edit', form)
} else {
this.$emit('add', form)

View File

@ -1,5 +1,12 @@
<template>
<DataForm ref="dataForm" v-loading="loading" :fields="totalFields" :form="iForm" v-bind="$attrs" v-on="$listeners">
<DataForm
ref="dataForm"
v-loading="loading"
:fields="totalFields"
:form="iForm"
v-bind="$attrs"
v-on="$listeners"
>
<FormGroupHeader
v-for="(group, i) in groups"
:slot="'id:'+group.name"

View File

@ -15,10 +15,10 @@ export class FormFieldGenerator {
case 'choice':
if (!fieldRemoteMeta.read_only) {
field.options = fieldRemoteMeta.choices.map(v => {
return { label: v.display_name, value: v.value }
return { label: v.label, value: v.value }
})
// 因为现在的 detail 返回的 choice 是一个对象了 {label: '', value: ''}
if (type === 'display_choice') {
if (type === 'well_choice') {
field.options = field.options.map(v => {
v.value = { value: v.value }
return v

View File

@ -71,12 +71,12 @@ export default {
option.children = field.choices.map(item => {
if (typeof (item.value) === 'boolean') {
if (item.value) {
return { label: item.display_name, value: 'True' }
return { label: item.label, value: 'True' }
} else {
return { label: item.display_name, value: 'False' }
return { label: item.label, value: 'False' }
}
}
return { label: item.display_name, value: item.value }
return { label: item.label, value: item.value }
})
}
if (field.type === 'boolean') {

View File

@ -193,12 +193,12 @@ export default {
col.filters = column.choices.map(item => {
if (typeof (item.value) === 'boolean') {
if (item.value) {
return { text: item['display_name'], value: 'True' }
return { text: item['label'], value: 'True' }
} else {
return { text: item['display_name'], value: 'False' }
return { text: item['label'], value: 'False' }
}
}
return { text: item['display_name'], value: item.value }
return { text: item['label'], value: item.value }
})
col.sortable = false
col['column-key'] = col.prop

View File

@ -2,15 +2,20 @@
<div class="accounts">
<el-table :data="accounts" style="width: 100%">
<el-table-column prop="username" label="用户名" width="180" />
<el-table-column prop="type" label="类型" />
<el-table-column prop="privileged" label="特权账号">
<template slot-scope="scope">
<i class="fa text-primary" :class="scope.row['privileged'] ? 'fa-check' : ''" />
</template>
</el-table-column>
<el-table-column fixed="right" align="right" label="操作" width="135" class-name="buttons">
<template slot-scope="scope">
<el-button type="danger" icon="el-icon-minus" size="mini" @click="removeAccount(scope.row)" />
<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row)" />
<el-button type="primary" icon="el-icon-edit" size="mini" @click="onEditClick(scope.row)" />
</template>
</el-table-column>
</el-table>
<el-button size="mini" type="primary" @click="showAddDialog">添加</el-button>
<el-button size="mini" type="primary" @click="onAddClick">添加</el-button>
<el-button size="mini" type="success" @click="onAddClick">模版添加</el-button>
<Dialog
v-if="visible"
:title="this.$tc('assets.AddAccount')"
@ -53,7 +58,7 @@ export default {
return {
visible: false,
accounts: [],
account: null,
account: {},
initial: false
}
},
@ -73,7 +78,10 @@ export default {
},
methods: {
addAccount(account) {
account._id = this.accounts.length + 1
const i = this.accounts.findIndex(item => item.username === account.username)
if (i !== -1) {
this.accounts.splice(i, 1)
}
this.accounts.push(account)
this.visible = false
},
@ -82,17 +90,22 @@ export default {
return item._id !== account._id
})
},
editAccount(account) {
this.accounts.splice(account._id, 1, account)
editAccount(form) {
const i = this.accounts.findIndex(item => item.username === this.account.username)
this.accounts.splice(i, 1, form)
this.visible = false
},
showEditDialog(account) {
onEditClick(account) {
this.account = account
this.visible = true
setTimeout(() => {
this.visible = true
})
},
showAddDialog() {
onAddClick() {
this.account = null
this.visible = true
setTimeout(() => {
this.visible = true
})
}
}
}

View File

@ -44,7 +44,6 @@ export default {
get() {
const value = this.objectsToValues(this.value)
console.log('Nest get ivalue: ', value, 'Value: ', this.value)
console.log('Attrs: ', this.$attrs)
return value
}
}

View File

@ -15,13 +15,6 @@ export default [
component: () => import('@/views/assets/Asset/AssetList/index.vue'),
meta: { title: i18n.t('route.AssetList') }
},
{
path: 'create',
name: 'AssetCreate',
component: () => import('@/views/assets/Asset/AssetCreateUpdate.vue'),
hidden: true,
meta: { title: i18n.t('route.AssetCreate') }
},
{
path: ':id',
name: 'AssetDetail',
@ -29,13 +22,6 @@ export default [
hidden: true,
meta: { title: i18n.t('route.AssetDetail') }
},
{
path: ':id/update',
name: 'AssetUpdate',
component: () => import('@/views/assets/Asset/AssetCreateUpdate.vue'),
hidden: true,
meta: { title: i18n.t('route.AssetUpdate') }
},
{
path: 'detail/:id/update',
name: 'AssetMoreInformationEdit',

View File

@ -1,61 +0,0 @@
<template>
<GenericCreateUpdatePage v-bind="$data" />
</template>
<script>
import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
import { assetFieldsMeta } from '@/views/assets/const'
export default {
name: 'AssetCreateUpdate',
components: {
GenericCreateUpdatePage
},
data() {
return {
initial: {},
fields: [
[this.$t('common.Basic'), ['name', 'ip', 'platform', 'domain']]
// [this.$t('assets.Protocol'), ['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(),
url: '/api/v1/assets/assets/',
createSuccessNextRoute: { name: 'AssetDetail', query: { 'activeTab': 'Account' }},
hasDetailInMsg: false
}
},
mounted() {
this.setPlatformInitial()
},
methods: {
async setPlatformInitial() {
const nodesInitial = []
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 = {
is_active: true,
platform: parseInt(platformId),
protocols: this.platform.protocols_default || ['ssh/22'],
nodes: nodesInitial,
domain: this.platform['domain_default']
}
const limits = this.platform['type_constraint']
this.fieldsMeta.protocols.el.choices = limits['protocols']
this.initial = initial
this.loading = false
}
}
}
</script>
<style>
</style>

View File

@ -16,7 +16,9 @@ export default {
loading: true,
platform: {},
initial: {
labels: []
labels: [],
is_active: true,
nodes: []
},
fields: [
[this.$t('common.Basic'), ['name', 'ip', 'platform', 'domain']],
@ -45,15 +47,15 @@ export default {
const url = `/api/v1/assets/platforms/${platformId}/`
this.platform = await this.$axios.get(url)
const initial = {
is_active: true,
platform: parseInt(platformId),
protocols: this.platform.protocols_default,
protocols: this.platform.protocols,
nodes: nodesInitial,
domain: this.platform.domain_default
}
Object.assign(this.initial, initial)
const constraints = this.platform['type_constraints']
this.fieldsMeta.protocols.el.choices = constraints['protocols']
this.initial = initial
this.loading = false
}
}

View File

@ -57,9 +57,6 @@ export default {
[this.$t('assets.Protocol'), [
'protocols_enabled', 'protocols'
]],
[this.$t('assets.Domain'), [
'domain_enabled', 'domain_default'
]],
[this.$t('assets.Account'), [
'su_enabled', 'su_method',
'verify_account_enabled', 'verify_account_method',
@ -103,15 +100,6 @@ export default {
},
hidden: (formValue) => !formValue['protocols_enabled']
},
domain_enabled: {
el: {
disabled: false
}
},
domain_default: {
...assetMeta.domain,
hidden: (formValue) => !formValue['domain_enabled']
},
verify_account_method: {
hidden: (formValue) => {
return !formValue['verify_account_enabled']
@ -119,12 +107,6 @@ export default {
type: 'select',
options: []
},
create_account_method: {
hidden: (formValue) => !formValue['create_account_enabled'],
type: 'select',
options: [],
el: {}
},
change_password_method: {
hidden: (formValue) => !formValue['change_password_enabled'],
type: 'select',
@ -175,21 +157,18 @@ export default {
const type = this.$route.query.type
const url = `/api/v1/assets/platforms/type-constraints/?category=${category}&type=${type}`
const constraints = await this.$axios.get(url)
const hasDomain = constraints['has_domain']
this.fieldsMeta.domain_enabled.el.disabled = !hasDomain
const protocols = constraints['protocols'] || []
this.fieldsMeta.protocols_enabled.el.disabled = protocols.length === 0
this.fieldsMeta.protocols.el.choices = protocols
this.initial.protocols_enabled = !!protocols.length
this.initial.domain_enabled = hasDomain
},
async setOpsMethods() {
const category = this.$route.query.category
const type = this.$route.query.type
const allMethods = await this.$axios.get('/api/v1/assets/platforms/ops-methods/')
const items = ['verify_account', 'change_password', 'create_account']
const items = ['verify_account', 'change_password']
for (const item of items) {
const methods = allMethods.filter(method => {
const ok = method['method'] === item && method['category'] === category