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: '需求工单' }
|
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