diff --git a/package.json b/package.json
index 91537c8..b04e3df 100644
--- a/package.json
+++ b/package.json
@@ -19,9 +19,10 @@
     "core-js": "3.6.5",
     "docx": "^9.4.1",
     "docx-parser": "^0.2.1",
+    "docx-preview": "^0.1.14",
     "docx2html": "^1.3.2",
     "docxtemplater": "^3.61.1",
-    "echarts": "^5.0.0",
+    "echarts": "^5.6.0",
     "element-ui": "2.13.2",
     "file-saver": "^2.0.5",
     "html2canvas": "^1.4.1",
diff --git a/src/api/businessConfig/businessConfig.js b/src/api/businessConfig/businessConfig.js
new file mode 100644
index 0000000..45842ef
--- /dev/null
+++ b/src/api/businessConfig/businessConfig.js
@@ -0,0 +1,35 @@
+import request from "@/utils/request";
+
+// 新增支付表格模版.
+export function saveContractForm(data) {
+  return request({
+    method: 'post',
+    url: '/api/admin/contract-template/save',
+    data
+  })
+}
+
+// 获取支付表格模版列表.
+export function getContractFormList(params) {
+  return request({
+    method: 'get',
+    url: '/api/admin/contract-template/index',
+    params
+  })
+}
+
+// 删除支付表格模版.
+export function deleteContractForm(id) {
+  return request({
+    method: 'get',
+    url: `/api/admin/contract-template/destroy?id=${id}`
+  })
+}
+
+// 获取支付表格模版详情.
+export function getContractFormDetail(id) {
+  return request({
+    method: 'get',
+    url: `/api/admin/contract-template/show?id=${id}`
+  })
+}
diff --git a/src/views/businessConfig/AddPayForm.vue b/src/views/businessConfig/AddPayForm.vue
index faf531c..ff3a37a 100644
--- a/src/views/businessConfig/AddPayForm.vue
+++ b/src/views/businessConfig/AddPayForm.vue
@@ -1,17 +1,27 @@
 <template>
   <div style="padding: 0 20px;">
-    <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="新增支付表格">
+    <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" :text="headerTitle">
     </lx-header>
 
     <div class="content-wrapper">
       <!-- 左侧面板 -->
       <div class="left-panel">
+        <!-- 表格名称输入区 -->
+        <div class="form-name-container">
+          <el-input 
+            v-model="formName" 
+            placeholder="请输入表格名称"
+            clearable
+            style="width: 100%"
+          ></el-input>
+        </div>
         <!-- 预览区 -->
         <div>
           <div class="panel-header">
             <h5 class="panel-title">预览区</h5>
             <div class="action-buttons">
               <el-button size="small" @click="handleRefresh">刷新</el-button>
+              <el-button size="small" @click="showPreviewModal = true">放大</el-button>
             </div>
           </div>
           <div class="preview-container" v-if="formatType === 'html'" v-html="previewContent"></div>
@@ -136,20 +146,60 @@
         </div>
       </div>
     </el-drawer>
