From eb0243a58a230c91af1412162f2963b65977b23e Mon Sep 17 00:00:00 2001
From: "zangch@mesnac.com" <zangch@mesnac.com>
Date: Thu, 20 Nov 2025 15:57:02 +0800
Subject: [PATCH] =?UTF-8?q?feat(erpProjectPlan):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E8=AE=A1=E5=88=92=E7=AE=A1=E7=90=86=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=92=8C=E9=99=84=E4=BB=B6=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 编辑页新增项目计划编号、项目经理部门等只读字段，替换下拉为输入框展示
- 列表页新增项目计划编号列，调整按钮及标签样式，优化操作体验
- 移除无用用户列表请求，简化初始化逻辑
- 新增附件上传与预览对话框组件，支持编辑和查看模式交互
- 表单数据同步新增项目编号、项目经理姓名及部门字段赋值
- 增加项目计划变更记录逻辑及对应样式，支持查看阶段进度变更详情
- 查看模式下自动加载项目计划变更记录
- 优化流程状态及项目计划状态标签显示颜色及样式
- 调整表格序号显示，统一样式并完善列的显隐控制
---
 src/views/oa/erp/erpProjectPlan/edit.vue  | 455 ++++++++---
 src/views/oa/erp/erpProjectPlan/index.vue | 890 +++++++++++-----------
 2 files changed, 820 insertions(+), 525 deletions(-)

diff --git a/src/views/oa/erp/erpProjectPlan/edit.vue b/src/views/oa/erp/erpProjectPlan/edit.vue
index 16188d5..de951a9 100644
--- a/src/views/oa/erp/erpProjectPlan/edit.vue
+++ b/src/views/oa/erp/erpProjectPlan/edit.vue
@@ -3,32 +3,16 @@
     <el-card shadow="never">
       <div v-if="showApprovalButton" class="mb-3 flex items-center justify-between">
         <div>
-          <el-button
-            v-if="showSubmitButtons"
-            type="info"
-            :loading="draftLoading"
-            :disabled="submitLoading"
-            @click="handleSubmitAction('draft')"
-          >暂存</el-button>
-          <el-button
-            v-if="showSubmitButtons"
-            type="primary"
-            :loading="submitLoading"
-            :disabled="draftLoading"
-            @click="handleSubmitAction('submit')"
-          >提交</el-button>
-          <el-button
-            v-if="showApprovalAction"
-            type="primary"
-            :disabled="draftLoading || submitLoading"
-            @click="approvalVerifyOpen"
-          >审批</el-button>
-          <el-button
-            v-if="showProgressButton"
-            type="primary"
-            :disabled="draftLoading || submitLoading"
-            @click="handleApprovalRecord"
-          >流程进度</el-button>
+          <el-button v-if="showSubmitButtons" type="info" :loading="draftLoading" :disabled="submitLoading" @click="handleSubmitAction('draft')"
+            >暂存</el-button
+          >
+          <el-button v-if="showSubmitButtons" type="primary" :loading="submitLoading" :disabled="draftLoading" @click="handleSubmitAction('submit')"
+            >提交</el-button
+          >
+          <el-button v-if="showApprovalAction" type="primary" :disabled="draftLoading || submitLoading" @click="approvalVerifyOpen">审批</el-button>
+          <el-button v-if="showProgressButton" type="primary" :disabled="draftLoading || submitLoading" @click="handleApprovalRecord"
+            >流程进度</el-button
+          >
         </div>
         <div>
           <el-button @click="goBack">返回</el-button>
@@ -44,22 +28,28 @@
           <el-col :span="12">
             <el-form-item label="项目名称" prop="projectId">
               <el-select v-model="form.projectId" placeholder="请选择项目" filterable :disabled="!isBasicEditable" @change="handleProjectChange">
-                <el-option v-for="item in projectInfoList" :key="item.projectId" :label="item.projectName" :value="item.projectId"/>
+                <el-option v-for="item in projectInfoList" :key="item.projectId" :label="item.projectName" :value="item.projectId" />
               </el-select>
             </el-form-item>
           </el-col>
+          <el-col :span="12">
+            <el-form-item label="项目计划编号" prop="projectPlanCode">
+              <el-input v-model="form.projectPlanCode" placeholder="由系统自动生成" disabled />
+            </el-form-item>
+          </el-col>
           <el-col :span="12">
             <el-form-item label="项目经理" prop="managerId">
-              <el-select v-model="form.managerId" placeholder="请选择项目经理" filterable disabled>
-                <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId"/>
-              </el-select>
+              <el-input v-model="form.managerName" placeholder="自动带出" disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="项目经理部门">
+              <el-input v-model="form.managerDeptName" placeholder="自动带出" disabled />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="部门负责人" prop="chargeId">
-              <el-select v-model="form.chargeId" placeholder="请选择部门负责人" filterable disabled>
-                <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId"/>
-              </el-select>
+              <el-input v-model="form.chargeName" placeholder="自动带出" disabled />
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -80,6 +70,16 @@
               </el-select>
             </el-form-item>
           </el-col>
+          <el-col :span="12">
+            <el-form-item label="附件" prop="ossId">
+              <template v-if="isViewMode">
+                <el-button type="primary" plain icon="View" @click="handlePreview" :disabled="!form.ossId">预览附件</el-button>
+              </template>
+              <template v-else>
+                <el-button type="primary" plain icon="Upload" @click="handleFile">上传附件</el-button>
+              </template>
+            </el-form-item>
+          </el-col>
           <el-col :span="24">
             <el-form-item label="备注" prop="remark">
               <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请输入备注" :disabled="!isBasicEditable" />
@@ -99,77 +99,110 @@
           <el-table-column label="项目阶段" width="150" align="center">
             <template #default="scope">
               <el-select v-model="scope.row.projectPhases" placeholder="请选择项目阶段" style="width: 100%" :disabled="!isBasicEditable">
-                <el-option v-for="dict in project_phases" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                <el-option v-for="dict in project_phases" :key="dict.value" :label="dict.label" :value="dict.value" />
               </el-select>
             </template>
           </el-table-column>
           <el-table-column label="计划开始时间" width="160" align="center">
             <template #default="scope">
-              <el-date-picker v-model="scope.row.planStartTime" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" style="width: 100%" :disabled="!isBasicEditable"/>
+              <el-date-picker
+                v-model="scope.row.planStartTime"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期"
+                style="width: 100%"
+                :disabled="!isBasicEditable"
+              />
             </template>
           </el-table-column>
           <el-table-column label="计划结束时间" width="160" align="center">
             <template #default="scope">
-              <el-date-picker v-model="scope.row.planEndTime" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" style="width: 100%" :disabled="!isBasicEditable"/>
+              <el-date-picker
+                v-model="scope.row.planEndTime"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期"
+                style="width: 100%"
+                :disabled="!isBasicEditable"
+              />
             </template>
           </el-table-column>
           <el-table-column label="回款阶段" width="150" align="center">
             <template #default="scope">
               <el-select v-model="scope.row.collectionStage" placeholder="请选择回款阶段" style="width: 100%" :disabled="!isBasicEditable">
-                <el-option v-for="dict in collection_stage" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                <el-option v-for="dict in collection_stage" :key="dict.value" :label="dict.label" :value="dict.value" />
               </el-select>
             </template>
           </el-table-column>
           <el-table-column label="回款比例(%)" width="120" align="center">
             <template #default="scope">
-              <el-input-number v-model="scope.row.repaymentRate" :min="0" :max="100" :precision="2" controls-position="right" style="width: 100%" :disabled="!isBasicEditable"/>
+              <el-input-number
+                v-model="scope.row.repaymentRate"
+                :min="0"
+                :max="100"
+                :precision="2"
+                controls-position="right"
+                style="width: 100%"
+                :disabled="!isBasicEditable"
+              />
             </template>
           </el-table-column>
           <el-table-column label="预计回款金额" width="140" align="center">
             <template #default="scope">
