vue后台管理系统的角色管理模块新增与修改公用一个弹窗

上面是角色管理的效果图

A.先搭建页面

<template>

<div class="container" v-if="tabIndex === 2">



<div class="role-header">

<el-button

type="primary"

扫描二维码关注公众号，回复： 16565028 查看本文章

icon="el-icon-circle-plus-outline"

plain

size="small"

@click="OnAdd(' ')" //这里与修改区别，当SrId为空就是新增，不为空是修改

>新增</el-button

>

<div>

<el-input

v-model="roleName" //要在data的return中定义，这里的搜索是根据接口，进行过滤

placeholder="请输入角色名称"

style="width: 220px; margin-right: 20px"

></el-input>

<el-button type="primary" @click="onSubmit()">查询</el-button>

</div>

</div>



<el-table

:data="list"

height="calc(100vh - 270px )"

border

stripe

style="width: 100%"

>



<el-table-column type="selection" width="55" />

<el-table-column prop="SrName" label="角色名称" width="220">

</el-table-column>

//根据接口名称

<el-table-column prop="SrDescribe" label="角色描述"> </el-table-column>

//这里是表单的状态 Switch默认为TRUE或FALSE，布尔型，但实际接口是1和2，数字型

<el-table-column prop="SrStatus" label="状态">

<template slot-scope="scope">

<el-switch

v-model="scope.row.SrStatus"

:active-value="1"

:inactive-value="2"

active-color="#13ce66"

inactive-color="#ff4949"

>

</el-switch>

</template>

</el-table-column>

<el-table-column prop="date" label="操作">

<template slot-scope="scope">//这里一定要有，其实这就是插槽 --- v-slot

<el-button

type="primary"

icon="el-icon-edit"

plain

@click="OnAdd(scope.row.SrId)"

size="small"

>修改</el-button

>

<el-button

type="primary"

icon="el-icon-delete"

plain

@click="deleteaccount(scope.row.SrId)" //传要删除的改行的SrId

size="small"

>删除</el-button

>

</template>

</el-table-column>

</el-table>



<el-pagination

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

:current-page="page"

:page-sizes="[15, 30, 45, 60, 75, 100]"

:page-size.sync="rows"

layout="total, sizes, prev, pager, next, jumper"

:total="total"

style="margin-top: 20px"

>

</el-pagination>



<el-dialog

:title="dialogTitle ? '新增角色信息' : '修改角色信息'" // 在data中重新定义

:visible.sync="dialogFormVisible"

:modal="modal"//去掉遮罩层

width="30%"

>

<el-form

:model="ruleForm"

:rules="rules"

ref="ruleForm"

label-width="100px"

class="demo-ruleForm"

>

<el-form-item label="角色名称" prop="SrName">

<el-select

v-model="ruleForm.SrName"

filterable

clearable

placeholder="请选择角色"

>

<el-option

v-for="(item, index) in options"

:key="index"

:label="item.SrName"

:value="item.SrName"// 这里当时写的是SrId,就出现了下拉框内容保存不了，其实应该是SrName

>

</el-option>

</el-select>

</el-form-item>

<el-form-item label="角色状态" prop="SrStatus">

<el-checkbox

label="启用角色"

name="type"

:value="this.ruleForm.SrStatus === 1"

v-bind:true-value="checka"

v-bind:false-value="checkb"

@change="changeRememberMe"

></el-checkbox>

</el-form-item>

<el-form-item label="角色描述" prop="SrDescribe">

<el-input v-model="ruleForm.SrDescribe"></el-input>

</el-form-item>

</el-form>

<div slot="footer" class="dialog-footer">

<el-button @click="dialogFormVisible = false">取消</el-button>

<el-button type="primary" @click="addaccount()">确定</el-button>

</div>

</el-dialog>

</div>

</template>

<script>

