From 6eb8197e37d1a8a1c7207c13af03d17bfcb263bb Mon Sep 17 00:00:00 2001
From: zhaozhenfang <zhaozhenfang@kylinos.cn>
Date: Wed, 20 Mar 2024 10:49:09 +0800
Subject: [PATCH] add change roleAuth page

---
 frontend/src/main.ts                          |   2 +-
 frontend/src/styles/{main.css => main.scss}   |   4 +
 frontend/src/views/Audit/Audit.vue            |   2 -
 frontend/src/views/Cluster/Cluster.vue        |   2 +-
 .../src/views/Cluster/MachineDetail/Index.vue |   2 +-
 .../views/Cluster/MachineDetail/Service.vue   |   4 +-
 frontend/src/views/Role/Role.vue              | 193 ++++++++----------
 .../src/views/Role/components/AddRole.vue     |  91 ++++-----
 .../src/views/Role/components/RoleDetail.vue  | 104 ----------
 .../src/views/Role/components/RoleForm.vue    | 160 +++++++++++++++
 .../src/views/Role/components/authData.ts     |  97 ++++-----
 11 files changed, 354 insertions(+), 307 deletions(-)
 rename frontend/src/styles/{main.css => main.scss} (89%)
 delete mode 100644 frontend/src/views/Role/components/RoleDetail.vue
 create mode 100644 frontend/src/views/Role/components/RoleForm.vue

diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 7039b105..94e4c30f 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,4 +1,4 @@
-import './styles/main.css'
+import './styles/main.scss'
 
 import { createApp } from 'vue'
 import pinia from '@/stores'
diff --git a/frontend/src/styles/main.css b/frontend/src/styles/main.scss
similarity index 89%
rename from frontend/src/styles/main.css
rename to frontend/src/styles/main.scss
index 5be96c76..bdc067ff 100644
--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.scss
@@ -54,4 +54,8 @@ body {
 /* 隐藏无子设备的展开图表 */
 .el-table .row-expand-cover .cell .el-table__expand-icon {
   display: none;
+}
+/* 权限页面 行颜色修改 */
+.el-table .warning-row {
+  --el-table-tr-bg-color: var(--el-color-info-light-8);
 }
\ No newline at end of file
diff --git a/frontend/src/views/Audit/Audit.vue b/frontend/src/views/Audit/Audit.vue
index 5f553a5e..2fb3d677 100644
--- a/frontend/src/views/Audit/Audit.vue
+++ b/frontend/src/views/Audit/Audit.vue
@@ -53,8 +53,6 @@
             </el-button>
           </template>
         </el-table-column>
-        <el-table-column align="center" prop="message" label="日志">
-        </el-table-column>
       </template>
     </PGTable>
     <el-drawer title="日志详情" v-model="showDetail" :before-close="handleClose" width="40%">
diff --git a/frontend/src/views/Cluster/Cluster.vue b/frontend/src/views/Cluster/Cluster.vue
index e6cbd301..ec85599c 100644
--- a/frontend/src/views/Cluster/Cluster.vue
+++ b/frontend/src/views/Cluster/Cluster.vue
@@ -25,7 +25,7 @@
                   </auth-button>
                 </el-dropdown-item>
                 <el-dropdown-item>
-                  <auth-button auth="button/mac_change" :show="true">
+                  <auth-button auth="button/machine_delete" :show="true">
                     删除
                   </auth-button>
                 </el-dropdown-item>
diff --git a/frontend/src/views/Cluster/MachineDetail/Index.vue b/frontend/src/views/Cluster/MachineDetail/Index.vue
index bf14982c..cf9568cf 100644
--- a/frontend/src/views/Cluster/MachineDetail/Index.vue
+++ b/frontend/src/views/Cluster/MachineDetail/Index.vue
@@ -35,7 +35,7 @@ onMounted(() => {
     { name: 'network', label: '网络配置', component: markRaw(Network) },
     { name: 'systl', label: '内核参数', component: markRaw(Sysctl) },
     { name: 'package', label: '软件包', component: markRaw(Package) },
-    { name: 'terminal', label: '远程终端', component: markRaw(Terminal) },
+    // { name: 'terminal', label: '远程终端', component: markRaw(Terminal) },
   ]
 })
 
