perf: update platform detail

2025-08-31 14:38:02 +00:00 · 2022-10-08 10:19:49 +08:00
parent b19c79f48c
commit a908cc61c9
5 changed files with 148 additions and 126 deletions
--- a/src/views/assets/Platform/PlatformCreateUpdate.vue
+++ b/src/views/assets/Platform/PlatformCreateUpdate.vue
@@ -13,7 +13,7 @@

 <script>
 import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
-import { fieldsMeta } from './const'
+import { platformFieldsMeta, setAutomations } from './const'

 export default {
  name: 'PlatformCreateUpdate',
@@ -48,7 +48,7 @@ export default {
        ['自动化', ['automation']],
        [this.$t('common.Other'), ['comment']]
      ],
-      fieldsMeta,
+      fieldsMeta: platformFieldsMeta(this),
      url: `/api/v1/assets/platforms/`,
      cleanFormValue: (values) => {
        const category_type = values['category_type']
@@ -61,7 +61,8 @@ export default {
          obj['category_type'] = [obj['category'].value, obj['type'].value]
        }
        return obj
-      }
+      },
+      object: {}
    }
  },
  async mounted() {
@@ -89,6 +90,7 @@ export default {
      const type = this.$route.query.type
      const url = `/api/v1/assets/categories/constraints/?category=${category}&type=${type}`
      const constraints = await this.$axios.get(url)
+      this.object = constraints

      const fieldsCheck = ['protocols_enabled', 'domain_enabled', 'su_enabled']
      for (const field of fieldsCheck) {
@@ -105,45 +107,7 @@ export default {
        this.fieldsMeta.charset.hidden = () => true
      }

-      await this.setAutomations(constraints['automation'])
-    },
-    async setAutomations(automation) {
-      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 || {}
-      initial['ansible_enabled'] = automation['ansible_enabled']
-      initial['ansible_config'] = JSON.stringify(automation['ansible_config'])
-
-      for (const item of autoFields) {
-        const itemEnabledKey = item + '_enabled'
-        const itemMethodKey = item + '_method'
-        const itemEnabled = automation[itemEnabledKey]
-        // 设置 enableKey disabled 和 默认值
-        if (itemEnabled === false) {
-          initial[itemEnabledKey] = false
-          _.set(autoFieldsMeta, `${itemEnabledKey}.el.disabled`, true)
-        } else {
-          initial[itemEnabledKey] = true
-        }
-
-        // 设置 enableKey Hidden
-        _.set(autoFieldsMeta, `${itemEnabledKey}.hidden`, (formValue) => {
-          return !formValue['ansible_enabled']
-        })
-        // 设置 enableMethod Hidden
-        _.set(autoFieldsMeta, `${itemMethodKey}.hidden`, (formValue) => {
-          return !formValue[itemEnabledKey] || !formValue['ansible_enabled']
-        })
-        // 设置 method 类型和 options
-        _.set(autoFieldsMeta, `${itemMethodKey}.type`, 'select')
-        const methods = automation[itemMethodKey + 's'] || []
-        autoFieldsMeta[itemMethodKey].options = methods.map(method => {
-          return { value: method['id'], label: method['name'] }
-        })
-      }
+      await setAutomations(this)
    }
  }
 }
--- a/src/views/assets/Platform/PlatformDetail/Detail.vue
+++ b/src/views/assets/Platform/PlatformDetail/Detail.vue
@@ -6,7 +6,12 @@
    <el-col :md="10" :sm="24">
      <QuickActions type="primary" :actions="quickActions" />
    </el-col>
-    <PlatformDetailUpdateDialog v-if="visible" :visible.sync="visible" :fields="fields" />
+    <PlatformDetailUpdateDialog
+      v-if="visible"
+      :visible.sync="visible"
+      :show-fields="fields"
+      :object="object"
+    />
  </el-row>
 </template>

--- a/src/views/assets/Platform/PlatformDetail/PlatformDetailUpdateDialog.vue
+++ b/src/views/assets/Platform/PlatformDetail/PlatformDetailUpdateDialog.vue
@@ -1,6 +1,5 @@
 <template>
  <Dialog
