diff --git a/cmdb-ui/src/components/RoleTransfer/index.js b/cmdb-ui/src/components/RoleTransfer/index.js
new file mode 100644
index 0000000..d7698dc
--- /dev/null
+++ b/cmdb-ui/src/components/RoleTransfer/index.js
@@ -0,0 +1,2 @@
+import RolesTransfer from './index.vue'
+export default RolesTransfer
diff --git a/cmdb-ui/src/components/RoleTransfer/index.vue b/cmdb-ui/src/components/RoleTransfer/index.vue
new file mode 100644
index 0000000..d08bf62
--- /dev/null
+++ b/cmdb-ui/src/components/RoleTransfer/index.vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="role-transfer" :style="{ height: `${height}px` }">
+    <a-switch
+      class="role-transfer-switch"
+      v-model="isUserRole"
+      checked-children="用户"
+      un-checked-children="虚拟"
+      @change="loadRoles"
+    />
+    <div class="role-transfer-left">
+      <a-input placeholder="请输入搜索内容" v-model="searchValue" />
+      <div v-for="item in filterAllRoles" :key="item.id" @click="handleSelectedLeft(item.id)">
+        <a-checkbox :checked="selectedLeft.includes(item.id)" />
+        <div :title="item.name" class="role-transfer-left-role">{{ item.name }}</div>
+      </div>
+    </div>
+    <div class="role-transfer-operation">
+      <div @click="handleRight" class="operation-right"><a-icon type="right" /></div>
+      <br />
+      <div @click="handleLeft" class="operation-left"><a-icon type="left" /></div>
+    </div>
+    <div class="role-transfer-right">
+      <div
+        :class="{
+          'role-transfer-right-item': true,
+          'role-transfer-right-selected': selectedRight.includes(right),
+        }"
+        v-for="right in rightData"
+        :key="right"
+        @click="handleSelectedRight(right)"
+      >
+        {{ getLabel(right) }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { searchRole } from '@/modules/acl/api/role'
+
+export default {
+  name: 'RoleTransfer',
+  props: {
+    height: {
+      type: Number,
+      default: 260,
+    },
+    app_id: {
+      type: String,
+      default: '',
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isUserRole: false,
+      allRoles: [],
+      rightData: [],
+      selectedLeft: [],
+      selectedRight: [],
+      searchValue: '',
+    }
+  },
+  computed: {
+    filterAllRoles() {
+      if (this.searchValue) {
+        return this.allRoles.filter((item) => item.name.toLowerCase().includes(this.searchValue.toLowerCase()))
+      }
+      return this.allRoles
+    },
+  },
+  mounted() {
+    this.loadRoles()
+  },
+  methods: {
+    loadRoles() {
+      searchRole({ page_size: 9999, app_id: this.app_id, user_role: Number(this.isUserRole) }).then((res) => {
+        this.allRoles = res.roles
+      })
+    },
+    handleRight() {
+      this.rightData = [...new Set([...this.selectedLeft, ...this.rightData])]
+      this.selectedLeft = []
+      this.selectedRight = []
+    },
+    handleLeft() {
+      this.selectedRight.forEach((id) => {
+        const _idx = this.rightData.findIndex((item) => item === id)
+        if (_idx > -1) {
+          this.rightData.splice(_idx, 1)
+        }
+      })
+      this.selectedRight = []
+    },
+    handleSelectedLeft(id) {
+      const _idx = this.selectedLeft.findIndex((item) => item === id)
+      if (_idx > -1) {
+        this.selectedLeft.splice(_idx, 1)
+      } else {
+        this.selectedLeft.push(id)
+      }
+    },
+    handleSelectedRight(id) {
+      const _idx = this.selectedRight.findIndex((item) => item === id)
+      if (_idx > -1) {
+        this.selectedRight.splice(_idx, 1)
+      } else {
+        this.selectedRight.push(id)
+      }
+    },
+    getLabel(id) {
+      const _find = this.allRoles.find((item) => item.id === id)
+      return _find?.name
+    },
+    getValues() {
+      return this.rightData.map((right) => {
+        const _find = this.allRoles.find((item) => item.id === right)
+        return {
+          id: right,
+          name: _find?.name ?? right,
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+@import '~@/style/static.less';
+.role-transfer {
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  & &-switch {
+    position: absolute;
+    top: -30px;
+    left: 0;
+  }
+  & &-left,
+  & &-right {
+    width: 40%;
+    background-color: #f9fbff;
+    border: 1px solid #e4e7ed;
+    border-radius: 4px;
+    height: var(--custom-height);
+    overflow: auto;
+  }
+  & &-left {
+    padding: 12px;
+    > div {
+      display: flex;
+      align-items: center;
+      height: 30px;
+    }
+    .role-transfer-left-role {
+      display: inline-block;
+      margin-left: 12px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      width: calc(100% - 30px);
+      cursor: pointer;
+    }
+  }
+  & &-right {
+    padding-top: 12px;
+    overflow: auto;
+    .role-transfer-right-item {
+      cursor: pointer;
+      padding: 2px 12px;
+      margin: 2px 0;
+    }
+    .role-transfer-right-selected {
+      background-color: #f0f5ff;
+    }
+  }
+  & &-operation {
+    width: 10%;
+    height: var(--custom-height);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .operation-left,
+    .operation-right {
+      width: 20px;
+      height: 20px;
+      border-radius: 2px;
+      background-color: #custom_colors[color_2];
+      color: #custom_colors[color_1];
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      &:hover {
+        background-color: #custom_colors[color_1];
+        color: #fff;
+      }
+    }
+  }
+}
+</style>
diff --git a/cmdb-ui/src/modules/acl/views/resources.vue b/cmdb-ui/src/modules/acl/views/resources.vue
index 25db291..f888088 100644
--- a/cmdb-ui/src/modules/acl/views/resources.vue
+++ b/cmdb-ui/src/modules/acl/views/resources.vue
@@ -299,7 +299,6 @@ export default {
       if (rtypeId) {
         this.currentType = this.allResourceTypes.find((item) => item.id === rtypeId)
       }
-      p
       this.searchData()
     },
     handlePerm(record) {
diff --git a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/ciTypeGrant.vue b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/ciTypeGrant.vue
index 3c904c4..74df098 100644
--- a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/ciTypeGrant.vue
+++ b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/ciTypeGrant.vue
@@ -27,7 +27,7 @@
     </vxe-table>
     <a-space>
       <span class="grant-button" @click="grantDepart">授权用户/部门</span>
-      <!-- <span class="grant-button" @click="grantRole">授权角色</span> -->
+      <span class="grant-button" @click="grantRole">授权角色</span>
     </a-space>
   </div>
 </template>
diff --git a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantComp.vue b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantComp.vue
index bf7da2b..a86593c 100644
--- a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantComp.vue
+++ b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantComp.vue
@@ -199,24 +199,33 @@ export default {
       this.$refs.grantModal.open('depart')
       this.grantType = grantType
     },
-    // 授权common-setting中的角色  从中拿到roleid
+    // 授权最古老的角色权限
     grantRole(grantType) {
       this.$refs.grantModal.open('role')
       this.grantType = grantType
     },
-    handleOk(params) {
+    handleOk(params, type) {
       const { grantType } = this
-      console.log(params)
-      const rids = [
-        ...params.department.map((rid) => {
-          const _find = this.allDepartments.find((dep) => dep.acl_rid === rid)
-          return { rid, name: _find?.department_name ?? rid }
-        }),
-        ...params.user.map((rid) => {
-          const _find = this.allEmployees.find((dep) => dep.acl_rid === rid)
-          return { rid, name: _find?.nickname ?? rid }
-        }),
-      ]
+      let rids
+      if (type === 'depart') {
+        rids = [
+          ...params.department.map((rid) => {
+            const _find = this.allDepartments.find((dep) => dep.acl_rid === rid)
+            return { rid, name: _find?.department_name ?? rid }
+          }),
+          ...params.user.map((rid) => {
+            const _find = this.allEmployees.find((dep) => dep.acl_rid === rid)
+            return { rid, name: _find?.nickname ?? rid }
+          }),
+        ]
+      }
+      if (type === 'role') {
+        rids = [
+          ...params.map((role) => {
+            return { rid: role.id, name: role.name }
+          }),
+        ]
+      }
       if (grantType === 'ci_type') {
         this.tableData.unshift(
           ...rids.map(({ rid, name }) => {
diff --git a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantModal.vue b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantModal.vue
index 03a859b..994f12b 100644
--- a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantModal.vue
+++ b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantModal.vue
@@ -7,14 +7,16 @@
       ref="employeeTransfer"
       :height="350"
     />
+    <RoleTransfer app_id="cmdb" :height="350" ref="roleTransfer" v-if="type === 'role'" />
   </a-modal>
 </template>
 
 <script>
 import EmployeeTransfer from '@/components/EmployeeTransfer'
+import RoleTransfer from '@/components/RoleTransfer'
 export default {
   name: 'GrantModal',
-  components: { EmployeeTransfer },
+  components: { EmployeeTransfer, RoleTransfer },
   data() {
     return {
       visible: false,
@@ -35,9 +37,15 @@ export default {
       this.type = type
     },
     handleOk() {
-      const params = this.$refs.employeeTransfer.getValues()
+      let params
+      if (this.type === 'depart') {
+        params = this.$refs.employeeTransfer.getValues()
+      }
+      if (this.type === 'role') {
+        params = this.$refs.roleTransfer.getValues()
+      }
       this.handleCancel()
-      this.$emit('handleOk', params)
+      this.$emit('handleOk', params, this.type)
     },
     handleCancel() {
       this.visible = false
diff --git a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/relationViewGrant.vue b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/relationViewGrant.vue
index fbb7bf0..06c30ec 100644
--- a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/relationViewGrant.vue
+++ b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/relationViewGrant.vue
@@ -10,7 +10,7 @@
     </vxe-table>
     <a-space>
       <span class="grant-button" @click="grantDepart">授权用户/部门</span>
-      <!-- <span class="grant-button" @click="grantRole">授权角色</span> -->
+      <span class="grant-button" @click="grantRole">授权角色</span>
     </a-space>
   </div>
 </template>
diff --git a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/typeRelationGrant.vue b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/typeRelationGrant.vue
index 1f2cedb..7a1efac 100644
--- a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/typeRelationGrant.vue
+++ b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/typeRelationGrant.vue
@@ -10,7 +10,7 @@
     </vxe-table>
     <a-space>
       <span class="grant-button" @click="grantDepart">授权用户/部门</span>
-      <!-- <span class="grant-button" @click="grantRole">授权角色</span> -->
+      <span class="grant-button" @click="grantRole">授权角色</span>
     </a-space>
   </div>
 </template>