From 1436ffb3b2dbeb443bfcdbcf6635244a44e512c7 Mon Sep 17 00:00:00 2001
From: wang-liang0615 <dhuwl0615@163.com>
Date: Fri, 14 Jul 2023 14:34:35 +0800
Subject: [PATCH] =?UTF-8?q?acl=20=E5=89=8D=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cmdb-ui/src/modules/acl/api/resource.js       |  29 ++--
 cmdb-ui/src/modules/acl/api/user.js           |   1 +
 .../modules/acl/views/module/resourceForm.vue |  15 +-
 .../acl/views/module/resourcePermForm.vue     |  13 +-
 .../acl/views/module/resourceTypeForm.vue     |   4 +-
 .../acl/views/module/resourceUserForm.vue     |  13 +-
 .../acl/views/module/triggerPattern.vue       |  11 +-
 .../src/modules/acl/views/resource_types.vue  |  90 +++++++----
 cmdb-ui/src/modules/acl/views/resources.vue   | 135 ++++++++++-------
 cmdb-ui/src/modules/acl/views/roles.vue       | 140 ++++++++++++------
 cmdb-ui/src/modules/acl/views/trigger.vue     |   8 +
 11 files changed, 308 insertions(+), 151 deletions(-)

diff --git a/cmdb-ui/src/modules/acl/api/resource.js b/cmdb-ui/src/modules/acl/api/resource.js
index 3ae9fb3..9510cf9 100644
--- a/cmdb-ui/src/modules/acl/api/resource.js
+++ b/cmdb-ui/src/modules/acl/api/resource.js
@@ -2,7 +2,7 @@ import { axios } from '@/utils/request'
 
 const urlPrefix = '/v1/acl'
 
