feat: 平台详情增加快速更新模块

src/components/FormFields/JsonEditor.vue

@@ -18,7 +18,7 @@ export default {
   components: { JsonEditor },
   props: {
     value: {
-      type: String,
+      type: [String, Object],
       default: () => ''
     }
   },
@@ -29,7 +29,7 @@ export default {
     }
   },
   created() {
-    this.resultInfo = JSON.parse(this.value)
+    this.resultInfo = typeof this.value === 'string' ? JSON.parse(this.value) : this.value
   },
   methods: {
     // 数据改变

src/i18n/langs/en.json

@@ -188,6 +188,11 @@
     "Pending": "Pending",
     "Platform": "Platform",
     "PlatformDetail": "Platform detail",
+    "DomainEnabled": "Enable domain",
+    "ProtocolsEnabled": "Enable protocol",
+    "AccountEnabled": "Enable account switching",
+    "AutoEnabled": "Enable Automation",
+    "SupportedProtocol": "Supported protocol",
     "PriorityHelpMessage": "1-100, High level will be using login asset as default, if user was granted more than 2 system user",
     "Protocol": "Protocol",
     "Protocols": "Protocols",

src/i18n/langs/ja.json

@@ -191,6 +191,11 @@
     "Pending": "待つ",
     "Platform": "システムプラットフォーム",
     "PlatformDetail": "プラットフォームの詳細",
+    "DomainEnabled": "ドメインを有効化",
+    "ProtocolsEnabled": "プロトコルの有効化",
+    "AccountEnabled": "アカウントを有効にする",
+    "AutoEnabled": "自動化の有効化",
+    "SupportedProtocol": "サポートされるプロトコル",
     "PriorityHelpMessage": "1-100、1最低優先度、100最高優先度。複数のユーザーを許可する場合、優先度の高いシステムユーザーはデフォルトのログインユーザーになります",
     "Protocol": "プロトコル",
     "Protocols": "プロトコルグループ",

src/i18n/langs/zh.json

@@ -192,6 +192,11 @@
     "Pending": "等待",
     "Platform": "系统平台",
     "PlatformDetail": "平台详情",
+    "DomainEnabled": "启用网域",
+    "ProtocolsEnabled": "启用协议",
+    "AccountEnabled": "启用切换账号",
+    "AutoEnabled": "启用自动化",
+    "SupportedProtocol": "支持的协议",
     "PriorityHelpMessage": "1-100, 1最低优先级，100最高优先级。授权多个用户时，高优先级的系统用户将会作为默认登录用户",
     "Protocol": "协议",
     "Protocols": "协议",

src/router/console/assets.js

@@ -278,7 +278,7 @@ export default [
       },
       {
         path: ':id',
-        component: () => import('@/views/assets/Platform/PlatformDetail.vue'), // Parent router-view
+        component: () => import('@/views/assets/Platform/PlatformDetail'), // Parent router-view
         name: 'PlatformDetail',
         hidden: true,
         meta: { title: i18n.t('route.PlatformDetail') }

src/views/assets/Platform/Detail.vue

@@ -1,58 +0,0 @@
-<template>
-  <el-row :gutter="20">
-    <el-col :md="14" :sm="24">
-      <DetailCard :items="detailCardItems" />
-    </el-col>
-    <el-col :md="10" :sm="24" />
-  </el-row>
-</template>
-
-<script>
-import DetailCard from '@/components/DetailCard'
-export default {
-  name: 'Detail',
-  components: {
-    DetailCard
-  },
-  props: {
-    object: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-    }
-  },
-  computed: {
-    detailCardItems() {
-      return [
-        {
-          key: this.$t('assets.Name'),
-          value: this.object.name
-        },
-        {
-          key: this.$t('assets.BasePlatform'),
-          value: this.object.base
-        },
-        {
-          key: this.$t('assets.Charset'),
-          value: this.object.charset
-        },
-        {
-          key: this.$t('assets.Meta'),
-          value: JSON.stringify(this.object.meta)
-        },
-        {
-          key: this.$t('assets.Comment'),
-          value: this.object.comment
-        }
-      ]
-    }
-  }
-}
-</script>
-
-<style lang='less' scoped>
-
-</style>

src/views/assets/Platform/PlatformCreateUpdate.vue

@@ -13,9 +13,7 @@
 
 <script>
 import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
-import rules from '@/components/DataForm/rules'
+import { fieldsMeta } from './const'
-import { JsonEditor } from '@/components/FormFields'
-import { assetFieldsMeta } from '@/views/assets/const'
 
 export default {
   name: 'PlatformCreateUpdate',
@@ -23,7 +21,6 @@ export default {
     GenericCreateUpdatePage
   },
   data() {
-    const assetMeta = assetFieldsMeta()
     return {
       loading: true,
       showDialog: false,
@@ -51,70 +48,7 @@ export default {
         ['自动化', ['automation']],
         [this.$t('common.Other'), ['comment']]
       ],
-      fieldsMeta: {
+      fieldsMeta,
-        automation: {
-          initial: {},
-          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: {}
-          }
-        },
-        category_type: {
-          type: 'cascader',
-          label: this.$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
-            }
-          }
-        },
-        charset: {},
-        protocols_enabled: {
-          el: {
-            disabled: false
-          }
-        },
-        domain_enabled: {
-          el: {
-            disabled: false
-          }
-        },
-        protocols: {
-          label: '支持的协议',
-          ...assetMeta.protocols,
-          el: {
-            choices: []
-          },
-          hidden: (formValue) => !formValue['protocols_enabled']
-        },
-        su_method: {
-          type: 'select',
-          hidden: (form) => !form['su_enabled']
-        }
-      },
       url: `/api/v1/assets/platforms/`,
       cleanFormValue: (values) => {
         const category_type = values['category_type']

src/views/assets/Platform/PlatformDetail/Detail.vue

@@ -0,0 +1,121 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :md="14" :sm="24">
+      <DetailCard :items="detailCardItems" />
+    </el-col>
+    <el-col :md="10" :sm="24">
+      <QuickActions type="primary" :actions="quickActions" />
+    </el-col>
+    <PlatformDetailUpdateDialog v-if="visible" :visible.sync="visible" :fields="fields" />
+  </el-row>
+</template>
+
+<script>
+import DetailCard from '@/components/DetailCard'
+import QuickActions from '@/components/QuickActions'
+import PlatformDetailUpdateDialog from './PlatformDetailUpdateDialog'
+
+export default {
+  name: 'Detail',
+  components: {
+    DetailCard,
+    QuickActions,
+    PlatformDetailUpdateDialog
+  },
+  props: {
+    object: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    const myFields = {
+      AccountEnabled: ['su_enabled', 'su_method'],
+      ProtocolsEnabled: ['protocols_enabled', 'protocols'],
+      AutoEnabled: ['automation']
+    }
+
+    return {
+      visible: false,
+      fields: ['domain_enabled'],
+      quickActions: this.setQuickActions(myFields)
+    }
+  },
+  computed: {
+    detailCardItems() {
+      return [
+        {
+          key: this.$t('assets.Name'),
+          value: this.object.name
+        },
+        {
+          key: this.$t('assets.BasePlatform'),
+          value: this.object.base
+        },
+        {
+          key: this.$t('assets.Charset'),
+          value: this.object.charset
+        },
+        {
+          key: this.$t('assets.Meta'),
+          value: JSON.stringify(this.object.meta)
+        },
+        {
+          key: this.$t('assets.Comment'),
+          value: this.object.comment
+        }
+      ]
+    }
+  },
+  methods: {
+    setQuickActions(fields = []) {
+      const vm = this
+      const { object } = this
+      const quickActions = [
+        {
+          title: this.$t('assets.DomainEnabled'),
+          type: 'switcher',
+          attrs: {
+            label: this.$t('common.Update'),
+            model: object['domain_enabled'],
+            disabled: (object.internal || !vm.$hasPerm('assets.change_platform'))
+          },
+          callbacks: Object.freeze({
+            change: (val) => {
+              const data = { domain_enabled: val }
+              this.$axios.patch(
+                `/api/v1/assets/platforms/${this.object.id}/`, data).then(res => {
+                this.$message.success(this.$t('common.updateSuccessMsg'))
+              })
+            }
+          })
+        }
+      ]
+
+      for (const [key, value] of Object.entries(fields)) {
+        const option = {
+          title: this.$t(`assets.${key}`),
+          attrs: {
+            type: 'primary',
+            label: this.$t('common.Update'),
+            disabled: (object.internal || !vm.$hasPerm('assets.change_platform'))
+          },
+          callbacks: Object.freeze({
+            click: () => {
+              this.fields = value
+              this.visible = !this.visible
+            }
+          })
+        }
+        quickActions.push(option)
+      }
+
+      return quickActions
+    }
+  }
+}
+</script>
+
+<style lang='less' scoped>
+
+</style>

src/views/assets/Platform/PlatformDetail/PlatformDetailUpdateDialog.vue

@@ -0,0 +1,73 @@
+<template>
+  <Dialog
+    v-if="iVisible"
+    :title="$tc('common.Update')"
+    :visible.sync="iVisible"
+    width="60%"
+    top="1vh"
+    :show-cancel="false"
+    :show-confirm="false"
+  >
+    <GenericCreateUpdateForm v-bind="config" @submitSuccess="submitSuccess" />
+  </Dialog>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog'
+import { GenericCreateUpdateForm } from '@/layout/components'
+import { fieldsMeta } from '../const'
+
+export default {
+  components: {
+    Dialog,
+    GenericCreateUpdateForm
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    fields: {
+      type: Array,
+      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
+      }
+    }
+  },
+  computed: {
+    iVisible: {
+      set(val) {
+        this.$emit('update:visible', val)
+      },
+      get() { return this.visible }
+    }
+  },
+  created() {
+  },
+  methods: {
+    submitSuccess() {
+      this.iVisible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  ::v-deep .el-dialog .el-dialog__body {
+    padding: 0 20px;
+  }
+
+</style>

src/views/assets/Platform/const.js

@@ -0,0 +1,75 @@
+import i18n from '@/i18n/i18n'
+import rules from '@/components/DataForm/rules'
+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']
+      },
+      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
+      }
+    }
+  },
+  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']
+  }
+}