+
+    <!-- 预览模态窗口 -->
+    <el-dialog
+      title="预览"
+      :visible.sync="showPreviewModal"
+      width="80%"
+      :fullscreen="true"
+      :modal-append-to-body="true"
+      :append-to-body="true"
+      custom-class="preview-modal"
+    >
+      <div class="modal-preview-container" v-if="formatType === 'html'" v-html="previewContent"></div>
+      <div class="modal-preview-container" v-else>
+        <iframe 
+          v-if="docxUrl" 
+          :src="docxUrl" 
+          frameborder="0" 
+          style="width: 100%; height: 100%;"
+        ></iframe>
+        <div v-else class="no-preview">
+          请上传文档进行预览
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import mammoth from 'mammoth';
+import { saveContractForm, getContractFormDetail } from '@/api/businessConfig/businessConfig';
 
 export default {
   name: 'AddPayForm',
   data() {
     return {
+      formId: null, // 表单ID，用于编辑模式
+      isEditMode: false, // 是否为编辑模式
+      formName: '', // 添加表格名称字段
       formatType: 'html',
       codeContent: '',
+      previewContent: '', // 预览内容
       showEditDrawer: false,
+      showPreviewModal: false, // 添加预览模态窗口控制变量
       currentTemplateIndex: 0,
+      editForm: {
+        name: '',
+        label: '',
+        type: 'text',
+        options: '',
+      },
+      fieldList: [],
+      fieldMetadata: {},
+      docxUrl: null,
+      templateFile: null,
       templates: [
         {
           name: '资金划拨审批单',
@@ -160,14 +210,14 @@ export default {
     <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>
+        <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;">\${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>
+        <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>
@@ -177,61 +227,64 @@ export default {
       <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>
+        <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>
+        <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>
+        <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>
+        <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;">\${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;">&nbsp;&nbsp;&nbsp;&nbsp;</span>(其他)</label>
+          <div style="display: none;">
+            <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;">&nbsp;&nbsp;&nbsp;&nbsp;</span>(其他)</label>
+            </div>
           </div>
+          <div>\${paymentType}</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>
+        <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>
+        <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;">\${warranty}</td>
         <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">
-          <span style="text-decoration: underline;">&nbsp;&nbsp;&nbsp;</span>%，质保期<span style="text-decoration: underline;">&nbsp;&nbsp;&nbsp;</span>年，需审计的以审计价为计费依据。
+          <span style="text-decoration: underline;">\${percent}</span>%，质保期<span style="text-decoration: underline;">\${zbYear}</span>年，需审计的以审计价为计费依据。
         </td>
       </tr>
       <tr>
@@ -240,15 +293,32 @@ export default {
       <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>
+          <div>&nbsp;&nbsp;\${department}</div>
+          <div style="margin-top: 20px;">经办人：</div>
+          <div>&nbsp;&nbsp;\${handler}</div>
+        </td>
+        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000; vertical-align: top;">
+          <div>业务科室负责人：</div>
+          <div>&nbsp;&nbsp;\${departmentHead}</div>
+        </td>
+        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000; vertical-align: top;" colspan="2">
+          <div>业务科室分管领导：</div>
+          <div>&nbsp;&nbsp;\${departmentLeader}</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>
+        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000; height: 100px; vertical-align: top;">
+          <div>财务审计科：</div>
+          <div>&nbsp;&nbsp;\${financeDepartment}</div>
+        </td>
+        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000; vertical-align: top;">
+          <div>财务审计科分管领导：</div>
+          <div>&nbsp;&nbsp;\${financeLeader}</div>
+        </td>
+        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000; vertical-align: top;" colspan="2">
+          <div>单位负责人：</div>
+          <div>&nbsp;&nbsp;\${unitLeader}</div>
+        </td>
       </tr>
     </table>
   </div>
@@ -771,26 +841,26 @@ export default {
 </div>`
         }
       ],
-      editForm: {
-        name: '测试字段',
-        label: '测试标签',
-        type: 'text',
-        options: '',
-        required: false,
-        placeholder: ''
-      },
-      fieldList: [],
-      previewContent: '',
-      fieldMetadata: {},
       docxContent: '',
       docxUrl: ''
     }
   },
-  mounted() {
-    this.loadTemplate(this.currentTemplateIndex);
-    this.$nextTick(() => {
-      this.handleRefresh();
-    });
+  computed: {
+    headerTitle() {
+      return this.isEditMode ? '编辑支付表格' : '新增支付表格'
+    }
+  },
+  created() {
+    // 从URL中获取ID参数
+    const id = this.$route.query.id
+    if (id) {
+      this.formId = id
+      this.isEditMode = true
+      this.fetchFormData(id)
+    } else {
+      // 新增模式，使用默认模板
+      this.initializeNewForm()
+    }
   },
   watch: {
     currentTemplateIndex: {
@@ -829,7 +899,8 @@ export default {
     handleRefresh() {
       let processedContent = this.codeContent;
       
-      const variableRegex = /\{\{([^}]+)\}\}/g;
+      // 修改正则表达式以匹配 ${xxx} 格式的占位变量
+      const variableRegex = /\${([^}]+)}/g;
       const matches = this.codeContent.matchAll(variableRegex);
       const variables = new Set();
       
@@ -839,7 +910,11 @@ export default {
       
       this.updateFieldMetadata(Array.from(variables));
       
-      processedContent = processedContent.replace(/\{\{[^}]+\}\}/g, '');
+      // 移除占位变量，保留其他内容用于预览
+      processedContent = processedContent.replace(/\${[^}]+}/g, '');
+      
+      // 移除所有 display:none 样式，使隐藏内容可见
+      processedContent = processedContent.replace(/display:\s*none/g, 'display: block');
       
       this.previewContent = processedContent;
     },
@@ -938,9 +1013,40 @@ export default {
     handleCancel() {
       this.$router.back();
     },
-    handleSave() {
-      this.$message.success('保存成功');
-      this.$router.push('/business-config/pay-form');
+    async handleSave() {
+      if (!this.formName) {
+        this.$message.error('请输入表格名称')
+        return
+      }
+      
+      try {
+        const params = {
+          name: this.formName,
+          type: this.formatType === 'html' ? 1 : 2,
+          template: this.formatType === 'html' ? this.codeContent : null,
+          // 其他必要字段
+          link_type: 1, // 假设默认值
+          status: 1, // 假设默认启用
+        }
+        
+        // 如果是编辑模式，添加ID
+        if (this.isEditMode) {
+          params.id = this.formId
+        }
+        
+        const res = await saveContractForm(params)
+        if (res.errcode !== undefined) {
+          this.$message.error(res.errmsg || '保存失败')
+          return
+        }
+        
+        this.$message.success('保存成功')
+        // 保存成功后返回列表页
+        this.$router.push('/businessConfig/payFormConfig')
+      } catch (error) {
+        console.error('保存失败:', error)
+        this.$message.error('保存失败')
+      }
     },
     updateFieldMetadata(variables) {
       const updatedMetadata = {};
@@ -980,8 +1086,8 @@ export default {
       console.log('尝试只打开抽屉');
     },
     extractVariables(text) {
-      // 使用更宽松的正则表达式匹配占位变量
-      const regex = /\{\{([^}]+)\}\}/g;
+      // 修改正则表达式以匹配 ${xxx} 格式的占位变量
+      const regex = /\${([^}]+)}/g;
       const matches = text.matchAll(regex);
       const variables = new Set();
       
@@ -998,6 +1104,55 @@ export default {
       console.log('提取到的变量:', Array.from(variables));
       
       return Array.from(variables);
+    },
+    // 获取表单数据
+    async fetchFormData(id) {
+      try {
+        const res = await getContractFormDetail(id)
+        if (res.errcode !== undefined) {
+          this.$message.error(res.errmsg || '获取表单数据失败')
+          return
+        }
+        
+        // 填充表单数据
+        const formData = res
+        this.formName = formData.name || ''
+        this.formatType = formData.type == 1 ? 'html' : 'docx'
+        
+        // 设置代码内容和字段元数据
+        if (this.formatType === 'html') {
+          this.codeContent = formData.template || ''
+          // 提取变量，更新字段元数据
+          this.extractAndUpdateFields()
+        } else if (this.formatType === 'docx' && formData.template_url) {
+          this.docxUrl = formData.template_url
+        }
+        
+        // 更新预览内容
+        this.handleRefresh()
+      } catch (error) {
+        console.error('获取表单数据失败:', error)
+        this.$message.error('获取表单数据失败')
+      }
+    },
+    
+    // 初始化新建表单
+    initializeNewForm() {
+      // 使用第一个模板作为默认内容
+      if (this.templates.length > 0) {
+        this.codeContent = this.templates[0].content
+        this.formName = this.templates[0].name
+        // 提取变量，更新字段元数据
+        this.extractAndUpdateFields()
+        // 更新预览内容
+        this.handleRefresh()
+      }
+    },
+    
+    // 提取变量并更新字段列表
+    extractAndUpdateFields() {
+      const variables = this.extractVariables(this.codeContent)
+      this.updateFieldMetadata(variables)
     }
   },
   // 在组件销毁时释放URL
@@ -1016,6 +1171,7 @@ export default {
   margin: 0 -20px;
   padding: 0 20px;
   margin-bottom: 60px;
+  overflow-y: auto; // 添加垂直滚动
 }
 
 .left-panel {
@@ -1024,6 +1180,28 @@ export default {
   padding-right: 20px;
   display: flex;
   flex-direction: column;
+  overflow-y: auto; // 添加垂直滚动
+}
+
+.form-name-container {
+  margin-bottom: 20px;
+  padding: 10px;
+  background: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  
+  :deep(.el-input__inner) {
+    height: 40px;
+    line-height: 40px;
+    
+    &:hover {
+      border-color: #c0c4cc;
+    }
+    
+    &:focus {
+      border-color: #409EFF;
+    }
+  }
 }
 
 .right-panel {
@@ -1214,6 +1392,39 @@ export default {
   margin-bottom: 20px;
   background: white;
 }
+
+.preview-modal {
+  :deep(.el-dialog__body) {
+    padding: 0;
+    height: calc(100vh - 54px);
+  }
+}
+
+.modal-preview-container {
+  height: 100%;
+  overflow-y: auto;
+  padding: 20px;
+  background: white;
+  
+  :deep(table) {
+    width: 100%;
+    border-collapse: collapse;
+  }
+  
+  :deep(td) {
+    border: 1px solid #000;
+    padding: 8px 12px;
+  }
+}
+
+.no-preview {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  color: #909399;
+  font-size: 14px;
+}
 </style>
 
 
diff --git a/src/views/businessConfig/EditPayForm.vue b/src/views/businessConfig/EditPayForm.vue
new file mode 100644
index 0000000..f082ebe
--- /dev/null
+++ b/src/views/businessConfig/EditPayForm.vue
@@ -0,0 +1,1539 @@
+<template>
+  <div style="padding: 0 20px;">
+    <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" :text="headerTitle">
+    </lx-header>
+
+    <div class="content-wrapper">
+      <!-- 左侧面板 -->
+      <div class="left-panel">
+        <!-- 表格名称输入区 -->
+        <div class="form-name-container">
+          <el-input 
+            v-model="formName" 
+            placeholder="请输入表格名称"
+            clearable
+            style="width: 100%"
+          ></el-input>
+        </div>
+        <!-- 预览区 -->
+        <div>
+          <div class="panel-header">
+            <h5 class="panel-title">预览区</h5>
+            <div class="action-buttons">
+              <el-button size="small" @click="handleRefresh">刷新</el-button>
+              <el-button size="small" @click="showPreviewModal = true">放大</el-button>
+            </div>
+          </div>
+          <div class="preview-container" v-if="formatType === 1" v-html="previewContent"></div>
+          <div class="preview-container" v-else>
+            <div 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="1"></el-option>
+                <el-option label="DOCX" :value="2"></el-option>
+              </el-select>
+              <el-button 
+                size="small" 
+                v-if="formatType === 2"
+                @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="fieldData in fieldList" 
+              :key="fieldData.field"
+              class="field-item"
+              @click="handleEditField(fieldData)"
+            >
+              <el-row align="middle">
+                <el-col :span="8">
+                  <span class="text-muted field-name">{{ fieldData.field }}</span>
+                </el-col>
+                <el-col :span="8">
+                  <strong class="field-label">{{ fieldData.name }}</strong>
+                </el-col>
+                <el-col :span="8">
+                  <span class="text-muted">{{ getTypeDisplay(fieldData.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.field" disabled class="form-input"></el-input> 
+        </el-form-item>
+        <el-form-item label="中文名">
+          <el-input v-model="editForm.name" 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>
+
+    <!-- 预览模态窗口 -->
+    <el-dialog
+      title="预览"
+      :visible.sync="showPreviewModal"
+      width="80%"
+      :fullscreen="true"
+      :modal-append-to-body="true"
+      :append-to-body="true"
+      custom-class="preview-modal"
+    >
+      <div class="modal-preview-container" v-if="formatType === 1" v-html="previewContent"></div>
+      <div class="modal-preview-container" v-else>
+        <div v-html="previewContent"></div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import mammoth from 'mammoth';
+import { saveContractForm, getContractFormDetail } from '@/api/businessConfig/businessConfig';
+
+export default {
+  name: 'EditPayForm',
+  data() {
+    return {
+      formId: null, // 表单ID，用于编辑模式
+      isEditMode: false, // 是否为编辑模式
+      formName: '', // 添加表格名称字段
+      formatType: 1,
+      codeContent: '',
+      previewContent: '', // 预览内容
+      showEditDrawer: false,
+      showPreviewModal: false, // 添加预览模态窗口控制变量
+      currentTemplateIndex: 0,
+      editForm: {
+        field: '', // Renamed from name to field
+        name: '',  // Renamed from label to name (Chinese name)
+        type: 'text',
+        options: '',
+      },
+      fieldList: [],
+      fieldMetadata: {}, // Use field name as key
+      docxUrl: null,
+      templateFile: null,
+      templates: [
+        {
+          name:'',
+          content:''
+        },
+        {
+          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: none;">
+            <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;">&nbsp;&nbsp;&nbsp;&nbsp;</span>(其他)</label>
+            </div>
+          </div>
+          <div>\${paymentType}</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;">\${percent}</span>%，质保期<span style="text-decoration: underline;">\${zbYear}</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>&nbsp;&nbsp;\${department}</div>
+          <div style="margin-top: 20px;">经办人：</div>
+          <div>&nbsp;&nbsp;\${handler}</div>
+        </td>
+        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000; vertical-align: top;">
+          <div>业务科室负责人：</div>
+          <div>&nbsp;&nbsp;\${departmentHead}</div>
+        </td>
+        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000; vertical-align: top;" colspan="2">
+          <div>业务科室分管领导：</div>
+          <div>&nbsp;&nbsp;\${departmentLeader}</div>
+        </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>&nbsp;&nbsp;\${financeDepartment}</div>
+        </td>
+        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000; vertical-align: top;">
+          <div>财务审计科分管领导：</div>
+          <div>&nbsp;&nbsp;\${financeLeader}</div>
+        </td>
+        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000; vertical-align: top;" colspan="2">
+          <div>单位负责人：</div>
+          <div>&nbsp;&nbsp;\${unitLeader}</div>
+        </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: 24px; font-weight: bold; margin-bottom: 20px;">苏州市河道管理处报销贴单</h2>
+    <div style="width: 100%; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;">
+      <div style="font-size: 16px;">科室：<span style="border-bottom: 1px solid #000; padding: 0 20px;">\${department}</span></div>
+      <div style="font-size: 16px;">\${year}年\${month}月\${day}日</div>
+    </div>
+    <table style="width: 100%; border-collapse: collapse; font-family: SimSun, serif;">
+      <colgroup>
+        <col style="width: 35%">
+        <col style="width: 15%">
+        <col style="width: 15%">
+        <col style="width: 25%">
+        <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; text-align: center; font-weight: bold;">用途说明</td>
+          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center; font-weight: bold;">金额</td>
+          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; 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; text-align: center; font-weight: bold;" rowspan="2">\${handler}</td>
+          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center; writing-mode: vertical-lr; text-orientation: upright; letter-spacing: 8px;" rowspan="12">附单据\${receipts}张</td>
+        </tr>
+        <tr>
+          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;">\${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: center;">\${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>
+          <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;">\${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>
+        </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>
+          <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;">\${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>
+        </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>
+          <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;">\${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>
+        </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>
+          <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;">\${purpose9}</td>
+          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: right;">\${amount9}</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;">年&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;日</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}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;工作人员数：\${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>`
+        }
+      ],
+      docxContent: '',
+      docxUrl: ''
+    }
+  },
+  computed: {
+    headerTitle() {
+      return this.isEditMode ? '编辑支付表格' : '新增支付表格'
+    }
+  },
+  created() {
+    // 从URL中获取ID参数
+    const id = this.$route.query.id
+    if (id) {
+      this.formId = id
+      this.isEditMode = true
+      this.fetchFormData(id)
+    } else {
+      // 新增模式，使用默认模板
+      this.initializeNewForm()
+    }
+  },
+  watch: {
+    currentTemplateIndex: {
+      immediate: true,
+      handler(newVal) {
+        this.loadTemplate(newVal);
+      }
+    },
+    formatType(newVal) {
+      if (newVal === 1) {
+        // HTML 格式
+        if (this.$refs.codeEditor) {
+          this.$refs.codeEditor.setValue(this.codeContent)
+        }
+        this.previewContent = this.codeContent
+        this.handleRefresh()
+      } else if (newVal === 2) {
+        // DOCX 格式
+        if (this.$refs.codeEditor) {
+          this.$refs.codeEditor.setValue(this.codeContent)
+        }
+        this.previewContent = this.codeContent
+        this.handleRefresh()
+      }
+    }
+  },
+  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;
+      
+      // 修改正则表达式以匹配 ${xxx} 格式的占位变量
+      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, '');
+      
+      // 移除所有 display:none 样式，使隐藏内容可见
+      processedContent = processedContent.replace(/display:\s*none/g, 'display: block');
+      
+      this.previewContent = processedContent;
+    },
+    handleUpload() {
+      const input = document.createElement('input')
+      input.type = 'file'
+      input.accept = '.docx'
+      input.onchange = async (e) => {
+        e.preventDefault() // 阻止默认行为
+        const file = e.target.files[0]
+        if (file) {
+          if (!file.name.endsWith('.docx')) {
+            this.$message.error('请选择docx格式的文件')
+            return
+          }
+          await this.convertDocxToHtml(file)
+        }
+      }
+      input.click()
+    },
+    handleEditField(field) {
+      this.editForm = { ...field };
+      this.showEditDrawer = true;
+      
+      console.log('正在编辑字段:', field.name);
+    },
+    handleSaveField() {
+      const { field } = this.editForm; // Get field name
+      
+      if (this.fieldMetadata[field]) { // Use field name as key
+        this.fieldMetadata[field] = { ...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();
+    },
+    async handleSave() {
+      if (!this.formName) {
+        this.$message.error('请输入表格名称')
+        return
+      }
+      
+      try {
+        // Convert field metadata to the format required by the server
+        const templateFields = Object.values(this.fieldMetadata).map(metadata => ({
+          field: metadata.field, // Field name
+          name: metadata.name,   // Chinese name
+          type: metadata.type,
+          options: metadata.options,
+          // Removed placeholder and required as requested
+        }));
+        
+        const params = {
+          name: this.formName,
+          type: this.formatType === 1 ? 1 : 2,
+          template: this.formatType === 1 ? this.codeContent : null,
+          // Add field metadata
+          contract_template_fields: templateFields, 
+          // Other necessary fields
+          link_type: 1, // Assuming default value
+          status: 1, // Assuming default enabled
+        }
+        
+        // If in edit mode, add ID
+        if (this.isEditMode) {
+          params.id = this.formId
+        }
+        
+        const res = await saveContractForm(params)
+        if (res.errcode !== undefined) {
+          this.$message.error(res.errmsg || '保存失败')
+          return
+        }
+        
+        this.$message.success('保存成功')
+        // 保存成功后返回列表页
+        this.$router.push('/businessConfig/payFormConfig')
+      } catch (error) {
+        console.error('保存失败:', error)
+        this.$message.error('保存失败')
+      }
+    },
+    updateFieldMetadata(variables) {
+      const updatedMetadata = {};
+      
+      variables.forEach(varName => { // varName is the field name
+        if (this.fieldMetadata[varName]) { // Check using field name as key
+          updatedMetadata[varName] = this.fieldMetadata[varName];
+        } else {
+          // Create new metadata using field name as key
+          updatedMetadata[varName] = { 
+            field: varName, // Field name
+            name: this.formatVariableName(varName), // Generate Chinese name
+            type: 'text',
+            options: '',
+            // Removed placeholder and required
+          };
+        }
+      });
+      
+      this.fieldMetadata = updatedMetadata; // Update the main metadata object
+      
+      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('尝试只打开抽屉');
+    },
+    extractVariables(text) {
+      // 修改正则表达式以匹配 ${xxx} 格式的占位变量
+      const regex = /\${([^}]+)}/g;
+      const matches = text.matchAll(regex);
+      const variables = new Set();
+      
+      for (const match of matches) {
+        // 确保匹配到的是有效的变量名
+        const variable = match[1].trim();
+        if (variable && !variable.includes('<') && !variable.includes('>')) {
+          variables.add(variable);
+        }
+      }
+      
+      // 添加调试信息
+      console.log('原始文本:', text);
+      console.log('提取到的变量:', Array.from(variables));
+      
+      return Array.from(variables);
+    },
+    // 获取表单数据
+    async fetchFormData(id) {
+      try {
+        const res = await getContractFormDetail(id)
+        if (res.errcode !== undefined) {
+          this.$message.error(res.errmsg || '获取表单数据失败')
+          return
+        }
+        
+        // Fill form data
+        const formData = res
+        this.formName = formData.name || ''
+        this.formatType = formData.type == 1 ? 1 : 2
+        
+        // Set code content and field metadata
+        if (this.formatType === 1) {
+          this.codeContent = formData.template || ''
+          
+          // Process field configuration array returned by the server
+          if (formData.contract_template_fields && Array.isArray(formData.contract_template_fields)) {
+            const updatedMetadata = {};
+            
+            formData.contract_template_fields.forEach(serverField => {
+              // Use field name (serverField.field) as the key
+              updatedMetadata[serverField.field] = { 
+                field: serverField.field, // Field name from server
+                name: serverField.name || this.formatVariableName(serverField.field), // Chinese name from server
+                type: serverField.type || 'text',
+                options: serverField.options || '',
+                 // Removed placeholder and required
+              };
+            });
+            
+            this.fieldMetadata = updatedMetadata; // Update the main metadata object
+            this.generateFieldList();
+          } else {
+            // If no field configuration, extract variables and update field metadata
+            this.extractAndUpdateFields();
+          }
+          
+        } else if (this.formatType === 2 && formData.template_url) {
+          this.docxUrl = formData.template_url
+        }
+        
+        // 更新预览内容
+        this.handleRefresh()
+      } catch (error) {
+        console.error('获取表单数据失败:', error)
+        this.$message.error('获取表单数据失败')
+      }
+    },
+    
+    // 初始化新建表单
+    initializeNewForm() {
+      // 使用 data 中设置的 currentTemplateIndex 作为默认模板
+      if (this.templates && this.templates[this.currentTemplateIndex]) {
+        const defaultTemplate = this.templates[this.currentTemplateIndex];
+        this.codeContent = defaultTemplate.content;
+        this.formName = defaultTemplate.name;
+        // 提取变量，更新字段元数据
+        this.extractAndUpdateFields()
+        // 更新预览内容
+        this.handleRefresh()
+      } else if (this.templates.length > 0) { // Fallback to first template if index is invalid
+        console.warn(`Invalid currentTemplateIndex (${this.currentTemplateIndex}), falling back to index 0.`);
+        this.loadTemplate(0); // Use loadTemplate to ensure index consistency
+        this.formName = this.templates[0].name;
+        this.extractAndUpdateFields();
+        this.handleRefresh();
+      }
+    },
+    
+    // 提取变量并更新字段列表
+    extractAndUpdateFields() {
+      const variables = this.extractVariables(this.codeContent) // variables are field names
+      this.updateFieldMetadata(variables) // Pass field names
+    },
+    async convertDocxToHtml(file) {
+      try {
+        // 设置表格名称为文件名（去掉扩展名）
+        const fileName = file.name.replace(/\.[^/.]+$/, "")
+        this.formName = fileName
+
+        const reader = new FileReader()
+        const arrayBuffer = await new Promise((resolve, reject) => {
+          reader.onload = (e) => resolve(e.target.result)
+          reader.onerror = (e) => reject(e)
+          reader.readAsArrayBuffer(file)
+        })
+
+        const result = await mammoth.convertToHtml({ 
+          arrayBuffer,
+          convertImage: mammoth.images.imgElement(function(image) {
+            return image.read("base64").then(function(imageBuffer) {
+              return {
+                src: "data:" + image.contentType + ";base64," + imageBuffer
+              };
+            });
+          }),
+          styleMap: [
+            "p[style-name='Normal'] => p:style='margin: 0; padding: 0;'",
+            "p[style-name='Heading 1'] => h1:style='font-size: 24px; font-weight: bold; margin: 0 0 20px 0;'",
+            "p[style-name='Heading 2'] => h2:style='font-size: 20px; font-weight: bold; margin: 0 0 16px 0;'",
+            "p[style-name='Heading 3'] => h3:style='font-size: 18px; font-weight: bold; margin: 0 0 14px 0;'",
+            "p[style-name='Heading 4'] => h4:style='font-size: 16px; font-weight: bold; margin: 0 0 12px 0;'",
+            "p[style-name='Heading 5'] => h5:style='font-size: 14px; font-weight: bold; margin: 0 0 10px 0;'",
+            "p[style-name='Heading 6'] => h6:style='font-size: 12px; font-weight: bold; margin: 0 0 8px 0;'",
+            "p[style-name='List Paragraph'] => p:style='margin: 0; padding: 0; list-style-type: disc;'",
+            "p[style-name='Quote'] => blockquote:style='margin: 0 0 16px 0; padding: 10px 20px; border-left: 4px solid #ccc;'",
+            "p[style-name='Intense Quote'] => blockquote:style='margin: 0 0 16px 0; padding: 10px 20px; border-left: 4px solid #666; background: #f5f5f5;'",
+            "r[style-name='Strong'] => strong:style='font-weight: bold;'",
+            "r[style-name='Emphasis'] => em:style='font-style: italic;'",
+            "r[style-name='Code'] => code:style='font-family: monospace; background: #f5f5f5; padding: 2px 4px;'",
+            "table => table:style='width: 100%; border-collapse: collapse; margin: 0 0 16px 0;'",
+            "tr => tr:style='border-bottom: 1px solid #ddd;'",
+            "td => td:style='padding: 8px; border: 1px solid #ddd; text-align: center; vertical-align: middle;'",
+            "th => th:style='padding: 8px; border: 1px solid #ddd; font-weight: bold; text-align: center; vertical-align: middle;'",
+            "table[style-name='Table Grid'] => table:style='width: 100%; border-collapse: collapse; margin: 0 0 16px 0; border: 1px solid #000;'",
+            "table[style-name='Table Grid Light'] => table:style='width: 100%; border-collapse: collapse; margin: 0 0 16px 0; border: 1px solid #ddd;'",
+            "table[style-name='Table Grid Dark'] => table:style='width: 100%; border-collapse: collapse; margin: 0 0 16px 0; border: 1px solid #000;'",
+            "table[style-name='Table Grid Medium'] => table:style='width: 100%; border-collapse: collapse; margin: 0 0 16px 0; border: 1px solid #666;'"
+          ],
+          transformDocument: function(document) {
+            return document;
+          }
+        })
+        
+        // 处理转换后的 HTML，确保所有样式都内嵌
+        let html = result.value
+        
+        // 处理表格样式，保留原始边框样式
+        html = html.replace(/<table/g, (match) => {
+          if (match.includes('style-name="Table Grid"')) {
+            return '<table style="width: 100%; border-collapse: collapse; margin: 0 0 16px 0; border: 1px solid #000;"'
+          } else if (match.includes('style-name="Table Grid Light"')) {
+            return '<table style="width: 100%; border-collapse: collapse; margin: 0 0 16px 0; border: 1px solid #ddd;"'
+          } else if (match.includes('style-name="Table Grid Dark"')) {
+            return '<table style="width: 100%; border-collapse: collapse; margin: 0 0 16px 0; border: 1px solid #000;"'
+          } else if (match.includes('style-name="Table Grid Medium"')) {
+            return '<table style="width: 100%; border-collapse: collapse; margin: 0 0 16px 0; border: 1px solid #666;"'
+          }
+          return '<table style="width: 100%; border-collapse: collapse; margin: 0 0 16px 0;"'
+        })
+        
+        // 处理表格单元格样式，统一设置为居中
+        html = html.replace(/<td/g, (match) => {
+          let style = 'padding: 8px; border: 1px solid #ddd; text-align: center; vertical-align: middle;'
+          if (match.includes('style-name="Table Grid"')) {
+            style = 'padding: 8px; border: 1px solid #000; text-align: center; vertical-align: middle;'
+          } else if (match.includes('style-name="Table Grid Light"')) {
+            style = 'padding: 8px; border: 1px solid #ddd; text-align: center; vertical-align: middle;'
+          } else if (match.includes('style-name="Table Grid Dark"')) {
+            style = 'padding: 8px; border: 1px solid #000; text-align: center; vertical-align: middle;'
+          } else if (match.includes('style-name="Table Grid Medium"')) {
+            style = 'padding: 8px; border: 1px solid #666; text-align: center; vertical-align: middle;'
+          }
+          return `<td style="${style}"`
+        })
+        
+        // 处理表头单元格样式，统一设置为居中
+        html = html.replace(/<th/g, (match) => {
+          let style = 'padding: 8px; border: 1px solid #ddd; font-weight: bold; text-align: center; vertical-align: middle;'
+          if (match.includes('style-name="Table Grid"')) {
+            style = 'padding: 8px; border: 1px solid #000; font-weight: bold; text-align: center; vertical-align: middle;'
+          } else if (match.includes('style-name="Table Grid Light"')) {
+            style = 'padding: 8px; border: 1px solid #ddd; font-weight: bold; text-align: center; vertical-align: middle;'
+          } else if (match.includes('style-name="Table Grid Dark"')) {
+            style = 'padding: 8px; border: 1px solid #000; font-weight: bold; text-align: center; vertical-align: middle;'
+          } else if (match.includes('style-name="Table Grid Medium"')) {
+            style = 'padding: 8px; border: 1px solid #666; font-weight: bold; text-align: center; vertical-align: middle;'
+          }
+          return `<th style="${style}"`
+        })
+        
+        // 处理段落样式
+        html = html.replace(/<p>/g, '<p style="margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; height: 100%;">')
+        
+        // 处理图片样式
+        html = html.replace(/<img/g, '<img style="max-width: 100%; height: auto;"')
+        
+        // 更新代码内容和预览内容
+        this.codeContent = html
+        
+        // 提取变量并更新字段元数据
+        const variables = this.extractVariables(html)
+        this.updateFieldMetadata(variables)
+        
+        // 直接更新代码编辑器和预览
+        this.$nextTick(() => {
+          // 更新代码编辑器内容
+          if (this.$refs.codeEditor) {
+            this.$refs.codeEditor.setValue(html)
+          }
+          // 更新预览内容
+          this.previewContent = html
+          this.handleRefresh()
+        })
+      } catch (error) {
+        console.error('转换失败:', error)
+        this.$message.error('文件转换失败')
+      }
+    },
+  },
+  // 在组件销毁时释放URL
+  beforeDestroy() {
+    if (this.docxUrl) {
+      URL.revokeObjectURL(this.docxUrl);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content-wrapper {
+  display: flex;
+  height: calc(100vh - 180px);
+  margin: 0 -20px;
+  padding: 0 20px;
+  margin-bottom: 60px;
+  overflow-y: auto; // 添加垂直滚动
+}
+
+.left-panel {
+  flex: 0 0 66.666667%;
+  max-width: 66.666667%;
+  padding-right: 20px;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto; // 添加垂直滚动
+}
+
+.form-name-container {
+  margin-bottom: 20px;
+  padding: 10px;
+  background: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  
+  :deep(.el-input__inner) {
+    height: 40px;
+    line-height: 40px;
+    
+    &:hover {
+      border-color: #c0c4cc;
+    }
+    
+    &:focus {
+      border-color: #409EFF;
+    }
+  }
+}
+
+.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;
+  height: calc(100vh - 180px);
+  overflow: hidden;
+}
+
+.field-list {
+  flex: 1;
+  overflow-y: auto;
+  padding-right: 10px;
+  
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background-color: #c0c4cc;
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background-color: #f5f7fa;
+  }
+}
+
+.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;
+  }
+}
+
+.preview-container {
+  height: 300px;
+  border: 1px solid #dee2e6;
+  padding: 20px;
+  overflow-y: auto;
+  margin-bottom: 20px;
+  background: white;
+}
+
+.preview-modal {
+  :deep(.el-dialog__body) {
+    padding: 0;
+    height: calc(100vh - 54px);
+  }
+}
+
+.modal-preview-container {
+  height: 100%;
+  overflow-y: auto;
+  padding: 20px;
+  background: white;
+  
+  :deep(table) {
+    width: 100%;
+    border-collapse: collapse;
+  }
+  
+  :deep(td) {
+    border: 1px solid #000;
+    padding: 8px 12px;
+  }
+}
+
+.no-preview {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  color: #909399;
+  font-size: 14px;
+}
+</style>
+
+
+
diff --git a/src/views/businessConfig/payFormConfig.vue b/src/views/businessConfig/payFormConfig.vue
index 9463046..30aff66 100644
--- a/src/views/businessConfig/payFormConfig.vue
+++ b/src/views/businessConfig/payFormConfig.vue
@@ -15,9 +15,8 @@
                     <span style="padding: 0 6px;word-break: keep-all;">状态</span>
                     <el-select v-model="searchForm.status" placeholder="所有状态" style="width: 180px">
                         <el-option label="所有状态" value=""></el-option>
-                        <el-option label="草稿" value="draft"></el-option>
-                        <el-option label="已发布" value="published"></el-option>
-                        <el-option label="已禁用" value="disabled"></el-option>
+                        <el-option label="已启用" value="1"></el-option>
+                        <el-option label="已禁用" value="0"></el-option>
                     </el-select>
                     </div>
 
@@ -25,8 +24,8 @@
                     <span style="padding: 0 6px;word-break: keep-all;">类型</span>
                     <el-select v-model="searchForm.type" placeholder="所有类型" style="width: 180px">
                         <el-option label="所有类型" value=""></el-option>
-                        <el-option label="HTML" value="html"></el-option>
-                        <el-option label="DOCX" value="docx"></el-option>
+                        <el-option label="HTML" :value="1"></el-option>
+                        <el-option label="DOCX" :value="2"></el-option>
                     </el-select>
                     </div>
 
@@ -47,7 +46,11 @@
     <div class="table-container">
       <el-table :data="tableData" style="width: 100%">
         <el-table-column prop="name" label="表格名称"></el-table-column>
-        <el-table-column prop="type" label="类型"></el-table-column>
+        <el-table-column prop="type" label="类型">
+          <template #default="scope">
+            {{ getTypeText(scope.row.type) }}
+          </template>
+        </el-table-column>
         <el-table-column label="状态">
           <template #default="scope">
             <el-tag :type="getStatusType(scope.row.status)" effect="plain">
@@ -56,19 +59,30 @@
           </template>
         </el-table-column>
         <el-table-column prop="scenes" label="已使用场景"></el-table-column>
-        <el-table-column prop="createTime" label="创建时间"></el-table-column>
-        <el-table-column prop="updateTime" label="更新时间"></el-table-column>
-        <el-table-column label="操作" width="250">
+        <el-table-column prop="created_at" label="创建时间"></el-table-column>
+        <el-table-column prop="updated_at" label="更新时间"></el-table-column>
+        <el-table-column label="操作" width="280">
           <template #default="scope">
-            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
-            <el-button size="small" @click="handlePreview(scope.row)">预览</el-button>
-            <el-button 
-              size="small" 
-              :type="scope.row.status === 'disabled' ? 'success' : 'danger'"
-              @click="handleStatusChange(scope.row)"
-            >
-              {{ scope.row.status === 'disabled' ? '启用' : '禁用' }}
-            </el-button>
+            <div class="operation-buttons">
+              <el-button size="small" type="primary" plain @click="handleEdit(scope.row)">编辑</el-button>
+              <el-button size="small" type="info" plain @click="handlePreview(scope.row)">预览</el-button>
+              <el-button 
+                size="small" 
+                :type="scope.row.status === 0 ? 'success' : 'warning'"
+                plain
+                @click="handleStatusChange(scope.row)"
+              >
+                {{ scope.row.status === 0 ? '启用' : '禁用' }}
+              </el-button>
+              <el-button 
+                size="small" 
+                type="danger"
+                plain
+                @click="handleDelete(scope.row)"
+              >
+                删除
+              </el-button>
+            </div>
           </template>
         </el-table-column>
       </el-table>
@@ -85,10 +99,42 @@
         </el-pagination>
       </div>
     </div>
+
+    <!-- 添加预览模态框 -->
+    <el-dialog
+      title="模板预览"
+      :visible.sync="previewModalVisible"
+      width="80%"
+      :before-close="closePreviewModal"
+      top="5vh"
+      class="template-preview-dialog"
+    >
+      <div class="preview-header">
+        <h3>{{ currentTemplate.name }}</h3>
+      </div>
+      <div class="preview-container">
+        <!-- 预览HTML内容 -->
+        <div v-if="currentTemplate.type == 1 && currentTemplate.template" 
+             class="html-preview"
+             v-html="formatHtmlForPreview(currentTemplate.template)"></div>
+        
+        <!-- 预览DOCX内容 -->
+        <div v-else-if="currentTemplate.type == 2" class="docx-preview">
+          <el-empty description="DOCX预览功能正在开发中"></el-empty>
+        </div>
+        
+        <!-- 无可预览内容 -->
+        <div v-else class="empty-preview">
+          <el-empty description="无预览内容"></el-empty>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { getContractFormList, deleteContractForm, saveContractForm } from '@/api/businessConfig/businessConfig'
+
 export default {
   name: 'PayFormConfig',
   data() {
@@ -98,43 +144,45 @@ export default {
         status: '',
         type: ''
       },
-      tableData: [
-        {
-          name: '项目采购支付表格',
-          type: 'HTML',
-          status: 'published',
-          scenes: '项目采购、设备采购',
-          createTime: '2024-03-01 10:00',
-          updateTime: '2024-03-05 15:30'
-        },
-        {
-          name: '差旅报销表格',
-          type: 'DOCX',
-          status: 'draft',
-          scenes: '差旅报销、交通费报销',
-          createTime: '2024-03-02 14:20',
-          updateTime: '2024-03-02 14:20'
-        },
-        {
-          name: '会议费用报销表格',
-          type: 'DOCX',
-          status: 'disabled',
-          scenes: '会议费用、培训费用',
-          createTime: '2024-02-28 09:15',
-          updateTime: '2024-03-03 11:45'
-        }
-      ],
-      total: 30,
-      currentPage: 1
+      tableData: [],
+      total: 0,
+      currentPage: 1,
+      pageSize: 10,
+      previewModalVisible: false,
+      currentTemplate: {}
     }
   },
+  created() {
+    this.fetchData()
+  },
   methods: {
+    async fetchData() {
+      try {
+        const params = {
+          page: this.currentPage,
+          page_size: this.pageSize,
+          keyword: this.searchForm.name,
+          status: this.searchForm.status,
+          type: this.searchForm.type
+        }
+        const res = await getContractFormList(params)
+        if (res.errcode !== undefined) {
+          this.$message.error(res.errmsg || '获取数据失败')
+          return
+        }
+        this.tableData = res.data || []
+        this.total = res.total || 0
+      } catch (error) {
+        console.error('获取数据失败:', error)
+        this.$message.error('获取数据失败')
+      }
+    },
     handleCreate() {
-      this.$router.push('/businessConfig/AddPayForm')
+      this.$router.push('/businessConfig/EditPayForm')
     },
-    handleSearch() {
-      // 实现搜索逻辑
-      console.log('Search with:', this.searchForm)
+    async handleSearch() {
+      this.currentPage = 1
+      await this.fetchData()
     },
     resetSearch() {
       this.searchForm = {
@@ -142,46 +190,120 @@ export default {
         status: '',
         type: ''
       }
+      this.currentPage = 1
+      this.fetchData()
     },
     handleEdit(row) {
-      this.$router.push(`/payment-form-config/edit/${row.id}`)
+      this.$router.push(`/businessConfig/EditPayForm?id=${row.id}`)
     },
     handlePreview(row) {
-      // 实现预览逻辑
-      this.$message.info(`预览：${row.name}`)
+      this.currentTemplate = {...row}
+      this.previewModalVisible = true
+    },
+    closePreviewModal() {
+      this.previewModalVisible = false
+      this.currentTemplate = {}
     },
     handleStatusChange(row) {
-      const action = row.status === 'disabled' ? '启用' : '禁用'
+      const status = row.status === 0 ? 1 : 0
+      const action = status === 1 ? '启用' : '禁用'
+      
       this.$confirm(`确定要${action}该表格吗？`, '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
-      }).then(() => {
-        // 实现状态变更逻辑
-        this.$message.success(`${action}成功`)
+      }).then(async () => {
+        try {
+          const params = {
+            id: row.id,
+            status: status,
+            // 保留其他必要字段
+            name: row.name,
+            type: row.type,
+            link_type: row.link_type
+          }
+          
+          const res = await saveContractForm(params)
+          if (res.errcode !== undefined) {
+            this.$message.error(res.errmsg || `${action}失败`)
+            return
+          }
+          this.$message.success(`${action}成功`)
+          this.fetchData() // 重新加载数据
+        } catch (error) {
+          console.error(`${action}失败:`, error)
+          this.$message.error(`${action}失败`)
+        }
       }).catch(() => {
         this.$message.info('已取消操作')
       })
     },
-    handlePageChange(page) {
+    async handlePageChange(page) {
       this.currentPage = page
-      // 实现分页加载逻辑
+      await this.fetchData()
     },
     getStatusType(status) {
       const types = {
-        published: 'success',
-        draft: 'info',
-        disabled: 'danger'
+        1: 'success',  // 已启用
+        0: 'danger'    // 已禁用
       }
       return types[status] || 'info'
     },
     getStatusText(status) {
       const texts = {
-        published: '已发布',
-        draft: '草稿',
-        disabled: '已禁用'
+        1: '已启用',
+        0: '已禁用'
       }
-      return texts[status] || status
+      return texts[status] || '--'
+    },
+    getTypeText(type) {
+      const types = {
+        1: 'HTML',
+        2: 'DOCX'
+      }
+      return types[type] || type
+    },
+    formatDate(dateStr) {
+      if (!dateStr) return '--'
+      return dateStr
+    },
+    handleDelete(row) {
+      this.$confirm('确定要删除该表格吗？删除后不可恢复。', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        try {
+          const res = await deleteContractForm(row.id)
+          if (res.errcode !== undefined) {
+            this.$message.error(res.errmsg || '删除失败')
+            return
+          }
+          this.$message.success('删除成功')
+          this.fetchData() // 重新加载数据
+        } catch (error) {
+          console.error('删除失败:', error)
+          this.$message.error('删除失败')
+        }
+      }).catch(() => {
+        this.$message.info('已取消删除')
+      })
+    },
+    // 格式化HTML用于预览
+    formatHtmlForPreview(html) {
+      if (!html) return ''
+      // 移除所有变量占位符
+      let processedHtml = html.replace(/\${[^}]+}/g, '')
+      // 将所有 display:none 样式改为 display:block
+      processedHtml = processedHtml.replace(/display:\s*none/g, 'display: block')
+      return processedHtml
+    },
+    // 获取DOCX文件的完整URL
+    getFullDocUrl(relativeUrl) {
+      // 当前网站的域名和协议
+      const baseUrl = window.location.origin
+      // 拼接完整的URL
+      return `${baseUrl}${relativeUrl}`
     }
   }
 }