export default {

name: "Role",

props: {

tabIndex: {

type: [String, Number],

default: "2",

},

},

data() {

return {

list: [], //数据列表

roleName: "", //搜索

total: 0, //总条数

page: 1, //当前页

rows: 15, //一页显示的条数

dialogFormVisible: false, //弹窗隐藏

dialogTitle: true, //弹窗名称，true为新增，false为修改

//弹窗输入框，这里其实用不到那么多数据，最好把接口中的字段全部写出来。（我当时写的时候只想到了新增，只写了前三个，后面到修改的时候就出现了报错，因为修改比新增多一些字段）

ruleForm: {

SrName: "", //名称

SrStatus: "", //状态

SrDescribe: "", //描述

SrId: "",

SrGroup: "",

SrMenus: "",

SrButtons: "",

SrCreateTime: "",

},

// 规则验证

rules: {

// SrName: [

// { required: true, message: "请输入角色名称", trigger: "blur" },

// ],

SrId: [

{ required: true, message: "请输入角色名称", trigger: "blur" },

],

},

modal: false, //关闭遮罩层

// 弹窗状态勾选是1，未勾选是0

checka: 1,

checkb: 0,

options: [],// 弹窗中的下拉框数据

};

},

mounted() {

// 获取角色管理数据

this.getQuerySysRole();

},

methods: {

// 弹窗的确定按钮新增、修改

addaccount() {

var type = "edit";

if (this.dialogTitle) {

type = "add";

}

var newFormData = new FormData();

newFormData.append("SrName", this.ruleForm.SrName);

newFormData.append("SrStatus", this.ruleForm.SrStatus);

newFormData.append("SrDescribe", this.ruleForm.SrDescribe);

newFormData.append("SrId", this.ruleForm.SrId);

newFormData.append("SrGroup", this.ruleForm.SrGroup);

newFormData.append("SrMenus", this.ruleForm.SrMenus);

newFormData.append("SrButtons", this.ruleForm.SrButtons);

newFormData.append("SrCreateTime", this.ruleForm.SrCreateTime);

this.$api.QueryAddSysRole(newFormData, type).then((res) => {

// console.log(res);

if (res.code == 200) {

this.getQuerySysRole();

this.dialogFormVisible = false;

if (type == "add") {

this.$message.success("添加成功");

} else {

this.$message.success("修改成功");

}

}

});

},

// 新增/修改角色信息--- 通过SrId来判断是新增还是修改

OnAdd(srId) {

if (srId == "") {

//在清空一次

this.ruleForm = {

SrName: "", //名称

SrStatus: "", //状态

SrDescribe: "", //描述

SrId: "",

SrGroup: "",

SrMenus: "",

SrButtons: "",

SrCreateTime: "",

};

this.dialogFormVisible = true;

this.dialogTitle = true;

} else {

//这里又调了一个接口，点击修改时，用过SrId，获取整行数据

var newFormData = new FormData();

newFormData.append("SrId", srId);

this.$api.QueryGetRoleByID(newFormData).then((res) => {

// console.log(res);

this.ruleForm = res.data;

});

this.dialogTitle = false;

this.dialogFormVisible = true;

}

},

// 弹窗中的状态

changeRememberMe(value) {

if (value) {

this.ruleForm.SrStatus = this.checka;

} else {

this.ruleForm.SrStatus = this.checkb;

}

},

// 页数

handleSizeChange(val) {

this.rows = val;

},

// 当前页

handleCurrentChange(val) {

this.page = val;

},

// 删除 -- 删除要调用删除接口

deleteaccount(srid) {

var newFormData = new FormData();

newFormData.append("id", srid);

this.$api.QueryDeleteSysRole(newFormData).then((res) => {

if (res.code == 200) {

this.$message.success("删除成功");

this.getQuerySysRole();

} else if (res.code == 97) {

this.$message.success("该角色有用户");

}

});

},

// 查询在接口处已经过滤掉了，是根据角色名称查询，

onSubmit() {

// 这里需要在调一次表单数据的接口

this.getQuerySysRole();

},

// 获取角色管理数据 ---再到mounted()中调用改方法，页面在刷新是就显示数据

--- 接口一般都是json格式，不是这种类型，写这种接口表示很心累

getQuerySysRole() {

var newFormData = new FormData();

newFormData.append("page", this.page);

newFormData.append("rows", this.rows);

newFormData.append("tableName", "sysrole");

newFormData.append("pagination", "1");

// 搜索过滤

if (this.roleName != "") {

newFormData.append(

"wheres",

"[{'field':'SrName','relation':'Contains','value':'" +

this.roleName +

"'}]"

);

}

this.$api.QuerySysRole(newFormData).then((res) => {

// console.log(res);

this.list = res.data;

this.total = res.total;//页面总数据

this.options = res.data;//弹窗中下拉框里的数据

});

},

},

};

</script>

<style lang="less">

.role-header {

display: flex;

margin-bottom: 10px;

justify-content: space-between;

}

</style>

vue后台管理系统的角色管理模块 新增与修改公用一个弹窗

猜你喜欢

vue后台管理系统的角色管理模块新增与修改公用一个弹窗