feat: 支持资产授权和应用授权的批量更新

src/views/perms/ApplicationPermission/ApplicationPermissionList.vue

@@ -1,10 +1,17 @@
 <template>
-  <GenericTreeListPage
+  <div>
-    ref="TreeTablePage"
+    <GenericTreeListPage
-    :tree-setting="treeSetting"
+      ref="TreeTablePage"
-    :header-actions="headerActions"
+      :tree-setting="treeSetting"
-    :table-config="tableConfig"
+      :header-actions="headerActions"
-  />
+      :table-config="tableConfig"
+    />
+    <PermBulkUpdateDialog
+      :visible.sync="updateSelectedDialogSetting.visible"
+      v-bind="updateSelectedDialogSetting"
+      :perm-type="permType"
+    />
+  </div>
 </template>
 
 <script>
@@ -12,15 +19,19 @@ import GenericTreeListPage from '@/layout/components/GenericTreeListPage'
 import { setUrlParam } from '@/utils/common'
 import { DetailFormatter } from '@/components/TableFormatters'
 import { ApplicationTypes } from '@/views/applications/const'
+import PermBulkUpdateDialog from '@/views/perms/components/PermBulkUpdateDialog'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'AssetAccountList',
   components: {
-    GenericTreeListPage
+    GenericTreeListPage,
+    PermBulkUpdateDialog
   },
   data() {
     const vm = this
     return {
+      permType: 'applications',
       isInit: true,
       clickedRow: null,
       iShowTree: true,
@@ -164,9 +175,31 @@ export default {
             }})
           },
           dropdown: ApplicationTypes
-        }
+        },
+        extraMoreActions: [
+          {
+            name: 'actionUpdateSelected',
+            title: this.$t('common.updateSelected'),
+            can: ({ selectedRows }) => {
+              return selectedRows.length > 0 &&
+                !vm.currentOrgIsRoot &&
+                vm.$hasPerm('perms.change_applicationpermission')
+            },
+            callback: ({ selectedRows }) => {
+              vm.updateSelectedDialogSetting.selectedRows = selectedRows
+              vm.updateSelectedDialogSetting.visible = true
+            }
+          }
+        ]
+      },
+      updateSelectedDialogSetting: {
+        visible: false,
+        selectedRows: []
       }
     }
+  },
+  computed: {
+    ...mapGetters(['currentOrgIsRoot'])
   }
 }
 </script>

src/views/perms/AssetPermission/AssetPermissionList.vue

@@ -1,16 +1,26 @@
 <template>
-  <GenericTreeListPage :table-config="tableConfig" :header-actions="headerActions" :tree-setting="treeSetting" />
+  <div>
+    <GenericTreeListPage :table-config="tableConfig" :header-actions="headerActions" :tree-setting="treeSetting" />
+    <PermBulkUpdateDialog
+      :visible.sync="updateSelectedDialogSetting.visible"
+      v-bind="updateSelectedDialogSetting"
+    />
+  </div>
 </template>
 
 <script>
 import GenericTreeListPage from '@/layout/components/GenericTreeListPage'
 import { DetailFormatter } from '@/components/TableFormatters'
+import PermBulkUpdateDialog from '@/views/perms/components/PermBulkUpdateDialog'
+import { mapGetters } from 'vuex'
 
 export default {
   components: {
-    GenericTreeListPage
+    GenericTreeListPage,
+    PermBulkUpdateDialog
   },
   data() {
+    const vm = this
     return {
       treeSetting: {
         showMenu: false,
@@ -186,10 +196,32 @@ export default {
             }
           ]
         },
-        hasBulkUpdate: false
+        hasBulkUpdate: false,
+        extraMoreActions: [
+          {
+            name: 'actionUpdateSelected',
+            title: this.$t('common.updateSelected'),
+            can: ({ selectedRows }) => {
+              return selectedRows.length > 0 &&
+                !vm.currentOrgIsRoot &&
+                vm.$hasPerm('perms.change_assetpermission')
+            },
+            callback: ({ selectedRows }) => {
+              vm.updateSelectedDialogSetting.selectedRows = selectedRows
+              vm.updateSelectedDialogSetting.visible = true
+            }
+          }
+        ]
+      },
+      updateSelectedDialogSetting: {
+        visible: false,
+        selectedRows: []
       }
     }
   },
+  computed: {
+    ...mapGetters(['currentOrgIsRoot'])
+  },
   methods: {
   }
 }

src/views/perms/components/PermBulkUpdateDialog.vue

