xiaoy
/
contract-business-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加8个预算表格

Browse Source
master
lynn 8 months ago
parent a245b61408
commit 2cf222dcf4
5 changed files with 1516 additions and 69 deletions
Show Stats Download Patch File Download Diff File

649
src/views/businessConfig/AddPayForm.vue
Unescape View File

@ -7,25 +7,25 @@
<!-- 左侧面板 -->
<div class="left-panel">
<!-- 预览区 -->
<div>
<div>
<div class="panel-header">
<h5 class="panel-title">预览区</h5>
<div class="action-buttons">
<el-button size="small" @click="handleRefresh">刷新</el-button>
</div>
</div>
<div class="preview-container"></div>
</div>
</div>
<div class="preview-container" v-html="previewContent"></div>
</div>
<!-- 代码预览区 -->
<div>
<div>
<div class="panel-header">
<h5 class="panel-title">代码预览区</h5>
<div class="action-buttons">
<el-select v-model="formatType" size="small" style="width: 120px">
<el-option label="HTML" value="html"></el-option>
<el-option label="DOCX" value="docx"></el-option>
</el-select>
<el-option label="HTML" value="html"></el-option>
<el-option label="DOCX" value="docx"></el-option>
</el-select>
<el-button
size="small"
v-if="formatType === 'docx'"
@ -42,15 +42,15 @@
class="code-editor"
></el-input>
</div>
</div>
</div>
</div>
</div>
<!-- 右侧面板 -->
<div class="right-panel">
<div class="field-config-container">
<div class="panel-header">
<h5 class="panel-title">字段配置</h5>
</div>
</div>
<div class="field-list">
<div
v-for="field in fieldList"
@ -60,10 +60,10 @@
>
<el-row align="middle">
<el-col :span="8">
<span class="text-muted">{{ field.name }}</span>
<span class="text-muted field-name">{{ field.name }}</span>
</el-col>
<el-col :span="8">
<strong>{{ field.label }}</strong>
<strong class="field-label">{{ field.label }}</strong>
</el-col>
<el-col :span="8">
<span class="text-muted">{{ getTypeDisplay(field.type) }}</span>
@ -78,27 +78,28 @@
<!-- 底部固定保存按钮 -->
<div class="footer-actions">
<div class="footer-content">
<el-button size="large" class="footer-button" @click="$router.back()">取 消</el-button>
<el-button size="large" class="footer-button" @click="handleCancel">取 消</el-button>
<el-button size="large" type="primary" class="footer-button" @click="handleSave">保 存</el-button>
</div>
</div>
<!-- 编辑字段抽屉 -->
<el-drawer
v-model="showEditDrawer"
:visible.sync="showEditDrawer"
title="编辑字段"
size="400px"
:destroy-on-close="true"
:with-footer="true"
>
<el-form :model="editForm" label-width="80px">
<el-form-item label="字段名">
<el-input v-model="editForm.name" disabled></el-input>
<el-input v-model="editForm.name" disabled class="form-input"></el-input>
</el-form-item>
<el-form-item label="中文名">
<el-input v-model="editForm.label"></el-input>
<el-input v-model="editForm.label" class="form-input"></el-input>
</el-form-item>
<el-form-item label="表单类型">
<el-select v-model="editForm.type" class="w-100">
<el-select v-model="editForm.type" class="w-100 form-input">
<el-option label="文本" value="text"></el-option>
<el-option label="数字" value="number"></el-option>
<el-option label="日期" value="date"></el-option>
@ -108,15 +109,21 @@
</el-select>
</el-form-item>
<el-form-item label="数据选项" v-if="['select', 'checkbox', 'radio'].includes(editForm.type)">
<el-input v-model="editForm.options" placeholder="用逗号分隔多个选项"></el-input>
<el-input
v-model="editForm.options"
placeholder="用逗号分隔多个选项"
type="textarea"
:rows="3"
class="form-input"
></el-input>
</el-form-item>
</el-form>
<template #footer>
<div style="flex: auto">
<el-button @click="showEditDrawer = false">取消</el-button>
<el-button type="primary" @click="handleSaveField">保存</el-button>
<div class="drawer-footer">
<div class="footer-buttons">
<el-button @click="showEditDrawer = false">取 消</el-button>
<el-button type="primary" @click="handleSaveField">保 存</el-button>
</div>
</template>
</div>
</el-drawer>
</div>
</template>
@ -129,81 +136,498 @@ export default {
formatType: 'html',
codeContent: '',
showEditDrawer: false,
editForm: {
name: '',
label: '',
type: 'text',
options: ''
},
fieldList: [
currentTemplateIndex: 4,
templates: [
{
name: 'projectName',
label: '项目名称',
type: 'text',
options: ''
name: '报销贴单',
content: `
<div style="padding: 20px;">
<div style="background: white;">
<h2 style="text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 20px;">苏州市河道管理处报销贴单</h2>
<div style="display: flex; justify-content: space-between; margin-bottom: 20px; font-size: 14px;">
<span>科室：{{department}}</span>
<span>{{year}}年{{month}}月{{day}}日</span>
</div>
<table style="width: 100%; border-collapse: collapse; font-size: 14px; background: white;">
<tbody>
<tr>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">职工姓名</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{name}}</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">退休/在职</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{status}}</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">家属姓名</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{familyName}}</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">与本人关系</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{relation}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">内容</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">发票金额</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">报销比例</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{medicalActualAmount}}</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;" rowspan="2">报销(领款)人</td>
<td style="border: 1px solid #000; padding: 8px; height: 60px; vertical-align: middle; text-align: center; background-color: white;" colspan="3" rowspan="2">{{name}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">门诊医药费</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{medicalInvoiceValue}}</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{medicalReimbursementRatio}}</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{medicalActualAmount}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">住院医药费</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{hospitalInvoiceValue}}</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{hospitalReimbursementRatio}}</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{hospitalActualAmount}}</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">科室负责人</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;" colspan="3">{{departmentHead}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">儿童医药费</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{childMedicalInvoiceValue}}</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{childMedicalReimbursementRatio}}</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{childMedicalActualAmount}}</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">财审科审核</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;" colspan="3">{{financialAudit}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">幼托费用</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{childcareInvoiceValue}}</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">无</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{childcareActualAmount}}</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">分管领导审核</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;" colspan="3">{{leaderAudit}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">子女保险费</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{childInsuranceInvoiceValue}}</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">无</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{childInsuranceActualAmount}}</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">财务分管领导审核</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;" colspan="3">{{financialLeaderAudit}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">合计</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;" colspan="3">{{totalAmount}}</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;" rowspan="2">单位负责人审批</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;" colspan="3" rowspan="2">{{unitLeaderAudit}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">报销金额(大写)</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;" colspan="3">{{upperCaseAmount}}</td>
</tr>
</tbody>
</table>
</div>
</div>`
},
{
name: 'budgetAmount',
label: '预算金额',
type: 'number',
options: ''
name: '公务接待结算单',
content: `
<div style="background: #fff; padding: 20px;">
<div style="position: relative; width: 100%; padding: 20px;">
<h2 style="text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 20px;">苏州市河道管理处公务接待结算单</h2>
<table style="width: 100%; border-collapse: collapse; font-family: SimSun, serif;">
<tbody>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">科室</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;" colspan="2">{{department}}</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">事由</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;" colspan="2">{{reason}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">日期</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;" colspan="2">{{date}}</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">就餐地点</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;" colspan="2">{{diningLocation}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;" rowspan="2">就餐人数</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 100px; background-color: #fff; text-align: center; font-weight: normal;">接待人数</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{visitorCount}}</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;" rowspan="2">金额(元)</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 100px; background-color: #fff; text-align: center; font-weight: normal;">餐费</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{mealsFee}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 100px; background-color: #fff; text-align: center; font-weight: normal;">陪同人数</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{accompanyCount}}</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 100px; background-color: #fff; text-align: center; font-weight: normal;">住宿费</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{accommodationFee}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">科室经办人</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;" colspan="2">{{handler}}</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">综合科意见</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;" colspan="2">{{comprehensiveOpinion}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 80px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">分管领导意见</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 80px; text-align: left; min-height: 24px;" colspan="5">{{leaderOpinion}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 80px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">备注</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 80px; text-align: left; min-height: 24px;" colspan="5">{{remark}}</td>
</tr>
</tbody>
</table>
</div>
</div>`
},
{
name: 'paymentDate',
label: '支付日期',
type: 'date',
options: ''
name: '会议审批表',
content: `
<div style="background: white;">
<h2 style="text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 20px;">苏州市河道管理处会议审批表</h2>
<div style="display: flex; justify-content: flex-end; margin-bottom: 20px; font-size: 14px;">
<div>
<span>{{year}}</span>年
<span>{{month}}</span>月
<span>{{day}}</span>日
</div>
</div>
<table style="width: 100%; border-collapse: collapse; font-size: 14px; background: white;">
<tbody>
<tr>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 25%;">申请部门</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{department}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center;">会议名称</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{meetingName}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center;">会议类别</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">（{{meetingType}}）类会议</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center;">会议起止日期及天数</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{duration}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center;">会议地点</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{location}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center;">会议规模</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">代表人数：{{representativeCount}} 工作人员数：{{staffCount}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center;">会议经费预算（元）</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{totalBudget}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center;">其中：住宿费</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{accommodationFee}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center;">伙食费</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{mealsFee}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center;">租场费</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{venueFee}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center;">其他费用</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{otherFees}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center;">科室负责人审核</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{departmentApproval}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center;">分管领导审核</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{sectionApproval}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center;">综合科审核</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{comprehensiveApproval}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center;">单位负责人审核</td>
<td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{unitApproval}}</td>
</tr>
</tbody>
</table>
</div>`
},
{
name: 'paymentType',
label: '支付方式',
type: 'select',
options: '现金,银行转账,支票,其他'
name: '公务接待申请单',
content: `
<div style="background: #fff; padding: 20px;">
<div style="position: relative; width: 100%; padding: 20px;">
<h2 style="text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 20px;">苏州市河道管理处公务接待申请单</h2>
<table style="width: 100%; border-collapse: collapse; font-family: SimSun, serif;">
<tbody>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">申请科室</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;" colspan="2">{{department}}</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">申请理由</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;" colspan="2">{{reason}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">申请日期</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;" colspan="2">{{applyDate}}</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;" colspan="3"></td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;" rowspan="2">预计就餐人数</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 100px; background-color: #fff; text-align: center; font-weight: normal;">接待人数</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{visitorCount}}</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;" rowspan="2">预计金额<br>(元)</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 100px; background-color: #fff; text-align: center; font-weight: normal;">餐费</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{mealsFee}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 100px; background-color: #fff; text-align: center; font-weight: normal;">陪同人数</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{accompanyCount}}</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 100px; background-color: #fff; text-align: center; font-weight: normal;">住宿费</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{accommodationFee}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">科室经办人</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;" colspan="2">{{handler}}</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">综合科意见</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;" colspan="2">{{comprehensiveOpinion}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 80px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">分管领导意见</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 80px; text-align: left; min-height: 24px;" colspan="5">{{leaderOpinion}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 80px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">备注</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 80px; text-align: left; min-height: 24px;" colspan="5">{{remark}}</td>
</tr>
</tbody>
</table>
</div>
</div>`
},
{
name: 'isUrgent',
label: '是否加急',
type: 'checkbox',
options: ''
name: '水电费结算单',
content: `
<div style="background: #fff; padding: 20px;">
<div style="position: relative; width: 100%; padding: 20px;">
<h2 style="text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 20px;">水电费结算单</h2>
<table style="width: 100%; border-collapse: collapse; font-family: SimSun, serif;">
<tbody>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">费用发生地点：</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;" colspan="3">{{location}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">上期读数</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{previousReading}}</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">实际使用水/电量</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{usageAmount}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">年 月 日读数</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{currentReading}}</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">水/电费单价</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{unitPrice}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">总费用</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{totalAmount}}元</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">大写：</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{amountInWords}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">借水/电单位</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{borrower}}</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">经办人</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{handler}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">经办科室</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{department}}</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">科室负责人</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{departmentHead}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">发票预留电话</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{phone}}</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">分管领导</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{leader}}</td>
</tr>
</tbody>
</table>
<div style="margin-top: 20px; text-align: right;">
<div style="font-size: 16px;">
申请日期：{{applyDate}}
</div>
</div>
</div>
</div>`
},
{
name: 'approvalStatus',
label: '审批状态',
type: 'radio',
options: '待审批,已通过,已拒绝'
name: '报销贴单简易版',
content: `
<div style="background: #fff; padding: 20px;">
<div style="position: relative; width: 100%; padding: 20px;">
<h2 style="text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 20px;">苏州市河道管理处报销贴单</h2>
<table style="width: 100%; border-collapse: collapse; font-family: SimSun, serif;">
<tbody>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; text-align: left;">科室：{{department}}</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; text-align: right;" colspan="2">{{year}}年{{month}}月{{day}}日</td>
</tr>
</tbody>
</table>
<table style="width: 100%; border-collapse: collapse; font-family: SimSun, serif; margin-top: -1px;">
<tbody>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 33%; background-color: #fff; text-align: center; font-weight: normal;">用途说明</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 33%; background-color: #fff; text-align: center; font-weight: normal;">金额</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 34%; background-color: #fff; text-align: center; padding-right: 160px;"rowspan="7">附单据{{receiptCount}}张</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{purpose1}}</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;">{{amount1}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{purpose2}}</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;">{{amount2}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{purpose3}}</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;">{{amount3}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{purpose4}}</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;">{{amount4}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{purpose5}}</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;">{{amount5}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center; font-weight: normal;">合计</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;">{{totalAmount}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center; font-weight: normal;">报销金额(大写)</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;" colspan="2">{{amountInWords}}</td>
</tr>
</tbody>
</table>
<table style="width: 100%; border-collapse: collapse; font-family: SimSun, serif; margin-top: -1px;">
<tbody>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 50%; background-color: #fff; text-align: center; font-weight: normal; color: #8b4513;">报销(领款)人</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;">{{applicant}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 50%; background-color: #fff; text-align: center; font-weight: normal; color: #8b4513;">科室负责人</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;">{{departmentHead}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 50%; background-color: #fff; text-align: center; font-weight: normal; color: #8b4513;">财审科审核</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;">{{financialAudit}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 50%; background-color: #fff; text-align: center; font-weight: normal; color: #8b4513;">分管领导审核</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;">{{leaderAudit}}</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 50%; background-color: #fff; text-align: center; font-weight: normal; color: #8b4513;">财务分管领导审核</td>
</tbody>
</table>
</div>
</div>`
}
]
],
editForm: {
name: '测试字段',
label: '测试标签',
type: 'text',
options: '',
required: false,
placeholder: ''
},
fieldList: [],
previewContent: '',
fieldMetadata: {},
}
},
mounted() {
this.loadTemplate(this.currentTemplateIndex);
this.$nextTick(() => {
this.handleRefresh();
});
},
watch: {
currentTemplateIndex: {
immediate: true,
handler(newVal) {
this.loadTemplate(newVal);
}
},
formatType: {
immediate: true,
handler(val) {
if (val === 'html') {
this.codeContent = '<!DOCTYPE html>\n<html>\n<head>\n <title>支付表格</title>\n</head>\n<body>\n <!-- 这里将显示生成的HTML代码 -->\n</body>\n</html>'
this.loadTemplate(this.currentTemplateIndex);
} else {
this.codeContent = '<?xml version="1.0" encoding="UTF-8"?>\n<w:document xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main">\n <!-- 这里将显示生成的DOCX代码 -->\n</w:document>'
this.previewContent = ''
}
}
}
},
methods: {
loadTemplate(index) {
if (this.templates && this.templates[index]) {
this.currentTemplateIndex = index;
this.codeContent = this.templates[index].content;
}
},
nextTemplate() {
const nextIndex = (this.currentTemplateIndex + 1) % this.templates.length;
this.loadTemplate(nextIndex);
},
prevTemplate() {
const prevIndex = (this.currentTemplateIndex - 1 + this.templates.length) % this.templates.length;
this.loadTemplate(prevIndex);
},
handleRefresh() {
// 实现刷新预览的逻辑
let processedContent = this.codeContent;
const variableRegex = /\{\{([^}]+)\}\}/g;
const matches = this.codeContent.matchAll(variableRegex);
const variables = new Set();
for (const match of matches) {
variables.add(match[1]);
}
this.updateFieldMetadata(Array.from(variables));
processedContent = processedContent.replace(/\{\{[^}]+\}\}/g, '');
this.previewContent = processedContent;
},
handleUpload() {
// 实现文件上传的逻辑
},
handleEditField(field) {
this.editForm = { ...field }
this.showEditDrawer = true
this.editForm = { ...field };
this.showEditDrawer = true;
console.log('正在编辑字段:', field.name);
},
handleSaveField() {
const index = this.fieldList.findIndex(item => item.name === this.editForm.name)
if (index > -1) {
this.fieldList[index] = { ...this.editForm }
const { name } = this.editForm;
if (this.fieldMetadata[name]) {
this.fieldMetadata[name] = { ...this.editForm };
}
this.showEditDrawer = false
this.generateFieldList();
this.showEditDrawer = false;
},
getTypeDisplay(type) {
const typeMap = {
@ -216,11 +640,49 @@ export default {
}
return typeMap[type] || type
},
handleCancel() {
this.$router.back();
},
handleSave() {
// 这里添加保存逻辑
this.$message.success('保存成功')
// 保存成功后返回列表页
this.$router.push('/business-config/pay-form')
this.$message.success('保存成功');
this.$router.push('/business-config/pay-form');
},
updateFieldMetadata(variables) {
const updatedMetadata = {};
variables.forEach(varName => {
if (this.fieldMetadata[varName]) {
updatedMetadata[varName] = this.fieldMetadata[varName];
} else {
updatedMetadata[varName] = {
name: varName,
label: this.formatVariableName(varName),
type: 'text',
options: '',
required: false,
placeholder: `请输入${this.formatVariableName(varName)}`
};
}
});
this.fieldMetadata = updatedMetadata;
this.generateFieldList();
console.log('字段元数据已更新:', this.fieldMetadata);
},
generateFieldList() {
this.fieldList = Object.values(this.fieldMetadata);
},
formatVariableName(name) {
return name
.replace(/([A-Z])/g, ' $1')
.replace(/^./, str => str.toUpperCase())
.trim();
},
showDrawerOnly() {
this.showEditDrawer = true;
console.log('尝试只打开抽屉');
}
}
}
@ -314,6 +776,16 @@ export default {
.text-muted {
color: #6c757d;
}
.field-name,
.field-label {
display: block;
word-break: break-all;
word-wrap: break-word;
white-space: normal;
line-height: 1.4;
font-size: 13px;
}
}
.w-100 {
@ -357,6 +829,45 @@ export default {
}
}
}
.drawer-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 16px;
background: #fff;
border-top: 1px solid #e8e8e8;
.footer-buttons {
display: flex;
justify-content: center;
gap: 16px;
}
}
.form-input {
width: 100%;
:deep(.el-input__inner),
:deep(.el-textarea__inner) {
white-space: normal;
word-wrap: break-word;
word-break: break-all;
}
:deep(.el-select) {
width: 100%;
}
}
.el-form-item {
margin-bottom: 22px;
:deep(.el-form-item__label) {
line-height: 1.5;
}
}
</style>

