From d3c297d24fded7b19c2115121114b4488e6586c5 Mon Sep 17 00:00:00 2001
From: Bai <baijiangjie@gmail.com>
Date: Sun, 4 Dec 2022 20:01:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20CommandFilterAclDe?=
 =?UTF-8?q?tail,=20CommandGroupDetail=20=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/langs/en.json                        |  2 +
 src/i18n/langs/ja.json                        |  2 +
 src/i18n/langs/zh.json                        |  2 +
 src/router/console/perms.js                   | 34 +++++++---
 .../AssetAclDetail/{detail.vue => Detail.vue} |  2 +-
 .../acl/AssetAcl/AssetAclDetail/index.vue     |  8 +--
 .../CommandFilterAclDetail.vue                | 13 ----
 .../CommandFilterAclDetail/Detail.vue         | 66 +++++++++++++++++++
 .../CommandFilterAclDetail/index.vue          | 46 +++++++++++++
 .../CommandFilterAcl/CommandFilterAclList.vue |  7 ++
 .../CommandGroup/CommandGroupDetail.vue       | 13 ----
 .../CommandGroupDetail/Detail.vue             | 58 ++++++++++++++++
 .../CommandGroup/CommandGroupDetail/index.vue | 46 +++++++++++++
 .../CommandGroup/CommandGroupList.vue         |  7 ++
 14 files changed, 265 insertions(+), 41 deletions(-)
 rename src/views/acl/AssetAcl/AssetAclDetail/{detail.vue => Detail.vue} (97%)
 delete mode 100644 src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail.vue
 create mode 100644 src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail/Detail.vue
 create mode 100644 src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail/index.vue
 delete mode 100644 src/views/acl/CommandAcl/CommandGroup/CommandGroupDetail.vue
 create mode 100644 src/views/acl/CommandAcl/CommandGroup/CommandGroupDetail/Detail.vue
 create mode 100644 src/views/acl/CommandAcl/CommandGroup/CommandGroupDetail/index.vue

