feat: 完成支出类型管理模块

后端:
- 创建 ExpenseType 实体类(支持树形结构)
- 创建 ExpenseTypeMapper 接口
- 创建 ExpenseTypeService 业务逻辑层
  - 获取支出类型树(仅启用/包含禁用)
  - 新增/更新/删除支出类型
  - 级联删除子类型
  - 自动计算层级
  - 状态管理
- 创建 ExpenseTypeController 控制器

前端:
- 创建 expenseType.js API 文件
- 创建 expenseType.vue 管理页面
  - 树形表格展示
  - 支持添加子类型
  - 状态启用/禁用切换
  - 上级类型选择(el-tree-select)
- 添加财务管理模块路由
This commit is contained in:
zhangjf 2026-02-15 18:14:21 +08:00
parent 9c00696baf
commit 8aaf7a15bd
4 changed files with 383 additions and 1 deletions

View File

@ -0,0 +1,74 @@
import request from '../utils/request'
/**
* 获取支出类型树仅启用
*/
export const getExpenseTypeTree = () => {
return request({
url: '/proj/api/v1/expense-type/tree',
method: 'get'
})
}
/**
* 获取所有支出类型树包含禁用
*/
export const getAllExpenseTypeTree = () => {
return request({
url: '/proj/api/v1/expense-type/tree/all',
method: 'get'
})
}
/**
* 获取支出类型详情
*/
export const getExpenseTypeById = (typeId) => {
return request({
url: `/proj/api/v1/expense-type/${typeId}`,
method: 'get'
})
}
/**
* 创建支出类型
*/
export const createExpenseType = (data) => {
return request({
url: '/proj/api/v1/expense-type',
method: 'post',
data
})
}
/**
* 更新支出类型
*/
export const updateExpenseType = (typeId, data) => {
return request({
url: `/proj/api/v1/expense-type/${typeId}`,
method: 'put',
data
})
}
/**
* 删除支出类型
*/
export const deleteExpenseType = (typeId) => {
return request({
url: `/proj/api/v1/expense-type/${typeId}`,
method: 'delete'
})
}
/**
* 更新支出类型状态
*/
export const updateExpenseTypeStatus = (typeId, status) => {
return request({
url: `/proj/api/v1/expense-type/${typeId}/status`,
method: 'put',
params: { status }
})
}

View File

@ -94,6 +94,19 @@ const routes = [
meta: { title: '需求工单' }
}
]
},
{
path: 'finance',
name: 'Finance',
meta: { title: '财务管理', icon: 'Money' },
children: [
{
path: 'expense-type',
name: 'ExpenseType',
component: () => import('../views/finance/expenseType.vue'),
meta: { title: '支出类型' }
}
]
}
]
}

View File