@@ -250,8 +372,88 @@ export default {
   margin-top: 20px;
 }
 
-:deep(.el-button + .el-button) {
-  margin-left: 8px;
+.operation-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  
+  .el-button {
+    margin-left: 0 !important;
+    margin-right: 0;
+  }
+}
+
+.preview-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #ebeef5;
+  
+  h3 {
+    margin: 0;
+    font-size: 18px;
+    color: #303133;
+  }
+}
+
+.preview-container {
+  background-color: #fff;
+  padding: 20px;
+  min-height: 500px;
+  max-height: 70vh;
+  overflow-y: auto;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  
+  :deep(*) {
+    max-width: 100%;
+  }
+}
+
+.html-preview {
+  background-color: white;
+  padding: 15px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  min-height: 500px;
+  
+  :deep(table) {
+    border-collapse: collapse;
+    width: 100%;
+    max-width: 100%;
+  }
+  
+  :deep(td), :deep(th) {
+    border: 1px solid #000;
+    padding: 8px;
+  }
+}
+
+.docx-preview {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 400px;
+}
+
+.empty-preview {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 400px;
+}
+
+.template-preview-dialog {
+  :deep(.el-dialog__body) {
+    padding: 20px;
+  }
+  
+  :deep(.el-dialog__header) {
+    padding: 15px 20px;
+    border-bottom: 1px solid #f0f0f0;
+  }
 }
 </style>
 
