<template>
|
<div class="excel-management">
|
<el-card>
|
<template #header>
|
<div class="card-header">
|
<span>交易流水数据管理</span>
|
<div class="header-buttons">
|
<el-button type="warning" :icon="Download" @click="handleDownloadTemplate">下载模版</el-button>
|
<el-upload
|
ref="uploadRef"
|
:show-file-list="false"
|
:before-upload="beforeUpload"
|
:http-request="handleImport"
|
accept=".xlsx,.xls"
|
>
|
<el-button type="success" :icon="Upload">导入数据</el-button>
|
</el-upload>
|
<el-button type="primary" :icon="Plus" @click="handleAdd">新增数据</el-button>
|
</div>
|
</div>
|
</template>
|
|
<el-form :inline="true" :model="searchForm" class="search-form">
|
<el-form-item label="单位">
|
<el-select
|
v-model="searchForm.unitCode"
|
placeholder="请选择单位"
|
clearable
|
filterable
|
style="width: 250px"
|
>
|
<el-option
|
v-for="dept in flatDepartmentList"
|
:key="dept.deptCode"
|
:label="`${dept.deptCode} - ${dept.deptName}`"
|
:value="dept.deptCode"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="交易流水号">
|
<el-input v-model="searchForm.transactionNo" placeholder="请输入交易流水号" clearable />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
|
<el-button :icon="Refresh" @click="handleReset">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<el-table :data="tableData" v-loading="loading" border stripe>
|
<el-table-column prop="sortNo" label="编号" width="80" />
|
<el-table-column prop="seqNo" label="序号" width="80" />
|
<el-table-column prop="secondaryUnit" label="二级单位" width="120" />
|
<el-table-column prop="unitCode" label="单位编码" width="100" />
|
<el-table-column prop="unitName" label="单位名称" width="200" />
|
<el-table-column prop="transactionNo" label="交易流水号" width="150" />
|
<el-table-column prop="summary" label="摘要" width="200" />
|
<el-table-column prop="amount" label="流水金额" width="120">
|
<template #default="{ row }">
|
{{ formatAmount(row.amount) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="accountingPeriod" label="会计期间" width="100" />
|
<el-table-column prop="voucherNo" label="凭证号" width="100" />
|
<el-table-column prop="bpContractNo" label="BIP合同号" width="120" />
|
<el-table-column prop="contractCenterNo" label="合同中心对应合同号" width="170" />
|
<el-table-column prop="bpInvoiceNo" label="BIP发票号" width="120" />
|
<el-table-column prop="gkInvoiceNo" label="百旺系统对应发票号" width="170" />
|
<el-table-column prop="businessRelation" label="四者未关联原因" width="150" />
|
<el-table-column prop="remark" label="备注" width="150" />
|
<!-- <el-table-column prop="status" label="状态" width="80">-->
|
<!-- <template #default="{ row }">-->
|
<!-- <el-tag :type="row.status === 1 ? 'success' : 'danger'">-->
|
<!-- {{ row.status === 1 ? '启用' : '禁用' }}-->
|
<!-- </el-tag>-->
|
<!-- </template>-->
|
<!-- </el-table-column>-->
|
<el-table-column prop="createTime" label="创建时间" width="180" />
|
<el-table-column label="操作" fixed="right" width="150">
|
<template #default="{ row }">
|
<el-button type="primary" link :icon="Edit" @click="handleEdit(row)">编辑</el-button>
|
<el-button type="danger" link :icon="Delete" @click="handleDelete(row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<el-pagination
|
v-model:current-page="pagination.current"
|
v-model:page-size="pagination.size"
|
:page-sizes="[10, 20, 50, 100]"
|
:total="pagination.total"
|
layout="total, sizes, prev, pager, next, jumper"
|
class="pagination"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</el-card>
|
|
<el-dialog
|
v-model="dialogVisible"
|
:title="dialogTitle"
|
width="800px"
|
@close="handleDialogClose"
|
>
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="150px">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="编号" prop="sortNo">
|
<el-input v-model="form.sortNo" placeholder="请输入编号" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="序号" prop="seqNo">
|
<el-input v-model="form.seqNo" placeholder="请输入序号" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="二级单位" prop="secondaryUnit">
|
<el-input v-model="form.secondaryUnit" placeholder="请输入二级单位" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="单位编码" prop="unitCode">
|
<el-input v-model="form.unitCode" placeholder="请输入单位编码" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item label="单位名称" prop="unitName">
|
<el-input v-model="form.unitName" placeholder="请输入单位名称" />
|
</el-form-item>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="交易流水号" prop="transactionNo">
|
<el-input v-model="form.transactionNo" placeholder="请输入交易流水号" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="流水金额" prop="amount">
|
<el-input v-model="form.amount" placeholder="请输入流水金额" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item label="摘要" prop="summary">
|
<el-input v-model="form.summary" placeholder="请输入摘要" />
|
</el-form-item>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="会计期间" prop="accountingPeriod">
|
<el-input v-model="form.accountingPeriod" placeholder="请输入会计期间" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="凭证号" prop="voucherNo">
|
<el-input v-model="form.voucherNo" placeholder="请输入凭证号" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="BP合同号" prop="bpContractNo">
|
<el-input v-model="form.bpContractNo" placeholder="请输入BIP合同号" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="合同中心对应合同号" prop="contractCenterNo">
|
<el-input v-model="form.contractCenterNo" placeholder="请输入合同中心对应合同号" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="BP发票号" prop="bpInvoiceNo">
|
<el-input v-model="form.bpInvoiceNo" placeholder="请输入BIP发票号" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="古控系统对应发票号" prop="gkInvoiceNo">
|
<el-input v-model="form.gkInvoiceNo" placeholder="请输入百旺系统对应发票号" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="业务关联关系" prop="businessRelation">
|
<el-input v-model="form.businessRelation" placeholder="请输入四者未关联原因" />
|
</el-form-item>
|
</el-col>
|
<!-- <el-col :span="12">-->
|
<!-- <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-col>-->
|
</el-row>
|
<el-form-item label="备注" prop="remark">
|
<el-input v-model="form.remark" type="textarea" 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, computed} from 'vue'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { getDepartmentTree } from '@/api/department'
|
import { Plus, Edit, Delete, Search, Refresh, Upload, Download } from '@element-plus/icons-vue'
|
import { getExcelPage, createExcel, updateExcel, deleteExcel, importExcel, downloadTemplate } from '@/api/excel'
|
|
const loading = ref(false)
|
const tableData = ref([])
|
const dialogVisible = ref(false)
|
const dialogTitle = ref('')
|
const formRef = ref(null)
|
const uploadRef = ref(null)
|
const departmentList = ref([])
|
|
const searchForm = reactive({
|
unitName: '',
|
unitCode: '',
|
transactionNo: '',
|
accountingPeriod: ''
|
})
|
|
const pagination = reactive({
|
current: 1,
|
size: 10,
|
total: 0
|
})
|
|
const form = reactive({
|
id: null,
|
sortNo: null,
|
seqNo: null,
|
secondaryUnit: '',
|
unitCode: '',
|
unitName: '',
|
transactionNo: '',
|
summary: '',
|
amount: null,
|
accountingPeriod: '',
|
voucherNo: '',
|
bpContractNo: '',
|
contractCenterNo: '',
|
bpInvoiceNo: '',
|
gkInvoiceNo: '',
|
businessRelation: '',
|
remark: '',
|
status: 1
|
})
|
|
const rules = {
|
unitName: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
|
transactionNo: [{ required: true, message: '请输入交易流水号', trigger: 'blur' }]
|
}
|
|
const flatDepartmentList = computed(() => {
|
const flatten = (list) => {
|
let result = []
|
list.forEach(item => {
|
result.push(item)
|
if (item.children && item.children.length > 0) {
|
result = result.concat(flatten(item.children))
|
}
|
})
|
return result
|
}
|
return flatten(departmentList.value)
|
})
|
|
const fetchDepartmentList = async () => {
|
try {
|
const res = await getDepartmentTree()
|
departmentList.value = buildTree(res.data)
|
} catch (error) {
|
console.error('获取部门列表失败:', error)
|
}
|
}
|
|
const buildTree = (list) => {
|
const map = {}
|
const roots = []
|
|
list.forEach(item => {
|
map[item.deptCode] = { ...item, children: [] }
|
})
|
|
list.forEach(item => {
|
const parent = map[item.parentCode]
|
if (parent) {
|
parent.children.push(map[item.deptCode])
|
} else {
|
roots.push(map[item.deptCode])
|
}
|
})
|
|
const cleanEmptyChildren = (nodes) => {
|
nodes.forEach(node => {
|
if (node.children && node.children.length === 0) {
|
delete node.children
|
} else {
|
cleanEmptyChildren(node.children)
|
}
|
})
|
}
|
|
cleanEmptyChildren(roots)
|
return roots
|
}
|
|
const formatAmount = (amount) => {
|
if (amount === null || amount === undefined) return ''
|
return Number(amount).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
}
|
|
const fetchData = async () => {
|
loading.value = true
|
try {
|
const res = await getExcelPage({
|
current: pagination.current,
|
size: pagination.size,
|
...searchForm
|
})
|
tableData.value = res.data.records
|
pagination.total = res.data.total
|
} catch (error) {
|
console.error('获取数据列表失败:', error)
|
} finally {
|
loading.value = false
|
}
|
}
|
|
const handleSearch = () => {
|
pagination.current = 1
|
fetchData()
|
}
|
|
const handleReset = () => {
|
searchForm.unitName = ''
|
searchForm.transactionNo = ''
|
searchForm.accountingPeriod = ''
|
handleSearch()
|
}
|
|
const handleSizeChange = () => {
|
fetchData()
|
}
|
|
const handleCurrentChange = () => {
|
fetchData()
|
}
|
|
const handleAdd = () => {
|
dialogTitle.value = '新增数据'
|
resetForm()
|
dialogVisible.value = true
|
}
|
|
const handleEdit = (row) => {
|
dialogTitle.value = '编辑数据'
|
resetForm()
|
Object.assign(form, row)
|
dialogVisible.value = true
|
}
|
|
const handleDelete = async (row) => {
|
try {
|
await ElMessageBox.confirm('确定要删除该数据吗？', '提示', {
|
type: 'warning'
|
})
|
await deleteExcel(row.id)
|
ElMessage.success('删除成功')
|
fetchData()
|
} catch (error) {
|
if (error !== 'cancel') {
|
console.error('删除数据失败:', error)
|
}
|
}
|
}
|
|
const handleSubmit = async () => {
|
if (!formRef.value) return
|
|
await formRef.value.validate(async (valid) => {
|
if (valid) {
|
try {
|
if (form.id) {
|
await updateExcel(form)
|
ElMessage.success('修改成功')
|
} else {
|
await createExcel(form)
|
ElMessage.success('新增成功')
|
}
|
dialogVisible.value = false
|
fetchData()
|
} catch (error) {
|
console.error('保存数据失败:', error)
|
}
|
}
|
})
|
}
|
|
const handleDialogClose = () => {
|
formRef.value?.resetFields()
|
}
|
|
const resetForm = () => {
|
form.id = null
|
form.sortNo = null
|
form.seqNo = null
|
form.secondaryUnit = ''
|
form.unitCode = ''
|
form.unitName = ''
|
form.transactionNo = ''
|
form.summary = ''
|
form.amount = null
|
form.accountingPeriod = ''
|
form.voucherNo = ''
|
form.bpContractNo = ''
|
form.contractCenterNo = ''
|
form.bpInvoiceNo = ''
|
form.gkInvoiceNo = ''
|
form.businessRelation = ''
|
form.remark = ''
|
form.status = 1
|
}
|
|
const beforeUpload = (file) => {
|
const isExcel = file.name.endsWith('.xlsx') || file.name.endsWith('.xls')
|
if (!isExcel) {
|
ElMessage.error('只能上传Excel文件')
|
return false
|
}
|
const maxSize = 100 * 1024 * 1024
|
if (file.size > maxSize) {
|
ElMessage.error('文件大小不能超过100MB')
|
return false
|
}
|
return true
|
}
|
|
const handleImport = async ({ file }) => {
|
const loadingInstance = ElMessage({
|
message: '正在导入数据，请稍候...',
|
type: 'info',
|
duration: 0
|
})
|
try {
|
const res = await importExcel(file)
|
loadingInstance.close()
|
ElMessage.success(res.data)
|
fetchData()
|
} catch (error) {
|
loadingInstance.close()
|
console.error('导入数据失败:', error)
|
}
|
}
|
|
const handleDownloadTemplate = async () => {
|
try {
|
const res = await downloadTemplate()
|
const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
|
const url = window.URL.createObjectURL(blob)
|
const link = document.createElement('a')
|
link.href = url
|
link.download = '交易流水数据导入模版.xlsx'
|
link.click()
|
window.URL.revokeObjectURL(url)
|
} catch (error) {
|
console.error('下载模版失败:', error)
|
}
|
}
|
|
onMounted(() => {
|
fetchDepartmentList()
|
fetchData()
|
})
|
</script>
|
|
<style scoped>
|
.excel-management {
|
padding: 20px;
|
}
|
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.header-buttons {
|
display: flex;
|
gap: 10px;
|
}
|
|
.search-form {
|
margin-bottom: 20px;
|
}
|
|
.pagination {
|
margin-top: 20px;
|
justify-content: flex-end;
|
}
|
</style>
|