diff --git a/frontend/src/views/Cluster/MachineDetail/Service.vue b/frontend/src/views/Cluster/MachineDetail/Service.vue
index b0ffc069..187b4482 100644
--- a/frontend/src/views/Cluster/MachineDetail/Service.vue
+++ b/frontend/src/views/Cluster/MachineDetail/Service.vue
@@ -3,9 +3,9 @@
     <div class="services">
       <el-autocomplete style="width:50%; margin-right:10px" class="inline-input" v-model="searchName"
         :fetch-suggestions="querySuggestions" @select="onSelectService" placeholder="请输入服务名称"></el-autocomplete>
-      <el-button plain type="primary" @click="onStartService">启动</el-button>
+      <!-- <el-button plain type="primary" @click="onStartService">启动</el-button>
       <el-button plain type="primary" @click="onStopService">停止</el-button>
-      <el-button plain type="primary" @click="onRestartService">重启</el-button>
+      <el-button plain type="primary" @click="onRestartService">重启</el-button> -->
     </div>
     <div class="info">
       <div class="detail" v-if="display">
diff --git a/frontend/src/views/Role/Role.vue b/frontend/src/views/Role/Role.vue
index 0591421d..e50b6324 100644
--- a/frontend/src/views/Role/Role.vue
+++ b/frontend/src/views/Role/Role.vue
@@ -1,51 +1,45 @@
 <template>
-    <div class="container">
-        <PGTable :data="roles" title="角色列表" :showSelect="true" :total="total" :onPageChanged="onPageChanged">
-            <template v-slot:action>
-                <el-button type="primary" @click="onAddRole">添加</el-button>
-            </template>
-            <template v-slot:content>
-                <el-table-column align="center" prop="id" label="角色ID" sortable>
-                </el-table-column>
-                <el-table-column align="center" prop="role" label="角色名">
-                </el-table-column>
-                <el-table-column align="center" prop="description" label="描述">
-                </el-table-column>
-                <el-table-column align="center" label="权限">
-                    <template #default="scope">
-                        <el-button name="default_all" type="primary" size="small"
-                            @click="showRoleDetail(scope.row)">查看</el-button>
-                        <el-button name="role_modify" type="primary" size="small" v-if="!(scope.row.role === 'admin')"
-                            @click="onEditRolePermission(scope.row)">变更</el-button>
-                    </template>
-                </el-table-column>
-                <el-table-column align="center" label="操作" fixed="right">
-                    <template #default="scope">
-                        <el-button :disabled="(scope.row.role === 'admin')" name="role_update" size="small" type="primary"
-                            @click="onEditRoleInfo(scope.row)">编辑</el-button>
-                        <el-popconfirm title="确定删除此角色?" @confirm="onDeleteRole(scope.row)">
-                            <template #reference>
-                                <el-button :disabled="(scope.row.role === 'admin')" slot="reference" name="role_delete"
-                                    type="danger" size="small">
-                                    删除
-                                </el-button>
-                            </template>
-                        </el-popconfirm>
-                    </template>
-                </el-table-column>
-            </template>
-        </PGTable>
-
-        <el-dialog :title="roleOperateTitle" v-model="showRoleOperate">
-            <UpdateRole v-if="operate === 'UpdateRole'" :role="selectedRole" @rolesUpdated="updateRoles" @close="showRoleOperate = false" />
-            <AddRole v-if="operate === 'AddRole'" @rolesUpdated="updateRoles" @close="showRoleOperate = false"/>
-        </el-dialog>
-
-        <el-drawer :title="roleDetailTitle" v-model="showPermissionDrawler" direction="rtl"
-        :destroy-on-close="true">
-            <RoleDetail :showEdit="showPermissionEdit" :role="selectedRole" />
-        </el-drawer>
-    </div>
+  <div class="container">
+    <PGTable :data="roles" title="角色列表" :showSelect="true" :total="total" :onPageChanged="onPageChanged">
+      <template v-slot:action>
+        <auth-button auth="button/role_add" @click="onAddRole">添加</auth-button>
+      </template>
+      <template v-slot:content>
+        <el-table-column align="center" prop="id" label="角色ID" sortable>
+        </el-table-column>
+        <el-table-column align="center" prop="role" label="角色名">
+        </el-table-column>
+        <el-table-column align="center" prop="description" label="描述">
+        </el-table-column>
+        <el-table-column align="center" label="权限">
+          <template #default="scope">
+            <el-button size="small" @click="handleAuth(scope.row, '权限详情')">查看</el-button>
+            <auth-button auth="button/role_modify" size="small" @click="handleAuth(scope.row, '编辑权限')">变更</auth-button>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="操作" fixed="right">
+          <template #default="scope">
+            <auth-button auth="button/role_update" size="small" @click="onEditRoleInfo(scope.row)">编辑</auth-button>
+            <el-popconfirm title="确定删除此角色?" @confirm="onDeleteRole(scope.row)">
+              <template #reference>
+                <auth-button slot="reference" auth="button/role_delete" plain type="danger" size="small">
+                  删除
+                </auth-button>
+              </template>
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </template>
+    </PGTable>
+
+    <el-dialog :title="roleOperateTitle" v-model="showRoleOperate" :destroy-on-close="true">
+      <UpdateRole v-if="operate === 'UpdateRole'" :role="selectedRole" @rolesUpdated="updateRoles"
+        @close="showRoleOperate = false" />
+      <AddRole v-if="operate === 'AddRole'" @rolesUpdated="updateRoles" @close="showRoleOperate = false" />
+      <RoleForm :showEdit="showPermissionEdit" v-if="operate === 'updateAuth'" @rolesUpdated="updateRoles"
+        :role="selectedRole" @close="showRoleOperate = false" />
+    </el-dialog>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -53,96 +47,87 @@ import { ref, onMounted } from "vue";
 import { ElMessage } from 'element-plus';
 
 import PGTable from "@/components/PGTable.vue";
