94 lines
2.1 KiB
Vue
94 lines
2.1 KiB
Vue
|
<!--
|
||
|
|
* @Author: Guanghao
|
||
|
|
* @Date: 2022-01-05 11:53:19
|
||
|
|
* @LastEditors: Guanghao
|
||
|
|
* @LastEditTime: 2022-01-05 18:21:17
|
||
|
|
* @Description: 角色编辑框
|
||
|
|
-->
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="container">
|
||
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||
|
|
<el-form-item label="角色名称" prop="name">
|
||
|
|
<el-input v-model="form.name" placeholder="请输入" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="角色说明" prop="description">
|
||
|
|
<el-input
|
||
|
|
type="textarea"
|
||
|
|
v-model="form.description"
|
||
|
|
placeholder="请输入"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item class="btns">
|
||
|
|
<el-button @click="$emit('on-cancel')">取消</el-button>
|
||
|
|
<el-button type="primary" @click="handleConfirmClick">确定</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import Dialog from "../../_Common/Dialog.vue";
|
||
|
|
|
||
|
|
import RoleBiz from "../../../biz/Rbac/Role.js";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
Dialog,
|
||
|
|
},
|
||
|
|
|
||
|
|
props: {
|
||
|
|
role: { type: Object, required: true }, // 要编辑的对象
|
||
|
|
},
|
||
|
|
|
||
|
|
data() {
|
||
|
|
const { id, name, description } = this.role;
|
||
|
|
|
||
|
|
return {
|
||
|
|
// 角色表单
|
||
|
|
form: {
|
||
|
|
id,
|
||
|
|
name,
|
||
|
|
description,
|
||
|
|
},
|
||
|
|
// 角色表单验证
|
||
|
|
rules: {
|
||
|
|
name: [{ required: true, message: "请先填写角色名称" }],
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
// 点击-确定
|
||
|
|
handleConfirmClick() {
|
||
|
|
this.$refs["form"].validate(async (valid) => {
|
||
|
|
if (valid) {
|
||
|
|
const { id, name, description } = this.form;
|
||
|
|
|
||
|
|
try {
|
||
|
|
const res = await RoleBiz.update(id, name, description);
|
||
|
|
console.log("roleUpdate", res);
|
||
|
|
|
||
|
|
this.$message.success("编辑角色成功");
|
||
|
|
this.$emit("on-submit", res);
|
||
|
|
} catch ({ message }) {
|
||
|
|
this.$message.error(message);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.el-form-item.btns {
|
||
|
|
padding-top: 20px;
|
||
|
|
margin-bottom: 0;
|
||
|
|
::v-deep .el-form-item__content {
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|