feat(role): 角色模块的增删改查

src/views/system/role/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10">
+      <el-col :span="10" :xs="24">
+        <el-card class="box-card" shadow="always">
+          <template #header>
+
+            <svg-icon color="#333" icon-class="menu"/>
+            角色列表
+          </template>
+          <role ref="role" @roleClick="handleRoleClick"/>
+        </el-card>
+      </el-col>
+
+      <el-col :span="6" :xs="24">
+        <el-card class="box-card" shadow="always">
+          <template #header>
+            <svg-icon color="#333" icon-class="menu"/>
+            <span style="margin:0 5px;">菜单分配</span>
+            <el-tag type="success" v-if="state.role.id" size="small">{{ state.role.name }}</el-tag>
+            <el-tag type="warning" v-else size="small">请选择角色</el-tag>
+          </template>
+          <menus ref="menu" @menuClick="handleMenuClick" :role="state.role"/>
+        </el-card>
+      </el-col>
+
+      <el-col :span="8" :xs="24">
+        <el-card class="box-card" shadow="always">
+          <template #header>
+            <svg-icon color="#333" icon-class="menu"/>
+            <span style="margin:0 5px;">权限分配</span>
+            <el-tag type="success" v-if="state.role.id" size="small">{{ state.role.name }}</el-tag>
+            <el-tag type="warning" v-else size="small"> 请选择角色</el-tag>
+
+            <el-tag type="success" v-if="state.role.id" size="small">{{ state.role.name }}</el-tag>
+            <el-tag type="warning" v-else size="small"> 请选择菜单</el-tag>
+          </template>
+          <!--<perm ref="perm" :menu="state.menu" :role="state.role"/>-->
+        </el-card>
+      </el-col>
+
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Role from './components/Role.vue'
+import Menus from './components/Menu.vue'
+import {reactive} from "vue";
+import {ElMessage} from "element-plus";
+import SvgIcon from '@/components/SvgIcon/index.vue';
+
+const state = reactive({
+  role: {
+    id: undefined,
+    name: '',
+  },
+  menu: {
+    id: undefined,
+    name: ''
+  }
+})
+
+function handleRoleClick(roleRow: any) {
+  if (roleRow) {
+    state.role = {
+      id: roleRow.id,
+      name: roleRow.name
+    }
+  } else {
+    state.role = {
+      id: undefined,
+      name: ''
+    }
+  }
+}
+
+function handleMenuClick(menuRow: any) {
+  if (!state.role.id) {
+    ElMessage.warning('请选择角色')
+    return false
+  }
+
+  if (menuRow) {
+    state.menu = {
+      id: menuRow.id,
+      name: menuRow.name
+    }
+  } else {
+    state.menu = {
+      id: undefined,
+      name: ''
+    }
+  }
+}
+
+</script>
+
+<style scoped>
+
+</style>