337 lines
8.3 KiB
Vue
337 lines
8.3 KiB
Vue
<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="电子邮箱" width="225" show-overflow-tooltip="true" />
|
|
<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"
|
|
:loading="saveLoading"
|
|
: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 saveLoading = ref(false)
|
|
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 reqParams = {
|
|
... searchForm,
|
|
pageNum: pagination.pageNum,
|
|
pageSize: pagination.pageSize,
|
|
}
|
|
const res = await getHomeUserList(reqParams);
|
|
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
|
|
}
|
|
}
|
|
saveLoading.value = true
|
|
try {
|
|
const reqParams = {
|
|
...formData.value,
|
|
isEdit: isEdit.value,
|
|
userId: currentRow.value?.userId
|
|
}
|
|
const res = await getHomeUserSave(reqParams);
|
|
saveLoading.value = false;
|
|
dialogVisible.value = false;
|
|
ElMessage.success(res.msg);
|
|
getDataList();
|
|
} 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> |