大屏页面初始化
This commit is contained in:
335
screen-vue/src/views/system/user/list.vue
Normal file
335
screen-vue/src/views/system/user/list.vue
Normal file
@@ -0,0 +1,335 @@
|
||||
<template>
|
||||
<div class="data-manage-page">
|
||||
<CSearch
|
||||
@search="handleSearch"
|
||||
@reset="handleReset"
|
||||
>
|
||||
<el-form-item label="用户名称：" class="search-item">
|
||||
<el-input
|
||||
v-model="searchForm.uname"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
class="search-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录账户：" class="search-item">
|
||||
<el-input
|
||||
v-model="searchForm.userName"
|
||||
placeholder="请输入登录账户"
|
||||
clearable
|
||||
class="search-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户状态：" class="search-item">
|
||||
<el-select
|
||||
v-model="searchForm.ustatus"
|
||||
placeholder="请选择用户状态"
|
||||
clearable
|
||||
class="search-select"
|
||||
>
|
||||
<el-option label="停用" value="0" />
|
||||
<el-option label="在用" value="1" />
|
||||
<el-option label="锁定" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</CSearch>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<div class="main-section">
|
||||
<div class="action-section">
|
||||
<el-button type="primary" icon="Plus" @click="handleAdd">
|
||||
新增
|
||||
</el-button>
|
||||
<el-button type="success" icon="Download" @click="handleExport">
|
||||
导出
|
||||
</el-button>
|
||||
</div>
|
||||
<STable
|
||||
:table-data="tableData"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
<template #columns>
|
||||
<el-table-column prop="createTime" label="记录日期" width="180" sortable fixed="left" />
|
||||
<el-table-column prop="userName" label="登录账户" />
|
||||
<el-table-column prop="uname" label="用户名称" />
|
||||
<el-table-column prop="sex" label="性别" sortable />
|
||||
<el-table-column prop="email" label="电子邮箱" />
|
||||
<el-table-column prop="phone" label="联系电话" />
|
||||
<el-table-column prop="ustatus" label="状态" min-width="100" align="center" sortable>
|
||||
<template #default="scope">
|
||||
<el-tag
|
||||
:type="scope.row.ustatus === '1' ? 'success' : scope.row.ustatus === '2' ? 'warning' : 'danger'"
|
||||
>
|
||||
{{ getStatusText(scope.row.ustatus) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="260" align="center" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button size="small" type="primary" @click="handleEdit(scope.row)">
|
||||
<el-icon><Edit /></el-icon>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button size="small" type="warning" @click="handleResetPwd(scope.row)">
|
||||
<el-icon><Key /></el-icon>
|
||||
初始化
|
||||
</el-button>
|
||||
<el-button size="small" type="danger" @click="handleDelete(scope.row)">
|
||||
<el-icon><Delete /></el-icon>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</STable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PDialog
|
||||
v-model="dialogVisible"
|
||||
:title="isEdit ? '编辑数据' : '新增数据'"
|
||||
@close="handleDialogClose"
|
||||
@reset="handleDialogReset"
|
||||
@confirm="handleSave"
|
||||
>
|
||||
<VForm ref="formComponentRef" :form-data="formData" :is-edit="isEdit" />
|
||||
</PDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
|
||||
import { Plus, Download, Edit, Delete } from '@element-plus/icons-vue'
|
||||
import { initPasswd } from '@/api/user'
|
||||
import { getHomeUserList, getHomeUserSave, getHomeUserDelete } from '@/api/bizUser'
|
||||
|
||||
import CSearch from '@/components/Search/proSearch.vue'
|
||||
import STable from '@/components/Table/proTable.vue'
|
||||
import PDialog from '@/components/Dialog/proDialog.vue'
|
||||
import VForm from './form.vue'
|
||||
|
||||
const formComponentRef = ref(null)
|
||||
|
||||
const loading = ref(false)
|
||||
const searchForm = reactive({
|
||||
uname: '',
|
||||
ustatus: '',
|
||||
userName: ''
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
total: 0
|
||||
})
|
||||
|
||||
const tableData = ref([])
|
||||
|
||||
const isEdit = ref(false)
|
||||
const formData = ref({})
|
||||
const currentRow = ref({})
|
||||
const dialogVisible = ref(false)
|
||||
|
||||
async function getDataList() {
|
||||
loading.value = true
|
||||
try {
|
||||
const reqParmas = {
|
||||
... searchForm,
|
||||
pageNum: pagination.pageNum,
|
||||
pageSize: pagination.pageSize,
|
||||
}
|
||||
const res = await getHomeUserList(reqParmas);
|
||||
pagination.total = res.total;
|
||||
tableData.value = res.list || [];
|
||||
} catch (error) {
|
||||
console.error('获取数据失败:', error);
|
||||
tableData.value = []
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusText = (status) => {
|
||||
const statusMap = {
|
||||
'0': '停用',
|
||||
'1': '在用',
|
||||
'2': '锁定'
|
||||
}
|
||||
return statusMap[status] || '未知'
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.pageNum = 1
|
||||
getDataList()
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
Object.assign(searchForm, {
|
||||
uname: '',
|
||||
ustatus: '',
|
||||
userName: ''
|
||||
})
|
||||
pagination.pageNum = 1
|
||||
getDataList()
|
||||
}
|
||||
|
||||
const handleAdd = () => {
|
||||
isEdit.value = false
|
||||
formData.value = {}
|
||||
currentRow.value = {}
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleEdit = (row) => {
|
||||
isEdit.value = true
|
||||
formData.value = { ...row }
|
||||
currentRow.value = { ...row }
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleExport = () => {
|
||||
ElMessage.success('开始导出数据...')
|
||||
}
|
||||
|
||||
const handleDelete = async (row) => {
|
||||
ElMessageBox.confirm('确定要删除该条数据吗?', '删除确认', {
|
||||
type: 'warning',
|
||||
closeOnClickModal: false,
|
||||
showClose: false
|
||||
})
|
||||
.then(async () => {
|
||||
const reqParams = {
|
||||
userId: row.userId
|
||||
}
|
||||
const res = await getHomeUserDelete(reqParams);
|
||||
ElMessage.success(res.msg);
|
||||
getDataList();
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage.info('已取消删除数据操作');
|
||||
});
|
||||
}
|
||||
|
||||
const handleResetPwd = async (row) => {
|
||||
ElMessageBox.confirm('确定要初始化该用户的密码吗?', '初始化确认', {
|
||||
type: 'warning',
|
||||
closeOnClickModal: false,
|
||||
showClose: false
|
||||
})
|
||||
.then(async () => {
|
||||
const reqParams = {
|
||||
userId: row.userId
|
||||
}
|
||||
const res = await initPasswd(reqParams);
|
||||
ElNotification({
|
||||
title: '初始化密码',
|
||||
message: res.msg,
|
||||
type: 'success',
|
||||
})
|
||||
getDataList();
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage.info('已取消密码初始化操作');
|
||||
});
|
||||
}
|
||||
|
||||
const handleSizeChange = (val) => {
|
||||
pagination.pageSize = val
|
||||
getDataList()
|
||||
}
|
||||
|
||||
const handleCurrentChange = (val) => {
|
||||
pagination.pageNum = val
|
||||
getDataList()
|
||||
}
|
||||
|
||||
const handleDialogClose = () => {
|
||||
formData.value = {}
|
||||
isEdit.value = false
|
||||
currentRow.value = {}
|
||||
dialogVisible.value = false
|
||||
}
|
||||
|
||||
const handleDialogReset = () => {
|
||||
if (formComponentRef.value) {
|
||||
formComponentRef.value.resetForm()
|
||||
ElMessage.info('表单已重置')
|
||||
}
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
if (formComponentRef.value) {
|
||||
const isValid = await formComponentRef.value.validate()
|
||||
if (!isValid) {
|
||||
ElMessage.warning('表单验证失败，请检查必填项')
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const reqParams = {
|
||||
...formData.value,
|
||||
isEdit: isEdit.value,
|
||||
userId: currentRow.value?.userId
|
||||
}
|
||||
const res = await getHomeUserSave(reqParams);
|
||||
dialogVisible.value = false;
|
||||
getDataList();
|
||||
ElMessage.success(res.msg)
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getDataList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.data-manage-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 6px;
|
||||
margin: 0 !important;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.main-section {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.action-section {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
:deep(.el-button .el-icon) {
|
||||
margin-right: 4px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user