<template>
|
<div class="app">
|
<!--面包屑导航区域-->
|
<el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb">
|
<el-breadcrumb-item :to="{ path: '/home' }">{{ $t('langHome') }}</el-breadcrumb-item>
|
<el-breadcrumb-item>{{ $t('langUserManagement') }}</el-breadcrumb-item>
|
<el-breadcrumb-item>{{ $t('langUserList') }}</el-breadcrumb-item>
|
</el-breadcrumb>
|
<!--卡片视图区域-->
|
<el-card class="el-card">
|
<el-row :gutter="20">
|
<!--搜索与添加区域-->
|
<el-col :span="6">
|
<el-input :placeholder= "$t('langUsernamePlaceholder')" v-model="queryInfo.username" clearable @clear="getUserList">
|
</el-input>
|
</el-col>
|
<el-col :span="6">
|
<el-input :placeholder="$t('langEmailPlaceholder')" v-model="queryInfo.email" clearable @clear="getUserList">
|
</el-input>
|
</el-col>
|
<!--搜索按钮-->
|
<el-col :span="4">
|
<el-button type="primary" @click="getUserList">{{ $t('langSearch') }}</el-button>
|
</el-col>
|
<!--添加区域-->
|
<el-col :span="4">
|
<el-button type="primary" @click="showAddDialog">{{ $t('langAddUser') }}</el-button>
|
</el-col>
|
</el-row>
|
<!--用户列表区域-->
|
<el-table :data="userList.records" border stripe>
|
<el-table-column label="#" type="index"></el-table-column>
|
<el-table-column :label="$t('langUsername')" prop="username"></el-table-column>
|
<el-table-column :label="$t('langEmail')" prop="email"></el-table-column>
|
<el-table-column :label="$t('langCreateTime')" prop="createTime"></el-table-column>
|
<el-table-column :label="$t('langDisabled')">
|
<template slot-scope="scope">
|
<el-switch
|
:active-value="0"
|
:inactive-value="1"
|
v-model="scope.row.state"
|
@change="stateChange(scope.row)">
|
</el-switch>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<el-button type="primary" icon="el-icon-refresh" @click="resetPassword(scope.row)">
|
|
{{ $t('resetPassword') }}
|
</el-button>
|
</template>
|
</el-table-column>
|
<el-table-column :label="$t('langAction')">
|
<template slot-scope="scope">
|
<!--修改-->
|
<el-tooltip effect="dark" :content="$t('langEdit')" placement="top" :enterable="false">
|
<el-button type="primary" icon="el-icon-edit" size="mini"
|
@click="showEditDialog(scope.row.id)"></el-button>
|
</el-tooltip>
|
<!--删除-->
|
<el-tooltip effect="dark" :content="$t('langDelete')" placement="top" :enterable="false">
|
<el-button type="danger" icon="el-icon-delete" size="mini"
|
@click="removeUserById(scope.row)"></el-button>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!--分页区域-->
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="queryInfo.pageNum"
|
:page-sizes="[6, 12, 18, 24]"
|
:page-size="queryInfo.pageSize"
|
:total="userList.total"
|
|
:pager-count="7"
|
:layout="layout"
|
>
|
</el-pagination>
|
</el-card>
|
<!--添加用户的对话框-->
|
<el-dialog
|
:title="$t('langAddUserTitle')"
|
:visible.sync="addDialogVisible"
|
width="50%"
|
@close="addDialogClosed">
|
<!--内容主体区域-->
|
<el-form :model="addUserForm" :rules="addUserRules" ref="addUserRef" label-width="100px">
|
<el-form-item :label="$t('langUsername')" prop="username" >
|
<el-input v-model="addUserForm.username" ></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('langPassword')" prop="password" >
|
<el-input v-model="addUserForm.password" type="password"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('langEmail')" prop="email">
|
<el-input v-model="addUserForm.email"></el-input>
|
</el-form-item>
|
|
|
<el-form-item :label="$t('langState')" prop="state">
|
<el-select v-model="addUserForm.state" >
|
<el-option v-for="(item,index) in options"
|
:key="index"
|
:value="item.value"
|
:label="item.label">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item :label="$t('role')" prop="roleId">
|
<el-select filterable v-model="addUserForm.roleId" :placeholder="$t('langSelect')" >
|
<el-option v-for="item in roleList"
|
:key="item.id"
|
:value="item.id"
|
:label="item.name">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="addDialogVisible = false">{{ $t('langCancel') }}</el-button>
|
<el-button type="primary" @click="addUser">{{ $t('langConfirm') }}</el-button>
|
</span>
|
</el-dialog>
|
<!--修改用户的对话框-->
|
<el-dialog
|
:title="$t('langEditUserTitle')"
|
:visible.sync="editDialogVisible"
|
width="50%">
|
<!--内容主体区域-->
|
<el-form :model="editUserForm" :rules="addUserRules" ref="addCategoryRef" label-width="100px">
|
<el-form-item :label="$t('langUsername')" prop="username">
|
<el-input v-model="editUserForm.username" disabled></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('role')" prop="roleId">
|
<el-select filterable v-model="editUserForm.roleId" :placeholder="$t('langSelect')" >
|
<el-option v-for="item in roleList"
|
:key="item.id"
|
:value="item.id"
|
:label="item.name">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item :label="$t('langEmail')" prop="email">
|
<el-input v-model="editUserForm.email"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('langDisabled')" prop="state">
|
<el-select v-model="editUserForm.state" >
|
<el-option v-for="(item,index) in options"
|
:key="index"
|
:value="item.value"
|
:label="item.label">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="editDialogVisible = false">{{ $t('langCancel') }}</el-button>
|
<el-button type="primary" @click="editUserInfo">{{ $t('langConfirm') }}</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
|
<script>
|
import {getById, removeById, saveOrUpdate, selectPage,resetPass} from "../../api/user";
|
import {select} from "../../api/role";
|
|
import LanguageMixin from '../../lang/LanguageMixin'
|
export default {
|
name: "User",
|
mixins: [LanguageMixin],
|
|
data() {
|
return {
|
layout: 'total, sizes, prev, pager, next, jumper',
|
queryInfo: {
|
pageNum: 1,
|
pageSize: 6
|
},
|
userList: {
|
records: [],
|
total: 0,
|
},
|
// 添加的用户对象
|
addUserForm: {
|
state: 1
|
},
|
// 修改的用户对象
|
editUserForm: {
|
|
roleId: null,
|
name:null,
|
roleid:null,
|
},
|
// 添加分类的验证规则
|
addUserRules: {
|
roleId: null,
|
username: [
|
{required: true, message: '请输入用户名', trigger: 'blur'},
|
{min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur'}
|
],
|
password: [
|
{required: true, message: '请输入密码', trigger: 'blur'},
|
{min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur'}
|
],
|
email: [
|
{required: true, message: '请输入邮箱', trigger: 'blur'},
|
{type: 'email', message: '请输入正确格式的邮箱地址', trigger: 'blur'}
|
]
|
},
|
// 控制添加用户弹框的显示和隐藏
|
addDialogVisible: false,
|
// 控制修改用户弹框的显示和隐藏
|
editDialogVisible: false,
|
options: [
|
{label: '正常', value: 1},
|
{label: '禁用', value: 0}
|
],
|
roleList: [],
|
}
|
},
|
created() {
|
this.getUserList();
|
},
|
methods: {
|
getUserList() {
|
selectPage(this.queryInfo).then(res => {
|
this.userList.records = res.data.records;
|
this.userList.total = res.data.total
|
});
|
|
// test().then(res => {
|
// console.log(res.data)
|
// });
|
// const data6 = [
|
// { id: 32, deviceName: 'Device 7', address: 'Address 1' },
|
// { id: 33, deviceName: 'Device 8', address: 'Address 2' },
|
|
// ];
|
|
// testup(data6).then(res => {
|
// console.log(res.data);
|
// });
|
|
// call({
|
// id: 1,
|
// name: 12345
|
// }).then(res => {
|
// console.log(res.data);
|
// });
|
|
},
|
|
showAddDialog() {
|
this.addDialogVisible = true;
|
select().then(res => {
|
this.roleList = res.data;
|
});
|
},
|
// stateChange(info) {
|
// saveOrUpdate(info).then(() => {
|
// this.$message.success("更新状态成功")
|
// });
|
// },
|
stateChange(info) {
|
saveOrUpdate(info).then(() => {
|
const successMessage = this.$t('updateSuccessMessage');
|
this.$message.success(successMessage);
|
});
|
},
|
resetPassword(info) {
|
this.$confirm('确认重置密码为默认值吗？', '重置密码', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(() => {
|
resetPass(info).then(() => {
|
this.$message.success('密码已重置为默认值');
|
});
|
})
|
.catch(() => {
|
// 用户取消重置密码操作
|
});
|
},
|
showEditDialog(id) {
|
getById({id: id}).then(res => {
|
this.editUserForm = res.data;
|
this.editDialogVisible = true;
|
});
|
|
|
select().then(res => {
|
this.roleList = res.data;
|
});
|
},
|
removeUserById(user) {
|
// 弹框询问用户是否删除分类
|
this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
removeById({id: user.id}).then(() => {
|
// 重新获取分类列表
|
this.getUserList();
|
this.$message.success("删除用户成功");
|
});
|
}).catch(() => {
|
this.$message.info('已取消删除');
|
});
|
},
|
handleSizeChange(newSize) {
|
this.queryInfo.pageSize = newSize;
|
this.getUserList()
|
},
|
handleCurrentChange(newPage) {
|
this.queryInfo.pageNum = newPage;
|
this.getUserList()
|
},
|
addDialogClosed() {
|
this.$refs['addUserRef'].resetFields();
|
},
|
addUser() {
|
this.$refs.addUserRef.validate(async valid => {
|
if (!valid) return;
|
saveOrUpdate(this.addUserForm).then(() => {
|
this.$message.success("添加用户成功");
|
// 隐藏添加分类对话框
|
this.addDialogVisible = false;
|
// 重新获取分类列表
|
this.getUserList();
|
});
|
})
|
},
|
editUserInfo() {
|
this.$refs.addCategoryRef.validate(async valid => {
|
if (!valid) return;
|
|
saveOrUpdate(this.editUserForm).then(() => {
|
const 修改用户成功 = this.$t('修改用户成功');
|
this.$message.success(修改用户成功);
|
// 隐藏添加分类对话框
|
this.editDialogVisible = false;
|
// 重新获取分类列表
|
this.getUserList();
|
});
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.el-table {
|
margin-top: 15px;
|
font-size: 12px;
|
}
|
|
.el-pagination {
|
margin-top: 15px;
|
}
|
|
.app .el-card {
|
width: 99%;
|
}
|
</style>
|
