标签：name extName item steps 锚点 Vue2 tempStep innerForm description
核心代码
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>
标签：name,
extName,
item,
steps,
锚点,
Vue2,
tempStep,
innerForm,
description
From： https://www.cnblogs.com/openmind-ink/p/17554628.html