<template>
<div>
<!-- 条件查询 -->
<abc title1="首页" title2="用户管理" title3="用户列表"></abc>
<el-form
:inline="true"
stripe
border
:model="formInline"
class="demo-form-inline"
>
<el-form-item label="姓名">
<el-input v-model="formInline.name" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="Listpage">查询</el-button>
<el-button type="primary" @click="dialogVisible = true">增加</el-button>
</el-form-item>
</el-form>
<el-card>
<el-table :data="userArray" height="515" border style="width: 100%">
<el-table-column prop="id" label="编号" width="60"> </el-table-column>
<el-table-column prop="username" label="姓名"> </el-table-column>
<el-table-column prop="email" label="邮箱"> </el-table-column>
<el-table-column prop="mobile" label="手机号"> </el-table-column>
<el-table-column prop="role_name" label="管理员"> </el-table-column>
<el-table-column prop="mg_state" label="状态">
<template slot-scope="scope">
<el-switch
v-model="scope.row.mg_state"
@change="user(scope.row)"
active-color="#13ce66"
inactive-color="#ff4949"
>
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<!--
@click="updList(scope.$index, scope.row)"
@click="del(scope.$index, scope.row)"
-->
<el-button
size="mini"
icon="el-icon-edit"
type="primary"
@click="sel(scope.row)"
></el-button>
<el-button
size="mini"
icon="el-icon-delete"
type="danger"
@click="del(scope.row)"
></el-button>
<el-tooltip
effect="dark"
content="分配角色"
placement="top"
:enterable="false"
>
<el-button
size="mini"
type="warning"
icon="el-icon-setting"
@click="setRole(scope.row)"
></el-button
></el-tooltip>
</template>
</el-table-column>
</el-table>
</el-card>
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
<el-form
label-width="80px"
:model="formLabelAlign"
:rules="rules"
ref="ruleForm"
>
<el-form-item label="姓名" prop="username">
<el-input v-model="formLabelAlign.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="formLabelAlign.password"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="mobile">
<el-input v-model="formLabelAlign.mobile"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="formLabelAlign.email"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="add">确 定</el-button>
</span>
</el-dialog>
<el-dialog title="修改" :visible.sync="dialogVisible2" width="30%">
<el-form
label-width="80px"
:rules="rules"
ref="ruleForm"
:model="formLabelAlign"
@click="resetForm('ruleForm')"
>
<el-form-item label="姓名">
<el-input
v-model="formLabelAlign.username"
:disabled="true"
></el-input>
</el-form-item>
<el-form-item label="手机号" prop="mobile">
<el-input v-model="formLabelAlign.mobile"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="formLabelAlign.email"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible2 = false">取 消</el-button>
<el-button type="primary" @click="updata">确 定</el-button>
</span>
</el-dialog>
<el-dialog title="分配角色" :visible.sync="dialogVisiblerole" width="30%">
<div>
<p>当前的用户:{{ userInfo.username }}</p>
<p>当前的角色:{{ userInfo.role_name }}</p>
<p>
分配新角色:
<el-select v-model="selectroleId" placeholder="请选择">
<el-option
v-for="item in roleslist"
:key="item.id"
:label="item.roleName"
:value="item.id"
>
</el-option>
</el-select>
</p>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisiblerole = false">取 消</el-button>
<el-button type="primary" @click="saveRole()">确 定</el-button>
</span>
</el-dialog>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[2, 5, 10]"
:page-size="2"
layout="sizes, prev, pager, next"
:total="total"
>
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
rules: {
username: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
],
mobile: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
],
password: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
],
email: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
},
dialogVisible: false,
dialogVisible2: false,
dialogVisiblerole: false,
userArray: [],
roleslist: [],
userInfo: {},
query: "",
pageNum: 1,
pageSize: 2,
total: 0,
selectroleId: "",
formInline: {
name: "",
},
formLabelAlign: {
username: "",
password: "",
email: "",
mobile: "",
},
};
},
created() {
this.List();
},
methods: {
async saveRole() {
if (!this.selectroleId) {
this.$message.error("请选择要分配的角色");
}
const { data: res } = await this.request.put(
`users/${this.userInfo.id}/role`,
{
rid: this.selectroleId,
}
);
if (res.meta.status !== 200) {
return this.$message.error("更新角色失败");
}
this.$message.success("更新角色成功");
this.dialogVisiblerole = false;
this.List();
},
//获取角色列表数据
async setRole(userInfo) {
this.userInfo = userInfo;
const { data: res } = await this.request.get("roles");
if (res.meta.status !== 200) {
return this.$message.error("获取角色列表失败");
}
this.roleslist = res.data;
this.dialogVisiblerole = true;
},
async user(userinfo) {
const { data: res } = await this.request.put(
`users/${userinfo.id}/state/${userinfo.mg_state}`
);
if (res.meta.status !== 200) {
userinfo.mg_state = !userinfo.mg_state;
return this.$message.error("更新用户状态失败");
}
this.$message.success("更新用户状态成功");
},
async sel(row) {
this.formLabelAlign.id = row.id;
this.formLabelAlign.username = row.username;
this.formLabelAlign.mobile = row.mobile;
this.formLabelAlign.email = row.email;
this.dialogVisible2 = true;
},
async Listpage() {
this.pageNum = 1;
this.List();
},
handleClose() {
this.$refs.ruleForm.resetFields();
this.dialogVisible = false;
},
//删除
async del(row) {
const { data } = await this.request.delete("users/" + row.id);
if ((data.data = true)) {
this.$message({
message: "删除成功",
type: "success",
});
this.List();
}
},
updata() {
this.$refs["ruleForm"].validate(async (valid) => {
if (valid) {
const { data } = await this.request.put(
"users/" + this.formLabelAlign.id,
{
email: this.formLabelAlign.email,
mobile: this.formLabelAlign.mobile,
}
);
if ((data.data = true)) {
this.$message({
message: "修改成功",
type: "success",
});
this.List();
this.dialogVisible2 = false;
}
}
});
},
handleSizeChange(size) {
this.pageSize = size;
this.List();
},
handleCurrentChange(num) {
this.pageNum = num;
this.List();
},
add() {
this.$refs["ruleForm"].validate(async (valid) => {
if (valid) {
const { data } = await this.request.post(
"users",
this.formLabelAlign
);
if ((data.data = true)) {
this.$message({
message: "添加成功",
type: "success",
});
this.List();
this.dialogVisible = false;
}
}
});
},
async List() {
//向后台发送请求
const { data } = await this.request.get(
"users?pagenum=" +
this.pageNum +
"&pagesize=" +
this.pageSize +
"&query=" +
this.formInline.name
);
if (data.meta.status !== 200) return this.$message.error(data.meta.msg);
this.userArray = data.data.users;
this.total = data.data.total;
},
},
};
</script>
<style>
</style>
zsgc
最新推荐文章于 2024-07-03 00:14:53 发布