From a245b61408925e97ebd257d33796db4eb5296a50 Mon Sep 17 00:00:00 2001
From: lynn <lynnlinyong@qq.com>
Date: Fri, 18 Apr 2025 11:35:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=94=AF=E4=BB=98=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E6=96=B0=E5=A2=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/businessConfig/AddPayForm.vue     | 363 ++++++++++++++++++++
 src/views/businessConfig/contractConfig.vue | 259 ++++++++++++++
 src/views/businessConfig/payFormConfig.vue  | 259 ++++++++++++++
 src/views/contract/paymentPlan.vue          | 343 +++++++++---------
 4 files changed, 1067 insertions(+), 157 deletions(-)
 create mode 100644 src/views/businessConfig/AddPayForm.vue
 create mode 100644 src/views/businessConfig/contractConfig.vue
 create mode 100644 src/views/businessConfig/payFormConfig.vue

diff --git a/src/views/businessConfig/AddPayForm.vue b/src/views/businessConfig/AddPayForm.vue
new file mode 100644
index 0000000..4133dda
--- /dev/null
+++ b/src/views/businessConfig/AddPayForm.vue
@@ -0,0 +1,363 @@
+<template>
+  <div style="padding: 0 20px;">
+    <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="新增支付表格">
+    </lx-header>
+
+    <div class="content-wrapper">
+      <!-- 左侧面板 -->
+      <div class="left-panel">
+        <!-- 预览区 -->
+        <div>
+          <div class="panel-header">
+            <h5 class="panel-title">预览区</h5>
+            <div class="action-buttons">
+              <el-button size="small" @click="handleRefresh">刷新</el-button>
+            </div>
+          </div>
+          <div class="preview-container"></div>
+        </div>
+
+        <!-- 代码预览区 -->
+        <div>
+          <div class="panel-header">
+            <h5 class="panel-title">代码预览区</h5>
+            <div class="action-buttons">
+              <el-select v-model="formatType" size="small" style="width: 120px">
+                <el-option label="HTML" value="html"></el-option>
+                <el-option label="DOCX" value="docx"></el-option>
+              </el-select>
+              <el-button 
+                size="small" 
+                v-if="formatType === 'docx'"
+                @click="handleUpload"
+              >上传文件</el-button>
+            </div>
+          </div>
+          <div class="code-preview-container">
+            <el-input
+              type="textarea"
+              v-model="codeContent"
+              :rows="10"
+              resize="none"
+              class="code-editor"
+            ></el-input>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧面板 -->
+      <div class="right-panel">
+        <div class="field-config-container">
+          <div class="panel-header">
+            <h5 class="panel-title">字段配置</h5>
+          </div>
+          <div class="field-list">
+            <div 
+              v-for="field in fieldList" 
+              :key="field.name"
+              class="field-item"
+              @click="handleEditField(field)"
+            >
+              <el-row align="middle">
+                <el-col :span="8">
+                  <span class="text-muted">{{ field.name }}</span>
+                </el-col>
+                <el-col :span="8">
+                  <strong>{{ field.label }}</strong>
+                </el-col>
+                <el-col :span="8">
+                  <span class="text-muted">{{ getTypeDisplay(field.type) }}</span>
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部固定保存按钮 -->
+    <div class="footer-actions">
+      <div class="footer-content">
+        <el-button size="large" class="footer-button" @click="$router.back()">取 消</el-button>
+        <el-button size="large" type="primary" class="footer-button" @click="handleSave">保 存</el-button>
+      </div>
+    </div>
+
+    <!-- 编辑字段抽屉 -->
+    <el-drawer
+      v-model="showEditDrawer"
+      title="编辑字段"
+      size="400px"
+      :destroy-on-close="true"
+    >
+      <el-form :model="editForm" label-width="80px">
+        <el-form-item label="字段名">
+          <el-input v-model="editForm.name" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="中文名">
+          <el-input v-model="editForm.label"></el-input>
+        </el-form-item>
+        <el-form-item label="表单类型">
+          <el-select v-model="editForm.type" class="w-100">
+            <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="用逗号分隔多个选项"></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div style="flex: auto">
+          <el-button @click="showEditDrawer = false">取消</el-button>
+          <el-button type="primary" @click="handleSaveField">保存</el-button>
+        </div>
+      </template>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AddPayForm',
+  data() {
+    return {
+      formatType: 'html',
+      codeContent: '',
+      showEditDrawer: false,
+      editForm: {
+        name: '',
+        label: '',
+        type: 'text',
+        options: ''
+      },
+      fieldList: [
+        {
+          name: 'projectName',
+          label: '项目名称',
+          type: 'text',
+          options: ''
+        },
+        {
+          name: 'budgetAmount',
+          label: '预算金额',
+          type: 'number',
+          options: ''
+        },
+        {
+          name: 'paymentDate',
+          label: '支付日期',
+          type: 'date',
+          options: ''
+        },
+        {
+          name: 'paymentType',
+          label: '支付方式',
+          type: 'select',
+          options: '现金,银行转账,支票,其他'
+        },
+        {
+          name: 'isUrgent',
+          label: '是否加急',
+          type: 'checkbox',
+          options: ''
+        },
+        {
+          name: 'approvalStatus',
+          label: '审批状态',
+          type: 'radio',
+          options: '待审批,已通过,已拒绝'
+        }
+      ]
+    }
+  },
+  watch: {
+    formatType: {
+      immediate: true,
+      handler(val) {
+        if (val === 'html') {
+          this.codeContent = '<!DOCTYPE html>\n<html>\n<head>\n    <title>支付表格</title>\n</head>\n<body>\n    <!-- 这里将显示生成的HTML代码 -->\n</body>\n</html>'
+        } else {
+          this.codeContent = '<?xml version="1.0" encoding="UTF-8"?>\n<w:document xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main">\n    <!-- 这里将显示生成的DOCX代码 -->\n</w:document>'
+        }
+      }
+    }
+  },
+  methods: {
+    handleRefresh() {
+      // 实现刷新预览的逻辑
+    },
+    handleUpload() {
+      // 实现文件上传的逻辑
+    },
+    handleEditField(field) {
+      this.editForm = { ...field }
+      this.showEditDrawer = true
+    },
+    handleSaveField() {
+      const index = this.fieldList.findIndex(item => item.name === this.editForm.name)
+      if (index > -1) {
+        this.fieldList[index] = { ...this.editForm }
+      }
+      this.showEditDrawer = false
+    },
+    getTypeDisplay(type) {
+      const typeMap = {
+        'text': '文本',
+        'number': '数字',
+        'date': '日期',
+        'select': '下拉选择',
+        'checkbox': '复选框',
+        'radio': '单选框'
+      }
+      return typeMap[type] || type
+    },
+    handleSave() {
+      // 这里添加保存逻辑
+      this.$message.success('保存成功')
+      // 保存成功后返回列表页
+      this.$router.push('/business-config/pay-form')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content-wrapper {
+  display: flex;
+  height: calc(100vh - 180px);
+  margin: 0 -20px;
+  padding: 0 20px;
+  margin-bottom: 60px;
+}
+
+.left-panel {
+  flex: 0 0 66.666667%;
+  max-width: 66.666667%;
+  padding-right: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.right-panel {
+  flex: 0 0 33.333333%;
+  max-width: 33.333333%;
+  border-left: 1px solid #dee2e6;
+  padding-left: 20px;
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+
+  .panel-title {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+  .action-buttons {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
+}
+
+.preview-container,
+.code-preview-container {
+  height: 300px;
+  border: 1px solid #dee2e6;
+  padding: 20px;
+  overflow-y: auto;
+  margin-bottom: 20px;
+}
+
+.code-editor {
+  font-family: monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  background-color: #f8f9fa;
+}
+
+.field-config-container {
+  flex: 1;
+  border: 1px solid #dee2e6;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.field-list {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.field-item {
+  padding: 10px 0;
+  cursor: pointer;
+  border-bottom: 1px solid #dee2e6;
+
+  &:hover {
+    background-color: #f8f9fa;
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  .text-muted {
+    color: #6c757d;
+  }
+}
+
+.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);
+    }
+  }
+}
+</style>
+
+
+
diff --git a/src/views/businessConfig/contractConfig.vue b/src/views/businessConfig/contractConfig.vue
new file mode 100644
index 0000000..2c01c49
--- /dev/null
+++ b/src/views/businessConfig/contractConfig.vue
@@ -0,0 +1,259 @@
+<template>
+    <div ref="contractList" style="padding: 0 20px;">
+      <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="支付表格配置">
+        <div slot="content"></div>
+        <slot>
+            <!-- 搜索区域 -->
+            <div class="search-wrapper">
+                <div class="selects">
+                    <div>
+                    <span style="padding: 0 6px;word-break: keep-all;">表格名称</span>
+                    <el-input v-model="searchForm.name" placeholder="请输入表格名称" style="width: 180px" />
+                    </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>
+                    </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>
+                </div>
+                
+                <!-- 新增按钮 -->
+                <div class="operation-wrapper">
+                    <el-button type="primary" @click="handleCreate">新增</el-button>
+                </div>
+            </div>
+        </slot>
+       </lx-header>
+
+
+    <!-- 表格区域 -->
+    <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 label="状态">
+          <template #default="scope">
+            <el-tag :type="getStatusType(scope.row.status)" effect="plain">
+              {{ getStatusText(scope.row.status) }}
+            </el-tag>
+          </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">
+          <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>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="total"
+          :current-page="currentPage"
+          @current-change="handlePageChange"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </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'
+        }
+      ],
+      total: 30,
+      currentPage: 1
+    }
+  },
+  methods: {
+    handleCreate() {
+      this.$router.push('/payment-form-config/create')
+    },
+    handleSearch() {
+      // 实现搜索逻辑
+      console.log('Search with:', this.searchForm)
+    },
+    resetSearch() {
+      this.searchForm = {
+        name: '',
+        status: '',
+        type: ''
+      }
+    },
+    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
+      // 实现分页加载逻辑
+    },
+    getStatusType(status) {
+      const types = {
+        published: 'success',
+        draft: 'info',
+        disabled: 'danger'
+      }
+      return types[status] || 'info'
+    },
+    getStatusText(status) {
+      const texts = {
+        published: '已发布',
+        draft: '草稿',
+        disabled: '已禁用'
+      }
+      return texts[status] || status
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.search-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 16px;
+  margin-top: 16px;
+}
+
+.selects {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+
+  & > div {
+    margin-bottom: 6px;
+    display: flex;
+    align-items: center;
+    margin-right: 10px;
+
+    span {
+      white-space: nowrap;
+      color: #606266;
+    }
+  }
+
+  :deep(.el-input__inner) {
+    height: 32px;
+    line-height: 32px;
+  }
+
+  :deep(.el-button) {
+    height: 32px;
+    padding: 0 15px;
+  }
+}
+
+.operation-wrapper {
+  margin-left: 16px;
+  white-space: nowrap;
+}
+
+.table-container {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(0,0,0,0.1);
+}
+
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.w-100 {
+  width: 100%;
+}
+
+:deep(.el-table) {
+  margin-top: 20px;
+}
+
+:deep(.el-button + .el-button) {
+  margin-left: 8px;
+}
+</style>
+
+
+
diff --git a/src/views/businessConfig/payFormConfig.vue b/src/views/businessConfig/payFormConfig.vue
new file mode 100644
index 0000000..9463046
--- /dev/null
+++ b/src/views/businessConfig/payFormConfig.vue
@@ -0,0 +1,259 @@
+<template>
+    <div ref="contractList" style="padding: 0 20px;">
+      <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="支付表格配置">
+        <div slot="content"></div>
+        <slot>
+            <!-- 搜索区域 -->
+            <div class="search-wrapper">
+                <div class="selects">
+                    <div>
+                    <span style="padding: 0 6px;word-break: keep-all;">表格名称</span>
+                    <el-input v-model="searchForm.name" placeholder="请输入表格名称" style="width: 180px" />
+                    </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>
+                    </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>
+                </div>
+                
+                <!-- 新增按钮 -->
+                <div class="operation-wrapper">
+                    <el-button type="primary" @click="handleCreate">新增</el-button>
+                </div>
+            </div>
+        </slot>
+       </lx-header>
+
+
+    <!-- 表格区域 -->
+    <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 label="状态">
+          <template #default="scope">
+            <el-tag :type="getStatusType(scope.row.status)" effect="plain">
+              {{ getStatusText(scope.row.status) }}
+            </el-tag>
+          </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">
+          <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>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="total"
+          :current-page="currentPage"
+          @current-change="handlePageChange"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </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'
+        }
+      ],
+      total: 30,
+      currentPage: 1
+    }
+  },
+  methods: {
+    handleCreate() {
+      this.$router.push('/businessConfig/AddPayForm')
+    },
+    handleSearch() {
+      // 实现搜索逻辑
+      console.log('Search with:', this.searchForm)
+    },
+    resetSearch() {
+      this.searchForm = {
+        name: '',
+        status: '',
+        type: ''
+      }
+    },
+    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
+      // 实现分页加载逻辑
+    },
+    getStatusType(status) {
+      const types = {
+        published: 'success',
+        draft: 'info',
+        disabled: 'danger'
+      }
+      return types[status] || 'info'
+    },
+    getStatusText(status) {
+      const texts = {
+        published: '已发布',
+        draft: '草稿',
+        disabled: '已禁用'
+      }
+      return texts[status] || status
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.search-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 16px;
+  margin-top: 16px;
+}
+
+.selects {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+
+  & > div {
+    margin-bottom: 6px;
+    display: flex;
+    align-items: center;
+    margin-right: 10px;
+
+    span {
+      white-space: nowrap;
+      color: #606266;
+    }
+  }
+
+  :deep(.el-input__inner) {
+    height: 32px;
+    line-height: 32px;
+  }
+
+  :deep(.el-button) {
+    height: 32px;
+    padding: 0 15px;
+  }
+}
+
+.operation-wrapper {
+  margin-left: 16px;
+  white-space: nowrap;
+}
+
+.table-container {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(0,0,0,0.1);
+}
+
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.w-100 {
+  width: 100%;
+}
+
+:deep(.el-table) {
+  margin-top: 20px;
+}
+
+:deep(.el-button + .el-button) {
+  margin-left: 8px;
+}
+</style>
+
+
+
diff --git a/src/views/contract/paymentPlan.vue b/src/views/contract/paymentPlan.vue
index 3cf9ee0..78bfc79 100644
--- a/src/views/contract/paymentPlan.vue
+++ b/src/views/contract/paymentPlan.vue
@@ -1,193 +1,222 @@
 <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>
