|
|
<template>
|
|
|
<div style="padding: 0 20px;">
|
|
|
<lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="新增支付表格">
|
|
|
</lx-header>
|
|
|
|
|
|
<div class="content-wrapper">
|
|
|
<!-- 左侧面板 -->
|
|
|
<div class="left-panel">
|
|
|
<!-- 预览区 -->
|
|
|
<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" v-html="previewContent"></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-button
|
|
|
size="small"
|
|
|
v-if="formatType === 'docx'"
|
|
|
@click="handleUpload"
|
|
|
>上传文件</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="code-preview-container">
|
|
|
<el-input
|
|
|
type="textarea"
|
|
|
v-model="codeContent"
|
|
|
:rows="10"
|
|
|
resize="none"
|
|
|
class="code-editor"
|
|
|
></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 右侧面板 -->
|
|
|
<div class="right-panel">
|
|
|
<div class="field-config-container">
|
|
|
<div class="panel-header">
|
|
|
<h5 class="panel-title">字段配置</h5>
|
|
|
</div>
|
|
|
<div class="field-list">
|
|
|
<div
|
|
|
v-for="field in fieldList"
|
|
|
:key="field.name"
|
|
|
class="field-item"
|
|
|
@click="handleEditField(field)"
|
|
|
>
|
|
|
<el-row align="middle">
|
|
|
<el-col :span="8">
|
|
|
<span class="text-muted field-name">{{ field.name }}</span>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
<strong class="field-label">{{ field.label }}</strong>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
<span class="text-muted">{{ getTypeDisplay(field.type) }}</span>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 底部固定保存按钮 -->
|
|
|
<div class="footer-actions">
|
|
|
<div class="footer-content">
|
|
|
<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
|
|
|
: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 class="form-input"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="中文名">
|
|
|
<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 form-input">
|
|
|
<el-option label="文本" value="text"></el-option>
|
|
|
<el-option label="数字" value="number"></el-option>
|
|
|
<el-option label="日期" value="date"></el-option>
|
|
|
<el-option label="下拉选择" value="select"></el-option>
|
|
|
<el-option label="复选框" value="checkbox"></el-option>
|
|
|
<el-option label="单选框" value="radio"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="数据选项" v-if="['select', 'checkbox', 'radio'].includes(editForm.type)">
|
|
|
<el-input
|
|
|
v-model="editForm.options"
|
|
|
placeholder="用逗号分隔多个选项"
|
|
|
type="textarea"
|
|
|
:rows="3"
|
|
|
class="form-input"
|
|
|
></el-input>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<div class="drawer-footer">
|
|
|
<div class="footer-buttons">
|
|
|
<el-button @click="showEditDrawer = false">取 消</el-button>
|
|
|
<el-button type="primary" @click="handleSaveField">保 存</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-drawer>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
name: 'AddPayForm',
|
|
|
data() {
|
|
|
return {
|
|
|
formatType: 'html',
|
|
|
codeContent: '',
|
|
|
showEditDrawer: false,
|
|
|
currentTemplateIndex: 0,
|
|
|
templates: [
|
|
|
{
|
|
|
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;">
|
|
|
<tr>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000; width: 25%;">项目名称：</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000; width: 25%;">{{projectName}}</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000; text-align: right;" colspan="2">本次为第<span style="display: inline-block; width: 30px; border-bottom: 1px solid #000; text-align: center;">{{paymentTimes}}</span>次付款</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">承包商/供货商：</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{contractor}}</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">合同服务时间：</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{serviceTime}}</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; text-align: center; background-color: #f5f5f5; border: 1px solid #000;" colspan="2">付款情形</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; text-align: center; background-color: #f5f5f5; border: 1px solid #000;">金额(单位：元)</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; text-align: center; background-color: #f5f5f5; border: 1px solid #000;">备注</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; text-align: center; border: 1px solid #000; width: 10%;">A</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">合同金额</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{contractAmount}}</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{contractRemark}}</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; text-align: center; border: 1px solid #000;">B</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">审计金额</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{auditAmount}}</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{auditRemark}}</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; text-align: center; border: 1px solid #000;">C</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">前期累计已付款</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{previousPayment}}</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{previousPaymentRemark}}</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; text-align: center; border: 1px solid #000;">D</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">本期拟款</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{currentPayment}}</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{currentPaymentRemark}}</td>
|
|
|
</tr>
|
|
|
<tr style="background-color: #f5f5f5;">
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; text-align: center; border: 1px solid #000;">E</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">本期应付款</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{currentDuePayment}}</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">
|
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
|
|
|
<label style="margin-right: 10px;"><input type="checkbox"> 预付款</label>
|
|
|
<label style="margin-right: 10px;"><input type="checkbox"> 进度款</label>
|
|
|
<label><input type="checkbox"> 结算款</label>
|
|
|
</div>
|
|
|
<div style="display: flex; justify-content: flex-start;">
|
|
|
<label style="margin-right: 20px;"><input type="checkbox"> 质保金</label>
|
|
|
<label><input type="checkbox"> <span style="text-decoration: underline;"> </span>(其他)</label>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; text-align: center; border: 1px solid #000;">F</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">累计支付</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{totalPaid}}</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{totalPaidRemark}}</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; text-align: center; border: 1px solid #000;">G</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">累计拟款</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{totalPlanned}}</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{totalPlannedRemark}}</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; text-align: center; border: 1px solid #000;">H</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">质保金</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{warranty}}</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">
|
|
|
<span style="text-decoration: underline;"> </span>%，质保期<span style="text-decoration: underline;"> </span>年，需审计的以审计价为计费依据。
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;" colspan="4">资金划支渠道：</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000; height: 100px; vertical-align: top;">
|
|
|
<div>业务科室：</div>
|
|
|
<div style="margin-top: 60px;">经办人：</div>
|
|
|
</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000; vertical-align: top;">业务科室负责人：</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000; vertical-align: top;" colspan="2">业务科室分管领导：</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000; height: 100px; vertical-align: top;">财务审计科：</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000; vertical-align: top;">财务审计科分管领导：</td>
|
|
|
<td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000; vertical-align: top;" colspan="2">单位负责人：</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>`
|
|
|
},
|
|
|
{
|
|
|
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>
|
|
|
<div style="width: 90%; margin-bottom: 20px; padding: 0 12px; display: flex;">
|
|
|
<div style="text-align: left; flex: 1; font-size: 16px;">科室：</div>
|
|
|
<div style="text-align: right; font-size: 16px;">年 月 日</div>
|
|
|
</div>
|
|
|
<table style="width: 100%; border-collapse: collapse; font-family: SimSun, serif;">
|
|
|
<colgroup>
|
|
|
<col style="width: 30%">
|
|
|
<col style="width: 20%">
|
|
|
<col style="width: 20%">
|
|
|
<col style="width: 15%">
|
|
|
<col style="width: 10%">
|
|
|
</colgroup>
|
|
|
<tbody>
|
|
|
<tr>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #fff; text-align: center; font-weight: bold;" rowspan="2">用途说明</td>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #fff; text-align: center; font-weight: bold;" rowspan="2">金额</td>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #fff; text-align: center; font-weight: bold;" rowspan="2">报销(领款)人</td>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #fff; text-align: center;" rowspan="12">
|
|
|
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;">
|
|
|
<div style="writing-mode: vertical-lr; text-orientation: upright; letter-spacing: 8px;">
|
|
|
附单据张
|
|
|
</div>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr></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: right;">{{amount1}}</td>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #e9ecef; text-align: center;" rowspan="2">科室负责人</td>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;" rowspan="2">{{departmentHead}}</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: right;">{{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: right;">{{amount3}}</td>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #e9ecef; text-align: center;" rowspan="2">财审科审核</td>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;" rowspan="2">{{financeApproval}}</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: right;">{{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: right;">{{amount5}}</td>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #e9ecef; text-align: center;" rowspan="2">分管领导审核</td>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;" rowspan="2">{{leaderApproval}}</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{purpose6}}</td>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: right;">{{amount6}}</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{purpose7}}</td>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: right;">{{amount7}}</td>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #e9ecef; text-align: center;" rowspan="2">财务分管领导审核</td>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;" rowspan="2">{{financeLeaderApproval}}</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{purpose8}}</td>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: right;">{{amount8}}</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; font-weight: bold; text-align: center;">合计</td>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: right;">{{total}}</td>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #e9ecef; text-align: center;" rowspan="2">单位负责人审批</td>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;" rowspan="2">{{unitLeaderApproval}}</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; font-weight: bold; text-align: center;">报销金额(大写)</td>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;">
|
|
|
<div style="display: flex; justify-content: space-around;">
|
|
|
<span>万</span>
|
|
|
<span>仟</span>
|
|
|
<span>佰</span>
|
|
|
<span>拾</span>
|
|
|
<span>元</span>
|
|
|
<span>角</span>
|
|
|
<span>分</span>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>`
|
|
|
},
|
|
|
{
|
|
|
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: 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: '公务接待结算单',
|
|
|
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;" colspan="2">{{getDepartment}}</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;" colspan="2">{{getReason}}</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;" colspan="2">{{getDate}}</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;" colspan="2">{{getDiningLocation}}</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;">{{getVisitorCount}}</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;">{{getMealsFee}}</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;">{{getAccompanyCount}}</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;">{{getAccommodationFee}}</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;" colspan="2">{{getHandler}}</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;" colspan="2">{{getComprehensiveOpinion}}</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;" colspan="5">{{getLeaderOpinion}}</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;" colspan="5">{{getRemark}}</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>`
|
|
|
},
|
|
|
{
|
|
|
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 12px; font-size: 16px; line-height: 1.5; height: 40px; 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 12px; font-size: 16px; line-height: 1.5; height: 40px; 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: '公务接待申请单',
|
|
|
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: '水电费结算单',
|
|
|
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: '定点办会结算单',
|
|
|
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>
|
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
|
|
|
<div></div>
|
|
|
<div style="text-align: right;">年 月 日</div>
|
|
|
</div>
|
|
|
<table style="width: 100%; border-collapse: collapse; font-family: SimSun, serif;">
|
|
|
<colgroup>
|
|
|
<col style="width: 30%">
|
|
|
<col style="width: 35%">
|
|
|
<col style="width: 35%">
|
|
|
</colgroup>
|
|
|
<tbody>
|
|
|
<tr>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; 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;" colspan="2">{{department}}</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; 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;" colspan="2">{{meetingName}}</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; 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;" colspan="2">（{{meetingType}}）类会议</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; 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;" colspan="2">{{duration}}</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; 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;" colspan="2">{{location}}</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; 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;" colspan="2">代表人数：{{representativeCount}} 工作人员数：{{staffCount}}</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; 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; 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; background-color: #fff; text-align: center; font-weight: normal;">决算金额</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; 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;">{{budgetTotal}}</td>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{settlementTotal}}</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; 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;">{{budgetAccommodation}}</td>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{settlementAccommodation}}</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; 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;">{{budgetMeals}}</td>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{settlementMeals}}</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; 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;">{{budgetVenue}}</td>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{settlementVenue}}</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; 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;">{{budgetOther}}</td>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{settlementOther}}</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; 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;" colspan="2">{{departmentApproval}}</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; 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;" colspan="2">{{leaderApproval}}</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; 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;" colspan="2">{{financeApproval}}</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; 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;" colspan="2">{{financeLeaderApproval}}</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; 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;" colspan="2">{{unitLeaderApproval}}</td>
|
|
|
</tr>
|
|
|
</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.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;
|
|
|
|
|
|
console.log('正在编辑字段:', field.name);
|
|
|
},
|
|
|
handleSaveField() {
|
|
|
const { name } = this.editForm;
|
|
|
|
|
|
if (this.fieldMetadata[name]) {
|
|
|
this.fieldMetadata[name] = { ...this.editForm };
|
|
|
}
|
|
|
|
|
|
this.generateFieldList();
|
|
|
|
|
|
this.showEditDrawer = false;
|
|
|
},
|
|
|
getTypeDisplay(type) {
|
|
|
const typeMap = {
|
|
|
'text': '文本',
|
|
|
'number': '数字',
|
|
|
'date': '日期',
|
|
|
'select': '下拉选择',
|
|
|
'checkbox': '复选框',
|
|
|
'radio': '单选框'
|
|
|
}
|
|
|
return typeMap[type] || type
|
|
|
},
|
|
|
handleCancel() {
|
|
|
this.$router.back();
|
|
|
},
|
|
|
handleSave() {
|
|
|
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('尝试只打开抽屉');
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.content-wrapper {
|
|
|
display: flex;
|
|
|
height: calc(100vh - 180px);
|
|
|
margin: 0 -20px;
|
|
|
padding: 0 20px;
|
|
|
margin-bottom: 60px;
|
|
|
}
|
|
|
|
|
|
.left-panel {
|
|
|
flex: 0 0 66.666667%;
|
|
|
max-width: 66.666667%;
|
|
|
padding-right: 20px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.right-panel {
|
|
|
flex: 0 0 33.333333%;
|
|
|
max-width: 33.333333%;
|
|
|
border-left: 1px solid #dee2e6;
|
|
|
padding-left: 20px;
|
|
|
}
|
|
|
|
|
|
.panel-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-bottom: 15px;
|
|
|
|
|
|
.panel-title {
|
|
|
margin: 0;
|
|
|
font-size: 16px;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.action-buttons {
|
|
|
display: flex;
|
|
|
gap: 10px;
|
|
|
align-items: center;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.preview-container,
|
|
|
.code-preview-container {
|
|
|
height: 300px;
|
|
|
border: 1px solid #dee2e6;
|
|
|
padding: 20px;
|
|
|
overflow-y: auto;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
.code-editor {
|
|
|
font-family: monospace;
|
|
|
font-size: 14px;
|
|
|
line-height: 1.5;
|
|
|
background-color: #f8f9fa;
|
|
|
}
|
|
|
|
|
|
.field-config-container {
|
|
|
flex: 1;
|
|
|
border: 1px solid #dee2e6;
|
|
|
padding: 20px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.field-list {
|
|
|
flex: 1;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
.field-item {
|
|
|
padding: 10px 0;
|
|
|
cursor: pointer;
|
|
|
border-bottom: 1px solid #dee2e6;
|
|
|
|
|
|
&:hover {
|
|
|
background-color: #f8f9fa;
|
|
|
}
|
|
|
|
|
|
&:last-child {
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
|
|
|
.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 {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.footer-actions {
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
background-color: #fff;
|
|
|
padding: 16px 20px;
|
|
|
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
|
|
|
z-index: 100;
|
|
|
border-top: 1px solid #eee;
|
|
|
}
|
|
|
|
|
|
.footer-content {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
gap: 20px;
|
|
|
|
|
|
.footer-button {
|
|
|
min-width: 120px;
|
|
|
height: 40px;
|
|
|
font-size: 14px;
|
|
|
padding: 0 30px;
|
|
|
border-radius: 4px;
|
|
|
font-weight: 500;
|
|
|
letter-spacing: 2px;
|
|
|
|
|
|
&:hover {
|
|
|
transform: translateY(-1px);
|
|
|
transition: all 0.2s;
|
|
|
}
|
|
|
|
|
|
&:active {
|
|
|
transform: translateY(1px);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.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>
|
|
|
|
|
|
|
|
|
|