-import RoleDetail from "./components/RoleDetail.vue";
 import AddRole from "./components/AddRole.vue";
 import UpdateRole from "./components/UpdateRole.vue";
 
 import { getRolesPaged, deleteRole } from "@/request/role";
 import { RespCodeOK } from "@/request/request";
+import RoleForm from "./components/RoleForm.vue";
+import AuthButton from "@/components/AuthButton.vue";
 
 const roles = ref([])
 const total = ref(0)
 
 onMounted(() => {
-    updateRoles()
+  updateRoles()
 })
 
 function updateRoles(page: number = 1, size: number = 10) {
-    getRolesPaged({
-        page: page,
-        size: size,
-    }).then((resp: any) => {
-        if (resp.code === RespCodeOK) {
-            total.value = resp.total
-            roles.value = resp.data
-        } else {
-            ElMessage.error("failed to get role info: " + resp.msg)
-        }
-    }).catch((err: any) => {
-        ElMessage.error("failed to get role info:" + err.msg)
-    })
+  getRolesPaged({
+    page: page,
+    size: size,
+  }).then((resp: any) => {
+    if (resp.code === RespCodeOK) {
+      total.value = resp.total
+      roles.value = resp.data
+    } else {
+      ElMessage.error("failed to get role info: " + resp.msg)
+    }
+  }).catch((err: any) => {
+    ElMessage.error("failed to get role info:" + err.msg)
+  })
 }
 
 function onPageChanged(currentPage: number, currentSize: number) {
-    updateRoles(currentPage, currentSize)
+  updateRoles(currentPage, currentSize)
 }
 
-const roleDetailTitle = ref("权限详情")
-const showPermissionDrawler = ref(false)
+const roleOperateTitle = ref("权限详情")
+const showRoleOperate = ref(false)
 const showPermissionEdit = ref(false)
 const selectedRole = ref({})
-
-function showRoleDetail(role: any) {
-    selectedRole.value = role
-    roleDetailTitle.value = "权限详情"
-    showPermissionEdit.value = false
-    showPermissionDrawler.value = true
-}
-
-function onEditRolePermission(role: any) {
-    selectedRole.value = role
-    roleDetailTitle.value = "编辑权限"
-    showPermissionEdit.value = true
-    showPermissionDrawler.value = true
-}
-
-const roleOperateTitle = ref("编辑角色")
-const showRoleOperate = ref(false)
 const operate = ref("")
+const handleAuth = (role: any, type: string) => {
+  selectedRole.value = role
+  roleOperateTitle.value = type
+  showPermissionEdit.value = type === '编辑权限' ? true : false;
+  showRoleOperate.value = true
+  operate.value = "updateAuth"
+}
 
