<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>