<template>
<!
---搜索表单
-->
<div class="search
-div">
<el
-form label
-width="70px" size="small">
<el
-row>
<el
-col :span="12">
<el
-form
-item label="关键字">
<el
-input
v
-model="queryDto
.keyword"
style="width: 100%"
placeholder="用户名"
></el
-input>
</el
-form
-item>
</el
-col>
<el
-col :span="12">
<el
-form
-item label="创建
时间">
<el
-date
-picker
v
-model="createTimes"
type="daterange"
range
-separator="To"
start
-placeholder="开始
时间"
end
-placeholder="结束
时间"
format="YYYY
-MM
-DD"
value
-format="YYYY
-MM
-DD"
/>
</el
-form
-item>
</el
-col>
</el
-row>
<el
-row style="display:flex">
<el
-button type="primary" size="small" @click="searchSysUser">
搜索
</el
-button>
<el
-button size="small" @click="resetData">重置</el
-button>
</el
-row>
</el
-form>
</div>
<!
--添加按钮
-->
<div class="tools
-div">
<el
-button type="success" size="small" @click="addShow">添 加</el
-button>
</div>
<el
-dialog v
-model="
dialogVisible" title="添加或修改" width="40%">
<el
-form label
-width="120px">
<el
-form
-item label="用户名">
<el
-input v
-model="sysUser
.userName" />
</el
-form
-item>
<el
-form
-item v
-if="sysUser
.id == null" label="密码">
<el
-input type="password" show
-password v
-model="sysUser
.password" />
</el
-form
-item>
<el
-form
-item label="姓名">
<el
-input v
-model="sysUser
.name" />
</el
-form
-item>
<el
-form
-item label="手机">
<el
-input v
-model="sysUser
.phone" />
</el
-form
-item>
<el
-form
-item label="头像">
<el
-upload
class="avatar
-uploader"
action="http://localhost:8501/admin/system/fileUpload"
:show
-file
-list="false"
>
<img v
-if="sysUser
.avatar" :src="sysUser
.avatar" class="avatar" />
<el
-icon v
-else class="avatar
-uploader
-icon"><Plus /></el
-icon>
</el
-upload>
</el
-form
-item>
<el
-form
-item label="描述">
<el
-input v
-model="sysUser
.description" />
</el
-form
-item>
<el
-form
-item>
<el
-button type="primary" @click="submit">提交</el
-button>
<el
-button @click="
dialogVisible = false">取消</el
-button>
</el
-form
-item>
</el
-form>
</el
-dialog>
<!
---数据表格
-->
<el
-table :data="list" style="width: 100%">
<el
-table-column prop="userName" label="用户名" />
<el
-table-column prop="name" label="姓名" />
<el
-table-column prop="phone" label="手机" />
<el
-table-column prop="avatar" label="头像" #default="scope">
<img :src="scope
.row
.avatar" width="50" />
</el
-table-column>
<el
-table-column prop="description" label="描述" />
<el
-table-column prop="status" label="状态" #default="scope">
{{ scope
.row
.status == 1 ? '正常' : '停用' }}
</el
-table-column>
<el
-table-column prop="createTime" label="创建
时间" />
<el
-table-column label="操作" align="center" width="280">
<el
-button type="primary" size="small" @click="showEdit(scope
.row)">
修改
</el
-button>
<el
-button type="danger" size="small" @click="deleteById(scope
.row)">
删除
</el
-button>
<el
-button type="warning" size="small">
分配角色
</el
-button>
</el
-table-column>
</el
-table>
<el
-pagination
v
-model:current
-page="pageParams
.page"
v
-model:page
-size="pageParams
.limit"
:page
-sizes="[10, 20, 50, 100]"
@size
-change="fetchData"
@current
-change="fetchData"
layout="total, sizes, prev, pager, next"
:total="total"
/>
</template>
<script setup>
import { onMounted, ref } from '
vue'
import {
deleteSysUserById,
GetSysUserListByPage,
saveSysUser,
updateSysUser,
} from '@/api/sysUser'
import { ElMessage, ElMessageBox } from '
element-plus'
// 分页条数据模型
const total = ref(0)
// 表格数据模型
const list = ref([])
// 定义搜索表单数据模型
const queryDto = ref({
keyword: '',
createTimeBegin: '',
createTimeEnd: '',
})
const createTimes = ref([])
//分页数据
const pageParams = ref({
page: 1,
limit: 3,
})
onMounted(() => {
fetchData()
})
// 搜索
// eslint
-disable
-next
-line no
-unused
-vars
const searchSysUser = () => {
fetchData()
}
// 重置
// eslint
-disable
-next
-line no
-unused
-vars
const resetData = () => {
queryDto
.value = {}
createTimes
.value = []
}
// 分页
const fetchData = async () => {
if (createTimes
.value
.length === 2) {
queryDto
.value
.createTimeBegin = createTimes
.value[0]
queryDto
.value
.createTimeEnd = createTimes
.value[1]
}
const { code, message, data } = await GetSysUserListByPage(
pageParams
.value
.page,
pageParams
.value
.limit,
queryDto
.value
)
list
.value = data
.list
total
.value = data
.total
}
// 新增
const
dialogVisible = ref(false)
// eslint
-disable
-next
-line no
-unused
-vars
const addShow = () => {
dialogVisible
.value = true
sysUser
.value = {}
}
const defaultForm = {
userName: '',
name: '',
phone: '',
password: '',
description: '',
avatar: '',
}
const showEdit = row => {
sysUser
.value = {
...row }
dialogVisible
.value = true
}
const sysUser = ref(defaultForm)
const submit = async () => {
if (!sysUser
.value
.id) {
const { code, message, data } = await saveSysUser(sysUser
.value)
if (code === 200) {
dialogVisible
.value = false
ElMessage
.success('操作成功')
fetchData()
}
}
const { code, message, data } = await updateSysUser(sysUser
.value)
if (code === 200) {
dialogVisible
.value = false
ElMessage
.success('操作成功')
fetchData()
}
}
// 删除
const deleteById = row => {
ElMessageBox
.confirm('此操作将永久删除该记录, 是否继续?', 'Warning', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(async () => {
const { code } = await deleteSysUserById(row
.id)
if (code === 200) {
ElMessage
.success('操作成功')
fetchData()
}
})
}
</script>
<style scoped>
.search
-div {
margin
-bottom: 10px;
padding: 10px;
border: 1px solid #ebeef5;
border
-radius: 3px;
background
-color: #fff;
}
.tools
-div {
margin: 10px 0;
padding: 10px;
border: 1px solid #ebeef5;
border
-radius: 3px;
background
-color: #fff;
}
.avatar
-uploader
.avatar {
width: 178px;
height: 178px;
display: block;
}
.avatar
-uploader
.el
-upload {
border: 1px dashed var(
--el
-border
-color);
border
-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(
--el
-transition
-duration
-fast);
}
.avatar
-uploader
.el
-upload:hover {
border
-color: var(
--el
-color
-primary);
}
.el
-icon
.avatar
-uploader
-icon {
font
-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
text
-align: center;
}
</style>
本文讲述了在Vue应用中遇到的关于$refs未定义的问题，原因是由于dialog组件懒加载导致在mounted阶段未能正确挂载。为了解决这个问题，作者尝试了使用v-if延迟加载，但这会导致组件频繁销毁重建，影响状态保持。最终，通过设置初始化变量并在dialog显示时才执行相关函数，成功解决了$refs未定义的问题，并保持了dialog的状态。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
