feat: 角色级别

src/views/admin/system/role/components/menus.vue

@@ -28,16 +28,8 @@
     </div>
   </div>
 
-  <el-tree
+  <el-tree ref="permTreeRef" node-key="value" show-checkbox :data="menuPermOptions"
-    ref="permTreeRef"
+    :filter-node-method="handlePermFilter" :default-expand-all="true" :check-strictly="!parentChildLinked" class="mt-5">
-    node-key="value"
-    show-checkbox
-    :data="menuPermOptions"
-    :filter-node-method="handlePermFilter"
-    :default-expand-all="true"
-    :check-strictly="!parentChildLinked"
-    class="mt-5"
-  >
     <template #default="{ data }">
       {{ data.label }}
     </template>
@@ -122,7 +114,6 @@ function reset() {
 }
 function setChecked(checkedMenuIds) {
   checkedMenuIds.forEach((menuId) => {
-    console.log(menuId);
     permTreeRef.value.setChecked(menuId, true, false);
   });
 }

src/views/admin/system/role/index.vue

@@ -3,12 +3,7 @@
     <div class="search-bar">
       <el-form ref="queryFormRef" :model="queryParams" :inline="true">
         <el-form-item prop="keywords" label="关键字">
-          <el-input
+          <el-input v-model="queryParams.key" placeholder="角色名称" clearable @keyup.enter="handleQuery" />
-            v-model="queryParams.key"
-            placeholder="角色名称"
-            clearable
-            @keyup.enter="handleQuery"
-          />
         </el-form-item>
 
         <el-form-item>
@@ -26,14 +21,8 @@
         </el-button> -->
       </div>
 
-      <el-table
+      <el-table ref="dataTableRef" v-loading="loading" :data="roleList" highlight-current-row :border="true"
-        ref="dataTableRef"
+        @selection-change="handleSelectionChange">
-        v-loading="loading"
-        :data="roleList"
-        highlight-current-row
-        :border="true"
-        @selection-change="handleSelectionChange"
-      >
         <!-- <el-table-column type="selection" width="55" align="center" /> -->
         <el-table-column label="角色名称" prop="name" />
         <el-table-column label="角色级别" prop="level" />
@@ -41,60 +30,33 @@
         <el-table-column label="创建日期" prop="createTime" />
         <el-table-column fixed="right" label="操作" width="220">
           <template #default="scope">
-            <el-button
+            <el-button type="primary" size="small" link icon="position" @click="handleOpenAssignPermDialog(scope.row)">
-              type="primary"
-              size="small"
-              link
-              icon="position"
-              @click="handleOpenAssignPermDialog(scope.row)"
-            >
               分配菜单
             </el-button>
-            <el-button
+            <el-button type="primary" size="small" link icon="edit" @click="handleOpenDialog(scope.row)">
-              type="primary"
-              size="small"
-              link
-              icon="edit"
-              @click="handleOpenDialog(scope.row)"
-            >
               编辑
             </el-button>
-            <el-button
+            <el-button v-if="scope.row.level > 0" type="danger" size="small" link icon="delete"
-              type="danger"
+              @click="handleDelete(scope.row.id)">
-              size="small"
-              link
-              icon="delete"
-              @click="handleDelete(scope.row.id)"
-            >
               删除
             </el-button>
           </template>
         </el-table-column>
       </el-table>
 
-      <pagination
+      <pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.page"
-        v-if="total > 0"
+        v-model:limit="queryParams.size" @pagination="handleQuery" />
-        v-model:total="total"
-        v-model:page="queryParams.page"
-        v-model:limit="queryParams.size"
-        @pagination="handleQuery"
-      />
     </el-card>
 
     <!-- 角色表单弹窗 -->
-    <el-dialog
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" @close="handleCloseDialog">
-      v-model="dialog.visible"
-      :title="dialog.title"
-      width="500px"
-      @close="handleCloseDialog"
-    >
       <el-form ref="addRequestRef" :model="formData" :rules="rules" label-width="100px">
         <el-form-item label="角色名称" prop="name">
           <el-input v-model="formData.name" placeholder="请输入角色名称" />
         </el-form-item>
 
         <el-form-item label="角色等级" prop="level">
-          <el-input-number placeholder="角色等级" v-model="formData.level"></el-input-number>
+          <el-input-number v-model="formData.level" placeholder="角色等级" :min="1" :precision="0" />
         </el-form-item>
 
         <!-- <el-form-item label="数据菜单" prop="dataScope">
@@ -106,11 +68,11 @@
           </el-select>
         </el-form-item> -->
         <el-form-item label="描述" prop="description">
-          <el-input type="textarea" v-model="formData.description" placeholder="描述" />
+          <el-input v-model="formData.description" type="textarea" placeholder="描述" />
         </el-form-item>
 
         <el-form-item label="菜单分配" prop="menuIdList">
-          <menuSelect ref="refmenuSelect" v-model="formData.menuIdList"></menuSelect>
+          <menuSelect ref="refmenuSelect" v-model="formData.menuIdList" />
         </el-form-item>
       </el-form>
 
@@ -123,11 +85,7 @@
     </el-dialog>
 
     <!-- 分配菜单弹窗 -->
-    <el-drawer
+    <el-drawer v-model="assignPermDialogVisible" :title="'【' + checkedRole.name + '】菜单分配'" size="500">
-      v-model="assignPermDialogVisible"
-      :title="'【' + checkedRole.name + '】菜单分配'"
-      size="500"
-    >
       <div class="flex-x-between">
         <el-input v-model="permKeywords" clearable class="w-[150px]" placeholder="菜单菜单名称">
           <template #prefix>
@@ -142,11 +100,7 @@
             </template>
             {{ isExpanded ? "收缩" : "展开" }}
           </el-button>
-          <el-checkbox
+          <el-checkbox v-model="parentChildLinked" class="ml-5" @change="handleparentChildLinkedChange">
-            v-model="parentChildLinked"
-            class="ml-5"
-            @change="handleparentChildLinkedChange"
-          >
             父子联动
           </el-checkbox>
 
@@ -161,16 +115,9 @@
         </div>
       </div>
 
-      <el-tree
+      <el-tree ref="permTreeRef" node-key="value" show-checkbox :data="menuPermOptions"
-        ref="permTreeRef"
+        :filter-node-method="handlePermFilter" :default-expand-all="true" :check-strictly="!parentChildLinked"
-        node-key="value"
+        class="mt-5">
-        show-checkbox
-        :data="menuPermOptions"
-        :filter-node-method="handlePermFilter"
-        :default-expand-all="true"
-        :check-strictly="!parentChildLinked"
-        class="mt-5"
-      >
         <template #default="{ data }">
           {{ data.label }}
         </template>