大屏项目初始化
This commit is contained in:
187
screen-vue/src/views/system/user/form.vue
Normal file
187
screen-vue/src/views/system/user/form.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<el-form
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
ref="formRef"
|
||||
label-width="100px"
|
||||
class="dialog-form-container"
|
||||
>
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<el-form-item label="登录账户" prop="userName">
|
||||
<el-input
|
||||
v-model="formData.userName"
|
||||
placeholder="请输入登录账户"
|
||||
clearable
|
||||
:disabled="isEdit"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-col">
|
||||
<el-form-item label="用户名称" prop="uname">
|
||||
<el-input
|
||||
v-model="formData.uname"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<el-form-item label="性别" prop="sex">
|
||||
<el-select
|
||||
v-model="formData.sex"
|
||||
placeholder="请选择性别"
|
||||
clearable
|
||||
>
|
||||
<el-option label="男" value="男" />
|
||||
<el-option label="女" value="女" />
|
||||
<el-option label="未知" value="未知" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-col">
|
||||
<el-form-item label="电子邮箱" prop="email">
|
||||
<el-input
|
||||
v-model="formData.email"
|
||||
placeholder="请输入电子邮箱"
|
||||
clearable
|
||||
type="email"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<el-form-item label="联系电话" prop="phone">
|
||||
<el-input
|
||||
v-model="formData.phone"
|
||||
placeholder="请输入联系电话"
|
||||
clearable
|
||||
type="tel"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-col">
|
||||
<el-form-item label="用户角色" prop="roleId">
|
||||
<el-select
|
||||
v-model="formData.roleId"
|
||||
placeholder="请选择用户角色"
|
||||
clearable
|
||||
>
|
||||
<el-option label="管理员" value="0" />
|
||||
<el-option label="普通用户" value="1" />
|
||||
<el-option label="访客" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<el-form-item label="系统模块" prop="groupModuleId">
|
||||
<el-select
|
||||
v-model="formData.groupModuleId"
|
||||
placeholder="请选择系统模块"
|
||||
clearable
|
||||
>
|
||||
<el-option label="模块A" value="0" />
|
||||
<el-option label="模块B" value="1" />
|
||||
<el-option label="模块C" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-col">
|
||||
<el-form-item label="登录状态" prop="ustatus">
|
||||
<el-select
|
||||
v-model="formData.ustatus"
|
||||
placeholder="请选择登录状态"
|
||||
clearable
|
||||
>
|
||||
<el-option label="停用" value="0" />
|
||||
<el-option label="在用" value="1" />
|
||||
<el-option label="锁定" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({
|
||||
uname: '',
|
||||
userName: '',
|
||||
sex: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
roleId : '',
|
||||
groupModuleId: '',
|
||||
ustatus: '1',
|
||||
})
|
||||
},
|
||||
isEdit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const formRef = ref(null)
|
||||
|
||||
const formRules = {
|
||||
uname: [ { required: true, message: '请输入用户名称', trigger: 'blur' } ],
|
||||
userName: [ { required: true, message: '请输入登录账户', trigger: 'blur' } ],
|
||||
sex: [ { required: true, message: '请选择性别', trigger: 'change' } ],
|
||||
roleId: [ { required: true, message: '请选择用户角色', trigger: 'change' } ],
|
||||
groupModuleId: [ { required: true, message: '请选择系统模块', trigger: 'change' } ],
|
||||
ustatus: [ { required: true, message: '请选择登录状态', trigger: 'change' } ],
|
||||
}
|
||||
|
||||
const validate = async () => {
|
||||
if (!formRef.value) return false
|
||||
try {
|
||||
const valid = await formRef.value.validate()
|
||||
return valid
|
||||
} catch (error) {
|
||||
console.error('表单验证失败:', error)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
if (formRef.value) formRef.value.resetFields()
|
||||
}
|
||||
|
||||
defineExpose({ validate, resetForm })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dialog-form-container {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
margin: 0;
|
||||
border: 1px solid rgba(64, 158, 255, 0.15);
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 布局样式 */
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
margin: 0 0 16px 0;
|
||||
gap: 20px;
|
||||
}
|
||||
.form-row:last-child { margin-bottom: 0; }
|
||||
.form-col { flex: 1; min-width: 180px; }
|
||||
</style>
|
||||
@@ -1,8 +1,276 @@
|
||||
<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="记录日期" />
|
||||
<el-table-column prop="userName" label="登录账户" />
|
||||
<el-table-column prop="uname" label="用户名称" />
|
||||
<el-table-column prop="sex" label="性别" />
|
||||
<el-table-column prop="email" label="电子邮箱" />
|
||||
<el-table-column prop="phone" label="联系电话" />
|
||||
<el-table-column prop="ustatus" label="状态" min-width="100" align="center">
|
||||
<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="180" align="center">
|
||||
<template #default="scope">
|
||||
<el-button size="small" type="primary" link @click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button size="small" type="danger" link @click="handleDelete(scope.row)">
|
||||
删除
|
||||
</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>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Plus, Download } from '@element-plus/icons-vue'
|
||||
import { getHomeUserList } 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 dialogVisible = ref(false)
|
||||
const isEdit = ref(false)
|
||||
const formData = ref({})
|
||||
|
||||
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 = {}
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleEdit = (row) => {
|
||||
isEdit.value = true
|
||||
formData.value = { ...row }
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleExport = () => {
|
||||
ElMessage.success('开始导出数据...')
|
||||
}
|
||||
|
||||
const handleDelete = (row) => {
|
||||
ElMessage.warning(`删除ID为 ${row.id} 的数据`)
|
||||
}
|
||||
|
||||
const handleSizeChange = (val) => {
|
||||
pagination.pageSize = val
|
||||
getDataList()
|
||||
}
|
||||
|
||||
const handleCurrentChange = (val) => {
|
||||
pagination.pageNum = val
|
||||
getDataList()
|
||||
}
|
||||
|
||||
const handleDialogClose = () => {
|
||||
formData.value = {}
|
||||
isEdit.value = false
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
ElMessage.success(isEdit.value ? '编辑成功' : '新增成功')
|
||||
dialogVisible.value = false
|
||||
getDataList()
|
||||
}, 500)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getDataList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
.data-manage-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
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-bottom: 12px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.search-input, .search-select {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user