-            <DatePicker :value="[select.start,select.end]" placeholder="请选择日期" placement="bottom-start"
-              style="width: 200px" type="daterange" @on-change="datePick"></DatePicker>
+            <span style="padding: 0 6px;word-break: keep-all;">表格名称</span>
+            <el-input v-model="searchForm.name" placeholder="请输入表格名称" style="width: 180px" />
           </div>
 
           <div>
-            <span style="padding: 0 6px;word-break: keep-all;">
-              关键字
-            </span>
-            <Input v-model="select.keyword" placeholder="请输入关键字" style="width: 180px"></Input>
+            <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>
           </div>
 
-          <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>
+            <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>
         </div>
       </slot>
     </lx-header>
 
-
-    <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">
-
+    <!-- 表格区域 -->
+    <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>
       </template>
     </xy-table>
 
+    <!-- 分页 -->
     <div style="display: flex;justify-content: flex-end;">
-      <Page :total="total" @on-change="pageChange" show-elevator show-sizer @on-page-size-change="pageSizeChange" />
+      <el-pagination
+        background
+        layout="total, sizes, prev, pager, next"
+        :total="total"
+        :current-page="currentPage"
+        :page-size="pageSize"
+        @current-change="handlePageChange"
+        @size-change="handleSizeChange"
+      />
     </div>
