|
|
<template>
|
|
|
<div class="container">
|
|
|
<!-- 查询配置 -->
|
|
|
<div>
|
|
|
<div ref="lxHeader">
|
|
|
<LxHeader :custom="true" icon="el-icon-s-order" text="执行科室预算分解表提交" style="margin-bottom: 10px; border: 0px;">
|
|
|
<div>
|
|
|
<div class="search-panel">
|
|
|
<div class="filters">
|
|
|
<el-select
|
|
|
v-model="searchFields.year_id"
|
|
|
placeholder="选择预算年度"
|
|
|
style="width: 150px"
|
|
|
@change="load"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in yearOptions"
|
|
|
:key="item.value"
|
|
|
:label="item.year + '年'"
|
|
|
:value="item.value"
|
|
|
/>
|
|
|
</el-select>
|
|
|
|
|
|
<el-select
|
|
|
v-model="searchFields.status"
|
|
|
placeholder="选择状态"
|
|
|
style="width: 150px"
|
|
|
@change="load"
|
|
|
clearable
|
|
|
>
|
|
|
<el-option label="待提交" value="pending" />
|
|
|
<el-option label="已提交" value="submitted" />
|
|
|
<el-option label="已审核" value="reviewed" />
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<div class="actions">
|
|
|
<Button type="primary" @click="load">查询</Button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</LxHeader>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<!-- 分配给本科室的预算包列表 -->
|
|
|
<el-table
|
|
|
ref="packageTable"
|
|
|
:data="packageData"
|
|
|
:height="tableHeight"
|
|
|
class="v-table"
|
|
|
style="width: 100%; margin-bottom: 20px;"
|
|
|
border
|
|
|
v-loading="loading"
|
|
|
row-key="id"
|
|
|
>
|
|
|
<el-table-column type="index" align="center" label="序号" width="60" />
|
|
|
|
|
|
<el-table-column prop="budget_year" label="预算年度" width="100" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
<el-tag type="primary">
|
|
|
{{ scope.row.budget_year ? scope.row.budget_year.year + '年' : '-' }}
|
|
|
</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="parent_name" label="上级包名称" min-width="200">
|
|
|
<template slot-scope="scope">
|
|
|
<span style="color: #909399; font-size: 12px;">
|
|
|
{{ scope.row.top_name || '-' }} - {{ scope.row.parent_name || '-' }}
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="executing_department" label="执行部门" min-width="150">
|
|
|
<template slot-scope="scope">
|
|
|
<span style="color: #606266; font-size: 13px;">
|
|
|
{{ scope.row.department.name || '-' }}
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="allocated_amount" label="分配金额" width="160" align="right">
|
|
|
<template slot-scope="scope">
|
|
|
<span style="color: #409EFF; font-weight: bold;">
|
|
|
{{ formatCurrency(scope.row.allocated_amount) }} 万元
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="submitted_amount" label="提交金额" width="160" align="right">
|
|
|
<template slot-scope="scope">
|
|
|
<span style="color: #67C23A; font-weight: bold;">
|
|
|
{{ formatCurrency(scope.row.submission ? scope.row.submission.total_amount : 0) }} 万元
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="submission_status" label="提交状态" width="120" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
<el-tag :type="getStatusTagType(scope.row.submission_status)">
|
|
|
{{ getStatusText(scope.row.submission_status) }}
|
|
|
</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="submission_date" label="提交时间" width="180" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
{{ scope.row.submission_date ? formatDate(scope.row.submission_date) : '-' }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column fixed="right" label="操作" width="200">
|
|
|
<template slot-scope="scope">
|
|
|
<Button
|
|
|
v-if="!scope.row.submission"
|
|
|
type="primary"
|
|
|
@click="openSubmissionForm(scope.row)"
|
|
|
size="small"
|
|
|
style="margin-right: 5px;"
|
|
|
>
|
|
|
填写分解表
|
|
|
</Button>
|
|
|
|
|
|
<Button
|
|
|
v-if="scope.row.submission"
|
|
|
type="warning"
|
|
|
@click="editSubmissionForm(scope.row)"
|
|
|
size="small"
|
|
|
style="margin-right: 5px;"
|
|
|
>
|
|
|
修改分解表
|
|
|
</Button>
|
|
|
|
|
|
<Button
|
|
|
v-if="scope.row.submission"
|
|
|
type="info"
|
|
|
@click="viewSubmissionForm(scope.row)"
|
|
|
size="small"
|
|
|
>
|
|
|
查看详情
|
|
|
</Button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
|
|
|
<!-- 分解表填写对话框 -->
|
|
|
<el-dialog
|
|
|
:title="dialogTitle"
|
|
|
:visible.sync="submissionDialogVisible"
|
|
|
width="95%"
|
|
|
:close-on-click-modal="false"
|
|
|
top="5vh"
|
|
|
custom-class="submission-dialog"
|
|
|
>
|
|
|
<budget-submission-form
|
|
|
v-if="submissionDialogVisible"
|
|
|
:package-data="currentPackage"
|
|
|
:mode="submissionMode"
|
|
|
@submit="handleSubmissionSubmit"
|
|
|
@cancel="submissionDialogVisible = false"
|
|
|
/>
|
|
|
</el-dialog>
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import LxHeader from '@/components/LxHeader/index.vue'
|
|
|
import { getBudgetCollectionYearOptions } from '@/api/budget/budgetCollectionYear.js'
|
|
|
import { getDepartmentPackages, submitBudgetDecomposition } from '@/api/budget/departmentSubmission.js'
|
|
|
import BudgetSubmissionForm from './components/BudgetSubmissionForm.vue'
|
|
|
|
|
|
export default {
|
|
|
name: 'DepartmentSubmission',
|
|
|
components: {
|
|
|
LxHeader,
|
|
|
BudgetSubmissionForm
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
loading: false,
|
|
|
tableHeight: 0,
|
|
|
searchFields: {
|
|
|
year_id: '',
|
|
|
status: ''
|
|
|
},
|
|
|
packageData: [],
|
|
|
yearOptions: [],
|
|
|
submissionDialogVisible: false,
|
|
|
currentPackage: null,
|
|
|
submissionMode: 'create' // create, edit, view
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
dialogTitle() {
|
|
|
const titles = {
|
|
|
create: '填写预算分解表',
|
|
|
edit: '修改预算分解表',
|
|
|
view: '查看预算分解表'
|
|
|
}
|
|
|
return titles[this.submissionMode] || '预算分解表'
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
this.initLoad()
|
|
|
this.loadYearOptions()
|
|
|
},
|
|
|
methods: {
|
|
|
initLoad() {
|
|
|
const clientHeight = document.documentElement.clientHeight
|
|
|
const lxHeaderHeight = 140
|
|
|
const paginationHeight = 60
|
|
|
const topHeight = 50
|
|
|
const tableHeight = clientHeight - lxHeaderHeight - topHeight - paginationHeight - 20
|
|
|
this.tableHeight = tableHeight
|
|
|
},
|
|
|
|
|
|
async loadYearOptions() {
|
|
|
try {
|
|
|
const response = await getBudgetCollectionYearOptions()
|
|
|
console.log('年度选项接口响应:', response)
|
|
|
|
|
|
if (response) {
|
|
|
let yearData = response
|
|
|
|
|
|
// 如果data是字符串，尝试解析JSON
|
|
|
if (typeof yearData === 'string') {
|
|
|
try {
|
|
|
yearData = JSON.parse(yearData)
|
|
|
} catch (e) {
|
|
|
console.error('解析年度选项JSON失败:', e)
|
|
|
this.$message.error('年度选项数据格式错误')
|
|
|
return
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (Array.isArray(yearData)) {
|
|
|
this.yearOptions = yearData
|
|
|
console.log('年度选项加载成功:', this.yearOptions)
|
|
|
|
|
|
// 默认选择第一个年度
|
|
|
if (this.yearOptions.length > 0 && !this.searchFields.year_id) {
|
|
|
this.searchFields.year_id = this.yearOptions[0].value
|
|
|
this.$nextTick(() => {
|
|
|
this.load()
|
|
|
})
|
|
|
} else if (this.yearOptions.length === 0) {
|
|
|
this.$message.warning('未找到可用的预算年度，请联系管理员')
|
|
|
}
|
|
|
} else {
|
|
|
console.warn('年度选项数据不是数组格式:', yearData)
|
|
|
this.$message.error('年度选项数据格式错误')
|
|
|
}
|
|
|
} else {
|
|
|
console.warn('年度选项接口响应异常:', response)
|
|
|
this.$message.error('年度选项接口返回格式错误')
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('加载年度选项失败:', error)
|
|
|
this.$message.error('加载年度选项失败，请刷新页面重试')
|
|
|
}
|
|
|
},
|
|
|
|
|
|
async load() {
|
|
|
if (!this.searchFields.year_id) {
|
|
|
this.$message.warning('请选择预算年度')
|
|
|
this.packageData = []
|
|
|
return
|
|
|
}
|
|
|
|
|
|
this.loading = true
|
|
|
try {
|
|
|
const params = {
|
|
|
...this.searchFields
|
|
|
}
|
|
|
|
|
|
const response = await getDepartmentPackages(params)
|
|
|
|
|
|
// 根据后端ApiResponse设计判断：code为0表示成功
|
|
|
if (response) {
|
|
|
this.packageData = Array.isArray(response) ? response : []
|
|
|
} else {
|
|
|
this.packageData = []
|
|
|
this.$message.warning(response.msg || '获取预算包列表失败')
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('获取数据失败:', error)
|
|
|
|
|
|
if (error.response && error.response.data) {
|
|
|
const errorMessage = error.response.data.message || error.response.data.error || '获取数据失败'
|
|
|
this.$message.error(errorMessage)
|
|
|
} else {
|
|
|
this.$message.error('获取数据失败，请检查网络连接')
|
|
|
}
|
|
|
|
|
|
this.packageData = []
|
|
|
} finally {
|
|
|
this.loading = false
|
|
|
}
|
|
|
},
|
|
|
|
|
|
openSubmissionForm(packageItem) {
|
|
|
this.currentPackage = { ...packageItem }
|
|
|
this.submissionMode = 'create'
|
|
|
this.submissionDialogVisible = true
|
|
|
// 增加console.log，输出当前表单数据
|
|
|
console.log('表单数据:', this.currentPackage)
|
|
|
},
|
|
|
|
|
|
editSubmissionForm(packageItem) {
|
|
|
this.currentPackage = { ...packageItem }
|
|
|
this.submissionMode = 'edit'
|
|
|
this.submissionDialogVisible = true
|
|
|
// 增加console.log，输出当前表单数据
|
|
|
console.log('编辑表单数据:', this.currentPackage)
|
|
|
},
|
|
|
|
|
|
viewSubmissionForm(packageItem) {
|
|
|
this.currentPackage = { ...packageItem }
|
|
|
this.submissionMode = 'view'
|
|
|
this.submissionDialogVisible = true
|
|
|
},
|
|
|
|
|
|
async handleSubmissionSubmit(submissionData) {
|
|
|
try {
|
|
|
const response = await submitBudgetDecomposition(submissionData)
|
|
|
if (response && response.id) {
|
|
|
this.$message.success('提交成功')
|
|
|
this.submissionDialogVisible = false
|
|
|
this.load() // 重新加载数据
|
|
|
} else {
|
|
|
this.$message.error(response.msg || '提交失败')
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('提交失败:', error)
|
|
|
|
|
|
if (error.response && error.response.data && error.response.data.message) {
|
|
|
this.$message.error(error.response.data.message)
|
|
|
} else {
|
|
|
this.$message.error('提交失败')
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
|
|
|
formatCurrency(amount) {
|
|
|
if (amount === null || amount === undefined || amount === '') return '0.0'
|
|
|
const num = Number(amount)
|
|
|
return isFinite(num)
|
|
|
? num.toLocaleString('zh-CN', { minimumFractionDigits: 0, maximumFractionDigits: 0 })
|
|
|
: '0.0'
|
|
|
},
|
|
|
|
|
|
formatDate(dateStr) {
|
|
|
if (!dateStr) return '-'
|
|
|
const date = new Date(dateStr)
|
|
|
return date.toLocaleDateString('zh-CN') + ' ' + date.toLocaleTimeString('zh-CN', {
|
|
|
hour12: false,
|
|
|
hour: '2-digit',
|
|
|
minute: '2-digit'
|
|
|
})
|
|
|
},
|
|
|
|
|
|
getStatusTagType(status) {
|
|
|
const typeMap = {
|
|
|
pending: 'warning',
|
|
|
submitted: 'primary',
|
|
|
reviewed: 'success'
|
|
|
}
|
|
|
return typeMap[status] || 'info'
|
|
|
},
|
|
|
|
|
|
getStatusText(status) {
|
|
|
const textMap = {
|
|
|
pending: '待提交',
|
|
|
submitted: '已提交',
|
|
|
reviewed: '已审核'
|
|
|
}
|
|
|
return textMap[status] || '未知'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.container {
|
|
|
padding: 12px 16px 16px 16px;
|
|
|
}
|
|
|
|
|
|
.v-table {
|
|
|
border: 1px solid #e6e6e6;
|
|
|
}
|
|
|
|
|
|
.search-panel {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
gap: 12px;
|
|
|
padding: 12px;
|
|
|
background: #fff;
|
|
|
border: 1px solid #ebeef5;
|
|
|
border-radius: 0;
|
|
|
}
|
|
|
|
|
|
.filters {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 12px;
|
|
|
}
|
|
|
|
|
|
.actions {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
|
|
|
/* 统一表格行高 */
|
|
|
.v-table >>> .el-table__body tr {
|
|
|
height: 50px !important;
|
|
|
}
|
|
|
|
|
|
.v-table >>> .el-table__body tr td {
|
|
|
height: 50px !important;
|
|
|
max-height: 50px !important;
|
|
|
vertical-align: middle !important;
|
|
|
padding: 8px 12px !important;
|
|
|
box-sizing: border-box !important;
|
|
|
}
|
|
|
|
|
|
/* 所有单元格内容的统一处理 */
|
|
|
.v-table >>> .el-table__body tr td .cell {
|
|
|
height: 34px !important;
|
|
|
max-height: 34px !important;
|
|
|
line-height: 18px !important;
|
|
|
overflow: hidden !important;
|
|
|
display: flex !important;
|
|
|
align-items: center !important;
|
|
|
}
|
|
|
|
|
|
/* 确保标签和按钮不会撑开行高 */
|
|
|
.v-table >>> .el-table__body tr td .el-tag {
|
|
|
height: 24px !important;
|
|
|
line-height: 22px !important;
|
|
|
}
|
|
|
|
|
|
.v-table >>> .el-table__body tr td .el-button {
|
|
|
height: 28px !important;
|
|
|
padding: 4px 8px !important;
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<style>
|
|
|
/* 分解表对话框样式 */
|
|
|
.submission-dialog {
|
|
|
margin-top: 5vh !important;
|
|
|
}
|
|
|
|
|
|
.submission-dialog .el-dialog__body {
|
|
|
padding: 10px 20px !important;
|
|
|
max-height: 80vh;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
</style>
|
