协议书-Excel

This commit is contained in:
bb_pan 2025-10-23 09:57:09 +08:00
parent 579a838361
commit 14b248fd21
1 changed files with 356 additions and 182 deletions

View File

@ -1,13 +1,26 @@
<template>
<div class="app-container" id="costApplyList">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="80px"
>
<el-form-item prop="unitIds">
<treeselect
v-model="queryParams.unitId"
:options="unitList" :normalizer="normalizer"
:show-count="true" style="width: 240px" :disable-branch-nodes="true"
noChildrenText="没有数据了" noOptionsText="没有数据" noResultsText="没有搜索结果"
placeholder="请选择结算单位" @select="unitChange"
:options="unitList"
:normalizer="normalizer"
:show-count="true"
style="width: 240px"
:disable-branch-nodes="true"
noChildrenText="没有数据了"
noOptionsText="没有数据"
noResultsText="没有搜索结果"
placeholder="请选择结算单位"
@select="unitChange"
/>
<!-- <el-cascader v-model="unitIds"
:show-all-levels="false"
@ -23,10 +36,16 @@
<el-form-item prop="projectIds">
<treeselect
v-model="queryParams.projectId"
:options="proList" :normalizer="normalizer"
:show-count="true" style="width: 240px" :disable-branch-nodes="true"
noChildrenText="没有数据了" noOptionsText="没有数据" noResultsText="没有搜索结果"
placeholder="请选择结算工程" @select="proChange"
:options="proList"
:normalizer="normalizer"
:show-count="true"
style="width: 240px"
:disable-branch-nodes="true"
noChildrenText="没有数据了"
noOptionsText="没有数据"
noResultsText="没有搜索结果"
placeholder="请选择结算工程"
@select="proChange"
/>
<!-- <el-cascader v-model="projectIds"
:show-all-levels="false"
@ -60,9 +79,7 @@
<el-table v-loading="loading" :data="tableList" :max-height="650">
<el-table-column label="序号" align="center" type="index">
<template slot-scope="scope">
<span>{{
(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
}}</span>
<span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="协议号" align="center" prop="agreementCode" :show-overflow-tooltip="true" />
@ -78,7 +95,9 @@
<template slot-scope="scope">
<el-tag v-if="scope.row.settlementType === 1" effect="plain">工器具</el-tag>
<el-tag type="warning" v-if="scope.row.settlementType === 2" effect="plain">安全工器具</el-tag>
<el-tag v-if="scope.row.settlementType == null || scope.row.settlementType === 0" effect="plain">总费用</el-tag>
<el-tag v-if="scope.row.settlementType == null || scope.row.settlementType === 0" effect="plain">
总费用
</el-tag>
</template>
</el-table-column>
@ -96,19 +115,22 @@
</el-table-column>
<el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="normal" icon="el-icon-search" @click="handleView(scope.row)">查看</el-button>
<el-button size="mini" type="primary" icon="el-icon-edit"
@click="handleExame(scope.row)" v-if="scope.row.sltStatus == '1'" >审批</el-button>
<el-button size="mini" type="normal" icon="el-icon-search" @click="handleView(scope.row)">
查看
</el-button>
<el-button
size="mini"
type="primary"
icon="el-icon-edit"
@click="handleExame(scope.row)"
v-if="scope.row.sltStatus == '1'"
>
审批
</el-button>
<!-- <el-button size="mini" type="danger" icon="el-icon-delete"
@click="handleDelete(scope.row)"
>撤销申请</el-button> -->
<el-button
type="primary"
plain
size="mini"
@click="openPrintDialog(scope.row)"
>协议书</el-button
>
<el-button type="primary" plain size="mini" @click="openPrintDialog(scope.row)">协议书</el-button>
</template>
</el-table-column>
</el-table>
@ -129,8 +151,16 @@
<el-radio v-model="aform.status" label="3">不通过</el-radio>
</el-form-item>
<el-form-item label="原因" prop="remark">
<el-input v-model="aform.remark" maxlength="100" placeholder="请输入"
show-word-limit size="small" style="width: 350px" type="textarea" rows="4"></el-input>
<el-input
v-model="aform.remark"
maxlength="100"
placeholder="请输入"
show-word-limit
size="small"
style="width: 350px"
type="textarea"
rows="4"
></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center">
@ -147,61 +177,75 @@
机具设备有偿使用费结算协议书
</div>
<div class="info" style="margin-top: 10px; display: flex; flex-wrap: wrap">
<div class="item" style=" width: 65%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px;">
</div>
<div class="item" style=" width: 35%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px;">
<div class="item" style="width: 65%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px"></div>
<div class="item" style="width: 35%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
<span>协议号{{ agreementContent.agreementCode }}</span>
</div>
</div>
<div class="tabelColumn">
<div class="columnLabel" style="width: 20%;">工程名称</div>
<div class="columnContent" style="width: 80%;">{{ agreementContent.projectName }}</div>
<div class="columnLabel" style="width: 20%">工程名称</div>
<div class="columnContent" style="width: 80%">{{ agreementContent.projectName }}</div>
</div>
<div class="tabelColumn">
<div class="columnLabel" style="width: 20%;">承租单位</div>
<div class="columnContent" style="width: 40%;">{{ agreementContent.unitName }}</div>
<div class="columnLabel" style="width: 10%;border-left: 1px solid #9c9c9c;">日期</div>
<div class="columnContent" style="width: 30%;">{{ agreementContent.applyTime }}</div>
<div class="columnLabel" style="width: 20%">承租单位</div>
<div class="columnContent" style="width: 40%">{{ agreementContent.unitName }}</div>
<div class="columnLabel" style="width: 10%; border-left: 1px solid #9c9c9c">日期</div>
<div class="columnContent" style="width: 30%">{{ agreementContent.applyTime }}</div>
</div>
<div class="tabelColumn">
<div class="columnLabel" style="width: 100%;">结算项目及金额()</div>
<div class="columnLabel" style="width: 100%">结算项目及金额()</div>
</div>
<div class="tabelColumn">
<div class="columnLabel" style="width: 60%;">施工机具有偿使用费</div>
<div class="columnContent" style="width: 40%;"> {{ Number(agreementContent.leaseCost).toFixed(2) }}</div>
<div class="columnLabel" style="width: 60%">施工机具有偿使用费</div>
<div class="columnContent" style="width: 40%">
{{ Number(agreementContent.leaseCost).toFixed(2) }}
</div>
</div>
<div class="tabelColumn">
<div class="columnLabel" style="width: 60%;">施工机具维修费</div>
<div class="columnContent" style="width: 40%;"> {{ Number(agreementContent.repairCost).toFixed(2) }}</div>
<div class="columnLabel" style="width: 60%">施工机具维修费</div>
<div class="columnContent" style="width: 40%">
{{ Number(agreementContent.repairCost).toFixed(2) }}
</div>
</div>
<div class="tabelColumn">
<div class="columnLabel" style="width: 60%;">施工机具丢失费</div>
<div class="columnContent" style="width: 40%;"> {{ Number(agreementContent.loseCost).toFixed(2) }}</div>
<div class="columnLabel" style="width: 60%">施工机具丢失费</div>
<div class="columnContent" style="width: 40%">
{{ Number(agreementContent.loseCost).toFixed(2) }}
</div>
</div>
<div class="tabelColumn">
<div class="columnLabel" style="width: 60%;">施工机具损坏赔偿费</div>
<div class="columnContent" style="width: 40%;"> {{ Number(agreementContent.scrapCost).toFixed(2) }}</div>
<div class="columnLabel" style="width: 60%">施工机具损坏赔偿费</div>
<div class="columnContent" style="width: 40%">
{{ Number(agreementContent.scrapCost).toFixed(2) }}
</div>
</div>
<div class="tabelColumn">
<div class="columnLabel" style="width: 60%;">施工机具租赁减免费</div>
<div class="columnContent" style="width: 40%;"> {{ Number(agreementContent.reductionCost).toFixed(2) }}</div>
<div class="columnLabel" style="width: 60%">施工机具租赁减免费</div>
<div class="columnContent" style="width: 40%">
{{ Number(agreementContent.reductionCost).toFixed(2) }}
</div>
</div>
<div class="tabelColumn">
<div class="columnLabel" style="width: 20%;">费用合计金额大写</div>
<div class="columnContent" style="width: 40%;">{{ agreementContent.costAllUpper }}</div>
<div class="columnContent" style="width: 40%;"> {{ Number(agreementContent.costAll).toFixed(2) }}</div>
<div class="columnLabel" style="width: 20%">费用合计金额大写</div>
<div class="columnContent" style="width: 40%">{{ agreementContent.costAllUpper }}</div>
<div class="columnContent" style="width: 40%">
{{ Number(agreementContent.costAll).toFixed(2) }}
</div>
</div>
<div class="tabelColumn">
<div class="columnLabel" style="width: 20%;">说明</div>
<div class="columnContent" style="width: 80%;">本协议一式两份甲方一份乙方一份经双方签字后生效</div>
<div class="columnLabel" style="width: 20%">说明</div>
<div class="columnContent" style="width: 80%">
本协议一式两份甲方一份乙方一份经双方签字后生效
</div>
</div>
<div class="tabelColumn" style="border: 1px solid #9c9c9c">
<div class="columnLabel" style="width: 20%">备注</div>
<div class="columnContent" style="width: 80%">
此费用仅为在机具设备分公司发生费用未计从项目部领用机具费用
</div>
<div class="tabelColumn" style="border: 1px solid #9c9c9c;">
<div class="columnLabel" style="width: 20%;">备注</div>
<div class="columnContent" style="width: 80%;">此费用仅为在机具设备分公司发生费用未计从项目部领用机具费用</div>
</div>
<div class="fillIn" style="margin-top: 20px; display: flex; justify-content: space-between;">
<div class="fillIn" style="margin-top: 20px; display: flex; justify-content: space-between">
<div class="item" style="width: 33%">
<div>
<span>部门负责人</span>
@ -224,6 +268,7 @@
</div>
<div slot="footer" class="dialog-footer" style="text-align: center">
<el-button @click="exportExcel">导出Excel</el-button>
<el-button type="primary" @click="print"> </el-button>
<el-button @click="openPrint = false"> </el-button>
</div>
@ -232,16 +277,16 @@
</template>
<script>
import {
getProjectList,
getUnitList,
getAgreementInfoById, getUnitListFilterTeam,
} from '@/api/back/index.js'
import { getProjectList, getUnitList, getAgreementInfoById, getUnitListFilterTeam } from '@/api/back/index.js'
import { getSltList, costExamine, getSltInfo } from '@/api/cost/cost'
import { toChineseAmount } from '@/utils/bonus.js'
import vueEasyPrint from "vue-easy-print";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import vueEasyPrint from 'vue-easy-print'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { formatTime } from '@/utils/bonus'
import { saveAs } from 'file-saver'
import ExcelJS from 'exceljs'
export default {
name: 'ExamHome',
dicts: ['cost_status'],
@ -269,13 +314,13 @@ export default {
selectTreeProps: {
children: 'children',
label: 'name',
value: 'id',
value: 'id'
// multiple: true,//false
},
statusList: [
{ id: '1', name: '待审核' },
{ id: '2', name: '审核通过' },
{ id: '3', name: '审核驳回' },
{ id: '3', name: '审核驳回' }
], //
//
tableList: [],
@ -289,7 +334,7 @@ export default {
unitId: null,
projectId: null,
agreementId: null,
agreementCode: null,
agreementCode: null
},
openPrint: false,
//
@ -309,8 +354,8 @@ export default {
scrapCost: '', //
reductionCost: '', //
costAll: '', //
costAllUpper: '', //
},
costAllUpper: '' //
}
}
},
created() {
@ -322,13 +367,13 @@ export default {
/** 转换菜单数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
delete node.children
}
return {
id: node.id,
label: node.name,
children: node.children,
};
children: node.children
}
},
//
async GetUnitData() {
@ -336,7 +381,7 @@ export default {
// projectId: this.queryParams.projectId /* */,
}
const res = await getUnitListFilterTeam(params)
this.unitList = res.data;
this.unitList = res.data
this.getAgreementInfo()
},
@ -357,10 +402,10 @@ export default {
//
async GetProData() {
const params = {
unitId: this.queryParams.unitId,
unitId: this.queryParams.unitId
}
const res = await getProjectList(params)
this.proList = res.data;
this.proList = res.data
this.getAgreementInfo()
},
@ -380,7 +425,7 @@ export default {
if (this.queryParams.unitId && this.queryParams.projectId) {
const params = {
unitId: this.queryParams.unitId,
projectId: this.queryParams.projectId,
projectId: this.queryParams.projectId
}
const res = await getAgreementInfoById(params)
console.log(res)
@ -400,7 +445,7 @@ export default {
/** 查询列表 */
getList() {
this.loading = true
getSltList(this.queryParams).then((response) => {
getSltList(this.queryParams).then(response => {
this.tableList = response.rows
this.total = response.total
this.loading = false
@ -422,16 +467,16 @@ export default {
unitId: null,
projectId: null,
agreementId: '',
agreementCode: '',
agreementCode: ''
}
this.resetForm('queryForm')
this.handleQuery()
},
//
handleView(row) {
let arr = [];
arr.push(row);
this.$emit("goDetail",JSON.stringify(arr));
let arr = []
arr.push(row)
this.$emit('goDetail', JSON.stringify(arr))
},
//
handleExame(row) {
@ -445,23 +490,25 @@ export default {
id: this.id,
status: this.aform.status,
remark: this.aform.remark,
agreementId: this.agreementIdTemp,
agreementId: this.agreementIdTemp
}
costExamine(param).then((res) => {
costExamine(param)
.then(res => {
if (res.code == 200) {
this.$modal.msgSuccess("审批成功");
this.getList();
this.applyVisible = false;
this.$modal.msgSuccess('审批成功')
this.getList()
this.applyVisible = false
} else {
this.$modal.msgError(res.msg);
this.$modal.msgError(res.msg)
}
}).catch(() => {});
})
.catch(() => {})
},
//
cancel() {
this.applyVisible = false;
this.aform = { status: '2' };
this.applyVisible = false
this.aform = { status: '2' }
},
async openPrintDialog(row) {
@ -472,7 +519,12 @@ export default {
if (!res.data) return
this.agreementContent = res.data
this.agreementContent.agreementCode = row.agreementCode
this.agreementContent.costAll = Number(res.data.leaseCost) + Number(res.data.repairCost) + Number(res.data.scrapCost) + Number(res.data.loseCost) - Number(res.data.reductionCost)
this.agreementContent.costAll =
Number(res.data.leaseCost) +
Number(res.data.repairCost) +
Number(res.data.scrapCost) +
Number(res.data.loseCost) -
Number(res.data.reductionCost)
// costAllUpper
this.agreementContent.costAllUpper = toChineseAmount(this.agreementContent.costAll.toFixed(2))
} catch (error) {
@ -481,10 +533,132 @@ export default {
},
//
print() {
this.$refs.remarksPrintRef.print();
this.$refs.remarksPrintRef.print()
},
async exportExcel() {
const data = this.agreementContent
const workbook = new ExcelJS.Workbook()
const sheet = workbook.addWorksheet('结算协议')
},
// ======= =======
const borderStyle = {
top: { style: 'thin' },
left: { style: 'thin' },
bottom: { style: 'thin' },
right: { style: 'thin' }
}
// ======= =======
sheet.columns = [{ width: 25 }, { width: 50 }, { width: 25 }, { width: 35 }]
// ======= =======
sheet.mergeCells('A1:D1')
const title = sheet.getCell('A1')
title.value = '机具设备有偿使用费结算协议书'
title.font = { bold: true, size: 16 }
title.alignment = { horizontal: 'center', vertical: 'middle' }
// ======= =======
sheet.mergeCells('A2:D2')
const codeCell = sheet.getCell('A2')
codeCell.value = `协议号:${data.agreementCode}`
codeCell.alignment = { horizontal: 'right', vertical: 'middle' }
// ======= =======
const r3 = sheet.addRow(['工程名称:', data.projectName, '', ''])
sheet.mergeCells(`B${r3.number}:D${r3.number}`)
r3.eachCell(c => {
c.border = borderStyle
c.alignment = { horizontal: 'center', vertical: 'middle' }
})
// ======= + =======
const r4 = sheet.addRow(['承租单位:', data.unitName, '日期:', data.applyTime])
r4.eachCell(c => {
c.border = borderStyle
c.alignment = { horizontal: 'center', vertical: 'middle' }
})
// ======= =======
const r6 = sheet.addRow(['结算项目及金额(元)', '', '', ''])
sheet.mergeCells(`A${r6.number}:D${r6.number}`)
r6.eachCell(c => {
c.border = borderStyle
c.font = { bold: true }
c.alignment = { horizontal: 'center', vertical: 'middle' }
})
// ======= =======
const items = [
['一、施工机具有偿使用费:', `${Number(data.leaseCost).toFixed(2)}`],
['二、施工机具维修费:', `${Number(data.repairCost).toFixed(2)}`],
['三、施工机具丢失费:', `${Number(data.loseCost).toFixed(2)}`],
['四、施工机具损坏赔偿费:', `${Number(data.scrapCost).toFixed(2)}`],
['五、施工机具租赁减免费:', `${Number(data.reductionCost).toFixed(2)}`]
]
items.forEach(row => {
const r = sheet.addRow([row[0], '', '', row[1]])
sheet.mergeCells(`A${r.number}:C${r.number}`)
r.eachCell(c => {
c.border = borderStyle
c.alignment = { horizontal: 'center', vertical: 'middle' }
})
})
// ======= =======
const totalRow = sheet.addRow([
'费用合计金额(大写):',
data.costAllUpper,
'',
`${Number(data.costAll).toFixed(2)}`
])
sheet.mergeCells(`B${totalRow.number}:C${totalRow.number}`)
totalRow.eachCell(c => {
c.border = borderStyle
c.alignment = { horizontal: 'center', vertical: 'middle' }
})
// ======= =======
const explainRow = sheet.addRow([
'说明:',
'本协议一式两份,甲方一份,乙方一份,经双方签字后生效。',
'',
''
])
sheet.mergeCells(`B${explainRow.number}:D${explainRow.number}`)
explainRow.eachCell(c => {
c.border = borderStyle
c.alignment = { horizontal: 'center', vertical: 'middle' }
})
// ======= =======
const remarkRow = sheet.addRow([
'备注:',
'此费用仅为在机具设备分公司发生费用,未计从项目部领用机具费用。',
'',
''
])
sheet.mergeCells(`B${remarkRow.number}:D${remarkRow.number}`)
remarkRow.eachCell(c => {
c.border = borderStyle
c.alignment = { horizontal: 'center', vertical: 'middle' }
})
// ======= =======
sheet.addRow(['', '', '', ''])
// ======= + + =======
const signRow = sheet.addRow(['部门负责人:', '承租负责人:', '核算员:'])
signRow.eachCell(cell => {
cell.border = undefined
cell.alignment = { horizontal: 'left', vertical: 'middle' }
})
// ======= =======
const buf = await workbook.xlsx.writeBuffer()
saveAs(new Blob([buf]), `机具设备有偿使用费结算协议书-${data.agreementCode}_${formatTime(new Date())}.xlsx`)
}
}
}
</script>
<style lang="scss" scoped>