itbaima-study/itbaima-forum-jwt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

分离用户编辑器组件，添加加载动画

Browse Source
This commit is contained in:
柏码の讲师 2025-01-09 00:14:53 +08:00
parent f5941c8570
commit 5e941df267
2 changed files with 89 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
my-project-frontend/src/components/UserEditor.vue Normal file
View File

@ -0,0 +1,83 @@
<script setup>
import {EditPen} from "@element-plus/icons-vue";
import {reactive} from "vue";
import {apiUserDetailTotal, apiUserSave} from "@/net/api/user";
import {ElMessage} from "element-plus";
const editor = reactive({
id: 0,
display: false,
temp: {},
loading: false,
})
function loadUserEditor(user) {
editor.id = user.id
editor.display = true
editor.loading = true
apiUserDetailTotal(editor.id, data => {
editor.temp = { ...data, ...user }
editor.loading = false
})
}
defineExpose({ loadUserEditor })
function saveUserSettings() {
editor.display = false
apiUserSave(editor.temp, () => {
const user = userTable.data.find(user => user.id === editor.id)
Object.assign(user, editor.temp)
ElMessage.success('数据保存成功')
})
}
</script>
<template>
<el-drawer v-model="editor.display" size="380" :close-on-click-modal="false">
<template #header>
<div>
<div style="font-weight: bold">
<el-icon><EditPen/></el-icon>
编辑用户信息
</div>
<div style="font-size: 13px">编辑完成后请点击下方保存按钮</div>
</div>
</template>
<div v-loading="editor.loading" element-loading-text="数据加载中，请稍后..." style="height: 100%">
<el-form label-position="top" v-if="!editor.loading">
<el-form-item label="用户名">
<el-input v-model="editor.temp.username"/>
</el-form-item>
<el-form-item label="电子邮件">
<el-input v-model="editor.temp.email"/>
</el-form-item>
<div style="display: flex;font-size: 14px">
<div>
<span style="margin-right: 10px">禁言</span>
<el-switch v-model="editor.temp.mute"/>
</div>
<el-divider direction="vertical" style="height: 30px;margin: 0 20px"/>
<div>
<span style="margin-right: 10px">账号封禁</span>
<el-switch v-model="editor.temp.banned"/>
</div>
</div>
<div style="margin-top: 20px;color: #606266;font-size: 14px">
注册时间: {{ new Date(editor.temp.registerTime).toLocaleString() }}
</div>
<el-divider direction="horizontal"/>
</el-form>
</div>
<template #footer>
<div style="text-align: center">
<el-button type="success" @click="saveUserSettings">保存</el-button>
<el-button type="info" @click="editor.display = false">取消</el-button>
</div>
</template>
</el-drawer>
</template>
<style scoped>
</style>

75
my-project-frontend/src/views/admin/UserAdmin.vue
View File

@ -1,9 +1,9 @@
<script setup>
import {EditPen, User} from "@element-plus/icons-vue";
import {apiUserDetailTotal, apiUserList, apiUserSave} from "@/net/api/user";
import {reactive, watchEffect} from "vue";
import {apiUserList} from "@/net/api/user";
import {reactive, ref, watchEffect} from "vue";
import {useStore} from "@/store";
import {ElMessage} from "element-plus";
import UserEditor from "@/components/UserEditor.vue";
const store = useStore()
@ -14,22 +14,7 @@ const userTable = reactive({
data: []
})
const editor = reactive({
id: 0,
display: false,
temp: {},
loading: false,
})
function loadUserEditor(user) {
editor.id = user.id
editor.display = true
editor.loading = true
apiUserDetailTotal(editor.id, data => {
editor.temp = { ...data, ...user }
editor.loading = false
})
}
const editorRef = ref()
function userStatus(user) {
if(user.mute && user.banned)
@ -42,15 +27,6 @@ function userStatus(user) {
return '正常'
}
function saveUserSettings() {
editor.display = false
apiUserSave(editor.temp, () => {
const user = userTable.data.find(user => user.id === editor.id)
Object.assign(user, editor.temp)
ElMessage.success('数据保存成功')
})
}
watchEffect(() => apiUserList(userTable.page, userTable.size, data => {
userTable.total = data.total
userTable.data = data.list
@ -94,7 +70,7 @@ watchEffect(() => apiUserList(userTable.page, userTable.size, data => {
<el-table-column label="操作" width="100" align="center">
<template #default="{ row }">
<el-button size="small" type="primary" :icon="EditPen"
@click="loadUserEditor(row)"
@click="editorRef.loadUserEditor(row)"
:disabled="store.user.id === row.id">编辑</el-button>
</template>
</el-table-column>
@ -106,46 +82,7 @@ watchEffect(() => apiUserList(userTable.page, userTable.size, data => {
v-model:page-size="userTable.size"
layout="total, sizes, prev, pager, next, jumper"/>
</div>
<el-drawer v-model="editor.display" size="380" :close-on-click-modal="false">
<template #header>
<div>
<div style="font-weight: bold">
<el-icon><EditPen/></el-icon>
编辑用户信息
</div>
<div style="font-size: 13px">编辑完成后请点击下方保存按钮</div>
</div>
</template>
<el-form label-position="top">
<el-form-item label="用户名">
<el-input v-model="editor.temp.username"/>
</el-form-item>
<el-form-item label="电子邮件">
<el-input v-model="editor.temp.email"/>
</el-form-item>
<div style="display: flex;font-size: 14px">
<div>
<span style="margin-right: 10px">禁言</span>
<el-switch v-model="editor.temp.mute"/>
</div>
<el-divider direction="vertical" style="height: 30px;margin: 0 20px"/>
<div>
<span style="margin-right: 10px">账号封禁</span>
<el-switch v-model="editor.temp.banned"/>
</div>
</div>
<div style="margin-top: 20px;color: #606266;font-size: 14px">
注册时间: {{ new Date(editor.temp.registerTime).toLocaleString() }}
</div>
<el-divider direction="horizontal"/>
</el-form>
<template #footer>
<div style="text-align: center">
<el-button type="success" @click="saveUserSettings">保存</el-button>
<el-button type="info" @click="editor.display = false">取消</el-button>
</div>
</template>
</el-drawer>
<user-editor ref="editorRef"/>
</div>
</template>