bugfix

src/api/system/role.js

@@ -104,7 +104,7 @@ export function insertAuthUser(data) {
 // 根据角色ID查询部门树结构
 export function deptTreeSelect(roleId) {
   return request({
-    url: '/system/dept/dept-tree/' + roleId,
+    url: "/system/dept/dept-tree/" + roleId,
-    method: 'get'
+    method: "get",
-  })
+  });
 }

src/api/system/user.js

@@ -129,10 +129,10 @@ export function updateAuthRole(data) {
 // 查询部门下拉树结构
 export function deptTreeSelect() {
   return request({
-    url: '/system/dept/dept-tree',
+    url: "/system/dept/dept-tree",
-    method: 'get',
+    method: "get",
     params: {
-      status: '1'
+      status: "1",
-    }
+    },
-  })
+  });
 }

src/views/system/role/index.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="app-container">
     <el-form
-      v-show="showSearch"
-      ref="queryRef"
-      :inline="true"
       :model="queryParams"
+      ref="queryRef"
+      v-show="showSearch"
+      :inline="true"
       label-width="68px"
     >
       <el-form-item label="角色名称" prop="roleName">
         <el-input
           v-model="queryParams.roleName"
-          clearable
           placeholder="请输入角色名称"
+          clearable
           style="width: 240px"
           @keyup.enter="handleQuery"
         />
@@ -19,8 +19,8 @@
       <el-form-item label="权限字符" prop="roleKey">
         <el-input
           v-model="queryParams.roleKey"
-          clearable
           placeholder="请输入权限字符"
+          clearable
           style="width: 240px"
           @keyup.enter="handleQuery"
         />
@@ -28,8 +28,8 @@
       <el-form-item label="状态" prop="status">
         <el-select
           v-model="queryParams.status"
-          clearable
           placeholder="角色状态"
+          clearable
           style="width: 240px"
         >
           <el-option
@@ -43,15 +43,15 @@
       <el-form-item label="创建时间" style="width: 308px">
         <el-date-picker
           v-model="dateRange"
-          end-placeholder="结束日期"
+          value-format="YYYY-MM-DD"
+          type="daterange"
           range-separator="-"
           start-placeholder="开始日期"
-          type="daterange"
+          end-placeholder="结束日期"
-          value-format="YYYY-MM-DD"
         ></el-date-picker>
       </el-form-item>
       <el-form-item>
-        <el-button icon="Search" type="primary" @click="handleQuery"
+        <el-button type="primary" icon="Search" @click="handleQuery"
           >搜索</el-button
         >
         <el-button icon="Refresh" @click="resetQuery">重置</el-button>
@@ -60,45 +60,45 @@
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
-          v-hasPermi="['system:role:add']"
-          icon="Plus"
-          plain
           type="primary"
+          plain
+          icon="Plus"
           @click="handleAdd"
-          >新增
+          v-hasPermi="['system:role:add']"
-        </el-button>
+          >新增</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
-          v-hasPermi="['system:role:edit']"
-          :disabled="single"
-          icon="Edit"
-          plain
           type="success"
+          plain
+          icon="Edit"
+          :disabled="single"
           @click="handleUpdate"
-          >修改
+          v-hasPermi="['system:role:edit']"
-        </el-button>
+          >修改</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
-          v-hasPermi="['system:role:remove']"
-          :disabled="multiple"
-          icon="Delete"
-          plain
           type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
           @click="handleDelete"
-          >删除
+          v-hasPermi="['system:role:remove']"
-        </el-button>
+          >删除</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
-          v-hasPermi="['system:role:export']"
-          icon="Download"
-          plain
           type="warning"
+          plain
+          icon="Download"
           @click="handleExport"
-          >导出
+          v-hasPermi="['system:role:export']"
-        </el-button>
+          >导出</el-button
+        >
       </el-col>
       <right-toolbar
         v-model:showSearch="showSearch"
@@ -112,92 +112,92 @@
       :data="roleList"
       @selection-change="handleSelectionChange"
     >
-      <el-table-column align="center" type="selection" width="55" />
+      <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="角色编号" prop="roleId" width="120" />
       <el-table-column
-        :show-overflow-tooltip="true"
         label="角色名称"
         prop="roleName"
+        :show-overflow-tooltip="true"
         width="150"
       />
       <el-table-column
-        :show-overflow-tooltip="true"
         label="权限字符"
         prop="roleKey"
+        :show-overflow-tooltip="true"
         width="150"
       />
       <el-table-column label="显示顺序" prop="roleSort" width="100" />
-      <el-table-column align="center" label="状态" width="100">
+      <el-table-column label="状态" align="center" width="100">
         <template #default="scope">
           <el-switch
             v-model="scope.row.status"