324
src/views/contract/components/printFundApproval.vue
Unescape View File

@ -0,0 +1,324 @@
<template>
<div>
<xy-dialog title="打印预览" :is-show.sync="isShow" :width="90" @on-ok="print" ok-text="打印">
<template v-slot:normalContent>
<div class="white-container" ref="printtable">
<div class="form-container">
<h2 class="form-title">苏州市河道管理处资金划拨审批单</h2>
<table class="approval-table">
<tr class="border-bottom">
<td class="label" colspan="2" width="50%">项目名称：</td>
<td class="right-align" colspan="2" width="50%">本次为第<span class="underline">&nbsp;&nbsp;&nbsp;</span>次付款</td>
</tr>
<tr class="border-bottom">
<td class="label" colspan="2">承包商/供货商：</td>
<td class="label" colspan="2">合同服务时间：</td>
</tr>
<tr>
<td class="header-cell text-center" colspan="2">付款情形</td>
<td class="header-cell text-center">金额(单位：元)</td>
<td class="header-cell text-center">备注</td>
</tr>
<tr>
<td class="payment-code text-center">A</td>
<td class="payment-desc">合同金额</td>
<td class="amount-col"></td>
<td class="remark-col"></td>
</tr>
<tr>
<td class="payment-code text-center">B</td>
<td class="payment-desc">审计金额</td>
<td class="amount-col"></td>
<td class="remark-col"></td>
</tr>
<tr>
<td class="payment-code text-center">C</td>
<td class="payment-desc">前期累计已付款</td>
<td class="amount-col"></td>
<td class="remark-col"></td>
</tr>
<tr>
<td class="payment-code text-center">D</td>
<td class="payment-desc">本期拟款</td>
<td class="amount-col"></td>
<td class="remark-col"></td>
</tr>
<tr class="highlight-row">
<td class="payment-code text-center">E</td>
<td class="payment-desc">本期应付款</td>
<td class="amount-col"></td>
<td class="remark-col">
<div class="checkbox-row">
<label class="checkbox-item"><input type="checkbox"> 预付款</label>
<label class="checkbox-item"><input type="checkbox"> 进度款</label>
<label class="checkbox-item"><input type="checkbox"> 结算款</label>
</div>
<div class="checkbox-row">
<label class="checkbox-item"><input type="checkbox"> 质保金</label>
<label class="checkbox-item"><input type="checkbox"> <span class="underline">&nbsp;&nbsp;&nbsp;&nbsp;</span>(其他)</label>
</div>
</td>
</tr>
<tr>
<td class="payment-code text-center">F</td>
<td class="payment-desc">累计支付</td>
<td class="amount-col"></td>
<td class="remark-col"></td>
</tr>
<tr>
<td class="payment-code text-center">G</td>
<td class="payment-desc">累计拟款</td>
<td class="amount-col"></td>
<td class="remark-col"></td>
</tr>
<tr>
<td class="payment-code text-center">H</td>
<td class="payment-desc">质保金</td>
<td class="amount-col"></td>
<td class="remark-col">
<span class="underline">&nbsp;&nbsp;&nbsp;</span>%，质保期<span class="underline">&nbsp;&nbsp;&nbsp;</span>年，需审计的以审计价为计费依据。
</td>
</tr>
<tr>
<td class="full-label" colspan="4">资金划支渠道：</td>
</tr>
<tr class="sign-row">
<td class="sign-cell" width="25%">
<div>业务科室：</div>
<div style="margin-top: 60px;">经办人：</div>
</td>
<td class="sign-cell" width="35%">业务科室负责人：</td>
<td class="sign-cell" colspan="2">业务科室分管领导：</td>
</tr>
<tr class="sign-blank-row">
<td class="sign-cell"></td>
<td class="sign-cell"></td>
<td class="sign-cell" colspan="2"></td>
</tr>
<tr class="sign-row">
<td class="sign-cell">财务审计科：</td>
<td class="sign-cell">财务审计科分管领导：</td>
<td class="sign-cell" colspan="2">单位负责人：</td>
</tr>
<tr class="sign-blank-row">
<td class="sign-cell"></td>
<td class="sign-cell"></td>
<td class="sign-cell" colspan="2"></td>
</tr>
</table>
</div>
</div>
</template>
</xy-dialog>
</div>
</template>
<script>
import html2canvas from 'html2canvas'
import * as printJS from "print-js";
export default {
name: 'printFundApproval',
data() {
return {
isShow: false,
approvalData: null
}
},
methods: {
getApprovalData(id) {
// 临时测试数据
this.approvalData = {
projectName: '测试项目',
paymentCount: '1',
contractor: '测试供货商',
serviceTime: '2024-01-01至2024-12-31',
contractAmount: '100000',
auditAmount: '98000',
previousPayment: '50000',
currentProposed: '30000',
currentPayable: '30000',
paymentType: '进度款',
totalPaid: '80000',
totalProposed: '80000',
warranty: '5',
warrantyPeriod: '2',
fundChannel: '项目专项资金',
department: '工程科',
departmentHead: '张三',
departmentLeader: '李四',
operator: '王五',
financeHead: '赵六',
financeLeader: '钱七',
unitHead: '孙八'
}
},
async print() {
try {
let canvas = await html2canvas(this.$refs['printtable'], {
backgroundColor: null,
useCORS: true,
})
printJS({
printable: canvas.toDataURL(),
type: 'image',
documentTitle: '苏州市河道管理处资金划拨审批单',
style: '@page{margin:auto;}'
})
} catch (error) {
console.error('打印失败:', error)
}
}
}
}
</script>
<style scoped>
.white-container {
background: #fff;
padding: 20px;
}
.form-container {
position: relative;
width: 100%;
padding: 20px;
font-family: SimSun, serif;
}
.form-title {
text-align: center;
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
.approval-table {
width: 100%;
border-collapse: collapse;
font-size: 16px;
}
.approval-table td {
border: 1px solid #000;
padding: 8px 12px;
height: 40px;
}
.border-bottom td {
border-left: 1px solid #000;
border-right: 1px solid #000;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.label {
text-align: left;
color: #000;
}
.right-align {
text-align: right;
}
.header-cell {
background-color: #f0f0f0;
font-weight: bold;
}
.text-center {
text-align: center;
}
.left-col {
display: flex;
align-items: center;
}
.payment-item {
display: flex;
align-items: center;
padding-left: 10px;
}
.payment-code {
color: #00008B;
font-weight: bold;
font-size: 18px;
margin-right: 10px;
}
.amount-col {
text-align: center;
}
.highlight-row {
background-color: #f5f5dc;
}
.remark-col {
padding: 5px;
vertical-align: middle;
}
.checkbox-row {
display: flex;
justify-content: flex-start;
margin: 5px 0;
}
.checkbox-item {
margin-right: 15px;
display: flex;
align-items: center;
}
.full-label {
text-align: left;
color: #00008B;
padding-left: 10px;
}
.sign-row td {
border-left: 1px solid #000;
border-right: 1px solid #000;
border-top: none;
border-bottom: none;
color: #00008B;
height: 30px;
padding: 8px 12px;
vertical-align: top;
}
.sign-blank-row td {
height: 60px;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-top: none;
border-bottom: 1px solid #000;
}
.sign-cell {
padding-left: 10px;
vertical-align: top;
text-align: left;
}
.underline {
text-decoration: underline;
}
@media print {
.white-container {
padding: 0;
}
.form-container {
padding: 0;
}
.approval-table td {
border: 1px solid #000;
}
}
</style>

228
src/views/contract/components/printMeetingSettlement.vue
Unescape View File

@ -0,0 +1,228 @@
<template>
<div>
<xy-dialog title="打印预览" :is-show.sync="isShow" :width="90" @on-ok="print" ok-text="打印">
<template v-slot:normalContent>
<div class="white-container" ref="printtable">
<div class="form-container">
<h2 class="form-title">苏州市河道管理处定点办会结算单</h2>
<div class="date-row">
<div></div>
<div class="date-section">年&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;日</div>
</div>
<table class="settlement-table">
<colgroup>
<col style="width: 30%">
<col style="width: 35%">
<col style="width: 35%">
</colgroup>
<tr>
<td class="label">申请部门</td>
<td class="content" colspan="2"></td>
</tr>
<tr>
<td class="label">会议名称</td>
<td class="content" colspan="2"></td>
</tr>
<tr>
<td class="label">会议类别</td>
<td class="content" colspan="2">（&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;）类会议</td>
</tr>
<tr>
<td class="label">会议起止日期及天数</td>
<td class="content" colspan="2"></td>
</tr>
<tr>
<td class="label">会议地点</td>
<td class="content" colspan="2"></td>
</tr>
<tr>
<td class="label">会议规模</td>
<td class="content" colspan="2">代表人数：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;工作人员数：</td>
</tr>
<tr>
<td class="label">会议经费预算（元）</td>
<td class="budget-column">预算金额</td>
<td class="budget-column">决算金额</td>
</tr>
<tr>
<td class="label">合计</td>
<td class="content"></td>
<td class="content"></td>
</tr>
<tr>
<td class="label">其中：住宿费</td>
<td class="content"></td>
<td class="content"></td>
</tr>
<tr>
<td class="label">伙食费</td>
<td class="content"></td>
<td class="content"></td>
</tr>
<tr>
<td class="label">租场费</td>
<td class="content"></td>
<td class="content"></td>
</tr>
<tr>
<td class="label">其他费用</td>
<td class="content"></td>
<td class="content"></td>
</tr>
<tr>
<td class="label">科室负责人审核</td>
<td class="content" colspan="2"></td>
</tr>
<tr>
<td class="label">分管领导审核</td>
<td class="content" colspan="2"></td>
</tr>
<tr>
<td class="label">财审科审核</td>
<td class="content" colspan="2"></td>
</tr>
<tr>
<td class="label">财审科分管领导审核</td>
<td class="content" colspan="2"></td>
</tr>
<tr>
<td class="label">单位负责人审核</td>
<td class="content" colspan="2"></td>
</tr>
</table>
</div>
</div>
</template>
</xy-dialog>
</div>
</template>
<script>
import html2canvas from 'html2canvas'
import * as printJS from "print-js";
export default {
name: 'printMeetingSettlement',
data() {
return {
isShow: false,
meetingData: null
}
},
methods: {
getMeetingData(id) {
// 临时测试数据
this.meetingData = {
department: '财务科',
meetingName: '测试会议',
meetingType: '工作',
meetingDate: '2024-06-10至2024-06-12',
meetingDays: '3',
meetingLocation: '苏州市',
representativeCount: '20',
staffCount: '5',
budgetAmount: '10000',
settlementAmount: '9500',
totalAmount: '9500',
accommodationFee: '4000',
mealsFee: '3000',
venueFee: '2000',
otherFees: '500'
}
},
async print() {
try {
let canvas = await html2canvas(this.$refs['printtable'], {
backgroundColor: null,
useCORS: true,
})
printJS({
printable: canvas.toDataURL(),
type: 'image',
documentTitle: '苏州市河道管理处定点办会结算单',
style: '@page{margin:auto;}'
})
} catch (error) {
console.error('打印失败:', error)
}
}
}
}
</script>
<style scoped>
.white-container {
background: #fff;
padding: 20px;
}
.form-container {
position: relative;
width: 100%;
padding: 20px;
font-family: SimSun, serif;
}
.form-title {
text-align: center;
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
.date-row {
display: flex;
justify-content: space-between;
width: 100%;
margin-bottom: 10px;
}
.date-section {
text-align: right;
font-size: 16px;
margin-right: 10px;
}
.settlement-table {
width: 100%;
border-collapse: collapse;
font-size: 16px;
}
.settlement-table td {
border: 1px solid #000;
padding: 8px 12px;
height: 40px;
}
.label {
text-align: center;
font-weight: normal;
color: #3a5274;
background-color: #f5f9ff;
}
.content {
text-align: left;
}
.budget-column {
text-align: center;
background-color: #f5f9ff;
color: #3a5274;
}
@media print {
.white-container {
padding: 0;
}
.form-container {
padding: 0;
}
.settlement-table td {
border: 1px solid #000;
}
}
</style>

347
src/views/contract/components/printReimbursementSimple.vue
Unescape View File

@ -0,0 +1,347 @@
<template>
<div>
<xy-dialog title="打印预览" :is-show.sync="isShow" :width="90" @on-ok="print" ok-text="打印">
<template v-slot:normalContent>
<div class="white-container" ref="printtable">
<div class="form-container">
<h2 class="form-title">苏州市河道管理处报销贴单</h2>
<div class="form-header">
<div class="department-section">科室：</div>
<div class="date-section">年&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日</div>
</div>
<table class="reimbursement-table">
<colgroup>
<col style="width: 30%">
<col style="width: 20%">
<col style="width: 20%">
<col style="width: 15%">
<col style="width: 10%">
</colgroup>
<tr>
<th class="purpose-col" rowspan="2">用途说明</th>
<th class="amount-col" rowspan="2">金额</th>
<th class="person-col" rowspan="2">报销(领款)人</th>
<th class="fill-col" rowspan="2"></th>
<td class="attachment-col" rowspan="12">
<div class="vertical-text-container">
<div class="vertical-text">附</div>
<div class="vertical-text">单</div>
<div class="vertical-text">据</div>
<div class="vertical-text">&nbsp;</div>
<div class="vertical-text">张</div>
</div>
</td>
</tr>
<tr></tr>
<tr>
<td></td>
<td></td>
<td rowspan="2" class="person-section blue-bg">科室负责人</td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td rowspan="2" class="person-section blue-bg">财审科审核</td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td rowspan="2" class="person-section blue-bg">分管领导审核</td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td rowspan="2" class="person-section blue-bg">财务分管领导审核</td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td class="total-label">合计</td>
<td></td>
<td rowspan="2" class="person-section blue-bg">单位负责人审批</td>
<td rowspan="2"></td>
</tr>
<tr>
<td class="amount-chinese">报销金额(大写)</td>
<td class="amount-units">
<div class="units-wrapper">
<span>万</span>
<span>仟</span>
<span>佰</span>
<span>拾</span>
<span>元</span>
<span>角</span>
<span>分</span>
</div>
</td>
</tr>
</table>
</div>
</div>
</template>
</xy-dialog>
</div>
</template>
<script>
import html2canvas from 'html2canvas'
import * as printJS from "print-js";
export default {
name: 'print-reimbursement-simple',
data() {
return {
isShow: false,
reimbursementData: null
}
},
computed: {
getReimbursePerson() { return this.reimbursementData?.reimbursePerson || '' }
},
methods: {
getReimbursementData(id) {
// 临时测试数据
this.reimbursementData = {
reimbursePerson: '张三',
department: '财务科',
date: '2024-06-10',
amount: '2000',
amountInWords: '贰仟元整'
}
},
async print() {
try {
let canvas = await html2canvas(this.$refs['printtable'], {
backgroundColor: null,
useCORS: true,
})
printJS({
printable: canvas.toDataURL(),
type: 'image',
documentTitle: '苏州市河道管理处报销贴单',
style: '@page{margin:auto;}'
})
} catch (error) {
console.error('打印失败:', error)
}
}
}
}
</script>
<style scoped>
.white-container {
background: #fff;
padding: 20px;
}
.form-container {
position: relative;
width: 100%;
padding: 20px;
font-family: SimSun, serif;
}
.form-title {
text-align: center;
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
.form-header {
display: flex;
justify-content: space-between;
width: 90%;
margin-bottom: 10px;
}
.department-section {
text-align: left;
font-size: 16px;
width: 40%;
}
.date-section {
text-align: right;
font-size: 16px;
width: 60%;
}
.reimbursement-table {
width: 100%;
border-collapse: collapse;
font-size: 16px;
}
.reimbursement-table th,
.reimbursement-table td {
border: 1px solid #000;
padding: 8px 10px;
height: 40px;
text-align: center;
}
.purpose-col {
width: 30%;
}
.amount-col {
width: 20%;
}
.person-col {
width: 20%;
}
.fill-col {
width: 15%;
}
.attachment-col {
width: 10%;
text-align: center;
vertical-align: middle;
font-size: 14px;
padding: 5px;
background-color: #f9f9f9;
border-top: none !important;
border-bottom: none !important;
border-right: none !important;
border-left: 1px solid #000;
}
.reimbursement-table td.attachment-col {
border-top: none !important;
border-bottom: none !important;
border-right: none !important;
border-left: 1px solid #000;
}
.vertical-text-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.vertical-text {
writing-mode: vertical-lr;
text-orientation: upright;
display: inline-block;
margin: 5px auto;
font-weight: normal;
color: #333;
letter-spacing: 3px;
}
.blue-bg {
background-color: #e6f7ff;
color: #0056b3;
}
.person-section {
text-align: center;
vertical-align: middle;
}
.total-label {
text-align: center;
font-weight: bold;
}
.amount-chinese {
text-align: left;
font-weight: bold;
padding-left: 20px;
width: 25%;
}
.amount-units {
padding: 0;
height: 40px;
text-align: center;
}
.units-wrapper {
display: flex;
justify-content: space-around;
width: 100%;
height: 100%;
align-items: center;
}
.units-wrapper span {
display: inline-block;
width: 14%;
text-align: center;
}
.header-row td,
.header-row th,
.header-cell {
padding: 10px;
border: none !important;
border-width: 0 !important;
box-shadow: none !important;
outline: none !important;
}
table.reimbursement-table .header-row td,
table.reimbursement-table .header-row th {
border: 0 !important;
}
.reimbursement-table tr.header-row {
border: none !important;
border-width: 0 !important;
}
@media print {
.white-container {
padding: 0;
}
.form-container {
padding: 0;
}
.reimbursement-table th,
.reimbursement-table td {
border: 1px solid #000;
}
.header-cell {
border: none !important;
}
.reimbursement-table td.attachment-col {
border-top: none !important;
border-bottom: none !important;
border-right: none !important;
border-left: 1px solid #000 !important;
}
}
</style>

37
src/views/contract/paymentRegistrationList.vue
Unescape View File

@ -155,6 +155,9 @@
<printReceptionSettlement ref="printReceptionSettlement"></printReceptionSettlement>
<printReimbursement ref="printReimbursement"></printReimbursement>
<printUtilityBill ref="printUtilityBill"></printUtilityBill>
<print-reimbursement-simple ref="printReimbursementSimple"></print-reimbursement-simple>
<printMeetingSettlement ref="printMeetingSettlement"></printMeetingSettlement>
<printFundApproval ref="printFundApproval"></printFundApproval>
<detailPaymentRegistration ref="detailPaymentRegistration" @success="getFundLogs"></detailPaymentRegistration>
</div>
</template>
@ -175,6 +178,9 @@ import printReceptionApproval from "./components/printReceptionApproval";
import printReceptionSettlement from "./components/printReceptionSettlement";
import printReimbursement from "./components/printReimbursement";
import printUtilityBill from "./components/printUtilityBill";
import printReimbursementSimple from "./components/printReimbursementSimple";
import printMeetingSettlement from "./components/printMeetingSettlement";
import printFundApproval from "./components/printFundApproval";
export default {
components: {
@ -185,6 +191,9 @@ export default {
printReceptionSettlement,
printReimbursement,
printUtilityBill,
'print-reimbursement-simple': printReimbursementSimple,
printMeetingSettlement,
printFundApproval,
detailPaymentRegistration,
},
data() {
@ -566,6 +575,34 @@ export default {
} else if(rowIndex === 6) { // 第七行
this.$refs['printUtilityBill'].getUtilityData(row.id);
this.$refs['printUtilityBill'].isShow = true;
} else if(rowIndex === 7) { // 第八行
try {
if (this.$refs['printReimbursementSimple']) {
this.$refs['printReimbursementSimple'].getReimbursementData(row.id);
this.$refs['printReimbursementSimple'].isShow = true;
} else {
this.$Message.warning('打印组件未正确加载');
}
} catch (error) {
console.error('打印错误:', error);
this.$Message.error('打印失败: ' + error.message);
}
} else if(rowIndex === 8) { // 第九行，打印会议结算单
try {
this.$refs['printMeetingSettlement'].getMeetingData(row.id);
this.$refs['printMeetingSettlement'].isShow = true;
} catch (error) {
console.error('打印会议结算单错误:', error);
this.$Message.error('打印会议结算单失败: ' + error.message);
}
} else if(rowIndex === 9) { // 第十行，打印资金划拨审批单
try {
this.$refs['printFundApproval'].getApprovalData(row.id);
this.$refs['printFundApproval'].isShow = true;
} catch (error) {
console.error('打印资金划拨审批单错误:', error);
this.$Message.error('打印资金划拨审批单失败: ' + error.message);
}
} else {
this.$Message.warning('该行不支持打印功能');
}

Write Preview
Loading…
Cancel
Save