-export function searchResource (params) {
+export function searchResource(params) {
   return axios({
     url: urlPrefix + `/resources`,
     method: 'GET',
@@ -10,7 +10,7 @@ export function searchResource (params) {
   })
 }
 
-export function addResource (params) {
+export function addResource(params) {
   return axios({
     url: urlPrefix + '/resources',
     method: 'POST',
@@ -18,7 +18,7 @@ export function addResource (params) {
   })
 }
 
-export function updateResourceById (id, params) {
+export function updateResourceById(id, params) {
   return axios({
     url: urlPrefix + `/resources/${id}`,
     method: 'PUT',
@@ -26,14 +26,15 @@ export function updateResourceById (id, params) {
   })
 }
 
-export function deleteResourceById (id) {
+export function deleteResourceById(id, params) {
   return axios({
     url: urlPrefix + `/resources/${id}`,
-    method: 'DELETE'
+    method: 'DELETE',
+    params
   })
 }
 
-export function searchResourceType (params) {
+export function searchResourceType(params) {
   return axios({
     url: urlPrefix + `/resource_types`,
     method: 'GET',
@@ -41,7 +42,7 @@ export function searchResourceType (params) {
   })
 }
 
-export function addResourceType (params) {
+export function addResourceType(params) {
   return axios({
     url: urlPrefix + '/resource_types',
     method: 'POST',
@@ -49,7 +50,7 @@ export function addResourceType (params) {
   })
 }
 
-export function updateResourceTypeById (id, params) {
+export function updateResourceTypeById(id, params) {
   return axios({
     url: urlPrefix + `/resource_types/${id}`,
     method: 'PUT',
@@ -57,7 +58,7 @@ export function updateResourceTypeById (id, params) {
   })
 }
 
-export function deleteResourceTypeById (id) {
+export function deleteResourceTypeById(id) {
   return axios({
     url: urlPrefix + `/resource_types/${id}`,
     method: 'DELETE'
@@ -65,7 +66,7 @@ export function deleteResourceTypeById (id) {
 }
 
 // add resource group
-export function getResourceGroups (params) {
+export function getResourceGroups(params) {
   return axios({
     url: `${urlPrefix}/resource_groups`,
     method: 'GET',
@@ -73,7 +74,7 @@ export function getResourceGroups (params) {
   })
 }
 
-export function addResourceGroup (data) {
+export function addResourceGroup(data) {
   return axios({
     url: `${urlPrefix}/resource_groups`,
     method: 'POST',
@@ -81,7 +82,7 @@ export function addResourceGroup (data) {
   })
 }
 
-export function updateResourceGroup (_id, data) {
+export function updateResourceGroup(_id, data) {
   return axios({
     url: `${urlPrefix}/resource_groups/${_id}`,
     method: 'PUT',
@@ -89,14 +90,14 @@ export function updateResourceGroup (_id, data) {
   })
 }
 
-export function deleteResourceGroup (_id) {
+export function deleteResourceGroup(_id) {
   return axios({
     url: `${urlPrefix}/resource_groups/${_id}`,
     method: 'DELETE'
   })
 }
 
-export function getResourceGroupItems (_id) {
+export function getResourceGroupItems(_id) {
   return axios({
     url: `${urlPrefix}/resource_groups/${_id}/items`,
     method: 'GET'
diff --git a/cmdb-ui/src/modules/acl/api/user.js b/cmdb-ui/src/modules/acl/api/user.js
index 40d6979..a939246 100644
--- a/cmdb-ui/src/modules/acl/api/user.js
+++ b/cmdb-ui/src/modules/acl/api/user.js
@@ -14,6 +14,7 @@ export function getOnDutyUser() {
   return axios({
     url: urlPrefix + '/users/employee',
     method: 'GET',
+    // data: { 'originUrl': 'http://hr.dfc.sh/api/all_users?work_status=在职' }
   })
 }
 
diff --git a/cmdb-ui/src/modules/acl/views/module/resourceForm.vue b/cmdb-ui/src/modules/acl/views/module/resourceForm.vue
index 348ecae..cb53d2e 100644
--- a/cmdb-ui/src/modules/acl/views/module/resourceForm.vue
+++ b/cmdb-ui/src/modules/acl/views/module/resourceForm.vue
@@ -24,8 +24,12 @@
 
       <a-form-item label="是否组">
         <a-radio-group v-model="isGroup">
-          <a-radio :value="true"> 是 </a-radio>
-          <a-radio :value="false"> 否 </a-radio>
+          <a-radio :value="true">
+            是
+          </a-radio>
+          <a-radio :value="false">
+            否
+          </a-radio>
         </a-radio-group>
       </a-form-item>
       <a-form-item>
@@ -40,11 +44,12 @@
 </template>
 
 <script>
-import { addResource, searchResourceType, addResourceGroup } from '@/modules/acl/api/resource'
+/* eslint-disable */
+import { addResource, searchResourceType } from '@/modules/acl/api/resource'
+import { addResourceGroup } from '@/modules/acl/api/resource'
 
 export default {
   name: 'ResourceForm',
-  components: {},
   data() {
     return {
       drawerTitle: '新增资源',
@@ -119,7 +124,7 @@ export default {
     // },
   },
   watch: {
-    '$route.name': function (newValue, oldValue) {
+    '$route.name': function(newValue, oldValue) {
       this.getAllResourceTypes()
     },
   },
diff --git a/cmdb-ui/src/modules/acl/views/module/resourcePermForm.vue b/cmdb-ui/src/modules/acl/views/module/resourcePermForm.vue
index a530bcc..543ea78 100644
--- a/cmdb-ui/src/modules/acl/views/module/resourcePermForm.vue
+++ b/cmdb-ui/src/modules/acl/views/module/resourcePermForm.vue
@@ -7,7 +7,14 @@
     @close="() => (drawerVisible = false)"
     :hasFooter="false"
   >
-    <vxe-table :max-height="`${windowHeight - 150}px`" :data="resPerms" ref="rTable">
+    <vxe-table
+      stripe
+      size="mini"
+      class="ops-stripe-table"
+      :max-height="`${windowHeight - 150}px`"
+      :data="resPerms"
+      ref="rTable"
+    >
       <vxe-column
         field="name"
         title="角色名"
@@ -57,6 +64,10 @@
           </a-button>
         </template>
       </vxe-column>
+      <template slot="empty">
+        <img :src="require(`@/assets/data_empty.png`)" />
+        <p style="font-size: 14px; line-height: 17px; color: rgba(0, 0, 0, 0.6)">暂无数据</p>
+      </template>
     </vxe-table>
     <!-- <a-table
       :columns="columns"
diff --git a/cmdb-ui/src/modules/acl/views/module/resourceTypeForm.vue b/cmdb-ui/src/modules/acl/views/module/resourceTypeForm.vue
index f3d9a93..62b49f8 100644
--- a/cmdb-ui/src/modules/acl/views/module/resourceTypeForm.vue
+++ b/cmdb-ui/src/modules/acl/views/module/resourceTypeForm.vue
@@ -103,7 +103,7 @@ export default {
       })
     },
     updateResourceType(id, data) {
-      updateResourceTypeById(id, data).then(res => {
+      updateResourceTypeById(id, data).then((res) => {
         this.$message.success(`更新成功`)
         this.handleOk()
         this.onClose()
@@ -112,7 +112,7 @@ export default {
     },
 
     createResourceType(data) {
-      addResourceType(data).then(res => {
+      addResourceType(data).then((res) => {
         this.$message.success(`添加成功`)
         this.handleOk()
         this.onClose()
diff --git a/cmdb-ui/src/modules/acl/views/module/resourceUserForm.vue b/cmdb-ui/src/modules/acl/views/module/resourceUserForm.vue
index 7e3a177..c3dec53 100644
--- a/cmdb-ui/src/modules/acl/views/module/resourceUserForm.vue
+++ b/cmdb-ui/src/modules/acl/views/module/resourceUserForm.vue
@@ -12,7 +12,14 @@
         <a-select-option v-for="type in resourceTypes" :value="type.id" :key="type.id">{{ type.name }}</a-select-option>
       </a-select>
     </a-form-item>
-    <vxe-table :max-height="`${windowHeight - 180}px`" :data="records" ref="rTable">
+    <vxe-table
+      size="mini"
+      stripe
+      class="ops-stripe-table"
+      :max-height="`${windowHeight - 180}px`"
+      :data="records"
+      ref="rTable"
+    >
       <vxe-column
         field="name"
         title="资源名"
@@ -46,6 +53,10 @@
           <a-tag color="cyan" v-for="(r, index) in row.permissions" :key="index">{{ r }}</a-tag>
         </template>
       </vxe-column>
+      <template slot="empty">
+        <img :src="require(`@/assets/data_empty.png`)" />
+        <p style="font-size: 14px; line-height: 17px; color: rgba(0, 0, 0, 0.6)">暂无数据</p>
+      </template>
     </vxe-table>
     <!-- <a-table
       :columns="columns"
diff --git a/cmdb-ui/src/modules/acl/views/module/triggerPattern.vue b/cmdb-ui/src/modules/acl/views/module/triggerPattern.vue
index f1b7f38..a606168 100644
--- a/cmdb-ui/src/modules/acl/views/module/triggerPattern.vue
+++ b/cmdb-ui/src/modules/acl/views/module/triggerPattern.vue
@@ -10,7 +10,12 @@
       }
     "
   >
-    <vxe-table :data="tableData" :max-height="`${windowHeight - 110}px`">
+    <vxe-table
+      size="mini"
+      stripe
+      class="ops-stripe-table"
+      :data="tableData"
+      :max-height="`${windowHeight - 110}px`">
       <vxe-table-column field="name" title="资源名"></vxe-table-column>
       <vxe-table-column field="uid" title="创建人">
         <template #default="{row}">
@@ -18,6 +23,10 @@
         </template>
       </vxe-table-column>
       <vxe-table-column field="created_at" title="创建时间"></vxe-table-column>
+      <template slot="empty">
+        <img :src="require(`@/assets/data_empty.png`)" />
+        <p style="font-size: 14px; line-height: 17px; color: rgba(0, 0, 0, 0.6)">暂无数据</p>
+      </template>
     </vxe-table>
   </CustomDrawer>
 </template>
diff --git a/cmdb-ui/src/modules/acl/views/resource_types.vue b/cmdb-ui/src/modules/acl/views/resource_types.vue
index 6a3dd07..55fa655 100644
--- a/cmdb-ui/src/modules/acl/views/resource_types.vue
+++ b/cmdb-ui/src/modules/acl/views/resource_types.vue
@@ -1,8 +1,9 @@
 <template>
   <div :style="{ backgroundColor: '#fff', padding: '24px' }">
     <div class="resource-types-action-btn">
-      <a-button @click="handleCreate" type="primary" style="margin-right: 0.3rem;">{{ btnName }}</a-button>
+      <a-button @click="handleCreate" type="primary" style="margin-right: 0.3rem">{{ btnName }}</a-button>
       <a-input-search
+        class="ops-input"
         :style="{ display: 'inline', marginLeft: '10px', width: '200px' }"
         placeholder="搜索 | 资源类型名"
         v-model="searchName"
@@ -15,31 +16,60 @@
         "
       ></a-input-search>
     </div>
-    <a-spin
-      :spinning="loading"
-    ><vxe-grid :columns="tableColumns" :data="groups" :max-height="`${windowHeight - 185}px`" highlight-hover-row>
-      <template #id_default="{row}">
-        <a-tag color="cyan" v-for="perm in id2perms[row.id]" :key="perm.id">{{ perm.name }}</a-tag>
-      </template>
-      <template #action_default="{row}">
-        <a @click="handleEdit(row)"><a-icon type="edit"/></a>
-        <a-divider type="vertical" />
-        <a-popconfirm title="确认删除?" @confirm="handleDelete(row)" okText="是" cancelText="否">
-          <a style="color: red"><a-icon type="delete"/></a>
-        </a-popconfirm>
-      </template>
-      <template #pager>
-        <vxe-pager
-          :layouts="['Total', 'PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
-          :current-page.sync="tablePage.currentPage"
-          :page-size.sync="tablePage.pageSize"
-          :total="tablePage.total"
-          :page-sizes="pageSizeOptions"
-          @page-change="handlePageChange"
-        >
-        </vxe-pager>
-      </template> </vxe-grid
-    ></a-spin>
+    <a-spin :spinning="loading">
+      <vxe-table
+        stripe
+        size="mini"
+        class="ops-stripe-table"
+        :data="groups"
+        :max-height="`${windowHeight - 185}px`"
+        highlight-hover-row
+      >
+        <!-- 1 -->
+        <vxe-table-column
+          field="name"
+          title="资源类型名"
+          :min-width="175"
+          fixed="left"
+          show-overflow
+        ></vxe-table-column>
+
+        <!-- 2 -->
+        <vxe-table-column field="description" title="描述" :min-width="175"></vxe-table-column>
+
+        <!-- 3 -->
+        <vxe-table-column field="id" title="权限" :min-width="300">
+          <template #default="{ row }">
+            <a-tag color="cyan" v-for="perm in id2perms[row.id]" :key="perm.id">{{ perm.name }}</a-tag>
+          </template>
+        </vxe-table-column>
+
+        <!-- 4 -->
+        <vxe-table-column field="action" title="操作" :min-width="175" fixed="right">
+          <template #default="{ row }">
+            <a @click="handleEdit(row)"><a-icon type="edit" /></a>
+            <a-divider type="vertical" />
+            <a-popconfirm title="确认删除?" @confirm="handleDelete(row)" okText="是" cancelText="否">
+              <a style="color: red"><a-icon type="delete" /></a>
+            </a-popconfirm>
+          </template>
+        </vxe-table-column>
+        <template slot="empty">
+          <img :src="require(`@/assets/data_empty.png`)" />
+          <p style="font-size: 14px; line-height: 17px; color: rgba(0, 0, 0, 0.6)">暂无数据</p>
+        </template>
+      </vxe-table>
+      <vxe-pager
+        size="mini"
+        :layouts="['Total', 'PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
+        :current-page.sync="tablePage.currentPage"
+        :page-size.sync="tablePage.pageSize"
+        :total="tablePage.total"
+        :page-sizes="pageSizeOptions"
+        @page-change="handlePageChange"
+      >
+      </vxe-pager>
+    </a-spin>
 
     <resourceTypeForm ref="resourceTypeForm" :handleOk="handleOk"> </resourceTypeForm>
   </div>
@@ -110,7 +140,7 @@ export default {
     }),
   },
   watch: {
-    '$route.name': function(newName, oldName) {
+    '$route.name': function (newName, oldName) {
       this.tablePage = {
         total: 0,
         currentPage: 1,
@@ -141,7 +171,11 @@ export default {
         q: this.searchName,
       }
       searchResourceType(param).then((res) => {
-        this.tablePage = { ...this.tablePage, total: res.numfound, currentPage: res.page }
+        this.tablePage = {
+          ...this.tablePage,
+          total: res.numfound,
+          currentPage: res.page,
+        }
         this.groups = res.groups
         this.id2perms = res.id2perms
         this.loading = false
diff --git a/cmdb-ui/src/modules/acl/views/resources.vue b/cmdb-ui/src/modules/acl/views/resources.vue
index 614ab41..9b33656 100644
--- a/cmdb-ui/src/modules/acl/views/resources.vue
+++ b/cmdb-ui/src/modules/acl/views/resources.vue
@@ -8,6 +8,7 @@
         <a-space>
           <a-button @click="handleCreate" type="primary">{{ btnName }}</a-button>
           <a-input-search
+            class="ops-input"
             placeholder="搜索 | 资源名"
             v-model="searchName"
             @search="
@@ -65,56 +66,88 @@
           ></a-switch>
         </a-space>
       </div>
-      <a-spin
-        :spinning="loading"
-      ><vxe-grid
-        :columns="tableColumns"
-        :data="tableData"
-        highlight-hover-row
-        :max-height="`${windowHeight - 245}px`"
-        :checkbox-config="{ reserve: true }"
-        @checkbox-change="changeCheckbox"
-        @checkbox-all="changeCheckbox"
-        ref="xTable"
-        row-id="id"
-        show-overflow
-      >
-        <template #name_header>
-          {{ isGroup ? '资源组名' : '资源名' }}
-        </template>
-        <template #action_default="{row}">
-          <span v-show="isGroup">
-            <a @click="handleDisplayMember(row)">成员</a>
-            <a-divider type="vertical" />
-            <a @click="handleGroupEdit(row)">编辑</a>
-            <a-divider type="vertical" />
-          </span>
-          <a-tooltip title="查看授权">
-            <a @click="handlePerm(row)"><a-icon type="eye"/></a>
-          </a-tooltip>
-          <a-divider type="vertical" />
-          <a-tooltip title="授权">
-            <a :style="{ color: '#4bbb13' }" @click="handlePermManage(row)">
-              <a-icon type="usergroup-add" />
-            </a>
-          </a-tooltip>
-          <a-divider type="vertical" />
-          <a-popconfirm title="确认删除?" @confirm="handleDelete(row)" @cancel="cancel" okText="是" cancelText="否">
-            <a style="color: red"><a-icon type="delete"/></a>
-          </a-popconfirm>
-        </template>
-        <template #pager>
-          <vxe-pager
-            :layouts="['Total', 'PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
-            :current-page.sync="tablePage.currentPage"
-            :page-size.sync="tablePage.pageSize"
-            :total="tablePage.total"
-            :page-sizes="pageSizeOptions"
-            @page-change="handlePageChange"
-          >
-          </vxe-pager>
-        </template> </vxe-grid
-      ></a-spin>
+      <a-spin :spinning="loading">
+        <vxe-table
+          size="mini"
+          stripe
+          class="ops-stripe-table"
+          :data="tableData"
+          highlight-hover-row
+          :height="`${windowHeight - 280}px`"
+          :checkbox-config="{ reserve: true }"
+          @checkbox-change="changeCheckbox"
+          @checkbox-all="changeCheckbox"
+          ref="xTable"
+          row-id="id"
+          show-overflow
+        >
+          <!-- 1 -->
+          <vxe-table-column type="checkbox" fixed="left"></vxe-table-column>
+
+          <!-- 2 -->
+
+          <vxe-table-column field="name" title="资源名" :min-widh="150" fixed="left" show-overflow>
+            <template #title="{row}">
+              {{ row.isGroup ? '资源组名' : '资源名' }}
+            </template>
+          </vxe-table-column>
+
+          <!-- 3 -->
+          <vxe-table-column field="user" title="创建者" :min-widh="100"> </vxe-table-column>
+
+          <!-- 4 -->
+          <vxe-table-column field="created_at" title="创建时间" :min-widh="220" align="center"> </vxe-table-column>
+
+          <!-- 5 -->
+          <vxe-table-column field="updated_at" title="最后修改时间" :min-widh="220" fixed="center"> </vxe-table-column>
+
+          <!-- 6 -->
+
+          <vxe-table-column
+            field="action"
+            title="操作"
+            :min-widh="200"
+            fixed="right"
+            align="center"
+            show-overflow>
+            <template #default="{row}">
+              <span v-show="row.isGroup">
+                <a @click="handleDisplayMember(row)">成员</a>
+                <a-divider type="vertical" />
+                <a @click="handleGroupEdit(row)">编辑</a>
+                <a-divider type="vertical" />
+              </span>
+              <a-tooltip title="查看授权">
+                <a @click="handlePerm(row)"><a-icon type="eye"/></a>
+              </a-tooltip>
+              <a-divider type="vertical" />
+              <a-tooltip title="授权">
+                <a :style="{ color: '#4bbb13' }" @click="handlePermManage(row)">
+                  <a-icon type="usergroup-add" />
+                </a>
+              </a-tooltip>
+              <a-divider type="vertical" />
+              <a-popconfirm title="确认删除?" @confirm="handleDelete(row)" @cancel="cancel" okText="是" cancelText="否">
+                <a style="color: red"><a-icon type="delete"/></a>
+              </a-popconfirm>
+            </template>
+          </vxe-table-column>
+          <template slot="empty">
+            <img :src="require(`@/assets/data_empty.png`)" />
+            <p style="font-size: 14px; line-height: 17px; color: rgba(0, 0, 0, 0.6)">暂无数据</p>
+          </template>
+        </vxe-table>
+        <vxe-pager
+          size="mini"
+          :layouts="['Total', 'PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
+          :current-page.sync="tablePage.currentPage"
+          :page-size.sync="tablePage.pageSize"
+          :total="tablePage.total"
+          :page-sizes="pageSizeOptions"
+          @page-change="handlePageChange"
+        >
+        </vxe-pager>
+      </a-spin>
     </div>
     <div v-else style="text-align: center">
       <a-icon style="font-size:50px; margin-bottom: 20px; color: orange" type="info-circle" />
@@ -304,7 +337,7 @@ export default {
     },
     deleteResource(id) {
       if (!this.isGroup) {
-        deleteResourceById(id).then((res) => {
+        deleteResourceById(id, { app_id: this.$route.name.split('_')[0] }).then((res) => {
           this.$message.success(`删除成功`)
           this.handleOk()
         })
diff --git a/cmdb-ui/src/modules/acl/views/roles.vue b/cmdb-ui/src/modules/acl/views/roles.vue
index 7bd90a4..aaab0a6 100644
--- a/cmdb-ui/src/modules/acl/views/roles.vue
+++ b/cmdb-ui/src/modules/acl/views/roles.vue
@@ -3,6 +3,7 @@
     <div class="roles-action-btn">
       <a-button @click="handleCreate" type="primary">{{ btnName }}</a-button>
       <a-input-search
+        class="ops-input"
         allowClear
         :style="{ display: 'inline', marginLeft: '10px', width: '200px' }"
         placeholder="搜索 | 角色名"
@@ -17,8 +18,11 @@
       <a-checkbox :checked="is_all" @click="handleClickBoxChange">所有角色</a-checkbox>
     </div>
     <a-spin :spinning="loading">
-      <vxe-grid
-        :columns="tableColumns"
+      <vxe-table
+        stripe
+        class="ops-stripe-table"
+        size="mini"
+        resizable
         :data="tableData"
         :max-height="`${windowHeight - 185}px`"
         highlight-hover-row
@@ -26,54 +30,94 @@
         :filter-config="{ remote: true }"
         @filter-change="filterTableMethod"
       >
-        <template #is_app_admin_default="{row}">
-          <a-icon type="check" v-if="row.is_app_admin" />
-        </template>
-        <template #inherit_default="{row}">
-          <a-tag color="cyan" v-for="role in id2parents[row.id]" :key="role.id">{{ role.name }}</a-tag>
-        </template>
-        <template #isVisualRole_default="{row}">
-          {{ row.uid ? '否' : '是' }}
-        </template>
-        <template #action_default="{row}">
-          <div style="width:300px">
-            <span>
-              <a-tooltip title="资源列表">
-                <a
-                  v-if="$route.name !== 'acl_roles'"
-                  @click="handleDisplayUserResource(row)"
-                ><a-icon
-                  type="file-search"
-                /></a>
-              </a-tooltip>
-              <a-divider type="vertical" />
-              <div v-if="!row.uid" style="display: inline-block">
-                <a-tooltip
-                  title="用户列表"
-                ><a @click="handleDisplayUserUnderRole(row)"><a-icon type="team"/></a
-                ></a-tooltip>
+
+        <vxe-table-column
+          field="name"
+          title="角色名"
+          :min-width="150"
+          align="left"
+          fixed="left"
+          sortable
+          show-overflow>
+        </vxe-table-column>
+
+        <!-- 2 -->
+        <vxe-table-column field="is_app_admin" title="管理员" :min-width="100" align="center">
+          <template #default="{row}">
+            <a-icon type="check" v-if="row.is_app_admin" />
+          </template>
+        </vxe-table-column>
+
+        <vxe-table-column field="id" title="继承自" :min-width="150">
+          <template #default="{row}">
+            <a-tag color="cyan" v-for="role in id2parents[row.id]" :key="role.id">{{ role.name }}</a-tag>
+          </template>
+        </vxe-table-column>
+
+        <vxe-table-column
+          field="uid"
+          title="虚拟角色"
+          :min-width="100"
+          align="center"
+          :filters="[
+            { label: '是', value: 1 },
+            { label: '否', value: 0 },
+          ]"
+          :filterMultiple="false"
+          :filter-method="({ value, row }) => {
+            return value === !row.uid
+          }">
+          <template #default="{row}">
+            {{ row.uid ? '否' : '是' }}
+          </template>
+
+        </vxe-table-column>
+
+        <vxe-table-column field="action" title="操作" :min-width="150" fixed="right">
+          <template #default="{row}">
+            <div style="width:300px">
+              <span>
+                <a-tooltip title="资源列表">
+                  <a
+                    v-if="$route.name !== 'acl_roles'"
+                    @click="handleDisplayUserResource(row)"
+                  ><a-icon
+                    type="file-search"
+                  /></a>
+                </a-tooltip>
                 <a-divider type="vertical" />
-              </div>
-              <a @click="handleEdit(row)"><a-icon type="edit"/></a>
-              <a-divider type="vertical" />
-              <a-popconfirm title="确认删除?" @confirm="handleDelete(row)" @cancel="cancel" okText="是" cancelText="否">
-                <a style="color: red"><a-icon type="delete"/></a>
-              </a-popconfirm>
-            </span>
-          </div>
+                <div v-if="!row.uid" style="display: inline-block">
+                  <a-tooltip
+                    title="用户列表"
+                  ><a @click="handleDisplayUserUnderRole(row)"><a-icon type="team"/></a
+                  ></a-tooltip>
+                  <a-divider type="vertical" />
+                </div>
+                <a @click="handleEdit(row)"><a-icon type="edit"/></a>
+                <a-divider type="vertical" />
+                <a-popconfirm title="确认删除?" @confirm="handleDelete(row)" @cancel="cancel" okText="是" cancelText="否">
+                  <a style="color: red"><a-icon type="delete"/></a>
+                </a-popconfirm>
+              </span>
+            </div>
+          </template>
+        </vxe-table-column>
+
+        <template slot="empty">
+          <img :src="require(`@/assets/data_empty.png`)" />
+          <p style="font-size: 14px; line-height: 17px; color: rgba(0, 0, 0, 0.6)">暂无数据</p>
         </template>
-        <template #pager>
-          <vxe-pager
-            :layouts="['Total', 'PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
-            :current-page.sync="tablePage.currentPage"
-            :page-size.sync="tablePage.pageSize"
-            :total="tablePage.total"
-            :page-sizes="pageSizeOptions"
-            @page-change="handlePageChange"
-          >
-          </vxe-pager>
-        </template>
-      </vxe-grid>
+      </vxe-table>
+      <vxe-pager
+        size="mini"
+        :layouts="['Total', 'PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
+        :current-page.sync="tablePage.currentPage"
+        :page-size.sync="tablePage.pageSize"
+        :total="tablePage.total"
+        :page-sizes="pageSizeOptions"
+        @page-change="handlePageChange"
+      >
+      </vxe-pager>
     </a-spin>
 
     <roleForm ref="roleForm" :allRoles="allRoles" :id2parents="id2parents" :handleOk="handleOk"></roleForm>
diff --git a/cmdb-ui/src/modules/acl/views/trigger.vue b/cmdb-ui/src/modules/acl/views/trigger.vue
index 7bf15a4..61b2322 100644
--- a/cmdb-ui/src/modules/acl/views/trigger.vue
+++ b/cmdb-ui/src/modules/acl/views/trigger.vue
@@ -3,6 +3,7 @@
     <div class="trigger-action-btn">
       <a-button type="primary" @click="handleCreateTrigger">新增触发器</a-button>
       <a-input-search
+        class="ops-input"
         :style="{ display: 'inline', marginLeft: '10px', width: '200px' }"
         placeholder="搜索 | 名称"
         v-model="searchName"
@@ -12,6 +13,9 @@
     </div>
 
     <vxe-grid
+      stripe
+      size="mini"
+      class="ops-stripe-table"
       :columns="tableColumns"
       :data="filterTriggers"
       :max-height="`${windowHeight - 185}px`"
@@ -60,6 +64,10 @@
           <a @click="handleDeleteTrigger(row)" :style="{ color: 'red' }"><a-icon type="delete"/></a>
         </a-space>
       </template>
+      <template slot="empty">
+        <img :src="require(`@/assets/data_empty.png`)" />
+        <p style="font-size: 14px; line-height: 17px; color: rgba(0, 0, 0, 0.6)">暂无数据</p>
+      </template>
     </vxe-grid>
     <trigger-form
       ref="triggerForm"