-            active-value="1"
+            active-value="0"
-            inactive-value="0"
+            inactive-value="1"
             @change="handleStatusChange(scope.row)"
           ></el-switch>
         </template>
       </el-table-column>
-      <el-table-column align="center" label="创建时间" prop="createTime">
+      <el-table-column label="创建时间" align="center" prop="createTime">
         <template #default="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
       <el-table-column
+        label="操作"
         align="center"
         class-name="small-padding fixed-width"
-        label="操作"
       >
         <template #default="scope">
           <el-tooltip
-            v-if="scope.row.roleId !== 1"
             content="修改"
             placement="top"
+            v-if="scope.row.roleId !== 1"
           >
             <el-button
-              v-hasPermi="['system:role:edit']"
-              icon="Edit"
               link
               type="primary"
+              icon="Edit"
               @click="handleUpdate(scope.row)"
+              v-hasPermi="['system:role:edit']"
             ></el-button>
           </el-tooltip>
           <el-tooltip
-            v-if="scope.row.roleId !== 1"
             content="删除"
             placement="top"
+            v-if="scope.row.roleId !== 1"
           >
             <el-button
-              v-hasPermi="['system:role:remove']"
-              icon="Delete"
               link
               type="primary"
+              icon="Delete"
               @click="handleDelete(scope.row)"
+              v-hasPermi="['system:role:remove']"
             ></el-button>
           </el-tooltip>
           <el-tooltip
-            v-if="scope.row.roleId !== 1"
             content="数据权限"
             placement="top"
+            v-if="scope.row.roleId !== 1"
           >
             <el-button
-              v-hasPermi="['system:role:edit']"
-              icon="CircleCheck"
               link
               type="primary"
+              icon="CircleCheck"
               @click="handleDataScope(scope.row)"
+              v-hasPermi="['system:role:edit']"
             ></el-button>
           </el-tooltip>
           <el-tooltip
-            v-if="scope.row.roleId !== 1"
             content="分配用户"
             placement="top"
+            v-if="scope.row.roleId !== 1"
           >
             <el-button
-              v-hasPermi="['system:role:edit']"
-              icon="User"
               link
               type="primary"
+              icon="User"
               @click="handleAuthUser(scope.row)"
+              v-hasPermi="['system:role:edit']"
             ></el-button>
           </el-tooltip>
         </template>
@@ -206,14 +206,14 @@
 
     <pagination
       v-show="total > 0"
-      v-model:limit="queryParams.pageSize"
-      v-model:page="queryParams.pageNum"
       :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
 
     <!-- 添加或修改角色配置对话框 -->
-    <el-dialog v-model="open" :title="title" append-to-body width="500px">
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
       <el-form ref="roleRef" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="角色名称" prop="roleName">
           <el-input v-model="form.roleName" placeholder="请输入角色名称" />
@@ -235,8 +235,8 @@
         <el-form-item label="角色顺序" prop="roleSort">
           <el-input-number
             v-model="form.roleSort"
-            :min="0"
             controls-position="right"
+            :min="0"
           />
         </el-form-item>
         <el-form-item label="状态">
@@ -245,39 +245,42 @@
               v-for="dict in sys_normal_disable"
               :key="dict.value"
               :label="dict.value"
-              >{{ dict.label }}
+              >{{ dict.label }}</el-radio
-            </el-radio>
+            >
           </el-radio-group>
         </el-form-item>
         <el-form-item label="菜单权限">
           <el-checkbox
             v-model="menuExpand"
             @change="handleCheckedTreeExpand($event, 'menu')"
-            >展开/折叠
+            >展开/折叠</el-checkbox
-          </el-checkbox>
+          >
           <el-checkbox
             v-model="menuNodeAll"
             @change="handleCheckedTreeNodeAll($event, 'menu')"
-            >全选/全不选
+            >全选/全不选</el-checkbox
-          </el-checkbox>
+          >
-          <!--                    @change="handleCheckedTreeConnect($event, 'menu')"-->
+          <el-checkbox
-          <el-checkbox v-model="menuCheckStrictly"> 父子联动 </el-checkbox>
+            v-model="form.menuCheckStrictly"
+            @change="handleCheckedTreeConnect($event, 'menu')"
+            >父子联动</el-checkbox
+          >
           <el-tree
-            ref="menuRef"
-            :check-strictly="!menuCheckStrictly"
-            :data="menuOptions"
-            :props="{ label: 'label', children: 'children' }"
             class="tree-border"
-            empty-text="加载中，请稍候"
+            :data="menuOptions"
-            node-key="id"
             show-checkbox
+            ref="menuRef"
+            node-key="id"
+            :check-strictly="!form.menuCheckStrictly"
+            empty-text="加载中，请稍候"
+            :props="{ label: 'label', children: 'children' }"
           ></el-tree>
         </el-form-item>
         <el-form-item label="备注">
           <el-input
             v-model="form.remark"