-function onEditRoleInfo(role:any) {
-    selectedRole.value = role
-    roleOperateTitle.value = "编辑角色"
-    showRoleOperate.value = true
-    operate.value = "UpdateRole"
+function onEditRoleInfo(role: any) {
+  selectedRole.value = role
+  roleOperateTitle.value = "编辑角色"
+  showRoleOperate.value = true
+  operate.value = "UpdateRole"
 }
 
 function onAddRole() {
-    roleOperateTitle.value = "添加角色"
-    showRoleOperate.value = true
-    operate.value = "AddRole"
+  roleOperateTitle.value = "添加角色"
+  showRoleOperate.value = true
+  operate.value = "AddRole"
 }
 
 function onDeleteRole(role: any) {
-    deleteRole({
-        role: role.id
-    }).then((resp: any) => {
-        if (resp.code === RespCodeOK) {
-            ElMessage.success("删除角色成功:" + resp.msg)
-            updateRoles()
-        } else {
-            ElMessage.error("failed to delete role:" + resp.msg)
-        }
-    }).catch((err: any) => {
-        ElMessage.error("failed to delete role:" + err.msg)
-    })
+  deleteRole({
+    role: role.id
+  }).then((resp: any) => {
+    if (resp.code === RespCodeOK) {
+      ElMessage.success("删除角色成功:" + resp.msg)
+      updateRoles()
+    } else {
+      ElMessage.error("failed to delete role:" + resp.msg)
+    }
+  }).catch((err: any) => {
+    ElMessage.error("failed to delete role:" + err.msg)
+  })
 }
 
 </script>
 
 <style lang="scss" scoped>
 .container {
-    height: 100%;
-    width: 100%;
+  height: 100%;
+  width: 100%;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/Role/components/AddRole.vue b/frontend/src/views/Role/components/AddRole.vue
index c04937da..579fbcba 100644
--- a/frontend/src/views/Role/components/AddRole.vue
+++ b/frontend/src/views/Role/components/AddRole.vue
@@ -1,19 +1,18 @@
 <template>
-    <div>
-        <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
-            <el-form-item label="角色名:" prop="rolename">
-                <el-input class="ipInput" type="text" v-model="form.rolename" autocomplete="off"></el-input>
-            </el-form-item>
-            <el-form-item label="描述:" prop="description">
-                <el-input class="ipInput" controls-position="right" v-model="form.description"
-                    autocomplete="off"></el-input>
-            </el-form-item>
-        </el-form>
+  <div>
+    <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
+      <el-form-item label="角色名:" prop="rolename">
+        <el-input class="ipInput" type="text" v-model="form.rolename" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="描述:" prop="description">
+        <el-input class="ipInput" controls-position="right" v-model="form.description" autocomplete="off"></el-input>
+      </el-form-item>
+    </el-form>
 
-        <div class="footer">
-            <el-button type="primary" @click="onAddRole">确 定</el-button>
-        </div>
+    <div class="footer">
+      <el-button type="primary" @click="onAddRole">确 定</el-button>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -26,52 +25,52 @@ import { addRole } from "@/request/role";
 const emits = defineEmits(["rolesUpdated", "close"])
 
 const rules = {
-    rolename: [
-        {
-            required: true,
-            message: "请输入角色名",
-            trigger: "blur"
-        }
-    ],
+  rolename: [
+    {
+      required: true,
+      message: "请输入角色名",
+      trigger: "blur"
+    }
+  ],
 }
 
 const formRef = ref()
 const form = ref({
-    rolename: "",
-    description: ""
+  rolename: "",
+  description: ""
 })
 
 function onAddRole() {
-    let params = {
-        role: form.value.rolename,
-        description: form.value.description
+  let params = {
+    role: form.value.rolename,
+    description: form.value.description
+  }
+  formRef.value.validate((valid: Boolean) => {
+    if (valid) {
+      addRole(params)
+        .then((resp: any) => {
+          if (resp.code === RespCodeOK) {
+            emits("rolesUpdated")
+            formRef.value.resetFields()
+            ElMessage.success(resp.msg);
+          } else {
+            ElMessage.error(resp.msg);
+          }
+        })
+        .catch((err: any) => {
+          ElMessage.error("添加失败,请检查输入内容" + err.msg);
+        });
+      emits("close")
+    } else {
+      ElMessage.error("请检查输入内容");
     }
-    formRef.value.validate((valid: Boolean) => {
-        if (valid) {
-            addRole(params)
-                .then((resp: any) => {
-                    if (resp.code === RespCodeOK) {
-                        emits("rolesUpdated")
-                        formRef.value.resetFields()
-                        ElMessage.success(resp.msg);
-                    } else {
-                        ElMessage.error(resp.msg);
-                    }
-                })
-                .catch((err: any) => {
-                    ElMessage.error("添加失败,请检查输入内容" + err.msg);
-                });
-            emits("close")
-        } else {
-            ElMessage.error("请检查输入内容");
-        }
-    });
+  });
 }
 
 </script>
 
 <style lang="scss" scoped>
 .footer {
-    text-align: right;
+  text-align: right;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/Role/components/RoleDetail.vue b/frontend/src/views/Role/components/RoleDetail.vue
deleted file mode 100644
index f6723c57..00000000
--- a/frontend/src/views/Role/components/RoleDetail.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-    <div>
-        <el-tree ref="treeRef" :data="authData" show-checkbox node-key="menuName" default-expand-all
-            :check-strictly="strictly" :default-expanded-keys="[2, 3]" :default-checked-keys="checkedKeys"
-            @check-change="onCheckChanged">
-        </el-tree>
-
-        <div class="footer" v-if="showEdit">
-            <el-button @click="onResetSelected">重 置</el-button>
-            <el-button type="primary" @click="onChangePermission">确 定</el-button>
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, onMounted } from 'vue';
-import { ElMessage } from 'element-plus';
-
-import { RespCodeOK } from "@/request/request";
-import { changeRolePermission } from "@/request/role";
-
-import { authData } from "./authData";
-
-const treeRef = ref()
-
-const props = defineProps({
-    role: {
-        type: Object,
-        default: {},
-    },
-    showEdit: {
-        type: Boolean,
-        default: true,
-    }
-})
-
-const roleData = ref([])
-const checkedKeys = ref<string[]>([])
-const strictly = ref(true)
-
-onMounted(() => {
-    checkedKeys.value = props.role.menus.split(',').concat(props.role.buttons);
-})
-
-function onChangePermission() {
-    let menus: string[] = []
-    let buttons: string[] = []
-    let checkedNodes = treeRef.value.getCheckedNodes();
-    checkedNodes.filter((item: any) => item.isMenu).forEach((item: any) => {
-        menus.push(item.menuName)
-    });
-    checkedNodes.filter((item: any) => item.btnId).forEach((item: any) => {
-        buttons.push(item.menuName)
-    });
-
-    changeRolePermission({
-        role: props.role.role,
-        buttonId: buttons,
-        menus: menus,
-    }).then((resp: any) => {
-        if (resp.code === RespCodeOK) {
-            // TODO:
-
-            ElMessage.success("change role permission success:" + resp.msg)
-        } else {
-            ElMessage.error("failed to change role permission:" + resp.msg)
-        }
-    }).catch((err: any) => {
-        ElMessage.error("failed to change role permission:" + err.msg)
-    })
-}
-
-function onCheckChanged(data: any, checked: boolean) {
-    // 选中button权限时，自动选中页面权限
-    if (checked) {
-        if (!('isMenu' in data) || !data.isMenu) {
-            let checkedMenu: any = null
-            for (let i = 0; i < authData.length; i++) {
-                let childrens = authData[i].children
-                for (let n = 0; n < childrens.length; n++) {
-                    if (childrens[n].id == data.id) {
-                        checkedMenu = authData[i]
-                    }
-                }
-            }
-
-            if (checkedMenu) {
-                treeRef.value.setChecked(checkedMenu.menuName, true)
-            }
-        }
-    }
-}
-
-function onResetSelected() {
-    treeRef.value.setCheckedNodes([]);
-}
-
-</script>
-
-<style lang="scss" scoped>
-.footer {
-    text-align: right;
-}
-</style>
\ No newline at end of file
diff --git a/frontend/src/views/Role/components/RoleForm.vue b/frontend/src/views/Role/components/RoleForm.vue
new file mode 100644
index 00000000..6a1493b3
--- /dev/null
+++ b/frontend/src/views/Role/components/RoleForm.vue
@@ -0,0 +1,160 @@
+<template>
+  <div class="content">
+    <el-table ref="roleTable" :data="authData" :row-class-name="tableRowClassName">
+      <el-table-column label="菜单权限" width="180">
+        <template #default="scope">
+          <el-checkbox-group v-model="checkedMenu" @change="handleCheckedMenuChange">
+            <el-checkbox :label="scope.row.menuName" :disabled="!props.showEdit" :key="scope.row.menuName">
+              {{ scope.row.label }}</el-checkbox>
+          </el-checkbox-group>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作权限" width="auto">
+        <template #default="scope">
+          <el-checkbox-group v-model="checkedOperation" @change="handleCheckedOperationChange">
+            <el-checkbox v-for="item in scope.row.operations" :disabled="!props.showEdit" :label="item.menuName"
+              :key="item.id">{{ item.label }}</el-checkbox>
+          </el-checkbox-group>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+  <div class="footer" v-if="props.showEdit">
+    <el-button @click="onClose">取消</el-button>
+    <el-button type="primary" @click="onChangePermission">确 定</el-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+
+import { RespCodeOK } from "@/request/request";
+import { changeRolePermission } from "@/request/role";
+
+import { authData } from "./authData";
+
+const props = defineProps({
+  role: {
+    type: Object,
+    required: true,
+    default: {},
+  },
+  showEdit: {
+    type: Boolean,
+    required: true,
+    default: false
+  }
+})
+interface RolePermission {
+  button: Array<string>;
+  menu: string;
+}
+const emits = defineEmits(['close', 'rolesUpdated'])
+const checkedMenu = ref([] as string[]);
+const checkedOperation = ref([] as string[]);
+onMounted(() => {
+  // 初始化按钮和操作选中
+  let rolePermission: RolePermission = props.role.permissions;
+  let btns: string[] = rolePermission.button.length > 0 ? rolePermission.button : [];
+  let all_operations = [] as any[];
+  authData.forEach(item => all_operations = all_operations.concat(item.operations));
+  checkedOperation.value = handleCheckedData(btns, all_operations);
+  if (rolePermission.menu !== '') {
+    checkedMenu.value = handleCheckedData(rolePermission.menu.split(','), authData);
+  }
+})
+
+/*
+* 筛选展示选中数据
+* @params checked_menu 选中的菜单权限数据
+* @params checked_operation 选中的按钮操作数据
+* authData:本地存储的全部权限数据
+*/
+const handleCheckedData = (checked_data: string[], all_data: any[]) => {
+  let checkedData = all_data
+    .filter(item => checked_data.indexOf(item.menuName) >= 0)
+    .map(item => item.menuName);
+  return JSON.parse(JSON.stringify(checkedData));
+}
+
+/* 
+* 处理菜单选择联动
+* @params value: 选中的菜单 menuName[]
+*  */
+type MenuName = string;
+const handleCheckedMenuChange = (value: MenuName[]) => {
+  if (value) {
+    let deletebtns: string[] = [];
+    authData.filter(item => !value.includes(item.menuName))
+      .forEach(item => {
+        deletebtns.push(...item.operations.map(item => item.menuName));
+      })
+    deletebtns.forEach((btn_menuName: string) => {
+      let targetIndex: number = checkedOperation.value.indexOf(btn_menuName);
+      if (targetIndex != -1) checkedOperation.value.splice(targetIndex, 1);
+    })
+  }
+}
+/* 
+* 处理操作权限的选择联动
+* @params value: 选中的操作 menuName[]
+*  */
+const handleCheckedOperationChange = (value: MenuName[]) => {
+  if (value) {
+    authData.map((item: any) =>
+      item.operations.filter((item: any) =>
+        item.menuName === value[value.length - 1]).length > 0).forEach((item, index) => {
+          if (item) {
+            let targetIndex: number = checkedMenu.value.indexOf(authData[index].menuName);
+            if (targetIndex == -1) checkedMenu.value.push(authData[index].menuName);
+          }
+        })
+  }
+}
+
+
+// 修改权限
+function onChangePermission() {
+  let menus: string[] = []
+  let buttons: string[] = []
+
+  /* 
+  * @params role 用户角色
+  * @params buttonId 操作按钮btnId string[]
+  * @params menus 菜单权限menuName string[]
+  */
+  changeRolePermission({
+    role: props.role.role,
+    buttons: checkedOperation.value,
+    menus: checkedMenu.value,
+  }).then((resp: any) => {
+    if (resp.code === RespCodeOK) {
+      emits('rolesUpdated');
+      ElMessage.success("change role permission success:" + resp.msg)
+    } else {
+      ElMessage.error("failed to change role permission:" + resp.msg)
+    }
+    onClose();
+  }).catch((err: any) => {
+    ElMessage.error("failed to change role permission:" + err.msg)
+  })
+}
+
+function onClose() {
+  emits('close')
+}
+
+const tableRowClassName = ({ row, rowIndex }: { row: any, rowIndex: number }) => {
+  if (rowIndex % 2 === 0) {
+    return 'warning-row'
+  }
+  return ''
+}
+</script>
+
+<style scoped>
+.footer {
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/Role/components/authData.ts b/frontend/src/views/Role/components/authData.ts
index f16d73e0..532f933d 100644
--- a/frontend/src/views/Role/components/authData.ts
+++ b/frontend/src/views/Role/components/authData.ts
@@ -1,129 +1,134 @@
 // 整个系统需要控制权限的按钮配置项
 export let authData = [{
-    id: 1,
+    id: '1',
     label: '概览',
     isMenu: true,
     menuName: 'overview',
-    children: []
+    operations: []
 }, {
-    id: 2,
+    id: '2',
     label: '系统',
     isMenu: true,
     menuName: 'cluster',
-    children: [{
-        id: 8,
-        btnId: 1,
+    operations: [{
+        id: '8',
+        btnId: '1',
         label: 'rpm下发',
         menuName: 'rpm_install',
     }, {
-        id: 9,
-        btnId: 2,
+        id: '9',
+        btnId: '2',
         label: 'rpm卸载',
         menuName: 'rpm_uninstall',
     }, {
-        id: 22,
-        btnId: 15,
+        id: '22',
+        btnId: '15',
         label: '变更部门',
         menuName: 'dept_change',
+    },{
+        id: '23',
+        btnId: '16',
+        label: '机器删除',
+        menuName: 'machine_delete',
     }]
 }, {
-    id: 3,
+    id: '3',
     label: '批次',
     isMenu: true,
     menuName: 'batch',
-    children: [{
-        id: 10,
-        btnId: 3,
+    operations: [{
+        id: '10',
+        btnId: '3',
         label: '编辑批次',
         menuName: 'batch_update',
     }, {
-        id: 11,
-        btnId: 4,
+        id: '11',
+        btnId: '4',
         label: '删除批次',
         menuName: 'batch_delete',
     }]
 }, {
-    id: 4,
+    id: '4',
     label: '用户管理',
     isMenu: true,
     menuName: 'usermanager',
-    children: [{
-        id: 12,
-        btnId: 5,
+    operations: [{
+        id: '12',
+        btnId: '5',
         label: '添加用户',
         menuName: 'user_add',
     }, {
-        id: 13,
-        btnId: 6,
+        id: '13',
+        btnId: '6',
         label: '导入用户',
         menuName: 'user_import',
     }, {
-        id: 14,
-        btnId: 7,
+        id: '14',
+        btnId: '7',
         label: '编辑用户',
         menuName: 'user_edit',
     }, {
-        id: 15,
-        btnId: 8,
+        id: '15',
+        btnId: '8',
         label: '重置密码',
         menuName: 'user_reset',
     }, {
-        id: 16,
-        btnId: 9,
+        id: '16',
+        btnId: '9',
         label: '删除用户',
         menuName: 'user_del',
     }]
 }, {
-    id: 5,
+    id: '5',
     label: '角色管理',
     isMenu: true,
     menuName: 'rolemanager',
-    children: [
+    operations: [
         {
-            id: 17,
-            btnId: 10,
+            id: '17',
+            btnId: '10',
             label: '添加角色',
             menuName: 'role_add',
         }, {
-            id: 18,
-            btnId: 11,
+            id: '18',
+            btnId: '11',
             label: '编辑角色',
             menuName: 'role_update',
         }, {
-            id: 19,
-            btnId: 12,
+            id: '19',
+            btnId: '12',
             label: '删除角色',
             menuName: 'role_delete',
         }, {
-            id: 20,
-            btnId: 13,
+            id: '20',
+            btnId: '13',
             label: '角色授权',
             menuName: 'role_modify',
         }]
 },
 {
-    id: 6,
+    id: '6',
     label: '配置管理',
     isMenu: true,
     menuName: 'config',
-    children: [{
-        id: 21,
-        btnId: 14,
+    operations: [{
+        id: '21',
+        btnId: '14',
         label: '配置下发',
         menuName: 'config_install',
     }]
 },
 {
-    id: 7,
+    id: '7',
     label: '日志管理',
     isMenu: true,
     menuName: 'log',
-    children: []
+    operations: []
 },
 {
-    id: 8,
+    id: '8',
     label: '插件管理',
     isMenu: true,
     menuName: 'plugin',
-    children: []
+    operations: []
 }];
\ No newline at end of file
-- 
Gitee