perf: update platform detail

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'])
+      await setAutomations(this)
-    },
-    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'] }
-        })
-      }
     }
   }
 }

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>
 

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: {
+      initial: {},
-        successUrl: { name: 'Settings', params: { activeMenu: 'Basic' }},
+      successUrl: { name: 'Settings', params: { activeMenu: 'Basic' }},
-        url: `/api/v1/assets/platforms/`,
+      url: `/api/v1/assets/platforms/`,
-        hasReset: false,
+      hasReset: false,
-        hasDetailInMsg: false,
+      hasDetailInMsg: false,
-        submitMethod: () => 'patch',
+      submitMethod: () => 'patch',
-        fields: [
+      fields: [['', this.showFields]],
-          ['', this.fields]
+      fieldsMeta: platformFieldsMeta(this)
-        ],
-        fieldsMeta
-      }
     }
   },
   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>

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
       }
     }

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 = {
+export const platformFieldsMeta = (vm) => {
-  automation: {
+  return {
-    initial: {
+    automation: {
-      ansible_config: ''
+      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']
       },
-      ping_method: {},
+      fields: [
-      gather_facts_method: {},
+        'ansible_enabled', 'ansible_config',
-      create_account_method: {},
+        'ping_enabled', 'ping_method',
-      change_password_method: {},
+        'gather_facts_enabled', 'gather_facts_method',
-      verify_account_method: {}
+        'create_account_enabled', 'create_account_method',
-    }
+        'change_password_enabled', 'change_password_method',
-  },
+        'verify_account_enabled', 'verify_account_method'
-  category_type: {
+      ],
-    type: 'cascader',
+      fieldsMeta: {
-    label: i18n.t('assets.Type'),
+        ansible_config: {
-    rules: [
+          component: JsonEditor,
-      rules.Required
+          hidden: (formValue) => !formValue['ansible_enabled']
-    ],
+        },
-    el: {
+        ping_method: {},
-      multiple: false,
+        gather_facts_method: {},
-      options: [],
+        create_account_method: {},
-      disabled: true
+        change_password_method: {},
-    },
+        verify_account_method: {}
-    hidden: (formValue) => {
-      if (formValue.category_type[0] === undefined) {
-        formValue.category_type = this.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']
+    category_type: {
-  },
+      type: 'cascader',
-  su_method: {
+      label: i18n.t('assets.Type'),
-    type: 'select',
+      rules: [
-    hidden: (form) => !form['su_enabled']
+        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'] }
+    })
   }
 }