完善用户管理
This commit is contained in:
zhonghua.li
44
src/api/sys-user.js
Normal file
44
src/api/sys-user.js
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 分页查询用户列表
|
||||||
|
export function getUserList(params) {
|
||||||
|
return request({
|
||||||
|
url: '/sys/user/list',
|
||||||
|
method: 'get',
|
||||||
|
params: {
|
||||||
|
current: params.current || 1,
|
||||||
|
size: params.size || 10,
|
||||||
|
userName: params.userName,
|
||||||
|
email: params.email,
|
||||||
|
phone: params.phone,
|
||||||
|
scenario: params.scenario,
|
||||||
|
scenarioItem: params.scenarioItem
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增用户
|
||||||
|
export function addUser(data) {
|
||||||
|
return request({
|
||||||
|
url: '/sys/user/add',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新用户
|
||||||
|
export function updateUser(data) {
|
||||||
|
return request({
|
||||||
|
url: '/sys/user/update',
|
||||||
|
method: 'put',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除用户
|
||||||
|
export function deleteUser(id) {
|
||||||
|
return request({
|
||||||
|
url: `/sys/user/delete/${id}`,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -375,6 +375,12 @@ export const constantRoutes = [
|
|||||||
name: 'SystemRoot',
|
name: 'SystemRoot',
|
||||||
meta: { title: '系统设置', icon: 'el-icon-setting', alwaysShow: true },
|
meta: { title: '系统设置', icon: 'el-icon-setting', alwaysShow: true },
|
||||||
children: [
|
children: [
|
||||||
|
{
|
||||||
|
path: 'user',
|
||||||
|
name: 'SystemUser',
|
||||||
|
component: () => import('@/views/system/user/index'),
|
||||||
|
meta: { title: '用户管理', icon: 'el-icon-user' }
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: 'device',
|
path: 'device',
|
||||||
name: 'Device',
|
name: 'Device',
|
||||||
@@ -387,6 +393,7 @@ export const constantRoutes = [
|
|||||||
component: () => import('@/views/tenant/index'),
|
component: () => import('@/views/tenant/index'),
|
||||||
meta: { title: '租户管理', icon: 'el-icon-office-building' }
|
meta: { title: '租户管理', icon: 'el-icon-office-building' }
|
||||||
}
|
}
|
||||||
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
385
src/views/system/user/index.vue
Normal file
385
src/views/system/user/index.vue
Normal file
@@ -0,0 +1,385 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<el-card class="filter-container" shadow="never">
|
||||||
|
<el-form ref="queryForm" :model="queryParams" :inline="true" label-width="90px">
|
||||||
|
<el-form-item label="用户名">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.userName"
|
||||||
|
placeholder="请输入用户名"
|
||||||
|
clearable
|
||||||
|
style="width: 200px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="邮箱">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.email"
|
||||||
|
placeholder="请输入邮箱"
|
||||||
|
clearable
|
||||||
|
style="width: 220px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="手机号">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.phone"
|
||||||
|
placeholder="请输入手机号"
|
||||||
|
clearable
|
||||||
|
style="width: 200px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="场景">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.scenario"
|
||||||
|
placeholder="请输入场景"
|
||||||
|
clearable
|
||||||
|
style="width: 180px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="场景项">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.scenarioItem"
|
||||||
|
placeholder="请输入场景项"
|
||||||
|
clearable
|
||||||
|
style="width: 180px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
|
||||||
|
<el-button icon="el-icon-delete" @click="resetQuery">清空</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<el-card class="action-container" shadow="never">
|
||||||
|
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">添加用户</el-button>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<el-card class="table-container" shadow="never">
|
||||||
|
<el-table v-loading="loading" :data="userList" style="width: 100%">
|
||||||
|
<el-table-column label="ID" prop="userId" width="80" />
|
||||||
|
<el-table-column label="用户名" prop="userName" min-width="140" />
|
||||||
|
<el-table-column label="邮箱" prop="email" min-width="180" />
|
||||||
|
<el-table-column label="手机号" prop="phone" min-width="140" />
|
||||||
|
<el-table-column label="场景" prop="scenario" min-width="120" />
|
||||||
|
<el-table-column label="场景项" prop="scenarioItem" min-width="140" />
|
||||||
|
<el-table-column label="租户ID" prop="tenantId" min-width="120" />
|
||||||
|
<el-table-column label="角色" prop="roleName" min-width="120" />
|
||||||
|
<el-table-column label="创建时间" prop="createTime" min-width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{ formatDateTime(scope.row.createTime) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" width="160" fixed="right">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button type="text" @click="handleEdit(scope.row)">修改</el-button>
|
||||||
|
<el-button type="text" style="color: #F56C6C;" @click="handleDelete(scope.row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<el-pagination
|
||||||
|
:current-page="queryParams.current"
|
||||||
|
:page-sizes="[10, 20, 50, 100]"
|
||||||
|
:page-size="queryParams.size"
|
||||||
|
:total="total"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
/>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px" @close="resetForm">
|
||||||
|
<el-form ref="userForm" :model="userForm" :rules="formRules" label-width="100px">
|
||||||
|
<el-form-item label="用户名" prop="userName">
|
||||||
|
<el-input v-model="userForm.userName" placeholder="请输入用户名" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="邮箱" prop="email">
|
||||||
|
<el-input v-model="userForm.email" placeholder="请输入邮箱" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="手机号" prop="phone">
|
||||||
|
<el-input v-model="userForm.phone" placeholder="请输入手机号" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="租户ID" prop="tenantId">
|
||||||
|
<el-select
|
||||||
|
v-model="userForm.tenantId"
|
||||||
|
placeholder="请选择租户"
|
||||||
|
style="width: 100%"
|
||||||
|
filterable
|
||||||
|
clearable
|
||||||
|
:loading="tenantLoading"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in tenantOptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="角色" prop="roleName">
|
||||||
|
<el-input v-model="userForm.roleName" placeholder="请输入角色名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="场景" prop="scenario">
|
||||||
|
<el-input v-model="userForm.scenario" placeholder="请输入场景" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="场景项" prop="scenarioItem">
|
||||||
|
<el-input v-model="userForm.scenarioItem" placeholder="请输入场景项" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item :label="isEdit ? '新密码' : '密码'" prop="password">
|
||||||
|
<el-input v-model="userForm.password" type="password" show-password :placeholder="isEdit ? '不修改可留空' : '请输入密码'" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item v-if="isEdit" label="原始密码" prop="originalPassword">
|
||||||
|
<el-input v-model="userForm.originalPassword" type="password" show-password placeholder="请输入原始密码用于校验" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { addUser, deleteUser, getUserList, updateUser } from '@/api/sys-user'
|
||||||
|
import { getAllTenantList } from '@/api/tenant'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'SystemUser',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: false,
|
||||||
|
userList: [],
|
||||||
|
total: 0,
|
||||||
|
dialogVisible: false,
|
||||||
|
dialogTitle: '',
|
||||||
|
isEdit: false,
|
||||||
|
tenantOptions: [],
|
||||||
|
tenantLoading: false,
|
||||||
|
queryParams: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
userName: '',
|
||||||
|
email: '',
|
||||||
|
phone: '',
|
||||||
|
scenario: '',
|
||||||
|
scenarioItem: ''
|
||||||
|
},
|
||||||
|
userForm: {
|
||||||
|
userId: null,
|
||||||
|
tenantId: '',
|
||||||
|
userName: '',
|
||||||
|
email: '',
|
||||||
|
phone: '',
|
||||||
|
scenario: '',
|
||||||
|
scenarioItem: '',
|
||||||
|
password: '',
|
||||||
|
originalPassword: '',
|
||||||
|
roleName: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
formRules() {
|
||||||
|
return {
|
||||||
|
userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
|
||||||
|
email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
|
||||||
|
phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
|
||||||
|
password: this.isEdit ? [] : [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
||||||
|
originalPassword: this.isEdit ? [{ required: true, message: '请输入原始密码', trigger: 'blur' }] : []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getTenantOptions()
|
||||||
|
this.fetchUserList()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getTenantOptions() {
|
||||||
|
this.tenantLoading = true
|
||||||
|
getAllTenantList().then(response => {
|
||||||
|
if (response && (response.code === 20000 || response.code === 200)) {
|
||||||
|
const tenantList = Array.isArray(response.data) ? response.data : (response.data?.data || [])
|
||||||
|
this.tenantOptions = tenantList.map(item => ({
|
||||||
|
value: item.id,
|
||||||
|
label: item.tenantName ? `${item.tenantName} (${item.tenantCode || '-'})` : (item.tenantCode || item.id)
|
||||||
|
}))
|
||||||
|
} else {
|
||||||
|
this.tenantOptions = []
|
||||||
|
}
|
||||||
|
}).catch(() => {
|
||||||
|
this.tenantOptions = []
|
||||||
|
}).finally(() => {
|
||||||
|
this.tenantLoading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
fetchUserList() {
|
||||||
|
this.loading = true
|
||||||
|
const params = {
|
||||||
|
current: this.queryParams.current,
|
||||||
|
size: this.queryParams.size,
|
||||||
|
userName: this.queryParams.userName || undefined,
|
||||||
|
email: this.queryParams.email || undefined,
|
||||||
|
phone: this.queryParams.phone || undefined,
|
||||||
|
scenario: this.queryParams.scenario || undefined,
|
||||||
|
scenarioItem: this.queryParams.scenarioItem || undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
getUserList(params).then(response => {
|
||||||
|
if (response && (response.code === 20000 || response.code === 200)) {
|
||||||
|
this.userList = Array.isArray(response.data) ? response.data : []
|
||||||
|
this.total = response.total || 0
|
||||||
|
} else {
|
||||||
|
this.userList = []
|
||||||
|
this.total = 0
|
||||||
|
}
|
||||||
|
}).catch(() => {
|
||||||
|
this.userList = []
|
||||||
|
this.total = 0
|
||||||
|
}).finally(() => {
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.current = 1
|
||||||
|
this.fetchUserList()
|
||||||
|
},
|
||||||
|
resetQuery() {
|
||||||
|
this.queryParams = {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
userName: '',
|
||||||
|
email: '',
|
||||||
|
phone: '',
|
||||||
|
scenario: '',
|
||||||
|
scenarioItem: ''
|
||||||
|
}
|
||||||
|
this.fetchUserList()
|
||||||
|
},
|
||||||
|
handleSizeChange(size) {
|
||||||
|
this.queryParams.size = size
|
||||||
|
this.fetchUserList()
|
||||||
|
},
|
||||||
|
handleCurrentChange(current) {
|
||||||
|
this.queryParams.current = current
|
||||||
|
this.fetchUserList()
|
||||||
|
},
|
||||||
|
handleAdd() {
|
||||||
|
this.dialogTitle = '添加用户'
|
||||||
|
this.isEdit = false
|
||||||
|
this.resetForm()
|
||||||
|
this.dialogVisible = true
|
||||||
|
},
|
||||||
|
handleEdit(row) {
|
||||||
|
this.dialogTitle = '修改用户'
|
||||||
|
this.isEdit = true
|
||||||
|
this.userForm = {
|
||||||
|
userId: row.userId,
|
||||||
|
tenantId: row.tenantId || '',
|
||||||
|
userName: row.userName || '',
|
||||||
|
email: row.email || '',
|
||||||
|
phone: row.phone || '',
|
||||||
|
scenario: row.scenario || '',
|
||||||
|
scenarioItem: row.scenarioItem || '',
|
||||||
|
password: '',
|
||||||
|
originalPassword: '',
|
||||||
|
roleName: row.roleName || row.role || ''
|
||||||
|
}
|
||||||
|
this.dialogVisible = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (this.$refs.userForm) {
|
||||||
|
this.$refs.userForm.clearValidate()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleDelete(row) {
|
||||||
|
this.$confirm('确定删除该用户吗？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
deleteUser(row.userId).then(() => {
|
||||||
|
this.$message.success('删除成功')
|
||||||
|
this.fetchUserList()
|
||||||
|
})
|
||||||
|
}).catch(() => {})
|
||||||
|
},
|
||||||
|
handleSubmit() {
|
||||||
|
this.$refs.userForm.validate(valid => {
|
||||||
|
if (!valid) return
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
userId: this.userForm.userId || undefined,
|
||||||
|
tenantId: this.userForm.tenantId || undefined,
|
||||||
|
userName: this.userForm.userName,
|
||||||
|
email: this.userForm.email,
|
||||||
|
phone: this.userForm.phone,
|
||||||
|
roleName: this.userForm.roleName || undefined,
|
||||||
|
scenario: this.userForm.scenario || undefined,
|
||||||
|
scenarioItem: this.userForm.scenarioItem || undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.userForm.password) {
|
||||||
|
payload.password = this.userForm.password
|
||||||
|
}
|
||||||
|
if (this.isEdit) {
|
||||||
|
payload.originalPassword = this.userForm.originalPassword
|
||||||
|
}
|
||||||
|
|
||||||
|
const requestFn = this.isEdit ? updateUser : addUser
|
||||||
|
requestFn(payload).then(() => {
|
||||||
|
this.$message.success(this.isEdit ? '修改成功' : '添加成功')
|
||||||
|
this.dialogVisible = false
|
||||||
|
this.fetchUserList()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
resetForm() {
|
||||||
|
if (this.$refs.userForm) {
|
||||||
|
this.$refs.userForm.resetFields()
|
||||||
|
}
|
||||||
|
this.userForm = {
|
||||||
|
userId: null,
|
||||||
|
tenantId: '',
|
||||||
|
userName: '',
|
||||||
|
email: '',
|
||||||
|
phone: '',
|
||||||
|
scenario: '',
|
||||||
|
scenarioItem: '',
|
||||||
|
password: '',
|
||||||
|
originalPassword: '',
|
||||||
|
roleName: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
formatDateTime(dateTime) {
|
||||||
|
if (!dateTime) return '-'
|
||||||
|
const date = new Date(dateTime)
|
||||||
|
const year = date.getFullYear()
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||||
|
const day = String(date.getDate()).padStart(2, '0')
|
||||||
|
const hours = String(date.getHours()).padStart(2, '0')
|
||||||
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||||||
|
const seconds = String(date.getSeconds()).padStart(2, '0')
|
||||||
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.app-container {
|
||||||
|
.filter-container {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-container {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container {
|
||||||
|
.el-pagination {
|
||||||
|
margin-top: 20px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user