@@ -0,0 +1,87 @@
+<template>
+  <GenericUpdateFormDialog
+    v-if="visible"
+    :selected-rows="selectedRows"
+    :form-setting="formSetting"
+    :visible="visible"
+    v-on="$listeners"
+  />
+</template>
+
+<script>
+import { GenericUpdateFormDialog } from '@/layout/components'
+import getFields from '@/views/perms/fields'
+
+export default {
+  name: 'PermBulkUpdateDialog',
+  components: {
+    GenericUpdateFormDialog
+  },
+  props: {
+    permType: {
+      type: String,
+      default: 'asset'
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    selectedRows: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  data() {
+    return {
+      formSetting: {
+        url: '',
+        hasSaveContinue: false,
+        initial: {},
+        fields: [],
+        fieldsMeta: {}
+      }
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      let url
+      const fieldsManager = getFields.bind(this)()
+      const fields = [
+        'users', 'user_groups', 'system_users',
+        'actions', 'is_active', 'date_start', 'date_expired'
+      ]
+      const fieldsMeta = {
+        users: fieldsManager.users,
+        user_groups: fieldsManager.user_groups,
+        system_users: fieldsManager.system_users,
+        actions: fieldsManager.actions,
+        date_start: fieldsManager.date_start,
+        date_expired: fieldsManager.date_expired,
+        is_active: fieldsManager.is_active
+      }
+      if (this.permType !== 'asset') {
+        url = '/api/v1/perms/application-permissions/'
+        fields.splice(2, 0, 'applications')
+        Object.assign(fieldsMeta, { applications: fieldsManager.applications })
+      } else {
+        url = '/api/v1/perms/asset-permissions/'
+        fields.splice(2, 0, ...['assets', 'nodes'])
+        Object.assign(fieldsMeta, {
+          assets: fieldsManager.assets,
+          nodes: fieldsManager.nodes
+        })
+      }
+      this.$data.formSetting.url = url
+      this.$data.formSetting.fields = fields
+      this.$data.formSetting.fieldsMeta = fieldsMeta
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/perms/fields.js

@@ -0,0 +1,120 @@
+import AssetSelect from '@/components/AssetSelect'
+import PermissionFormActionField from '@/views/perms/components/PermissionFormActionField'
+
+function getFields() {
+  const users = {
+    label: this.$t('users.Users'),
+    hidden: () => false,
+    el: {
+      value: [],
+      ajax: {
+        url: '/api/v1/users/users/?fields_size=mini',
+        transformOption: (item) => {
+          return { label: item.name + '(' + item.username + ')', value: item.id }
+        }
+      }
+    }
+  }
+
+  const user_groups = {
+    label: this.$t('users.UserGroups'),
+    hidden: () => false,
+    el: {
+      value: [],
+      url: '/api/v1/users/groups/'
+    }
+  }
+
+  const assets = {
+    type: 'assetSelect',
+    hidden: () => false,
+    component: AssetSelect,
+    label: this.$t('perms.Asset'),
+    rules: [{
+      required: false
+    }],
+    el: {
+      value: []
+    }
+  }
+
+  const nodes = {
+    label: this.$t('perms.Node'),
+    hidden: () => false,
+    el: {
+      value: [],
+      ajax: {
+        url: '/api/v1/assets/nodes/',
+        transformOption: (item) => {
+          return { label: item.full_value, value: item.id }
+        }
+      }
+    }
+  }
+
+  const system_users = {
+    label: this.$t('perms.SystemUser'),
+    hidden: () => false,
+    el: {
+      value: [],
+      ajax: {
+        url: '/api/v1/assets/system-users/?protocol__in=rdp,ssh,vnc,telnet',
+        transformOption: (item) => {
+          const username = item.username || '*'
+          return { label: item.name + '(' + username + ')', value: item.id }
+        }
+      }
+    }
+  }
+
+  const actions = {
+    label: this.$t('perms.Actions'),
+    hidden: () => false,
+    component: PermissionFormActionField,
+    helpText: this.$t('common.actionsTips')
+  }
+
+  const date_start = {
+    label: this.$t('common.dateStart'),
+    hidden: () => false
+  }
+
+  const date_expired = {
+    label: this.$t('common.dateExpired'),
+    hidden: () => false
+  }
+
+  const is_active = {
+    label: this.$t('assets.IsActive'),
+    type: 'checkbox'
+  }
+
+  const applications = {
+    label: this.$t('assets.Applications'),
+    hidden: () => false,
+    el: {
+      value: [],
+      ajax: {
+        url: `/api/v1/applications/applications/`,
+        transformOption: (item) => {
+          return { label: item.name + ' (' + item.type_display + ')', value: item.id }
+        }
+      }
+    }
+  }
+
+  return {
+    users: users,
+    user_groups: user_groups,
+    assets: assets,
+    applications: applications,
+    nodes: nodes,
+    system_users: system_users,
+    actions: actions,
+    is_active: is_active,
+    date_start: date_start,
+    date_expired: date_expired
+  }
+}
+
+export default getFields