347 lines
12 KiB
Vue
347 lines
12 KiB
Vue
<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"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="费用承担方" prop="costBearingParty">
|
||
<el-select
|
||
v-model="monthRecordParams.costBearingParty"
|
||
clearable
|
||
>
|
||
<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)"
|
||
>批量导出</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)"
|
||
>导出明细表</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="计量单位"
|
||
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: '',
|
||
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 = ''
|
||
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) {
|
||
this.$message.error('请勾选需要导出的数据！')
|
||
return
|
||
} else if (!row && this.selectList.length > 0) {
|
||
this.selectList.map((e) => {
|
||
exportList[0].codeNum += e.codeNum + ','
|
||
})
|
||
exportList[0].codeNum = exportList[0].codeNum.slice(0, -1)
|
||
} else {
|
||
exportList[0].codeNum = row.codeNum
|
||
}
|
||
|
||
this.downloadJson(
|
||
'material/sltAgreementInfo/exportSltInfoMonth',
|
||
JSON.stringify(exportList),
|
||
`月结明细${new Date().getTime()}.xlsx`,
|
||
)
|
||
},
|
||
/** 列表勾选 */
|
||
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
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.title-row {
|
||
min-height: 38px;
|
||
line-height: 38px;
|
||
font-size: 16px;
|
||
}
|
||
.pl-col {
|
||
padding-left: 180px !important;
|
||
}
|
||
</style>
|