diff --git a/src/views/contract/paymentPlan.vue b/src/views/contract/paymentPlan.vue
index 78bfc79..fa5d8bf 100644
--- a/src/views/contract/paymentPlan.vue
+++ b/src/views/contract/paymentPlan.vue
@@ -1,222 +1,193 @@
 <template>
   <div style="padding: 0 20px;">
-    <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="支付表格列表">
+    <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="付款计划">
       <div slot="content"></div>
       <slot>
-        <!-- 搜索区域 -->
         <div class="selects">
           <div>
-            <span style="padding: 0 6px;word-break: keep-all;">表格名称</span>
-            <el-input v-model="searchForm.name" placeholder="请输入表格名称" style="width: 180px" />
+            <span style="padding: 0 6px;word-break: keep-all;">
+              付款计划日期
+            </span>
+            <DatePicker :value="[select.start,select.end]" placeholder="请选择日期" placement="bottom-start"
+              style="width: 200px" type="daterange" @on-change="datePick"></DatePicker>
           </div>
 
           <div>
-            <span style="padding: 0 6px;word-break: keep-all;">状态</span>
-            <el-select v-model="searchForm.status" placeholder="所有状态" style="width: 180px">
-              <el-option label="所有状态" value=""></el-option>
-              <el-option label="草稿" value="draft"></el-option>
-              <el-option label="已发布" value="published"></el-option>
-              <el-option label="已禁用" value="disabled"></el-option>
-            </el-select>
+            <span style="padding: 0 6px;word-break: keep-all;">
+              关键字
+            </span>
+            <Input v-model="select.keyword" placeholder="请输入关键字" style="width: 180px"></Input>
           </div>
 
