feat: 资产详情-账号列表添加账号模版

src/components/AccountListTable/AccountList.vue

@@ -86,6 +86,10 @@ export default {
     columnsMeta: {
       type: Object,
       default: () => {}
+    },
+    headerExtraActions: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
@@ -256,7 +260,8 @@ export default {
                 vm.showAddDialog = true
               })
             }
-          }
+          },
+          ...this.headerExtraActions
           // {
           //   name: 'autocreate',
           //   title: this.$t('accounts.AutoCreate'),

src/views/assets/Asset/AssetCreateUpdate/components/AccountTemplateDialog.vue

@@ -15,6 +15,7 @@
       <template>
         <div class="actions">
           <el-button
+            v-if="showCreate"
             type="primary"
             size="small"
             :disabled="!$hasPerm('accounts.view_accounttemplate')"
@@ -68,6 +69,10 @@ export default {
     accounts: {
       type: Array,
       default: () => ([])
+    },
+    showCreate: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -123,6 +128,7 @@ export default {
       const hasIdAccounts = this.accounts.filter(i => i?.id)
       const data = _.xorBy(hasIdAccounts, this.accountsSelected, 'id')
       this.accounts.push(...data)
+      this.$emit('onConfirm', this.accounts)
     },
     handleCancel() {
       this.iVisible = false

src/views/assets/Asset/AssetDetail/Account.vue

@@ -11,6 +11,13 @@
           :has-clone="false"
           :has-left-actions="true"
           :columns="columns"
+          :header-extra-actions="headerExtraActions"
+        />
+        <AccountTemplateDialog
+          v-if="templateDialogVisible"
+          :show-create="false"
+          :visible.sync="templateDialogVisible"
+          @onConfirm="onConfirm"
         />
       </el-col>
     </el-row>
@@ -19,11 +26,13 @@
 
 <script>
 import { AccountListTable } from '@/components'
+import AccountTemplateDialog from '@/views/assets/Asset/AssetCreateUpdate/components/AccountTemplateDialog'
 
 export default {
   name: 'Detail',
   components: {
-    AccountListTable
+    AccountListTable,
+    AccountTemplateDialog
   },
   props: {
     object: {
@@ -37,9 +46,20 @@ export default {
   },
   data() {
     return {
+      templateDialogVisible: false,
       columns: [
         'name', 'username', 'version', 'privileged', 'connectivity',
         'is_active', 'date_created', 'date_updated', 'actions'
+      ],
+      headerExtraActions: [
+        {
+          name: this.$t('route.AccountTemplate'),
+          title: this.$t('route.AccountTemplate'),
+          can: () => this.$hasPerm('accounts.view_accounttemplate'),
+          callback: () => {
+            this.templateDialogVisible = true
+          }
+        }
       ]
     }
   },
@@ -47,6 +67,24 @@ export default {
     iUrl() {
       return this.url || `/api/v1/accounts/accounts/?asset=${this.object.id}`
     }
+  },
+  methods: {
+    onConfirm(data) {
+      data = data?.map(i => {
+        if (i.hasOwnProperty('id')) {
+          delete i['id']
+        }
+        i.asset = this.object.id
+        return i
+      })
+      this.$axios.post(`/api/v1/accounts/accounts/`, data).then(() => {
+        this.templateDialogVisible = false
+        this.$refs.ListTable.addAccountSuccess()
+        this.$message.success(this.$tc('common.createSuccessMsg'))
+      }).catch(() => {
+        this.$message.error(this.$tc('common.createErrorMsg'))
+      })
+    }
   }
 }
 </script>