feat: 完成支出类型管理模块
后端: - 创建 ExpenseType 实体类(支持树形结构) - 创建 ExpenseTypeMapper 接口 - 创建 ExpenseTypeService 业务逻辑层 - 获取支出类型树(仅启用/包含禁用) - 新增/更新/删除支出类型 - 级联删除子类型 - 自动计算层级 - 状态管理 - 创建 ExpenseTypeController 控制器 前端: - 创建 expenseType.js API 文件 - 创建 expenseType.vue 管理页面 - 树形表格展示 - 支持添加子类型 - 状态启用/禁用切换 - 上级类型选择(el-tree-select) - 添加财务管理模块路由
This commit is contained in:
parent
9c00696baf
commit
8aaf7a15bd
74
fund-admin/src/api/expenseType.js
Normal file
74
fund-admin/src/api/expenseType.js
Normal 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 }
|
||||
})
|
||||
}
|
||||
@ -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: '支出类型' }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
295
fund-admin/src/views/finance/expenseType.vue
Normal file
295
fund-admin/src/views/finance/expenseType.vue
Normal 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
|
||||
Loading…
x
Reference in New Issue
Block a user