<template>
|
<div class="app-container">
|
<div class="search-form">
|
<el-form :inline="true" :model="searchForm">
|
<el-form-item label="部门">
|
<el-input
|
v-model="searchForm.department"
|
placeholder="请输入部门名称"
|
clearable
|
style="width: 200px"
|
/>
|
</el-form-item>
|
<el-form-item label="姓名">
|
<el-input
|
v-model="searchForm.name"
|
placeholder="请输入姓名"
|
clearable
|
style="width: 200px"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
<el-button @click="handleReset">重置</el-button>
|
<el-button type="success" @click="handleAdd">新增</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<div class="table-container">
|
<DynamicTable
|
ref="dynamicTableRef"
|
:data="tableData"
|
:dict-types="dictTypes"
|
:loading="loading"
|
:show-selection="true"
|
:show-actions="true"
|
:show-pagination="true"
|
:pagination="pagination"
|
height="calc(100vh - 280px)"
|
@selection-change="handleSelectionChange"
|
@edit="handleEdit"
|
@delete="handleDelete"
|
@select-change="handleSelectChange"
|
@input-change="handleInputChange"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
|
<!-- 新增/编辑对话框 -->
|
<el-dialog
|
v-model="dialogVisible"
|
:title="dialogTitle"
|
width="600px"
|
append-to-body
|
>
|
<el-form
|
ref="formRef"
|
:model="form"
|
:rules="rules"
|
label-width="100px"
|
>
|
<el-form-item label="部门" prop="department">
|
<el-input v-model="form.department" placeholder="请输入部门" />
|
</el-form-item>
|
<el-form-item label="姓名" prop="name">
|
<el-input v-model="form.name" placeholder="请输入姓名" />
|
</el-form-item>
|
<el-form-item label="工号" prop="employeeId">
|
<el-input v-model="form.employeeId" placeholder="请输入工号" />
|
</el-form-item>
|
|
<!-- 动态表单项：根据字典生成 -->
|
<el-form-item
|
v-for="dictItem in dynamicFormItems"
|
:key="dictItem.value"
|
:label="dictItem.label"
|
:prop="dictItem.value"
|
>
|
<el-select
|
v-model="form[dictItem.value]"
|
placeholder="请选择"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="option in dictItem.options"
|
:key="option.value"
|
:label="option.label"
|
:value="option.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, computed, onMounted } from 'vue'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import DynamicTable from '@/components/DynamicTable/index.vue'
|
|
// 响应式数据
|
const loading = ref(false)
|
const dialogVisible = ref(false)
|
const dialogTitle = ref('')
|
const editIndex = ref(-1)
|
const selectedRows = ref([])
|
|
// 搜索表单
|
const searchForm = reactive({
|
department: '',
|
name: ''
|
})
|
|
// 表格数据
|
const tableData = ref([
|
{
|
id: 1,
|
department: '技术部',
|
name: '张三',
|
employeeId: 'EMP001',
|
status: '1',
|
level: '2',
|
position: '1'
|
},
|
{
|
id: 2,
|
department: '人事部',
|
name: '李四',
|
employeeId: 'EMP002',
|
status: '0',
|
level: '1',
|
position: '2'
|
},
|
{
|
id: 3,
|
department: '财务部',
|
name: '王五',
|
employeeId: 'EMP003',
|
status: '1',
|
level: '3',
|
position: '1'
|
}
|
])
|
|
// 字典类型配置
|
const dictTypes = ref([
|
'sys_normal_disable', // 状态字典
|
'sys_user_level', // 级别字典
|
'sys_user_position' // 职位字典
|
])
|
|
// 分页配置
|
const pagination = reactive({
|
current: 1,
|
size: 10,
|
total: 0
|
})
|
|
// 表单数据
|
const form = reactive({
|
department: '',
|
name: '',
|
employeeId: '',
|
status: '',
|
level: '',
|
position: ''
|
})
|
|
// 表单验证规则
|
const rules = {
|
department: [
|
{ required: true, message: '请输入部门', trigger: 'blur' }
|
],
|
name: [
|
{ required: true, message: '请输入姓名', trigger: 'blur' }
|
],
|
employeeId: [
|
{ required: true, message: '请输入工号', trigger: 'blur' }
|
]
|
}
|
|
// 动态表单项
|
const dynamicFormItems = computed(() => {
|
// 这里可以根据字典数据动态生成表单项
|
return [
|
{
|
label: '状态',
|
value: 'status',
|
options: [
|
{ label: '启用', value: '1' },
|
{ label: '禁用', value: '0' }
|
]
|
},
|
{
|
label: '级别',
|
value: 'level',
|
options: [
|
{ label: '初级', value: '1' },
|
{ label: '中级', value: '2' },
|
{ label: '高级', value: '3' }
|
]
|
},
|
{
|
label: '职位',
|
value: 'position',
|
options: [
|
{ label: '员工', value: '1' },
|
{ label: '主管', value: '2' },
|
{ label: '经理', value: '3' }
|
]
|
}
|
]
|
})
|
|
// 组件引用
|
const dynamicTableRef = ref(null)
|
const formRef = ref(null)
|
|
// 事件处理函数
|
const handleSearch = () => {
|
// 实现搜索逻辑
|
console.log('搜索条件:', searchForm)
|
ElMessage.success('搜索功能待实现')
|
}
|
|
const handleReset = () => {
|
searchForm.department = ''
|
searchForm.name = ''
|
}
|
|
const handleAdd = () => {
|
dialogTitle.value = '新增员工'
|
editIndex.value = -1
|
resetForm()
|
dialogVisible.value = true
|
}
|
|
const handleEdit = (row, index) => {
|
dialogTitle.value = '编辑员工'
|
editIndex.value = index
|
Object.assign(form, row)
|
dialogVisible.value = true
|
}
|
|
const handleDelete = async (row, index) => {
|
try {
|
await ElMessageBox.confirm('确定要删除这条记录吗？', '提示', {
|
type: 'warning'
|
})
|
|
tableData.value.splice(index, 1)
|
ElMessage.success('删除成功')
|
} catch (error) {
|
// 用户取消删除
|
}
|
}
|
|
const handleSelectionChange = (selection) => {
|
selectedRows.value = selection
|
}
|
|
const handleSelectChange = (row, prop, value) => {
|
console.log('选择变化:', row, prop, value)
|
// 可以在这里处理数据更新逻辑
|
}
|
|
const handleInputChange = (row, prop, value) => {
|
console.log('输入变化:', row, prop, value)
|
// 可以在这里处理数据更新逻辑
|
}
|
|
const handleSizeChange = (size) => {
|
pagination.size = size
|
// 重新加载数据
|
}
|
|
const handleCurrentChange = (current) => {
|
pagination.current = current
|
// 重新加载数据
|
}
|
|
const handleSubmit = async () => {
|
try {
|
await formRef.value.validate()
|
|
if (editIndex.value === -1) {
|
// 新增
|
const newRow = {
|
id: Date.now(),
|
...form
|
}
|
tableData.value.push(newRow)
|
ElMessage.success('新增成功')
|
} else {
|
// 编辑
|
Object.assign(tableData.value[editIndex.value], form)
|
ElMessage.success('编辑成功')
|
}
|
|
dialogVisible.value = false
|
} catch (error) {
|
console.error('表单验证失败:', error)
|
}
|
}
|
|
const resetForm = () => {
|
Object.assign(form, {
|
department: '',
|
name: '',
|
employeeId: '',
|
status: '',
|
level: '',
|
position: ''
|
})
|
formRef.value?.resetFields()
|
}
|
|
// 组件挂载时初始化数据
|
onMounted(() => {
|
pagination.total = tableData.value.length
|
})
|
</script>
|
|
<style scoped>
|
.app-container {
|
padding: 20px;
|
}
|
|
.search-form {
|
margin-bottom: 20px;
|
padding: 20px;
|
background-color: #f5f5f5;
|
border-radius: 4px;
|
}
|
|
.table-container {
|
background-color: #fff;
|
border-radius: 4px;
|
padding: 20px;
|
}
|
|
.dialog-footer {
|
text-align: right;
|
}
|
</style>
|
