Merge branch 'main' of http://192.168.0.56:3000/bonus/bonus-ui into safetywarning-ui

src/views/system/role/index.vue

@@ -101,7 +101,7 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
+    <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange" :selectable="checkSelectable" :row-class-name="getRowClassName">
       <el-table-column type="selection" min-width="55" align="center"/>
       <el-table-column label="角色编号" prop="roleId" min-width="120" align="center"/>
       <el-table-column label="角色名称" align="center" prop="roleName" :show-overflow-tooltip="true" min-width="150"/>
@@ -476,9 +476,14 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.roleId)
+      // 过滤掉不可选的行（虽然界面上不可选，但为了安全起见还是过滤一次）
-      this.single = selection.length != 1
+      const validSelection = selection.filter(row => this.checkSelectable(row));
-      this.multiple = !selection.length
+
+      // 更新选中的roleId数组
+      this.ids = validSelection.map(item => item.roleId);
+      // 更新单选和多选状态
+      this.single = validSelection.length !== 1;
+      this.multiple = !validSelection.length;
   },
     // 更多操作触发
     handleCommand(command, row) {
@@ -626,7 +631,33 @@ export default {
       this.download('system/role/export', {
         ...this.queryParams
       }, `role_${new Date().getTime()}.xlsx`)
-    }
+    },
+    // 检查行是否可选
+    checkSelectable(row) {
+      return !(row.roleId === 1 || row.isBuiltIn === '0');
+    },
+
+
+    getRowClassName(row) {
+      return !this.checkSelectable(row) ? 'disabled-row' : '';
+    },
   }
 }
 </script>
+
+
+<style>
+.disabled-row {
+  background-color: #f5f7fa !important;
+  color: #909399;
+  cursor: not-allowed;
+}
+
+.disabled-row .el-checkbox__input {
+  cursor: not-allowed !important;
+}
+
+.disabled-row:hover td {
+  background-color: #f5f7fa !important;
+}
+</style>

src/views/system/user/index.vue

@@ -82,7 +82,7 @@
           <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
         </el-row>
 
-        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
+        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange" :selectable="checkSelectable" :row-class-name="getRowClassName">
           <el-table-column type="selection" width="50" align="center"/>
           <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible"/>
           <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible"
@@ -584,9 +584,14 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.userId)
+      // 过滤掉不可选的行（虽然界面上不可选，但为了安全起见还是过滤一次）
-      this.single = selection.length != 1
+      const validSelection = selection.filter(row => this.checkSelectable(row));
-      this.multiple = !selection.length
+
+      // 更新选中的roleId数组
+      this.ids = validSelection.map(item => item.userId);
+      // 更新单选和多选状态
+      this.single = validSelection.length !== 1;
+      this.multiple = !validSelection.length;
     },
     // 更多操作触发
     handleCommand(command, row) {
@@ -782,7 +787,32 @@ export default {
     // 提交上传文件
     submitFileForm() {
       this.$refs.upload.submit()
-    }
+    },
+    // 检查行是否可选
+    checkSelectable(row) {
+      return !(row.userId === 1 || row.isBuiltIn === '0');
+    },
+
+
+    getRowClassName(row) {
+      return !this.checkSelectable(row) ? 'disabled-row' : '';
+    },
   }
 }
 </script>
+
+<style>
+.disabled-row {
+  background-color: #f5f7fa !important;
+  color: #909399;
+  cursor: not-allowed;
+}
+
+.disabled-row .el-checkbox__input {
+  cursor: not-allowed !important;
+}
+
+.disabled-row:hover td {
+  background-color: #f5f7fa !important;
+}
+</style>