From 1baa5529bf6ad4bd3e375f295f12441c7798478b Mon Sep 17 00:00:00 2001
From: lynn <lynnlinyong@qq.com>
Date: Sat, 19 Apr 2025 14:46:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=90=88=E5=90=8C=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E9=83=A8=E5=88=86=E5=89=8D=E7=AB=AF=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                |   7 +
 src/views/businessConfig/AddPayForm.vue     | 153 ++++-
 src/views/businessConfig/contractConfig.vue | 631 ++++++++++++++++----
 3 files changed, 677 insertions(+), 114 deletions(-)

diff --git a/package.json b/package.json
index 15b4281..ea892a4 100644
--- a/package.json
+++ b/package.json
@@ -17,15 +17,22 @@
   "dependencies": {
     "axios": "0.18.1",
     "core-js": "3.6.5",
+    "docx": "^9.4.1",
+    "docx-parser": "^0.2.1",
+    "docx2html": "^1.3.2",
+    "docxtemplater": "^3.61.1",
     "element-ui": "2.13.2",
     "file-saver": "^2.0.5",
     "html2canvas": "^1.4.1",
     "js-cookie": "2.2.0",
+    "jszip": "^3.10.1",
     "less": "^3.13.1",
+    "mammoth": "^1.9.0",
     "moment": "^2.29.4",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "pizzip": "^3.1.8",
     "print-js": "^1.6.0",
     "view-design": "^4.7.0",
     "vue": "2.6.10",
diff --git a/src/views/businessConfig/AddPayForm.vue b/src/views/businessConfig/AddPayForm.vue
index 3df1fe5..faf531c 100644
--- a/src/views/businessConfig/AddPayForm.vue
+++ b/src/views/businessConfig/AddPayForm.vue
@@ -7,25 +7,36 @@
       <!-- 左侧面板 -->
       <div class="left-panel">
         <!-- 预览区 -->
-                    <div>
+        <div>
           <div class="panel-header">
             <h5 class="panel-title">预览区</h5>
             <div class="action-buttons">
               <el-button size="small" @click="handleRefresh">刷新</el-button>
             </div>
-                    </div>
-          <div class="preview-container" v-html="previewContent"></div>
-                    </div>
+          </div>
+          <div class="preview-container" v-if="formatType === 'html'" v-html="previewContent"></div>
+          <div class="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>
+        </div>
 
         <!-- 代码预览区 -->
-                    <div>
+        <div>
           <div class="panel-header">
             <h5 class="panel-title">代码预览区</h5>
             <div class="action-buttons">
               <el-select v-model="formatType" size="small" style="width: 120px">
-                        <el-option label="HTML" value="html"></el-option>
-                        <el-option label="DOCX" value="docx"></el-option>
-                    </el-select>
+                <el-option label="HTML" value="html"></el-option>
+                <el-option label="DOCX" value="docx"></el-option>
+              </el-select>
               <el-button 
                 size="small" 
                 v-if="formatType === 'docx'"
@@ -42,15 +53,15 @@
               class="code-editor"
             ></el-input>
           </div>
-                    </div>
-                </div>
-                
+        </div>
+      </div>
+      
       <!-- 右侧面板 -->
       <div class="right-panel">
         <div class="field-config-container">
           <div class="panel-header">
             <h5 class="panel-title">字段配置</h5>
-                </div>
+          </div>
           <div class="field-list">
             <div 
               v-for="field in fieldList" 
@@ -129,6 +140,8 @@
 </template>
 
 <script>
+import mammoth from 'mammoth';
+
 export default {
   name: 'AddPayForm',
   data() {
@@ -769,6 +782,8 @@ export default {
       fieldList: [],
       previewContent: '',
       fieldMetadata: {},
+      docxContent: '',
+      docxUrl: ''
     }
   },
   mounted() {
@@ -829,7 +844,68 @@ export default {
       this.previewContent = processedContent;
     },
     handleUpload() {
-      // 实现文件上传的逻辑
+      // 创建文件输入元素
+      const input = document.createElement('input');
+      input.type = 'file';
+      input.accept = '.docx';
+      
+      // 监听文件选择事件
+      input.onchange = async (e) => {
+        const file = e.target.files[0];
+        if (file) {
+          // 检查文件类型
+          if (!file.name.endsWith('.docx')) {
+            this.$message.error('请选择docx格式的文件');
+            return;
+          }
+          
+          try {
+            // 创建临时URL
+            const blobUrl = URL.createObjectURL(file);
+            // 使用 Microsoft Office Online Viewer
+            this.docxUrl = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(blobUrl)}`;
+            
+            // 清空代码预览区
+            this.codeContent = '';
+            
+            // 将文件转换为ArrayBuffer
+            const arrayBuffer = await this.readFileAsArrayBuffer(file);
+            
+            // 使用mammoth转换docx为HTML，用于提取变量
+            const result = await mammoth.convertToHtml({ 
+              arrayBuffer,
+              transformDocument: (document) => {
+                return document;
+              }
+            });
+            
+            // 提取占位变量
+            const variables = this.extractVariables(result.value);
+            
+            // 显示提取的HTML内容
+            this.codeContent = result.value;
+            
+            // 更新字段元数据
+            this.updateFieldMetadata(variables);
+            
+          } catch (error) {
+            console.error('处理文档失败:', error);
+            this.$message.error('处理文档失败，请重试');
+          }
+        }
+      };
+      
+      // 触发文件选择对话框
+      input.click();
+    },
+    
+    readFileAsArrayBuffer(file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = (event) => resolve(event.target.result);
+        reader.onerror = (error) => reject(error);
+        reader.readAsArrayBuffer(file);
+      });
     },
     handleEditField(field) {
       this.editForm = { ...field };
@@ -902,6 +978,32 @@ export default {
     showDrawerOnly() {
       this.showEditDrawer = true;
       console.log('尝试只打开抽屉');
+    },
+    extractVariables(text) {
+      // 使用更宽松的正则表达式匹配占位变量
+      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);
+    }
+  },
+  // 在组件销毁时释放URL
+  beforeDestroy() {
+    if (this.docxUrl) {
+      URL.revokeObjectURL(this.docxUrl);
     }
   }
 }
@@ -972,11 +1074,27 @@ export default {
   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 {
@@ -1087,6 +1205,15 @@ export default {
     line-height: 1.5;
   }
 }
+
+.preview-container {
+  height: 300px;
+  border: 1px solid #dee2e6;
+  padding: 20px;
+  overflow-y: auto;
+  margin-bottom: 20px;
+  background: white;
+}
 </style>
 
 
diff --git a/src/views/businessConfig/contractConfig.vue b/src/views/businessConfig/contractConfig.vue
index 2c01c49..84b8996 100644
--- a/src/views/businessConfig/contractConfig.vue
+++ b/src/views/businessConfig/contractConfig.vue
@@ -1,33 +1,24 @@
 <template>
     <div ref="contractList" 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="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>
+                    <span style="padding: 0 6px;word-break: keep-all;">事务类型</span>
+                    <el-select v-model="searchForm.category" placeholder="所有类型" style="width: 180px">
+                        <el-option label="所有类型" value=""></el-option>
+                        <el-option label="项目采购类" value="project"></el-option>
+                        <el-option label="事务类" value="affair"></el-option>
+                        <el-option label="报销类" value="reimbursement"></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>
+                    <span style="padding: 0 6px;word-break: keep-all;">合同类型</span>
+                    <el-input v-model="searchForm.contractType" placeholder="请输入合同类型" style="width: 180px" />
                     </div>
 
                     <el-button style="margin-left: 10px" @click="resetSearch">重置</el-button>
@@ -46,29 +37,65 @@
     <!-- 表格区域 -->
     <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 prop="index" label="序号" width="80"></el-table-column>
+        <el-table-column prop="category" label="事务类型"></el-table-column>
+        <el-table-column prop="contractType" label="合同类型"></el-table-column>
+        <el-table-column label="表单内容">
+          <el-table-column prop="projectName" label="项目名称" width="100">
+            <template #default="scope">
+              <span :class="{'check-mark': scope.row.projectName}">√</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="projectType" label="项目类型" width="100">
+            <template #default="scope">
+              <span :class="{'check-mark': scope.row.projectType}">√</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="purchaseForm" label="采购形式" width="120"></el-table-column>
+          <el-table-column prop="purchaseMethod" label="采购方式" width="120"></el-table-column>
+          <el-table-column prop="budgetPrice" label="预算价" width="100">
+            <template #default="scope">
+              <span :class="{'check-mark': scope.row.budgetPrice}">√</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="fundChannel" label="资金渠道" width="100">
+            <template #default="scope">
+              <span :class="{'check-mark': scope.row.fundChannel}">√</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="budgetPlan" label="关联预算计划" width="120">
+            <template #default="scope">
+              <span :class="{'check-mark': scope.row.budgetPlan}">√</span>
+            </template>
+          </el-table-column>
+        </el-table-column>
+        <el-table-column label="事项流程">
+          <el-table-column prop="request" label="请示" width="100">
+            <template #default="scope">
+              <span :class="{'check-mark': scope.row.request}">√</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="purchaseApproval" label="采购业务审批表" width="120">
+            <template #default="scope">
+              <span :class="{'check-mark': scope.row.purchaseApproval}">√</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="tenderReview" label="招标文件审查流程" width="120">
+            <template #default="scope">
+              <span :class="{'check-mark': scope.row.tenderReview}">√</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="contractSign" label="合同会签流程" width="120">
+            <template #default="scope">
+              <span :class="{'check-mark': scope.row.contractSign}">√</span>
+            </template>
+          </el-table-column>
         </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="paymentForm" label="支付表格" width="100"></el-table-column>
+        <el-table-column label="操作" width="150">
           <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>
+            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -85,103 +112,280 @@
         </el-pagination>
       </div>
     </div>
+
+    <!-- 配置表单抽屉 -->
+    <el-drawer
+      :visible.sync="dialogVisible"
+      :title="dialogTitle"
+      size="500px"
+      :destroy-on-close="true"
+      direction="rtl"
+      custom-class="config-drawer"
+    >
+      <div class="drawer-container">
+        <div class="drawer-content">
+          <div class="scroll-container">
+            <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" class="config-form">
+              <!-- 分类选择 -->
+              <el-form-item label="分类选择" prop="category" class="form-section">
+                <el-select v-model="form.category" placeholder="请选择分类" class="form-input">
+                  <el-option label="项目采购类" value="project"></el-option>
+                  <el-option label="事务类" value="affair"></el-option>
+                  <el-option label="报销类" value="reimbursement"></el-option>
+                </el-select>
+              </el-form-item>
+
+              <!-- 合同类型 -->
+              <el-form-item label="合同类型" prop="contractType" class="form-section">
+                <el-input v-model="form.contractType" placeholder="请输入合同类型" class="form-input"></el-input>
+              </el-form-item>
+
+              <!-- 表单内容 -->
+              <div class="form-section">
+                <div class="section-title">表单内容</div>
+                <div class="checkbox-group">
+                  <el-checkbox v-model="form.projectName">项目名称</el-checkbox>
+                  <el-checkbox v-model="form.projectType">项目类型</el-checkbox>
+                </div>
+                
+                <div class="sub-section">
+                  <div class="sub-title">采购形式</div>
+                  <el-checkbox v-model="purchaseFormAll" @change="handlePurchaseFormAllChange">全选</el-checkbox>
+                  <el-checkbox-group v-model="form.purchaseForm" @change="handlePurchaseFormChange">
+                    <div class="checkbox-list">
+                      <el-checkbox label="政府采购">政府采购</el-checkbox>
+                      <el-checkbox label="小型项目">小型项目</el-checkbox>
+                    </div>
+                  </el-checkbox-group>
+                </div>
+
+                <div class="sub-section">
+                  <div class="sub-title">采购方式</div>
+                  <el-checkbox v-model="purchaseMethodAll" @change="handlePurchaseMethodAllChange">全选</el-checkbox>
+                  <el-checkbox-group v-model="form.purchaseMethod" @change="handlePurchaseMethodChange">
+                    <div class="checkbox-list">
+                      <el-checkbox label="公开招标">公开招标</el-checkbox>
+                      <el-checkbox label="竞争性磋商">竞争性磋商</el-checkbox>
+                      <el-checkbox label="竞争性谈判">竞争性谈判</el-checkbox>
+                      <el-checkbox label="单一来源采购">单一来源采购</el-checkbox>
+                      <el-checkbox label="直接发包">直接发包</el-checkbox>
+                      <el-checkbox label="网上商城">网上商城</el-checkbox>
+                    </div>
+                  </el-checkbox-group>
+                </div>
+
+                <div class="checkbox-group">
+                  <el-checkbox v-model="form.budgetPrice">预算价</el-checkbox>
+                  <el-checkbox v-model="form.fundChannel">资金渠道</el-checkbox>
+                  <el-checkbox v-model="form.budgetPlan">关联预算计划</el-checkbox>
+                </div>
+              </div>
+
+              <!-- 事项流程 -->
+              <div class="form-section">
+                <div class="section-title">事项流程</div>
+                <div class="checkbox-group">
+                  <el-checkbox v-model="form.request">请示</el-checkbox>
+                  <el-checkbox v-model="form.purchaseApproval">采购业务审批表</el-checkbox>
+                  <el-checkbox v-model="form.tenderReview">招标文件审查流程</el-checkbox>
+                  <el-checkbox v-model="form.contractSign">合同会签流程</el-checkbox>
+                </div>
+              </div>
+
+              <!-- 支付表格 -->
+              <el-form-item label="支付表格" prop="paymentForm" class="form-section">
+                <el-select v-model="form.paymentForm" placeholder="请选择支付表格" class="form-input">
+                  <el-option label="附件1" value="attachment1"></el-option>
+                  <el-option label="附件2" value="attachment2"></el-option>
+                  <el-option label="附件3" value="attachment3"></el-option>
+                  <el-option label="附件4" value="attachment4"></el-option>
+                  <el-option label="附件5" value="attachment5"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+        <div class="drawer-footer">
+          <div class="footer-buttons">
+            <el-button @click="dialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="handleSubmit">保 存</el-button>
+          </div>
+        </div>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'PayFormConfig',
+  name: 'ContractConfig',
   data() {
     return {
+      purchaseFormAll: false,
+      purchaseMethodAll: false,
       searchForm: {
-        name: '',
-        status: '',
-        type: ''
+        category: '',
+        contractType: ''
       },
       tableData: [
         {
-          name: '项目采购支付表格',
-          type: 'HTML',
-          status: 'published',
-          scenes: '项目采购、设备采购',
-          createTime: '2024-03-01 10:00',
-          updateTime: '2024-03-05 15:30'
+          index: 1,
+          category: '项目采购类',
+          contractType: '合同类',
+          projectName: true,
+          projectType: true,
+          purchaseForm: '政府采购',
+          purchaseMethod: '公开招标',
+          budgetPrice: true,
+          fundChannel: true,
+          budgetPlan: true,
+          request: true,
+          purchaseApproval: true,
+          tenderReview: true,
+          contractSign: true,
+          paymentForm: '附件5'
         },
         {
-          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'
+          index: 2,
+          category: '项目采购类',
+          contractType: '借水借电类',
+          projectName: true,
+          projectType: false,
+          purchaseForm: '小型项目',
+          purchaseMethod: '直接发包',
+          budgetPrice: false,
+          fundChannel: true,
+          budgetPlan: true,
+          request: true,
+          purchaseApproval: true,
+          tenderReview: false,
+          contractSign: true,
+          paymentForm: '附件5'
         }
       ],
       total: 30,
-      currentPage: 1
+      currentPage: 1,
+      dialogVisible: false,
+      dialogTitle: '新增配置',
+      form: {
+        category: '',
+        contractType: '',
+        projectName: false,
+        projectType: false,
+        purchaseForm: [],
+        purchaseMethod: [],
+        budgetPrice: false,
+        fundChannel: false,
+        budgetPlan: false,
+        request: false,
+        purchaseApproval: false,
+        tenderReview: false,
+        contractSign: false,
+        paymentForm: ''
+      },
+      rules: {
+        category: [
+          { required: true, message: '请选择分类', trigger: 'change' }
+        ],
+        contractType: [
+          { required: true, message: '请输入合同类型', trigger: 'blur' }
+        ],
+        paymentForm: [
+          { required: true, message: '请选择支付表格', trigger: 'change' }
+        ]
+      }
     }
   },
   methods: {
     handleCreate() {
-      this.$router.push('/payment-form-config/create')
-    },
-    handleSearch() {
-      // 实现搜索逻辑
-      console.log('Search with:', this.searchForm)
-    },
-    resetSearch() {
-      this.searchForm = {
-        name: '',
-        status: '',
-        type: ''
+      this.dialogTitle = '新增配置'
+      this.form = {
+        category: '',
+        contractType: '',
+        projectName: false,
+        projectType: false,
+        purchaseForm: [],
+        purchaseMethod: [],
+        budgetPrice: false,
+        fundChannel: false,
+        budgetPlan: false,
+        request: false,
+        purchaseApproval: false,
+        tenderReview: false,
+        contractSign: false,
+        paymentForm: ''
       }
+      this.dialogVisible = true
     },
     handleEdit(row) {
-      this.$router.push(`/payment-form-config/edit/${row.id}`)
+      this.dialogTitle = '编辑配置'
+      this.form = { ...row }
+      this.dialogVisible = true
     },
-    handlePreview(row) {
-      // 实现预览逻辑
-      this.$message.info(`预览：${row.name}`)
-    },
-    handleStatusChange(row) {
-      const action = row.status === 'disabled' ? '启用' : '禁用'
-      this.$confirm(`确定要${action}该表格吗？`, '提示', {
+    handleDelete(row) {
+      this.$confirm('确定要删除该配置吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        // 实现状态变更逻辑
-        this.$message.success(`${action}成功`)
+        const index = this.tableData.findIndex(item => item.index === row.index)
+        if (index !== -1) {
+          this.tableData.splice(index, 1)
+          this.$message.success('删除成功')
+        }
       }).catch(() => {
-        this.$message.info('已取消操作')
+        this.$message.info('已取消删除')
       })
     },
+    handleSubmit() {
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          if (this.dialogTitle === '新增配置') {
+            const newIndex = this.tableData.length + 1
+            this.tableData.push({
+              ...this.form,
+              index: newIndex
+            })
+          } else {
+            const index = this.tableData.findIndex(item => item.index === this.form.index)
+            if (index !== -1) {
+              this.tableData.splice(index, 1, this.form)
+            }
+          }
+          this.dialogVisible = false
+          this.$message.success('保存成功')
+        }
+      })
+    },
+    handleSearch() {
+      // 实现搜索逻辑
+      console.log('Search with:', this.searchForm)
+    },
+    resetSearch() {
+      this.searchForm = {
+        category: '',
+        contractType: ''
+      }
+    },
     handlePageChange(page) {
       this.currentPage = page
       // 实现分页加载逻辑
     },
-    getStatusType(status) {
-      const types = {
-        published: 'success',
-        draft: 'info',
-        disabled: 'danger'
-      }
-      return types[status] || 'info'
+    handlePurchaseFormAllChange(val) {
+      const allOptions = ['政府采购', '小型项目']
+      this.form.purchaseForm = val ? allOptions : []
     },
-    getStatusText(status) {
-      const texts = {
-        published: '已发布',
-        draft: '草稿',
-        disabled: '已禁用'
-      }
-      return texts[status] || status
+    handlePurchaseFormChange(val) {
+      const allOptions = ['政府采购', '小型项目']
+      this.purchaseFormAll = val.length === allOptions.length
+    },
+    handlePurchaseMethodAllChange(val) {
+      const allOptions = ['公开招标', '竞争性磋商', '竞争性谈判', '单一来源采购', '直接发包', '网上商城']
+      this.form.purchaseMethod = val ? allOptions : []
+    },
+    handlePurchaseMethodChange(val) {
+      const allOptions = ['公开招标', '竞争性磋商', '竞争性谈判', '单一来源采购', '直接发包', '网上商城']
+      this.purchaseMethodAll = val.length === allOptions.length
     }
   }
 }
@@ -242,8 +446,9 @@ export default {
   justify-content: center;
 }
 
-.w-100 {
-  width: 100%;
+.check-mark {
+  color: #67C23A;
+  font-weight: bold;
 }
 
 :deep(.el-table) {
@@ -253,6 +458,230 @@ export default {
 :deep(.el-button + .el-button) {
   margin-left: 8px;
 }
+
+:deep(.el-form-item__content) {
+  .el-checkbox {
+    margin-right: 20px;
+  }
+  
+  .el-checkbox-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+}
+
+.config-drawer {
+  :deep(.el-drawer__header) {
+    margin-bottom: 0;
+    padding: 20px 24px;
+    border-bottom: 1px solid #e4e7ed;
+    font-size: 18px;
+    font-weight: 600;
+    color: #1f2937;
+    position: relative;
+    z-index: 1;
+    height: 64px;
+    box-sizing: border-box;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  }
+
+  :deep(.el-drawer__body) {
+    height: calc(100% - 64px);
+    padding: 0;
+    overflow: hidden;
+    background-color: #f9fafb;
+  }
+}
+
+.drawer-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.drawer-content {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+}
+
+.scroll-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow-y: auto;
+  padding: 20px;
+  box-sizing: border-box;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background-color: #c0c4cc;
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background-color: #f5f7fa;
+  }
+}
+
+.config-form {
+  height: auto;
+}
+
+.form-section {
+  margin-bottom: 28px;
+  padding: 20px;
+  background-color: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+
+  &:hover {
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .section-title {
+    color: #374151;
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 20px;
+    padding-bottom: 12px;
+    border-bottom: 2px solid #e5e7eb;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -2px;
+      left: 0;
+      width: 40px;
+      height: 2px;
+      background-color: #409eff;
+    }
+  }
+
+  .sub-section {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    padding-left: 20px;
+    border-left: 3px solid #e5e7eb;
+    transition: border-color 0.3s ease;
+
+    &:hover {
+      border-left-color: #409eff;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .sub-title {
+      font-weight: 500;
+      font-size: 15px;
+      color: #4b5563;
+      margin-bottom: 16px;
+    }
+  }
+}
+
+.checkbox-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-bottom: 12px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  :deep(.el-checkbox) {
+    margin-right: 0;
+    margin-bottom: 8px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.checkbox-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  :deep(.el-checkbox) {
+    margin-right: 0;
+    height: 32px;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.form-input {
+  width: 100%;
+  
+  :deep(.el-input__inner),
+  :deep(.el-select__inner) {
+    height: 36px;
+    line-height: 36px;
+    border-radius: 4px;
+    border-color: #dee2e6;
+  }
+}
+
+.drawer-footer {
+  flex-shrink: 0;
+  height: 72px;
+  padding: 16px 24px;
+  background: #ffffff;
+  border-top: 1px solid #e5e7eb;
+  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  
+  .footer-buttons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+
+    .el-button {
+      min-width: 88px;
+      height: 40px;
+      font-size: 14px;
+      font-weight: 500;
+      border-radius: 6px;
+      transition: all 0.3s ease;
+
+      &:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+      }
+    }
+  }
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 500;
+  color: #495057;
+}
+
+:deep(.el-checkbox__label) {
+  font-weight: normal;
+  color: #606266;
+}
 </style>