-          <div>
-            <span style="padding: 0 6px;word-break: keep-all;">类型</span>
-            <el-select v-model="searchForm.type" placeholder="所有类型" style="width: 180px">
-              <el-option label="所有类型" value=""></el-option>
-              <el-option label="HTML" value="html"></el-option>
-              <el-option label="DOCX" value="docx"></el-option>
-            </el-select>
-          </div>
-
-          <el-button style="margin-left: 10px" @click="resetSearch">重置</el-button>
-          <el-button style="margin-left: 10px" type="primary" @click="handleSearch">查询</el-button>
-          <el-button style="margin-left: 10px" type="primary" @click="handleCreate">新建支付表格</el-button>
+          <Button style="margin-left: 10px" type="primary"
+            @click="select={showDate:'',start:'',end:'',pageIndex:1,keyword:''}">重置
+          </Button>
+          <Button style="margin-left: 10px" type="primary" @click="getSignPlan">查询</Button>
         </div>
       </slot>
     </lx-header>
 
-    <!-- 表格区域 -->
-    <xy-table :list="tableData" :table-item="tableColumns">
-      <template #operation="{ row }">
-        <el-button size="small" @click="handleEdit(row)">编辑</el-button>
-        <el-button size="small" @click="handlePreview(row)">预览</el-button>
-        <el-button 
-          size="small" 
-          :type="row.status === 'disabled' ? 'success' : 'danger'"
-          @click="handleStatusChange(row)"
-        >
-          {{ row.status === 'disabled' ? '启用' : '禁用' }}
-        </el-button>
+
+    <xy-table :list="list" :table-item="table" @delete="deleteContractSign"
+      @editor="(row)=>{$refs['detailContractSign'].planId = row.id;$refs['detailContractSign'].isShow = true}">
+      <template v-slot:btns v-if="type==0">
+
       </template>
     </xy-table>
 
