diff --git a/src/components/ProjectSelect/index.vue b/src/components/ProjectSelect/index.vue
index 8400465..3508c10 100644
--- a/src/components/ProjectSelect/index.vue
+++ b/src/components/ProjectSelect/index.vue
@@ -94,12 +94,14 @@ interface PropType {
   modelValue?: ProjectInfoVO[] | ProjectInfoVO | undefined;
   multiple?: boolean;
   data?: string | number | (string | number)[] | undefined;
+  defaultQueryParams?: Record<string, any>;
 }
 
 const prop = withDefaults(defineProps<PropType>(), {
   multiple: true,
   modelValue: undefined,
-  data: undefined
+  data: undefined,
+  defaultQueryParams: undefined
 });
 const emit = defineEmits(['update:modelValue', 'confirmCallBack']);
 
@@ -255,6 +257,9 @@ watch(
   () => projectSelectDialog.visible.value,
   async (newValue: boolean) => {
     if (newValue) {
+      if (prop.defaultQueryParams && Object.keys(prop.defaultQueryParams).length > 0) {
+        Object.assign(queryParams.value, prop.defaultQueryParams);
+      }
       await getList(); // 初始化列表数据
     } else {
       tableRef.value.clearCheckboxReserve();
diff --git a/src/enums/OAEnum.ts b/src/enums/OAEnum.ts
index 1f5edec..abca634 100644
--- a/src/enums/OAEnum.ts
+++ b/src/enums/OAEnum.ts
@@ -166,5 +166,10 @@ export enum FlowCodeEnum {
   /**
    * 礼品申请标识KEY
    */
-  GIFT_APPLY_CODE = 'CRMGIFT'
+  GIFT_APPLY_CODE = 'CRMGIFT',
+
+  /**
+   * 合同变更标识KEY
+   */
+  CONTRACT_CHANGE_CODE = 'HTBG'
 }
diff --git a/src/views/oa/erp/contractChange/edit.vue b/src/views/oa/erp/contractChange/edit.vue
index 6cf3ddd..905124b 100644
--- a/src/views/oa/erp/contractChange/edit.vue
+++ b/src/views/oa/erp/contractChange/edit.vue
@@ -1,5 +1,19 @@
 <template>
   <div class="p-2">
+    <!-- 审批按钮组件（参考 contractInfo/edit.vue） -->
+    <el-card shadow="never" style="margin-top: 0">
+      <approvalButton
+        @submitForm="submitForm"
+        @approvalVerifyOpen="approvalVerifyOpen"
+        @handleApprovalRecord="handleApprovalRecord"
+        :buttonLoading="buttonLoading"
+        :id="form.contractChangeId"
+        :status="form.flowStatus"
+        :pageType="routeParams.type"
+        :mode="false"
+      />
+    </el-card>
+
     <el-card shadow="never">
       <template #header>
         <span>{{ isEdit ? '编辑合同变更' : '合同变更申请' }}</span>
@@ -7,97 +21,662 @@
       </template>
       <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
         <el-form-item label="变更类型" prop="changeType">
-          <el-radio-group v-model="form.changeType" :disabled="isEdit">
+          <el-radio-group v-model="form.changeType" :disabled="isFormDisabled">
             <el-radio v-for="dict in contract_change_type" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="选择合同" prop="contractId">
-          <el-select
-            v-model="form.contractId"
-            placeholder="请选择已激活的合同（仅可变更状态=可用且已激活的合同）"
-            filterable
-            style="width: 100%"
-            :disabled="isEdit"
-            @change="onContractChange"
+          <el-input
+            v-model="selectedContractName"
+            placeholder="请选择已激活的合同（点击右侧图标选择）"
+            readonly
+            :disabled="isFormDisabled"
           >
-            <el-option
-              v-for="item in activatedContractList"
-              :key="item.contractId"
-              :label="`${item.contractCode} - ${item.contractName}`"
-              :value="item.contractId"
-            />
-          </el-select>
+            <template #suffix>
+              <el-icon style="cursor: pointer" @click="openContractSelect"><Search /></el-icon>
+            </template>
+          </el-input>
         </el-form-item>
         <el-form-item label="变更原因" prop="changeReason">
-          <el-input v-model="form.changeReason" type="textarea" :rows="3" placeholder="请输入变更原因（解除合同时即解除原因）" />
+          <el-input
+            v-model="form.changeReason"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入变更原因（解除合同时即解除原因）"
+            :disabled="isFormDisabled"
+          />
         </el-form-item>
-        <template v-if="form.changeType === '1'">
-          <el-divider content-position="left">变更后合同信息（可编辑）</el-divider>
-          <el-row :gutter="20" v-if="form.changeInfo">
-            <el-col :span="12">
-              <el-form-item label="合同编号">
-                <el-input v-model="form.changeInfo.contractCode" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="合同名称">
-                <el-input v-model="form.changeInfo.contractName" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="合同总价">
-                <el-input v-model="form.changeInfo.totalPrice" type="number" />
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-divider content-position="left">变更后物料</el-divider>
-          <el-table v-if="form.changeMaterialList?.length" :data="form.changeMaterialList" border max-height="260">
-            <el-table-column type="index" label="序号" width="55" />
-            <el-table-column prop="productName" label="产品名称" min-width="120" />
-            <el-table-column prop="specificationDescription" label="规格" min-width="100" />
-            <el-table-column prop="amount" label="数量" width="80" />
-            <el-table-column prop="beforePrice" label="未税单价" width="100" />
-            <el-table-column prop="subtotal" label="小计" width="100" />
-          </el-table>
-          <el-divider content-position="left">变更后付款方式</el-divider>
-          <el-table v-if="form.changePaymentMethodList?.length" :data="form.changePaymentMethodList" border max-height="200">
-            <el-table-column type="index" label="序号" width="55" />
-            <el-table-column prop="paymentDescription" label="付款条款" min-width="200" />
-            <el-table-column prop="paymentAmount" label="支付金额" width="120" />
-            <el-table-column prop="paymentPercentage" label="支付比例(%)" width="100" />
-          </el-table>
+        <!-- 内容变更时：下方按合同编辑页样式展示变更后合同信息、付款方式、物料，可编辑可删 -->
+        <template v-if="form.changeType === '1' && form.changeInfo">
+          <!-- 变更后合同信息（与合同编辑页同结构） -->
+          <el-card shadow="never" style="margin-top: 16px">
+            <template #header>
+              <div style="text-align: left; font-weight: bold; font-size: 18px">变更后合同信息</div>
+            </template>
+            <el-form :model="form.changeInfo" label-width="120px">
+              <el-row :gutter="20">
+                <el-col :span="12">
+                  <el-form-item label="有无合同">
+                    <el-radio-group v-model="form.changeInfo.contractFlag" :disabled="isFormDisabled">
+                      <el-radio v-for="dict in contract_flag" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="合同编号">
+                    <el-input v-model="form.changeInfo.contractCode" placeholder="请输入合同编号" :disabled="isFormDisabled" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="合同名称">
+                    <el-input v-model="form.changeInfo.contractName" placeholder="请输入合同名称" :disabled="isFormDisabled" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="合同大类">
+                    <el-select v-model="form.changeInfo.contractCategory" placeholder="请选择合同大类" :disabled="isFormDisabled" style="width: 100%">
+                      <el-option v-for="dict in contract_category" :key="dict.value" :label="dict.label" :value="dict.value" />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="业务方向">
+                    <el-select v-model="form.changeInfo.businessDirection" placeholder="请选择业务方向" :disabled="isFormDisabled" style="width: 100%">
+                      <el-option v-for="dict in business_direction" :key="dict.value" :label="dict.label" :value="dict.value" />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="合同负责人">
+                    <el-select v-model="form.changeInfo.contractManagerId" placeholder="请选择签订人" :disabled="isFormDisabled" filterable style="width: 100%">
+                      <el-option v-for="item in userInfoList" :key="item.userId" :label="item.nickName" :value="item.userId" />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="合同签订日期">
+                    <el-date-picker v-model="form.changeInfo.contractDate" type="date" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择合同时间" :disabled="isFormDisabled" style="width: 100%" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="付款账户">
+                    <el-select v-model="form.changeInfo.paymentAccountId" placeholder="请选择付款账户" :disabled="isFormDisabled" clearable style="width: 100%">
+                      <el-option v-for="item in paymentAccountList" :key="item.paymentAccountId" :label="`${item.accountType || ''} - ${item.accountNumber || ''}`" :value="item.paymentAccountId" />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="甲方公司">
+                    <el-select v-model="form.changeInfo.oneCustomerId" placeholder="请选择甲方公司" :disabled="isFormDisabled" filterable style="width: 100%">
+                      <el-option v-for="item in customerInfoList" :key="item.customerId" :label="item.customerName" :value="item.customerId" />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="乙方公司">
+                    <el-select v-model="form.changeInfo.twoCustomerId" placeholder="请选择乙方公司" :disabled="isFormDisabled" filterable style="width: 100%">
+                      <el-option v-for="item in customerInfoList" :key="item.customerId" :label="item.customerName" :value="item.customerId" />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="甲方授权代表">
+                    <el-input v-model="form.changeInfo.oneRepresent" placeholder="甲方法人或授权代表" :disabled="isFormDisabled" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="乙方授权代表">
+                    <el-input v-model="form.changeInfo.twoRepresent" placeholder="乙方法人或授权代表" :disabled="isFormDisabled" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="甲方签字日期">
+                    <el-date-picker v-model="form.changeInfo.oneDate" type="date" value-format="YYYY-MM-DD HH:mm:ss" placeholder="甲方签字日期" :disabled="isFormDisabled" style="width: 100%" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="乙方签字日期">
+                    <el-date-picker v-model="form.changeInfo.twoDate" type="date" value-format="YYYY-MM-DD HH:mm:ss" placeholder="乙方签字日期" :disabled="isFormDisabled" style="width: 100%" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="合同模板标识">
+                    <el-radio-group v-model="form.changeInfo.contractTemplateFlag" :disabled="isFormDisabled">
+                      <el-radio v-for="dict in contract_template_flag" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12" v-show="form.changeInfo.contractTemplateFlag !== '1'">
+                  <el-form-item label="合同模板">
+                    <el-select v-model="form.changeInfo.templateId" placeholder="请选择合同模板" :disabled="isFormDisabled" filterable style="width: 100%">
+                      <el-option v-for="item in printTemplateList" :key="item.templateId" :label="item.templateName + '-' + (item.version || '')" :value="item.templateId" />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="合同总价">
+                    <el-input v-model="form.changeInfo.totalPrice" placeholder="根据物料自动计算" disabled>
+                      <template #append>元</template>
+                    </el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="质保期描述">
+                    <el-input v-model="form.changeInfo.warrantyPeriodDescription" placeholder="如：验收合格后12个月" :disabled="isFormDisabled" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="交货地点">
+                    <el-input v-model="form.changeInfo.deliveryLocation" placeholder="如：甲方指定仓库" :disabled="isFormDisabled" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="运输方式">
+                    <el-input v-model="form.changeInfo.shipMethod" placeholder="如：汽运、空运" :disabled="isFormDisabled" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="交付启动期限(天)">
+                    <el-input-number v-model="form.changeInfo.deliveryStart" placeholder="天" :disabled="isFormDisabled" :min="0" controls-position="right" style="width: 100%" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="签订地点">
+                    <el-input v-model="form.changeInfo.signingPlace" placeholder="签订地点" :disabled="isFormDisabled" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="付款方式">
+                    <el-select v-model="form.changeInfo.paymentMethod" placeholder="请选择付款方式" :disabled="isFormDisabled" clearable style="width: 100%">
+                      <el-option v-for="item in paymentMethodOptions" :key="item" :label="item" :value="item" />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="备注">
+                    <el-input v-model="form.changeInfo.remark" type="textarea" placeholder="备注" :disabled="isFormDisabled" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="附件">
+                    <FileUpload
+                      v-model="changeInfoOssId"
+                      :limit="5"
+                      :fileSize="20"
+                      :fileType="['doc', 'docx', 'pdf', 'xls', 'xlsx']"
+                      :disabled="isFormDisabled"
+                      :isShowTip="true"
+                    />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </el-card>
+
+          <!-- 变更后合同付款方式 -->
+          <el-card shadow="never" style="margin-top: 0">
+            <template #header>
+              <div style="text-align: left; font-weight: bold; font-size: 18px">合同付款方式</div>
+            </template>
+            <div style="margin-bottom: 16px">
+              <el-button type="primary" icon="Plus" v-if="!isFormDisabled" @click="handleAddPaymentMethod">新增付款方式</el-button>
+            </div>
+            <el-table :data="changePaymentMethodList" border>
+              <el-table-column label="序号" align="center" prop="sortOrder" width="80" />
+              <el-table-column label="付款条款" align="center" prop="paymentDescription" min-width="200" show-overflow-tooltip />
+              <el-table-column label="支付金额" align="center" prop="paymentAmount" width="100" />
+              <el-table-column label="支付比例(%)" align="center" prop="paymentPercentage" width="100" />
+              <el-table-column label="操作" align="center" fixed="right" width="150" v-if="!isFormDisabled">
+                <template #default="scope">
+                  <el-button link type="primary" icon="Edit" @click="handleEditPaymentMethod(scope.row, scope.$index)">编辑</el-button>
+                  <el-button link type="danger" icon="Delete" @click="handleDeletePaymentMethod(scope.$index)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-card>
+
+          <!-- 变更后合同物料 -->
+          <el-card shadow="never" style="margin-top: 0">
+            <template #header>
+              <div style="text-align: left; font-weight: bold; font-size: 18px">合同物料</div>
+            </template>
+            <div style="margin-bottom: 16px">
+              <el-button type="primary" icon="Plus" v-if="!isFormDisabled" @click="handleAddMaterial">新增合同物料</el-button>
+            </div>
+            <el-table :data="changeMaterialList" border>
+              <el-table-column label="物料编号" align="center" prop="materialCode" width="120" />
+              <el-table-column label="物料名称" align="center" prop="materialName" width="120" />
+              <el-table-column label="销售物料名称" align="center" prop="saleMaterialName" width="120" />
+              <el-table-column label="产品名称(合同显示)" align="center" prop="productName" min-width="140" />
+              <el-table-column label="规格描述" align="center" prop="specificationDescription" min-width="100" />
+              <el-table-column label="数量" align="center" prop="amount" width="80">
+                <template #default="scope">{{ scope.row.amount != null ? Number(scope.row.amount).toFixed(2) : '0.00' }}</template>
+              </el-table-column>
+              <el-table-column label="单位" align="center" prop="unitName" width="60" />
+              <el-table-column label="未税单价" align="center" prop="beforePrice" width="100">
+                <template #default="scope">{{ scope.row.beforePrice != null ? Number(scope.row.beforePrice).toFixed(2) : '0.00' }}</template>
+              </el-table-column>
+              <el-table-column label="税率(%)" align="center" prop="taxRate" width="80">
+                <template #default="scope">{{ scope.row.taxRate != null ? Number(scope.row.taxRate).toFixed(2) : '0.00' }}</template>
+              </el-table-column>
+              <el-table-column label="含税单价" align="center" prop="includingPrice" width="100">
+                <template #default="scope">{{ scope.row.includingPrice != null ? Number(scope.row.includingPrice).toFixed(2) : '0.00' }}</template>
+              </el-table-column>
+              <el-table-column label="小计" align="center" prop="subtotal" width="90">
+                <template #default="scope">{{ scope.row.subtotal != null ? Number(scope.row.subtotal).toFixed(2) : '0.00' }}</template>
+              </el-table-column>
+              <el-table-column label="备注" align="center" prop="remark" min-width="80" />
+              <el-table-column label="操作" align="center" fixed="right" width="150" v-if="!isFormDisabled">
+                <template #default="scope">
+                  <el-button link type="primary" icon="Edit" @click="handleEditMaterial(scope.row)">编辑</el-button>
+                  <el-button link type="danger" icon="Delete" @click="handleDeleteMaterial(scope.row)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            <el-form-item label="合同物料备注" style="margin-bottom: 16px; margin-top: 16px">
+              <el-input v-model="form.changeInfo.materialRemark" type="textarea" :rows="3" placeholder="合同物料备注" :disabled="isFormDisabled" />
+            </el-form-item>
+          </el-card>
         </template>
         <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="选填" />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" :loading="buttonLoading" @click="submitSave">暂存</el-button>
-          <el-button @click="goBack">取消</el-button>
+          <el-input v-model="form.remark" type="textarea" placeholder="选填" :disabled="isFormDisabled" />
         </el-form-item>
       </el-form>
     </el-card>
+
+    <!-- 合同物料编辑对话框 -->
+    <el-dialog v-model="materialDialog.visible" :title="materialDialog.title" width="800px" append-to-body>
+      <el-form ref="materialFormRef" :model="materialForm" :rules="materialRules" label-width="120px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="标准物料标识" prop="materialFlag">
+              <el-radio-group v-model="materialForm.materialFlag">
+                <el-radio v-for="dict in material_flag" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="materialForm.materialFlag === '1'">
+            <el-form-item label="物料名称" prop="materialName">
+              <el-input v-model="materialForm.materialName" placeholder="点击右侧图标检索">
+                <template #suffix>
+                  <el-icon style="cursor: pointer" @click="openSaleMaterialSelect"><Search /></el-icon>
+                </template>
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="materialForm.materialFlag === '1'">
+            <el-form-item label="物料编号"><el-input v-model="materialForm.materialCode" disabled /></el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="materialForm.materialFlag === '1'">
+            <el-form-item label="客户名称"><el-input v-model="materialForm.customerName" disabled /></el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="产品名称" prop="productName">
+              <el-input v-model="materialForm.productName" placeholder="产品名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="规格描述" prop="specificationDescription">
+              <el-input v-model="materialForm.specificationDescription" placeholder="规格描述" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="数量" prop="amount">
+              <el-input-number v-model="materialForm.amount" placeholder="数量" style="width: 100%" :precision="2" @change="calculateSubtotal" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="物料单位" prop="unitId">
+              <el-select v-model="materialForm.unitId" placeholder="请选择单位" style="width: 100%">
+                <el-option v-for="item in unitInfoList" :key="item.unitId" :label="item.unitName" :value="item.unitId" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="税率(%)" prop="taxRate">
+              <el-select v-model="materialForm.taxRate" placeholder="税率" style="width: 100%" filterable allow-create @change="calculateBeforePrice">
+                <el-option label="0" :value="0" /><el-option label="6" :value="6" /><el-option label="9" :value="9" /><el-option label="13" :value="13" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="未税单价"><el-input-number v-model="materialForm.beforePrice" style="width: 100%" :precision="2" disabled :controls="false" /></el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="含税单价" prop="includingPrice">
+              <el-input-number v-model="materialForm.includingPrice" placeholder="含税单价" style="width: 100%" :precision="2" @change="calculateBeforePrice" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="小计"><el-input-number v-model="materialForm.subtotal" style="width: 100%" :precision="2" readonly disabled :controls="false" /></el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="备注" prop="remark"><el-input v-model="materialForm.remark" type="textarea" placeholder="备注" /></el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <el-button @click="cancelMaterial">取 消</el-button>
+        <el-button type="primary" @click="submitMaterialForm">确 定</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 合同付款方式编辑对话框 -->
+    <el-dialog v-model="paymentMethodDialog.visible" :title="paymentMethodDialog.title" width="500px" append-to-body>
+      <el-form ref="paymentMethodFormRef" :model="paymentMethodForm" :rules="paymentMethodRules" label-width="120px">
+        <el-form-item label="序号" prop="sortOrder">
+          <el-input-number v-model="paymentMethodForm.sortOrder" :min="1" readonly :controls="false" style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="付款节点" prop="paymentStageId">
+          <el-select v-model="paymentMethodForm.paymentStageId" placeholder="请选择付款节点" style="width: 100%" filterable @change="onPaymentStageChange">
+            <el-option v-for="item in paymentStageList" :key="item.paymentStageId" :label="item.paymentMethod" :value="item.paymentStageId" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="支付期限（天）" prop="paymentDeadline">
+          <el-input-number v-model="paymentMethodForm.paymentDeadline" :min="0" style="width: 100%" @change="refreshPaymentDescription" />
+        </el-form-item>
+        <el-form-item label="支付比例（%）" prop="paymentPercentage">
+          <el-input-number v-model="paymentMethodForm.paymentPercentage" :min="0" :max="100" style="width: 100%" @change="refreshPaymentDescription" />
+        </el-form-item>
+        <el-form-item label="发票比例（%）" prop="invoicePercentage">
+          <el-input-number v-model="paymentMethodForm.invoicePercentage" :min="0" :max="100" style="width: 100%" @change="refreshPaymentDescription" />
+        </el-form-item>
+        <el-form-item label="付款条款" prop="paymentDescription">
+          <el-input v-model="paymentMethodForm.paymentDescription" type="textarea" :rows="5" placeholder="选择付款节点后自动带出，可修改" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="cancelPaymentMethod">取 消</el-button>
+        <el-button type="primary" @click="submitPaymentMethodForm">确 定</el-button>
+      </template>
+    </el-dialog>
+
+    <SaleMaterialSelect ref="saleMaterialSelectRef" :multiple="false" @confirm-call-back="saleMaterialSelectCallBack" />
+
+    <!-- 选择合同弹框：列表 + 合同详情 -->
+    <el-dialog v-model="contractDialog.visible" title="选择合同" width="960px" append-to-body>
+      <el-form :model="contractQueryParams" :inline="true" label-width="90px">
+        <el-form-item label="合同编号">
+          <el-input
+            v-model="contractQueryParams.contractCode"
+            placeholder="请输入合同编号"
+            clearable
+            style="width: 160px"
+            @keyup.enter="getContractList"
+          />
+        </el-form-item>
+        <el-form-item label="合同名称">
+          <el-input
+            v-model="contractQueryParams.contractName"
+            placeholder="请输入合同名称"
+            clearable
+            style="width: 180px"
+            @keyup.enter="getContractList"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="Search" @click="getContractList">搜索</el-button>
+          <el-button icon="Refresh" @click="resetContractQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <el-row :gutter="16">
+        <el-col :span="14">
+          <el-table
+            v-loading="contractLoading"
+            :data="contractList"
+            border
+            max-height="360"
+            highlight-current-row
+            @current-change="handleContractRowChange"
+          >
+            <el-table-column type="index" label="序号" width="55" />
+            <el-table-column label="合同编号" align="center" prop="contractCode" min-width="120" />
+            <el-table-column label="合同名称" align="center" prop="contractName" min-width="160" show-overflow-tooltip />
+            <el-table-column label="合同总价" align="center" prop="totalPrice" width="100" />
+          </el-table>
+          <pagination
+            v-show="contractTotal > 0"
+            :total="contractTotal"
+            v-model:page="contractQueryParams.pageNum"
+            v-model:limit="contractQueryParams.pageSize"
+            @pagination="getContractList"
+          />
+        </el-col>
+        <el-col :span="10">
+          <div class="contract-detail-panel">
+            <div class="panel-title">合同详情</div>
+            <template v-if="contractDetailPreview">
+              <el-descriptions :column="1" border size="small">
+                <el-descriptions-item label="合同编号">{{ contractDetailPreview.contractCode }}</el-descriptions-item>
+                <el-descriptions-item label="合同名称">{{ contractDetailPreview.contractName }}</el-descriptions-item>
+                <el-descriptions-item label="合同总价">{{ contractDetailPreview.totalPrice }}</el-descriptions-item>
+                <el-descriptions-item label="客户">{{ (contractDetailPreview as any).oneCustomerName || (contractDetailPreview as any).twoCustomerName || '-' }}</el-descriptions-item>
+                <el-descriptions-item label="签订日期">{{ contractDetailPreview.contractDate || '-' }}</el-descriptions-item>
+              </el-descriptions>
+            </template>
+            <div v-else class="panel-placeholder">点击左侧列表行可查看合同详情</div>
+          </div>
+        </el-col>
+      </el-row>
+      <template #footer>
+        <el-button @click="contractDialog.visible = false">取 消</el-button>
+        <el-button type="primary" @click="submitContractSelect">确 定</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 审批记录 -->
+    <approvalRecord ref="approvalRecordRef" />
+    <submitVerify ref="submitVerifyRef" :task-variables="taskVariables" @submit-callback="submitCallback" />
   </div>
 </template>
 
 <script setup name="ContractChangeApply" lang="ts">
-import { getContractInfo } from '@/api/oa/erp/contractInfo';
-import { getErpContractInfoList } from '@/api/oa/erp/contractInfo';
+import { Search } from '@element-plus/icons-vue';
+import { listContractInfo, getContractInfo } from '@/api/oa/erp/contractInfo';
+import type { ContractInfoVO, ContractInfoQuery } from '@/api/oa/erp/contractInfo/types';
 import { saveContractChange, getContractChangeDetail } from '@/api/oa/erp/contractChange';
 import type { ContractChangeSaveForm } from '@/api/oa/erp/contractChange/types';
+import type { ContractMaterialForm } from '@/api/oa/erp/contractMaterial/types';
+import type { ContractPaymentMethodForm } from '@/api/oa/erp/contractPaymentMethod/types';
+import { getBaseUnitInfoList } from '@/api/oa/base/unitInfo';
+import { listPaymentStage } from '@/api/oa/base/paymentStage';
+import type { PaymentStageVO } from '@/api/oa/base/paymentStage/types';
+import { getCrmCustomerInfoList } from '@/api/oa/crm/customerInfo';
+import { getCrmPaymentAccountList } from '@/api/oa/crm/paymentAccount';
+import { getUserList } from '@/api/system/user';
+import { getBasePrintTemplateList } from '@/api/oa/base/printTemplate';
+import { startWorkFlow } from '@/api/workflow/task';
+import ApprovalButton from '@/components/Process/approvalButton.vue';
+import ApprovalRecord from '@/components/Process/approvalRecord.vue';
+import SubmitVerify from '@/components/Process/submitVerify.vue';
+import FileUpload from '@/components/FileUpload/index.vue';
+import SaleMaterialSelect from '@/components/SaleMaterialSelect/index.vue';
+import { FlowCodeEnum } from '@/enums/OAEnum';
 
 const route = useRoute();
 const router = useRouter();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { contract_change_type } = toRefs<any>(proxy?.useDict('contract_change_type'));
+const {
+  contract_change_type,
+  contract_category,
+  business_direction,
+  contract_flag,
+  contract_template_flag,
+  material_flag
+} = toRefs<any>(
+  proxy?.useDict('contract_change_type', 'contract_category', 'business_direction', 'contract_flag', 'contract_template_flag', 'material_flag')
+);
+
+const paymentMethodOptions = ['电汇', '银行承兑（6个月内）', '电汇/银行承兑（6个月内）', '商业承兑'];
 
 const formRef = ref<ElFormInstance>();
 const buttonLoading = ref(false);
-const activatedContractList = ref<any[]>([]);
+const routeParams = ref<Record<string, any>>({ ...(route.query as Record<string, any>) });
 
-const contractChangeId = computed(() => route.params.contractChangeId as string);
-const isEdit = computed(() => !!contractChangeId.value);
+// 审批相关
+const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
+const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
+const taskVariables = ref<Record<string, any>>({});
 
-const form = ref<ContractChangeSaveForm & { changeInfo?: any; changeMaterialList?: any[]; changePaymentMethodList?: any[] }>({
+// 下拉与选项
+const unitInfoList = ref<any[]>([]);
+const paymentStageList = ref<PaymentStageVO[]>([]);
+const customerInfoList = ref<any[]>([]);
+const userInfoList = ref<any[]>([]);
+const paymentAccountList = ref<any[]>([]);
+const printTemplateList = ref<any[]>([]);
+
+// 变更后物料/付款方式列表（仅内容变更时使用）
+const changeMaterialList = computed(() => form.value.changeMaterialList || []);
+const changePaymentMethodList = computed(() => form.value.changePaymentMethodList || []);
+
+// 变更后合同附件（绑定到 changeInfo.ossId）
+const changeInfoOssId = computed({
+  get() {
+    const v = form.value.changeInfo?.ossId;
+    return v === undefined || v === null ? '' : String(v);
+  },
+  set(val: string) {
+    if (form.value.changeInfo) form.value.changeInfo.ossId = val || undefined;
+  }
+});
+
+// 合同物料弹框
+const materialDialog = reactive({ visible: false, title: '' });
+const materialFormRef = ref<ElFormInstance>();
+const initMaterialFormData: ContractMaterialForm & { materialCode?: string; customerName?: string; saleMaterialName?: string } = {
+  contractMaterialId: undefined,
+  materialFlag: '2',
+  contractId: undefined,
+  productName: undefined,
+  specificationDescription: undefined,
+  materialId: undefined,
+  relationMaterialId: undefined,
+  materialCode: undefined,
+  materialName: undefined,
+  saleMaterialName: undefined,
+  customerName: undefined,
+  amount: undefined,
+  unitId: undefined,
+  beforePrice: undefined,
+  taxRate: undefined,
+  includingPrice: undefined,
+  subtotal: undefined,
+  remark: undefined,
+  activeFlag: '1'
+};
+const materialForm = ref<ContractMaterialForm & { materialCode?: string; customerName?: string; saleMaterialName?: string }>({ ...initMaterialFormData });
+const materialRules = {
+  productName: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
+  amount: [{ required: true, message: '数量不能为空', trigger: 'blur' }],
+  taxRate: [{ required: true, message: '税率不能为空', trigger: 'blur' }]
+};
+
+// 合同付款方式弹框
+const paymentMethodDialog = reactive({ visible: false, title: '' });
+const editingPaymentMethodIndex = ref<number | null>(null);
+const paymentMethodFormRef = ref<ElFormInstance>();
+const initPaymentMethodFormData: ContractPaymentMethodForm = {
+  paymentMethodId: undefined,
+  contractId: undefined,
+  sortOrder: undefined,
+  paymentStageId: undefined,
+  paymentDeadline: undefined,
+  paymentPercentage: undefined,
+  invoicePercentage: 0,
+  paymentAmount: undefined,
+  paymentDescription: undefined,
+  remark: undefined,
+  activeFlag: '1'
+};
+const paymentMethodForm = ref<ContractPaymentMethodForm>({ ...initPaymentMethodFormData });
+const paymentMethodRules = {
+  paymentStageId: [{ required: true, message: '请选择付款节点', trigger: 'change' }],
+  paymentDeadline: [{ required: true, message: '支付期限（天）不能为空', trigger: 'blur' }],
+  paymentPercentage: [{ required: true, message: '支付比例不能为空', trigger: 'blur' }],
+  invoicePercentage: [{ required: true, message: '发票比例不能为空', trigger: 'blur' }]
+};
+const PAYMENT_TEMPLATE_PLACEHOLDERS: Record<string, string> = {
+  '{序号}': 'sortOrder',
+  '{支付期限}': 'paymentDeadline',
+  '{支付比例}': 'paymentPercentage',
+  '{发票比例}': 'invoicePercentage'
+};
+const replacePaymentTemplate = (template: string | undefined, data: Record<string, any>): string => {
+  if (template == null || template === '') return '';
+  let result = template;
+  for (const [placeholder, fieldKey] of Object.entries(PAYMENT_TEMPLATE_PLACEHOLDERS)) {
+    const value = data[fieldKey];
+    result = result.replaceAll(placeholder, value !== undefined && value !== null ? String(value) : '');
+  }
+  return result;
+};
+const removeSegmentWhenInvoiceZero = (text: string, invoicePercentage: any): string => {
+  if (text == null || text === '') return text;
+  const isZero = invoicePercentage === 0 || invoicePercentage === '0' || Number(invoicePercentage) === 0;
+  if (!isZero) return text;
+  const startChar = '且';
+  const endChar = '后';
+  const idxStart = text.indexOf(startChar);
+  if (idxStart === -1) return text;
+  const idxEnd = text.indexOf(endChar, idxStart);
+  if (idxEnd === -1) return text;
+  return text.slice(0, idxStart) + text.slice(idxEnd + endChar.length);
+};
+const applyPaymentDescription = (template: string | undefined, data: Record<string, any>): string => {
+  const replaced = replacePaymentTemplate(template, data);
+  return removeSegmentWhenInvoiceZero(replaced, data.invoicePercentage);
+};
+const paymentMethodTemplateRaw = ref<string | null>(null);
+const refreshPaymentDescription = () => {
+  if (paymentMethodTemplateRaw.value) {
+    paymentMethodForm.value.paymentDescription = applyPaymentDescription(
+      paymentMethodTemplateRaw.value,
+      paymentMethodForm.value as Record<string, any>
+    );
+  }
+};
+const onPaymentStageChange = (paymentStageId: string | number | undefined) => {
+  if (paymentStageId == null) return;
+  const stage = paymentStageList.value.find((s) => s.paymentStageId === paymentStageId || String(s.paymentStageId) === String(paymentStageId));
+  if (stage?.paymentTemplate) {
+    paymentMethodTemplateRaw.value = stage.paymentTemplate;
+    paymentMethodForm.value.paymentDescription = applyPaymentDescription(
+      stage.paymentTemplate,
+      paymentMethodForm.value as Record<string, any>
+    );
+  }
+};
+
+const saleMaterialSelectRef = ref<InstanceType<typeof SaleMaterialSelect>>();
+
+// 合同选择弹框
+const contractDialog = reactive({ visible: false });
+const contractLoading = ref(false);
+const contractList = ref<ContractInfoVO[]>([]);
+const contractTotal = ref(0);
+const contractQueryParams = ref<ContractInfoQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  contractStatus: '3',
+  activeFlag: '1'
+});
+const selectedContract = ref<ContractInfoVO | null>(null);
+const contractDetailPreview = ref<ContractInfoVO | null>(null);
+const selectedContractName = ref<string>('');
+
+const isEdit = computed(() => !!(routeParams.value.id && (routeParams.value.type === 'update' || routeParams.value.type === 'view' || routeParams.value.type === 'approval')));
+const isFormDisabled = computed(() => routeParams.value.type === 'view' || routeParams.value.type === 'approval');
+
+const form = ref<
+  ContractChangeSaveForm & {
+    changeInfo?: any;
+    changeMaterialList?: any[];
+    changePaymentMethodList?: any[];
+    flowStatus?: string;
+    changeCode?: string;
+  }
+>({
   contractChangeId: undefined,
   contractId: undefined as any,
   changeType: '1',
@@ -105,6 +684,7 @@ const form = ref<ContractChangeSaveForm & { changeInfo?: any; changeMaterialList
   applyTime: undefined,
   remark: undefined,
   changeStatus: '1',
+  flowStatus: 'draft',
   activeFlag: '1',
   contractCode: undefined,
   contractName: undefined,
@@ -116,7 +696,8 @@ const form = ref<ContractChangeSaveForm & { changeInfo?: any; changeMaterialList
   changeContractAmount: undefined,
   changeInfo: undefined,
   changeMaterialList: undefined,
-  changePaymentMethodList: undefined
+  changePaymentMethodList: undefined,
+  changeCode: undefined
 });
 
 const rules = {
@@ -127,12 +708,63 @@ const rules = {
 
 function goBack() {
   proxy?.$tab.closePage(route);
-  router.push({ path: '/oa/erp/contractChange' });
+  router.push({ path: '/contract/contractChange' });
 }
 
-async function loadActivatedContracts() {
-  const res = await getErpContractInfoList({ contractStatus: '3', activeFlag: '1' });
-  activatedContractList.value = res.data || [];
+/** 打开合同选择弹框 */
+function openContractSelect() {
+  if (isFormDisabled.value) return;
+  contractDialog.visible = true;
+  selectedContract.value = null;
+  contractDetailPreview.value = null;
+  contractQueryParams.value.pageNum = 1;
+  getContractList();
+}
+
+/** 查询合同列表（仅已激活） */
+async function getContractList() {
+  contractLoading.value = true;
+  try {
+    const res = await listContractInfo(contractQueryParams.value);
+    contractList.value = res.rows || [];
+    contractTotal.value = res.total || 0;
+  } finally {
+    contractLoading.value = false;
+  }
+}
+
+function resetContractQuery() {
+  contractQueryParams.value.contractCode = undefined;
+  contractQueryParams.value.contractName = undefined;
+  contractQueryParams.value.pageNum = 1;
+  getContractList();
+}
+
+/** 表格当前行变化：选中合同并加载详情 */
+async function handleContractRowChange(row: ContractInfoVO | null) {
+  selectedContract.value = row || null;
+  contractDetailPreview.value = null;
+  if (row?.contractId) {
+    try {
+      const res = await getContractInfo(row.contractId);
+      contractDetailPreview.value = res.data || null;
+    } catch (e) {
+      console.error(e);
+    }
+  }
+}
+
+/** 确定选择合同 */
+function submitContractSelect() {
+  if (selectedContract.value) {
+    const c = selectedContract.value;
+    form.value.contractId = c.contractId as any;
+    selectedContractName.value = c.contractName || '';
+    contractDialog.visible = false;
+    onContractChange(c.contractId);
+  } else {
+    proxy?.$modal.msgWarning('请先选择一条合同');
+  }
 }
 
 async function onContractChange(contractId: string | number) {
@@ -142,19 +774,20 @@ async function onContractChange(contractId: string | number) {
   if (!c) return;
   form.value.contractCode = c.contractCode;
   form.value.contractName = c.contractName;
-  form.value.originalCustomerName = c.oneCustomerName || c.twoCustomerName;
+  const cAny = c as any;
+  form.value.originalCustomerName = cAny.oneCustomerName || cAny.twoCustomerName;
   form.value.originalContractAmount = c.totalPrice as any;
   form.value.changeContractCode = c.contractCode;
   form.value.changeContractName = c.contractName;
-  form.value.customerName = c.oneCustomerName || c.twoCustomerName;
+  form.value.customerName = cAny.oneCustomerName || cAny.twoCustomerName;
   form.value.changeContractAmount = c.totalPrice as any;
   form.value.changeInfo = c ? mapContractToChangeInfo(c) : undefined;
-  form.value.changeMaterialList = (c.contractMaterialList || []).map((m: any) => ({
+  form.value.changeMaterialList = (cAny.contractMaterialList || []).map((m: any) => ({
     ...m,
     changeMaterialId: undefined,
     contractChangeId: undefined
   }));
-  form.value.changePaymentMethodList = (c.contractPaymentMethodList || []).map((p: any) => ({
+  form.value.changePaymentMethodList = (cAny.contractPaymentMethodList || []).map((p: any) => ({
     ...p,
     changePaymentId: undefined,
     contractChangeId: undefined
@@ -164,22 +797,57 @@ async function onContractChange(contractId: string | number) {
 function mapContractToChangeInfo(c: any) {
   const info: any = {};
   const keys = [
-    'contractFlag', 'customerContractCode', 'contractCode', 'contractName', 'contractCategory', 'contractType',
-    'businessDirection', 'contractDeptId', 'contractDate', 'totalPrice', 'oneCustomerId', 'oneRepresent', 'oneDate',
-    'twoCustomerId', 'twoRepresent', 'twoDate', 'contractManagerId', 'templateId', 'ossId', 'paymentAccountId',
-    'paymentMethod', 'signatureAppendix', 'warrantyPeriod', 'internalContractCode', 'externalContractCode',
-    'orderContractCode', 'projectContractCode', 'deliveryStart', 'warrantyPeriodDescription', 'deliveryLocation',
-    'shipMethod', 'taxRate', 'signingPlace', 'materialRemark', 'contractTemplateFlag', 'capitalizedAmount', 'remark'
+    'contractFlag',
+    'customerContractCode',
+    'contractCode',
+    'contractName',
+    'contractCategory',
+    'contractType',
+    'businessDirection',
+    'contractDeptId',
+    'contractDate',
+    'totalPrice',
+    'oneCustomerId',
+    'oneRepresent',
+    'oneDate',
+    'twoCustomerId',
+    'twoRepresent',
+    'twoDate',
+    'contractManagerId',
+    'templateId',
+    'ossId',
+    'paymentAccountId',
+    'paymentMethod',
+    'signatureAppendix',
+    'warrantyPeriod',
+    'internalContractCode',
+    'externalContractCode',
+    'orderContractCode',
+    'projectContractCode',
+    'deliveryStart',
+    'warrantyPeriodDescription',
+    'deliveryLocation',
+    'shipMethod',
+    'taxRate',
+    'signingPlace',
+    'materialRemark',
+    'contractTemplateFlag',
+    'capitalizedAmount',
+    'remark'
   ];
-  keys.forEach(k => { if (c[k] !== undefined) info[k] = c[k]; });
+  keys.forEach((k) => {
+    if (c[k] !== undefined) info[k] = c[k];
+  });
   info.changeInfoId = undefined;
   info.contractChangeId = undefined;
+  if (info.contractTemplateFlag == null) info.contractTemplateFlag = '2';
   return info;
 }
 
 async function loadDetail() {
-  if (!contractChangeId.value) return;
-  const res = await getContractChangeDetail(contractChangeId.value);
+  const id = routeParams.value.id;
+  if (!id) return;
+  const res = await getContractChangeDetail(id);
   const d = res.data;
   if (!d?.main) return;
   const m = d.main;
@@ -190,6 +858,8 @@ async function loadDetail() {
   form.value.changeCode = m.changeCode;
   form.value.applyTime = m.applyTime;
   form.value.remark = m.remark;
+  form.value.changeStatus = m.changeStatus;
+  form.value.flowStatus = m.flowStatus ?? (m.changeStatus === '1' ? 'draft' : 'waiting');
   form.value.contractCode = m.contractCode;
   form.value.contractName = m.contractName;
   form.value.originalCustomerName = m.originalCustomerName;
@@ -201,9 +871,169 @@ async function loadDetail() {
   form.value.changeInfo = d.changeInfo ? { ...d.changeInfo } : undefined;
   form.value.changeMaterialList = (d.changeMaterialList || []).map((x: any) => ({ ...x }));
   form.value.changePaymentMethodList = (d.changePaymentMethodList || []).map((x: any) => ({ ...x }));
+  selectedContractName.value = m.contractName || '';
 }
 
-function buildPayload(): ContractChangeSaveForm {
+function loadSelectOptions() {
+  getBaseUnitInfoList(null).then((res) => (unitInfoList.value = res.data || []));
+  listPaymentStage({ pageNum: 1, pageSize: 500 }).then((res) => (paymentStageList.value = res.rows || []));
+  getCrmCustomerInfoList(null).then((res) => (customerInfoList.value = res.data || []));
+  getUserList({ pageNum: 1, pageSize: 1000 }).then((res) => (userInfoList.value = res.data || []));
+  getCrmPaymentAccountList({}).then((res) => (paymentAccountList.value = res.data || []));
+  getBasePrintTemplateList({ templateType: '1' }).then((res) => (printTemplateList.value = res.data || []));
+}
+
+// ----- 变更后物料：增删改 -----
+function handleAddMaterial() {
+  if (!form.value.changeInfo) return;
+  resetMaterialForm();
+  materialForm.value.contractId = form.value.contractId as any;
+  materialDialog.visible = true;
+  materialDialog.title = '新增合同物料';
+}
+function handleEditMaterial(row: any) {
+  resetMaterialForm();
+  materialForm.value = { ...row };
+  materialDialog.visible = true;
+  materialDialog.title = '编辑合同物料';
+}
+async function handleDeleteMaterial(row: any) {
+  await proxy?.$modal.confirm('是否确认删除该合同物料？');
+  const list = form.value.changeMaterialList || [];
+  const idx = list.findIndex((item: any) => (item.changeMaterialId != null && item.changeMaterialId === row.changeMaterialId) || (item.contractMaterialId != null && item.contractMaterialId === row.contractMaterialId) || item === row);
+  if (idx !== -1) {
+    list.splice(idx, 1);
+    calculateTotalPrice();
+  }
+  proxy?.$modal.msgSuccess('删除成功');
+}
+function resetMaterialForm() {
+  materialForm.value = { ...initMaterialFormData };
+  materialFormRef.value?.resetFields();
+}
+function cancelMaterial() {
+  resetMaterialForm();
+  materialDialog.visible = false;
+}
+function calculateBeforePrice() {
+  const tax = Number(materialForm.value.taxRate);
+  const including = Number(materialForm.value.includingPrice);
+  if (!isNaN(tax) && !isNaN(including)) {
+    const divisor = 1 + tax / 100;
+    if (divisor > 0) materialForm.value.beforePrice = Number((including / divisor).toFixed(2));
+  }
+  calculateSubtotal();
+}
+function calculateSubtotal() {
+  const amount = Number(materialForm.value.amount);
+  const including = Number(materialForm.value.includingPrice);
+  if (!isNaN(amount) && !isNaN(including)) materialForm.value.subtotal = Number((amount * including).toFixed(2));
+  calculateTotalPrice();
+}
+function calculateTotalPrice() {
+  const list = form.value.changeMaterialList || [];
+  const total = list.reduce((sum: number, m: any) => sum + (Number(m.subtotal) || 0), 0);
+  if (form.value.changeInfo) form.value.changeInfo.totalPrice = Number(total.toFixed(2));
+}
+function submitMaterialForm() {
+  materialFormRef.value?.validate((valid: boolean) => {
+    if (!valid) return;
+    if (!form.value.changeMaterialList) form.value.changeMaterialList = [];
+    const list = form.value.changeMaterialList;
+    const unitInfo = unitInfoList.value.find((item: any) => item.unitId === materialForm.value.unitId);
+    const unitName = unitInfo ? unitInfo.unitName : '';
+    const data = { ...materialForm.value, unitName };
+    const id = materialForm.value.contractMaterialId ?? (materialForm.value as any).changeMaterialId;
+    const idx = id != null ? list.findIndex((item: any) => item.contractMaterialId === id || item.changeMaterialId === id) : -1;
+    if (idx !== -1) {
+      list[idx] = data;
+    } else {
+      list.push({ ...data, contractMaterialId: undefined, changeMaterialId: Date.now() });
+    }
+    calculateTotalPrice();
+    proxy?.$modal.msgSuccess('操作成功');
+    materialDialog.visible = false;
+  });
+}
+
+// ----- 变更后付款方式：增删改 -----
+function handleAddPaymentMethod() {
+  resetPaymentMethodForm();
+  editingPaymentMethodIndex.value = null;
+  const list = form.value.changePaymentMethodList || [];
+  paymentMethodForm.value.sortOrder = list.length + 1;
+  paymentMethodDialog.visible = true;
+  paymentMethodDialog.title = '新增付款方式';
+}
+function handleEditPaymentMethod(row: any, rowIndex: number) {
+  resetPaymentMethodForm();
+  editingPaymentMethodIndex.value = rowIndex;
+  paymentMethodForm.value = { ...row };
+  const stage = paymentStageList.value.find((s) => s.paymentStageId === row.paymentStageId || String(s.paymentStageId) === String(row.paymentStageId));
+  if (stage?.paymentTemplate) paymentMethodTemplateRaw.value = stage.paymentTemplate;
+  paymentMethodDialog.visible = true;
+  paymentMethodDialog.title = '编辑付款方式';
+}
+async function handleDeletePaymentMethod(rowIndex: number) {
+  await proxy?.$modal.confirm('是否确认删除该付款方式？');
+  const list = form.value.changePaymentMethodList || [];
+  if (rowIndex >= 0 && rowIndex < list.length) {
+    list.splice(rowIndex, 1);
+    list.forEach((item: any, i: number) => (item.sortOrder = i + 1));
+  }
+  proxy?.$modal.msgSuccess('删除成功');
+}
+function resetPaymentMethodForm() {
+  paymentMethodForm.value = { ...initPaymentMethodFormData };
+  paymentMethodTemplateRaw.value = null;
+  paymentMethodFormRef.value?.resetFields();
+}
+function cancelPaymentMethod() {
+  resetPaymentMethodForm();
+  editingPaymentMethodIndex.value = null;
+  paymentMethodDialog.visible = false;
+}
+function submitPaymentMethodForm() {
+  paymentMethodFormRef.value?.validate((valid: boolean) => {
+    if (!valid) return;
+    if (!form.value.changePaymentMethodList) form.value.changePaymentMethodList = [];
+    const list = form.value.changePaymentMethodList;
+    const data = { ...paymentMethodForm.value };
+    data.paymentDescription = applyPaymentDescription(data.paymentDescription || '', data as Record<string, any>);
+    const editIndex = editingPaymentMethodIndex.value;
+    if (editIndex !== null && editIndex >= 0 && editIndex < list.length) {
+      list[editIndex] = data;
+    } else {
+      list.push({ ...data, paymentMethodId: undefined, changePaymentId: undefined });
+    }
+    editingPaymentMethodIndex.value = null;
+    list.forEach((item: any, i: number) => {
+      item.sortOrder = i + 1;
+      item.paymentDescription = applyPaymentDescription(item.paymentDescription || '', item);
+    });
+    proxy?.$modal.msgSuccess('操作成功');
+    paymentMethodDialog.visible = false;
+  });
+}
+
+function openSaleMaterialSelect() {
+  saleMaterialSelectRef.value?.open();
+}
+function saleMaterialSelectCallBack(data: any) {
+  const arr = Array.isArray(data) ? data : [data];
+  if (arr.length > 0) {
+    const m = arr[0];
+    materialForm.value.materialId = m.materialId;
+    materialForm.value.materialCode = m.materialCode;
+    materialForm.value.materialName = m.materialName;
+    materialForm.value.productName = m.saleMaterialName;
+    materialForm.value.saleMaterialName = m.saleMaterialName;
+    materialForm.value.relationMaterialId = m.relationMaterialId;
+    materialForm.value.customerName = m.customerName;
+  }
+}
+
+function buildPayload(changeStatus: '1' | '2'): ContractChangeSaveForm {
   const f = form.value;
   const payload: ContractChangeSaveForm = {
     contractChangeId: f.contractChangeId,
@@ -212,7 +1042,7 @@ function buildPayload(): ContractChangeSaveForm {
     changeReason: f.changeReason,
     applyTime: f.applyTime || new Date().toISOString().slice(0, 19).replace('T', ' '),
     remark: f.remark,
-    changeStatus: '1',
+    changeStatus,
     activeFlag: '1',
     contractCode: f.contractCode,
     contractName: f.contractName,
@@ -231,25 +1061,107 @@ function buildPayload(): ContractChangeSaveForm {
   return payload;
 }
 
-async function submitSave() {
-  await formRef.value?.validate().catch(() => {});
-  buttonLoading.value = true;
-  try {
-    const payload = buildPayload();
-    await saveContractChange(payload);
-    proxy?.$modal.msgSuccess('保存成功');
-    goBack();
-  } finally {
-    buttonLoading.value = false;
-  }
+/** 审批栏：提交（暂存 / 提交审批） */
+function submitForm(status: string, _mode: boolean) {
+  formRef.value?.validate((valid: boolean) => {
+    if (!valid) return;
+    if (form.value.changeType === '1' && !form.value.changeInfo) {
+      proxy?.$modal.msgError('内容变更请先选择合同，以加载变更后合同信息');
+      return;
+    }
+    buttonLoading.value = true;
+    if (status !== 'draft') {
+      // 提交审批：先保存再发起流程
+      const payload = buildPayload('2');
+      saveContractChange(payload)
+        .then((res) => {
+          const id = res.data;
+          if (id) form.value.contractChangeId = id;
+          form.value.changeStatus = '2';
+          form.value.flowStatus = 'waiting';
+          const variables = {
+            contractChangeId: id,
+            changeCode: form.value.changeCode || '',
+            contractName: form.value.contractName,
+            changeReason: form.value.changeReason
+          };
+          taskVariables.value = variables;
+          return startWorkFlow({
+            businessId: String(id),
+            flowCode: FlowCodeEnum.CONTRACT_CHANGE_CODE,
+            variables,
+            bizExt: { businessTitle: '合同变更', businessCode: form.value.changeCode || '合同变更' }
+          });
+        })
+        .then((resp) => {
+          if (resp?.data?.taskId && submitVerifyRef.value) {
+            return submitVerifyRef.value.openDialog(resp.data.taskId);
+          }
+        })
+        .then(() => {
+          proxy?.$modal.msgSuccess('提交成功');
+          goBack();
+        })
+        .finally(() => {
+          buttonLoading.value = false;
+        });
+    } else {
+      // 暂存
+      const payload = buildPayload('1');
+      saveContractChange(payload)
+        .then((res) => {
+          const id = res.data;
+          if (id) form.value.contractChangeId = id;
+          form.value.changeStatus = '1';
+          form.value.flowStatus = 'draft';
+          proxy?.$modal.msgSuccess('暂存成功');
+          goBack();
+        })
+        .finally(() => {
+          buttonLoading.value = false;
+        });
+    }
+  });
+}
+
+function submitCallback() {
+  goBack();
+}
+
+function handleApprovalRecord() {
+  approvalRecordRef.value?.init(form.value.contractChangeId);
+}
+
+async function approvalVerifyOpen() {
+  if (routeParams.value.taskId) await submitVerifyRef.value?.openDialog(routeParams.value.taskId);
 }
 
 onMounted(async () => {
-  await loadActivatedContracts();
+  routeParams.value = { ...(route.query as Record<string, any>) };
+  loadSelectOptions();
   if (isEdit.value) {
     await loadDetail();
   } else {
     form.value.changeType = '1';
+    form.value.flowStatus = 'draft';
   }
 });
 </script>
+
+<style scoped>
+.contract-detail-panel {
+  border: 1px solid var(--el-border-color);
+  border-radius: 4px;
+  padding: 12px;
+  min-height: 200px;
+}
+.panel-title {
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+.panel-placeholder {
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+  padding: 16px 0;
+}
+</style>