<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="$t('langOperation')">
|
<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-item :label="$t('ElectricalPassword')" prop="dianqimima" v-if="editUserForm.username === 'admin'">
|
<el-input v-model="editUserForm.dianqimima"></el-input>
|
</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' }
|
]
|
|
},
|
// 控制添加用户弹框的显示和隐藏
|
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(this.$t('confirmResetPassword'), this.$t('resetPassword'), {
|
confirmButtonText: this.$t('confirm'),
|
cancelButtonText: this.$t('cancel'),
|
type: 'warning',
|
})
|
.then(() => {
|
resetPass(info).then(() => {
|
this.$message.success(this.$t('passwordResetSuccess'));
|
});
|
})
|
.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(this.$t('confirmDeleteCategory'), this.$t('prompt'), {
|
confirmButtonText: this.$t('confirm'),
|
cancelButtonText: this.$t('cancel'),
|
type: 'warning'
|
}).then(() => {
|
removeById({ id: user.id }).then(() => {
|
// 重新获取分类列表
|
this.getUserList();
|
this.$message.success(this.$t('userDeleteSuccess'));
|
});
|
}).catch(() => {
|
this.$message.info(this.$t('deleteCanceled'));
|
});
|
},
|
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(() => {
|
const successMessage = this.$t('addUserSuccess');
|
this.$message.success(successMessage);
|
// 隐藏添加分类对话框
|
this.addDialogVisible = false;
|
// 重新获取分类列表
|
this.getUserList();
|
});
|
})
|
},
|
editUserInfo () {
|
this.$refs.addCategoryRef.validate(async valid => {
|
if (!valid) return;
|
|
saveOrUpdate(this.editUserForm).then(() => {
|
const successMessage = this.$t('editUserSuccess');
|
this.$message.success(successMessage);
|
// 隐藏添加分类对话框
|
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>
|
