130 lines
3.5 KiB
Vue
130 lines
3.5 KiB
Vue
|
<template>
|
||
|
|
<el-form ref="form" :rules="rules" label-width="100px" :model="form">
|
||
|
|
<el-row>
|
||
|
|
<el-col :span="24">
|
||
|
|
<el-form-item label="角色编码" prop="code">
|
||
|
|
<el-input v-model="form.code"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="24">
|
||
|
|
<el-form-item label="角色名称" prop="name">
|
||
|
|
<el-input v-model="form.name"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-row>
|
||
|
|
<el-col :span="12">
|
||
|
|
<el-form-item label="角色顺序" prop="sort">
|
||
|
|
<el-input-number
|
||
|
|
v-model="form.sort"
|
||
|
|
controls-position="right"
|
||
|
|
:min="1"
|
||
|
|
:max="999999999"
|
||
|
|
style="width: 100%"
|
||
|
|
></el-input-number>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12">
|
||
|
|
<el-form-item label="状态" prop="status" v-if="isEdit">
|
||
|
|
<el-switch v-model="form.status"> </el-switch>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="24">
|
||
|
|
<el-form-item label="备注" prop="remark">
|
||
|
|
<el-input v-model="form.remark"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</el-form>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import { addRole, getRole, updateRole } from "@/api/system/role";
|
||
|
|
export default {
|
||
|
|
name: "RoleAdd",
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
form: {
|
||
|
|
id: "",
|
||
|
|
code: "",
|
||
|
|
name: "",
|
||
|
|
sort: 1,
|
||
|
|
status: 0,
|
||
|
|
remark: "",
|
||
|
|
},
|
||
|
|
isEdit: false, //是否是编辑
|
||
|
|
rules: {
|
||
|
|
code: [
|
||
|
|
{ required: true, message: "角色编码不能为空", trigger: "blur" },
|
||
|
|
],
|
||
|
|
name: [
|
||
|
|
{ required: true, message: "角色名称不能为空", trigger: "blur" },
|
||
|
|
],
|
||
|
|
sort: [{ required: true }],
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
init(id) {
|
||
|
|
if (id) {
|
||
|
|
this.isEdit = true;
|
||
|
|
this.form.id = id;
|
||
|
|
getRole(id).then((res) => {
|
||
|
|
if (res.code === 0) {
|
||
|
|
this.form.id = res.data.id;
|
||
|
|
this.form.code = res.data.code;
|
||
|
|
this.form.name = res.data.name;
|
||
|
|
this.form.sort = res.data.sort;
|
||
|
|
this.form.remark = res.data.remark;
|
||
|
|
this.form.status = res.data.status ? false : true;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
this.isEdit = false;
|
||
|
|
this.form.id = "";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
submitForm() {
|
||
|
|
this.$refs["form"].validate((valid) => {
|
||
|
|
if (valid) {
|
||
|
|
if (this.isEdit) {
|
||
|
|
//编辑
|
||
|
|
updateRole({
|
||
|
|
id: this.form.id,
|
||
|
|
code: this.form.code,
|
||
|
|
name: this.form.name,
|
||
|
|
sort: this.form.sort,
|
||
|
|
remark: this.form.remark,
|
||
|
|
status: this.form.status ? 0 : 1,
|
||
|
|
}).then((res) => {
|
||
|
|
if (res.code === 0) {
|
||
|
|
this.$modal.msgSuccess("操作成功");
|
||
|
|
this.$emit("successSubmit");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
addRole({
|
||
|
|
code: this.form.code,
|
||
|
|
name: this.form.name,
|
||
|
|
sort: this.form.sort,
|
||
|
|
remark: this.form.remark,
|
||
|
|
status: 0,
|
||
|
|
}).then((res) => {
|
||
|
|
if (res.code === 0) {
|
||
|
|
this.$modal.msgSuccess("操作成功");
|
||
|
|
this.$emit("successSubmit");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
formClear() {
|
||
|
|
this.$refs.form.resetFields();
|
||
|
|
this.isEdit = false;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|