[Update] 删除ActiveCard，使用QuickActions

src/components/ActiveCard/index.vue

@@ -1,63 +0,0 @@
-<template>
-  <IBox :fa="icon" :type="type" :title="title" v-bind="$attrs">
-    <el-table class="el-table" :data="content" :show-header="false">
-      <el-table-column prop="name" />
-      <el-table-column prop="is_active" align="right">
-        <template slot-scope="scope">
-          <el-switch
-            v-model="scope.row.is_active"
-            active-color="#1ab394"
-            inactive-color="#ff4949"
-            @change="HandleChangeAction(scope.$index, scope.row)"
-          />
-        </template>
-      </el-table-column>
-    </el-table>
-  </IBox>
-</template>
-
-<script>
-import IBox from '@/components/IBox'
-export default {
-  name: 'ActiveCard',
-  components: {
-    IBox
-  },
-  props: {
-    title: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    content: {
-      type: Array,
-      default: () => []
-    },
-    url: {
-      type: String,
-      default: ''
-    },
-    type: {
-      type: String,
-      default: 'primary'
-    }
-  },
-  methods: {
-    HandleChangeAction(index, row) {
-      this.$axios.patch(this.url, { is_active: row.is_active }
-      ).then(res => {
-        this.$message.success(this.$ttc('updateSuccessMsg'))
-      }).catch(err => {
-        this.$message.error(this.$ttc('updateFailedMsg' + ' ' + err))
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

src/components/index.js

@@ -12,7 +12,6 @@ export { default as FormGroupHeader } from './FormGroupHeader'
 export { default as Hamburger } from './Hamburger'
 export { default as ListTable } from './ListTable'
 export { default as RelationCard } from './RelationCard'
-export { default as ActiveCard } from './ActiveCard'
 export { default as Select2 } from './Select2'
 export { default as AssetSelect } from './AssetSelect'
 export { default as SvgIcon } from './SvgIcon'

src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAsset.vue

@@ -15,7 +15,7 @@
 import ListTable from '@/components/ListTable'
 import { RelationCard } from '@/components'
 import { DeleteActionFormatter } from '@/components/ListTable/formatters/index'
-import AssetRelationCard from '../AssetRelationCard'
+import AssetRelationCard from './AssetRelationCard/index'
 
 export default {
   name: 'AssetPermissionAsset',

src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionDetail.vue

@@ -4,20 +4,20 @@
       <DetailCard :title="cardTitle" :items="detailCardItems" />
     </el-col>
     <el-col :md="10" :sm="24">
-      <ActiveCard type="primary" v-bind="activeConfig" />
+      <QuickActions type="primary" :actions="quickActions" />
     </el-col>
   </el-row>
 </template>
 
 <script>
-import { DetailCard, ActiveCard } from '@/components'
+import { DetailCard, QuickActions } from '@/components'
 // import { toSafeLocalDateStr } from '@/utils/common'
 
 export default {
   name: 'AssetPermissionDetail',
   components: {
     DetailCard,
-    ActiveCard
+    QuickActions
   },
   props: {
     object: {
@@ -26,19 +26,27 @@ export default {
     }
   },
   data() {
+    const vm = this
     return {
-      activeConfig: {
+      quickActions: [
-        icon: 'fa-edit',
-        title: this.$t('perms.QuickModify'),
-        content: [
         {
-            name: this.$t('perms.Active'),
+          title: this.$ttc('active'),
-            is_active: this.object.is_active
+          type: 'switcher',
+          attrs: {
+            model: this.object.is_active
+          },
+          callbacks: {
+            change: function(v, item) {
+              const url = `/api/v1/perms/asset-permissions/${vm.object.id}/`
+              const data = { is_active: v }
+              vm.$axios.patch(url, data).catch(() => {
+                item.attrs.model = !v
+              })
             }
-        ],
-        url: `/api/v1/perms/asset-permissions/${this.$route.params.id}/`
           }
         }
+      ]
+    }
   },
   computed: {
     cardTitle() {

src/views/perms/AssetPermissionList.vue

@@ -1,98 +0,0 @@
-<template>
-  <GenericTreeListPage :table-config="tableConfig" :header-actions="headerActions" :tree-setting="treeSetting" />
-</template>
-
-<script>
-import GenericTreeListPage from '@/layout/components/GenericTreeListPage'
-import { ExpandAssetPermissionFormatter } from '@/components/ListTable/formatters/index'
-
-export default {
-  components: {
-    GenericTreeListPage
-  },
-  data() {
-    return {
-      treeSetting: {
-        showMenu: false,
-        showRefresh: true,
-        showAssets: true,
-        url: '/api/v1/perms/asset-permissions/',
-        nodeUrl: '/api/v1/perms/asset-permissions/',
-        treeUrl: '/api/v1/assets/nodes/children/tree/?assets=1'
-      },
-      tableConfig: {
-        url: '/api/v1/perms/asset-permissions/',
-        hasSelection: false,
-        hasTree: true,
-        tagSearch: [
-          { label: this.$tco('Name'), key: 'name' },
-          { label: this.$t('perms.IsValid'), key: 'is_valid' },
-          { label: this.$tco('username'), key: 'username' },
-          { label: this.$t('perms.UserGroups'), key: 'user_group' },
-          { label: this.$t('perms.IP'), key: 'ip' },
-          { label: this.$t('perms.Hostname'), key: 'hostname' },
-          { label: this.$t('perms.Node'), key: 'node' },
-          { label: this.$t('perms.SystemUser'), key: 'system_user' },
-          { label: '继承(先占位)', key: 'all=0' }
-        ],
-        columns: ['expand', 'name', 'users_amount', 'user_groups_amount', 'assets_amount', 'nodes_amount', 'system_users_amount', 'is_active', 'actions'],
-        columnsMeta: {
-          expand: {
-            type: 'expand',
-            formatter: ExpandAssetPermissionFormatter
-          },
-          users_amount: {
-            label: this.$t('perms.User')
-          },
-          user_groups_amount: {
-            label: this.$t('perms.UserGroups')
-          },
-          assets_amount: {
-            label: this.$t('perms.Asset')
-          },
-          nodes_amount: {
-            label: this.$t('perms.Node')
-          },
-          system_users_amount: {
-            label: this.$t('perms.SystemUser')
-          }
-        },
-        actions: {
-          updateRoute: 'AssetPermissionUpdate',
-          detailRoute: 'AssetPermissionDetail'
-        }
-      },
-      headerActions: {
-        hasExport: false,
-        hasImport: false,
-        hasRefresh: false,
-        hasBulkDelete: false,
-        hasBulkUpdate: false,
-        extraMoreActions: [
-          {
-            name: 'RefreshPermissionCache',
-            title: this.$t('perms.RefreshPermissionCache'),
-            type: 'primary',
-            has: true,
-            callback: this.HandleRefreshPermissionCache
-          }
-        ]
-      }
-    }
-  },
-  methods: {
-    HandleRefreshPermissionCache() {
-      const url = '/api/v1/perms/asset-permissions/cache/refresh/'
-      this.$axios.get(url).then(res => {
-        this.$message.success(this.$t('perms.ReFreshSuccess'))
-      }).catch(err => {
-        this.$message.error(this.$t('perms.ReFreshFail') + ':' + err)
-      })
-    }
-  }
-}
-</script>
-
-<style>
-
-</style>

src/views/perms/DatabaseAppPermission/DatabaseAppPermissionDetail/DatabaseAppPermissionDetail.vue

@@ -4,20 +4,20 @@
       <DetailCard :title="cardTitle" :items="detailCardItems" />
     </el-col>
     <el-col :md="10" :sm="24">
-      <ActiveCard type="primary" v-bind="activeConfig" />
+      <QuickActions type="primary" :actions="quickActions" />
     </el-col>
   </el-row>
 </template>
 
 <script>
-import { DetailCard, ActiveCard } from '@/components'
+import { DetailCard, QuickActions } from '@/components'
 import { toSafeLocalDateStr } from '@/utils/common'
 
 export default {
   name: 'DatabaseAppPermissionDetail',
   components: {
     DetailCard,
-    ActiveCard
+    QuickActions
   },
   props: {
     object: {
@@ -26,19 +26,27 @@ export default {
     }
   },
   data() {
+    const vm = this
     return {
-      activeConfig: {
+      quickActions: [
-        icon: 'fa-edit',
-        title: this.$t('perms.QuickModify'),
-        content: [
         {
-            name: this.$t('perms.Active'),
+          title: this.$ttc('active'),
-            is_active: this.object.is_active
+          type: 'switcher',
+          attrs: {
+            model: this.object.is_active
+          },
+          callbacks: {
+            change: function(v, item) {
+              const url = `/api/v1/perms/database-app-permissions/${vm.object.id}/`
+              const data = { is_active: v }
+              vm.$axios.patch(url, data).catch(() => {
+                item.attrs.model = !v
+              })
             }
-        ],
-        url: `/api/v1/perms/database-app-permissions/${this.object.id}/`
           }
         }
+      ]
+    }
   },
   computed: {
     cardTitle() {

src/views/perms/RemoteAppPermission/RemoteAppPermissionDetail/RemoteAppPermissionDetail.vue

@@ -4,20 +4,20 @@
       <DetailCard :title="cardTitle" :items="detailCardItems" />
     </el-col>
     <el-col :span="10">
-      <ActiveCard type="primary" v-bind="activeConfig" />
+      <QuickActions type="primary" :actions="quickActions" />
     </el-col>
   </el-row>
 </template>
 
 <script>
-import { DetailCard, ActiveCard } from '@/components'
+import { DetailCard, QuickActions } from '@/components'
 import { toSafeLocalDateStr } from '@/utils/common'
 
 export default {
   name: 'RemoteAppPermissionDetail',
   components: {
     DetailCard,
-    ActiveCard
+    QuickActions
   },
   props: {
     object: {
@@ -26,19 +26,27 @@ export default {
     }
   },
   data() {
+    const vm = this
     return {
-      activeConfig: {
+      quickActions: [
-        icon: 'fa-edit',
-        title: this.$t('perms.QuickModify'),
-        content: [
         {
-            name: this.$t('perms.Active'),
+          title: this.$ttc('active'),
-            is_active: this.object.is_active
+          type: 'switcher',
+          attrs: {
+            model: this.object.is_active
+          },
+          callbacks: {
+            change: function(v, item) {
+              const url = `/api/v1/perms/remote-app-permissions/${vm.object.id}/`
+              const data = { is_active: v }
+              vm.$axios.patch(url, data).catch(() => {
+                item.attrs.model = !v
+              })
             }
-        ],
-        url: `/api/v1/perms/remote-app-permissions/${this.object.id}/`
           }
         }
+      ]
+    }
   },
   computed: {
     cardTitle() {

src/views/perms/index.js

@@ -3,27 +3,26 @@ const PermsRoute = [
   {
     path: 'asset-permissions',
     name: 'AssetPermissionList',
-    // component: () => import('@/views/perms/AssetPermissionList'),
+    component: () => import('@/views/perms/AssetPermission/AssetPermissionList/index'),
-    component: () => import('@/views/perms/AssetPermissionList/index'),
     meta: { title: 'AssetPermission' }
   },
   {
     path: 'asset-permissions/create',
-    component: () => import('@/views/perms/AssetPermissionCreateUpdate'),
+    component: () => import('@/views/perms/AssetPermission/AssetPermissionCreateUpdate'),
     name: 'AssetPermissionCreate',
     hidden: true,
     meta: { title: 'AssetPermissionCreate', activeMenu: '/perms/asset-permissions', action: 'create' }
   },
   {
     path: 'users/:id/update',
-    component: () => import('@/views/perms/AssetPermissionCreateUpdate.vue'),
+    component: () => import('@/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue'),
     name: 'AssetPermissionUpdate',
     hidden: true,
     meta: { title: 'AssetPermissionUpdate', activeMenu: '/perms/asset-permissions', action: 'update' }
   },
   {
     path: 'asset-permissions/:id',
-    component: () => import('@/views/perms/AssetPermissionDetail/index'),
+    component: () => import('@/views/perms/AssetPermission/AssetPermissionDetail/index'),
     name: 'AssetPermissionDetail',
     hidden: true,
     meta: { title: 'AssetPermissionDetail', activeMenu: '/perms/asset-permissions' }
@@ -31,26 +30,26 @@ const PermsRoute = [
   {
     path: 'remote-app-permissions',
     name: 'RemoteAppPermissionList',
-    component: () => import('@/views/perms/RemoteAppPermissionList'),
+    component: () => import('@/views/perms/RemoteAppPermission/RemoteAppPermissionList'),
     meta: { title: 'RemoteAppPermission' }
   },
   {
     path: 'remote-app-permissions/create',
-    component: () => import('@/views/perms/RemoteAppPermissionCreateUpdate'),
+    component: () => import('@/views/perms/RemoteAppPermission/RemoteAppPermissionCreateUpdate'),
     name: 'RemoteAppPermissionCreate',
     hidden: true,
     meta: { title: 'RemoteAppPermissionCreate', activeMenu: '/perms/remote-app-permissions', action: 'create' }
   },
   {
     path: 'remote-app-permissions/update',
-    component: () => import('@/views/perms/RemoteAppPermissionCreateUpdate'),
+    component: () => import('@/views/perms/RemoteAppPermission/RemoteAppPermissionCreateUpdate'),
     name: 'RemoteAppPermissionUpdate',
     hidden: true,
     meta: { title: 'RemoteAppPermissionUpdate', activeMenu: '/perms/remote-app-permissions', action: 'update' }
   },
   {
     path: 'remote-app-permissions/:id',
-    component: () => import('@/views/perms/RemoteAppPermissionDetail/index'),
+    component: () => import('@/views/perms/RemoteAppPermission/RemoteAppPermissionDetail/index'),
     name: 'RemoteAppPermissionDetail',
     hidden: true,
     meta: { title: 'RemoteAppPermissionDetail', activeMenu: '/perms/remote-app-permissions' }
@@ -58,26 +57,26 @@ const PermsRoute = [
   {
     path: 'database-app-permissions',
     name: 'DatabaseAppPermissionList',
-    component: () => import('@/views/perms/DatabaseAppPermissionList'),
+    component: () => import('@/views/perms/DatabaseAppPermission/DatabaseAppPermissionList'),
     meta: { title: 'DatabaseAppPermission' }
   },
   {
     path: 'database-app-permissions/create',
-    component: () => import('@/views/perms/DatabaseAppPermissionCreateUpdate'), // Parent router-view
+    component: () => import('@/views/perms/DatabaseAppPermission/DatabaseAppPermissionCreateUpdate'), // Parent router-view
     name: 'DatabaseAppPermissionCreate',
     hidden: true,
     meta: { title: 'DatabaseAppPermissionCreate', activeMenu: '/perms/database-app-permissions' }
   },
   {
     path: 'database-app-permissions/update',
-    component: () => import('@/views/perms/DatabaseAppPermissionCreateUpdate'), // Parent router-view
+    component: () => import('@/views/perms/DatabaseAppPermission/DatabaseAppPermissionCreateUpdate'), // Parent router-view
     name: 'DatabaseAppPermissionUpdate',
     hidden: true,
     meta: { title: 'DatabaseAppPermissionUpdate', activeMenu: '/perms/database-app-permissions', action: 'update' }
   },
   {
     path: 'database-app-permissions/:id',
-    component: () => import('@/views/perms/DatabaseAppPermissionDetail/index'),
+    component: () => import('@/views/perms/DatabaseAppPermission/DatabaseAppPermissionDetail/index'),
     name: 'DatabaseAppPermissionDetail',
     hidden: true,
     meta: { title: 'DatabaseAppPermissionDetail', activeMenu: '/perms/database-app-permissions' }