角色增删改查

src/components/Sidebar.vue

@@ -219,6 +219,10 @@ export default {
               index: "/userManagement",
               title: "用户管理",
             },
+            {
+              index: "/roleManagement",
+              title: "角色管理",
+            },
             // {
             //   index: "/globalTools",
             //   title: "全局设置",

src/utils/api/index.js

@@ -738,7 +738,10 @@ export function deleteRole(data) {
   return request({
     url: "/xymanager/role/delete",
     method: "post",
-    data,
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
   });
 }
 

src/utils/request.js

@@ -29,7 +29,6 @@ service.interceptors.response.use(
   //   console.log(error);
   //   return Promise.reject();
   // }
-
   (response) => {
     const res = response.data;
     if (res.code !== 200) {
@@ -40,19 +39,30 @@ service.interceptors.response.use(
       //   duration: 5 * 1000,
       // });
       if (res.code === 401) {
-        Message({ message: res.msg, type: "error", duration: 1500 });
+        Message({
+          showClose: true,
+          message: res.msg,
+          type: "error",
+          duration: 1500,
+        });
         localStorage.removeItem("token");
         router.push("/login");
       }
 
       if (res.code === 400) {
-        Message({ message: res.msg, type: "error", duration: 1500 });
+        Message({
+          showClose: true,
+          message: res.msg,
+          type: "error",
+          duration: 1500,
+        });
       }
-
       if (res.code === 500) {
+        //alert(res.msg || "Error");
+
         Message({
           showClose: true,
-          message: 服务器错误(500),
+          message: res.msg,
           type: "error",
           duration: 1500,
         });

src/views/system/roleManagement/components/addRole.vue

@@ -14,10 +14,10 @@
       :rules="title == '新增' ? rules : xgrules"
       :model="formdata"
     >
-      <el-form-item label="角色名称：" prop="roleName">
+      <el-form-item label="角色名称：" prop="name">
         <el-input
           placeholder="请输入角色名称"
-          v-model="formdata.roleName"
+          v-model="formdata.name"
           autocomplete="off"
         ></el-input>
       </el-form-item>
@@ -29,7 +29,7 @@
   </el-dialog>
 </template>
 <script>
-import { addUserApi, updateUserApi } from "@/utils/api/index";
+import { addRole, updateRole } from "@/utils/api/index";
 export default {
   props: {
     title: String,
@@ -41,14 +41,10 @@ export default {
 
       formdata: {},
       rules: {
-        roleName: [
+        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
-          { required: true, message: "请输入用户名", trigger: "blur" },
-        ],
       },
       xgrules: {
-        roleName: [
+        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
-          { required: true, message: "请输入用户名", trigger: "blur" },
-        ],
       },
     };
   },
@@ -69,7 +65,7 @@ export default {
       this.$refs.formInfo.validate((valid) => {
         if (valid) {
           if (this.title == "新增") {
-            addUserApi(this.formdata)
+            addRole(this.formdata)
               .then((res) => {
                 if (res.code == 200) {
                   this.$message({
@@ -85,7 +81,7 @@ export default {
               })
               .catch((err) => {});
           } else {
-            updateUserApi(this.formdata)
+            updateRole(this.formdata)
               .then((res) => {
                 if (res.code == 200) {
                   this.$message.success("修改成功");

src/views/system/roleManagement/components/blindPermiss.vue

@@ -0,0 +1,102 @@
+<template>
+  <el-dialog
+    class="addUserDialog"
+    title="权限绑定"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="470px"
+    @close="handleclose"
+  >
+    绑定权限
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="isShow = false">取 消</el-button>
+      <el-button type="primary" @click="submitForm()">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { addRole, updateRole } from "@/utils/api/index";
+export default {
+  props: {},
+  data() {
+    return {
+      roleUser: "",
+      isShow: false,
+
+      formdata: {},
+      rules: {
+        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+      },
+      xgrules: {
+        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    //判断
+    getdataform(val) {
+      this.formdata = JSON.parse(JSON.stringify(val));
+    },
+    // 保存确定操作
+    submitForm() {
+      this.$refs.formInfo.validate((valid) => {
+        if (valid) {
+          if (this.title == "新增") {
+            addRole(this.formdata)
+              .then((res) => {
+                if (res.code == 200) {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: "添加成功",
+                    type: "success",
+                  });
+                  this.isShow = false;
+                } else {
+                  this.$message.error(res.msg);
+                }
+              })
+              .catch((err) => {});
+          } else {
+            updateRole(this.formdata)
+              .then((res) => {
+                if (res.code == 200) {
+                  this.$message.success("修改成功");
+                  this.isShow = false;
+                } else {
+                  this.$message.error(res.msg);
+                }
+              })
+              .catch((err) => {});
+          }
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    display() {
+      this.isShow = true;
+      this.roleUser = localStorage.getItem("role");
+    },
+    hide() {
+      this.isShow = false;
+    },
+    handleclose() {
+      this.$parent.roleListAll();
+    },
+  },
+  mounted() {},
+};
+</script>
+<style lang="less">
+.addUserDialog {
+  .el-form-item {
+    .el-input,
+    .el-select,
+    .el-input-number {
+      width: 100%;
+    }
+  }
+}
+</style>

src/views/system/roleManagement/index.vue

@@ -20,10 +20,15 @@
           <template slot="empty">
             <el-empty :image-size="160" description="暂无数据"></el-empty>
           </template>
+          <el-table-column
+            label="ID"
+            show-overflow-tooltip
+            prop="id"
+          ></el-table-column>
           <el-table-column
             label="角色"
             show-overflow-tooltip
-            prop="userName"
+            prop="name"
           ></el-table-column>
 
           <el-table-column
@@ -42,6 +47,9 @@
                 type="text"
                 >修改</el-button
               >
+              <el-button @click.native.stop="handleBlind(scope.row)" type="text"
+                >权限绑定</el-button
+              >
               <el-button
                 type="text"
                 class="deleteText"
@@ -67,16 +75,20 @@
     </div>
     <!-- 新增 -->
     <addRole :title="title" ref="adduserref"></addRole>
+    <!-- 权限绑定 -->
+    <blindPermiss ref="blindPermissRef"></blindPermiss>
   </div>
 </template>
 <script>
 import addRole from "./components/addRole.vue";
+import blindPermiss from "./components/blindPermiss.vue";
 import { getRoleList, deleteRole } from "@/utils/api/index";
 
 export default {
   name: "roleManagement",
   components: {
     addRole,
+    blindPermiss,
   },
   data() {
     return {
@@ -96,7 +108,7 @@ export default {
     roleListAll() {
       getRoleList()
         .then((res) => {
-          this.roleTableData = res.data.list;
+          this.roleTableData = res.data;
           this.total = res.data.total;
         })
         .catch((err) => {});
@@ -115,6 +127,11 @@ export default {
       this.$refs.adduserref.display();
       this.$refs.adduserref.getdataform(null);
     },
+    //权限绑定
+    handleBlind(data) {
+      this.$refs.blindPermissRef.display();
+      this.$refs.blindPermissRef.getdataform(data);
+    },
 
     //修改
     handleResive(data) {
@@ -125,17 +142,19 @@ export default {
 
     //删除数据
     handleDelete(data) {
+      console.log(data);
       this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
       })
         .then(() => {
-          deleteRole({ uid: data.userId }).then((res) => {
+          deleteRole({ id: data.id }).then((res) => {
+            console.log(res.code);
             if (res.code == 200) {
               this.$message.success("删除成功");
               this.roleListAll(); //刷新
-            } else {
+            } else if (res.code == 400) {
               this.$message.error(res.msg);
             }
           });

src/views/system/userManagement.vue

@@ -49,6 +49,7 @@
                 type="text"
                 >修改</el-button
               >
+
               <el-button
                 type="text"
                 class="deleteText"

vue.config.js

@@ -31,5 +31,8 @@ module.exports = defineConfig({
         },
       },
     },
+    client: {
+      overlay: false,
+    },
   },
 });