角色管理增删改查

src/components/power/Roles.vue

@@ -3,7 +3,7 @@
  * @Version: 1.0
  * @Autor: zhuyijun
  * @Date: 2021-11-22 19:57:15
- * @LastEditTime: 2021-11-22 22:17:12
+ * @LastEditTime: 2021-11-23 13:59:31
 -->
 <template>
   <div>
@@ -19,7 +19,8 @@
       <!-- 添加角色按钮区 -->
       <el-row>
         <el-col>
-          <el-button type="primary">添加角色</el-button>
+          <el-button type="primary"
+                     @click="addRoleDialog">添加角色</el-button>
         </el-col>
       </el-row>
 
@@ -84,10 +85,12 @@
           <template slot-scope="scope">
             <el-button type="primary"
                        icon="el-icon-edit"
-                       size="mini">编辑</el-button>
+                       size="mini"
+                       @click="showEditRoleDialog(scope.$index,scope.row)">编辑</el-button>
             <el-button type="danger"
                        icon="el-icon-delete"
-                       size="mini">删除</el-button>
+                       size="mini"
+                       @click="removeRoleById(scope.$index,scope.row)">删除</el-button>
             <el-button type="warning"
                        icon="el-icon-setting"
                        size="mini"
@@ -117,6 +120,75 @@
                    @click="allotRights">确 定</el-button>
       </span>
     </el-dialog>
+
+    <!-- 添加角色 -->
+    <el-dialog title="添加角色"
+               :visible.sync="addRoleVisible"
+               width="50%"
+               @close="addRoleDialogClose">
+      <el-form :model="addRoleForm"
+               ref="addRoleFormRef"
+               :rules="addRoleFormRules">
+        <el-form-item label="角色名称"
+                      prop="roleName">
+          <el-input v-model="addRoleForm.roleName"
+                    prefix-icon="el-icon-user"
+                    type="text"></el-input>
+        </el-form-item>
+
+        <el-form-item label="角色描述"
+                      prop="roleDesc">
+          <el-input v-model="addRoleForm.roleDesc"
+                    prefix-icon="el-icon-user"
+                    type="text"></el-input>
+        </el-form-item>
+      </el-form>
+
+      <span slot="footer"
+            class="dialog-footer">
+        <el-button @click="addRoleVisible = false">取 消</el-button>
+        <el-button type="primary"
+                   @click="addRole">确 定</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 修改角色 -->
+    <el-dialog title="编辑角色"
+               :visible.sync="editRoleVisible"
+               width="50%"
+               @close="editRoleDialogClose">
+      <el-form :model="editRoleForm"
+               ref="editRoleFormRef"
+               :rules="editRoleFormRules">
+        <el-form-item label="编号"
+                      prop="roleName">
+          <el-input v-model="editRoleForm.id"
+                    prefix-icon="el-icon-user"
+                    type="text"
+                    disabled></el-input>
+        </el-form-item>
+        <el-form-item label="角色名称"
+                      prop="roleName">
+          <el-input v-model="editRoleForm.roleName"
+                    prefix-icon="el-icon-user"
+                    type="text"></el-input>
+        </el-form-item>
+
+        <el-form-item label="角色描述"
+                      prop="roleDesc">
+          <el-input v-model="editRoleForm.roleDesc"
+                    prefix-icon="el-icon-user"
+                    type="text"></el-input>
+        </el-form-item>
+      </el-form>
+
+      <span slot="footer"
+            class="dialog-footer">
+        <el-button @click="editRoleVisible = false">取 消</el-button>
+        <el-button type="primary"
+                   @click="editRole">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -134,7 +206,26 @@ export default {
       //   默认选中的节点id值数组
       defKeys: [],
       // 当前即将分配权限的id
-      roleId: ''
+      roleId: '',
+      addRoleVisible: false,
+      addRoleForm: {
+        roleName: '',
+        roleDesc: ''
+      },
+      addRoleFormRules: {
+        roleName: [{ required: true, message: '角色名称不能为空', trigger: 'blur' },
+        { min: 2, max: 40, message: '长度在 2到 40 个字符', trigger: 'blur' }]
+      },
+      editRoleForm: {
+        id: '',
+        roleName: '',
+        roleDesc: ''
+      },
+      editRoleFormRules: {
+        roleName: [{ required: true, message: '角色名称不能为空', trigger: 'blur' },
+        { min: 2, max: 40, message: '长度在 2到 40 个字符', trigger: 'blur' }]
+      },
+      editRoleVisible: false
     }
   },
   created () {
@@ -208,6 +299,71 @@ export default {
       this.getRolesList()
       this.setRightDialogVisible = false
       return this.$message.success('分配权限成功')
+    },
+    addRoleDialog () {
+      this.addRoleVisible = true
+    },
+    addRole () {
+      this.$refs.addRoleFormRef.validate(async (vaild) => {
+        if (!vaild) return
+        const { data: res } = await this.$http.post('/roles', this.addRoleForm)
+        if (res.meta.status !== 201) {
+          return this.$message.error(res.meta.msg)
+        }
+        this.addRoleVisible = false
+        this.$message.success(res.meta.msg)
+        this.getRolesList()
+      })
+    },
+    addRoleDialogClose () {
+      this.$refs.addRoleFormRef.resetFields()
+    },
+    editRoleDialogClose () {
+      this.$refs.editRoleFormRef.resetFields()
+    },
+    showEditRoleDialog (index, roleInfo) {
+      // 给表格填充数据
+      this.editRoleForm = Object.assign({}, roleInfo)
+      this.editRoleForm.index = index
+      this.editRoleVisible = true
+    },
+    editRole () {
+      this.$refs.editRoleFormRef.validate(async (vaild) => {
+        if (!vaild) return
+        const { data: res } = await this.$http.put(`roles/${this.editRoleForm.id}`, this.editRoleForm)
+        if (res.meta.status !== 200) {
+          return this.$message.error(res.meta.msg)
+        }
+
+        this.$message.success(res.meta.msg)
+        this.editRoleVisible = false
+        // this.getRolesList()
+        // 回写到表格中
+        this.$set(this.rolesList, this.editRoleForm.index, {
+          data: this.editRoleForm,
+          id: this.editRoleForm.id,
+          roleName: this.editRoleForm.roleName,
+          roleDesc: this.editRoleForm.roleDesc
+        })
+      })
+    },
+    async removeRoleById (index, role) {
+      const confirmResule = await this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).catch(err => err)
+      if (confirmResule !== 'confirm') {
+        return this.$message.info('取消删除')
+      }
+      const { data: res } = await this.$http.delete(`roles/${role.id}`)
+      if (res.meta.status !== 200) {
+        return this.$message.error('删除角色失败')
+      }
+      console.log(index)
+      // 为当前角色信息重新复制
+      this.rolesList.splice(index, 1)
+      this.$message.success('删除角色成功')
     }
   }
 }