|
|
|
@ -1,8 +1,8 @@ |
|
|
|
<template> |
|
|
|
<div class="user-management"> |
|
|
|
<div class="user-table" :key="refreshKey"> |
|
|
|
<el-table :data="tableData" header-cell-class-name="table-header" row-class-name="table-row"> |
|
|
|
<el-table-column type="selection" width="80" /> |
|
|
|
<el-table :data="tableData" header-cell-class-name="table-header" row-class-name="table-row" @selection-change="handleSelectionChange" > |
|
|
|
<el-table-column type="selection" width="80"/> |
|
|
|
<el-table-column label="用户" property="account" min-width="200" /> |
|
|
|
<el-table-column label="权限" property="usrRole" min-width="200" /> |
|
|
|
</el-table> |
|
|
|
@ -19,15 +19,15 @@ |
|
|
|
:message="deleteUserMessage" description="您正在删除用户，请谨慎操作" confirm-text="确认删除" cancel-text="取消删除" |
|
|
|
@confirm="handleConfirmDelete" @cancel="handleCancelDelete" /> |
|
|
|
|
|
|
|
<DelMessage v-if="delMessageShowModal" v-model:visible="delMessageShowModal" icon="/src/assets/OK.svg" |
|
|
|
<DelMessage v-if="delMessageShowModal" v-model="delMessageShowModal" icon="/src/assets/OK.svg" |
|
|
|
message="已成功删除用户" :username="selectedUsers[0]?.account" @confirm="handleConfirmMsgDelete" /> |
|
|
|
|
|
|
|
<DelWarn v-if="updatePinModal" :visible="updatePinModal" icon="/src/assets/update-pin-icon.svg" title="PIN码更新" |
|
|
|
:message="updatePinMessage" description="您正在更改PIN码,请谨慎操作" confirm-text="确认更新" cancel-text="取消更新" |
|
|
|
@confirm="handleConfirmUpdatePin" @cancel="handleCancelUpdatePin" /> |
|
|
|
|
|
|
|
<EnterPinModal v-if="enterPinModal" :visible="enterPinModal" :loading="updatePinLoading" @confirm="updatePinConfirm" |
|
|
|
@cancel="closeEnterPinModal" /> |
|
|
|
<EnterPinModal v-if="enterPinModal" :visible="enterPinModal" :loading="updatePinLoading" mode="edit" :userId="selectedUsers[0]?.id" |
|
|
|
@confirm="updatePinConfirm" @cancel="closeEnterPinModal" /> |
|
|
|
|
|
|
|
<DelMessage v-if="updatePinMsgModal" :visible="updatePinMsgModal" icon="/src/assets/OK.svg" message="PIN码更新成功" |
|
|
|
:username="selectedUsers[0].account" @confirm="handleConfirmMsg" /> |
|
|
|
@ -39,7 +39,7 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<template v-else-if="currentStep === 'pin'"> |
|
|
|
<EnterPinModal :visible="isPinModalVisible" :loading="registerLoading" @confirm="handlePinConfirm" |
|
|
|
<EnterPinModal :visible="isPinModalVisible" :loading="registerLoading" mode="add" @confirm="handlePinConfirm" |
|
|
|
@cancel="closeModal" /> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -51,29 +51,16 @@ |
|
|
|
<script setup lang="ts"> |
|
|
|
import type { User } from '../../../types/Index' |
|
|
|
import { DelWarn, DelMessage, AddUserModal, EnterPinModal } from '../components' |
|
|
|
import { ref, onMounted, computed } from 'vue' |
|
|
|
import { ref, onMounted, computed, nextTick } from 'vue' |
|
|
|
import { |
|
|
|
getUserList, |
|
|
|
deleteUser, |
|
|
|
userRegister, |
|
|
|
changeUserPassword, |
|
|
|
} from '../../../services/Index/index' |
|
|
|
const tableData = ref<User[]>([ |
|
|
|
{ |
|
|
|
id: 1, |
|
|
|
account: '管理员', |
|
|
|
password: '0000', |
|
|
|
usrRole: 'Admin', |
|
|
|
isBuiltInUser: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 2, |
|
|
|
account: '操作员01', |
|
|
|
password: '0000', |
|
|
|
usrRole: 'Usr', |
|
|
|
isBuiltInUser: false, |
|
|
|
}, |
|
|
|
]) |
|
|
|
import { ElMessage } from 'element-plus' |
|
|
|
|
|
|
|
const tableData = ref<User[]>() |
|
|
|
// 创建 `newUser` 对象存储用户名和 PIN 码 |
|
|
|
const newUser = ref({ |
|
|
|
account: '', |
|
|
|
@ -106,6 +93,19 @@ const tips = ref('') |
|
|
|
// 模拟用户数据 |
|
|
|
const selectedUsers = ref<User[]>([]) |
|
|
|
const refreshKey = ref(0) |
|
|
|
|
|
|
|
// 处理选择变化 |
|
|
|
const handleSelectionChange = (val: User[]) => { |
|
|
|
selectedUsers.value = val; |
|
|
|
// 只有当有选中用户时才更新 tempUser |
|
|
|
if (val && val.length > 0) { |
|
|
|
tempUser.value = val[0]; |
|
|
|
} else { |
|
|
|
// 当没有选中用户时，重置 tempUser |
|
|
|
tempUser.value = { id: 0, password: '' }; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 获取用户列表 |
|
|
|
const fetchUserList = async () => { |
|
|
|
const response = await getUserList() |
|
|
|
@ -114,44 +114,33 @@ const fetchUserList = async () => { |
|
|
|
tableData.value = response.data |
|
|
|
} else { |
|
|
|
console.log('获取用户列表失败') |
|
|
|
ElMessage.error('获取用户列表失败') |
|
|
|
} |
|
|
|
} |
|
|
|
// 处理选择变化 |
|
|
|
// const handleSelectionChange = (val: User[]) => { |
|
|
|
// selectedUsers.value = val |
|
|
|
// console.log('选中的用户', val) |
|
|
|
// // 只有当有选中用户时才更新 tempUser |
|
|
|
// if (val && val.length > 0) { |
|
|
|
// tempUser.value.id = val[0].id |
|
|
|
// tempUser.value.password = val[0].password |
|
|
|
// } else { |
|
|
|
// // 当没有选中用户时，重置 tempUser |
|
|
|
// tempUser.value.id = 0 |
|
|
|
// tempUser.value.password = '' |
|
|
|
// } |
|
|
|
// } |
|
|
|
|
|
|
|
// 新增用户 |
|
|
|
const addUser = async () => { |
|
|
|
insertUserShowModal.value = true |
|
|
|
} |
|
|
|
|
|
|
|
// 修改用户权限 (模拟 PIN 码修改功能) |
|
|
|
const modifyPin = async () => { |
|
|
|
if (selectedUsers.value.length === 0) { |
|
|
|
//通知用户没有选择用户，不使用控制台打印 |
|
|
|
isChecked.value = true |
|
|
|
ElMessage.warning('请选择一个用户') |
|
|
|
return |
|
|
|
} |
|
|
|
updatePinModal.value = true |
|
|
|
} |
|
|
|
|
|
|
|
// 删除用户 |
|
|
|
const deleteSelectedUsers = () => { |
|
|
|
if (selectedUsers.value.length === 0) { |
|
|
|
//通知用户没有选择用户，不使用控制台打印 |
|
|
|
isChecked.value = true |
|
|
|
return |
|
|
|
ElMessage.warning('请选择至少一个用户'); |
|
|
|
return; |
|
|
|
} |
|
|
|
delShowModal.value = true |
|
|
|
delShowModal.value = true; |
|
|
|
} |
|
|
|
|
|
|
|
// 在组件挂载时调用获取用户列表 |
|
|
|
onMounted(() => { |
|
|
|
fetchUserList() |
|
|
|
@ -160,80 +149,101 @@ onMounted(() => { |
|
|
|
const handleConfirmDelete = async () => { |
|
|
|
try { |
|
|
|
const ids = selectedUsers.value.map((user) => user.id) |
|
|
|
for (const id of ids) { |
|
|
|
const response = await deleteUser({ id }) |
|
|
|
if (!response || !response.success) { |
|
|
|
console.log('删除用户失败') |
|
|
|
return |
|
|
|
} |
|
|
|
const deletePromises = ids.map((id) => deleteUser({ id })) |
|
|
|
const results = await Promise.allSettled(deletePromises) |
|
|
|
|
|
|
|
const allSuccess = results.every((result) => result.status === 'fulfilled') |
|
|
|
if (allSuccess) { |
|
|
|
delShowModal.value = false |
|
|
|
selectedUsers.value = [] |
|
|
|
delMessageShowModal.value = true |
|
|
|
ElMessage.success('删除用户成功') |
|
|
|
fetchUserList() |
|
|
|
} else { |
|
|
|
const failedIds = results |
|
|
|
.filter((result) => result.status === 'rejected') |
|
|
|
.map((_, index) => ids[index]) |
|
|
|
ElMessage.error(`删除用户失败，ID: ${failedIds.join(', ')}`) |
|
|
|
} |
|
|
|
|
|
|
|
delShowModal.value = false |
|
|
|
// 在显示成功消息之前先保存要显示的用户名 |
|
|
|
// const deletedUsername = selectedUsers.value[0]?.account |
|
|
|
// 清空选中的用户 |
|
|
|
selectedUsers.value = [] |
|
|
|
delMessageShowModal.value = true |
|
|
|
} catch (error) { |
|
|
|
console.error('删除用户时发生错误:', error) |
|
|
|
ElMessage.error('删除用户时发生错误') |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const handleCancelDelete = () => { |
|
|
|
delShowModal.value = false |
|
|
|
} |
|
|
|
|
|
|
|
const handleConfirmMsg = () => { |
|
|
|
confirmInsert.value = false |
|
|
|
isChecked.value = false |
|
|
|
updatePinMsgModal.value = false |
|
|
|
fetchUserList() |
|
|
|
} |
|
|
|
|
|
|
|
const handleConfirmMsgDelete = () => { |
|
|
|
delMessageShowModal.value = false |
|
|
|
fetchUserList() |
|
|
|
} |
|
|
|
|
|
|
|
//更新PIN |
|
|
|
//定义请求 |
|
|
|
const handleUpdatePin = async () => { |
|
|
|
if (selectedUsers.value.length !== 1) { |
|
|
|
console.log('请选择一个用户来修改PIN码') |
|
|
|
ElMessage.warning('请选择一个用户来修改PIN码') |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
const user = tempUser.value |
|
|
|
const user = selectedUsers.value[0] |
|
|
|
const response = await changeUserPassword({ |
|
|
|
id: user.id, |
|
|
|
password: user.password, |
|
|
|
oldpasswd: tempUser.value.password, // 旧密码 |
|
|
|
password: tempUser.value.password // 新密码 |
|
|
|
}) |
|
|
|
|
|
|
|
if (response && response.success) { |
|
|
|
ElMessage.success('PIN码更新成功') |
|
|
|
fetchUserList() |
|
|
|
} else { |
|
|
|
console.log('修改用户权限失败') |
|
|
|
ElMessage.error('修改密码失败') |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
//确认更新pin，打开输入框 |
|
|
|
const handleConfirmUpdatePin = () => { |
|
|
|
if (selectedUsers.value.length !== 1) { |
|
|
|
ElMessage.warning('请选择一个用户来修改PIN码') |
|
|
|
return |
|
|
|
} |
|
|
|
updatePinModal.value = false |
|
|
|
enterPinModal.value = true |
|
|
|
} |
|
|
|
|
|
|
|
//输入pin，确认，发送请求 |
|
|
|
const updatePinConfirm = (val: string) => { |
|
|
|
const updatePinConfirm = (parameters: ChangePasswordParams) => { |
|
|
|
enterPinModal.value = false |
|
|
|
updatePinLoading.value = true |
|
|
|
tempUser.value.password = val |
|
|
|
handleUpdatePin().then(() => { |
|
|
|
|
|
|
|
changeUserPassword(parameters).then(() => { |
|
|
|
updatePinLoading.value = false |
|
|
|
updatePinMsgModal.value = true |
|
|
|
}).catch(() => { |
|
|
|
ElMessage.error('修改密码失败') |
|
|
|
updatePinLoading.value = false |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
//取消 |
|
|
|
const closeEnterPinModal = () => { |
|
|
|
enterPinModal.value = false |
|
|
|
} |
|
|
|
|
|
|
|
//取消 |
|
|
|
const handleCancelUpdatePin = () => { |
|
|
|
updatePinModal.value = false |
|
|
|
} |
|
|
|
|
|
|
|
//添加用户 |
|
|
|
const handleConfirmInsert = (val: string) => { |
|
|
|
const user = tableData.value.find((item) => item.account == val) |
|
|
|
@ -250,14 +260,17 @@ const handleConfirmInsert = (val: string) => { |
|
|
|
currentStep.value = 'pin' |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const handleCancelInsert = () => { |
|
|
|
insertUserShowModal.value = false |
|
|
|
} |
|
|
|
|
|
|
|
// 重置 `alreadyExist` 状态 |
|
|
|
const resetAlreadyExist = () => { |
|
|
|
isExist.value = false |
|
|
|
placeholder.value = '请输入用户名' |
|
|
|
} |
|
|
|
|
|
|
|
const handlePinConfirm = (pin: string) => { |
|
|
|
// 处理 PIN 码确认逻辑 |
|
|
|
registerLoading.value = true |
|
|
|
@ -266,21 +279,29 @@ const handlePinConfirm = (pin: string) => { |
|
|
|
confirmInsert.value = true |
|
|
|
registerLoading.value = false |
|
|
|
isPinModalVisible.value = false |
|
|
|
}).catch((error) => { |
|
|
|
ElMessage.error('添加用户失败:' + error.message) |
|
|
|
registerLoading.value = false |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
const closeModal = () => { |
|
|
|
isPinModalVisible.value = false |
|
|
|
} |
|
|
|
|
|
|
|
//添加用户的api |
|
|
|
const handleAddUser = async () => { |
|
|
|
const res = await userRegister(newUser.value) |
|
|
|
if (res && res.success) { |
|
|
|
fetchUserList() |
|
|
|
} else { |
|
|
|
throw new Error('添加用户失败') |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 选中用户的 `account` 信息，用于显示在 `Warning` 组件中 |
|
|
|
const selectedUserAccount = computed(() => { |
|
|
|
return selectedUsers.value.length > 0 ? selectedUsers.value[0].account : '' |
|
|
|
return selectedUsers.value.length > 0? selectedUsers.value[0].account : '' |
|
|
|
}) |
|
|
|
|
|
|
|
// 动态生成的 message 内容 |
|
|
|
@ -291,6 +312,7 @@ const deleteUserMessage = computed( |
|
|
|
() => `是否删除 <strong>${selectedUserAccount.value}</strong> 用户`, |
|
|
|
) |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="less"> |
|
|
|
.user-management { |
|
|
|
width: 100%; |
|
|
|
@ -301,7 +323,7 @@ const deleteUserMessage = computed( |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
.user-table { |
|
|
|
.user-table { |
|
|
|
flex: 1; |
|
|
|
background-color: #fff; |
|
|
|
border-radius: 12px; |
|
|
|
@ -325,7 +347,7 @@ const deleteUserMessage = computed( |
|
|
|
display: none; |
|
|
|
} |
|
|
|
|
|
|
|
.el-table__header { |
|
|
|
.el-table__header { |
|
|
|
th { |
|
|
|
background-color: #f5f7fa; |
|
|
|
border: none; |
|
|
|
@ -340,7 +362,7 @@ const deleteUserMessage = computed( |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.el-table__body { |
|
|
|
.el-table__body { |
|
|
|
td { |
|
|
|
border: none; |
|
|
|
height: 60px; |
|
|
|
@ -364,10 +386,10 @@ const deleteUserMessage = computed( |
|
|
|
} |
|
|
|
|
|
|
|
// 放大多选框 |
|
|
|
.el-checkbox { |
|
|
|
.el-checkbox { |
|
|
|
transform: scale(1.5); |
|
|
|
|
|
|
|
.el-checkbox__inner { |
|
|
|
.el-checkbox__inner { |
|
|
|
border-color: #dcdfe6; |
|
|
|
transition: all 0.3s; |
|
|
|
|
|
|
|
@ -378,13 +400,13 @@ const deleteUserMessage = computed( |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.table-footer { |
|
|
|
.table-footer { |
|
|
|
margin-top: 24px; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
gap: 20px; |
|
|
|
|
|
|
|
.el-button { |
|
|
|
.el-button { |
|
|
|
min-width: 160px; |
|
|
|
height: 56px; |
|
|
|
border-radius: 8px; |
|
|
|
@ -422,22 +444,22 @@ const deleteUserMessage = computed( |
|
|
|
|
|
|
|
// 添加响应式设计 |
|
|
|
@media screen and (max-width: 768px) { |
|
|
|
.user-management { |
|
|
|
.user-management { |
|
|
|
padding: 10px; |
|
|
|
|
|
|
|
.user-table { |
|
|
|
.user-table { |
|
|
|
padding: 16px; |
|
|
|
|
|
|
|
.table-footer { |
|
|
|
.table-footer { |
|
|
|
flex-direction: column; |
|
|
|
align-items: stretch; |
|
|
|
gap: 12px; |
|
|
|
|
|
|
|
.el-button { |
|
|
|
.el-button { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
XinYuan