-
-    <detailContractSign ref="detailContractSign" @editorSuccess="getSignPlan"></detailContractSign>
   </div>
 </template>
 
 <script>
-  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
-    },
-    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,
+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
         },
-        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}')
-            }
-          }
-        ],
+        {
+          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)
+    },
+    resetSearch() {
+      this.searchForm = {
+        name: '',
+        status: '',
+        type: ''
       }
     },
-    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()
-      },
+    handleEdit(row) {
+      this.$router.push(`/payment-form-config/edit/${row.id}`)
+    },
+    handlePreview(row) {
+      this.$message.info(`预览：${row.name}`)
     },
-    mounted() {
-      this.getSignPlan()
+    handleStatusChange(row) {
+      const action = row.status === 'disabled' ? '启用' : '禁用'
+      this.$confirm(`确定要${action}该表格吗？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$message.success(`${action}成功`)
+      }).catch(() => {
+        this.$message.info('已取消操作')
+      })
     },
-    created() {
-      let type = parseInt(this.$route.path.split("_")[1]);
-      this.type = this.select.is_auth = type;
+    handlePageChange(page) {
+      this.currentPage = page
+    },
+    handleSizeChange(size) {
+      this.pageSize = size
+      this.currentPage = 1
+    },
+    getStatusText(status) {
+      const texts = {
+        published: '已发布',
+        draft: '草稿',
+        disabled: '已禁用'
+      }
+      return texts[status] || status
     }
   }
+}
 </script>
 
 <style lang="scss" scoped>
-  .selects {
-    display: flex;
-    flex-wrap: wrap;
+.selects {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
 
-    &>div {
-      margin-bottom: 6px;
-    }
+  & > div {
+    margin-bottom: 6px;
+    display: flex;
+    align-items: center;
   }
-</style>
+}
+
+:deep(.el-button + .el-button) {
+  margin-left: 8px;
+}
+
+:deep(.el-table) {
+  margin-top: 20px;
+}
+</style>