|
@@ -1,126 +1,129 @@
|
|
|
<template>
|
|
|
- <div class="container-print-view"
|
|
|
- style="width:100%;font-size: 12pt;height: 600px;overflow: auto;"
|
|
|
+ <div
|
|
|
+ class="container-print-view"
|
|
|
+ style="width:100%;font-size: 12pt;height: 600px;overflow: auto;"
|
|
|
>
|
|
|
- <div class="expense-detail-print" style="width:564pt;margin:0 auto;" v-for="item in list" :key="item.expenseInfo.expenseAccountSn">
|
|
|
- <div class="container-title" style="text-align: center;font-size: 24px;font-weight: 600;margin: 20px 0;">箭冠汽配企业费用报销单</div>
|
|
|
- <div class="container-info" style="width:564pt;border: 1px solid #000000;">
|
|
|
- <div class="container-info-basics" v-if="item.expenseInfo">
|
|
|
- <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;padding:0;margin:0;">
|
|
|
- <span style="display: inline-block;width: 50%;padding: 10px;border-right: 1px solid #000000;">申请人:{{ item.expenseInfo.applyPersonName?item.expenseInfo.applyPersonName:'' }}</span>
|
|
|
- <span style="display: inline-block;border-right: none;padding: 10px;">申请部门:{{ item.expenseInfo.applyDepartmentName?item.expenseInfo.applyDepartmentName:'' }}</span>
|
|
|
- </div>
|
|
|
- <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;padding:0;margin:0;">
|
|
|
- <span style="display: inline-block;width: 50%;padding: 10px;border-right: 1px solid #000000;">费用类型:{{ item.expenseInfo.expenseTypeName?item.expenseInfo.expenseTypeName:'' }}</span>
|
|
|
- <span style="display: inline-block;border-right: none;padding: 10px;">费用发生月份:{{ item.expenseInfo.expenseDate?item.expenseInfo.expenseDate.substring(0, 7):'' }}</span>
|
|
|
- </div>
|
|
|
- <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;padding:0;margin:0;">
|
|
|
- <span style="display: inline-block;width: 50%;padding: 10px;border-right: 1px solid #000000;">费用单号:{{ item.expenseInfo.expenseAccountNo?item.expenseInfo.expenseAccountNo:'' }}{{ item.expenseInfo.stateDictValue?'('+item.expenseInfo.stateDictValue+')':'' }}</span>
|
|
|
- <span style="display: inline-block;border-right: none;padding: 10px;">合计金额:{{ (item.expenseInfo.applyExpenseTotal ||item.expenseInfo.applyExpenseTotal==0)?item.expenseInfo.applyExpenseTotal+'元':'' }}</span>
|
|
|
- </div>
|
|
|
- <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;overflow: hidden;">
|
|
|
- <div style="border-right: none;float: left;padding: 10px 0 10px 10px;">主题:</div>
|
|
|
- <div style="padding: 10px 10px 10px 50px;text-align: center;font-weight: bold;">
|
|
|
- {{ item.expenseInfo.title?item.expenseInfo.title:'' }}
|
|
|
+ <div class="expense-detail-print" style="width:564pt;margin:0 auto;" v-for="item in list" :key="item.expenseInfo.expenseAccountSn">
|
|
|
+ <div class="container-title" style="text-align: center;font-size: 24px;font-weight: 600;margin: 20px 0;">箭冠汽配企业费用报销单</div>
|
|
|
+ <div class="container-info" style="width:564pt;border: 1px solid #000000;">
|
|
|
+ <div class="container-info-basics" v-if="item.expenseInfo">
|
|
|
+ <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;padding:0;margin:0;">
|
|
|
+ <span style="display: inline-block;width: 50%;padding: 10px;border-right: 1px solid #000000;">申请人:{{ item.expenseInfo.applyPersonName?item.expenseInfo.applyPersonName:'' }}</span>
|
|
|
+ <span style="display: inline-block;border-right: none;padding: 10px;">申请部门:{{ item.expenseInfo.applyDepartmentName?item.expenseInfo.applyDepartmentName:'' }}</span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;padding:0;margin:0;">
|
|
|
- <span style="display: inline-block;width: 100%;padding: 10px 10px 5px;border-right: 1px solid #000000;border-right: none;">详细说明:</span>
|
|
|
- <div style="padding:0 20px 10px 40px;">
|
|
|
- <div v-for="(ditem,index) in item.expenseInfo.content" :key="index+'-content'">
|
|
|
- {{ ditem || '--' }}
|
|
|
+ <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;padding:0;margin:0;">
|
|
|
+ <span style="display: inline-block;width: 50%;padding: 10px;border-right: 1px solid #000000;">费用类型:{{ item.expenseInfo.expenseTypeName?item.expenseInfo.expenseTypeName:'' }}</span>
|
|
|
+ <span style="display: inline-block;border-right: none;padding: 10px;">费用发生月份:{{ item.expenseInfo.expenseDate?item.expenseInfo.expenseDate.substring(0, 7):'' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;padding:0;margin:0;">
|
|
|
+ <span style="display: inline-block;width: 50%;padding: 10px;border-right: 1px solid #000000;">费用单号:{{ item.expenseInfo.expenseAccountNo?item.expenseInfo.expenseAccountNo:'' }}{{ item.expenseInfo.stateDictValue?'('+item.expenseInfo.stateDictValue+')':'' }}</span>
|
|
|
+ <span style="display: inline-block;border-right: none;padding: 10px;">合计金额:{{ (item.expenseInfo.applyExpenseTotal ||item.expenseInfo.applyExpenseTotal==0)?item.expenseInfo.applyExpenseTotal+'元':'' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;overflow: hidden;">
|
|
|
+ <div style="border-right: none;float: left;padding: 10px 0 10px 10px;">主题:</div>
|
|
|
+ <div style="padding: 10px 10px 10px 50px;text-align: center;font-weight: bold;">
|
|
|
+ {{ item.expenseInfo.title?item.expenseInfo.title:'' }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;padding:0;margin:0;">
|
|
|
+ <span style="display: inline-block;width: 100%;padding: 10px 10px 5px;border-right: 1px solid #000000;border-right: none;">详细说明:</span>
|
|
|
+ <div style="padding:0 20px 10px 40px;">
|
|
|
+ <div v-for="(ditem,index) in item.expenseInfo.content" :key="index+'-content'">
|
|
|
+ {{ ditem || '--' }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="container-fytable" style="padding:0 10px;" v-if="item.fyListData">
|
|
|
- <div class="table-title" style="padding: 10px 0;">费用明细:</div>
|
|
|
- <table
|
|
|
- border="1"
|
|
|
- cellspacing="0"
|
|
|
- cellpadding="0"
|
|
|
- style="width: 100%;border-collapse: collapse;font-size:10pt;text-align: center;"
|
|
|
- align="center">
|
|
|
- <thead>
|
|
|
- <tr>
|
|
|
- <th style="padding:5px 0;width:6%;">序号</th>
|
|
|
- <th style="padding:5px 0;width:22%;">记账方</th>
|
|
|
- <!-- <th style="padding:5px 0;width:15%;">区域/省/市</th> -->
|
|
|
- <th style="padding:5px 0;width:10%;">记账费用</th>
|
|
|
- <th style="padding:5px 0;width:30%;">费用承担方</th>
|
|
|
- <th style="padding:5px 0;width:22%;">产品信息</th>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody>
|
|
|
- <tr v-for="(fyItem,index) in item.fyListData" :key="index">
|
|
|
- <td style="text-align: center;width:6%;">{{ index+1 }}</td>
|
|
|
- <td style="text-align: left;width:22%;padding:0 5px;">
|
|
|
- <div>{{ fyItem.accountTypeDictValue }}</div>
|
|
|
- <div>{{ fyItem.accountName||'' }}</div>
|
|
|
- <div v-if="fyItem.accountNameFnumber">({{ fyItem.accountNameFnumber }})</div>
|
|
|
- </td>
|
|
|
- <!-- <td style="text-align: left;width:15%;padding:5px 5px;">
|
|
|
+ <div class="container-fytable" style="padding:0 10px;" v-if="item.fyListData">
|
|
|
+ <div class="table-title" style="padding: 10px 0;">费用明细:</div>
|
|
|
+ <table
|
|
|
+ border="1"
|
|
|
+ cellspacing="0"
|
|
|
+ cellpadding="0"
|
|
|
+ style="width: 100%;border-collapse: collapse;font-size:10pt;text-align: center;"
|
|
|
+ align="center">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th style="padding:5px 0;width:6%;">序号</th>
|
|
|
+ <th style="padding:5px 0;width:22%;">记账方</th>
|
|
|
+ <!-- <th style="padding:5px 0;width:15%;">区域/省/市</th> -->
|
|
|
+ <th style="padding:5px 0;width:10%;">记账费用</th>
|
|
|
+ <th style="padding:5px 0;width:30%;">费用承担方</th>
|
|
|
+ <th style="padding:5px 0;width:22%;">产品信息</th>
|
|
|
+ <th v-if="item.printRemark">备注</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="(fyItem,index) in item.fyListData" :key="index">
|
|
|
+ <td style="text-align: center;width:6%;">{{ index+1 }}</td>
|
|
|
+ <td style="text-align: left;width:22%;padding:0 5px;">
|
|
|
+ <div>{{ fyItem.accountTypeDictValue }}</div>
|
|
|
+ <div>{{ fyItem.accountName||'' }}</div>
|
|
|
+ <div v-if="fyItem.accountNameFnumber">({{ fyItem.accountNameFnumber }})</div>
|
|
|
+ </td>
|
|
|
+ <!-- <td style="text-align: left;width:15%;padding:5px 5px;">
|
|
|
<div>{{ fyItem.subareaNames }}</div>
|
|
|
<div>{{ fyItem.provinceName }}</div>
|
|
|
<div>{{ fyItem.cityName }}</div>
|
|
|
</td> -->
|
|
|
- <td style="text-align: right;width:10%;padding:0 5px;">{{ fyItem.expense||fyItem.expense==0?toThousands(fyItem.expense):'' }}</td>
|
|
|
- <td style="text-align: left;width:30%;padding:0 5px;vertical-align: top;">
|
|
|
- <div v-for="(ditem,index) in fyItem.detailSplitList" :key="ditem.id+'-'+index" style="padding: 3px 0;" >
|
|
|
- {{ ditem.splitObjName }}
|
|
|
- <span v-if="ditem.splitObjFnumber">({{ ditem.splitObjFnumber }})</span>
|
|
|
- <span v-if="ditem.childDetailSplit&&ditem.childDetailSplit.splitObjName">/</span>
|
|
|
- {{ ditem.childDetailSplit?ditem.childDetailSplit.splitObjName:'' }}: {{ ditem.childDetailSplit?toThousands(ditem.childDetailSplit.splitAmount):toThousands(ditem.splitAmount) }}
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- <td style="text-align: left;width:22%;padding:0 5px;vertical-align: top;">
|
|
|
- <div v-for="ditem in fyItem.detailProductsList" :key="ditem.id" style="padding: 3px 0;">
|
|
|
- <div v-if="ditem.productCode">{{ ditem.productCode }}: {{ toThousands(ditem.expense) }}</div>
|
|
|
- <div v-else-if="ditem.productBrandName">{{ ditem.productBrandName }}<span v-if="ditem.productTypeShowName">/</span>{{ ditem.productTypeShowName }}: {{ toThousands(ditem.expense) }}</div>
|
|
|
- <div v-else>{{ ditem.productTypeShowName }}: {{ toThousands(ditem.expense) }}</div>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
- <div class="container-fytable" style="padding:0 10px 5px;" v-if="item.spListData&&item.spListData.length">
|
|
|
- <p class="table-title">审批信息:</p>
|
|
|
- <table
|
|
|
- border="1"
|
|
|
- cellspacing="0"
|
|
|
- cellpadding="0"
|
|
|
- style="width: 100%;border-collapse: collapse;border: 1px solid black;font-size:10pt;text-align: center;"
|
|
|
- align="center">
|
|
|
- <thead>
|
|
|
- <tr style="height: 30px;padding: 5px;">
|
|
|
- <th style="padding:5px 0;width:8%;">序号</th>
|
|
|
- <th style="padding:5px 0;width:15%;">人员姓名</th>
|
|
|
- <th style="padding:5px 0;width:15%;">人员类型</th>
|
|
|
- <th style="padding:5px 0;width:10%;">状态</th>
|
|
|
- <th style="padding:5px 0;width:17%;">审批意见</th>
|
|
|
- <th style="padding:5px 0;width:15%;">附件</th>
|
|
|
- <th style="padding:5px 0;width:20%;">时间</th>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody>
|
|
|
- <tr style="height: 30px;padding: 5px;" v-for="(spitem,index) in item.spListData" :key="index">
|
|
|
- <td style="padding:5px 0;">{{ index+1||'' }}</td>
|
|
|
- <td style="padding:5px 0;">{{ spitem.userName||'' }}</td>
|
|
|
- <td style="padding:5px 0;">{{ spitem.userType||'' }}</td>
|
|
|
- <td style="padding:5px 0;">{{ spitem.state||'' }}</td>
|
|
|
- <td style="padding:5px 0;">{{ spitem.remark||'' }}</td>
|
|
|
- <td style="padding:5px 0;">{{ spitem.hasAttachments!= '0' ? '请在钉钉中查看附件内容' : '--' }}</td>
|
|
|
- <td style="padding:5px 0;">{{ spitem.date||'' }}</td>
|
|
|
- </tr></tbody>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
- <div class="container-fytable" style="padding:0 10px;" v-else>
|
|
|
- <p class="table-title">审批信息:暂无</p>
|
|
|
+ <td style="text-align: right;width:10%;padding:0 5px;">{{ fyItem.expense||fyItem.expense==0?toThousands(fyItem.expense):'' }}</td>
|
|
|
+ <td style="text-align: left;width:30%;padding:0 5px;vertical-align: top;">
|
|
|
+ <div v-for="(ditem,index) in fyItem.detailSplitList" :key="ditem.id+'-'+index" style="padding: 3px 0;" >
|
|
|
+ {{ ditem.splitObjName }}
|
|
|
+ <span v-if="ditem.splitObjFnumber">({{ ditem.splitObjFnumber }})</span>
|
|
|
+ <span v-if="ditem.childDetailSplit&&ditem.childDetailSplit.splitObjName">/</span>
|
|
|
+ {{ ditem.childDetailSplit?ditem.childDetailSplit.splitObjName:'' }}: {{ ditem.childDetailSplit?toThousands(ditem.childDetailSplit.splitAmount):toThousands(ditem.splitAmount) }}
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td style="text-align: left;width:22%;padding:0 5px;vertical-align: top;">
|
|
|
+ <div v-for="ditem in fyItem.detailProductsList" :key="ditem.id" style="padding: 3px 0;">
|
|
|
+ <div v-if="ditem.productCode">{{ ditem.productCode }}: {{ toThousands(ditem.expense) }}</div>
|
|
|
+ <div v-else-if="ditem.productBrandName">{{ ditem.productBrandName }}<span v-if="ditem.productTypeShowName">/</span>{{ ditem.productTypeShowName }}: {{ toThousands(ditem.expense) }}</div>
|
|
|
+ <div v-else>{{ ditem.productTypeShowName }}: {{ toThousands(ditem.expense) }}</div>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td v-if="item.printRemark">{{ fyItem.remarks }}</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <div class="container-fytable" style="padding:0 10px 5px;" v-if="item.spListData&&item.spListData.length">
|
|
|
+ <p class="table-title">审批信息:</p>
|
|
|
+ <table
|
|
|
+ border="1"
|
|
|
+ cellspacing="0"
|
|
|
+ cellpadding="0"
|
|
|
+ style="width: 100%;border-collapse: collapse;border: 1px solid black;font-size:10pt;text-align: center;"
|
|
|
+ align="center">
|
|
|
+ <thead>
|
|
|
+ <tr style="height: 30px;padding: 5px;">
|
|
|
+ <th style="padding:5px 0;width:8%;">序号</th>
|
|
|
+ <th style="padding:5px 0;width:15%;">人员姓名</th>
|
|
|
+ <th style="padding:5px 0;width:15%;">人员类型</th>
|
|
|
+ <th style="padding:5px 0;width:10%;">状态</th>
|
|
|
+ <th style="padding:5px 0;width:17%;">审批意见</th>
|
|
|
+ <th style="padding:5px 0;width:15%;">附件</th>
|
|
|
+ <th style="padding:5px 0;width:20%;">时间</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr style="height: 30px;padding: 5px;" v-for="(spitem,index) in item.spListData" :key="index">
|
|
|
+ <td style="padding:5px 0;">{{ index+1||'' }}</td>
|
|
|
+ <td style="padding:5px 0;">{{ spitem.userName||'' }}</td>
|
|
|
+ <td style="padding:5px 0;">{{ spitem.userType||'' }}</td>
|
|
|
+ <td style="padding:5px 0;">{{ spitem.state||'' }}</td>
|
|
|
+ <td style="padding:5px 0;">{{ spitem.remark||'' }}</td>
|
|
|
+ <td style="padding:5px 0;">{{ spitem.hasAttachments!= '0' ? '请在钉钉中查看附件内容' : '--' }}</td>
|
|
|
+ <td style="padding:5px 0;">{{ spitem.date||'' }}</td>
|
|
|
+ </tr></tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <div class="container-fytable" style="padding:0 10px;" v-else>
|
|
|
+ <p class="table-title">审批信息:暂无</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
@@ -140,17 +143,17 @@ export default {
|
|
|
this.list = list
|
|
|
},
|
|
|
// 打印
|
|
|
- prints(){
|
|
|
+ prints () {
|
|
|
const _this = this
|
|
|
const html = document.getElementsByClassName('expense-detail-print')
|
|
|
// 自动排版
|
|
|
- const result = groupLessThan(html,true)
|
|
|
+ const result = groupLessThan(html, true)
|
|
|
this.$store.state.app.curActionPermission = 'B_eRPrint'
|
|
|
// html, type, callback, printLogParams
|
|
|
jGPlPrint(result, 'print', function (res) {
|
|
|
_this.$store.state.app.curActionPermission = ''
|
|
|
_this.$emit('printOk', res)
|
|
|
- },null,'费用报销单')
|
|
|
+ }, null, '费用报销单')
|
|
|
}
|
|
|
}
|
|
|
}
|