This repository has been archived on 2025-02-05. You can view files and clone it, but cannot push or open issues or pull requests.
cqdevicemgt-ui/src/views/cost/csotSettlement/component/monthRecord.vue

347 lines
12 KiB
Vue
Raw Normal View History

2024-08-13 11:45:31 +08:00
<template>
<!-- 月结记录弹框 -->
<div>
<el-dialog
title="月结记录"
append-to-body
:visible.sync="monthRecordDialogVisible"
:before-close="handleCloseMonthRecordDialog"
width="80%"
>
<el-form inline :model="monthRecordParams" ref="monthRecordFormRef">
<el-form-item label="结算月份" prop="dateMonth">
<el-date-picker
v-model="dateMonth"
type="month"
placeholder="请选择月份"
value-format="yyyy-MM"
@change="onChangeTime"
2024-08-13 11:45:31 +08:00
/>
</el-form-item>
<el-form-item label="费用承担方" prop="costBearingParty">
<el-select
v-model="monthRecordParams.costBearingParty"
clearable
>
2024-08-13 11:45:31 +08:00
<el-option
v-for="item in costBearList"
:key="item.id"
:value="item.value"
:label="item.label"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>查询</el-button
>
<el-button
icon="el-icon-refresh"
size="mini"
@click="resetQuery"
>重置</el-button
>
<el-button
type="primary"
plain
size="mini"
@click="handelExport(null)"
2024-08-13 11:45:31 +08:00
>批量导出</el-button
>
</el-form-item>
</el-form>
<el-table
border
:data="monthRecordList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" align="center" />
<el-table-column
prop="unitName"
align="center"
label="单位名称"
/>
<el-table-column
prop="projectName"
align="center"
label="工程名称"
/>
<el-table-column prop="month" align="center" label="结算月份" />
<el-table-column
prop="costBearingParty"
align="center"
label="费用承担方"
/>
<el-table-column prop="costs" align="center" label="结算金额" />
<el-table-column align="center" label="操作">
<template slot-scope="{ row }">
<el-button type="text" @click="previewDetails(row)"
>明细</el-button
>
<el-button type="text" @click="handelExport(row)"
2024-08-13 11:45:31 +08:00
>导出明细表</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
:total="monthRecordTotal"
:page.sync="monthRecordParams.pageNum"
:limit.sync="monthRecordParams.pageSize"
@pagination="getMonthRecordList"
/>
<!-- 内层弹框 -->
<el-dialog
width="75%"
title="明细"
:visible.sync="innerVisible"
append-to-body
:before-close="handleCloseMInnerDialog"
>
<el-row :gutter="20" class="title-row">
<el-col :span="12">
领用单位{{ monthDetailsInfo.unitName || '' }}
</el-col>
<el-col :span="12" class="pl-col">
月结月份
{{ monthDetailsInfo.month || '' }}</el-col
>
</el-row>
<el-row :gutter="20" class="title-row">
<el-col :span="12">
工程名称{{ monthDetailsInfo.projectName || '' }}
</el-col>
<el-col :span="12" class="pl-col" style="color: red">
费用承担方{{
monthDetailsInfo.costBearingParty || ''
}}
{{
monthDetailsInfo.costBearingParty == '01'
? '(项目)'
: '(分包)'
}}
</el-col>
</el-row>
<el-table border :data="monthDetails" max-height="600">
<el-table-column
label="序号"
align="center"
type="index"
width="55"
/>
<el-table-column
prop="typeName"
label="设备名称"
align="center"
/>
<el-table-column
prop="modelName"
label="规格型号"
align="center"
/>
<el-table-column
prop="nuitName"
label="计量单位"
2024-08-13 11:45:31 +08:00
align="center"
/>
<el-table-column prop="num" label="数量" align="center" />
<el-table-column
prop="leasePrice"
label="台班费单价 (元/天)"
align="center"
/>
<el-table-column
prop="startTime"
label="开始日期"
align="center"
/>
<el-table-column
prop="endTime"
label="结算日期"
align="center"
/>
<el-table-column
prop="leaseDays"
label="结算天数"
align="center"
/>
<el-table-column
prop="costs"
label="结算金额"
align="center"
/>
<el-table-column
prop="realCosts"
label="本月暂记金额(元)"
align="center"
/>
</el-table>
</el-dialog>
</el-dialog>
</div>
</template>
<script>
import { getMonthRecordApi } from '@/api/cost/cost.js'
export default {
props: {
monthRecordDialogVisible: {
type: Boolean,
default: () => false,
},
agreementId: {
type: [String, Number],
default: () => '',
},
},
data() {
return {
// 费用承担方
costBearList: [
{ id: 1, label: '全部', value: '' },
{ id: 2, label: '01', value: '01' },
{ id: 3, label: '03', value: '03' },
],
// 查询参数
monthRecordParams: {
startTime: '',
endTime: '',
agreementId: '',
costBearingParty: '',
2024-08-13 11:45:31 +08:00
pageNum: 1,
pageSize: 10,
},
// 列表数据源
monthRecordList: [],
// 复选框勾选后数据
selectList: [],
// 内测弹框
innerVisible: false,
// 列表数量
monthRecordTotal: 1,
// 筛选日期
dateMonth: '',
// 月结明细表头
monthDetailsInfo: {},
// 月结明细 列表
monthDetails: [],
}
},
created() {
this.getMonthRecordList()
},
methods: {
/** 获取月结记录列表数据 */
async getMonthRecordList() {
this.monthRecordParams.agreementId = this.agreementId
// 调后台 Api 获取数据
const res = await getMonthRecordApi([this.monthRecordParams])
this.monthRecordList = res.data
},
/** 查询 */
handleQuery() {
this.getMonthRecordList()
},
/** 重置 */
resetQuery() {
this.resetForm('monthRecordFormRef')
this.monthRecordParams.startTime = ''
this.monthRecordParams.endTime = ''
2024-08-13 11:45:31 +08:00
this.getMonthRecordList()
},
/** 导出按钮 */
handelExport(row) {
// 如果 row 为null 表示批量导出
const { startTime, endTime, agreementId, costBearingParty } =
this.monthRecordParams
let exportList = [
{
codeNum: '',
startTime,
endTime,
agreementId,
costBearingParty,
},
]
if (!row && this.selectList.length < 1) {
2024-08-13 11:45:31 +08:00
this.$message.error('请勾选需要导出的数据!')
return
} else if (!row && this.selectList.length > 0) {
this.selectList.map((e) => {
2024-08-15 18:13:51 +08:00
exportList[0].codeNum += e.codeNum + ','
})
exportList[0].codeNum = exportList[0].codeNum.slice(0, -1)
} else {
exportList[0].codeNum = row.codeNum
2024-08-13 11:45:31 +08:00
}
this.downloadJson(
'material/sltAgreementInfo/exportSltInfoMonth',
JSON.stringify(exportList),
`月结明细${new Date().getTime()}.xlsx`,
)
2024-08-13 11:45:31 +08:00
},
/** 列表勾选 */
handleSelectionChange(list) {
this.selectList = list
},
/** 关闭外侧弹框*/
handleCloseMonthRecordDialog() {
this.$emit('handleCloseMonthRecordDialog')
},
/** 关闭内测弹框 */
handleCloseMInnerDialog() {
this.innerVisible = false
},
/** 明细按钮 */
previewDetails(row) {
const { unitName, month, projectName, costBearingParty } = row
this.monthDetailsInfo = {
unitName,
month,
projectName,
costBearingParty,
}
console.log(row, '明细')
this.monthDetails = row.node
this.innerVisible = true
},
/** 时间变化 */
onChangeTime(val) {
let startTime = ''
if (val.split('-')[1] == 1) {
startTime = `${val.split('-')[0] * 1 - 1}-12-21`
} else {
startTime = `${val.split('-')[0]}-0${
val.split('-')[1] * 1 - 1
}-21`
}
let endTime = val + '-20'
this.monthRecordParams.startTime = startTime
this.monthRecordParams.endTime = endTime
},
2024-08-13 11:45:31 +08:00
},
}
</script>
<style scoped>
.title-row {
min-height: 38px;
line-height: 38px;
font-size: 16px;
}
.pl-col {
padding-left: 180px !important;
}
</style>