-            placeholder="请输入内容"
             type="textarea"
+            placeholder="请输入内容"
           ></el-input>
         </el-form-item>
       </el-form>
@@ -291,10 +294,10 @@
 
     <!-- 分配角色数据权限对话框 -->
     <el-dialog
-      v-model="openDataScope"
       :title="title"
-      append-to-body
+      v-model="openDataScope"
       width="500px"
+      append-to-body
     >
       <el-form :model="form" label-width="80px">
         <el-form-item label="角色名称">
@@ -313,29 +316,32 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item v-show="form.dataScope == 2" label="数据权限">
+        <el-form-item label="数据权限" v-show="form.dataScope == 2">
           <el-checkbox
             v-model="deptExpand"
             @change="handleCheckedTreeExpand($event, 'dept')"
-            >展开/折叠
+            >展开/折叠</el-checkbox
-          </el-checkbox>
+          >
           <el-checkbox
             v-model="deptNodeAll"
             @change="handleCheckedTreeNodeAll($event, 'dept')"
-            >全选/全不选
+            >全选/全不选</el-checkbox
-          </el-checkbox>
+          >
-          <!--                   @change="handleCheckedTreeConnect($event, 'dept')"-->
+          <el-checkbox
-          <el-checkbox v-model="deptCheckStrictly"> 父子联动 </el-checkbox>
+            v-model="form.deptCheckStrictly"
+            @change="handleCheckedTreeConnect($event, 'dept')"
+            >父子联动</el-checkbox
+          >
           <el-tree
-            ref="deptRef"
-            :check-strictly="!deptCheckStrictly"
-            :data="deptOptions"
-            :props="{ label: 'label', children: 'children' }"
             class="tree-border"
-            default-expand-all
+            :data="deptOptions"
-            empty-text="加载中，请稍候"
-            node-key="id"
             show-checkbox
+            default-expand-all
+            ref="deptRef"
+            node-key="id"
+            :check-strictly="!form.deptCheckStrictly"
+            empty-text="加载中，请稍候"
+            :props="{ label: 'label', children: 'children' }"
           ></el-tree>
         </el-form-item>
       </el-form>
@@ -349,28 +355,27 @@
   </div>
 </template>
 
-<script lang="jsx" name="Role" setup>
+<script setup name="Role" lang="jsx">
-import { ElMessageBox } from "element-plus";
 import {
   addRole,
   changeRoleStatus,
   dataScope,
   delRole,
-  deptTreeSelect,
   getRole,
   listRole,
   updateRole,
+  deptTreeSelect,
 } from "@/api/system/role";
 import {
   roleMenuTreeselect,
-  treeSelect as menuTreeSelect,
+  treeSelect as menuTreeselect,
 } from "@/api/system/menu";
 import { sys_normal_disable } from "@/constant/dict";
+import { ElMessageBox } from "element-plus";
 
 const router = useRouter();
 const { proxy } = getCurrentInstance();
-const deptCheckStrictly = ref(true); /*部门父子联动*/
+
-const menuCheckStrictly = ref(true); /*菜单父子联动*/
 const roleList = ref([]);
 const open = ref(false);
 const loading = ref(true);
@@ -433,20 +438,17 @@ function getList() {
     }
   );
 }
-
 /** 搜索按钮操作 */
 function handleQuery() {
   queryParams.value.pageNum = 1;
   getList();
 }
-
 /** 重置按钮操作 */
 function resetQuery() {
   dateRange.value = [];
   proxy.resetForm("queryRef");
   handleQuery();
 }
-
 /** 删除按钮操作 */
 function handleDelete(row) {
   const roleIds = row.roleId || ids.value;
@@ -470,7 +472,6 @@ function handleDelete(row) {
       ))}
     </>
   );
-  // `是否确认删除角色名称为"${roleNames.join(',')}"的数据项?`
   ElMessageBox.confirm(messageVnode, "确认删除", {
     type: "danger",
     "confirm-button-class": "confirm-delete-button",
@@ -484,7 +485,6 @@ function handleDelete(row) {
     })
     .catch(() => {});
 }
-
 /** 导出按钮操作 */
 function handleExport() {
   proxy.download(
@@ -495,19 +495,17 @@ function handleExport() {
     `role_${new Date().getTime()}.xlsx`
   );
 }
-
 /** 多选框选中数据 */
 function handleSelectionChange(selection) {
   ids.value = selection.map((item) => item.roleId);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
 }
-
 /** 角色状态修改 */
 function handleStatusChange(row) {
-  let text = row.status === "1" ? "启用" : "停用";
+  let text = row.status === "0" ? "启用" : "停用";
   proxy.$modal
-    .confirm("确认要" + text + '"' + row.roleName + '"角色吗?')
+    .confirm('确认要"' + text + '""' + row.roleName + '"角色吗?')
     .then(function () {
       return changeRoleStatus(row.roleId, row.status);
     })
@@ -518,7 +516,6 @@ function handleStatusChange(row) {
       row.status = row.status === "0" ? "1" : "0";
     });
 }
