diff --git a/src/api/businessConfig/businessConfig.js b/src/api/businessConfig/businessConfig.js
index 45842ef..a71dd74 100644
--- a/src/api/businessConfig/businessConfig.js
+++ b/src/api/businessConfig/businessConfig.js
@@ -33,3 +33,37 @@ export function getContractFormDetail(id) {
     url: `/api/admin/contract-template/show?id=${id}`
   })
 }
+
+// 获取合同分类模版基础配置.
+export function getContractCategoryTemplateBaseConfig() {
+  return request({
+    method: 'get',
+    url: '/api/admin/contract-category/base-config'
+  })
+}
+
+// 获取合同分类模版列表
+export function getContractCategoryTemplate(params) {
+  return request({
+    method: 'get',
+    url: '/api/admin/contract-category/index',
+    params
+  })
+}
+
+// 删除合同分类模版
+export function deleteContractCategoryTemplate(id) {
+  return request({
+    method: 'get',
+    url: `/api/admin/contract-category/destroy?id=${id}`
+  })
+}
+
+// 新增合同分类模版
+export function saveContractCategoryTemplate(data) {
+  return request({
+    method: 'post',
+    url: '/api/admin/contract-category/save',
+    data
+  })
+}
\ No newline at end of file
diff --git a/src/views/businessConfig/EditPayForm.vue b/src/views/businessConfig/EditPayForm.vue
index f082ebe..a4421b7 100644
--- a/src/views/businessConfig/EditPayForm.vue
+++ b/src/views/businessConfig/EditPayForm.vue
@@ -962,7 +962,7 @@ export default {
         this.$message.error('请输入表格名称')
         return
       }
