Vue2或Vue3中实现页面锚点滚动（结合AntDesign a-steps

核心代码

		onStepChange(current) {
			this.current = current;
			document.querySelector(`[id='${current}']`).scrollIntoView({
				behavior: "smooth", // 定义过渡动画 instant立刻跳过去 smooth平滑过渡过去
				block: "start", // 定义垂直滚动方向的对齐 start顶部（尽可能）  center中间（尽可能）  end（底部）
				inline: "center", // 定义水平滚动方向的对齐
			});
		},

AllOfIt

<template>
	<div>
		<div class='detail-main-page'>
			<div class='detail-main-header'>
				<div class='title'>
					<a-button type='link' style='color: #565758' @click='backStepView'>
						<a-icon type='arrow-left' />
						项目详情
					</a-button>
				</div>
			</div>
			<a-divider style=' background-color: #e8e8e8;' />
			<div class='detail-main-content'>
				<div class='info'>
					<div class='jib' style='height: 115px'>
						<a-row :gutter='[16,16]'>
							<a-col :span='4' style='font-weight: bold' class='bld'>项目信息</a-col>
							<a-col :span='20'>
								<a-row>
									<a-col :span='6'>
										<label for=''>项目编号:</label>
										<span style='margin-left: 20px;'>{{ this.detailData.projectNumber }}</span>
									</a-col>
									<a-col :span='6'>
										<label for=''>项目名称:</label>
										<span style='margin-left: 20px;'>{{ this.detailData.projectName }}</span>
									</a-col>
									<a-col :span='6'>
										<label for=''>建设类型:</label>
										<span style='margin-left: 20px;'>{{ this.buildTypeName }}</span>
									</a-col>
								</a-row>
							</a-col>
						</a-row>
						<a-row v-if='type == 0 && isParent == 0&&innerForm.childrenProject==1' style='margin-top:20px'>
							<a-col :span='4' class='bld'>子项目列表</a-col>
							<a-col :span='20'>
								<a-row>
									<a-col class='bod' :span='6' v-for='item in innerForm.subProject' :key='item.id'
												 @click='changeParentAndChild(item,1)'>{{ item.projectName }}
									</a-col>
								</a-row>
							</a-col>
						</a-row>
					</div>
					<div class='node-add-box'>
						<span class='node-add-btn' @click='showAddModal'>
							新增时间轴
						</span>
					</div>
				</div>
				<!-- 新增时间轴组件 -->
				<AddNode ref='addNodeRef' />
				<!-- 新增时间轴组件-->
 
				<div style='display: flex;'>
					<div class='content-left' v-if='type == 0'>
						<template v-if='isParent == 0'>
							<div v-for='(item, index) in this.nodeData' :key='index'>
								<!-- 1. 计划申请-->
								<div class='detail-step' :id='index' v-if="item.name === '计划申请'">
									<div class='step-header'>
										<span class='title'>计划申请</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														项目名称：
													</a-col>
													<a-col :span='16'>
														<div :title='detailData.projectName'>
															{{ detailData.projectName }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														项目负责人：
													</a-col>
													<a-col :span='16'>
														<div :title='item.projectLeader'>
															{{ item.projectLeader }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														项目年份：
													</a-col>
													<a-col :span='16'>
														<div :title='item.projectYear'>
															{{ item.projectYear }}{{ item.projectYear === null ? '' : '年' }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														申请日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.planApplyDate'>
															{{ item.planApplyDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														项目预算：
													</a-col>
													<a-col :span='16'>
														<div :title='item.projectBudget'>
															{{ item.projectBudget }} {{ item.projectBudget === null ? '' : '￥' }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														建设内容：
													</a-col>
													<a-col :span='16'>
														<div :title='innerForm.projectContent' style='width: 660px !important;'>
															{{ innerForm.projectContent }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
 
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.planApplyAttachmentIds' :key='item.id'
																				type='link'
																				style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
								<!-- 2. 计划审批-->
								<div class='detail-step' :id='index' v-else-if="item.name === '计划审批'">
									<div class='step-header'>
										<span class='title'>计划审批</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														审批详情:
													</a-col>
													<a-col :span='16'>
														<div :title='item.planApprovalContent'>
															{{ item.planApprovalContent }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														审批日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.planApprovalDate'>
															{{ item.planApprovalDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
 
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.planApprovalAttachmentIds' :key='item.id'
																				type='link'
																				style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
								<!-- 3. 项目建议书请示-->
								<div class='detail-step' :id='index' v-else-if="item.name === '项目建议书请示'">
									<div class='step-header'>
										<span class='title'>项目建议书请示</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														请示文号：
													</a-col>
													<a-col :span='16'>
														<div :title='item.requestNumber'>
															{{ item.requestNumber }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														请示日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.requestDate'>
															{{ item.requestDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.requestAttachmentIds' :key='item.id' type='link'
																				style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
								<!-- 4. 项目建议书批复 --->
								<div class='detail-step' :id='index' v-else-if="item.name === '项目建议书批复'">
									<div class='step-header'>
										<span class='title'>项目建议书批复</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														审批日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.requestApprovalDate'>
															{{ item.requestApprovalDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														批复文号：
													</a-col>
													<a-col :span='16'>
														<div :title='item.requestApprovalNumber'>
															{{ item.requestApprovalNumber }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.requestApprovalAttachmentIds' :key='item.id'
																				type='link'
																				style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
 
								</div>
								<!-- 5. 可行性研究报告请示 -->
								<div class='detail-step' :id='index' v-else-if="item.name === '可行性研究报告请示'">
									<div class='step-header'>
										<span class='title'>可行性研究报告请示</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														请示文号：
													</a-col>
													<a-col :span='16'>
														<div :title='item.studyNumber'>
															{{ item.studyNumber }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														请示日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.studyDate'>
															{{ item.studyDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.studyAttachmentIds' :key='item.id'
																				type='link' style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
								<!-- 6. 可行性研究报告批复 -->
								<div class='detail-step' :id='index' v-else-if="item.name === '可行性研究报告批复'">
									<div class='step-header'>
										<span class='title'>可行性研究报告批复</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														审批日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.studyApprovalDate'>
															{{ item.studyApprovalDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														批复文号：
													</a-col>
													<a-col :span='16'>
														<div :title='item.studyApprovalNumber'>
															{{ item.studyApprovalNumber }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
 
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.studyApprovalAttachmentIds' :key='index'
																				type='link' style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
								<!-- 7. 初步设计方案及概算请示-->
								<div class='detail-step' :id='index' v-else-if="item.name === '初步设计方案及概算请示'">
									<div class='step-header'>
										<span class='title'>初步设计方案及概算请示</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														请示文号：
													</a-col>
													<a-col :span='16'>
														<div :title='item.designNumber'>
															{{ item.designNumber }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														请示日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.designDate'>
															{{ item.designDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
 
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.designAttachmentIds' :key='index'
																				type='link' style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
								<!-- 8. 初步设计方案及概算批复-->
								<div class='detail-step' :id='index' v-else-if="item.name === '初步设计方案及概算批复'">
									<div class='step-header'>
										<span class='title'>初步设计方案及概算批复</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														审批日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.designApprovalDate'>
															{{ item.designApprovalDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														批复文号：
													</a-col>
													<a-col :span='16'>
														<div :title='item.designApprovalNumber'>
															{{ item.designApprovalNumber }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														概算金额：
													</a-col>
													<a-col :span='16'>
														<div :title='item.ndrcBudgetary'>
															{{ item.ndrcBudgetary }}{{ item.ndrcBudgetary === null ? '' : '￥' }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
 
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in innerForm.designApprovalAttachmentIds' :key='item.id'
																				type='link'
																				style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
								<!--  党委会审批-->
								<div class='detail-step' :id='index' style='height: 380px;' v-else-if="item.name === '党委会审批'">
									<div class='step-header'>
										<span class='title'>党委会审批</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														审批日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.partyApprovalDate'>
															{{ item.partyApprovalDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														项目文号：
													</a-col>
													<a-col :span='16'>
														<div :title='item.partyApprovalNumber'>
															{{ item.partyApprovalNumber }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
 
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.partyAttachmentIds' :key='item.id'
																				type='link' style='color: #1890ff; font-size: 13px;'
																				@click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
								<!--  立项申请-->
								<div class='detail-step' :id='index' style='height: 380px;' v-else-if="item.name === '立项申请'">
									<div class='step-header'>
										<span class='title'>立项申请</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														申请日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.approvalDate'>
															{{ item.approvalDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														申请备注：
													</a-col>
													<a-col :span='16'>
														<div :title='item.approvalContent'>
															{{ item.approvalContent }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
 
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.confirmAttachmentIds' :key='item.id'
																				type='link' style='color: #1890ff; font-size: 13px;'
																				@click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
								<!--  方案论证-->
								<div class='detail-step' :id='index' style='height: 380px;' v-else-if="item.name === '方案论证'">
									<div class='step-header'>
										<span class='title'>方案论证</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														论证日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.planDate'>
															{{ item.planDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														采购方式：
													</a-col>
													<a-col :span='16'>
														<div :title='item.planType'>
															{{ item.planType == 0 ? '集中' : '分散' }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
 
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.planAttachmentIds' :key='item.id'
																				type='link' style='color: #1890ff; font-size: 13px;'
																				@click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
								<!--  招标控制价评审-->
								<div class='detail-step' :id='index' style='height: 380px;' v-else-if="item.name === '招标控制价评审'">
									<div class='step-header'>
										<span class='title'>招标控制价评审</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														评审日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.tendersDate'>
															{{ item.tendersDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														招标控制价：
													</a-col>
													<a-col :span='16'>
														<div :title='item.tendersPrice'>
															{{ item.tendersPrice }}￥
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														文号：
													</a-col>
													<a-col :span='16'>
														<div :title='item.tendersNumber'>
															{{ item.tendersNumber }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														评审公司名称：
													</a-col>
													<a-col :span='16'>
														<div :title='item.tendersCompany'>
															{{ item.tendersCompany }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
 
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.tenderControlAttachmentIds' :key='item.id'
																				type='link' style='color: #1890ff; font-size: 13px;'
																				@click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
								<!--  招标文件评审-->
								<div class='detail-step' :id='index' style='height: 380px;' v-else-if="item.name === '招标文件评审'">
									<div class='step-header'>
										<span class='title'>招标文件评审</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														评审日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.tendersFileDate'>
															{{ item.tendersFileDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														招标文件制作单位：
													</a-col>
													<a-col :span='16'>
														<div :title='item.tendersFileCompany'>
															{{ item.tendersFileCompany }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
 
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.tenderFileAttachmentIds' :key='index'
																				type='link' style='color: #1890ff; font-size: 13px;'
																				@click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
								<!--  招标采购-->
								<div class='detail-step' :id='index' style='height: 380px;' v-else-if="item.name === '招标采购'">
									<div class='step-header'>
										<span class='title'>招标采购</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														挂网日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.procureDate'>
															{{ item.procureDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														开标日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.procureContractDate'>
															{{ item.procureContractDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														中标价：
													</a-col>
													<a-col :span='16'>
														<div :title='item.procurePrice'>
															{{ item.procurePrice }}￥
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														中标公司名称：
													</a-col>
													<a-col :span='16'>
														<div :title='item.procureCompany'>
															{{ item.procureCompany }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														合同签订日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.procureContractSignDate'>
															{{ item.procureContractSignDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														合同结束日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.procureContractEndDate'>
															{{ item.procureContractEndDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
 
										</a-row>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-form-model-item label='付款计划' prop='rate'>
													<a-table
														style='width: 60%'
														:columns='payColumns2'
														:pagination='false'
														:data-source='item.paymentSchedules'
														:bordered='false'
														:rowKey='(record,index) => {return index}'
														size='small'>
													</a-table>
												</a-form-model-item>
											</a-col>
										</a-row>
 
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.tenderProcurementAttachmentIds'
																				:key='index'
																				type='link' style='color: #1890ff; font-size: 13px;'
																				@click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
								<!--  开工-->
								<div class='detail-step' :id='index' style='height: 380px;' v-else-if="item.name === '开工'">
									<div class='step-header'>
										<span class='title'>开工</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														开工日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.startDate'>
															{{ item.startDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														开工详情：
													</a-col>
													<a-col :span='16'>
														<div :title='item.startContent'>
															{{ item.startContent }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
 
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.startAttachmentIds' :key='index'
																				type='link' style='color: #1890ff; font-size: 13px;'
																				@click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
								<!--  初验-->
								<div class='detail-step' :id='index' style='height: 380px;' v-else-if="item.name === '初验'">
									<div class='step-header'>
										<span class='title'>初验</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														初验日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.primitiveCheckDate'>
															{{ item.primitiveCheckDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														初验详情：
													</a-col>
													<a-col :span='16'>
														<div :title='item.primitiveCheckContent'>
															{{ item.primitiveCheckContent }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
 
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.primitiveCheckAttachmentIds' :key='index'
																				type='link' style='color: #1890ff; font-size: 13px;'
																				@click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
								<!--  终验-->
								<div class='detail-step' :id='index' style='height: 380px;' v-else-if="item.name === '终验'">
									<div class='step-header'>
										<span class='title'>终验</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														终验日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.finalCheckDate'>
															{{ item.finalCheckDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														终验详情：
													</a-col>
													<a-col :span='16'>
														<div :title='item.finalCheckContent'>
															{{ item.finalCheckContent }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
 
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.finalCheckAttachmentIds' :key='index'
																				type='link' style='color: #1890ff; font-size: 13px;'
																				@click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
								<!--  决算审计-->
								<div class='detail-step' :id='index' style='height: 380px;' v-else-if="item.name === '决算审计'">
									<div class='step-header'>
										<span class='title'>决算审计</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														审计日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.finalAccountsDate'>
															{{ item.finalAccountsDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														审计详情：
													</a-col>
													<a-col :span='16'>
														<div :title='item.finalAccountsContent'>
															{{ item.finalAccountsContent }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
 
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.finalAccountsAttachmentIds' :key='index'
																				type='link' style='color: #1890ff; font-size: 13px;'
																				@click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
								<!-- 9. 付款-->
								<div class='detail-step' :id='index' style='height: 380px;' v-else-if="item.name === '付款'">
									<div class='step-header'>
										<span class='title'>付款</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<div class='gutter-box'>
													是否结项:
													{{
														item.paymentClosingItem === null ? ''
															: item.paymentClosingItem == 0 ? '未结项' : '已结项'
													}}
												</div>
											</a-col>
										</a-row>
 
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-form-model-item label='付款详情' prop='rate'>
													<a-table
														:columns='payColumns'
														:pagination='false'
														:data-source='item.projectsPayments'
														:bordered='false'
														:rowKey='(record,index) => {return index}'
														size='small'>
													<span slot='name' slot-scope='text, record, index'>
														付款{{ toChineseNum(index + 1) }}
													</span>
														<span slot='payTerms' slot-scope='text, record, index'>
														<span v-for='(item, index) in record.payTerms'>
															{{ item }}{{ index === (record.payTerms.length - 1) ? '' : '、' }}
														</span>
								        	</span>
														<span slot='add' slot-scope='text, record'>
                        			<a-button v-for='(item, index) in record.attachmentIds' :key='item.id' type='link'
																				style='color: #1890ff; font-size: 13px;'
																				@click='doDownload(item)'>
                        			  {{ `${item.name}.${item.extName}` }}
                        			</a-button>
													</span>
													</a-table>
												</a-form-model-item>
											</a-col>
										</a-row>
 
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														付款资料：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.payFileIds' :key='index'
																				type='link' style='color: #1890ff; font-size: 13px;'
																				@click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
								<!-- 自定义节点 -->
								<div class='detail-step' v-else :id='index'>
									<div class='step-header'>
										<span class='title' style='color: #ffa26e'>{{ item.name }}</span>
									</div>
									<div class='step-content' style='color: #ffa26e'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														事项名称：
													</a-col>
													<a-col :span='16'>
														<div :title='item.name'>
															{{ item.name }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6' style='color: #ffa26e'>
												<a-row type='flex'>
													<a-col :span='8'>
														事项时间：
													</a-col>
													<a-col :span='16'>
														<div :title='item.timing'>
															{{ item.timing }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6' style='color: #ffa26e'>
												<a-row type='flex'>
													<a-col :span='8'>
														事项内容：
													</a-col>
													<a-col :span='16'>
														<div :title='item.content'>
															{{ item.content }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
										<a-row :gutter='[16,16]' style='color: #ffa26e'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														备注：
													</a-col>
													<a-col :span='16'>
														<div :title='item.note'>
															{{ item.note }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
										<a-row :gutter='[16,16]' style='color: #ffa26e'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.attachmentVos' :key='index'
																				type='link'
																				style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
							</div>
						</template>
						<template v-else>
							<div v-for='(item, index) in this.nodeData' :key='index'>
								<div class='detail-step' :id='index' v-if="item.name === '子项目建设'">
									<div class='step-header'>
										<span class='title'>子项目建设</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														所属项目：
													</a-col>
													<a-col :span='16'>
														<div :title=' item.parentProjectName'>
															{{ item.parentProjectName }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														子项目名称：
													</a-col>
													<a-col :span='16'>
														<div :title='item.projectName'>
															{{ item.projectName }}
														</div>
													</a-col>
												</a-row>
											</a-col>
 
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														子项目负责人：
													</a-col>
													<a-col :span='16'>
														<div :title=' item.projectLeader'>
															{{ item.projectLeader }}
														</div>
													</a-col>
												</a-row>
											</a-col>
 
										</a-row>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														子项目概算金额：
													</a-col>
													<a-col :span='16'>
														<div :title=' item.projectBudget'>
															{{ item.projectBudget }}￥
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														子项目建设内容：
													</a-col>
													<a-col :span='16'>
														<div :title=' item.projectContent' style='width: 660px !important;'>
															{{ item.projectContent }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
 
									</div>
								</div>
								<!--  党委会审批-->
								<div class='detail-step' :id='index' style='height: 380px;' v-else-if="item.name === '党委会审批'">
									<div class='step-header'>
										<span class='title'>党委会审批</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														审批日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.partyApprovalDate'>
															{{ item.partyApprovalDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														项目文号：
													</a-col>
													<a-col :span='16'>
														<div :title='item.partyApprovalNumber'>
															{{ item.partyApprovalNumber }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
 
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.partyAttachmentIds' :key='index'
																				type='link' style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
								<!--  立项申请-->
								<div class='detail-step' :id='index' style='height: 380px;' v-else-if="item.name === '立项申请'">
									<div class='step-header'>
										<span class='title'>立项申请</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														申请日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.approvalDate'>
															{{ item.approvalDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														申请备注：
													</a-col>
													<a-col :span='16'>
														<div :title='item.approvalContent'>
															{{ item.approvalContent }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
 
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.confirmAttachmentIds' :key='index'
																				type='link' style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
								<!--  方案论证-->
								<div class='detail-step' :id='index' style='height: 380px; ' v-else-if="item.name === '方案论证'">
									<div class='step-header'>
										<span class='title'>方案论证</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														论证日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.planDate'>
															{{ item.planDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														采购方式：
													</a-col>
													<a-col :span='16'>
														<div :title='item.planType'>
															{{ item.planType == 0 ? '集中' : '分散' }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
 
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.planAttachmentIds' :key='index'
																				type='link' style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
								<!--  招标控制价评审-->
								<div class='detail-step' :id='index' style='height: 380px;' v-else-if="item.name === '招标控制价评审'">
									<div class='step-header'>
										<span class='title'>招标控制价评审</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														评审日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.tendersDate'>
															{{ item.tendersDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														招标控制价：
													</a-col>
													<a-col :span='16'>
														<div :title='item.tendersPrice'>
															{{ item.tendersPrice }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														文号：
													</a-col>
													<a-col :span='16'>
														<div :title='item.tendersNumber'>
															{{ item.tendersNumber }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														评审公司名称：
													</a-col>
													<a-col :span='16'>
														<div :title='item.tendersCompany'>
															{{ item.tendersCompany }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
 
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.tenderControlAttachmentIds' :key='index'
																				type='link' style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
								<!--  招标文件评审-->
								<div class='detail-step' :id='index' style='height: 380px;' v-else-if="item.name === '招标文件评审'">
									<div class='step-header'>
										<span class='title'>招标文件评审</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														评审日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.tendersFileDate'>
															{{ item.tendersFileDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														招标文件制作单位：
													</a-col>
													<a-col :span='16'>
														<div :title='item.tendersFileCompany'>
															{{ item.tendersFileCompany }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
 
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.tenderFileAttachmentIds' :key='index'
																				type='link' style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
								<div class='detail-step' :id='index' style='height: 380px;' v-else-if="item.name === '招标采购'">
									<div class='step-header'>
										<span class='title'>招标采购</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														挂网日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.procureDate'>
															{{ item.procureDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														开标日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.procureContractDate'>
															{{ item.procureContractDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														中标价：
													</a-col>
													<a-col :span='16'>
														<div :title='item.procurePrice'>
															{{ item.procurePrice }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														中标公司名称：
													</a-col>
													<a-col :span='16'>
														<div :title='item.procureCompany'>
															{{ item.procureCompany }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														合同签订日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.procureContractSignDate'>
															{{ item.procureContractSignDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														合同结束日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.procureContractEndDate'>
															{{ item.procureContractEndDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
 
										</a-row>
										<!--  TODO 子项目付款计划 -->
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-form-model-item label='付款计划' prop='rate'>
													<a-table
														style='width: 60%;'
														:columns='payColumns2'
														:pagination='false'
														:data-source='item.paymentSchedules'
														:bordered='false'
														:rowKey='(record,index) => {return index}'
														size='small'>
													</a-table>
												</a-form-model-item>
											</a-col>
										</a-row>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														付款条件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px;; display: flex; flex-direction: column'>
													<span v-for='(item, index) in item.payTerms' :key='index'>
															{{ index + 1 }}、{{ item.text }}
													</span>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.tenderProcurementAttachmentIds' :key='item.id'
																				type='link' style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
								<!--  开工-->
								<div class='detail-step' :id='index' style='height: 380px;' v-else-if="item.name === '开工'">
									<div class='step-header'>
										<span class='title'>开工</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														开工日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.startDate'>
															{{ item.startDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														开工详情：
													</a-col>
													<a-col :span='16'>
														<div :title='item.startContent'>
															{{ item.startContent }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
 
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.startAttachmentIds' :key='index'
																				type='link' style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
								<!--  初验-->
								<div class='detail-step' :id='index' style='height: 380px;' v-else-if="item.name === '初验'">
									<div class='step-header'>
										<span class='title'>初验</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														初验日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.primitiveCheckDate'>
															{{ item.primitiveCheckDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														初验详情：
													</a-col>
													<a-col :span='16'>
														<div :title='item.primitiveCheckContent'>
															{{ item.primitiveCheckContent }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
 
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.primitiveCheckAttachmentIds' :key='index'
																				type='link' style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
								<!--  终验-->
								<div class='detail-step' :id='index' style='height: 380px;' v-else-if="item.name === '终验'">
									<div class='step-header'>
										<span class='title'>终验</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														终验日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.finalCheckDate'>
															{{ item.finalCheckDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														终验详情：
													</a-col>
													<a-col :span='16'>
														<div :title='item.finalCheckContent'>
															{{ item.finalCheckContent }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
 
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.finalCheckAttachmentIds' :key='index'
																				type='link' style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
								<!--  决算审计-->
								<div class='detail-step' :id='index' style='height: 380px;' v-else-if="item.name === '决算审计'">
									<div class='step-header'>
										<span class='title'>决算审计</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														审计日期：
													</a-col>
													<a-col :span='16'>
														<div :title='item.finalAccountsDate'>
															{{ item.finalAccountsDate }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														审计详情：
													</a-col>
													<a-col :span='16'>
														<div :title='item.finalAccountsContent'>
															{{ item.finalAccountsContent }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
 
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.finalAccountsAttachmentIds' :key='index'
																				type='link' style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
								<!-- 9. 付款-->
								<div class='detail-step' :id='index' style='height: 380px;' v-else-if="item.name === '付款'">
									<div class='step-header'>
										<span class='title'>付款</span>
									</div>
									<div class='step-content'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<div class='gutter-box'>
													是否结项:
													{{
														item.paymentClosingItem === null ? ''
															: item.paymentClosingItem == 0 ? '未结项' : '已结项'
													}}
												</div>
											</a-col>
										</a-row>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-form-model-item label='付款详情' prop='rate'>
													<a-table
														:columns='payColumns'
														:pagination='false'
														:data-source='item.projectsPayments'
														:bordered='false'
														:rowKey='(record,index) => {return index}'
														size='small'>
								        <span slot='name' slot-scope='text, record, index'>
								        	付款{{ toChineseNum(index + 1) }}
								        </span>
														<span slot='payTerms' slot-scope='text, record, index'>
													<span v-for='(item, index) in record.payTerms'>
														{{ item }}{{ index === (record.payTerms.length - 1) ? '' : '、' }}
													</span>
								        </span>
														<span slot='add' slot-scope='text, record'>
                        <a-button v-for='(item, index) in record.attachmentIds' :key='item.id' type='link'
																	style='color: #1890ff; font-size: 13px;'
																	@click='doDownload(item)'>
                          {{ `${item.name}.${item.extName}` }}
                        </a-button>
								</span>
													</a-table>
												</a-form-model-item>
											</a-col>
										</a-row>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														付款资料：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in innerForm.payFileIds' :key='item.id'
																				type='link' style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
 
									</div>
								</div>
								<!-- 自定义节点 -->
								<div class='detail-step' v-else :id='index'>
									<div class='step-header'>
										<span class='title' style='color: #ffa26e'>{{ item.name }}</span>
									</div>
									<div class='step-content' style='color: #ffa26e'>
										<a-row :gutter='[16,16]'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														事项名称：
													</a-col>
													<a-col :span='16'>
														<div :title='item.name'>
															{{ item.name }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6' style='color: #ffa26e'>
												<a-row type='flex'>
													<a-col :span='8'>
														事项时间：
													</a-col>
													<a-col :span='16'>
														<div :title='item.timing'>
															{{ item.timing }}
														</div>
													</a-col>
												</a-row>
											</a-col>
											<a-col class='gutter-row' :span='6' style='color: #ffa26e'>
												<a-row type='flex'>
													<a-col :span='8'>
														事项内容：
													</a-col>
													<a-col :span='16'>
														<div :title='item.content'>
															{{ item.content }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
										<a-row :gutter='[16,16]' style='color: #ffa26e'>
											<a-col class='gutter-row' :span='6'>
												<a-row type='flex'>
													<a-col :span='8'>
														备注：
													</a-col>
													<a-col :span='16'>
														<div :title='item.note'>
															{{ item.note }}
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
										<a-row :gutter='[16,16]' style='color: #ffa26e'>
											<a-col class='gutter-row' :span='24'>
												<a-row type='flex'>
													<a-col :span='3'>
														附件：
													</a-col>
													<a-col :span='21'>
														<div style='position: relative; left: -100px; top: -5px;'>
															<a-button v-for='(item, index) in item.attachmentVos' :key='index'
																				type='link'
																				style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
																{{ `${item.name}.${item.extName}` }}
															</a-button>
														</div>
													</a-col>
												</a-row>
											</a-col>
										</a-row>
									</div>
								</div>
							</div>
						</template>
					</div>
					<div class='content-left' v-else>
						<!-- 1. 计划申请-->
						<div class='detail-step' id='step01' v-if='innerForm.planApplyDate'>
							<div class='step-header'>
								<span class='title'>计划申请</span>
							</div>
							<div class='step-content'>
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												项目名称：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.projectName'>
													{{ innerForm.projectName }}
												</div>
											</a-col>
										</a-row>
									</a-col>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												项目负责人：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.projectLeader'>
													{{ innerForm.projectLeader }}
												</div>
											</a-col>
										</a-row>
									</a-col>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												项目年份：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.projectYear'>
													{{ innerForm.projectYear }}年
												</div>
											</a-col>
										</a-row>
									</a-col>
								</a-row>
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												申请日期：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.planApplyDate'>
													{{ innerForm.planApplyDate }}
												</div>
											</a-col>
										</a-row>
									</a-col>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												项目预算：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.projectBudget'>
													{{ innerForm.projectBudget }}￥
												</div>
											</a-col>
										</a-row>
									</a-col>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												建设内容：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.projectContent' style='width: 660px !important;'>
													{{ innerForm.projectContent }}
												</div>
											</a-col>
										</a-row>
									</a-col>
								</a-row>
 
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='24'>
										<a-row type='flex'>
											<a-col :span='3'>
												附件：
											</a-col>
											<a-col :span='21'>
												<div style='position: relative; left: -100px; top: -5px;'>
													<a-button v-for='(item, index) in innerForm.planApplyAttachmentIds' :key='item.id' type='link'
																		style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
														{{ `${item.name}.${item.extName}` }}
													</a-button>
												</div>
											</a-col>
										</a-row>
									</a-col>
								</a-row>
							</div>
						</div>
						<!-- 2. 计划审批-->
						<div class='detail-step' id='step02' v-if='innerForm.planApprovalDate'>
							<div class='step-header'>
								<span class='title'>计划审批</span>
							</div>
							<div class='step-content'>
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												审批详情:
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.planApprovalContent'>
													{{ innerForm.planApprovalContent }}
												</div>
											</a-col>
										</a-row>
									</a-col>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												审批日期：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.planApprovalDate'>
													{{ innerForm.planApprovalDate }}
												</div>
											</a-col>
										</a-row>
									</a-col>
								</a-row>
 
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='24'>
										<a-row type='flex'>
											<a-col :span='3'>
												附件：
											</a-col>
											<a-col :span='21'>
												<div style='position: relative; left: -100px; top: -5px;'>
													<a-button v-for='(item, index) in innerForm.planApprovalAttachmentIds' :key='item.id'
																		type='link'
																		style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
														{{ `${item.name}.${item.extName}` }}
													</a-button>
												</div>
											</a-col>
										</a-row>
									</a-col>
								</a-row>
							</div>
						</div>
						<!--  党委会审批-->
						<div class='detail-step' id='step09' style='height: 380px;' v-if='innerForm.partyApprovalDate'>
							<div class='step-header'>
								<span class='title'>党委会审批</span>
							</div>
							<div class='step-content'>
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												审批日期：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.partyApprovalDate'>
													{{ innerForm.partyApprovalDate }}
												</div>
											</a-col>
										</a-row>
									</a-col>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												项目文号：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.partyApprovalNumber'>
													{{ innerForm.partyApprovalNumber }}
												</div>
											</a-col>
										</a-row>
									</a-col>
								</a-row>
 
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='24'>
										<a-row type='flex'>
											<a-col :span='3'>
												附件：
											</a-col>
											<a-col :span='21'>
												<div style='position: relative; left: -100px; top: -5px;'>
													<a-button v-for='(item, index) in innerForm.partyAttachmentIds' :key='item.id'
																		type='link' style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
														{{ `${item.name}.${item.extName}` }}
													</a-button>
												</div>
											</a-col>
										</a-row>
									</a-col>
								</a-row>
							</div>
						</div>
						<!--  立项申请-->
						<div class='detail-step' id='step09' style='height: 380px;' v-if='innerForm.approvalDate'>
							<div class='step-header'>
								<span class='title'>立项申请</span>
							</div>
							<div class='step-content'>
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												批复日期：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.approvalDate'>
													{{ innerForm.approvalDate }}
												</div>
											</a-col>
										</a-row>
									</a-col>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												批复详情：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.approvalContent'>
													{{ innerForm.approvalContent }}
												</div>
											</a-col>
										</a-row>
									</a-col>
								</a-row>
 
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='24'>
										<a-row type='flex'>
											<a-col :span='3'>
												附件：
											</a-col>
											<a-col :span='21'>
												<div style='position: relative; left: -100px; top: -5px;'>
													<a-button v-for='(item, index) in innerForm.confirmAttachmentIds' :key='item.id'
																		type='link' style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
														{{ `${item.name}.${item.extName}` }}
													</a-button>
												</div>
											</a-col>
										</a-row>
									</a-col>
								</a-row>
							</div>
						</div>
						<!--  方案论证-->
						<div class='detail-step' id='step09' style='height: 380px;' v-if='innerForm.planDate'>
							<div class='step-header'>
								<span class='title'>方案论证</span>
							</div>
							<div class='step-content'>
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												论证日期：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.planDate'>
													{{ innerForm.planDate }}
												</div>
											</a-col>
										</a-row>
									</a-col>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												采购方式：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.planType'>
													{{ innerForm.planType == 0 ? '集中' : '分散' }}
												</div>
											</a-col>
										</a-row>
									</a-col>
								</a-row>
 
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='24'>
										<a-row type='flex'>
											<a-col :span='3'>
												附件：
											</a-col>
											<a-col :span='21'>
												<div style='position: relative; left: -100px; top: -5px;'>
													<a-button v-for='(item, index) in innerForm.planAttachmentIds' :key='item.id'
																		type='link' style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
														{{ `${item.name}.${item.extName}` }}
													</a-button>
												</div>
											</a-col>
										</a-row>
									</a-col>
								</a-row>
							</div>
						</div>
						<!--  招标控制价评审-->
						<div class='detail-step' id='step09' style='height: 380px;' v-if='innerForm.tendersDate'>
							<div class='step-header'>
								<span class='title'>招标控制价评审</span>
							</div>
							<div class='step-content'>
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												评审日期：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.tendersDate'>
													{{ innerForm.tendersDate }}
												</div>
											</a-col>
										</a-row>
									</a-col>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												招标控制价：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.tendersPrice'>
													{{ innerForm.tendersPrice }}
												</div>
											</a-col>
										</a-row>
									</a-col>
								</a-row>
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												文号：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.tendersNumber'>
													{{ innerForm.tendersNumber }}
												</div>
											</a-col>
										</a-row>
									</a-col>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												评审公司名称：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.tendersCompany'>
													{{ innerForm.tendersCompany }}
												</div>
											</a-col>
										</a-row>
									</a-col>
								</a-row>
 
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='24'>
										<a-row type='flex'>
											<a-col :span='3'>
												附件：
											</a-col>
											<a-col :span='21'>
												<div style='position: relative; left: -100px; top: -5px;'>
													<a-button v-for='(item, index) in innerForm.tenderControlAttachmentIds' :key='item.id'
																		type='link' style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
														{{ `${item.name}.${item.extName}` }}
													</a-button>
												</div>
											</a-col>
										</a-row>
									</a-col>
								</a-row>
							</div>
						</div>
						<!--  招标文件评审-->
						<div class='detail-step' id='step09' style='height: 380px;' v-if='innerForm.tendersFileDate'>
							<div class='step-header'>
								<span class='title'>招标文件评审</span>
							</div>
							<div class='step-content'>
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												评审日期：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.tendersFileDate'>
													{{ innerForm.tendersFileDate }}
												</div>
											</a-col>
										</a-row>
									</a-col>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												招标文件制作单位：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.tendersFileCompany'>
													{{ innerForm.tendersFileCompany }}
												</div>
											</a-col>
										</a-row>
									</a-col>
								</a-row>
 
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='24'>
										<a-row type='flex'>
											<a-col :span='3'>
												附件：
											</a-col>
											<a-col :span='21'>
												<div style='position: relative; left: -100px; top: -5px;'>
													<a-button v-for='(item, index) in innerForm.tenderFileAttachmentIds' :key='item.id'
																		type='link' style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
														{{ `${item.name}.${item.extName}` }}
													</a-button>
												</div>
											</a-col>
										</a-row>
									</a-col>
								</a-row>
							</div>
						</div>
						<div class='detail-step' id='step09' style='height: 380px;' v-if='innerForm.procureContractDate'>
							<div class='step-header'>
								<span class='title'>招标采购</span>
							</div>
							<div class='step-content'>
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												招标日期：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.procureDate'>
													{{ innerForm.procureDate }}
												</div>
											</a-col>
										</a-row>
									</a-col>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												合同签订日期：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.procureContractDate'>
													{{ innerForm.procureContractDate }}
												</div>
											</a-col>
										</a-row>
									</a-col>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												合同结束日期：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.procureContractEndDate'>
													{{ innerForm.procureContractEndDate }}
												</div>
											</a-col>
										</a-row>
									</a-col>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												中标价：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.procurePrice'>
													{{ innerForm.procurePrice }}￥
												</div>
											</a-col>
										</a-row>
									</a-col>
								</a-row>
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												中标公司名称：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.procureCompany'>
													{{ innerForm.procureCompany }}
												</div>
											</a-col>
										</a-row>
									</a-col>
 
								</a-row>
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='24'>
										<a-form-model-item label='付款计划' prop='rate'>
											<a-table
												style='width: 60%'
												:columns='payColumns2'
												:pagination='false'
												:data-source='innerForm.paymentSchedules'
												:bordered='false'
												:rowKey='(record,index) => {return index}'
												size='small'>
											</a-table>
										</a-form-model-item>
									</a-col>
								</a-row>
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='24'>
										<a-row type='flex'>
											<a-col :span='3'>
												付款条件：
											</a-col>
											<a-col :span='21'>
												<div style='position: relative; left: -120px;  display: flex; flex-direction: column'>
													<span v-for='(item, index) in payTerms' :key='index'>
															{{ index + 1 }}、{{ item.text }}
													</span>
												</div>
											</a-col>
										</a-row>
									</a-col>
								</a-row>
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='24'>
										<a-row type='flex'>
											<a-col :span='3'>
												附件：
											</a-col>
											<a-col :span='21'>
												<div style='position: relative; left: -100px; top: -5px;'>
													<a-button v-for='(item, index) in innerForm.tenderProcurementAttachmentIds' :key='item.id'
																		type='link' style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
														{{ `${item.name}.${item.extName}` }}
													</a-button>
												</div>
											</a-col>
										</a-row>
									</a-col>
								</a-row>
							</div>
						</div>
						<!--  开工-->
						<div class='detail-step' id='step09' style='height: 380px;' v-if='innerForm.startDate'>
							<div class='step-header'>
								<span class='title'>开工</span>
							</div>
							<div class='step-content'>
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												开工日期：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.startDate'>
													{{ innerForm.startDate }}
												</div>
											</a-col>
										</a-row>
									</a-col>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												开工详情：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.startContent'>
													{{ innerForm.startContent }}
												</div>
											</a-col>
										</a-row>
									</a-col>
								</a-row>
 
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='24'>
										<a-row type='flex'>
											<a-col :span='3'>
												附件：
											</a-col>
											<a-col :span='21'>
												<div style='position: relative; left: -100px; top: -5px;'>
													<a-button v-for='(item, index) in innerForm.startAttachmentIds' :key='item.id'
																		type='link' style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
														{{ `${item.name}.${item.extName}` }}
													</a-button>
												</div>
											</a-col>
										</a-row>
									</a-col>
								</a-row>
							</div>
						</div>
						<!--  初验-->
						<div class='detail-step' id='step09' style='height: 380px;' v-if='innerForm.primitiveCheckDate'>
							<div class='step-header'>
								<span class='title'>初验</span>
							</div>
							<div class='step-content'>
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												初验日期：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.primitiveCheckDate'>
													{{ innerForm.primitiveCheckDate }}
												</div>
											</a-col>
										</a-row>
									</a-col>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												初验详情：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.primitiveCheckContent'>
													{{ innerForm.primitiveCheckContent }}
												</div>
											</a-col>
										</a-row>
									</a-col>
								</a-row>
 
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='24'>
										<a-row type='flex'>
											<a-col :span='3'>
												附件：
											</a-col>
											<a-col :span='21'>
												<div style='position: relative; left: -100px; top: -5px;'>
													<a-button v-for='(item, index) in innerForm.primitiveCheckAttachmentIds' :key='item.id'
																		type='link' style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
														{{ `${item.name}.${item.extName}` }}
													</a-button>
												</div>
											</a-col>
										</a-row>
									</a-col>
								</a-row>
							</div>
						</div>
						<!--  终验-->
						<div class='detail-step' id='step09' style='height: 380px;' v-if='innerForm.finalCheckDate'>
							<div class='step-header'>
								<span class='title'>终验</span>
							</div>
							<div class='step-content'>
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												终验日期：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.finalCheckDate'>
													{{ innerForm.finalCheckDate }}
												</div>
											</a-col>
										</a-row>
									</a-col>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												终验详情：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.finalCheckContent'>
													{{ innerForm.finalCheckContent }}
												</div>
											</a-col>
										</a-row>
									</a-col>
								</a-row>
 
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='24'>
										<a-row type='flex'>
											<a-col :span='3'>
												附件：
											</a-col>
											<a-col :span='21'>
												<div style='position: relative; left: -100px; top: -5px;'>
													<a-button v-for='(item, index) in innerForm.finalCheckAttachmentIds' :key='item.id'
																		type='link' style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
														{{ `${item.name}.${item.extName}` }}
													</a-button>
												</div>
											</a-col>
										</a-row>
									</a-col>
								</a-row>
							</div>
						</div>
						<!--  决算审计-->
						<div class='detail-step' id='step09' style='height: 380px;' v-if='innerForm.finalAccountsDate'>
							<div class='step-header'>
								<span class='title'>决算审计</span>
							</div>
							<div class='step-content'>
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												审计日期：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.finalAccountsDate'>
													{{ innerForm.finalAccountsDate }}
												</div>
											</a-col>
										</a-row>
									</a-col>
									<a-col class='gutter-row' :span='6'>
										<a-row type='flex'>
											<a-col :span='8'>
												审计详情：
											</a-col>
											<a-col :span='16'>
												<div :title='innerForm.finalAccountsContent'>
													{{ innerForm.finalAccountsContent }}
												</div>
											</a-col>
										</a-row>
									</a-col>
								</a-row>
 
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='24'>
										<a-row type='flex'>
											<a-col :span='3'>
												附件：
											</a-col>
											<a-col :span='21'>
												<div style='position: relative; left: -100px; top: -5px;'>
													<a-button v-for='(item, index) in innerForm.finalAccountsAttachmentIds' :key='item.id'
																		type='link' style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
														{{ `${item.name}.${item.extName}` }}
													</a-button>
												</div>
											</a-col>
										</a-row>
									</a-col>
								</a-row>
							</div>
						</div>
						<!-- 9. 付款-->
						<div class='detail-step' id='step09' style='height: 380px;' v-if='innerForm.projectsPayments.length'>
							<div class='step-header'>
								<span class='title'>付款</span>
							</div>
							<div class='step-content'>
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='6'>
										<div class='gutter-box'>
											是否结项:
											{{
												innerForm.paymentClosingItem === null ? ''
													: innerForm.paymentClosingItem == 0 ? '未结项' : '已结项'
											}}
										</div>
									</a-col>
								</a-row>
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='24'>
										<a-form-model-item label='付款详情' prop='rate'>
											<a-table
												:columns='payColumns'
												:pagination='false'
												:data-source='innerForm.projectsPayments'
												:bordered='false'
												:rowKey='(record,index) => {return index}'
												size='small'>
								        <span slot='name' slot-scope='text, record, index'>
								        	付款{{ toChineseNum(index + 1) }}
								        </span>
												<span slot='payTerms' slot-scope='text, record, index'>
															<span v-for='(item, index) in record.payTerms'>
																{{ item }}{{ index === (record.payTerms.length - 1) ? '' : '、' }}
															</span>
								      	  	</span>
												<span slot='add' slot-scope='text, record'>
                        <a-button v-for='(item, index) in record.attachmentIds' :key='item.id' type='link'
																	style='color: #1890ff; font-size: 13px;'
																	@click='doDownload(item)'>
                          {{ `${item.name}.${item.extName}` }}
                        </a-button>
								      </span>
											</a-table>
										</a-form-model-item>
									</a-col>
								</a-row>
								<a-row :gutter='[16,16]'>
									<a-col class='gutter-row' :span='24'>
										<a-row type='flex'>
											<a-col :span='3'>
												付款资料：
											</a-col>
											<a-col :span='21'>
												<div style='position: relative; left: -100px; top: -5px;'>
													<a-button v-for='(item, index) in innerForm.payFileIds' :key='item.id'
																		type='link' style='color: #1890ff; font-size: 13px;' @click='doDownload(item)'>
														{{ `${item.name}.${item.extName}` }}
													</a-button>
												</div>
											</a-col>
										</a-row>
									</a-col>
								</a-row>
							</div>
						</div>
					</div>
					<div class='step-box'>
						<div class='declare-step-container'>
							<div class='declare-steps' style='padding-left: 56px'>
								<a-steps :current='current' direction='vertical' @change='onStepChange'>
									<a-step v-for='(step,index) in this.stepsData' :key='index'>
										<template #title>
											<span v-if='step.flag' style='color: #ffa26e'>
												{{ step.name }}
											</span>
											<span v-else>
												{{ step.name }}
											</span>
										</template>
										<template #description>
											<span v-if="step.name === '付款'">
												{{ step.timing === 0 ? '未结项' : '已结项' }}
											</span>
											<span v-else-if='step.flag' style='color: #ffa26e'>
												{{ step.timing }}
											</span>
											<span v-else>
												{{ step.timing }}
											</span>
										</template>
									</a-step>
								</a-steps>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
 
<script>
import { cloneDeep } from 'lodash';
import { detailProject, detailChildProject } from '@/api/prj';
import moment, { Moment } from 'moment';
import AddNode from '@/views/projectManage/components/addNode.vue';
import { getDicitemList } from '../../../api/dictionary';
import { queryTimeshaft } from '../../../api/timeShaft';
import { Bus } from '@/utils/Bus.js';
 
const payColumns = [
	{
		dataIndex: 'name',
		key: 'name',
		width: 70,
		scopedSlots: { customRender: 'name' }
	},
	{
		title: '付款时间(年)',
		dataIndex: 'payTime',
		key: 'payTime',
		width: 100,
		scopedSlots: { customRender: 'payTime' }
	},
	{
		title: '付款条件',
		dateIndex: 'payTerms',
		key: 'payTerms',
		width: 520,
		ellipsis: true,
		scopedSlots: { customRender: 'payTerms' }
	},
	{
		title: '付款金额(￥)',
		dataIndex: 'payMoney',
		key: 'payMoney',
		width: 150,
		ellipsis: true,
		scopedSlots: { customRender: 'payMoney' }
	},
	{
		title: '付款比例(%)',
		key: 'payProportion',
		dataIndex: 'payProportion',
		width: 100,
		ellipsis: true,
		scopedSlots: { customRender: 'payProportion' }
	},
	{
		title: '发票附件',
		key: 'add',
		dataIndex: 'add',
		width: 520,
		scopedSlots: { customRender: 'add' }
	}
 
];
const payColumns2 = [
	{
		title: '付款时间(年)',
		dataIndex: 'scheduledPaymentTime',
		key: 'scheduledPaymentTime',
		width: 100,
		scopedSlots: { customRender: 'scheduledPaymentTime' }
	},
	{
		title: '付款金额(￥)',
		dataIndex: 'plannedPaymentAmount',
		key: 'plannedPaymentAmount',
		width: 150,
		ellipsis: true,
		scopedSlots: { customRender: 'plannedPaymentAmount' }
	},
	{
		title: '付款比例(%)',
		key: 'procureContractPayProportion',
		dataIndex: 'procureContractPayProportion',
		width: 100,
		ellipsis: true,
		scopedSlots: { customRender: 'procureContractPayProportion' }
	}
	// {
	// 	title: '操作',
	// 	key: 'action',
	// 	dataIndex: 'action',
	// 	width: 120,
	// 	scopedSlots: { customRender: 'action' }
	// }
];
export default {
	components: {
		AddNode
	},
	data() {
		return {
			payColumns: cloneDeep(payColumns),
			payColumns2: cloneDeep(payColumns2),
			payTableData: null,
			contentCurrent: 0,
			projectDetail: {
				number: ''
			}, // 项目详情数据
			ruleForm: {
				pass: '',
				checkPass: '',
				age: ''
			},
			layout: {
				labelCol: { span: 4 },
				wrapperCol: { span: 14 }
			},
			current: 0,
			type: 0,
			isParent: '',
			endCurrent: '',
			innerForm: {},
			payTerms: [],
			buildTypeName: '',
			paramsData: null,
			detailData: {},
			stepsData: {},
			nodeData: null,
			govNodeData: null,
			innerNodeData: null,
			childNodeData: null
		};
 
	},
	watch: {
		$route(to, from) {
			console.log(to, 'to', from, 'from');
		}
	},
	// 页面销毁之前
	beforeDestroy() {
		Bus.$off('initTimeshaft')
		sessionStorage.removeItem('paramsData');
	},
	created() {
		this.getDicitemLists();
		this.initTimeShaftPage();
		Bus.$on('initTimeshaft', (data) => {
			this.getDicitemLists();
			this.initTimeShaftPage();
		})
	},
	methods: {
		initTimeShaftPage() {
			this.paramsData = sessionStorage.getItem('paramsData');
			if (this.paramsData) {
				this.paramsData = JSON.parse(sessionStorage.getItem('paramsData'));
			} else {
				this.paramsData = this.$route.params;
				sessionStorage.setItem('paramsData', JSON.stringify(this.paramsData));
			}
			console.log(this.$route, 'route');
			if (this.paramsData.type == 0) {
				if (this.paramsData.isParent == 0) {
					this.isParent = 0;
					this.getDetails('parent');
					this.isAddChild(1);
				} else if (this.paramsData.isParent == 1) {
					this.isParent = 1;
					this.getDetails('child');
				}
				this.type = 0;
			} else {
				this.type = 1;
				this.getDetails('parent');
			}
		},
		showAddModal() {
			this.$refs.addNodeRef.visible = true;
			this.$refs.addNodeRef.formState.projectNumber = this.detailData.projectNumber;
		},
		onStepChange(current) {
			this.current = current;
			// 给对应dom滚动到对应锚点，使之出现在视图中
			document.querySelector(`[id='${current}']`).scrollIntoView({
				behavior: "smooth", // 定义过渡动画 instant立刻跳过去 smooth平滑过渡过去
				block: "start", // 定义垂直滚动方向的对齐 start顶部（尽可能）  center中间（尽可能）  end（底部）
				inline: "center", // 定义水平滚动方向的对齐
			});
		},
		//回显每个节点状态
		setStepStatus(currentStepNum, type) {
			if (type == 'gov') {
				for (let i = 0; i < currentStepNum; i++) {
					if (i === 0) {
						tempStep.description = `${this.innerForm.planApplyDate ? '提交' : ''}`;
					}
					if (i === 1) {
						tempStep.description = `${this.innerForm.planApprovalDate ? '提交' : ''}`;
					}
					if (i === 2) {
						tempStep.description = `${this.innerForm.requestDate ? '提交' : '待请示'}`;
					}
					if (i === 3) {
						tempStep.description = `${this.innerForm.requestApprovalDate ? '提交' : '待批复'}`;
					}
					if (i === 4) {
						tempStep.description = `${this.innerForm.studyDate ? '提交' : '待请示'}`;
					}
					if (i === 5) {
						tempStep.description = `${this.innerForm.studyApprovalDate ? '提交' : '待批复'}`;
					}
					if (i === 6) {
						tempStep.description = `${this.innerForm.designDate ? '提交' : '待请示'}`;
					}
					if (i === 7) {
						tempStep.description = `${this.innerForm.designApprovalDate ? '提交' : '待批复'}`;
					}
					if (i === 8) {
						tempStep.description = `${this.innerForm.partyApprovalDate ? '提交' : '待审批'}`;
					}
					if (i === 9) {
						tempStep.description = `${this.innerForm.approvalDate ? '提交' : '待申请'}`;
					}
					if (i === 10) {
						tempStep.description = `${this.innerForm.planDate ? '提交' : '待论证'}`;
					}
					if (i === 11) {
						tempStep.description = `${this.innerForm.tendersDate ? '提交' : '待评审'}`;
					}
					if (i === 12) {
						tempStep.description = `${this.innerForm.tendersFileDate ? '提交' : '待评审'}`;
					}
					if (i === 13) {
						tempStep.description = `${this.innerForm.procureContractSignDate ? '提交' : '待采购'}`;
					}
					if (i === 14) {
						tempStep.description = `${this.innerForm.startDate ? '提交' : '待开工'}`;
					}
					if (i === 15) {
						tempStep.description = `${this.innerForm.primitiveCheckDate ? '提交' : '待初验'}`;
					}
					if (i === 16) {
						tempStep.description = `${this.innerForm.finalCheckDate ? '提交' : '待终验'}`;
					}
					if (i === 17) {
						tempStep.description = `${this.innerForm.finalAccountsDate ? '提交' : '待审计'}`;
					}
					if (i === 18) {
 
						tempStep.description = this.innerForm.paymentClosingItem == '1' ? '已结项' : `待结项`;
 
					}
					if (i == 19) {
						if (this.innerForm.paymentClosingItem == '1') {
							tempStep.description = '项目已完成';
						}
					}
 
 
				}
			} else if (type == 'inner') {
				for (let i = 0; i < currentStepNum; i++) {
					let tempStep = this.steps[i];
					if (i === 0) {
 
						tempStep.description = this.innerForm.planApplyDate ? '提交' : '';
					}
					if (i === 1) {
						tempStep.description = `${this.innerForm.planApprovalDate ? '提交' : ''}`;
					}
					if (i === 2) {
 
						tempStep.description = this.innerForm.partyApprovalDate ? '提交' : '待审批';
					}
					if (i === 3) {
						tempStep.description = `${this.innerForm.approvalDate ? '提交' : '待申请'}`;
					}
					if (i === 4) {
						tempStep.description = `${this.innerForm.planDate ? '提交' : '待论证'}`;
					}
					if (i === 5) {
						tempStep.description = `${this.innerForm.tendersDate ? '提交' : '待评审'}`;
					}
					if (i === 6) {
						tempStep.description = `${this.innerForm.tendersFileDate ? '提交' : '待评审'}`;
					}
					if (i === 7) {
						tempStep.description = `${this.innerForm.procureContractDate ? '提交' : '待采购'}`;
					}
					if (i === 8) {
						tempStep.description = `${this.innerForm.startDate ? '提交' : '待开工'}`;
					}
					if (i === 9) {
						tempStep.description = `${this.innerForm.primitiveCheckDate ? '提交' : '待检验'}`;
					}
					if (i === 10) {
						tempStep.description = `${this.innerForm.finalCheckDate ? '提交' : '待检验'}`;
					}
					if (i === 11) {
						tempStep.description = `${this.innerForm.finalAccountsDate ? '提交' : '待审计'}`;
					}
					if (i === 12) {
						tempStep.description = this.innerForm.paymentClosingItem == '1' ? '已结项' : `待结项`;
					}
					if (i == 13) {
						if (this.innerForm.paymentClosingItem == '1') {
							tempStep.description = '项目已完成';
						}
					}
 
				}
			} else {
				for (let i = 0; i < currentStepNum; i++) {
					let tempStep = this.steps[i];
					if (i === 0) {
						tempStep.description = `${this.innerForm.projectBudget ? '提交' : '待维护'}`;
					}
					if (i === 1) {
						tempStep.description = `${this.innerForm.partyApprovalDate ? '提交' : '待审批'}`;
					}
					if (i === 2) {
						tempStep.description = `${this.innerForm.approvalDate ? '提交' : '待申请'}`;
					}
					if (i === 3) {
						tempStep.description = `${this.innerForm.planDate ? '提交' : '待论证'}`;
					}
					if (i === 4) {
						tempStep.description = `${this.innerForm.tendersDate ? '提交' : '待评审'}`;
					}
					if (i === 5) {
						tempStep.description = `${this.innerForm.tendersFileDate ? '提交' : '待评审'}`;
					}
					if (i === 6) {
						tempStep.description = `${this.innerForm.procureContractSignDate ? '提交' : '待采购'}`;
					}
					if (i === 7) {
						tempStep.description = `${this.innerForm.startDate ? '提交' : '待开工'}`;
					}
					if (i === 8) {
						tempStep.description = `${this.innerForm.primitiveCheckDate ? '提交' : '待初验'}`;
					}
					if (i === 9) {
						tempStep.description = `${this.innerForm.finalCheckDate ? '提交' : '待终验'}`;
					}
					if (i === 10) {
						tempStep.description = `${this.innerForm.finalAccountsDate ? '提交' : '待审计'}`;
					}
					if (i === 11) {
 
						tempStep.description = this.innerForm.paymentClosingItem == '1' ? '已结项' : `待结项`;
 
					}
					if (i === 12) {
						if (this.innerForm.paymentClosingItem == '1') {
							tempStep.description = '项目已完成';
						}
					}
 
				}
			}
		},
		backStepView() {
			this.$router.go(-1);
		},
		doDownload(item) {
			let aUrl = item.address;
			let extNameIcon = item.extName;
			let extName = item.name;
			if (extName.includes('.')) {
				extName = extName.split('.')[0];
			}
			let xml = new XMLHttpRequest();
			xml.open('GET', aUrl, true);
			xml.responseType = 'blob';
			xml.onload = () => {
				let url = window.URL.createObjectURL(xml.response);
				let a = document.createElement('a');
				a.href = url;
				a.download = `${extName}.${extNameIcon}`;
				a.style.display = 'none';
				a.click();
			};
			xml.send();
		},
		// excel文件下载
		doDownloadExcel(fileName, filePath) {
			let xhr = new XMLHttpRequest();
			xhr.open('get', filePath);
			xhr.responseType = 'blob';
			xhr.onreadystatechange = function() {
				if (xhr.readyState === 4 && xhr.status === 200) {
					let blob = new Blob([xhr.response], { type: 'text/xls' });
					let csvUrl = URL.createObjectURL(blob);
					let link = document.createElement('a');
					link.href = csvUrl;
					link.download = fileName;
					link.click();
					document.body.removeChild(link);
					URL.revokeObjectURL(csvUrl);
				}
			};
			xhr.send();
		},
		toChineseNum(i) {
			if (i === 1 || i === '1') {
				return '一';
			}
			if (i === 2 || i === '2') {
				return '二';
			}
			if (i === 3 || i === '3') {
				return '三';
			}
			if (i === 4 || i === '4') {
				return '四';
			}
			if (i === 5 || i === '5') {
				return '五';
			}
			if (i === 6 || i === '6') {
				return '六';
			}
			if (i === 7 || i === '7') {
				return '七';
			}
			if (i === 8 || i === '8') {
				return '八';
			}
			if (i === 9 || i === '9') {
				return '九';
			}
			if (i === 10 || i === '10') {
				return '十';
			}
		},
		async changeParentAndChild(row, value) {
			let params = {
				type: 0,
				id: row.id,
				isParent: 1
			};
			this.$router.push({
				name: 'detailProject',
				params
			});
		},
		async getDetails(type) {
			console.log('output-> this.paramsData:::: ', this.paramsData);
			console.log(type, 'type');
			if (type == 'parent') {
				let params = {
					id: this.paramsData.id,
					projectType: this.paramsData.type == 0 ? 'government' : 'inner',
					child: false,
				};
				const res = await queryTimeshaft(params);
				this.detailData = res.data;
				console.log('output-> detailData::: ', this.detailData);
				if (this.paramsData.type == 0) {
					this.nodeData = this.detailData.mattersGovernmentVos;
				} else {
					this.nodeData = this.detailData.mattersInternalControlVos;
				}
				// =================================== buildType ========================
					let buildTypeList = JSON.parse(sessionStorage.getItem('buildType'));
					if (buildTypeList && buildTypeList.length) {
						this.buildTypeName = buildTypeList.find(item => item.code === this.detailData.buildType).itemName;
					}
				// =================================== buildType ========================
				console.log('output-> this.nodeData', this.nodeData);
				this.stepsData = this.nodeData.map(detail => {
					return {
						name: detail.name,
						timing: detail.timing,
						flag: detail.flag
					};
				});
			} else {
				let params = {
					id: this.paramsData.id,
					projectType: this.paramsData.type == 0 ? 'government' : 'inner',
					child: true,
				};
				const res = await queryTimeshaft(params);
				this.detailData = res.data;
				console.log('output-> detailData::: ', this.detailData);
				this.nodeData = this.detailData.mattersGovernmentChildrenVos;
				// =================================== buildType ========================
				let buildTypeList = JSON.parse(sessionStorage.getItem('buildType'));
				if (buildTypeList && buildTypeList.length) {
					this.buildTypeName = buildTypeList.find(item => item.code === this.detailData.buildType).itemName;
				}
				// =================================== buildType ========================
				console.log('output-> this.nodeData', this.nodeData);
				this.stepsData = this.nodeData.map(detail => {
					return {
						name: detail.name,
						timing: detail.timing,
						flag: detail.flag
					};
				});
				// if (res && 0 === res.status) {
				// 	console.log(res.data, 'res.data');
				// 	let data = res.data;
				// 	this.id = data.id;
				// 	let buildTypeList = JSON.parse(sessionStorage.getItem('buildType'));
				// 	if (!buildTypeList) {
				// 		await this.getDicitemLists();
				// 		buildTypeList = JSON.parse(sessionStorage.getItem('buildType'));
				// 	}
				// 	if (buildTypeList.length) {
				// 		this.buildTypeName = buildTypeList.find(item => item.code === data.buildType).itemName;
				// 	}
				// 	this.projectNumber = this.detailData.projectNumber;
				// 	this.projectType = data.projectType;
				// 	//政府项目-子项目建设
				// 	this.innerForm = data;
				// 	if (typeof data.payTerms === 'string') {
				// 		this.innerForm.payTerms = JSON.parse(data.payTerms);
				// 	}
				// 	this.setStepStatus(this.steps.length, 'child');
				// }
			}
		},
		isAddChild(value) {
			console.log(value, 'value');
			// if (value == 0) {
			// 	this.addSteps.forEach(item => {
			// 		this.steps.push(item);
			// 	});
			// 	this.endCurrent = this.steps.length;
			// 	this.steps = this.steps.concat(cloneDeep(endSteps));
			// } else {
			// 	this.steps = cloneDeep(steps);
			// }
		},
		async getDicitemLists() {
			const data = {
				parentCode: 'build_type'
			};
			const res = await getDicitemList(data);
			if (res.status === 0) {
				this.buildTypelist = res.data;
				sessionStorage.setItem('buildType', JSON.stringify(this.buildTypelist));
			}
		}
	}
 
};
 
</script>
 
<style lang='scss' scoped>
.detail-main-page {
  overflow-y: scroll;
  width: 99%;
  height: 98%;
  margin: 10px;
  padding: 20px 20px 0 20px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0px 16px 32px -6px rgba(188, 200, 223, 0.18),
  0px 3px 8px -2px rgba(188, 200, 223, 0.16),
  0px 0px 1px rgba(188, 200, 223, 0.16);
 
  .detail-main-header {
    height: 20px;
    border-radius: 8px;
  }
 
  .detail-main-content {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    position: relative;
 
    .node-add-box {
      position: absolute;
      right: 75px;
      top: 64px;
 
      .node-add-btn {
        cursor: pointer;
        padding: 8px 50px;
        color: #fff;
        background-color: #ff9502;
      }
    }
 
    .content-left {
      width: 80%;
      flex: 1;
      border-right: 2px solid #f2f2f2;
      margin-top: 40px;
 
      .detail-step {
        //height: 220px;
        height: auto !important;
        padding: 0 10px 30px 0;
        width: 99%;
        background-color: #f7f8fa;
        margin-bottom: 30px;
 
        .step-header {
          padding: 10px 0 0 10px;
 
          .title {
            line-height: 30px;
            font-weight: 700;
            position: relative;
            padding-left: 13px;
            margin: 24px 0px;
          }
 
          .title:before {
            content: '';
            background-color: #3796ec;
            width: 4px;
            height: 16px;
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -8px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
          }
        }
 
        .step-content {
          padding-top: 20px;
          padding-left: 30px;
 
          & > .ant-col .ant-col-16 {
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
            white-space: normal !important;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
        }
      }
    }
 
    .step-box {
      margin-top: 40px;
      flex-shrink: 0;
      flex-basis: 320px;
    }
 
    .content-right {
      flex: 1;
 
      .right-title {
        line-height: 30px;
        font-size: 18px;
        font-weight: 700;
        color: #1f71ff;
        //text-align: center;
      }
 
      .right-content {
        padding-top: 50px;
        padding-left: 50px;
        height: 100vh;
 
        & > .ant-steps-vertical .ant-steps-item {
          height: 255px;
        }
      }
    }
  }
}
 
.declare-step-container {
  display: flex;
  flex-direction: column;
	>>> .ant-steps {
		height: 100%!important;;
	}
	>>> .ant-steps-item {
		height: 150px !important;
	}
  & > .ant-steps .ant-steps-item-title {
    width: 110%;
  }
 
  & > .ant-divider-horizontal {
    margin: 12px 0 !important;
  }
 
  .declare-tag {
    line-height: 30px;
    display: flex;
    justify-content: center;
 
    .tag-title {
      line-height: 30px;
      font-weight: 700;
      color: #1f71ff;
    }
  }
 
  .declare-steps {
    flex: 1;
  }
 
  //.declare-steps {
  //  //flex: 18;
  //  width: calc(100% - 90px);
  //}
}
 
.ant-steps-item {
  min-width: 230px;
}
 
.ant-steps {
  overflow-x: auto;
}
 
.bld {
  font-weight: 600;
  color: #1F71FF;
}
 
.bod {
  color: #1F71FF;
}
 
::-webkit-scrollbar {
  height: 15px;
  width: 15px;
}
 
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  //-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.1);
}
 
::-webkit-scrollbar-track {
  -webkit-box-shadow: 0;
  border-radius: 10px;
  background: transparent;
}
</style>