a

src/views/admin/system/role/change-role.vue

@@ -4,11 +4,16 @@
 <!--      <el-form-item label="学校">-->
 <!--        <el-tag>{{schoolName}}</el-tag>-->
 <!--      </el-form-item>-->
-      <el-form-item label="角色">
-        <el-radio-group v-model="radio">
-          <el-radio-button v-for="(item,index) in allRole"  :key="index" :label="item.roleCode" @click.native="handleChangeRole(item.roleCode)">{{item.roleName}}</el-radio-button>
+      <el-form-item label="角色" class="role-form-item">
+        <el-radio-group v-model="radio" class="role-radio-group" @change="handleChangeRole">
+          <el-radio-button
+            v-for="item in allRole"
+            :key="item.roleCode"
+            :label="item.roleCode"
+          >
+            {{ item.roleName }}
+          </el-radio-button>
         </el-radio-group>
-
       </el-form-item>
     </el-form>
 
@@ -40,15 +45,16 @@ const open=()=>{
     visible.value=true
   })
 }
-const handleChangeRole=(label:any)=>{
-  let obj:any=allRole.find((v:any) => v.roleCode == label)
-  Local.set("roleCode",obj.roleCode)
-  Local.set("roleName",obj.roleName)
-  Local.set("roleId",obj.roleId)
-  useMessage().success("操作成功")
-  setTimeout(()=>{
+const handleChangeRole = (label: string) => {
+  const obj = allRole.find((v: any) => v.roleCode === label)
+  if (!obj) return
+  Local.set('roleCode', obj.roleCode)
+  Local.set('roleName', obj.roleName)
+  Local.set('roleId', obj.roleId)
+  useMessage().success('操作成功')
+  setTimeout(() => {
     window.location.reload()
-  },500)
+  }, 500)
 }
 
 const handleQuerySchoolName=()=>{
@@ -62,6 +68,28 @@ defineExpose({
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.role-form-item {
+  :deep(.el-form-item__content) {
+    flex-wrap: wrap;
+  }
+}
+.role-radio-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
 
+  /* 每个按钮独立边框，换行后左侧也有边线 */
+  :deep(.el-radio-button) {
+    margin: 0;
+  }
+  :deep(.el-radio-button__inner) {
+    border-radius: 6px !important;
+    border: 1px solid var(--el-border-color) !important;
+    margin-left: 0 !important;
+  }
+  :deep(.el-radio-button.is-active .el-radio-button__inner) {
+    border-color: var(--el-color-primary) !important;
+  }
+}
 </style>