feat(管理端): 优化支出类型管理界面
-完善支出类型列表展示 - 优化表单验证逻辑 - 改进用户交互体验 -统一UI组件样式
This commit is contained in:
parent
e93488d3d8
commit
ab412935e1
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user