fix: 角色权限

src/views/systemManagement/accountManagement/compontents/ruleSet.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="ruleSet">
+    <div class="title">
+      <div class="title_type">权限类别</div>
+      <div class="titel_page">页面权限</div>
+      <div class="title_details">权限详情</div>
+    </div>
+    <div class="content">
+      <div class="content-item" v-for="(item, index) in dataList" :key="index">
+        1
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+
+const dataList = ref([
+  {
+    page: "首页",
+    list: [
+      {
+        page: "首页",
+        list: []
+      }
+    ]
+  }
+]);
+</script>
+<style lang="scss" scoped>
+.ruleSet {
+  padding: 16px 32px;
+  .title {
+    display: flex;
+    height: 50px;
+    background: #f2f6fa;
+    align-items: center;
+    font-size: 16px;
+    color: #333333;
+    .title_type {
+      width: 160px;
+      text-align: center;
+      border-right: 1px solid #dfe1e2;
+    }
+    .titel_page {
+      width: 168px;
+      text-align: center;
+      border-right: 1px solid #dfe1e2;
+    }
+    .title_details {
+      flex: 1;
+      text-align: center;
+      border-right: 1px solid #dfe1e2;
+    }
+  }
+}
+</style>

src/views/systemManagement/accountManagement/index.vue

@@ -16,6 +16,7 @@ import { message } from "@/utils/message";
 import accountDrawer from "./compontents/accountDrawer.vue";
 import deptDrawer from "./compontents/deptDrawer.vue";
 import roleDrawer from "./compontents/roleDrawer.vue";
+import ruleSet from "./compontents/ruleSet.vue";
 defineOptions({
   name: "AccountManagement"
 });
@@ -136,6 +137,7 @@ const createDeptFlag = ref(false);
 const createRoleFlag = ref(false);
 const dialogFormVisible = ref(false);
 const deleteFormVisible = ref(false);
+const roleSetVisible = ref(false);
 
 const passwordFormRef = ref<FormInstance>();
 
@@ -294,7 +296,9 @@ const deleteName = (type: any) => {
   }
 };
 //角色权限
-const handleRolePermission = row => {};
+const handleRolePermission = row => {
+  roleSetVisible.value = true;
+};
 onMounted(() => {
   getDeptData();
   getUserTableData();
@@ -577,6 +581,29 @@ onMounted(() => {
           </div>
         </template>
       </el-dialog>
+      <!-- 规则预设 -->
+      <el-dialog
+        v-model="roleSetVisible"
+        title="Shipping address"
+        width="1400"
+        :show-close="false"
+      >
+        <template #header="{ close, titleId, titleClass }">
+          <div class="my-header">
+            <h4 :id="titleId" :class="titleClass"><span />规则预设</h4>
+            <el-icon @click="close" class="cursor-pointer"><Close /></el-icon>
+          </div>
+        </template>
+        <ruleSet />
+        <template #footer>
+          <div class="dialog-footer">
+            <el-button @click="roleSetVisible = false">取消</el-button>
+            <el-button type="primary" @click="roleSetVisible = false">
+              确定
+            </el-button>
+          </div>
+        </template>
+      </el-dialog>
     </div>
   </div>
 </template>