diff --git a/src/i18n/langs/en.json b/src/i18n/langs/en.json
index 8539ff7d2..82a53d5a9 100644
--- a/src/i18n/langs/en.json
+++ b/src/i18n/langs/en.json
@@ -9,6 +9,8 @@
     "PleaseClickLeftAssetToViewGatheredUser": "Gathered user list, please click on the assets on the left to view"
   },
   "acl": {
+    "IgnoreCase": "Ignore case",
+    "Content": "Content",
     "CommandFilterACL": "Command filter",
     "CommandGroup": "Command group",
     "name": "Name",
diff --git a/src/i18n/langs/ja.json b/src/i18n/langs/ja.json
index 203f054e7..9ad30fcd8 100644
--- a/src/i18n/langs/ja.json
+++ b/src/i18n/langs/ja.json
@@ -9,6 +9,8 @@
     "PleaseClickLeftAssetToViewGatheredUser": "ユーザーリストを収集し、左側の資産をクリックして表示します。"
   },
   "acl": {
+    "IgnoreCase": "大文字小文字を無視する",
+    "Content": "コンテンツ",
     "CommandFilterACL": "命令フィルタリング",
     "CommandGroup": "コマンドグループ",
     "name": "名前",
diff --git a/src/i18n/langs/zh.json b/src/i18n/langs/zh.json
index 1e0d1d8b2..b5bf49e3f 100644
--- a/src/i18n/langs/zh.json
+++ b/src/i18n/langs/zh.json
@@ -9,6 +9,8 @@
     "PleaseClickLeftAssetToViewGatheredUser": "收集用户列表，点击左侧资产进行查看"
   },
   "acl": {
+    "IgnoreCase": "忽略大小写",
+    "Content": "内容",
     "CommandFilterACL": "命令过滤",
     "CommandGroup": "命令组",
     "name": "名称",
diff --git a/src/router/console/perms.js b/src/router/console/perms.js
index fabefef52..966a6c9a9 100644
--- a/src/router/console/perms.js
+++ b/src/router/console/perms.js
@@ -66,7 +66,7 @@ export default [
       {
         path: ':id',
         name: 'AssetAclDetail',
-        component: () => import('@/views/acl/AssetAcl/AssetAclDetail'),
+        component: () => import('@/views/acl/AssetAcl/AssetAclDetail/index'),
         hidden: true,
         meta: { title: i18n.t('route.AssetAclDetail') }
       },
@@ -86,7 +86,8 @@ export default [
     meta: {
       title: i18n.t('route.CommandFilterAclList'),
       app: 'acls',
-      resource: 'commandfilteracl'
+      resource: 'commandfilteracl',
+      activeMenu: '/console/perms/cmd-acls'
     },
     children: [
       // Command Filter ACL
@@ -107,7 +108,7 @@ export default [
       {
         path: ':id',
         name: 'CommandFilterAclDetail',
-        component: () => import('@/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail'),
+        component: () => import('@/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail/index'),
         hidden: true,
         meta: { title: i18n.t('route.CommandFilterAclDetail') }
       },
@@ -127,7 +128,8 @@ export default [
     meta: {
       title: i18n.t('route.CommandGroupList'),
       app: 'acls',
-      resource: 'commandgroup'
+      resource: 'commandgroup',
+      activeMenu: '/console/perms/cmd-acls'
     },
     hidden: true,
     children: [
@@ -135,30 +137,42 @@ export default [
       {
         path: '',
         name: 'CommandGroupList',
-        component: () => import('@/views/acl/CommandAcl/CommandGroup/CommandGroupList'),
+        component: () => import('@/views/acl/CommandAcl/index'),
         hidden: true,
-        meta: { title: i18n.t('route.CommandGroupList') }
+        meta: {
+          title: i18n.t('route.CommandGroupList'),
+          activeMenu: '/console/perms/cmd-acls'
+        }
       },
       {
         path: 'create',
         name: 'CommandGroupCreate',
         component: () => import('@/views/acl/CommandAcl/CommandGroup/CommandGroupCreateUpdate'),
         hidden: true,
-        meta: { title: i18n.t('route.CommandGroupCreate') }
+        meta: {
+          title: i18n.t('route.CommandGroupCreate'),
+          activeMenu: '/console/perms/cmd-acls'
+        }
       },
       {
         path: ':id',
         name: 'CommandGroupDetail',
-        component: () => import('@/views/acl/CommandAcl/CommandGroup/CommandGroupDetail'),
+        component: () => import('@/views/acl/CommandAcl/CommandGroup/CommandGroupDetail/index'),
         hidden: true,
-        meta: { title: i18n.t('route.CommandGroupDetail') }
+        meta: {
+          title: i18n.t('route.CommandGroupDetail'),
+          activeMenu: '/console/perms/cmd-acls'
+        }
       },
       {
         path: ':id/update',
         name: 'CommandGroupUpdate',
         component: () => import('@/views/acl/CommandAcl/CommandGroup/CommandGroupCreateUpdate'),
         hidden: true,
-        meta: { title: i18n.t('route.CommandGroupUpdate') }
+        meta: {
+          title: i18n.t('route.CommandGroupUpdate'),
+          activeMenu: '/console/perms/cmd-acls'
+        }
       }
     ]
   }
diff --git a/src/views/acl/AssetAcl/AssetAclDetail/detail.vue b/src/views/acl/AssetAcl/AssetAclDetail/Detail.vue
similarity index 97%
rename from src/views/acl/AssetAcl/AssetAclDetail/detail.vue
rename to src/views/acl/AssetAcl/AssetAclDetail/Detail.vue
index a709e5edb..db28de23f 100644
--- a/src/views/acl/AssetAcl/AssetAclDetail/detail.vue
+++ b/src/views/acl/AssetAcl/AssetAclDetail/Detail.vue
@@ -46,7 +46,7 @@ export default {
           value: this.object.assets.address_group.toString()
         },
         {
-          key: this.$t('acl.account_username'),
+          key: this.$t('acl.AccountUsername'),
           value: this.object.accounts.username_group.toString()
         },
         {
diff --git a/src/views/acl/AssetAcl/AssetAclDetail/index.vue b/src/views/acl/AssetAcl/AssetAclDetail/index.vue
index c7e0fff23..6111e2f96 100644
--- a/src/views/acl/AssetAcl/AssetAclDetail/index.vue
+++ b/src/views/acl/AssetAcl/AssetAclDetail/index.vue
@@ -8,21 +8,21 @@
 
 <script>
 import { GenericDetailPage } from '@/layout/components'
-import detail from './detail.vue'
+import Detail from './Detail.vue'
 export default {
   components: {
     GenericDetailPage,
-    detail
+    Detail
   },
   data() {
     return {
       TaskDetail: {},
       config: {
-        activeMenu: 'detail',
+        activeMenu: 'Detail',
         submenu: [
           {
             title: this.$t('acl.RuleDetail'),
-            name: 'detail'
+            name: 'Detail'
           }
         ],
         hasRightSide: true,
diff --git a/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail.vue b/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail.vue
deleted file mode 100644
index 49c52f774..000000000
--- a/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div />
-</template>
-
-<script>
-export default {
-  name: 'CommandFilterAclDetail'
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail/Detail.vue b/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail/Detail.vue
new file mode 100644
index 000000000..eeb0edf71
--- /dev/null
+++ b/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail/Detail.vue
@@ -0,0 +1,66 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :md="14" :sm="24">
+      <DetailCard :items="detailCardItems" />
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import DetailCard from '@/components/DetailCard'
+
+export default {
+  name: 'CommandFilterAclDetail',
+  components: {
+    DetailCard
+  },
+  props: {
+    object: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  computed: {
+    detailCardItems() {
+      return [
+        {
+          key: this.$t('common.Name'),
+          value: this.object.name
+        },
+        {
+          key: this.$t('acl.UserUsername'),
+          value: this.object.users.username_group.toString()
+        },
+        {
+          key: this.$t('acl.AssetName'),
+          value: this.object.assets.name_group.toString()
+        },
+        {
+          key: this.$t('acl.AssetAddress'),
+          value: this.object.assets.address_group.toString()
+        },
+        {
+          key: this.$t('acl.AccountUsername'),
+          value: this.object.accounts.username_group.toString()
+        },
+        {
+          key: this.$t('acl.CommandGroup'),
+          value: this.object.command_groups.map((commandGroup) => { return commandGroup.name }).join(' | ')
+        },
+        {
+          key: this.$t('assets.Comment'),
+          value: this.object.comment
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail/index.vue b/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail/index.vue
new file mode 100644
index 000000000..506655614
--- /dev/null
+++ b/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <GenericDetailPage
+    :object.sync="CommandFilterAcl"
+    :active-menu.sync="config.activeMenu"
+    v-bind="config"
+    v-on="$listeners"
+  >
+    <keep-alive>
+      <component :is="config.activeMenu" :object="CommandFilterAcl" />
+    </keep-alive>
+  </GenericDetailPage>
+</template>
+
+<script>
+import { GenericDetailPage, TabPage } from '@/layout/components'
+import Detail from './Detail.vue'
+
+export default {
+  components: {
+    GenericDetailPage,
+    TabPage,
+    Detail
+  },
+  data() {
+    return {
+      CommandFilterAcl: {},
+      config: {
+        url: '/api/v1/acls/command-filter-acls',
+        activeMenu: 'Detail',
+        submenu: [
+          {
+            title: this.$t('common.BasicInfo'),
+            name: 'Detail'
+          }
+        ],
+        actions: {
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclList.vue b/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclList.vue
index fcd6e9575..f6ec73985 100644
--- a/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclList.vue
+++ b/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclList.vue
@@ -4,6 +4,7 @@
 
 <script>
 import { ListTable } from '@/components'
+import { DetailFormatter } from '@/components/TableFormatters'
 
 export default {
   components: {
@@ -31,6 +32,12 @@ export default {
           ]
         },
         columnsMeta: {
+          name: {
+            formatter: DetailFormatter,
+            formatterArgs: {
+              route: 'CommandFilterAclDetail'
+            }
+          },
           user_username_group: {
             prop: 'users.username_group',
             showOverflowTooltip: true,
diff --git a/src/views/acl/CommandAcl/CommandGroup/CommandGroupDetail.vue b/src/views/acl/CommandAcl/CommandGroup/CommandGroupDetail.vue
deleted file mode 100644
index b64e6ce67..000000000
--- a/src/views/acl/CommandAcl/CommandGroup/CommandGroupDetail.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div />
-</template>
-
-<script>
-export default {
-  name: 'CommandGroupDetail'
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/acl/CommandAcl/CommandGroup/CommandGroupDetail/Detail.vue b/src/views/acl/CommandAcl/CommandGroup/CommandGroupDetail/Detail.vue
new file mode 100644
index 000000000..ef3fe8700
--- /dev/null
+++ b/src/views/acl/CommandAcl/CommandGroup/CommandGroupDetail/Detail.vue
@@ -0,0 +1,58 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :md="14" :sm="24">
+      <DetailCard :items="detailCardItems" />
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import DetailCard from '@/components/DetailCard'
+
+export default {
+  name: 'CommandGroupDetail',
+  components: {
+    DetailCard
+  },
+  props: {
+    object: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  computed: {
+    detailCardItems() {
+      return [
+        {
+          key: this.$t('common.Name'),
+          value: this.object.name
+        },
+        {
+          key: this.$t('assets.Type'),
+          value: this.object.type.label
+        },
+        {
+          key: this.$t('acl.IgnoreCase'),
+          value: this.object.ignore_case
+        },
+        {
+          key: this.$t('acl.Content'),
+          value: this.object.content
+        },
+        {
+          key: this.$t('assets.Comment'),
+          value: this.object.comment
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/acl/CommandAcl/CommandGroup/CommandGroupDetail/index.vue b/src/views/acl/CommandAcl/CommandGroup/CommandGroupDetail/index.vue
new file mode 100644
index 000000000..c02b8ef59
--- /dev/null
+++ b/src/views/acl/CommandAcl/CommandGroup/CommandGroupDetail/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <GenericDetailPage
+    :object.sync="CommandGroup"
+    :active-menu.sync="config.activeMenu"
+    v-bind="config"
+    v-on="$listeners"
+  >
+    <keep-alive>
+      <component :is="config.activeMenu" :object="CommandGroup" />
+    </keep-alive>
+  </GenericDetailPage>
+</template>
+
+<script>
+import { GenericDetailPage, TabPage } from '@/layout/components'
+import Detail from './Detail.vue'
+
+export default {
+  components: {
+    GenericDetailPage,
+    TabPage,
+    Detail
+  },
+  data() {
+    return {
+      CommandGroup: {},
+      config: {
+        url: '/api/v1/acls/command-groups',
+        activeMenu: 'Detail',
+        submenu: [
+          {
+            title: this.$t('common.BasicInfo'),
+            name: 'Detail'
+          }
+        ],
+        actions: {
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/acl/CommandAcl/CommandGroup/CommandGroupList.vue b/src/views/acl/CommandAcl/CommandGroup/CommandGroupList.vue
index 39083a170..7a2e87e86 100644
--- a/src/views/acl/CommandAcl/CommandGroup/CommandGroupList.vue
+++ b/src/views/acl/CommandAcl/CommandGroup/CommandGroupList.vue
@@ -4,6 +4,7 @@
 
 <script>
 import { ListTable } from '@/components'
+import { DetailFormatter } from '@/components/TableFormatters'
 
 export default {
   components: {
@@ -25,6 +26,12 @@ export default {
           default: ['name', 'content', 'actions']
         },
         columnsMeta: {
+          name: {
+            formatter: DetailFormatter,
+            formatterArgs: {
+              route: 'CommandGroupDetail'
+            }
+          },
           actions: {
             formatterArgs: {
               updateRoute: 'CommandGroupUpdate'