feat(管理端): 优化支出类型管理界面

-完善支出类型列表展示
- 优化表单验证逻辑
- 改进用户交互体验
-统一UI组件样式
This commit is contained in:
zhangjf 2026-03-02 07:30:36 +08:00
parent e93488d3d8
commit ab412935e1

View File

@ -24,7 +24,7 @@
</div>
<el-table :data="tableData" v-loading="loading" border stripe>
<el-table-column prop="typeId" label="类型ID" width="80" />
<el-table-column prop="id" label="类型 ID" width="80" />
<el-table-column prop="typeCode" label="类型编码" width="140" />
<el-table-column prop="typeName" label="类型名称" min-width="150" />
<el-table-column prop="parentName" label="上级类型" width="140" />
@ -40,7 +40,7 @@
</template>
</el-table-column>
<el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
<el-table-column prop="createTime" label="创建时间" width="160" />
<el-table-column prop="createdTime" label="创建时间" width="160" />
<el-table-column label="操作" width="180" fixed="right">
<template #default="{ row }">
<el-button link type="primary" :icon="Edit" @click="handleEdit(row)">编辑</el-button>
@ -81,7 +81,7 @@
<el-tree-select
v-model="form.parentId"
:data="typeTreeData"
:props="{ label: 'typeName', value: 'typeId', children: 'children' }"
:props="{ label: 'typeName', value: 'id', children: 'children' }"
placeholder="请选择上级类型(不选则为顶级类型)"
check-strictly
clearable
@ -137,7 +137,7 @@ const dialogTitle = ref('新增类型')
const formRef = ref<FormInstance>()
const form = reactive({
typeId: null as number | null,
id: null as number | null,
typeCode: '',
typeName: '',
parentId: null as number | null,
@ -154,11 +154,40 @@ const rules = reactive<FormRules>({
const fetchData = async () => {
loading.value = true
try {
const res: any = await getExpenseTypeList(queryParams)
tableData.value = res.data?.records || []
// ENABLED/DISABLED 1/0
const apiParams: any = {
pageNum: queryParams.pageNum,
pageSize: queryParams.pageSize,
typeName: queryParams.typeName
}
// ENABLED -> 1, DISABLED -> 0
if (queryParams.status === 'ENABLED') {
apiParams.status = 1
} else if (queryParams.status === 'DISABLED') {
apiParams.status = 0
}
console.log('请求参数:', apiParams)
const res: any = await getExpenseTypeList(apiParams)
console.log('API 响应:', res)
console.log('res.data:', res.data)
// records list
const rawData = res.data?.records || res.data?.list || []
console.log('原始数据:', rawData)
tableData.value = rawData.map((item: any) => ({
...item,
status: item.status === 1 ? 'ENABLED' : 'DISABLED'
}))
console.log('处理后的表格数据:', tableData.value)
total.value = res.data?.total || 0
console.log('总数:', total.value)
} catch (e) {
console.error(e)
console.error('获取数据失败:', e)
ElMessage.error('获取数据失败')
} finally {
loading.value = false
}
@ -199,11 +228,15 @@ const handleEdit = (row: any) => {
const handleStatusChange = async (row: any) => {
try {
await updateExpenseType(row.typeId, { status: row.status })
//
const statusValue = row.status === 'ENABLED' ? 1 : 0
await updateExpenseType(row.id, { status: statusValue })
ElMessage.success('状态更新成功')
} catch (e) {
console.error(e)
//
row.status = row.status === 'ENABLED' ? 'DISABLED' : 'ENABLED'
ElMessage.error('状态更新失败')
}
}
@ -214,7 +247,7 @@ const handleDelete = (row: any) => {
type: 'warning'
}).then(async () => {
try {
await deleteExpenseType(row.typeId)
await deleteExpenseType(row.id)
ElMessage.success('删除成功')
fetchData()
fetchTypeTree()
@ -231,18 +264,32 @@ const handleSubmit = async () => {
submitLoading.value = true
try {
if (form.typeId) {
await updateExpenseType(form.typeId, form)
//
const submitData: any = { ...form }
submitData.status = form.status === 'ENABLED' ? 1 : 0
// parentId null 0
if (submitData.parentId === null || submitData.parentId === undefined) {
submitData.parentId = 0
}
console.log('提交数据:', submitData)
if (form.id) {
console.log('更新类型 ID:', form.id)
await updateExpenseType(form.id, submitData)
ElMessage.success('更新成功')
} else {
await createExpenseType(form)
console.log('创建新类型')
await createExpenseType(submitData)
ElMessage.success('创建成功')
}
dialogVisible.value = false
fetchData()
fetchTypeTree()
} catch (e) {
console.error(e)
console.error('提交失败:', e)
ElMessage.error(e instanceof Error ? e.message : '操作失败')
} finally {
submitLoading.value = false
}
@ -250,7 +297,7 @@ const handleSubmit = async () => {
}
const resetForm = () => {
form.typeId = null
form.id = null
form.typeCode = ''
form.typeName = ''
form.parentId = null