删除功能

src/api/setting.js

@@ -18,3 +18,14 @@ export function getRoleList(params) {
     params
   })
 }
+
+/** **
+ *  删除角色
+ *
+ * ****/
+export function deleteRole(id) {
+  return request({
+    url: `/sys/role/${id}`,
+    method: 'delete'
+  })
+}

src/views/setting/index.vue

@@ -19,9 +19,11 @@
               <el-table-column label="角色名称" prop="name" align="center" width="240" />
               <el-table-column label="描述" prop="description" align="center" />
               <el-table-column label="操作">
-                <el-button size="small" type="success">分配权限</el-button>
+                <template slot-scope="{row}">
-                <el-button size="small" type="primary">编辑</el-button>
+                  <el-button size="small" type="success">分配权限</el-button>
-                <el-button size="small" type="danger">删除</el-button>
+                  <el-button size="small" type="primary">编辑</el-button>
+                  <el-button size="small" type="danger" @click="deleteRole(row.id)">删除</el-button>
+                </template>
               </el-table-column>
             </el-table>
             <!-- 分页组件 -->
@@ -61,7 +63,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import { getCompanyInfo, getRoleList } from '@/api/setting'
+import { getCompanyInfo, getRoleList, deleteRole } from '@/api/setting'
 export default {
   data() {
     return {
@@ -120,6 +122,23 @@ export default {
     sizeChange(newSize) {
       this.page.pagesize = newSize
       this.getRoleList()
+    },
+    // 删除角色
+    async deleteRole(id) {
+      //  提示
+      try {
+        await this.$confirm('确认删除该角色吗')
+        // 只有点击了确定 才能进入到下方
+        // 优化, 删除前发现只有一条数据, 并且不是第一页, 往前翻一页
+        if (this.list.length === 1 && this.page.page > 1) {
+          this.page.page -= 1
+        }
+        await deleteRole(id) // 调用删除接口
+        this.getRoleList() // 重新加载数据
+        this.$message.success('删除角色成功')
+      } catch (error) {
+        console.log(error)
+      }
     }
   }
 }