acl 前端

cmdb-ui/src/modules/acl/api/resource.js

@@ -26,10 +26,11 @@ 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
   })
 }
 

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=在职' }
   })
 }
 

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="true">
-          <a-radio :value="false"> 否 </a-radio>
+            是
+          </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: '新增资源',

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"

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()

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"

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>

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,21 +16,51 @@
         "
       ></a-input-search>
     </div>
-    <a-spin
+    <a-spin :spinning="loading">
-      :spinning="loading"
+      <vxe-table
-    ><vxe-grid :columns="tableColumns" :data="groups" :max-height="`${windowHeight - 185}px`" highlight-hover-row>
+        stripe
-      <template #id_default="{row}">
+        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>
-      <template #action_default="{row}">
+        </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>
-      <template #pager>
+        </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"
@@ -38,8 +69,7 @@
         @page-change="handlePageChange"
       >
       </vxe-pager>
-      </template> </vxe-grid
+    </a-spin>
-    ></a-spin>
 
     <resourceTypeForm ref="resourceTypeForm" :handleOk="handleOk"> </resourceTypeForm>
   </div>
@@ -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

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,13 +66,14 @@
           ></a-switch>
         </a-space>
       </div>
-      <a-spin
+      <a-spin :spinning="loading">
-        :spinning="loading"
+        <vxe-table
-      ><vxe-grid
+          size="mini"
-        :columns="tableColumns"
+          stripe
+          class="ops-stripe-table"
           :data="tableData"
           highlight-hover-row
-        :max-height="`${windowHeight - 245}px`"
+          :height="`${windowHeight - 280}px`"
           :checkbox-config="{ reserve: true }"
           @checkbox-change="changeCheckbox"
           @checkbox-all="changeCheckbox"
@@ -79,11 +81,37 @@
           row-id="id"
           show-overflow
         >
-        <template #name_header>
+          <!-- 1 -->
-          {{ isGroup ? '资源组名' : '资源名' }}
+          <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>
-        <template #action_default="{row}">
+          </vxe-table-column>
-          <span v-show="isGroup">
+
+          <!-- 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>
@@ -103,8 +131,14 @@
                 <a style="color: red"><a-icon type="delete"/></a>
               </a-popconfirm>
             </template>
-        <template #pager>
+          </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"
@@ -113,8 +147,7 @@
           @page-change="handlePageChange"
         >
         </vxe-pager>
-        </template> </vxe-grid
+      </a-spin>
-      ></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()
         })

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
+      <vxe-table
-        :columns="tableColumns"
+        stripe
+        class="ops-stripe-table"
+        size="mini"
+        resizable
         :data="tableData"
         :max-height="`${windowHeight - 185}px`"
         highlight-hover-row
@@ -26,16 +30,51 @@
         :filter-config="{ remote: true }"
         @filter-change="filterTableMethod"
       >
-        <template #is_app_admin_default="{row}">
+
+        <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>
-        <template #inherit_default="{row}">
+        </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>
-        <template #isVisualRole_default="{row}">
+        </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>
-        <template #action_default="{row}">
+
+        </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="资源列表">
@@ -62,8 +101,15 @@
               </span>
             </div>
           </template>
-        <template #pager>
+        </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"
@@ -72,8 +118,6 @@
         @page-change="handlePageChange"
       >
       </vxe-pager>
-        </template>
-      </vxe-grid>
     </a-spin>
 
     <roleForm ref="roleForm" :allRoles="allRoles" :id2parents="id2parents" :handleOk="handleOk"></roleForm>

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"