310 lines
10 KiB
Vue
310 lines
10 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"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="费用承担方" prop="costBear">
|
|||
|
|
<el-select v-model="monthRecordParams.costBear" 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="handleBatchExport"
|
|||
|
|
>批量导出</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="exportDetails(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: '',
|
|||
|
|
costBear: '',
|
|||
|
|
agreementId: '',
|
|||
|
|
pageNum: 1,
|
|||
|
|
pageSize: 10,
|
|||
|
|
},
|
|||
|
|
// 列表数据源
|
|||
|
|
monthRecordList: [],
|
|||
|
|
// 复选框勾选后数据
|
|||
|
|
selectList: [],
|
|||
|
|
// 内测弹框
|
|||
|
|
innerVisible: false,
|
|||
|
|
// 列表数量
|
|||
|
|
monthRecordTotal: 1,
|
|||
|
|
// 筛选日期
|
|||
|
|
dateMonth: '',
|
|||
|
|
// 月结明细表头
|
|||
|
|
monthDetailsInfo: {},
|
|||
|
|
// 月结明细 列表
|
|||
|
|
monthDetails: [],
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.getMonthRecordList()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
/** 获取月结记录列表数据 */
|
|||
|
|
async getMonthRecordList() {
|
|||
|
|
// console.log('99999')
|
|||
|
|
this.monthRecordParams.startTime = this.dateMonth[0] || ''
|
|||
|
|
this.monthRecordParams.endTime = this.dateMonth[1] || ''
|
|||
|
|
this.monthRecordParams.agreementId = this.agreementId
|
|||
|
|
// 调后台 Api 获取数据
|
|||
|
|
const res = await getMonthRecordApi([this.monthRecordParams])
|
|||
|
|
this.monthRecordList = res.data
|
|||
|
|
console.log(res, '月结记录---')
|
|||
|
|
},
|
|||
|
|
/** 查询 */
|
|||
|
|
handleQuery() {
|
|||
|
|
this.getMonthRecordList()
|
|||
|
|
},
|
|||
|
|
/** 重置 */
|
|||
|
|
resetQuery() {
|
|||
|
|
this.resetForm('monthRecordFormRef')
|
|||
|
|
this.dateMonth = []
|
|||
|
|
this.getMonthRecordList()
|
|||
|
|
},
|
|||
|
|
/** 批量明细导出 */
|
|||
|
|
handleBatchExport() {
|
|||
|
|
if (this.selectList.length < 1) {
|
|||
|
|
this.$message.error('请勾选需要导出的数据！')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/** 单个明细导出 */
|
|||
|
|
exportDetails(row) {
|
|||
|
|
console.log('导出--', row)
|
|||
|
|
},
|
|||
|
|
/** 列表勾选 */
|
|||
|
|
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
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.title-row {
|
|||
|
|
min-height: 38px;
|
|||
|
|
line-height: 38px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
.pl-col {
|
|||
|
|
padding-left: 180px !important;
|
|||
|
|
}
|
|||
|
|
</style>
|