-              <el-input-number v-model="scope.row.repaymentAmount" :min="0" :precision="2" controls-position="right" style="width: 100%" :disabled="!isBasicEditable"/>
+              <el-input-number
+                v-model="scope.row.repaymentAmount"
+                :min="0"
+                :precision="2"
+                controls-position="right"
+                style="width: 100%"
+                :disabled="!isBasicEditable"
+              />
             </template>
           </el-table-column>
           <el-table-column label="预计回款时间" width="160" align="center">
             <template #default="scope">
-              <el-date-picker v-model="scope.row.repaymentTime" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" style="width: 100%" :disabled="!isBasicEditable" @change="recalcReceivableDate(scope.row)"/>
+              <el-date-picker
+                v-model="scope.row.repaymentTime"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期"
+                style="width: 100%"
+                :disabled="!isBasicEditable"
+                @change="recalcReceivableDate(scope.row)"
+              />
             </template>
           </el-table-column>
           <el-table-column label="回款延期天数" width="140" align="center">
             <template #default="scope">
-              <el-input-number v-model="scope.row.delayDay" :min="0" :step="1" controls-position="right" style="width: 100%" :disabled="!canEditLimited" @change="recalcReceivableDate(scope.row)"/>
+              <el-input-number
+                v-model="scope.row.delayDay"
+                :min="0"
+                :step="1"
+                controls-position="right"
+                style="width: 100%"
+                :disabled="!canEditLimited"
+                @change="recalcReceivableDate(scope.row)"
+              />
             </template>
           </el-table-column>
-<!--          <el-table-column label="应收款日期" width="160" align="center">
+          <!--          <el-table-column label="应收款日期" width="160" align="center">
             <template #default="scope">
               <el-date-picker v-model="scope.row.receivableDate" type="date" value-format="YYYY-MM-DD" placeholder="自动计算" style="width: 100%" disabled/>
             </template>
           </el-table-column>-->
-         <el-table-column label="实际开始" min-width="140">
-          <template #default="scope">
-            <el-date-picker
-              v-model="scope.row.realStartTime"
-              type="date"
-              value-format="YYYY-MM-DD"
-              placeholder="选择日期"
-              style="width: 100%"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column label="实际结束" min-width="140">
-          <template #default="scope">
-            <el-date-picker
-              v-model="scope.row.realEndTime"
-              type="date"
-              value-format="YYYY-MM-DD"
-              placeholder="选择日期"
-              style="width: 100%"
-            />
-          </template>
-        </el-table-column>
+          <el-table-column label="实际开始" min-width="140">
+            <template #default="scope">
+              <el-date-picker v-model="scope.row.realStartTime" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" style="width: 100%" />
+            </template>
+          </el-table-column>
+          <el-table-column label="实际结束" min-width="140">
+            <template #default="scope">
+              <el-date-picker v-model="scope.row.realEndTime" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" style="width: 100%" />
+            </template>
+          </el-table-column>
           <el-table-column label="进度备注" width="200" align="center">
             <template #default="scope">
-              <el-input v-model="scope.row.scheduleRemark" placeholder="请输入进度备注" :disabled="!canEditLimited"/>
+              <el-input v-model="scope.row.scheduleRemark" placeholder="请输入进度备注" :disabled="!canEditLimited" />
             </template>
           </el-table-column>
           <el-table-column label="操作" width="80" align="center" fixed="right" v-if="isBasicEditable">
@@ -177,8 +210,72 @@
               <el-button type="danger" link icon="Delete" @click="handleDeleteStage(scope.$index)">删除</el-button>
             </template>
           </el-table-column>
+          <!-- 动态变更合并列（每次变更为一组子列） -->
+          <!--          <el-table-column
+            v-for="(change, changeIndex) in projectChangeList"
+            :key="`change-${changeIndex}`"
+            :label="`第${changeIndex + 1}次变更`"
+            header-align="center"
+            align="center"
+          >
+            <el-table-column label="原起" min-width="120" align="center">
+              <template #default="scope">
+                <span v-if="getChangeProgressByStage(change, scope.row.planStageId)" class="change-highlight">
+                  {{ getChangeProgressByStage(change, scope.row.planStageId).originalStart || '-' }}
+                </span>
+                <span v-else class="text-gray-400">-</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="原止" min-width="120" align="center">
+              <template #default="scope">
+                <span v-if="getChangeProgressByStage(change, scope.row.planStageId)" class="change-highlight">
+                  {{ getChangeProgressByStage(change, scope.row.planStageId).originalEnd || '-' }}
+                </span>
+                <span v-else class="text-gray-400">-</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="变更起" min-width="120" align="center">
+              <template #default="scope">
+                <span v-if="getChangeProgressByStage(change, scope.row.planStageId)" class="change-highlight">
+                  {{ getChangeProgressByStage(change, scope.row.planStageId).changedStart || '-' }}
+                </span>
+                <span v-else class="text-gray-400">-</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="变更止" min-width="120" align="center">
+              <template #default="scope">
+                <span v-if="getChangeProgressByStage(change, scope.row.planStageId)" class="change-highlight">
+                  {{ getChangeProgressByStage(change, scope.row.planStageId).changedEnd || '-' }}
+                </span>
+                <span v-else class="text-gray-400">-</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="里程碑" min-width="140" align="center">
+              <template #default="scope">
+                <span v-if="getChangeProgressByStage(change, scope.row.planStageId)" class="change-highlight">
+                  {{ getChangeProgressByStage(change, scope.row.planStageId).milestoneName || '-' }}
+                </span>
+                <span v-else class="text-gray-400">-</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="完成度(%)" min-width="110" align="center">
+              <template #default="scope">
+                <span v-if="getChangeProgressByStage(change, scope.row.planStageId)" class="change-highlight">
+                  {{ getChangeProgressByStage(change, scope.row.planStageId).completionDegree ?? '-' }}
+                </span>
+                <span v-else class="text-gray-400">-</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="备注" min-width="160" align="left">
+              <template #default="scope">
+                <span v-if="getChangeProgressByStage(change, scope.row.planStageId)" class="change-highlight">
+                  {{ getChangeProgressByStage(change, scope.row.planStageId).remark || '-' }}
+                </span>
+                <span v-else class="text-gray-400">-</span>
+              </template>
+            </el-table-column>
+          </el-table-column>-->
         </el-table>
-
       </el-form>
     </el-card>
 
@@ -186,15 +283,31 @@
     <submitVerify ref="submitVerifyRef" :task-variables="taskVariables" @submit-callback="submitCallback" />
     <!-- 审批记录 -->
     <approvalRecord ref="approvalRecordRef" />