-    v-if="iVisible"
    :title="$tc('common.Update')"
    :visible.sync="iVisible"
    width="60%"
@@ -8,14 +7,14 @@
    :show-cancel="false"
    :show-confirm="false"
  >
-    <GenericCreateUpdateForm v-bind="config" @submitSuccess="submitSuccess" />
+    <GenericCreateUpdateForm v-bind="$data" @submitSuccess="submitSuccess" />
  </Dialog>
 </template>

 <script>
 import Dialog from '@/components/Dialog'
 import { GenericCreateUpdateForm } from '@/layout/components'
-import { fieldsMeta } from '../const'
+import { platformFieldsMeta, setAutomations } from '../const'

 export default {
  components: {
@@ -27,24 +26,25 @@ export default {
      type: Boolean,
      default: false
    },
-    fields: {
+    showFields: {
      type: Array,
      default: () => []
+    },
+    object: {
+      type: Object,
+      default: () => {}
    }
  },
  data() {
    return {
-      config: {
-        successUrl: { name: 'Settings', params: { activeMenu: 'Basic' }},
-        url: `/api/v1/assets/platforms/`,
-        hasReset: false,
-        hasDetailInMsg: false,
-        submitMethod: () => 'patch',
-        fields: [
-          ['', this.fields]
-        ],
-        fieldsMeta
-      }
+      initial: {},
+      successUrl: { name: 'Settings', params: { activeMenu: 'Basic' }},
+      url: `/api/v1/assets/platforms/`,
+      hasReset: false,
+      hasDetailInMsg: false,
+      submitMethod: () => 'patch',
+      fields: [['', this.showFields]],
+      fieldsMeta: platformFieldsMeta(this)
    }
  },
  computed: {
@@ -56,6 +56,7 @@ export default {
    }
  },
  created() {
+    setAutomations(this)
  },
  methods: {
    submitSuccess() {
@@ -69,5 +70,4 @@ export default {
  ::v-deep .el-dialog .el-dialog__body {
    padding: 0 20px;
  }
-
 </style>
--- a/src/views/assets/Platform/PlatformDetail/index.vue
+++ b/src/views/assets/Platform/PlatformDetail/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <GenericDetailPage :actions="actions" :object.sync="TaskDetail" :active-menu.sync="config.activeMenu" v-bind="config" v-on="$listeners">
+  <GenericDetailPage :object.sync="TaskDetail" :active-menu.sync="config.activeMenu" v-bind="config" v-on="$listeners">
    <keep-alive>
      <component :is="config.activeMenu" :object="TaskDetail" />
    </keep-alive>
@@ -18,8 +18,7 @@ export default {
  data() {
    return {
      TaskDetail: {},
-      actions: {
-      },
+      actions: {},
      config: {
        title: this.$t('assets.PlatformDetail'),
        activeMenu: 'Detail',
@@ -29,6 +28,21 @@ export default {
            name: 'Detail'
          }
        ],
+        actions: {
+          updateCallback: () => {
+            const { type, category } = this.TaskDetail
+            this.$router.push({
+              name: 'PlatformCreate',
+              params: {
+                id: this.$route.params.id
+              },
+              query: {
+                type: type.value,
+                category: category.value
+              }
+            })
+          }
+        },
        hasRightSide: this.$route.params.id > 7
      }
    }
--- a/src/views/assets/Platform/const.js
+++ b/src/views/assets/Platform/const.js
@@ -4,72 +4,111 @@ import { JsonEditor } from '@/components/FormFields'
 import { assetFieldsMeta } from '@/views/assets/const'
 const assetMeta = assetFieldsMeta()

-export const fieldsMeta = {
-  automation: {
-    initial: {
-      ansible_config: ''
-    },
-    fields: [
-      'ansible_enabled', 'ansible_config',
-      '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: {
-      ansible_config: {
-        component: JsonEditor,
-        el: {
-          value: '{}'
-        },
-        hidden: (formValue) => !formValue['ansible_enabled']
+export const platformFieldsMeta = (vm) => {
+  return {
+    automation: {
+      initial: {
+        ansible_config: ''
      },
-      ping_method: {},
-      gather_facts_method: {},
-      create_account_method: {},
-      change_password_method: {},
-      verify_account_method: {}
-    }
-  },
-  category_type: {
-    type: 'cascader',
-    label: i18n.t('assets.Type'),
-    rules: [
-      rules.Required
-    ],
-    el: {
-      multiple: false,
-      options: [],
-      disabled: true
-    },
-    hidden: (formValue) => {
-      if (formValue.category_type[0] === undefined) {
-        formValue.category_type = this.initial.category_type
+      fields: [
+        'ansible_enabled', 'ansible_config',
+        '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: {
+        ansible_config: {
+          component: JsonEditor,
+          hidden: (formValue) => !formValue['ansible_enabled']
+        },
+        ping_method: {},
+        gather_facts_method: {},
+        create_account_method: {},
+        change_password_method: {},
+        verify_account_method: {}
      }
-    }
-  },
-  charset: {},
-  protocols_enabled: {
-    el: {
-      disabled: false
-    }
-  },
-  domain_enabled: {
-    el: {
-      disabled: false
-    }
-  },
-  protocols: {
-    label: i18n.t('assets.SupportedProtocol'),
-    ...assetMeta.protocols,
-    el: {
-      choices: []
    },
-    hidden: (formValue) => !formValue['protocols_enabled']
-  },
-  su_method: {
-    type: 'select',
-    hidden: (form) => !form['su_enabled']
+    category_type: {
+      type: 'cascader',
+      label: i18n.t('assets.Type'),
+      rules: [
+        rules.Required
+      ],
+      el: {
+        multiple: false,
+        options: [],
+        disabled: true
+      },
+      hidden: (formValue) => {
+        if (formValue?.category_type?.[0] === undefined) {
+          formValue.category_type = vm.initial.category_type
+        }
+      }
+    },
+    charset: {},
+    protocols_enabled: {
+      el: {
+        disabled: false
+      }
+    },
+    domain_enabled: {
+      el: {
+        disabled: false
+      }
+    },
+    protocols: {
+      label: i18n.t('assets.SupportedProtocol'),
+      ...assetMeta.protocols,
+      el: {
+        choices: []
+      },
+      hidden: (formValue) => !formValue['protocols_enabled']
+    },
+    su_method: {
+      type: 'select',
+      hidden: (form) => !form['su_enabled']
+    }
+  }
+}
+
+export const setAutomations = (vm) => {
+  const automation = vm.object.automation || {}
+  const autoFieldsMeta = vm.fieldsMeta.automation.fieldsMeta
+  const autoFields = vm.fieldsMeta.automation.fields
+    .filter(item => item.endsWith('_method'))
+    .map(item => item.replace('_method', ''))
+
+  const initial = vm.initial.automation || {}
+  initial['ansible_enabled'] = automation['ansible_enabled']
+  initial['ansible_config'] = JSON.stringify(automation['ansible_config'])
+
+  for (const item of autoFields) {
+    const itemEnabledKey = item + '_enabled'
+    const itemMethodKey = item + '_method'
+    const itemEnabled = automation[itemEnabledKey]
+    // 设置 enableKey disabled 和 默认值
+    if (itemEnabled === false) {
+      initial[itemEnabledKey] = false
+      _.set(autoFieldsMeta, `${itemEnabledKey}.el.disabled`, true)
+    } else {
+      initial[itemEnabledKey] = true
+    }
+
+    // 设置 enableKey Hidden
+    _.set(autoFieldsMeta, `${itemEnabledKey}.hidden`, (formValue) => {
+      return !formValue['ansible_enabled']
+    })
+    // 设置 enableMethod Hidden
+    _.set(autoFieldsMeta, `${itemMethodKey}.hidden`, (formValue) => {
+      return !formValue[itemEnabledKey] || !formValue['ansible_enabled']
+    })
+    // 设置 method 类型和 options
+    _.set(autoFieldsMeta, `${itemMethodKey}.type`, 'select')
+    const methods = automation[itemMethodKey + 's'] || []
+    autoFieldsMeta[itemMethodKey].options = methods.map(method => {
+      return { value: method['id'], label: method['name'] }
+    })
  }
 }