-      
+
       try {
         // Convert field metadata to the format required by the server
         const templateFields = Object.values(this.fieldMetadata).map(metadata => ({
@@ -1011,7 +1011,7 @@ export default {
           updatedMetadata[varName] = this.fieldMetadata[varName];
         } else {
           // Create new metadata using field name as key
-          updatedMetadata[varName] = { 
+          updatedMetadata[varName] = {
             field: varName, // Field name
             name: this.formatVariableName(varName), // Generate Chinese name
             type: 'text',
diff --git a/src/views/businessConfig/contractConfig.vue b/src/views/businessConfig/contractConfig.vue
index 84b8996..e12a554 100644
--- a/src/views/businessConfig/contractConfig.vue
+++ b/src/views/businessConfig/contractConfig.vue
@@ -5,29 +5,46 @@
         <slot>
             <!-- 搜索区域 -->
             <div class="search-wrapper">
+                <div class="search-content">
                 <div class="selects">
                     <div>
-                    <span style="padding: 0 6px;word-break: keep-all;">事务类型</span>
-                    <el-select v-model="searchForm.category" placeholder="所有类型" style="width: 180px">
+                        <span style="padding: 0 6px;word-break: keep-all;">合同分类</span>
+                        <el-select v-model="searchForm.category" placeholder="所有类型" style="width: 140px" @change="handleCategoryChange">
                         <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-option v-for="item in categoryOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
+                        </el-select>
+                        </div>
+
+                        <div>
+                        <span style="padding: 0 6px;word-break: keep-all;">事务类</span>
+                        <el-select v-model="searchForm.affairType" placeholder="请选择事务类" style="width: 140px" @change="handleAffairTypeChange">
+                            <el-option v-for="item in affairTypeOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
                     </el-select>
                     </div>
 
                     <div>
                     <span style="padding: 0 6px;word-break: keep-all;">合同类型</span>
-                    <el-input v-model="searchForm.contractType" placeholder="请输入合同类型" style="width: 180px" />
+                        <el-select v-model="searchForm.contractType" placeholder="请选择合同类型" style="width: 140px" @change="handleContractTypeChange">
+                            <el-option v-for="item in contractTypeOptions" :key="item.id" :label="item.name" :value="item.id"></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>
+                        <span style="padding: 0 6px;word-break: keep-all;">采购形式</span>
+                        <el-select v-model="searchForm.purchaseForm" placeholder="请选择采购形式" style="width: 140px" @change="handlePurchaseFormChange">
+                            <el-option v-for="item in purchaseFormOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
+                        </el-select>
                 </div>
                 
-                <!-- 新增按钮 -->
-                <div class="operation-wrapper">
+                        <div class="search-buttons">
+                            <el-button @click="resetSearch">重置</el-button>
+                            <el-button type="primary" @click="handleSearch">查询</el-button>
+                        </div>
+                    </div>
+
+                    <div class="add-button">
                     <el-button type="primary" @click="handleCreate">新增</el-button>
+                    </div>
                 </div>
             </div>
         </slot>
@@ -36,58 +53,73 @@
 
     <!-- 表格区域 -->
     <div class="table-container">
-      <el-table :data="tableData" style="width: 100%">
+      <el-table :data="tableData" style="width: 100%" :cell-style="{ textAlign: 'center' }" :header-cell-style="{ textAlign: 'center' }">
         <el-table-column prop="index" label="序号" width="80"></el-table-column>
-        <el-table-column prop="category" label="事务类型"></el-table-column>
+        <el-table-column prop="category" label="合同分类"></el-table-column>
+        <el-table-column prop="affairType" label="事务类型"></el-table-column>
         <el-table-column prop="contractType" label="合同类型"></el-table-column>
+        <el-table-column prop="purchaseForm" label="采购形式" width="120"></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>
+              <i class="el-icon-check check-mark" v-if="scope.row.projectName === true || scope.row.projectName === 1"></i>
+              <i class="el-icon-close close-mark" v-else></i>
             </template>
           </el-table-column>
           <el-table-column prop="projectType" label="项目类型" width="100">
             <template #default="scope">
-              <span :class="{'check-mark': scope.row.projectType}">√</span>
+              <i class="el-icon-check check-mark" v-if="scope.row.projectType === true || scope.row.projectType === 1"></i>
+              <i class="el-icon-close close-mark" v-else></i>
+            </template>
+          </el-table-column>
+          <el-table-column prop="purchaseWay" label="采购方式" width="120">
+            <template #default="scope">
+              <i class="el-icon-check check-mark" v-if="scope.row.purchaseWay === true || scope.row.purchaseWay === 1"></i>
+              <i class="el-icon-close close-mark" v-else></i>
             </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>
+              <i class="el-icon-check check-mark" v-if="scope.row.budgetPrice === true || scope.row.budgetPrice === 1"></i>
+              <i class="el-icon-close close-mark" v-else></i>
             </template>
           </el-table-column>
           <el-table-column prop="fundChannel" label="资金渠道" width="100">
             <template #default="scope">
-              <span :class="{'check-mark': scope.row.fundChannel}">√</span>
+              <i class="el-icon-check check-mark" v-if="scope.row.fundChannel === true || scope.row.fundChannel === 1"></i>
+              <i class="el-icon-close close-mark" v-else></i>
             </template>
           </el-table-column>
           <el-table-column prop="budgetPlan" label="关联预算计划" width="120">
             <template #default="scope">
-              <span :class="{'check-mark': scope.row.budgetPlan}">√</span>
+              <i class="el-icon-check check-mark" v-if="scope.row.budgetPlan === true || scope.row.budgetPlan === 1"></i>
+              <i class="el-icon-close close-mark" v-else></i>
             </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>
+              <i class="el-icon-check check-mark" v-if="scope.row.request === true || scope.row.request === 1"></i>
+              <i class="el-icon-close close-mark" v-else></i>
             </template>
           </el-table-column>
           <el-table-column prop="purchaseApproval" label="采购业务审批表" width="120">
             <template #default="scope">
-              <span :class="{'check-mark': scope.row.purchaseApproval}">√</span>
+              <i class="el-icon-check check-mark" v-if="scope.row.purchaseApproval === true || scope.row.purchaseApproval === 1"></i>
+              <i class="el-icon-close close-mark" v-else></i>
             </template>
           </el-table-column>
           <el-table-column prop="tenderReview" label="招标文件审查流程" width="120">
             <template #default="scope">
-              <span :class="{'check-mark': scope.row.tenderReview}">√</span>
+              <i class="el-icon-check check-mark" v-if="scope.row.tenderReview === true || scope.row.tenderReview === 1"></i>
+              <i class="el-icon-close close-mark" v-else></i>
             </template>
           </el-table-column>
           <el-table-column prop="contractSign" label="合同会签流程" width="120">
             <template #default="scope">
-              <span :class="{'check-mark': scope.row.contractSign}">√</span>
+              <i class="el-icon-check check-mark" v-if="scope.row.contractSign === true || scope.row.contractSign === 1"></i>
+              <i class="el-icon-close close-mark" v-else></i>
             </template>
           </el-table-column>
         </el-table-column>
@@ -126,52 +158,69 @@
         <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-form-item label="合同分类" prop="category" class="form-section">
+                <el-select 
+                  v-model="form.category" 
+                  placeholder="请选择合同分类" 
+                  class="form-input" 
+                  @change="handleFormCategoryChange"
+                >
+                  <el-option v-for="item in categoryOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
+                </el-select>
+              </el-form-item>
+
+              <!-- 事务类 - 在编辑模式下，如果有值就显示 -->
+              <el-form-item label="事务类" prop="affairType" class="form-section" v-if="affairTypeOptions.length > 0 || (dialogTitle === '编辑配置' && form.affairType)">
+                <el-select 
+                  v-model="form.affairType" 
+                  placeholder="请选择事务类" 
+                  class="form-input" 
+                  @change="handleFormAffairTypeChange"
+                >
+                  <el-option v-for="item in affairTypeOptions" :key="item.id" :label="item.name" :value="item.id"></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 label="合同类型" prop="contractType" class="form-section" v-if="contractTypeOptions.length > 0 || (dialogTitle === '编辑配置' && form.contractType)">
+                <el-select 
+                  v-model="form.contractType" 
+                  placeholder="请选择合同类型" 
+                  class="form-input" 
+                  @change="handleFormContractTypeChange"
+                >
+                  <el-option v-for="item in contractTypeOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
+                </el-select>
+              </el-form-item>
+
+              <!-- 采购形式 - 在编辑模式下，如果有值就显示 -->
+              <el-form-item label="采购形式" prop="purchaseForm" class="form-section" v-if="purchaseFormOptions.length > 0 || (dialogTitle === '编辑配置' && form.purchaseForm)">
+                <el-select 
+                  v-model="form.purchaseForm" 
+                  placeholder="请选择采购形式" 
+                  class="form-input" 
+                  @change="handleFormPurchaseFormChange"
+                >
+                  <el-option v-for="item in purchaseFormOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
+                </el-select>
               </el-form-item>
 
+              <!-- 采购方式 -->
+              <div class="form-section">
+                <div class="section-title">采购方式</div>
+                <div class="checkbox-group">
+                  <el-checkbox v-model="form.purchaseWay">采购方式</el-checkbox>
+                </div>
+              </div>
+
               <!-- 表单内容 -->
               <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>
+                  <el-checkbox v-model="form.purchaseWay">采购方式配置</el-checkbox>
                 </div>
 
                 <div class="checkbox-group">
@@ -195,11 +244,12 @@
               <!-- 支付表格 -->
               <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-option 
+                    v-for="item in paymentFormOptions" 
+                    :key="item.id" 
+                    :label="item.label" 
+                    :value="item.id">
+                  </el-option>
                 </el-select>
               </el-form-item>
             </el-form>
@@ -217,63 +267,40 @@
 </template>
 
 <script>
+import { getContractCategoryTemplateBaseConfig, saveContractCategoryTemplate, getContractCategoryTemplate, deleteContractCategoryTemplate, getContractFormList } from '@/api/businessConfig/businessConfig'
+
 export default {
   name: 'ContractConfig',
   data() {
     return {
-      purchaseFormAll: false,
-      purchaseMethodAll: false,
+      categoryOptions: [], // 合同分类选项
+      affairTypeOptions: [], // 事务类选项
+      contractTypeOptions: [], // 合同类型选项
+      purchaseFormOptions: [], // 采购形式选项
+      purchaseMethodOptions: [], // 采购方式选项
+      purchaseMethodsMap: {}, // 采购方式映射
+      paymentFormOptions: [], // 支付表格选项
       searchForm: {
         category: '',
-        contractType: ''
+        affairType: '',
+        contractType: '',
+        purchaseForm: '',
+        purchaseMethod: ''
       },
-      tableData: [
-        {
-          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'
-        },
-        {
-          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,
+      tableData: [],
+      total: 0,
       currentPage: 1,
       dialogVisible: false,
       dialogTitle: '新增配置',
       form: {
         category: '',
+        affairType: '',
         contractType: '',
+        purchaseForm: '',
+        purchaseMethod: false,
+        purchaseWay: false,
         projectName: false,
         projectType: false,
-        purchaseForm: [],
-        purchaseMethod: [],
         budgetPrice: false,
         fundChannel: false,
         budgetPlan: false,
@@ -285,27 +312,318 @@ export default {
       },
       rules: {
         category: [
-          { required: true, message: '请选择分类', trigger: 'change' }
+          { required: true, message: '请选择合同分类', trigger: 'change' }
+        ],
+        affairType: [
+          { required: true, message: '请选择事务类', trigger: 'change' }
         ],
         contractType: [
-          { required: true, message: '请输入合同类型', trigger: 'blur' }
+          { required: true, message: '请选择合同类型', trigger: 'change' }
+        ],
+        purchaseForm: [
+          { required: true, message: '请选择采购形式', trigger: 'change' }
+        ],
+        purchaseMethod: [
+          { required: true, message: '请选择采购方式', trigger: 'change' }
         ],
         paymentForm: [
           { required: true, message: '请选择支付表格', trigger: 'change' }
         ]
-      }
+      },
+      originalPaymentForm: ''
     }
   },
+  created() {
+    this.initData()
+  },
   methods: {
-    handleCreate() {
+    // 初始化数据
+    async initData() {
+      try {
+        // 获取列表数据
+        await this.getTableData()
+        // 获取配置数据
+        await this.getCategoryOptions()
+        // 不再这里获取支付表格选项
+      } catch (error) {
+        console.error('初始化数据失败:', error)
+        this.$message.error('初始化数据失败')
+      }
+    },
+    // 获取列表数据
+    async getTableData() {
+      try {
+        // 构建查询参数
+        const params = {
+          page: this.currentPage,
+          category: this.searchForm.category || '',
+          work_type: this.searchForm.affairType || '',
+          contract_type: this.searchForm.contractType || '',
+          purchase_form: this.searchForm.purchaseForm || ''
+        }
+        
+        // 调用获取列表接口
+        const res = await getContractCategoryTemplate(params)
+        if (res.errcode !== undefined) {
+          this.$message.error(res.errmsg || '获取列表数据失败')
+          return
+        }
+        
+        // 处理返回数据
+        if (res.data && Array.isArray(res.data)) {
+          // 格式化表格数据
+          this.tableData = res.data.map((item, index) => {
+            return {
+              index: index + 1,
+              id: item.id,
+              // 保存原始ID，用于编辑
+              category_id: item.category,
+              work_type_id: item.work_type,
+              contract_type_id: item.contract_type,
+              purchase_form_id: item.purchase_form,
+              // 使用详细信息中的name字段，如果为空显示'-'
+              category: item.category_detail?.name || '-',
+              affairType: item.work_type_detail?.name || '-',
+              contractType: item.contract_type_detail?.name || '-',
+              purchaseForm: item.purchase_form_detail?.name || '-',
+              purchaseWay: item.purchase_way || false,
+              purchaseMethod: item.purchase_method,
+              projectName: item.project_name || false,
+              projectType: item.project_type || false,
+              budgetPrice: item.budget_price || false,
+              fundChannel: item.fund_channel || false,
+              budgetPlan: item.budget_plan || false,
+              request: item.flow_req || false,
+              purchaseApproval: item.flow_purchase || false,
+              tenderReview: item.flow_invite || false,
+              contractSign: item.flow_join || false,
+              paymentForm: item.contract_template?.name || '-'
+            }
+          })
+        } else {
+          this.tableData = []
+        }
+        
+        this.total = res.total || 0
+      } catch (error) {
+        console.error('获取列表数据失败:', error)
+        this.$message.error('获取列表数据失败')
+      }
+    },
+    // 根据ID查找分类名称
+    findCategoryName(categoryId) {
+      const category = this.categoryOptions.find(item => item.id === categoryId)
+      return category ? category.name : ''
+    },
+    // 根据ID查找事务类名称
+    findAffairTypeName(categoryId, affairTypeId) {
+      const category = this.categoryOptions.find(item => item.id === categoryId)
+      if (category && category.children) {
+        const affairType = category.children.find(item => item.id === affairTypeId)
+        return affairType ? affairType.name : ''
+      }
+      return ''
+    },
+    // 根据ID查找合同类型名称
+    findContractTypeName(categoryId, affairTypeId, contractTypeId) {
+      const category = this.categoryOptions.find(item => item.id === categoryId)
+      if (category && category.children) {
+        const affairType = category.children.find(item => item.id === affairTypeId)
+        if (affairType && affairType.children) {
+          const contractType = affairType.children.find(item => item.id === contractTypeId)
+          return contractType ? contractType.name : ''
+        }
+      }
+      return ''
+    },
+    // 根据ID查找采购形式名称
+    findPurchaseFormName(categoryId, affairTypeId, contractTypeId, purchaseFormId) {
+      const category = this.categoryOptions.find(item => item.id === categoryId)
+      if (category && category.children) {
+        const affairType = category.children.find(item => item.id === affairTypeId)
+        if (affairType && affairType.children) {
+          const contractType = affairType.children.find(item => item.id === contractTypeId)
+          if (contractType && contractType.children) {
+            const purchaseForm = contractType.children.find(item => item.id === purchaseFormId)
+            return purchaseForm ? purchaseForm.name : ''
+          }
+        }
+      }
+      return ''
+    },
+    // 获取分类选项
+    async getCategoryOptions() {
+      try {
+        const res = await getContractCategoryTemplateBaseConfig()
+        if (res.errcode !== undefined) {
+          this.$message.error(res.errmsg || '获取分类配置失败')
+          return
+        }
+        // 保存采购方式映射
+        this.purchaseMethodsMap = res.purchase_methods || {}
+        // 设置分类选项 - 从第二级开始（合同类、报销类、其他支出类）
+        this.categoryOptions = res.map?.[0]?.children || []
+        // 初始化其他选项
+        this.updateOptions()
+      } catch (error) {
+        console.error('获取分类配置失败:', error)
+        this.$message.error('获取分类配置失败')
+      }
+    },
+    // 更新选项
+    updateOptions() {
+      // 清空其他选项
+      this.affairTypeOptions = []
+      this.contractTypeOptions = []
+      this.purchaseFormOptions = []
+      this.purchaseMethodOptions = []
+
+      // 根据选中的值更新选项
+      const currentCategory = this.dialogVisible ? this.form.category : this.searchForm.category
+      const currentAffairType = this.dialogVisible ? this.form.affairType : this.searchForm.affairType
+      const currentContractType = this.dialogVisible ? this.form.contractType : this.searchForm.contractType
+      const currentPurchaseForm = this.dialogVisible ? this.form.purchaseForm : this.searchForm.purchaseForm
+
+      // 合同分类 -> 事务类
+      if (currentCategory) {
+        const category = this.categoryOptions.find(item => item.id === currentCategory)
+        if (category && category.children) {
+          this.affairTypeOptions = category.children.map(item => ({
+            id: item.id,
+            name: item.name
+          }))
+        }
+      }
+
+      // 事务类 -> 合同类型
+      if (currentAffairType) {
+        const category = this.categoryOptions.find(item => item.id === currentCategory)
+        if (category && category.children) {
+          const selectedAffairType = category.children.find(item => item.id === currentAffairType)
+          if (selectedAffairType && selectedAffairType.children) {
+            this.contractTypeOptions = selectedAffairType.children.map(item => ({
+              id: item.id,
+              name: item.name
+            }))
+          }
+        }
+      }
+
+      // 合同类型 -> 采购形式
+      if (currentContractType) {
+        const category = this.categoryOptions.find(item => item.id === currentCategory)
+        if (category && category.children) {
+          const selectedAffairType = category.children.find(item => item.id === currentAffairType)
+          if (selectedAffairType && selectedAffairType.children) {
+            const selectedContractType = selectedAffairType.children.find(item => item.id === currentContractType)
+            if (selectedContractType && selectedContractType.children) {
+              this.purchaseFormOptions = selectedContractType.children.map(item => ({
+                id: item.id,
+                name: item.name
+              }))
+            }
+          }
+        }
+      }
+
+      // 采购形式 -> 采购方式
+      if (currentPurchaseForm) {
+        const category = this.categoryOptions.find(item => item.id === currentCategory)
+        if (category && category.children) {
+          const selectedAffairType = category.children.find(item => item.id === currentAffairType)
+          if (selectedAffairType && selectedAffairType.children) {
+            const selectedContractType = selectedAffairType.children.find(item => item.id === currentContractType)
+            if (selectedContractType && selectedContractType.children) {
+              const selectedPurchaseForm = selectedContractType.children.find(item => item.id === currentPurchaseForm)
+              if (selectedPurchaseForm && selectedPurchaseForm.children) {
+                this.purchaseMethodOptions = selectedPurchaseForm.children.map(item => ({
+                  id: item.id,
+                  name: item.name
+                }))
+              }
+            }
+          }
+        }
+      }
+    },
+    // 获取采购方式名称
+    getPurchaseMethodName(id) {
+      return this.purchaseMethodsMap[id] || ''
+    },
+    // 监听选择变化
+    handleCategoryChange() {
+      this.searchForm.affairType = ''
+      this.searchForm.contractType = ''
+      this.searchForm.purchaseForm = ''
+      this.searchForm.purchaseMethod = ''
+      this.updateOptions()
+    },
+    handleAffairTypeChange() {
+      this.searchForm.contractType = ''
+      this.searchForm.purchaseForm = ''
+      this.searchForm.purchaseMethod = ''
+      this.updateOptions()
+    },
+    handleContractTypeChange() {
+      this.searchForm.purchaseForm = ''
+      this.searchForm.purchaseMethod = ''
+      this.updateOptions()
+    },
+    handlePurchaseFormChange() {
+      this.form.purchaseMethod = ''
+      this.updateOptions()
+    },
+    // 表单选项变化处理
+    handleFormCategoryChange() {
+      this.form.affairType = ''
+      this.form.contractType = ''
+      this.form.purchaseForm = ''
+      this.form.purchaseMethod = ''
+      this.updateOptions()
+    },
+    handleFormAffairTypeChange() {
+      this.form.contractType = ''
+      this.form.purchaseForm = ''
+      this.form.purchaseMethod = ''
+      this.updateOptions()
+    },
+    handleFormContractTypeChange() {
+      this.form.purchaseForm = ''
+      this.form.purchaseMethod = ''
+      this.updateOptions()
+    },
+    handleFormPurchaseFormChange() {
+      this.form.purchaseMethod = ''
+      this.updateOptions()
+    },
+    async handleCreate() {
       this.dialogTitle = '新增配置'
+      
+      // 清空选项
+      this.affairTypeOptions = []
+      this.contractTypeOptions = []
+      this.purchaseFormOptions = []
+      this.purchaseMethodOptions = []
+      
+      // 获取支付表格选项
+      try {
+        await this.getPaymentFormOptions()
+      } catch (error) {
+        console.error('获取支付表格选项失败:', error)
+        this.$message.error('获取支付表格选项失败')
+        return
+      }
+      
+      // 重置表单数据
       this.form = {
         category: '',
+        affairType: '',
         contractType: '',
+        purchaseForm: '',
+        purchaseMethod: false,
+        purchaseWay: false,
         projectName: false,
         projectType: false,
-        purchaseForm: [],
-        purchaseMethod: [],
         budgetPrice: false,
         fundChannel: false,
         budgetPlan: false,
@@ -315,122 +633,319 @@ export default {
         contractSign: false,
         paymentForm: ''
       }
+      
+      // 使用搜索区域的解析逻辑
+      this.updateOptions()
+      
       this.dialogVisible = true
     },
     handleEdit(row) {
       this.dialogTitle = '编辑配置'
-      this.form = { ...row }
-      this.dialogVisible = true
+      
+      // 清空选项
+      this.affairTypeOptions = []
+      this.contractTypeOptions = []
+      this.purchaseFormOptions = []
+      
+      // 获取支付表格选项，然后再设置表单数据并打开抽屉
+      this.getPaymentFormOptions()
+        .then(() => {
+          // 设置表单数据
+          this.form = {
+            id: row.id, // 记录ID，用于更新
+            category: row.category_id, // 使用原始ID
+            affairType: row.work_type_id, // 使用原始ID
+            contractType: row.contract_type_id, // 使用原始ID
+            purchaseForm: row.purchase_form_id, // 使用原始ID
+            purchaseWay: row.purchaseWay === true || row.purchaseWay === 1,
+            purchaseMethod: row.purchaseMethod === true || row.purchaseMethod === 1,
+            projectName: row.projectName === true || row.projectName === 1,
+            projectType: row.projectType === true || row.projectType === 1,
+            budgetPrice: row.budgetPrice === true || row.budgetPrice === 1,
+            fundChannel: row.fundChannel === true || row.fundChannel === 1,
+            budgetPlan: row.budgetPlan === true || row.budgetPlan === 1,
+            request: row.request === true || row.request === 1,
+            purchaseApproval: row.purchaseApproval === true || row.purchaseApproval === 1,
+            tenderReview: row.tenderReview === true || row.tenderReview === 1,
+            contractSign: row.contractSign === true || row.contractSign === 1,
+            paymentForm: row.paymentForm || ''
+          }
+          
+          // 保存原始支付表格值
+          this.originalPaymentForm = row.paymentForm
+          
+          // 加载下拉框选项
+          this.loadEditOptions(row)
+          
+          // 打开抽屉
+          this.dialogVisible = true
+        })
+        .catch(error => {
+          console.error('加载支付表格选项失败:', error)
+          this.$message.error('加载支付表格选项失败')
+        })
+    },
+    
+    // 加载编辑时的下拉框选项
+    async loadEditOptions(row) {
+      try {
+        // 首先加载所有分类选项（如果尚未加载）
+        if (this.categoryOptions.length === 0) {
+          await this.getCategoryOptions()
+        }
+        
+        // 加载事务类选项
+        if (row.category_id) {
+          const category = this.categoryOptions.find(item => item.id === row.category_id)
+          if (category && category.children) {
+            this.affairTypeOptions = category.children.map(item => ({
+              id: item.id,
+              name: item.name
+            }))
+          }
+        }
+        
+        // 加载合同类型选项
+        if (row.work_type_id) {
+          const category = this.categoryOptions.find(item => item.id === row.category_id)
+          if (category && category.children) {
+            const affairType = category.children.find(item => item.id === row.work_type_id)
+            if (affairType && affairType.children) {
+              this.contractTypeOptions = affairType.children.map(item => ({
+                id: item.id,
+                name: item.name
+              }))
+            }
+          }
+        }
+        
+        // 加载采购形式选项
+        if (row.contract_type_id) {
+          const category = this.categoryOptions.find(item => item.id === row.category_id)
+          if (category && category.children) {
+            const affairType = category.children.find(item => item.id === row.work_type_id)
+            if (affairType && affairType.children) {
+              const contractType = affairType.children.find(item => item.id === row.contract_type_id)
+              if (contractType && contractType.children) {
+                this.purchaseFormOptions = contractType.children.map(item => ({
+                  id: item.id,
+                  name: item.name
+                }))
+              }
+            }
+          }
+        }
+        
+        console.log('下拉框选项加载完成:', {
+          affairTypeOptions: this.affairTypeOptions,
+          contractTypeOptions: this.contractTypeOptions,
+          purchaseFormOptions: this.purchaseFormOptions
+        })
+      } catch (error) {
+        console.error('加载下拉框选项失败:', error)
+      }
     },
     handleDelete(row) {
       this.$confirm('确定要删除该配置吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
-      }).then(() => {
-        const index = this.tableData.findIndex(item => item.index === row.index)
-        if (index !== -1) {
-          this.tableData.splice(index, 1)
+      }).then(async () => {
+        try {
+          // 调用删除接口
+          const res = await deleteContractCategoryTemplate(row.id)
+          if (res.errcode !== undefined) {
+            this.$message.error(res.errmsg || '删除失败')
+            return
+          }
+          
           this.$message.success('删除成功')
+          // 刷新列表数据
+          await this.getTableData()
+        } catch (error) {
+          console.error('删除失败:', error)
+          this.$message.error('删除失败')
         }
       }).catch(() => {
         this.$message.info('已取消删除')
       })
     },
-    handleSubmit() {
-      this.$refs.formRef.validate((valid) => {
+    async handleSubmit() {
+      this.$refs.formRef.validate(async (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)
+          try {
+            // 准备提交的数据，按照API期望的参数格式
+            const submitData = {
+              category: this.form.category,
+              work_type: this.form.affairType,
+              contract_type: this.form.contractType,
+              purchase_form: this.form.purchaseForm,
+              purchase_way: this.form.purchaseWay,
+              purchase_method: this.form.purchaseMethod,
+              project_name: this.form.projectName,
+              project_type: this.form.projectType,
+              budget_price: this.form.budgetPrice,
+              fund_channel: this.form.fundChannel,
+              budget_plan: this.form.budgetPlan,
+              flow_req: this.form.request,
+              flow_purchase: this.form.purchaseApproval,
+              flow_invite: this.form.tenderReview,
+              flow_join: this.form.contractSign
+            }
+            
+            // 如果是编辑模式
+            if (this.form.id) {
+              // 只添加ID
+              submitData.id = this.form.id
+              
+              // 如果支付表格有值且与原始值不同，才添加到提交数据中
+              if (this.form.paymentForm && this.form.paymentForm !== this.originalPaymentForm) {
+                submitData.contract_template_id = this.form.paymentForm
+              }
+            } else {
+              // 新增模式下，如果有支付表格值就添加
+              if (this.form.paymentForm) {
+                submitData.contract_template_id = this.form.paymentForm
+              }
+            }
+
+            // 调用保存接口
+            const res = await saveContractCategoryTemplate(submitData)
+            if (res.errcode !== undefined) {
+              this.$message.error(res.errmsg || '保存失败')
+              return
             }
+
+            this.$message.success('保存成功')
+            this.dialogVisible = false
+            // 刷新列表数据
+            await this.getTableData()
+          } catch (error) {
+            console.error('保存失败:', error)
+            this.$message.error('保存失败')
           }
-          this.dialogVisible = false
-          this.$message.success('保存成功')
         }
       })
     },
     handleSearch() {
-      // 实现搜索逻辑
-      console.log('Search with:', this.searchForm)
+      this.currentPage = 1
+      this.getTableData()
     },
     resetSearch() {
       this.searchForm = {
         category: '',
-        contractType: ''
+        affairType: '',
+        contractType: '',
+        purchaseForm: '',
+        purchaseMethod: ''
       }
     },
     handlePageChange(page) {
       this.currentPage = page
-      // 实现分页加载逻辑
-    },
-    handlePurchaseFormAllChange(val) {
-      const allOptions = ['政府采购', '小型项目']
-      this.form.purchaseForm = val ? allOptions : []
-    },
-    handlePurchaseFormChange(val) {
-      const allOptions = ['政府采购', '小型项目']
-      this.purchaseFormAll = val.length === allOptions.length
+      // 分页加载数据
+      this.getTableData()
     },
-    handlePurchaseMethodAllChange(val) {
-      const allOptions = ['公开招标', '竞争性磋商', '竞争性谈判', '单一来源采购', '直接发包', '网上商城']
-      this.form.purchaseMethod = val ? allOptions : []
+    // 获取支付表格选项
+    async getPaymentFormOptions() {
+      try {
+        const res = await getContractFormList({})
+        if (res.errcode !== undefined) {
+          this.$message.error(res.errmsg || '获取支付表格选项失败')
+          return
+        }
+        
+        // 处理返回数据
+        if (res.data && Array.isArray(res.data)) {
+          this.paymentFormOptions = res.data.map(item => ({
+            id: item.id,
+            label: item.name || item.title || `附件${item.id}`
+          }))
+          this.originalPaymentForm = res.data[0].id // 保存原始支付表格ID
+        } else {
+          this.paymentFormOptions = []
+        }
+      } catch (error) {
+        console.error('获取支付表格选项失败:', error)
+        this.$message.error('获取支付表格选项失败')
+      }
     },
-    handlePurchaseMethodChange(val) {
-      const allOptions = ['公开招标', '竞争性磋商', '竞争性谈判', '单一来源采购', '直接发包', '网上商城']
-      this.purchaseMethodAll = val.length === allOptions.length
-    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .search-wrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
   margin-bottom: 16px;
   margin-top: 16px;
+  background: #fff;
+  padding: 16px;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.search-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .selects {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
 
   & > div {
-    margin-bottom: 6px;
     display: flex;
     align-items: center;
-    margin-right: 10px;
+    white-space: nowrap;
+    flex-shrink: 0;
+    margin-bottom: 8px;
 
     span {
-      white-space: nowrap;
       color: #606266;
+      font-size: 14px;
+      flex-shrink: 0;
+      padding: 0 4px;
+    }
+
+    :deep(.el-select) {
+      width: 140px;
     }
   }
 
   :deep(.el-input__inner) {
-    height: 32px;
-    line-height: 32px;
+    height: 28px;
+    line-height: 28px;
   }
+  }
+
+.search-buttons {
+  display: flex;
+  gap: 8px;
+  margin-left: 8px;
 
   :deep(.el-button) {
-    height: 32px;
-    padding: 0 15px;
+    height: 28px;
+    padding: 0 12px;
   }
 }
 
-.operation-wrapper {
+.add-button {
+  flex-shrink: 0;
   margin-left: 16px;
-  white-space: nowrap;
+  margin-bottom: 8px;
+  
+  :deep(.el-button) {
+    height: 28px;
+    padding: 0 12px;
+  }
 }
 
 .table-container {
@@ -449,6 +964,13 @@ export default {
 .check-mark {
   color: #67C23A;
   font-weight: bold;
+  font-size: 16px;
+}
+
+.close-mark {
+  color: #F56C6C;
+  font-weight: bold;
+  font-size: 16px;
 }
 
 :deep(.el-table) {