pref: 修改账号更新

src/components/AccountCreateUpdateForm/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <AutoDataForm v-loading="loading" v-bind="$data" @submit="confirm" />
+  <AutoDataForm
+    v-bind="$data"
+    @submit="confirm"
+    @afterRemoteMeta="afterGetRemoteMeta"
+  />
 </template>
 
 <script>
@@ -13,7 +17,7 @@ export default {
   props: {
     platform: {
       type: Object,
-      default: () => ({})
+      required: true
     },
     account: {
       type: Object,
@@ -23,17 +27,30 @@ export default {
   data() {
     return {
       loading: true,
+      usernameChanged: false,
       url: '/api/v1/assets/accounts/',
       form: this.account || { },
       fields: [
-        ['Basic', ['username', 'privileged']],
-        ['Auth', ['secret_type', 'password', 'ssh_key', 'token', 'api_key', 'passphrase']],
-        ['Other', ['push_now', 'name', 'comment']]
+        [this.$t('common.Basic'), ['name', 'username', 'privileged']],
+        [this.$t('assets.Secret'), ['secret_type', 'password', 'ssh_key', 'token', 'api_key', 'passphrase']],
+        [this.$t('common.Other'), ['push_now', 'comment']]
       ],
       defaultPrivilegedAccounts: ['root', 'administrator'],
       fieldsMeta: {
+        name: {
+          on: {
+            input: ([value], updateForm) => {
+              if (!this.usernameChanged) {
+                updateForm({ username: value })
+              }
+            }
+          }
+        },
         username: {
           on: {
+            input: ([value], updateForm) => {
+              this.usernameChanged = true
+            },
             change: ([value], updateForm) => {
               if (this.defaultPrivilegedAccounts.indexOf(value.toLowerCase()) > -1) {
                 updateForm({ privileged: true })
@@ -44,20 +61,20 @@ export default {
         password: {
           label: this.$t('assets.Password'),
           component: UpdateToken,
-          hidden: (formValue) => formValue['secret_type'] !== 'password'
+          hidden: (formValue) => formValue.secret_type !== 'password'
         },
         ssh_key: {
-          label: this.$t('assets.SSHPrivateKey'),
+          label: this.$t('assets.PrivateKey'),
           el: {
             type: 'textarea',
             rows: 4
           },
-          hidden: (formValue) => formValue['secret_type'] !== 'ssh_key'
+          hidden: (formValue) => formValue.secret_type !== 'ssh_key'
         },
         passphrase: {
           label: 'Passphrase',
           component: UpdateToken,
-          hidden: (formValue) => formValue['secret_type'] !== 'ssh_key'
+          hidden: (formValue) => formValue.secret_type !== 'ssh_key'
         },
         token: {
           label: 'Token',
@@ -65,7 +82,7 @@ export default {
             type: 'textarea',
             rows: 4
           },
-          hidden: (formValue) => formValue['secret_type'] !== 'token'
+          hidden: (formValue) => formValue.secret_type !== 'token'
         },
         api_key: {
           id: 'api_key',
@@ -74,13 +91,11 @@ export default {
             type: 'textarea',
             rows: 4
           },
-          hidden: (formValue) => formValue['secret_type'] !== 'api_key'
+          hidden: (formValue) => formValue.secret_type !== 'api_key'
         },
         secret_type: {
           type: 'radio-group',
-          options: [
-            { label: 'Password', value: 'password' }
-          ]
+          options: []
         },
         push_now: {
           hidden: () => {
@@ -92,18 +107,10 @@ export default {
     }
   },
   mounted() {
-    this.setSecretTypes().then(() => {
-      this.loading = false
-    })
   },
   methods: {
-    async setSecretTypes() {
-      const options = [
-        { label: 'Password', value: 'password' },
-        { label: 'SSH key', value: 'ssh_key' },
-        { label: 'Token', value: 'token' },
-        { label: 'Api key', value: 'api_key' }
-      ]
+    afterGetRemoteMeta(meta) {
+      const choices = meta.secret_type.choices
       const secretTypes = []
       this.platform.protocols.forEach(p => {
         secretTypes.push(...p['secret_types'])
@@ -111,12 +118,9 @@ export default {
       if (!this.form.secret_type) {
         this.form.secret_type = secretTypes[0]
       }
-      const supportOptions = options.filter(item => {
+      this.fieldsMeta.secret_type.options = choices.filter(item => {
         return secretTypes.indexOf(item.value) > -1
       })
-      if (supportOptions.length > 0) {
-        this.fieldsMeta.secret_type.options = supportOptions
-      }
     },
     confirm(form) {
       if (this.account?.name) {
@@ -124,9 +128,6 @@ export default {
       } else {
         this.$emit('add', form)
       }
-    },
-    hasProtocol(name) {
-      return this.protocols.find(item => item.name === name)
     }
   }
 }

src/components/AccountListTable/AddAccount.vue

@@ -10,7 +10,9 @@
     v-bind="$attrs"
     v-on="$listeners"
   >
-    <AccountCreateForm
+    <AccountCreateUpdateForm
+      v-if="!loading"
+      :platform="platform"
       :protocols="protocols"
       :account="account"
       @add="addAccount"
@@ -21,12 +23,12 @@
 
 <script>
 import Dialog from '@/components/Dialog'
-import AccountCreateForm from '@/components/AccountCreateForm'
+import AccountCreateUpdateForm from '@/components/AccountCreateUpdateForm'
 export default {
   name: 'CreateAccountDialog',
   components: {
     Dialog,
-    AccountCreateForm
+    AccountCreateUpdateForm
   },
   props: {
     visible: {
@@ -42,15 +44,17 @@ export default {
       default: () => ({
         name: '',
         username: '',
-        password: '',
-        private_key: ''
+        secret: ''
       })
     }
   },
   data() {
     return {
+      loading: true,
+      platform: {}
     }
   },
+
   computed: {
     iVisible: {
       get() {
@@ -64,7 +68,18 @@ export default {
       return this.asset ? this.asset.protocol : []
     }
   },
+  async mounted() {
+    try {
+      await this.getPlatform()
+    } finally {
+      this.loading = false
+    }
+  },
   methods: {
+    async getPlatform() {
+      this.platform = await this.$axios.get(`/api/v1/assets/platforms/${this.asset.platform.id}/`)
+      console.log('Platform: ', this.platform)
+    },
     addAccount(form) {
       const data = { asset: this.asset.id, ...form }
       this.$axios.post(`/api/v1/assets/accounts/`, data)

src/components/AutoDataForm/index.vue

@@ -76,13 +76,15 @@ export default {
         data = await this.$store.dispatch('common/getUrlMeta', { url: this.url })
       }
       this.remoteMeta = data.actions[this.method.toUpperCase()] || {}
+      this.$emit('afterRemoteMeta', this.remoteMeta)
       this.generateColumns()
+      this.$emit('afterGenerateColumns', this.totalFields)
       this.cleanFormValue()
       this.loading = false
       console.log('Loading: ', this.groups)
     },
     generateColumns() {
-      const generator = new FormFieldGenerator()
+      const generator = new FormFieldGenerator(this.$emit)
       this.totalFields = generator.generateFields(this.fields, this.fieldsMeta, this.remoteMeta)
       this.groups = generator.groups
       this.$log.debug('Total fields: ', this.totalFields)

src/components/AutoDataForm/utils.js

@@ -2,12 +2,13 @@ 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 Switcher from '@/components/FormFields/Switcher'
 import rules from '@/components/DataForm/rules'
 import { assignIfNot } from '@/utils/common'
 
 export class FormFieldGenerator {
-  constructor() {
+  constructor(emit) {
+    this.$emite = emit
     this.groups = []
   }
   generateFieldByType(type, field, fieldMeta, fieldRemoteMeta) {
@@ -62,7 +63,7 @@ export class FormFieldGenerator {
         break
       case 'boolean':
         type = ''
-        field.component = Swicher
+        field.component = Switcher
         break
       case 'object_related_field':
         field.component = ObjectSelect2

src/components/FormFields/AssetAccounts.vue

@@ -52,7 +52,7 @@
 
 <script>
 import Dialog from '@/components/Dialog'
-import AccountCreateForm from '@/components/AccountCreateForm'
+import AccountCreateForm from '@/components/AccountCreateUpdateForm'
 import AutoDataTable from '@/components/AutoDataTable'
 export default {
   name: 'AssetAccounts',

src/components/FormFields/Switcher.vue

@@ -10,7 +10,7 @@
 
 <script>
 export default {
-  name: 'Switcher',
+  name: 'Switcher', // 不能叫 Switch，否则会和 js 关键字冲突
   props: {
     type: {
       type: String,

src/components/FormFields/index.js

@@ -1,7 +1,7 @@
 import Link from './Link'
 import PasswordInput from './PasswordInput'
 import Select2 from './Select2'
-import Swicher from './Swicher'
+import Switcher from './Switcher'
 import UploadField from './UploadField'
 import UploadKey from './UploadKey'
 import UserPassword from './UserPassword'
@@ -13,33 +13,33 @@ import NestedObjectSelect2 from './NestedObjectSelect2'
 import DatetimeRangePicker from './DatetimeRangePicker'
 
 export default {
-  DatetimeRangePicker,
-  NestedObjectSelect2,
+  Text,
   Link,
-  PasswordInput,
+  Switcher,
   Select2,
-  Swicher,
   UploadKey,
+  JsonEditor,
+  UpdateToken,
   UploadField,
   UserPassword,
+  PasswordInput,
   WeekCronSelect,
-  UpdateToken,
-  JsonEditor,
-  Text
+  NestedObjectSelect2,
+  DatetimeRangePicker
 }
 
 export {
-  DatetimeRangePicker,
-  NestedObjectSelect2,
+  Text,
   Link,
-  PasswordInput,
+  Switcher,
   Select2,
-  Swicher,
   UploadKey,
+  JsonEditor,
+  UpdateToken,
   UploadField,
   UserPassword,
+  PasswordInput,
   WeekCronSelect,
-  UpdateToken,
-  JsonEditor,
-  Text
+  NestedObjectSelect2,
+  DatetimeRangePicker
 }

src/components/QuickActions/action.vue

@@ -3,14 +3,31 @@
     <td>{{ action.title }}:</td>
     <td>
       <span>
-        <component :is="iType" v-model="action.attrs.model" v-bind="action.attrs" v-on="callbacks">{{ label }}</component>
+        <component
+          :is="iType"
+          v-model="action.attrs.model"
+          v-bind="action.attrs"
+          v-on="callbacks"
+        >
+          {{ label }}
+        </component>
       </span>
     </td>
   </tr>
 </template>
 
 <script>
-import Switcher from '../FormFields/Swicher'
+import Switcher from '../FormFields/Switcher'
+
+class Action {
+  constructor() {
+    this.title = ''
+    this.type = ''
+    this.attrs = {}
+    this.callbacks = ''
+  }
+}
+
 export default {
   name: 'ActionItem',
   components: {
@@ -18,8 +35,8 @@ export default {
   },
   props: {
     action: {
-      type: Object,
-      default: () => ({})
+      type: [Action, Object],
+      default: () => ({ title: '' })
     }
   },
   data() {
@@ -30,7 +47,7 @@ export default {
   computed: {
     iType() {
       switch (this.action.type) {
-        case 'switcher':
+        case 'switch':
           return 'Switcher'
         default:
           return 'el-button'

src/components/index.js

@@ -19,7 +19,7 @@ export { default as SvgIcon } from './SvgIcon'
 export { default as TreeTable } from './TreeTable'
 export { default as IBox } from './IBox'
 export { default as QuickActions } from './QuickActions'
-export { default as Switcher } from './FormFields/Swicher'
+export { default as Switcher } from './FormFields/Switcher'
 export { default as SummaryCard } from './SummaryCard'
 export { default as UploadField } from './FormFields/UploadField'
 export { default as AccountListTable } from './AccountListTable/index'