@ -0,0 +1,295 @@
<template>
<div class="expense-type-container">
<el-card>
<!-- 操作栏 -->
<el-row style="margin-bottom: 15px;">
<el-button type="primary" @click="handleAdd">新增类型</el-button>
</el-row>
<!-- 树形表格 -->
<el-table
:data="tableData"
row-key="typeId"
border
v-loading="loading"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
default-expand-all
>
<el-table-column prop="typeName" label="类型名称" width="250" />
<el-table-column prop="typeCode" label="类型编码" width="150" />
<el-table-column prop="typeLevel" label="层级" width="80" align="center" />
<el-table-column prop="sortOrder" label="排序" width="80" align="center" />
<el-table-column prop="description" label="描述" min-width="200" />
<el-table-column prop="status" label="状态" width="100" align="center">
<template #default="{ row }">
<el-tag :type="row.status === 1 ? 'success' : 'danger'">
{{ row.status === 1 ? '启用' : '禁用' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="createdTime" label="创建时间" width="180" />
<el-table-column label="操作" width="280" fixed="right">
<template #default="{ row }">
<el-button type="primary" size="small" @click="handleAddChild(row)">添加子类型</el-button>
<el-button type="info" size="small" @click="handleEdit(row)">编辑</el-button>
<el-button
:type="row.status === 1 ? 'warning' : 'success'"
size="small"
@click="handleToggleStatus(row)"
>
{{ row.status === 1 ? '禁用' : '启用' }}
</el-button>
<el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<!-- 新增/编辑对话框 -->
<el-dialog
v-model="dialogVisible"
:title="form.typeId ? '编辑支出类型' : '新增支出类型'"
width="600px"
>
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
<el-form-item label="上级类型" prop="parentId">
<el-tree-select
v-model="form.parentId"
:data="typeTreeOptions"
:props="{ label: 'typeName', value: 'typeId', children: 'children' }"
placeholder="请选择上级类型(留空为一级类型)"
check-strictly
:render-after-expand="false"
clearable
style="width: 100%"
/>
</el-form-item>
<el-form-item label="类型名称" prop="typeName">
<el-input v-model="form.typeName" placeholder="请输入类型名称" />
</el-form-item>
<el-form-item label="类型编码" prop="typeCode">
<el-input v-model="form.typeCode" placeholder="请输入类型编码" />
</el-form-item>
<el-form-item label="排序" prop="sortOrder">
<el-input-number v-model="form.sortOrder" :min="0" style="width: 100%;" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio :value="1">启用</el-radio>
<el-radio :value="0">禁用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="描述" prop="description">
<el-input
v-model="form.description"
type="textarea"
:rows="3"
placeholder="请输入描述"
/>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmit">确定</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
getAllExpenseTypeTree,
createExpenseType,
updateExpenseType,
deleteExpenseType,
updateExpenseTypeStatus
} from '../../api/expenseType'
//
const tableData = ref([])
const loading = ref(false)
//
const typeTreeOptions = ref([])
//
const dialogVisible = ref(false)
const formRef = ref(null)
//
const form = reactive({
typeId: null,
parentId: null,
typeName: '',
typeCode: '',
sortOrder: 0,
status: 1,
description: ''
})
//
const rules = {
typeName: [
{ required: true, message: '请输入类型名称', trigger: 'blur' }
]
}
//
const fetchData = async () => {
loading.value = true
try {
const res = await getAllExpenseTypeTree()
tableData.value = res
//
typeTreeOptions.value = [
{
typeId: 0,
typeName: '无(一级类型)',
children: res
}
]
} catch (error) {
console.error('加载数据失败:', error)
ElMessage.error(error.message || '加载数据失败')
} finally {
loading.value = false
}
}
//
const handleAdd = () => {
Object.assign(form, {
typeId: null,
parentId: null,
typeName: '',
typeCode: '',
sortOrder: 0,
status: 1,
description: ''
})
dialogVisible.value = true
}
//
const handleAddChild = (row) => {
Object.assign(form, {
typeId: null,
parentId: row.typeId,
typeName: '',
typeCode: '',
sortOrder: 0,
status: 1,
description: ''
})
dialogVisible.value = true
}
//
const handleEdit = (row) => {
Object.assign(form, {
typeId: row.typeId,
parentId: row.parentId === 0 ? null : row.parentId,
typeName: row.typeName,
typeCode: row.typeCode,
sortOrder: row.sortOrder,
status: row.status,
description: row.description
})
dialogVisible.value = true
}
//
const handleSubmit = async () => {
if (!formRef.value) return
try {
await formRef.value.validate()
} catch (error) {
ElMessage.warning('请检查表单填写是否完整')
return
}
try {
// parentId null 0 0
const submitData = {
...form,
parentId: form.parentId || 0
}
if (form.typeId) {
await updateExpenseType(form.typeId, submitData)
ElMessage.success('更新成功')
} else {
await createExpenseType(submitData)
ElMessage.success('创建成功')
}
dialogVisible.value = false
await fetchData()
} catch (error) {
console.error('保存失败:', error)
ElMessage.error(error.message || '操作失败')
}
}
//
const handleToggleStatus = async (row) => {
try {
const newStatus = row.status === 1 ? 0 : 1
const statusText = newStatus === 1 ? '启用' : '禁用'
await ElMessageBox.confirm(`确定要${statusText}该类型吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
await updateExpenseTypeStatus(row.typeId, newStatus)
ElMessage.success(`${statusText}成功`)
await fetchData()
} catch (error) {
if (error !== 'cancel') {
console.error('状态更新失败:', error)
ElMessage.error(error.message || '状态更新失败')
}
}
}
//
const handleDelete = async (row) => {
try {
await ElMessageBox.confirm('确定要删除该类型及其所有子类型吗?此操作不可恢复!', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
await deleteExpenseType(row.typeId)
ElMessage.success('删除成功')
await fetchData()
} catch (error) {
if (error !== 'cancel') {
console.error('删除失败:', error)
ElMessage.error(error.message || '删除失败')
}
}
}
//
onMounted(() => {
fetchData()
})
</script>
<style scoped>
.expense-type-container {
padding: 20px;
}
</style>

@ -1 +1 @@
Subproject commit fb2653fb5c2e5c0003168a35655c8fba1f2c32c2
Subproject commit 0dc714d7ebfba87e0108273414f0afa654013235