-
 /** 更多操作 */
 function handleCommand(command, row) {
   switch (command) {
@@ -532,19 +529,16 @@ function handleCommand(command, row) {
       break;
   }
 }
-
 /** 分配用户 */
 function handleAuthUser(row) {
   router.push("/system/role-auth/user/" + row.roleId);
 }
-
 /** 查询菜单树结构 */
-function getMenuTreeSelect() {
+function getMenuTreeselect() {
-  menuTreeSelect().then((response) => {
+  menuTreeselect().then((response) => {
     menuOptions.value = response.data;
   });
 }
-
 /** 所有部门节点数据 */
 function getDeptAllCheckedKeys() {
   // 目前被选中的部门节点
@@ -554,7 +548,6 @@ function getDeptAllCheckedKeys() {
   checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
   return checkedKeys;
 }
-
 /** 重置新增的表单以及其他数据  */
 function reset() {
   if (menuRef.value != undefined) {
@@ -569,24 +562,22 @@ function reset() {
     roleName: undefined,
     roleKey: undefined,
     roleSort: 0,
-    status: "1",
+    status: "0",
     menuIds: [],
     deptIds: [],
-    // menuCheckStrictly: true,
+    menuCheckStrictly: true,
-    // deptCheckStrictly: true,
+    deptCheckStrictly: true,
     remark: undefined,
   };
   proxy.resetForm("roleRef");
 }
-
 /** 添加角色 */
 function handleAdd() {
   reset();
-  getMenuTreeSelect();
+  getMenuTreeselect();
   open.value = true;
   title.value = "添加角色";
 }
-
 /** 修改角色 */
 function handleUpdate(row) {
   reset();
@@ -609,7 +600,6 @@ function handleUpdate(row) {
     title.value = "修改角色";
   });
 }
-
 /** 根据角色ID查询菜单树结构 */
 function getRoleMenuTreeselect(roleId) {
   return roleMenuTreeselect(roleId).then((response) => {
@@ -617,7 +607,6 @@ function getRoleMenuTreeselect(roleId) {
     return response;
   });
 }
-
 /** 根据角色ID查询部门树结构 */
 function getDeptTree(roleId) {
   return deptTreeSelect(roleId).then((response) => {
@@ -625,7 +614,6 @@ function getDeptTree(roleId) {
     return response;
   });
 }
-
 /** 树权限（展开/折叠）*/
 function handleCheckedTreeExpand(value, type) {
   if (type == "menu") {
@@ -640,7 +628,6 @@ function handleCheckedTreeExpand(value, type) {
     }
   }
 }
-
 /** 树权限（全选/全不选） */
 function handleCheckedTreeNodeAll(value, type) {
   if (type == "menu") {
@@ -649,7 +636,6 @@ function handleCheckedTreeNodeAll(value, type) {
     deptRef.value.setCheckedNodes(value ? deptOptions.value : []);
   }
 }
-
 /** 树权限（父子联动） */
 function handleCheckedTreeConnect(value, type) {
   if (type == "menu") {
@@ -658,7 +644,6 @@ function handleCheckedTreeConnect(value, type) {
     form.value.deptCheckStrictly = value ? true : false;
   }
 }
-
 /** 所有菜单节点数据 */
 function getMenuAllCheckedKeys() {
   // 目前被选中的菜单节点
@@ -668,7 +653,6 @@ function getMenuAllCheckedKeys() {
   checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
   return checkedKeys;
 }
-
 /** 提交按钮 */
 function submitForm() {
   proxy.$refs["roleRef"].validate((valid) => {
@@ -691,20 +675,17 @@ function submitForm() {
     }
   });
 }
-
 /** 取消按钮 */
 function cancel() {
   open.value = false;
   reset();
 }
-
 /** 选择角色权限范围触发 */
 function dataScopeSelectChange(value) {
   if (value !== "2") {
     deptRef.value.setCheckedKeys([]);
   }
 }
-
 /** 分配数据权限操作 */
 function handleDataScope(row) {
   reset();
@@ -724,7 +705,6 @@ function handleDataScope(row) {
     title.value = "分配数据权限";
   });
 }
-
 /** 提交按钮（数据权限） */
 function submitDataScope() {
   if (form.value.roleId != undefined) {
@@ -736,7 +716,6 @@ function submitDataScope() {
     });
   }
 }
-
 /** 取消按钮（数据权限）*/
 function cancelDataScope() {
   openDataScope.value = false;
@@ -745,7 +724,3 @@ function cancelDataScope() {
 
 getList();
 </script>
-<style lang="scss" scoped>
-.confirm-button-class {
-}
-</style>