优化角色菜单选择

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,53 +30,25 @@
         <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 type="danger" size="small" link icon="delete" @click="handleDelete(scope.row.id)">
-              type="danger"
-              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="请输入角色名称" />
@@ -153,11 +114,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>
 
@@ -174,33 +131,18 @@
         </div>
       </template>
       <div class="u-relative" style="overflow-x: hidden">
-        <el-tree
+        <el-tree ref="permTreeRef" node-key="value" show-checkbox :data="menuPermOptions"
-          ref="permTreeRef"
+          :default-checked-keys="adminMenuIdList" :filter-node-method="handlePermFilter" :default-expand-all="true"
-          node-key="value"
+          :check-strictly="!parentChildLinked" class="mt-5">
-          show-checkbox
-          :data="menuPermOptions"
-          :default-checked-keys="adminMenuIdList"
-          :filter-node-method="handlePermFilter"
-          :default-expand-all="true"
-          :check-strictly="!parentChildLinked"
-          class="mt-5"
-        >
           <template #default="{ data }">
             {{ data.label }}
           </template>
         </el-tree>
-        <div
+        <div class="cashMenuIdList" :style="{
-          class="cashMenuIdList"
+          transform: `translateX(${(platformType == 1 ? 0 : 1) * 100}%)`,
-          :style="{
+        }">
-            transform: `translateX(${(platformType == 1 ? 0 : 1) * 100}%)`,
-          }"
-        >
           <el-checkbox-group v-model="cashMenuIdList">
-            <el-checkbox
+            <el-checkbox v-for="(item, index) in casher_windows_menus" :key="index" :value="item.menuId">
-              v-for="(item, index) in casher_windows_menus"
-              :key="index"
-              :value="item.menuId"
-            >
               {{ item.name }}
             </el-checkbox>
           </el-checkbox-group>
@@ -327,6 +269,7 @@ async function handleOpenDialog(row: SysRole) {
     dialog.title = "修改角色";
     //获取角色菜单列表
     const data = await RoleApi.getMenu(row.id, platformType.value);
+    // const data = await RoleApi.getList(row.id, platformType.value);
     console.log(data);
     Object.assign(formData, row);
     formData.menuIdList = data;
@@ -435,8 +378,8 @@ async function getCashMenus() {
 }
 // 获取所有的菜单
 async function getMenuPermOptions() {
-  let arr =
+  // let arr = shopUser.userInfo.account === "admin" ? await MenuAPI.getList() : await MenuAPI.getRoutes();
-    shopUser.userInfo.account === "admin" ? await MenuAPI.getList() : await MenuAPI.getRoutes();
+  let arr = await MenuAPI.getList();
   menuPermOptions.value = returnMenu(arr);
 }
 getMenuPermOptions();
@@ -455,8 +398,8 @@ async function handleOpenAssignPermDialog(row: SysRole) {
     getMenuIds(roleId);
   }
 }
-// 回显角色已拥有的菜单
 
+// 回显角色已拥有的菜单
 function getMenuIds(roleId: number) {
   roleId = roleId ? roleId : dialog.row.id;
   if (!roleId) {