+
+    <!-- 附件上传/预览对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
+      <el-form label-width="80px">
+        <el-form-item label="文件名">
+          <fileUpload v-if="type === 0" v-model="ossFileModel" :disabled="isViewMode" />
+          <imageUpload v-if="type === 1" v-model="ossFileModel" :disabled="isViewMode" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button v-if="!isViewMode" type="primary" @click="submitOss">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts" name="ErpProjectPlanEdit">
-import { ref, reactive, onMounted, onActivated, getCurrentInstance, watch, computed } from 'vue';
+import { computed, getCurrentInstance, onActivated, onMounted, reactive, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { getErpProjectPlan, addErpProjectPlan, updateErpProjectPlan, projectPlanSubmitAndFlowStart } from '@/api/oa/erp/erpProjectPlan';
+import { addErpProjectPlan, getErpProjectPlan, projectPlanSubmitAndFlowStart, updateErpProjectPlan } from '@/api/oa/erp/erpProjectPlan';
 import { ErpProjectPlanForm } from '@/api/oa/erp/erpProjectPlan/types';
-import { listUser } from '@/api/system/user';
+import { queryProjectChangeByProjectPlanId } from '@/api/oa/erp/erpProjectChange';
 import { getErpProjectInfoList } from '@/api/oa/erp/projectInfo';
 import type { ProjectInfoVO } from '@/api/oa/erp/projectInfo/types';
 import SubmitVerify from '@/components/Process/submitVerify.vue';
@@ -202,8 +315,8 @@ import ApprovalRecord from '@/components/Process/approvalRecord.vue';
 import { useUserStore } from '@/store/modules/user';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { project_plan_status , project_phases, collection_stage } = toRefs<any>(
-  proxy?.useDict('project_plan_status', 'project_phases', 'collection_stage')
+const { project_plan_status, project_phases, collection_stage, project_change_status } = toRefs<any>(
+  proxy?.useDict('project_plan_status', 'project_phases', 'collection_stage', 'project_change_status')
 );
 const route = useRoute();
 const router = useRouter();
@@ -249,10 +362,7 @@ const isBasicEditable = computed(() => {
     return false;
   }
   // 草稿、驳回、撤回均允许项目经理完整编辑
-  return (
-    form.value.projectPlanStatus === '1' ||
-    ['back', 'cancel'].includes(form.value.flowStatus as string)
-  );
+  return form.value.projectPlanStatus === '1' || ['back', 'cancel'].includes(form.value.flowStatus as string);
 });
 
 // 计算属性：判断是否可编辑延迟/备注等有限字段
@@ -284,11 +394,7 @@ const showLimitedActions = computed(() => !isViewMode.value && isLimitedMode.val
 
 const showSubmitButtons = computed(() => {
   if (approvalPageType.value === 'add') return true;
-  if (
-    approvalPageType.value === 'update' &&
-    form.value.flowStatus &&
-    ['draft', 'cancel', 'back'].includes(form.value.flowStatus as string)
-  ) {
+  if (approvalPageType.value === 'update' && form.value.flowStatus && ['draft', 'cancel', 'back'].includes(form.value.flowStatus as string)) {
     return true;
   }
   return false;
@@ -308,19 +414,35 @@ const draftLoading = ref(false);
 const submitLoading = ref(false);
 const currentAction = ref<'draft' | 'submit' | null>(null);
 const projectInfoList = ref<Partial<ProjectInfoVO>[]>([]);
-const userList = ref<any[]>([]);
 const selectedProjectCode = ref<string>(''); // 展示选中项目的编号
 const baseDataLoaded = ref(false);
 
+// 项目计划变更记录相关
+const projectChangeList = ref<any[]>([]); // 变更记录列表
+const activeChangeTab = ref<string>('0'); // 当前活跃的变更标签
+
+// 附件上传对话框状态
+const type = ref(0);
+const dialog = reactive<{ visible: boolean; title: string }>({
+  visible: false,
+  title: ''
+});
+const ossFileModel = ref<string | string[] | undefined>(undefined);
+
 const createEmptyForm = (): ErpProjectPlanForm => ({
   projectPlanId: undefined,
   projectId: undefined,
   managerId: undefined,
   chargeId: undefined,
+  managerName: undefined,
+  chargeName: undefined,
+  managerDeptName: undefined,
+  projectPlanCode: undefined,
   paymentMethod: undefined,
   projectPlanStatus: '1',
   flowStatus: 'draft',
   contractId: undefined,
+  ossId: undefined,
   remark: undefined,
   planStageList: []
 });
@@ -347,17 +469,11 @@ const getProjectInfoList = async () => {
   projectInfoList.value = (res.data || []) as Partial<ProjectInfoVO>[];
 };
 
-/** 获取用户列表 */
-const getUserList = async () => {
-  const res = await listUser({ pageNum: 1, pageSize: 9999 });
-  userList.value = res.rows;
-};
-
 const initBaseData = async () => {
   if (baseDataLoaded.value) {
     return;
   }
-  await Promise.all([getProjectInfoList(), getUserList()]);
+  await getProjectInfoList();
   baseDataLoaded.value = true;
 };
 
@@ -399,10 +515,7 @@ interface ProjectSyncOptions {
 }
 
 /** 处理项目选择变化，自动填充项目经理、部门负责人、付款方式和项目编号 */
-const handleProjectChange = (
-  projectId?: string | number,
-  { syncManagerAndCharge = true, syncPaymentMethod = true }: ProjectSyncOptions = {}
-) => {
+const handleProjectChange = (projectId?: string | number, { syncManagerAndCharge = true, syncPaymentMethod = true }: ProjectSyncOptions = {}) => {
   const isEmptySelection = projectId === undefined || projectId === null || projectId === '';
   if (isEmptySelection) {
     if (syncManagerAndCharge) {
@@ -416,7 +529,7 @@ const handleProjectChange = (
     return;
   }
 
-  const project = projectInfoList.value.find(item => String(item.projectId) === String(projectId));
+  const project = projectInfoList.value.find((item) => String(item.projectId) === String(projectId));
   if (!project) {
     return;
   }
@@ -424,16 +537,21 @@ const handleProjectChange = (
   if (syncManagerAndCharge) {
     form.value.managerId = project.managerId ?? undefined;
     form.value.chargeId = project.chargeId ?? undefined;
+    // 名称字段从后端项目信息连表数据带出
+    form.value.managerName = ((project as any).managerName as string) ?? '';
+    form.value.chargeName = ((project as any).chargeName as string) ?? '';
   }
 
   if (syncPaymentMethod) {
     form.value.paymentMethod = (project.paymentMethod as string) ?? undefined;
   }
 
+  // 项目编号与项目经理部门均从后端项目信息中带出
   selectedProjectCode.value = (project.projectCode as string) || '';
+  // ProjectInfoVO中deptName来源于后端连表（ErpProjectInfoVo.deptName）
+  form.value.managerDeptName = ((project as any).deptName as string) ?? '';
 };
 
-
 /** 根据回款时间与延期天数生成应收款日期 */
 const recalcReceivableDate = (row: any) => {
   if (!row) return;
@@ -454,6 +572,38 @@ const recalcReceivableDate = (row: any) => {
   row.receivableDate = proxy?.parseTime ? proxy.parseTime(target, '{y}-{m}-{d}') : target.toISOString().slice(0, 10);
 };
 
+// 打开附件上传对话框（编辑模式）
+const handleFile = () => {
+  type.value = 0;
+  dialog.visible = true;
+  dialog.title = '上传项目计划附件';
+  // 回显已有附件
+  ossFileModel.value = form.value.ossId as any;
+};
+
+// 查看模式下预览附件
+const handlePreview = () => {
+  if (!form.value.ossId) {
+    proxy?.$modal.msgWarning('暂无附件可预览');
+    return;
+  }
+  type.value = 0;
+  dialog.visible = true;
+  dialog.title = '预览项目计划附件';
+  ossFileModel.value = form.value.ossId as any;
+};
+
+// 提交附件
+const submitOss = () => {
+  form.value.ossId = ossFileModel.value as any;
+  dialog.visible = false;
+  proxy?.$modal.msgSuccess('附件已更新');
+};
+
+// 关闭附件对话框
+const cancel = () => {
+  dialog.visible = false;
+};
 
 /** 提交表单 */
 const submitForm = async (status = 'draft') => {
@@ -484,14 +634,14 @@ const submitForm = async (status = 'draft') => {
       try {
         // 更新阶段的projectId
         if (form.value.planStageList) {
-          form.value.planStageList.forEach(stage => {
+          form.value.planStageList.forEach((stage) => {
             stage.projectId = form.value.projectId;
           });
         }
 
         // 提交审批
         if (status === 'submit') {
-          const project = projectInfoList.value.find(p => p.projectId === form.value.projectId);
+          const project = projectInfoList.value.find((p) => p.projectId === form.value.projectId);
           form.value.flowCode = 'OAPS';
           form.value.variables = {
             projectId: form.value.projectId,
@@ -570,7 +720,7 @@ const saveLimited = () => {
     buttonLoading.value = true;
     try {
       if (form.value.planStageList) {
-        form.value.planStageList.forEach(stage => {
+        form.value.planStageList.forEach((stage) => {
           stage.projectId = form.value.projectId;
         });
       }
@@ -590,6 +740,60 @@ const approvalVerifyOpen = async () => {
   await submitVerifyRef.value?.openDialog(routeParams.value.taskId);
 };
 
+/**
+ * 获取指定阶段在某个变更中的进度信息
+ * @param change 变更记录
+ * @param planStageId 项目阶段ID
+ */
+const getChangeProgressByStage = (change: any, planStageId: any) => {
+  if (!change.progressList || change.progressList.length === 0) {
+    return null;
+  }
+  return change.progressList.find((progress: any) => progress.planStageId === planStageId);
+};
+
+/**
+ * 获取对齐的进度变更数据
+ * 将项目阶段与变更进度对齐显示
+ */
+const getAlignedProgressData = (change: any) => {
+  if (!form.value.planStageList || form.value.planStageList.length === 0) {
+    return [];
+  }
+
+  // 构建变更进度的Map，key为planStageId
+  const progressMap = new Map();
+  if (change.progressList && change.progressList.length > 0) {
+    change.progressList.forEach((progress: any) => {
+      progressMap.set(progress.planStageId, progress);
+    });
+  }
+
+  // 将项目阶段与对应的变更进度合并
+  return form.value.planStageList.map((stage: any) => ({
+    ...stage,
+    changeProgress: progressMap.get(stage.planStageId)
+  }));
+};
+
+/**
+ * 加载项目计划的变更记录
+ */
+const loadProjectChangeList = async () => {
+  if (!form.value.projectPlanId) {
+    projectChangeList.value = [];
+    return;
+  }
+
+  try {
+    const res = await queryProjectChangeByProjectPlanId(form.value.projectPlanId);
+    projectChangeList.value = res.data || [];
+    activeChangeTab.value = '0'; // 重置为第一个标签
+  } catch (error) {
+    projectChangeList.value = [];
+    console.error('加载项目计划变更记录失败:', error);
+  }
+};
 
 const loadFormData = async () => {
   await initBaseData();
@@ -615,9 +819,14 @@ const loadFormData = async () => {
         syncPaymentMethod: false
       });
     }
+    // 在查看模式下加载变更记录
+    if (isViewMode.value) {
+      await loadProjectChangeList();
+    }
   } else {
     resetForm();
     form.value.flowStatus = 'draft';
+    projectChangeList.value = [];
   }
 };
 
@@ -658,4 +867,56 @@ onActivated(() => {
 .el-divider {
   margin: 20px 0;
 }
+
+// 变更列样式
+.change-cell {
+  padding: 8px;
+  background-color: #fffacd;
+  border-radius: 4px;
+  font-size: 12px;
+
+  .change-item {
+    margin-bottom: 6px;
+    display: flex;
+    align-items: center;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .label {
+      font-weight: 500;
+      color: #333;
+      margin-right: 8px;
+      min-width: 60px;
+    }
+
+    .value {
+      color: #666;
+      word-break: break-word;
+    }
+  }
+}
+
+.change-highlight {
+  display: inline-block;
+  padding: 2px 6px;
+  background-color: #fffacd;
+  border-radius: 3px;
+  color: #333;
+}
+
+.info-item {
+  margin-bottom: 12px;
+
+  .label {
+    font-weight: 500;
+    color: #333;
+    margin-right: 8px;
+  }
+
+  .value {
+    color: #666;
+  }
+}
 </style>
diff --git a/src/views/oa/erp/erpProjectPlan/index.vue b/src/views/oa/erp/erpProjectPlan/index.vue
index de10874..bcf34df 100644
--- a/src/views/oa/erp/erpProjectPlan/index.vue
+++ b/src/views/oa/erp/erpProjectPlan/index.vue
@@ -1,450 +1,484 @@
 <template>
-    <div class="p-2">
-        <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-            <div v-show="showSearch" class="mb-[10px]">
-                <el-card shadow="hover">
-                    <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width='100px'>
-                                    <el-form-item label="项目名称" prop="projectId">
-                                        <el-select v-model="queryParams.projectId" placeholder="请选择项目" clearable filterable>
-                                            <el-option v-for="item in projectInfoList" :key="item.projectId" :label="item.projectName" :value="item.projectId"/>
-                                        </el-select>
-                                    </el-form-item>
-                                    <el-form-item label="项目经理" prop="managerId">
-                                        <el-select v-model="queryParams.managerId" placeholder="请选择项目经理" clearable filterable>
-                                            <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId"/>
-                                        </el-select>
-                                    </el-form-item>
-                                    <el-form-item label="项目计划状态" prop="projectPlanStatus">
-                                        <el-select v-model="queryParams.projectPlanStatus" placeholder="请选择项目计划状态" clearable >
-                                            <el-option v-for="dict in project_plan_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
-                                        </el-select>
-                                    </el-form-item>
-                        <el-form-item>
-                            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-                            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-                        </el-form-item>
-                    </el-form>
-                </el-card>
-            </div>
-        </transition>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="100px">
+            <el-form-item label="项目名称" prop="projectId">
+              <el-select v-model="queryParams.projectId" placeholder="请选择项目" clearable filterable>
+                <el-option v-for="item in projectInfoList" :key="item.projectId" :label="item.projectName" :value="item.projectId" />
+              </el-select>
+            </el-form-item>
+            <!--                                    <el-form-item label="项目计划编号" prop="projectPlanCode">
+                                        <el-input v-model="queryParams.projectPlanCode" placeholder="请输入项目计划编号" clearable />
+                                    </el-form-item>-->
+            <el-form-item label="项目经理" prop="managerId">
+              <el-select v-model="queryParams.managerId" placeholder="请选择项目经理" clearable filterable>
+                <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="项目计划状态" prop="projectPlanStatus">
+              <el-select v-model="queryParams.projectPlanStatus" placeholder="请选择项目计划状态" clearable>
+                <el-option v-for="dict in project_plan_status" :key="dict.value" :label="dict.label" :value="dict.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </div>
+    </transition>
 
-        <el-card shadow="never">
-            <template #header>
-                <el-row :gutter="10" class="mb8">
-                    <el-col :span="1.5">
-                        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['oa/erp:erpProjectPlan:add']">新增</el-button>
-                    </el-col>
-                    <!-- 顶部修改按钮暂不启用，改由操作列提供入口 -->
-                    <!-- <el-col :span="1.5">
+    <el-card shadow="never">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['oa/erp:erpProjectPlan:add']">新增</el-button>
+          </el-col>
+          <!-- 顶部修改按钮暂不启用，改由操作列提供入口 -->
+          <!-- <el-col :span="1.5">
                         <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['oa/erp:erpProjectPlan:edit']">修改</el-button>
                     </el-col> -->
-                    <el-col :span="1.5">
-                        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['oa/erp:erpProjectPlan:remove']">删除</el-button>
-                    </el-col>
-                    <el-col :span="1.5">
-                        <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['oa/erp:erpProjectPlan:export']">导出</el-button>
-                    </el-col>
-                    <right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true" @queryTable="getList"></right-toolbar>
-                </el-row>
-            </template>
+          <el-col :span="1.5">
+            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['oa/erp:erpProjectPlan:remove']"
+              >删除</el-button
+            >
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['oa/erp:erpProjectPlan:export']">导出</el-button>
+          </el-col>
+          <right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true" @queryTable="getList"></right-toolbar>
+        </el-row>
+      </template>
 
-            <el-table v-loading="loading" border :data="erpProjectPlanList" @selection-change="handleSelectionChange">
-                <el-table-column type="selection" width="55" align="center" />
-                        <el-table-column label="项目计划ID" align="center" prop="projectPlanId" v-if="columns[0].visible"/>
-                        <el-table-column label="项目名称" align="center" prop="projectName" width="200" v-if="columns[2].visible"/>
-                        <el-table-column label="项目经理" align="center" prop="managerName" v-if="columns[3].visible"/>
-                        <el-table-column label="部门负责人" align="center" prop="chargeName" v-if="columns[4].visible"/>
-                        <el-table-column label="付款方式" align="center" prop="paymentMethod" v-if="columns[5].visible"/>
-                        <el-table-column label="项目计划状态" align="center" prop="projectPlanStatus" v-if="columns[6].visible">
-                            <template #default="scope">
-                                    <dict-tag :options="project_plan_status" :value="scope.row.projectPlanStatus"/>
-                            </template>
-                        </el-table-column>
-                        <el-table-column label="流程状态" align="center" prop="flowStatus" v-if="columns[7].visible"/>
-                        <el-table-column label="合同名称" align="center" prop="contractName" width="200" v-if="columns[8].visible"/>
-                        <el-table-column label="排序号" align="center" prop="sortOrder" v-if="columns[9].visible"/>
-                        <el-table-column label="备注" align="center" prop="remark" v-if="columns[10].visible"/>
-                        <el-table-column label="激活标识" align="center" prop="activeFlag" v-if="columns[11].visible">
-                            <template #default="scope">
-                                    <dict-tag :options="active_flag" :value="scope.row.activeFlag"/>
-                            </template>
-                        </el-table-column>
-                        <el-table-column label="创建人" align="center" prop="createName" v-if="columns[12].visible"/>
-                        <el-table-column label="创建时间" align="center" prop="createTime" width="180" v-if="columns[13].visible">
-                            <template #default="scope">
-                                <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
-                            </template>
-                        </el-table-column>
-                <el-table-column label="操作" align="center" width="200" fixed="right"  class-name="small-padding fixed-width">
-                    <template #default="scope">
-                        <el-tooltip content="查看" placement="top" v-if="scope.row.projectPlanStatus !== '1'">
-                            <el-button link type="info" icon="DocumentChecked" @click="handleView(scope.row)" v-hasPermi="['oa/erp:erpProjectPlan:query']"></el-button>
-                        </el-tooltip>
-                        <el-tooltip content="修改" placement="top" v-if="scope.row.projectPlanStatus === '1'">
-                            <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row)" v-hasPermi="['oa/erp:erpProjectPlan:edit']"></el-button>
-                        </el-tooltip>
-                        <el-tooltip content="维护进度" placement="top" v-if="scope.row.projectPlanStatus === '3' || scope.row.flowStatus === 'finish'">
-                            <el-button link type="primary" icon="EditPen" @click="handleProgress(scope.row)" v-hasPermi="['oa/erp:erpProjectPlan:edit']"></el-button>
-                        </el-tooltip>
-                        <el-tooltip content="计划变更" placement="top" v-if="scope.row.projectPlanStatus === '3' || scope.row.flowStatus === 'finish'">
-                            <el-button link type="warning" icon="Operation" @click="handlePlanChange(scope.row)" v-hasPermi="['oa/erp:erpProjectChange:add']"></el-button>
-                        </el-tooltip>
-                        <el-tooltip content="审批记录" placement="top" v-if="scope.row.projectPlanStatus === '2' || scope.row.projectPlanStatus === '3'">
-                            <el-button link type="info" icon="View" @click="handleApprovalRecord(scope.row)"></el-button>
-                        </el-tooltip>
-                        <el-tooltip content="甘特图" placement="top" v-if="scope.row.projectPlanId">
-                            <el-button link type="primary" icon="Histogram" @click="handleGantt(scope.row)"></el-button>
-                        </el-tooltip>
-                    </template>
-                </el-table-column>
-            </el-table>
+      <el-table v-loading="loading" border :data="erpProjectPlanList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="序号" type="index" width="50" align="center" v-if="columns[0].visible" />
+        <el-table-column label="项目计划编号" align="center" prop="projectPlanCode" width="200" v-if="columns[1].visible" />
+        <el-table-column label="项目名称" align="center" prop="projectName" width="200" v-if="columns[2].visible" />
+        <el-table-column label="项目经理" align="center" prop="managerName" v-if="columns[3].visible" />
+        <el-table-column label="部门负责人" align="center" prop="chargeName" v-if="columns[4].visible" />
+        <el-table-column label="付款方式" align="center" prop="paymentMethod" v-if="columns[5].visible" />
+        <el-table-column label="项目计划状态" align="center" prop="projectPlanStatus" v-if="columns[6].visible">
+          <template #default="scope">
+            <el-tag :type="scope.row.projectPlanStatus === '1' ? 'info' : scope.row.projectPlanStatus === '2' ? 'warning' : 'success'" size="small">
+              <dict-tag :options="project_plan_status" :value="scope.row.projectPlanStatus" />
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="流程状态" align="center" prop="flowStatus" v-if="columns[7].visible">
+          <template #default="scope">
+            <dict-tag :options="wf_business_status" :value="scope.row.flowStatus" />
+          </template>
+        </el-table-column>
+        <el-table-column label="合同名称" align="center" prop="contractName" width="200" v-if="columns[8].visible" />
+        <el-table-column label="排序号" align="center" prop="sortOrder" v-if="columns[9].visible" />
+        <el-table-column label="备注" align="center" prop="remark" v-if="columns[10].visible" />
+        <el-table-column label="激活标识" align="center" prop="activeFlag" v-if="columns[11].visible">
+          <template #default="scope">
+            <dict-tag :options="active_flag" :value="scope.row.activeFlag" />
+          </template>
+        </el-table-column>
+        <el-table-column label="创建人" align="center" prop="createName" v-if="columns[12].visible" />
+        <el-table-column label="创建时间" align="center" prop="createTime" width="180" v-if="columns[13].visible">
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="200" fixed="right" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="查看" placement="top" v-if="scope.row.projectPlanStatus !== '1'">
+              <el-button
+                link
+                type="primary"
+                icon="DocumentChecked"
+                @click="handleView(scope.row)"
+                v-hasPermi="['oa/erp:erpProjectPlan:query']"
+              ></el-button>
+            </el-tooltip>
+            <el-tooltip content="修改" placement="top" v-if="scope.row.projectPlanStatus === '1'">
+              <el-button link type="success" icon="Edit" @click="handleEdit(scope.row)" v-hasPermi="['oa/erp:erpProjectPlan:edit']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="维护进度" placement="top" v-if="scope.row.projectPlanStatus === '3' || scope.row.flowStatus === 'finish'">
+              <el-button
+                link
+                type="warning"
+                icon="EditPen"
+                @click="handleProgress(scope.row)"
+                v-hasPermi="['oa/erp:erpProjectPlan:edit']"
+              ></el-button>
+            </el-tooltip>
+            <el-tooltip content="计划变更" placement="top" v-if="scope.row.projectPlanStatus === '3' || scope.row.flowStatus === 'finish'">
+              <el-button
+                link
+                type="danger"
+                icon="Operation"
+                @click="handlePlanChange(scope.row)"
+                v-hasPermi="['oa/erp:erpProjectChange:add']"
+              ></el-button>
+            </el-tooltip>
+            <el-tooltip content="审批记录" placement="top" v-if="scope.row.projectPlanStatus === '2' || scope.row.projectPlanStatus === '3'">
+              <el-button link type="info" icon="View" @click="handleApprovalRecord(scope.row)"></el-button>
+            </el-tooltip>
+            <el-tooltip content="甘特图" placement="top" v-if="scope.row.projectPlanId">
+              <el-button link type="success" icon="Histogram" @click="handleGantt(scope.row)"></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
 
-            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
-        </el-card>
-        <!-- 审批记录 -->
-        <ApprovalRecord ref="approvalRecordRef" />
-        <!-- 添加或修改项目计划对话框 -->
-        <el-dialog :title="dialog.title" v-model="dialog.visible" width="800px" append-to-body>
-            <el-form ref="erpProjectPlanFormRef" :model="form" :rules="rules" label-width="120px">
-                <el-row :gutter="20">
-                    <el-col :span="12">
-                        <el-form-item label="项目名称" prop="projectId">
-                            <el-select v-model="form.projectId" placeholder="请选择项目" filterable @change="handleProjectChangeInDialog">
-                                <el-option v-for="item in projectInfoList" :key="item.projectId" :label="item.projectName" :value="item.projectId"/>
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="项目经理" prop="managerId">
-                            <el-select v-model="form.managerId" placeholder="请选择项目经理" filterable disabled>
-                                <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId"/>
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="部门负责人" prop="chargeId">
-                            <el-select v-model="form.chargeId" placeholder="请选择部门负责人" filterable disabled>
-                                <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId"/>
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="合同" prop="contractId">
-                            <el-select v-model="form.contractId" placeholder="请选择合同" filterable clearable>
-                                <el-option v-for="item in contractInfoList" :key="item.contractId" :label="item.contractName" :value="item.contractId"/>
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="付款方式" prop="paymentMethod">
-                            <el-input v-model="form.paymentMethod" placeholder="（如：3-3-3-1）" />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="项目计划状态" prop="projectPlanStatus">
-                            <el-select v-model="form.projectPlanStatus" placeholder="请选择项目计划状态">
-                                <el-option v-for="dict in project_plan_status" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="排序号" prop="sortOrder">
-                            <el-input v-model="form.sortOrder" placeholder="请输入排序号" />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="激活标识" prop="activeFlag">
-                            <el-radio-group v-model="form.activeFlag">
-                                <el-radio v-for="dict in active_flag" :key="dict.value" :value="dict.value">{{dict.label}}</el-radio>
-                            </el-radio-group>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="24">
-                        <el-form-item label="备注" prop="remark">
-                            <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <div class="dialog-footer">
-                    <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
-                    <el-button @click="cancel">取 消</el-button>
-                </div>
-            </template>
-        </el-dialog>
-    </div>
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-card>
+    <!-- 审批记录 -->
+    <ApprovalRecord ref="approvalRecordRef" />
+    <!-- 添加或修改项目计划对话框 -->
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="800px" append-to-body>
+      <el-form ref="erpProjectPlanFormRef" :model="form" :rules="rules" label-width="120px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="项目名称" prop="projectId">
+              <el-select v-model="form.projectId" placeholder="请选择项目" filterable @change="handleProjectChangeInDialog">
+                <el-option v-for="item in projectInfoList" :key="item.projectId" :label="item.projectName" :value="item.projectId" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="项目经理" prop="managerId">
+              <el-select v-model="form.managerId" placeholder="请选择项目经理" filterable disabled>
+                <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="部门负责人" prop="chargeId">
+              <el-select v-model="form.chargeId" placeholder="请选择部门负责人" filterable disabled>
+                <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="合同" prop="contractId">
+              <el-select v-model="form.contractId" placeholder="请选择合同" filterable clearable>
+                <el-option v-for="item in contractInfoList" :key="item.contractId" :label="item.contractName" :value="item.contractId" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="付款方式" prop="paymentMethod">
+              <el-input v-model="form.paymentMethod" placeholder="（如：3-3-3-1）" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="项目计划状态" prop="projectPlanStatus">
+              <el-select v-model="form.projectPlanStatus" placeholder="请选择项目计划状态">
+                <el-option v-for="dict in project_plan_status" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="排序号" prop="sortOrder">
+              <el-input v-model="form.sortOrder" placeholder="请输入排序号" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="激活标识" prop="activeFlag">
+              <el-radio-group v-model="form.activeFlag">
+                <el-radio v-for="dict in active_flag" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script setup name="ErpProjectPlan" lang="ts">
-    import { listErpProjectPlan, getErpProjectPlan, delErpProjectPlan, addErpProjectPlan, updateErpProjectPlan } from '@/api/oa/erp/erpProjectPlan';
-    import { ErpProjectPlanVO, ErpProjectPlanQuery, ErpProjectPlanForm } from '@/api/oa/erp/erpProjectPlan/types';
-    import { listUser } from '@/api/system/user';
-    import { getErpProjectInfoList } from '@/api/oa/erp/projectInfo';
-    import { getErpContractInfoList } from '@/api/oa/erp/contractInfo';
-    import { onActivated } from 'vue';
-    import { useRouter } from 'vue-router';
-    import ApprovalRecord from '@/components/Process/approvalRecord.vue';
+import { addErpProjectPlan, delErpProjectPlan, getErpProjectPlan, listErpProjectPlan, updateErpProjectPlan } from '@/api/oa/erp/erpProjectPlan';
+import { ErpProjectPlanForm, ErpProjectPlanQuery, ErpProjectPlanVO } from '@/api/oa/erp/erpProjectPlan/types';
+import { listUser } from '@/api/system/user';
+import { getErpProjectInfoList } from '@/api/oa/erp/projectInfo';
+import { getErpContractInfoList } from '@/api/oa/erp/contractInfo';
+import { onActivated } from 'vue';
+import { useRouter } from 'vue-router';
+import ApprovalRecord from '@/components/Process/approvalRecord.vue';
 
-    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-    const router = useRouter();
-        const { active_flag, project_plan_status , project_phases, collection_stage} = toRefs<any>(proxy?.useDict('active_flag', 'project_plan_status', 'project_phases', 'collection_stage'));
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const router = useRouter();
+const { active_flag, project_plan_status, project_phases, collection_stage, wf_business_status } = toRefs<any>(
+  proxy?.useDict('active_flag', 'project_plan_status', 'project_phases', 'collection_stage', 'wf_business_status')
+);
 
-    const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
-    const refreshFlagKey = 'erpProjectPlanListShouldRefresh';
+const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
+const refreshFlagKey = 'erpProjectPlanListShouldRefresh';
 
-    const erpProjectPlanList = ref<ErpProjectPlanVO[]>([]);
-    const projectInfoList = ref<any[]>([]);
-    const userList = ref<any[]>([]);
-    const contractInfoList = ref<any[]>([]);
-    const buttonLoading = ref(false);
-    const loading = ref(true);
-    const showSearch = ref(true);
-    const ids = ref<Array<string | number>>([]);
-    const single = ref(true);
-    const multiple = ref(true);
-    const total = ref(0);
+const erpProjectPlanList = ref<ErpProjectPlanVO[]>([]);
+const projectInfoList = ref<any[]>([]);
+const userList = ref<any[]>([]);
+const contractInfoList = ref<any[]>([]);
+const buttonLoading = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<string | number>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
 
-    const queryFormRef = ref<ElFormInstance>();
-    const erpProjectPlanFormRef = ref<ElFormInstance>();
+const queryFormRef = ref<ElFormInstance>();
+const erpProjectPlanFormRef = ref<ElFormInstance>();
 
-    const dialog = reactive<DialogOption>({
-        visible: false,
-        title: ''
-    });
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
 
-    // 列显隐信息
-    const columns = ref<FieldOption[]>([
-            { key: 0, label: `项目计划ID`, visible: false },
-            { key: 1, label: `租户编号`, visible: false },
-            { key: 2, label: `项目名称`, visible: true },
-            { key: 3, label: `项目经理`, visible: true },
-            { key: 4, label: `部门负责人`, visible: true },
-            { key: 5, label: `付款方式`, visible: true },
-            { key: 6, label: `项目计划状态`, visible: true },
-            { key: 7, label: `流程状态`, visible: false },
-            { key: 8, label: `合同名称`, visible: true },
-            { key: 9, label: `排序号`, visible: false },
-            { key: 10, label: `备注`, visible: false },
-            { key: 11, label: `激活标识`, visible: false },
-            { key: 12, label: `创建人`, visible: true },
-            { key: 13, label: `创建时间`, visible: true },
-    ]);
+// 列显隐信息
+const columns = ref<FieldOption[]>([
+  { key: 0, label: `序号`, visible: true },
+  { key: 1, label: `项目计划编号`, visible: true },
+  { key: 2, label: `项目名称`, visible: true },
+  { key: 3, label: `项目经理`, visible: true },
+  { key: 4, label: `部门负责人`, visible: true },
+  { key: 5, label: `付款方式`, visible: true },
+  { key: 6, label: `项目计划状态`, visible: true },
+  { key: 7, label: `流程状态`, visible: false },
+  { key: 8, label: `合同名称`, visible: true },
+  { key: 9, label: `排序号`, visible: false },
+  { key: 10, label: `备注`, visible: false },
+  { key: 11, label: `激活标识`, visible: false },
+  { key: 12, label: `创建人`, visible: true },
+  { key: 13, label: `创建时间`, visible: true }
+]);
 
-    const initFormData: ErpProjectPlanForm = {
-                        projectPlanId: undefined,
-                        projectId: undefined,
-                        managerId: undefined,
-                        chargeId: undefined,
-                        paymentMethod: undefined,
-                        projectPlanStatus: undefined,
-                        flowStatus: undefined,
-                        sortOrder: undefined,
-                        contractId: undefined,
-                        remark: undefined,
-                        activeFlag: undefined,
-      createName: undefined,
+const initFormData: ErpProjectPlanForm = {
+  projectPlanId: undefined,
+  projectId: undefined,
+  managerId: undefined,
+  chargeId: undefined,
+  paymentMethod: undefined,
+  projectPlanStatus: undefined,
+  flowStatus: undefined,
+  sortOrder: undefined,
+  contractId: undefined,
+  remark: undefined,
+  activeFlag: undefined,
+  createName: undefined
+};
+const data = reactive<PageData<ErpProjectPlanForm, ErpProjectPlanQuery>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    projectId: undefined,
+    projectPlanCode: undefined,
+    managerId: undefined,
+    chargeId: undefined,
+    paymentMethod: undefined,
+    projectPlanStatus: undefined,
+    flowStatus: undefined,
+    sortOrder: undefined,
+    contractId: undefined,
+    activeFlag: undefined,
+    createName: undefined,
+    params: {}
+  },
+  rules: {
+    projectPlanId: [{ required: true, message: '项目计划ID不能为空', trigger: 'blur' }]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询项目计划列表 */
+const getList = async () => {
+  loading.value = true;
+  const res = await listErpProjectPlan(queryParams.value);
+  erpProjectPlanList.value = res.rows;
+  total.value = res.total;
+  loading.value = false;
+};
+
+/** 检查是否需要刷新列表 */
+const checkShouldRefresh = () => {
+  const flag = sessionStorage.getItem(refreshFlagKey);
+  if (flag) {
+    sessionStorage.removeItem(refreshFlagKey);
+    handleQuery();
+  }
+};
+
+/** 获取项目列表 */
+const getProjectInfoList = async () => {
+  const res = await getErpProjectInfoList({});
+  projectInfoList.value = res.data;
+};
+
+/** 获取用户列表 */
+const getUserList = async () => {
+  const res = await listUser({ pageNum: 1, pageSize: 9999 });
+  userList.value = res.rows;
+};
+
+/** 获取合同列表 */
+const getContractInfoList = async () => {
+  const res = await getErpContractInfoList({});
+  contractInfoList.value = res.data;
+};
+
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  dialog.visible = false;
+};
+
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData };
+  erpProjectPlanFormRef.value?.resetFields();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: ErpProjectPlanVO[]) => {
+  ids.value = selection.map((item) => item.projectPlanId);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+
+/** 对话框中处理项目选择变化，自动填充项目经理和部门负责人 */
+const handleProjectChangeInDialog = (projectId: number) => {
+  if (!projectId) {
+    form.value.managerId = undefined;
+    form.value.chargeId = undefined;
+    return;
+  }
+  const project = projectInfoList.value.find((p) => p.projectId === projectId);
+  if (project) {
+    form.value.managerId = project.managerId;
+    form.value.chargeId = project.chargeId;
+  }
+};
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  router.push('/oa/erp/erpProjectPlan/edit/0');
+};
+
+/** 查看按钮操作 */
+const handleView = (row: ErpProjectPlanVO) => {
+  router.push(`/oa/erp/erpProjectPlan/view/${row.projectPlanId}?type=view`);
+};
+
+/** 编辑按钮操作 */
+const handleEdit = (row: ErpProjectPlanVO) => {
+  router.push(`/oa/erp/erpProjectPlan/edit/${row.projectPlanId}?type=edit`);
+};
+
+/** 审批完成后维护延期与进度 */
+const handleProgress = (row: ErpProjectPlanVO) => {
+  router.push(`/oa/erp/erpProjectPlan/edit/${row.projectPlanId}?type=edit`);
+};
+
+// 查看审批记录
+const handleApprovalRecord = (row: ErpProjectPlanVO) => {
+  approvalRecordRef.value?.init(row.projectPlanId);
+};
+
+/** 项目计划变更按钮操作 */
+const handlePlanChange = (row: ErpProjectPlanVO) => {
+  // 跳转到项目变更编辑页面，传递项目 ID
+  router.push(`/oa/erp/erpProjectChange/edit/0?projectId=${row.projectId}`);
+};
+
+/** 甘特图按钮 */
+const handleGantt = (row: ErpProjectPlanVO) => {
+  if (!row.projectPlanId) {
+    proxy?.$modal.msgWarning('请先保存项目计划信息');
+    return;
+  }
+  router.push(`/oa/erp/erpProjectPlan/gantt/${row.projectPlanId}`);
+};
+
+/** 修改按钮操作（保留用于对话框形式） */
+const handleUpdate = async (row?: ErpProjectPlanVO) => {
+  reset();
+  const _projectPlanId = row?.projectPlanId || ids.value[0];
+  const res = await getErpProjectPlan(_projectPlanId);
+  Object.assign(form.value, res.data);
+  dialog.visible = true;
+  dialog.title = '修改项目计划';
+};
+
+/** 提交按钮 */
+const submitForm = () => {
+  erpProjectPlanFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      if (form.value.projectPlanId) {
+        await updateErpProjectPlan(form.value).finally(() => (buttonLoading.value = false));
+      } else {
+        await addErpProjectPlan(form.value).finally(() => (buttonLoading.value = false));
+      }
+      proxy?.$modal.msgSuccess('操作成功');
+      dialog.visible = false;
+      await getList();
     }
-    const data = reactive<PageData<ErpProjectPlanForm, ErpProjectPlanQuery>>({
-        form: {...initFormData},
-        queryParams: {
-            pageNum: 1,
-            pageSize: 10,
-                            projectId: undefined,
-                            managerId: undefined,
-                            chargeId: undefined,
-                            paymentMethod: undefined,
-                            projectPlanStatus: undefined,
-                            flowStatus: undefined,
-                            sortOrder: undefined,
-                            contractId: undefined,
-                            activeFlag: undefined,
-          createName: undefined,
-            params: {
-            }
-        },
-        rules: {
-                            projectPlanId: [
-                            { required: true, message: "项目计划ID不能为空", trigger: "blur" }
-                        ],
-        }
-    });
+  });
+};
 
-    const { queryParams, form, rules } = toRefs(data);
+/** 删除按钮操作 */
+const handleDelete = async (row?: ErpProjectPlanVO) => {
+  const _projectPlanIds = row?.projectPlanId || ids.value;
+  await proxy?.$modal.confirm('是否确认删除项目计划编号为"' + _projectPlanIds + '"的数据项？').finally(() => (loading.value = false));
+  await delErpProjectPlan(_projectPlanIds);
+  proxy?.$modal.msgSuccess('删除成功');
+  await getList();
+};
 
-    /** 查询项目计划列表 */
-    const getList = async () => {
-        loading.value = true;
-        const res = await listErpProjectPlan(queryParams.value);
-            erpProjectPlanList.value = res.rows;
-        total.value = res.total;
-        loading.value = false;
-    }
+/** 导出按钮操作 */
+const handleExport = () => {
+  proxy?.download(
+    'oa/erp/erpProjectPlan/export',
+    {
+      ...queryParams.value
+    },
+    `erpProjectPlan_${new Date().getTime()}.xlsx`
+  );
+};
 
-    /** 检查是否需要刷新列表 */
-    const checkShouldRefresh = () => {
-        const flag = sessionStorage.getItem(refreshFlagKey);
-        if (flag) {
-            sessionStorage.removeItem(refreshFlagKey);
-            handleQuery();
-        }
-    }
+onMounted(() => {
+  getList();
+  getProjectInfoList();
+  getUserList();
+  getContractInfoList();
+  checkShouldRefresh();
+});
 
-    /** 获取项目列表 */
-    const getProjectInfoList = async () => {
-        const res = await getErpProjectInfoList({});
-        projectInfoList.value = res.data;
-    }
-
-    /** 获取用户列表 */
-    const getUserList = async () => {
-        const res = await listUser({ pageNum: 1, pageSize: 9999 });
-        userList.value = res.rows;
-    }
-
-    /** 获取合同列表 */
-    const getContractInfoList = async () => {
-        const res = await getErpContractInfoList({});
-        contractInfoList.value = res.data;
-    }
-
-    /** 取消按钮 */
-    const cancel = () => {
-        reset();
-        dialog.visible = false;
-    }
-
-    /** 表单重置 */
-    const reset = () => {
-        form.value = {...initFormData};
-            erpProjectPlanFormRef.value?.resetFields();
-    }
-
-    /** 搜索按钮操作 */
-    const handleQuery = () => {
-        queryParams.value.pageNum = 1;
-        getList();
-    }
-
-    /** 重置按钮操作 */
-    const resetQuery = () => {
-        queryFormRef.value?.resetFields();
-        handleQuery();
-    }
-
-    /** 多选框选中数据 */
-    const handleSelectionChange = (selection: ErpProjectPlanVO[]) => {
-        ids.value = selection.map(item => item.projectPlanId);
-        single.value = selection.length != 1;
-        multiple.value = !selection.length;
-    }
-
-    /** 对话框中处理项目选择变化，自动填充项目经理和部门负责人 */
-    const handleProjectChangeInDialog = (projectId: number) => {
-        if (!projectId) {
-            form.value.managerId = undefined;
-            form.value.chargeId = undefined;
-            return;
-        }
-        const project = projectInfoList.value.find(p => p.projectId === projectId);
-        if (project) {
-            form.value.managerId = project.managerId;
-            form.value.chargeId = project.chargeId;
-        }
-    }
-
-    /** 新增按钮操作 */
-    const handleAdd = () => {
-        router.push('/oa/erp/erpProjectPlan/edit/0');
-    }
-
-    /** 查看按钮操作 */
-    const handleView = (row: ErpProjectPlanVO) => {
-        router.push(`/oa/erp/erpProjectPlan/view/${row.projectPlanId}?type=view`);
-    }
-
-    /** 编辑按钮操作 */
-    const handleEdit = (row: ErpProjectPlanVO) => {
-        router.push(`/oa/erp/erpProjectPlan/edit/${row.projectPlanId}?type=edit`);
-    }
-
-    /** 审批完成后维护延期与进度 */
-    const handleProgress = (row: ErpProjectPlanVO) => {
-        router.push(`/oa/erp/erpProjectPlan/edit/${row.projectPlanId}?type=edit`);
-    }
-
-    // 查看审批记录
-    const handleApprovalRecord = (row: ErpProjectPlanVO) => {
-        approvalRecordRef.value?.init(row.projectPlanId);
-    }
-
-    /** 项目计划变更按钮操作 */
-    const handlePlanChange = (row: ErpProjectPlanVO) => {
-        // 跳转到项目变更编辑页面，传递项目 ID
-        router.push(`/oa/erp/erpProjectChange/edit/0?projectId=${row.projectId}`);
-    }
-
-    /** 甘特图按钮 */
-    const handleGantt = (row: ErpProjectPlanVO) => {
-        if (!row.projectPlanId) {
-            proxy?.$modal.msgWarning('请先保存项目计划信息');
-            return;
-        }
-        router.push(`/oa/erp/erpProjectPlan/gantt/${row.projectPlanId}`);
-    }
-
-    /** 修改按钮操作（保留用于对话框形式） */
-    const handleUpdate = async (row?: ErpProjectPlanVO) => {
-        reset();
-        const _projectPlanId = row?.projectPlanId || ids.value[0]
-        const res = await getErpProjectPlan(_projectPlanId);
-        Object.assign(form.value, res.data);
-        dialog.visible = true;
-        dialog.title = "修改项目计划";
-    }
-
-    /** 提交按钮 */
-    const submitForm = () => {
-            erpProjectPlanFormRef.value?.validate(async (valid: boolean) => {
-            if (valid) {
-                buttonLoading.value = true;
-                if (form.value.projectPlanId) {
-                    await updateErpProjectPlan(form.value).finally(() =>  buttonLoading.value = false);
-                } else {
-                    await addErpProjectPlan(form.value).finally(() =>  buttonLoading.value = false);
-                }
-                proxy?.$modal.msgSuccess("操作成功");
-                dialog.visible = false;
-                await getList();
-            }
-        });
-    }
-
-    /** 删除按钮操作 */
-    const handleDelete = async (row?: ErpProjectPlanVO) => {
-        const _projectPlanIds = row?.projectPlanId || ids.value;
-        await proxy?.$modal.confirm('是否确认删除项目计划编号为"' + _projectPlanIds + '"的数据项？').finally(() => loading.value = false);
-        await delErpProjectPlan(_projectPlanIds);
-        proxy?.$modal.msgSuccess("删除成功");
-        await getList();
-    }
-
-    /** 导出按钮操作 */
-    const handleExport = () => {
-        proxy?.download('oa/erp/erpProjectPlan/export', {
-            ...queryParams.value
-        }, `erpProjectPlan_${new Date().getTime()}.xlsx`)
-    }
-
-    onMounted(() => {
-        getList();
-        getProjectInfoList();
-        getUserList();
-        getContractInfoList();
-        checkShouldRefresh();
-    });
-
-    onActivated(() => {
-        checkShouldRefresh();
-    });
+onActivated(() => {
+  checkShouldRefresh();
+});
 </script>