<template>
|
<div class="app-container">
|
<!-- 搜索区 -->
|
<div class="search_form">
|
<el-form :inline="true" :model="searchForm">
|
<el-form-item label="资金类型：">
|
<el-select v-model="searchForm.typeText" placeholder="请选择" clearable style="width: 150px">
|
<el-option label="收入" value="收入" />
|
<el-option label="支出" value="支出" />
|
<el-option label="内部转账" value="内部转账" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="账户：">
|
<el-input v-model="searchForm.account" placeholder="请输入账户" clearable style="width: 160px" />
|
</el-form-item>
|
<!-- <el-form-item label="日期：">
|
<el-date-picker
|
v-model="searchForm.dateRange"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
value-format="YYYY-MM-DD"
|
format="YYYY-MM-DD"
|
clearable
|
/>
|
</el-form-item> -->
|
<el-form-item>
|
<el-button type="primary" @click="handleQuery">搜索</el-button>
|
<el-button @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<!-- 操作区 -->
|
<div class="actions">
|
<el-button type="primary" @click="openDialog('add')">新增</el-button>
|
<el-button type="danger" plain @click="handleDelete">删除</el-button>
|
</div>
|
|
<!-- 表格 -->
|
<el-table
|
:data="tableData"
|
border
|
v-loading="tableLoading"
|
@selection-change="handleSelectionChange"
|
style="width: 100%"
|
height="calc(100vh - 280px)"
|
:row-key="row => row.id"
|
>
|
<el-table-column type="selection" width="55" align="center" />
|
<el-table-column type="index" label="序号" width="60" align="center" />
|
<el-table-column prop="accountDate" label="日期" width="130" show-overflow-tooltip />
|
<el-table-column prop="typeText" label="资金类型" width="120" show-overflow-tooltip />
|
<el-table-column prop="amount" label="金额(元)" width="120" show-overflow-tooltip />
|
<el-table-column prop="account" label="账户" width="160" show-overflow-tooltip />
|
<el-table-column prop="counterparty" label="往来单位" width="180" show-overflow-tooltip />
|
<el-table-column prop="remark" label="备注" show-overflow-tooltip />
|
<el-table-column fixed="right" label="操作" width="150" align="center">
|
<template #default="scope">
|
<el-button link type="primary" size="small" @click="openDialog('edit', scope.row)">编辑</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<pagination
|
v-show="total > 0"
|
:total="total"
|
layout="total, sizes, prev, pager, next, jumper"
|
:page="page.current"
|
:limit="page.size"
|
@pagination="paginationChange"
|
/>
|
|
<!-- 弹窗 -->
|
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="520px" @close="resetForm">
|
<el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
|
<el-form-item label="日期：" prop="accountDate">
|
<el-date-picker v-model="form.accountDate" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" style="width: 100%" />
|
</el-form-item>
|
<el-form-item label="资金类型：" prop="typeText">
|
<el-select v-model="form.typeText" placeholder="请选择" style="width: 100%">
|
<el-option label="收入" value="收入" />
|
<el-option label="支出" value="支出" />
|
<el-option label="内部转账" value="内部转账" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="金额(元)：" prop="amount">
|
<el-input-number v-model="form.amount" :min="0" :precision="2" :step="100" style="width: 100%" />
|
</el-form-item>
|
<el-form-item label="账户：" prop="account">
|
<el-input v-model="form.account" placeholder="请输入账户" />
|
</el-form-item>
|
<el-form-item label="往来单位：" prop="counterparty">
|
<el-input v-model="form.counterparty" placeholder="请输入往来单位" />
|
</el-form-item>
|
<el-form-item label="备注：">
|
<el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="submitForm">确认</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted } from 'vue'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import pagination from '@/components/PIMTable/Pagination.vue'
|
import {
|
getFundsPage,
|
addFunds,
|
updateFunds,
|
deleteFunds
|
} from '@/api/financialManagement/fundsManagement.js'
|
|
const tableData = ref([])
|
const tableLoading = ref(false)
|
const selectedRows = ref([])
|
const dialogVisible = ref(false)
|
const dialogTitle = ref('新增')
|
const formRef = ref(null)
|
|
const page = reactive({
|
current: 1,
|
size: 100
|
})
|
const total = ref(0)
|
|
const searchForm = reactive({
|
typeText: '',
|
account: '',
|
dateRange: []
|
})
|
|
const form = reactive({
|
id: null,
|
accountDate: '',
|
typeText: '',
|
amount: null,
|
account: '',
|
counterparty: '',
|
remark: ''
|
})
|
|
const rules = {
|
accountDate: [{ required: true, message: '请选择日期', trigger: 'change' }],
|
typeText: [{ required: true, message: '请选择资金类型', trigger: 'change' }],
|
amount: [{ required: true, message: '请输入金额', trigger: 'blur' }],
|
account: [{ required: true, message: '请输入账户', trigger: 'blur' }]
|
}
|
|
const typeTextMap = {
|
income: '收入',
|
expense: '支出',
|
transfer: '内部转账'
|
}
|
|
// 获取列表
|
const getList = () => {
|
tableLoading.value = true
|
const params = {
|
...searchForm,
|
current: page.current,
|
size: page.size
|
}
|
// 兼容后端字段：若后端使用 typeText，请直接传递；若使用 type，请与后端对齐
|
if (params.dateRange && params.dateRange.length === 2) {
|
params.beginDate = params.dateRange[0]
|
params.endDate = params.dateRange[1]
|
}
|
delete params.dateRange
|
|
getFundsPage(params)
|
.then(res => {
|
if (res.code === 200) {
|
tableData.value = (res.data?.records || []).map(item => ({
|
...item,
|
typeText: item.typeText || typeTextMap[item.typeText] || item.typeText
|
}))
|
total.value = res.data?.total || 0
|
}
|
})
|
.finally(() => {
|
tableLoading.value = false
|
})
|
}
|
|
const handleQuery = () => {
|
page.current = 1
|
getList()
|
}
|
const resetQuery = () => {
|
searchForm.typeText = ''
|
searchForm.account = ''
|
searchForm.dateRange = []
|
handleQuery()
|
}
|
const paginationChange = (obj) => {
|
page.current = obj.page
|
page.size = obj.limit
|
getList()
|
}
|
|
const handleSelectionChange = (rows) => {
|
selectedRows.value = rows
|
}
|
|
const openDialog = (type, row) => {
|
dialogTitle.value = type === 'add' ? '新增资金记录' : '编辑资金记录'
|
if (type === 'edit' && row) {
|
Object.assign(form, row)
|
} else {
|
resetForm()
|
}
|
dialogVisible.value = true
|
}
|
|
const resetForm = () => {
|
Object.assign(form, {
|
id: null,
|
accountDate: '',
|
typeText: '',
|
amount: null,
|
account: '',
|
counterparty: '',
|
remark: ''
|
})
|
}
|
|
const submitForm = () => {
|
formRef.value?.validate(valid => {
|
if (!valid) return
|
const payload = { ...form }
|
const request = payload.id ? updateFunds(payload) : addFunds(payload)
|
request
|
.then(res => {
|
if (res.code === 200) {
|
ElMessage.success('提交成功')
|
dialogVisible.value = false
|
getList()
|
}
|
})
|
.catch(err => {
|
ElMessage.error(err.msg || '提交失败')
|
})
|
})
|
}
|
|
const handleDelete = () => {
|
if (!selectedRows.value.length) {
|
ElMessage.warning('请选择要删除的记录')
|
return
|
}
|
ElMessageBox.confirm('确认删除选中记录吗？', '提示', {
|
confirmButtonText: '确认',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
const ids = selectedRows.value.map(r => r.id)
|
deleteFunds(ids).then(res => {
|
if (res.code === 200) {
|
ElMessage.success('删除成功')
|
getList()
|
selectedRows.value = []
|
}
|
}).catch(err => {
|
ElMessage.error(err.msg || '删除失败')
|
})
|
}).catch(() => {})
|
}
|
|
onMounted(() => {
|
getList()
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.app-container {
|
padding: 20px;
|
|
.search_form {
|
background: #fff;
|
padding: 16px;
|
border-radius: 6px;
|
margin-bottom: 16px;
|
}
|
|
.actions {
|
margin-bottom: 12px;
|
}
|
}
|
</style>
|
