编辑角色

src/api/setting.js

@@ -29,3 +29,21 @@ export function deleteRole(id) {
     method: 'delete'
   })
 }
+/** *
+ * 修改角色
+ * ***/
+export function updateRole(data) {
+  return request({
+    url: `/sys/role/${data.id}`,
+    data,
+    method: 'put'
+  })
+}
+/**
+ * 获取角色详情
+ * **/
+export function getRoleDetail(id) {
+  return request({
+    url: `/sys/role/${id}`
+  })
+}

src/views/setting/componets/editRole.vue

@@ -0,0 +1,99 @@
+<template>
+  <el-dialog :title="title" :visible="showDialog" @close="btnCancel">
+    <el-form ref="roleForm" :model="roleForm" :rules="rules" label-width="120px">
+      <el-form-item label="角色名称" prop="name">
+        <el-input v-model="roleForm.name" />
+      </el-form-item>
+      <el-form-item label="角色描述" prop="description">
+        <el-input v-model="roleForm.description" />
+      </el-form-item>
+    </el-form>
+    <!-- 底部 -->
+    <el-row slot="footer" type="flex" justify="center">
+      <el-col :span="6">
+        <el-button size="small" @click="btnCancel">取消</el-button>
+        <el-button size="small" type="primary" @click="btnOK">确定</el-button>
+      </el-col>
+    </el-row>
+  </el-dialog>
+</template>
+
+<script>
+import { updateRole, getRoleDetail } from '@/api/setting'
+export default {
+  components: {},
+  props: {
+    showDialog: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      roleForm: {
+        name: '',
+        description: ''
+      },
+      rules: {
+        name: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { min: 1, max: 10, message: '要求1-10个字符', trigger: 'blur' }
+        ],
+        description: [
+          { min: 0, max: 50, message: '不能超过50个字符', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  computed: {
+    title() {
+      return this.roleForm.id ? '编辑角色信息' : '新增角色'
+    }
+  },
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    async getRoleDetail(id) {
+      this.roleForm = await getRoleDetail(id)
+    },
+    async btnOK() {
+      try {
+        await this.$refs.roleForm.validate()
+        // 编辑场景
+        if (this.roleForm.id) {
+          await updateRole(this.roleForm)
+        } else {
+          // 新增场景
+          // 接口要求拼接一个pid
+          // await addDepartments({ ...this.formData, pid: this.treeNode.id })
+        }
+        // 更新数据
+        this.$emit('editRoleOK')
+        // 关闭弹窗 子组件修改父组件传来的props:  this.$emit(update: props名, 新值), 父组件加.sync
+        this.$emit('update:showDialog', false)
+        this.$message.success(this.roleForm.id ? '编辑成功' : '添加成功')
+      } catch (error) {
+        console.log('捕获错误')
+        console.log(error)
+      }
+    },
+    btnCancel() {
+      // 兼容编辑功能, 强制重置
+      this.roleForm = {
+        name: '',
+        description: '',
+        id: null
+      }
+      // resetFields, 重置校验字段 和校验错误信息
+      this.$refs.roleForm.resetFields()
+      // 关闭弹窗
+      this.$emit('update:showDialog', false)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/setting/index.vue

@@ -21,7 +21,7 @@
               <el-table-column label="操作">
                 <template slot-scope="{row}">
                   <el-button size="small" type="success">分配权限</el-button>
-                  <el-button size="small" type="primary">编辑</el-button>
+                  <el-button size="small" type="primary" @click="editRole(row.id)">编辑</el-button>
                   <el-button size="small" type="danger" @click="deleteRole(row.id)">删除</el-button>
                 </template>
               </el-table-column>
@@ -58,13 +58,16 @@
         </el-tabs>
       </el-card>
     </div>
+    <EditRole ref="editForm" :show-dialog.sync="showDialog" @editRoleOK="getRoleList" />
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import { getCompanyInfo, getRoleList, deleteRole } from '@/api/setting'
+import EditRole from './componets/editRole.vue'
 export default {
+  components: { EditRole },
   data() {
     return {
       // 公司信息表单
@@ -81,7 +84,10 @@ export default {
         page: 1, // 当前页码
         pagesize: 10, // 每页长度
         total: 0 // 总条数
-      }
+      },
+      // 编辑弹窗
+      showDialog: false
+
     }
   },
   computed: {
@@ -139,6 +145,12 @@ export default {
       } catch (error) {
         console.log(error)
       }
+    },
+    // 编辑角色
+    async editRole(id) {
+      // 通过ref调用子组件的方法
+      await this.$refs.editForm.getRoleDetail(id)
+      this.showDialog = true
     }
   }
 }