perf: 修改 platform 的创建

2026-01-29 21:28:52 +00:00 · 2022-09-15 16:46:04 +08:00
parent af00517102
commit f50445032f
4 changed files with 109 additions and 59 deletions
--- a/src/components/AutoDataForm/utils.js
+++ b/src/components/AutoDataForm/utils.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Select2 from '@/components/FormFields/Select2'
 import ObjectSelect2 from '@/components/FormFields/NestedObjectSelect2'
+import NestedField from '@/components/AutoDataForm/components/NestedField'
 import Swicher from '@/components/FormFields/Swicher'
 import rules from '@/components/DataForm/rules'
 import { assignIfNot } from '@/utils/common'
@@ -70,7 +71,12 @@ export class FormFieldGenerator {
        field.component = ObjectSelect2
        break
      case 'nested object':
-        field.component = ObjectSelect2
+        type = 'nestedField'
+        field.component = NestedField
+        field.label = ''
+        field.labelWidth = 0
+        field.el.fields = this.generateNestFields(field, fieldMeta, fieldRemoteMeta)
+        field.el.errors = {}
        break
      default:
        type = 'input'
@@ -133,7 +139,7 @@ export class FormFieldGenerator {
    const remoteFieldMeta = remoteFieldsMeta[name] || {}
    const fieldMeta = fieldsMeta[name] || {}
    field.label = remoteFieldMeta.label
-    field.helpText = remoteFieldMeta.help_text
+    field.helpText = remoteFieldMeta['help_text']
    field = this.generateFieldByType(remoteFieldMeta.type, field, fieldMeta, remoteFieldMeta)
    field = this.generateFieldByName(name, field)
    field = this.generateFieldByOther(field, fieldMeta, remoteFieldMeta)
--- a/src/components/FormFields/AssetAccounts.vue
+++ b/src/components/FormFields/AssetAccounts.vue
@@ -16,7 +16,7 @@
    </el-table>
    <div class="actions">
      <el-button size="mini" type="primary" @click="onAddClick">添加</el-button>
-      <el-button size="mini" type="success" @click="onAddClick">模版添加</el-button>
+      <el-button size="mini" type="success" @click="onAddFromTemplateClick">模版添加</el-button>
    </div>
    <Dialog
      v-if="visible"
@@ -34,16 +34,29 @@
        @edit="editAccount"
      />
    </Dialog>
+    <Dialog
+      v-if="templateTable.visible"
+      :title="'选择模版'"
+      :visible.sync="templateTable.visible"
+      :destroy-on-close="true"
+      :show-cancel="false"
+      :show-confirm="false"
+      width="70%"
+    >
+      <ListTable v-bind="templateTable" />
+    </Dialog>
  </div>
 </template>

 <script>
 import Dialog from '@/components/Dialog'
 import AccountCreateForm from '@/components/AccountCreateForm'
+import ListTable from '@/components/ListTable'
 export default {
  name: 'AssetAccounts',
  components: {
    Dialog,
+    ListTable,
    AccountCreateForm
  },
  props: {
@@ -61,7 +74,16 @@ export default {
      visible: false,
      accounts: [],
      account: {},
-      initial: false
+      initial: false,
+      templateTable: {
+        visible: false,
+        tableConfig: {
+          url: '/api/v1/assets/account-templates/',
+          columns: ['name', 'username', 'privileged', 'actions']
+        },
+        headerActions: {
+        }
+      }
    }
  },
  watch: {
@@ -108,6 +130,9 @@ export default {
      setTimeout(() => {
        this.visible = true
      })
+    },
+    onAddFromTemplateClick() {
+      this.templateTable.visible = true
    }
  }
 }
--- a/src/views/assets/Platform/PlatformCreateUpdate.vue
+++ b/src/views/assets/Platform/PlatformCreateUpdate.vue
@@ -31,35 +31,45 @@ export default {
        name: '',
        port: 0
      },
-      opsItems: [
-        'gather_facts_enabled', 'create_account_enabled',
-        'change_password_enabled', 'verify_account_enabled',
-        'gather_accounts_enabled', 'su_enabled'
-      ],
      initial: {
        comment: '',
        charset: 'utf8',
-        category_type: ['host', 'linux']
+        category_type: ['host', 'linux'],
+        automation: {
+        }
      },
      fields: [
        [this.$t('common.Basic'), [
          'name', 'category_type'
        ]],
-        [this.$t('assets.Asset'), [
-          'charset', 'domain_enabled',
+        ['配置', [
          'protocols_enabled', 'protocols',
-          'gather_facts_enabled', 'gather_facts_method'
+          'charset', 'domain_enabled', 'brand',
+          'su_enabled', 'su_method'
        ]],
-        [this.$t('assets.Account'), [
-          'su_enabled', 'su_method',
-          'create_account_enabled', 'create_account_method',
-          'verify_account_enabled', 'verify_account_method',
-          'change_password_enabled', 'change_password_method',
-          'gather_accounts_enabled', 'gather_accounts_method'
+        ['自动化', [
+          'automation'
        ]],
        [this.$t('common.Other'), ['comment']]
      ],
      fieldsMeta: {
+        automation: {
+          initial: {},
+          fields: [
+            'ping_enabled', 'ping_method',
+            'gather_facts_enabled', 'gather_facts_method',
+            'create_account_enabled', 'create_account_method',
+            'change_password_enabled', 'change_password_method',
+            'verify_account_enabled', 'verify_account_method'
+          ],
+          fieldsMeta: {
+            ping_method: {},
+            gather_facts_method: {},
+            create_account_method: {},
+            change_password_method: {},
+            verify_account_method: {}
+          }
+        },
        category_type: {
          type: 'cascader',
          label: this.$t('assets.Type'),
@@ -95,14 +105,6 @@ export default {
          },
          hidden: (formValue) => !formValue['protocols_enabled']
        },
-        verify_account_method: {
-          type: 'select',
-          options: []
-        },
-        change_password_method: {
-          type: 'select',
-          options: []
-        },
        su_method: {
          type: 'select'
        }
@@ -126,7 +128,6 @@ export default {
    try {
      await this.setCategories()
      await this.setConstraints()
-      await this.setOpsMethods()
    } finally {
      this.loading = false
    }
@@ -140,6 +141,7 @@ export default {
      if (category && type) {
        this.initial.category_type = [category, type]
      }
+      this.url += `?category=${category}&type=${type}`
      return new Promise((resolve, reject) => resolve(true))
    },
    async setConstraints() {
@@ -148,39 +150,48 @@ export default {
      const url = `/api/v1/assets/platforms/type-constraints/?category=${category}&type=${type}`
      const constraints = await this.$axios.get(url)

-      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
-
-      const domainDisabled = constraints['domain_enabled'] === false
-      this.fieldsMeta.domain_enabled.el.disabled = domainDisabled
-      this.initial.domain_enabled = !domainDisabled
-
-      for (const itemOk of this.opsItems) {
-        const itemConstraint = constraints[itemOk]
-        const itemMethod = itemOk.replace('_enabled', '_method')
-        if (itemConstraint === false) {
-          _.set(this.fieldsMeta, `${itemOk}.el.disabled`, true)
-        }
-        if (!this.fieldsMeta[itemMethod]?.hidden) {
-          _.set(this.fieldsMeta, `${itemMethod}.hidden`, (formValue) => !formValue[itemOk])
-        }
-        // set default value
-        if (this.initial[itemOk] === undefined) {
-          this.initial[itemOk] = false
-        }
-        if (_.get(this.fieldsMeta, `${itemMethod}.type`) === undefined) {
-          _.set(this.fieldsMeta, `${itemMethod}.type`, 'select')
+      const fieldsCheck = ['protocols_enabled', 'domain_enabled', 'su_enabled']
+      for (const field of fieldsCheck) {
+        let disabled = constraints[field] === false
+        if (field === 'protocols_enabled') {
+          disabled = disabled && constraints['protocols'].length === 0
+          this.initial[field] = !disabled
        }
+        _.set(this.fieldsMeta, `${field}.el.disabled`, disabled)
      }
+
+      this.fieldsMeta.protocols.el.choices = constraints['protocols'] || []
+      await this.setOpsMethods(constraints)
    },
-    async setOpsMethods() {
+    async setOpsMethods(constraints) {
      const category = this.$route.query.category
      const type = this.$route.query.type
-      const allMethods = await this.$axios.get('/api/v1/assets/platforms/ops-methods/')
-      for (const itemOk of this.opsItems) {
-        const item = itemOk.replace('_enabled', '')
+      const allMethods = await this.$axios.get('/api/v1/assets/platforms/ops-methods/') || []
+      const autoFieldsMeta = this.fieldsMeta.automation.fieldsMeta
+      const autoFields = this.fieldsMeta.automation.fields
+        .filter(item => item.endsWith('_method'))
+        .map(item => item.replace('_method', ''))
+
+      const initial = this.initial.automation || {}
+      for (const item of autoFields) {
+        const itemEnabled = item + '_enabled'
+        const itemMethod = item + '_method'
+        const itemConstraint = constraints[itemEnabled]
+        // 设置隐藏和disabled
+        if (itemConstraint === false) {
+          _.set(autoFieldsMeta, `${itemEnabled}.el.disabled`, true)
+        }
+        if (!autoFieldsMeta[itemMethod]?.hidden) {
+          _.set(autoFieldsMeta, `${itemMethod}.hidden`, (formValue) => !formValue[itemEnabled])
+        }
+        // 设置默认值
+        if (initial[itemEnabled] === undefined) {
+          initial[itemEnabled] = false
+        }
+        // 设置 method 类型和 options
+        if (_.get(autoFieldsMeta, `${itemMethod}.type`) === undefined) {
+          _.set(autoFieldsMeta, `${itemMethod}.type`, 'select')
+        }
        const methods = allMethods.filter(method => {
          const ok = method['method'] === item && method['category'] === category
          const tpOk = method['type'].indexOf(type) > -1 ||
@@ -190,17 +201,24 @@ export default {
          return { value: method['id'], label: method['name'] }
        })
        if (methods.length > 0) {
-          this.fieldsMeta[`${itemOk.replace('_enabled', '_method')}`].options = methods
+          const itemMethod = itemEnabled.replace('_enabled', '_method')
+          autoFieldsMeta[itemMethod].options = methods
        }
      }
+      console.log('Automation fields meta: ', this.fieldsMeta.automation)
    }
  }
 }
 </script>

 <style lang='scss' scoped>
-.platform-form >>> .el-form-item {
-  .el-select:not(.prepend) {
+.platform-form >>> {
+  .el-form-item {
+    .el-select:not(.prepend) {
+      width: 100%;
+    }
+  }
+  .el-cascader {
    width: 100%;
  }
 }
--- a/src/views/assets/const.js
+++ b/src/views/assets/const.js
@@ -101,6 +101,7 @@ export const setPlatformInitial = async(vm) => {
  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) {