-    <!-- 分页 -->
     <div style="display: flex;justify-content: flex-end;">
-      <el-pagination
-        background
-        layout="total, sizes, prev, pager, next"
-        :total="total"
-        :current-page="currentPage"
-        :page-size="pageSize"
-        @current-change="handlePageChange"
-        @size-change="handleSizeChange"
-      />
+      <Page :total="total" @on-change="pageChange" show-elevator show-sizer @on-page-size-change="pageSizeChange" />
     </div>
+
+    <detailContractSign ref="detailContractSign" @editorSuccess="getSignPlan"></detailContractSign>
   </div>
 </template>
 
 <script>
-export default {
-  name: 'PayFormConfig',
-  data() {
-    return {
-      searchForm: {
-        name: '',
-        status: '',
-        type: ''
-      },
-      tableData: [
-        {
-          name: '项目采购支付表格',
-          type: 'HTML',
-          status: 'published',
-          scenes: '项目采购、设备采购',
-          createTime: '2024-03-01 10:00',
-          updateTime: '2024-03-05 15:30'
-        },
-        {
-          name: '差旅报销表格',
-          type: 'DOCX',
-          status: 'draft',
-          scenes: '差旅报销、交通费报销',
-          createTime: '2024-03-02 14:20',
-          updateTime: '2024-03-02 14:20'
-        },
-        {
-          name: '会议费用报销表格',
-          type: 'DOCX',
-          status: 'disabled',
-          scenes: '会议费用、培训费用',
-          createTime: '2024-02-28 09:15',
-          updateTime: '2024-03-03 11:45'
-        }
-      ],
-      tableColumns: [
-        {
-          prop: 'name',
-          label: '表格名称',
-          width: 170,
-          align: 'left'
-        },
-        {
-          prop: 'type',
-          label: '类型',
-          width: 100
-        },
-        {
-          prop: 'status',
-          label: '状态',
-          width: 100,
-          formatter: (row) => this.getStatusText(row.status)
-        },
-        {
-          prop: 'scenes',
-          label: '已使用场景',
-          minWidth: 180,
-          align: 'left'
-        },
-        {
-          prop: 'createTime',
-          label: '创建时间',
-          width: 160
-        },
-        {
-          prop: 'updateTime',
-          label: '更新时间',
-          width: 160
-        },
-        {
-          prop: 'operation',
-          label: '操作',
-          width: 250,
-          slot: true
-        }
-      ],
-      total: 30,
-      currentPage: 1,
-      pageSize: 10
-    }
-  },
-  methods: {
-    handleCreate() {
-      this.$router.push('/payment-form-config/create')
-    },
-    handleSearch() {
-      console.log('Search with:', this.searchForm)
+  import {
+    getContractSign,
+    delContractSign
+  } from "@/api/contractSign/contractSign"
+  import {
+    parseTime
+  } from "@/utils"
+  import {
+    Message
+  } from "element-ui";
+
+  import detailContractSign from "@/views/contract/components/detailContractSign";
+
+  export default {
+    components: {
+      detailContractSign
     },
-    resetSearch() {
-      this.searchForm = {
-        name: '',
-        status: '',
-        type: ''
+    data() {
+      return {
+        select: {
+          start: `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`,
+          end: `${new Date().getFullYear()}-${new Date().getMonth() + 2}-${new Date().getDate()}`,
+          pageIndex: 1,
+          keyword: '',
+          is_auth: 1,
+        },
+        total: 0,
+        list: [],
+        table: [{
+            prop: 'contract.name',
+            label: '项目名称',
+            width: 170,
+            align: 'left',
+            fixed: 'left'
+          },
+          {
+            prop: 'money',
+            label: '计划付款金额（元）',
+            align: 'right',
+            width: 170,
+            formatter: (v1, v2, value) => {
+              return Number(value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
+            }
+          },
+          {
+            prop: 'date',
+            label: '计划付款日期',
+            width: 180
+          },
+          {
+            prop: 'content',
+            label: '内容',
+            minWidth: 180,
+            align: 'left'
+          },
+          {
+            prop: 'contract.created_at',
+            label: '合同签订日期',
+            width: 180,
+            formatter: (v1, v2, value) => {
+              return parseTime(new Date(value), '{y}-{m}-{d}')
+            }
+          },
+          {
+            prop: 'contract.supply',
+            label: '受款单位',
+            width: 140
+          },
+          {
+            prop: 'admin.name',
+            label: '经办人',
+            width: 140
+          },
+          {
+            prop: 'department.name',
+            label: '经办科室',
+            width: 140
+          },
+          {
+            prop: 'created_at',
+            label: '创建信息',
+            width: 160,
+            formatter: (v1, v2, value) => {
+              return parseTime(new Date(value), '{y}-{m}-{d}')
+            }
+          }
+        ],
       }
     },
-    handleEdit(row) {
-      this.$router.push(`/payment-form-config/edit/${row.id}`)
-    },
-    handlePreview(row) {
-      this.$message.info(`预览：${row.name}`)
-    },
-    handleStatusChange(row) {
-      const action = row.status === 'disabled' ? '启用' : '禁用'
-      this.$confirm(`确定要${action}该表格吗？`, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.$message.success(`${action}成功`)
-      }).catch(() => {
-        this.$message.info('已取消操作')
-      })
-    },
-    handlePageChange(page) {
-      this.currentPage = page
+    methods: {
+      pageSizeChange(e) {
+        this.select.pageSize = e;
+        this.select.pageIndex = 1;
+        this.getSignPlan();
+      },
+      async getSignPlan() {
+        const res = await getContractSign({
+          page_size: this.select.pageSize,
+          page: this.select.pageIndex,
+          keyword: this.select.keyword,
+          start_date: this.select.start,
+          end_date: this.select.end,
+          is_auth: this.select.is_auth
+        })
+        this.total = res.total
+        this.list = res.data
+      },
+      deleteContractSign(row) {
+        delContractSign({
+          id: row.id
+        }).then(res => {
+          this.getSignPlan()
+          Message({
+            type: 'success',
+            message: "操作成功"
+          })
+        })
+      },
+      datePick(e) {
+        this.select.start = e[0]
+        this.select.end = e[1]
+      },
+      pageChange(e) {
+        this.select.pageIndex = e
+        this.getSignPlan()
+      },
     },
-    handleSizeChange(size) {
-      this.pageSize = size
-      this.currentPage = 1
+    mounted() {
+      this.getSignPlan()
     },
-    getStatusText(status) {
-      const texts = {
-        published: '已发布',
-        draft: '草稿',
-        disabled: '已禁用'
-      }
-      return texts[status] || status
+    created() {
+      let type = parseInt(this.$route.path.split("_")[1]);
+      this.type = this.select.is_auth = type;
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
-.selects {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-
-  & > div {
-    margin-bottom: 6px;
+  .selects {
     display: flex;
-    align-items: center;
-  }
-}
-
-:deep(.el-button + .el-button) {
-  margin-left: 8px;
-}
+    flex-wrap: wrap;
 
-:deep(.el-table) {
-  margin-top: 20px;
-}
+    &>div {
+      margin-bottom: 6px;
+    }
+  }
 </style>