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' }},
       url: `/api/v1/assets/platforms/`,
       hasReset: false,
       hasDetailInMsg: false,
       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,7 +4,8 @@ import { JsonEditor } from '@/components/FormFields'
 import { assetFieldsMeta } from '@/views/assets/const'
 const assetMeta = assetFieldsMeta()
 
-export const fieldsMeta = {
+export const platformFieldsMeta = (vm) => {
+  return {
     automation: {
       initial: {
         ansible_config: ''
@@ -20,9 +21,6 @@ export const fieldsMeta = {
       fieldsMeta: {
         ansible_config: {
           component: JsonEditor,
-        el: {
-          value: '{}'
-        },
           hidden: (formValue) => !formValue['ansible_enabled']
         },
         ping_method: {},
@@ -44,8 +42,8 @@ export const fieldsMeta = {
         disabled: true
       },
       hidden: (formValue) => {
-      if (formValue.category_type[0] === undefined) {
+        if (formValue?.category_type?.[0] === undefined) {
-        formValue.category_type = this.initial.category_type
+          formValue.category_type = vm.initial.category_type
         }
       }
     },
@@ -72,4 +70,45 @@ export const fieldsMeta = {
       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'] }
+    })
+  }
 }