961 lines
44 KiB
Vue
961 lines
44 KiB
Vue
<template>
|
||
<div class="post-investment-evaluation-form">
|
||
<div class="form-section-title">{{ t('postInvestmentEvaluationForm.sectionTitle') }}</div>
|
||
<el-form :model="submitFormData" :rules="rules" ref="submitFormDataRef" label-width="200px" class="evaluation-form">
|
||
<el-row :gutter="20" class="form-row">
|
||
<el-col :span="12">
|
||
<el-form-item prop="actualTotalIncome" :label="t('postInvestmentEvaluationForm.actualTotalRevenue')" required>
|
||
<el-input-number :controls="false" v-model="submitFormData.actualTotalIncome"
|
||
:placeholder="t('postInvestmentEvaluationForm.inputPlaceholder')">
|
||
<template #append>{{ t('postInvestmentEvaluationForm.unitSuffix') }}</template>
|
||
</el-input-number>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item prop="actualInvestmentGain" :label="t('postInvestmentEvaluationForm.actualInvestmentIncome')" required>
|
||
<el-input-number :controls="false" v-model="submitFormData.actualInvestmentGain"
|
||
:placeholder="t('postInvestmentEvaluationForm.inputPlaceholder')">
|
||
<template #append>{{ t('postInvestmentEvaluationForm.unitSuffix') }}</template>
|
||
</el-input-number>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20" class="form-row">
|
||
<el-col :span="24">
|
||
<el-form-item prop="actualInvestmentReturnRate" :label="t('postInvestmentEvaluationForm.actualInvestmentReturnRate')" required>
|
||
<el-input v-model="actualInvestmentReturnRate" readonly >
|
||
<template #suffix>%</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20" class="form-row">
|
||
<el-col :span="24">
|
||
<el-form-item :label="t('postInvestmentEvaluationForm.investmentResults')" >
|
||
<el-input v-model="submitFormData.investmentResults" type="text"
|
||
:placeholder="t('postInvestmentEvaluationForm.inputPlaceholder')">
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20" class="form-row">
|
||
<el-col :span="24">
|
||
<el-form-item :label="t('postInvestmentEvaluationForm.profitLossSituation')">
|
||
<el-input v-model="submitFormData.profitLossSituation" type="text"
|
||
:placeholder="t('postInvestmentEvaluationForm.inputPlaceholder')">
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20" class="form-row">
|
||
<el-col :span="24">
|
||
<el-form-item :label="t('postInvestmentEvaluationForm.existingProblems')">
|
||
<el-input v-model="submitFormData.existingProblems" type="text"
|
||
:placeholder="t('postInvestmentEvaluationForm.inputPlaceholder')">
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20" class="form-row">
|
||
<el-col :span="24">
|
||
<el-form-item :label="t('postInvestmentEvaluationForm.improvementSuggestions')">
|
||
<el-input v-model="submitFormData.improvementSuggestions" type="text"
|
||
:placeholder="t('postInvestmentEvaluationForm.inputPlaceholder')">
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20" class="form-row">
|
||
<el-col :span="24">
|
||
<el-form-item :label="t('postInvestmentEvaluationForm.conclusion')">
|
||
<el-input v-model="submitFormData.conclusion" type="text"
|
||
:placeholder="t('postInvestmentEvaluationForm.inputPlaceholder')">
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20" class="form-row">
|
||
<el-col :span="24">
|
||
<el-form-item :label="t('postInvestmentEvaluationForm.attachmentUpload')">
|
||
<UploadFile :modelValue="submitFormData.attachmentUrl" @change="(_:any,data:any[])=>uploadChange(1,_,data)" :fileSize="20" type="simple" :limit="10"
|
||
:isShowTip="false" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
|
||
<div class="basic-info-section">
|
||
<div class="form-section-title">{{ t('postInvestmentEvaluationForm.basicInfo.title') }}</div>
|
||
<div class="basic-info-table">
|
||
<div class="info-row">
|
||
<div class="info-label">{{ t('postInvestmentEvaluationForm.basicInfo.projectName') }}</div>
|
||
<div class="info-value info-value-full">{{ formData.projectName || 'XXX' }}</div>
|
||
</div>
|
||
<div class="info-row">
|
||
<div class="info-label">{{ t('postInvestmentEvaluationForm.basicInfo.constructionStage') }}</div>
|
||
<div class="info-value">{{ initTypeString(constructionStageOptions,lastListItem.constructionStage) || 'XXX' }}</div>
|
||
<div class="info-label">{{ t('postInvestmentEvaluationForm.basicInfo.projectNature') }}</div>
|
||
<div class="info-value">{{ initTypeString(projectNatureOptions,formData.projectNature) || 'XXX' }}</div>
|
||
</div>
|
||
<div class="info-row">
|
||
<div class="info-label required">{{
|
||
t('postInvestmentEvaluationForm.basicInfo.projectImplementationUnit') }}
|
||
</div>
|
||
<div class="info-value">{{ formData.projectMainEntity || 'XXX' }}</div>
|
||
<div class="info-label">{{ t('postInvestmentEvaluationForm.basicInfo.projectOwnerUnit') }}</div>
|
||
<div class="info-value">{{ formData.projectOwnerUnit || 'XXX' }}</div>
|
||
</div>
|
||
<div class="info-row">
|
||
<div class="info-label required">{{ t('postInvestmentEvaluationForm.basicInfo.investmentCategory')
|
||
}}</div>
|
||
<div class="info-value required">{{ initTypeString(investmentCategoryOptions,formData.investmentCategory) || 'XXX' }}</div>
|
||
<div class="info-label required">{{ t('postInvestmentEvaluationForm.basicInfo.investmentRegion') }}
|
||
</div>
|
||
<div class="info-value required">{{ initTypeString(investmentAreaOptions,formData.investmentArea) || 'XXX' }}</div>
|
||
</div>
|
||
<div class="info-row">
|
||
<div class="info-label required">{{ t('postInvestmentEvaluationForm.basicInfo.projectAddress') }}
|
||
</div>
|
||
<div class="info-value required">{{ formData.projectAddress || 'XXX' }}</div>
|
||
<div class="info-label required">{{ t('postInvestmentEvaluationForm.basicInfo.projectDetailAddress')
|
||
}}
|
||
</div>
|
||
<div class="info-value required">{{ formData.projectAddressDetail || 'XXX' }}</div>
|
||
</div>
|
||
<div class="info-row">
|
||
<div class="info-label required">{{ t('postInvestmentEvaluationForm.basicInfo.projectDirection') }}
|
||
</div>
|
||
<div class="info-value required">{{ initTypeString(projectDirectionOptions,formData.projectInvestmentDirection) }}</div>
|
||
<div class="info-label required">{{ t('postInvestmentEvaluationForm.basicInfo.directionSubdivision')
|
||
}}
|
||
</div>
|
||
<div class="info-value required">{{initTypeString(projectDirectionDetailsOptions,formData.investmentDirectionSegmentation) || 'XXX' }}</div>
|
||
</div>
|
||
<div class="info-row">
|
||
<div class="info-label required">{{ t('postInvestmentEvaluationForm.basicInfo.projectSource') }}
|
||
</div>
|
||
<div class="info-value required">{{ initTypeString(projectSourceOptions,formData.projectSource) || 'XXX' }}</div>
|
||
<div class="info-label required">{{ t('postInvestmentEvaluationForm.basicInfo.constructionNature')
|
||
}}</div>
|
||
<div class="info-value required">{{ initTypeString(constructionNatureOptions,formData.constructionNature) || 'XXX' }}</div>
|
||
</div>
|
||
<div class="info-row">
|
||
<div class="info-label required">{{
|
||
t('postInvestmentEvaluationForm.basicInfo.majorInvestmentProject') }}
|
||
</div>
|
||
<div class="info-value required"> {{ initTypeString(yesOrNo,formData.majorInvestmentProjects) }}</div>
|
||
<div class="info-label required">{{ t('postInvestmentEvaluationForm.basicInfo.keyProject') }}</div>
|
||
<div class="info-value required">{{ initTypeString(projectImportantOptions,formData.keyProject) || 'XXX' }}</div>
|
||
</div>
|
||
<div class="info-row">
|
||
<div class="info-label required">{{ t('postInvestmentEvaluationForm.basicInfo.isWithinMainBusiness')
|
||
}}
|
||
</div>
|
||
<div class="info-value required">{{ initTypeString(yesOrNo,formData.isMainBusiness) }}</div>
|
||
<div class="info-label required">{{ t('postInvestmentEvaluationForm.basicInfo.mainBusinessType') }}
|
||
</div>
|
||
<div class="info-value required">{{ initTypeString(mainBusinessOptions,formData.mainBusinessTypes) || 'XXX' }}</div>
|
||
</div>
|
||
<div class="info-row">
|
||
<div class="info-label required">{{ t('postInvestmentEvaluationForm.basicInfo.mainBusinessCode') }}
|
||
</div>
|
||
<div class="info-value required">{{ formData.mainBusinessCode || 'XXX' }}</div>
|
||
<div class="info-label required">{{ t('postInvestmentEvaluationForm.basicInfo.isManufacturing') }}
|
||
</div>
|
||
<div class="info-value required">{{ formData.isManufacturingIndustry || 'XXX' }}</div>
|
||
</div>
|
||
<div class="info-row">
|
||
<div class="info-label required">{{
|
||
t('postInvestmentEvaluationForm.basicInfo.strategicEmergingIndustry') }}
|
||
</div>
|
||
<div class="info-value required">{{ initTypeString(strategicIndustryOptions,formData.isStrategicEmergingIndustries) || 'XXX' }}</div>
|
||
<div class="info-label required">{{ t('postInvestmentEvaluationForm.basicInfo.cityStrategy') }}
|
||
</div>
|
||
<div class="info-value required">{{ initTypeString(cityStrategyOptions,formData.urbanStrategy) || 'XXX' }}</div>
|
||
</div>
|
||
<div class="info-row">
|
||
<div class="info-label required">{{
|
||
t('postInvestmentEvaluationForm.basicInfo.projectImplementationStart') }}
|
||
</div>
|
||
<div class="info-value">{{ formData.projectStartTime || 'XXX' }}</div>
|
||
<div class="info-label required">{{
|
||
t('postInvestmentEvaluationForm.basicInfo.projectImplementationEnd') }}
|
||
</div>
|
||
<div class="info-value">{{ formData.projectEndTime || 'XXX' }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="additional-info-table">
|
||
<div class="info-row info-row-single">
|
||
<div class="info-label required">{{ t('postInvestmentEvaluationForm.additionalInfo.projectOverview')
|
||
}}
|
||
</div>
|
||
<div class="info-value">{{ formData.projectDesc || 'XXX' }}</div>
|
||
</div>
|
||
<div class="info-row info-row-single">
|
||
<div class="info-label">{{ t('postInvestmentEvaluationForm.additionalInfo.projectPreliminaryPlan')
|
||
}}</div>
|
||
<div class="info-value">
|
||
<UploadFile :modelValue="JSON.parse(formData.projectPreliminaryPlanAttachment || '[]') || []" :fileSize="20" type="simple"
|
||
:limit="10" :isShowTip="false" disabled/>
|
||
</div>
|
||
</div>
|
||
<div class="info-row info-row-single">
|
||
<div class="info-label">{{ t('postInvestmentEvaluationForm.additionalInfo.remark') }}</div>
|
||
<div class="info-value">{{ formData.remark || 'XXX' }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="annual-investment-plan-section">
|
||
<div class="form-section-title">{{ t('postInvestmentEvaluationForm.annualPlan.title') }}</div>
|
||
<el-table :data="formData.projectInvestmentEntities" border style="width: 100%" class="annual-plan-table">
|
||
<el-table-column type="index" :label="t('postInvestmentEvaluationForm.annualPlan.index')" width="60"
|
||
align="center" />
|
||
<el-table-column :label="t('postInvestmentEvaluationForm.annualPlan.plannedInvestmentYear')"
|
||
prop="plannedInvestmentYear" min-width="120" align="center" />
|
||
<el-table-column :label="t('postInvestmentEvaluationForm.annualPlan.plannedImageAmount')"
|
||
prop="plannedImageAmount" min-width="140" align="center">
|
||
<template #default="{ row }">
|
||
{{ row.plannedImageAmount ? `${row.plannedImageAmount}
|
||
${t('postInvestmentEvaluationForm.unitSuffix')}` : '' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column :label="t('postInvestmentEvaluationForm.annualPlan.plannedPaymentAmount')"
|
||
prop="plannedPaymentAmount" min-width="140" align="center">
|
||
<template #default="{ row }">
|
||
{{ row.plannedPaymentAmount ? `${row.plannedPaymentAmount}
|
||
${t('postInvestmentEvaluationForm.unitSuffix')}` : '' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column :label="t('postInvestmentEvaluationForm.annualPlan.fundingSource')" align="center">
|
||
<el-table-column :label="t('postInvestmentEvaluationForm.annualPlan.ownFunds')" prop="ownFunds"
|
||
min-width="120" align="center">
|
||
<template #default="{ row }">
|
||
{{ row.selfFunding ? `${row.selfFunding} ${t('postInvestmentEvaluationForm.unitSuffix')}` : ''
|
||
}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column :label="t('postInvestmentEvaluationForm.annualPlan.fiscalFunds')"
|
||
prop="fiscalFunds" min-width="120" align="center">
|
||
<template #default="{ row }">
|
||
{{ row.fiscalFunding ? `${row.fiscalFunding}
|
||
${t('postInvestmentEvaluationForm.unitSuffix')}` : '' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column :label="t('postInvestmentEvaluationForm.annualPlan.externalFundraising')"
|
||
prop="externalFundraising" min-width="140" align="center">
|
||
<template #default="{ row }">
|
||
{{ row.externalFunding ? `${row.externalFunding}
|
||
${t('postInvestmentEvaluationForm.unitSuffix')}` : '' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column :label="t('postInvestmentEvaluationForm.annualPlan.otherFunds')"
|
||
prop="otherFunds" min-width="120" align="center">
|
||
<template #default="{ row }">
|
||
{{ row.otherFunding ? `${row.otherFunding} ${t('postInvestmentEvaluationForm.unitSuffix')}`
|
||
: '' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
:label="t('postInvestmentEvaluationForm.annualPlan.fiscalFundsSourceExplanation')"
|
||
prop="fiscalFundingSource" min-width="180" align="center" />
|
||
<el-table-column
|
||
:label="t('postInvestmentEvaluationForm.annualPlan.otherFundsSourceExplanation')"
|
||
prop="otherFundingSource" min-width="180" align="center" />
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
|
||
<div class="decision-info-section">
|
||
<div class="form-section-title">{{ t('postInvestmentEvaluationForm.decisionInfo.title') }}</div>
|
||
<div class="decision-info-table">
|
||
<div class="info-row">
|
||
<div class="info-label">{{ t('postInvestmentEvaluationForm.decisionInfo.decisionType') }}</div>
|
||
<div class="info-value">{{ formData.decisionType || 'XXX' }}</div>
|
||
<div class="info-label">{{
|
||
t('postInvestmentEvaluationForm.decisionInfo.isProjectApprovalProcedureCompleted') }}</div>
|
||
<div class="info-value">{{ initTypeString(yesOrNo,formData.isProjectApprovalCompleted) || 'XXX'
|
||
}}</div>
|
||
</div>
|
||
<div class="info-row">
|
||
<div class="info-label">{{
|
||
t('postInvestmentEvaluationForm.decisionInfo.projectApprovalDocumentNumber')
|
||
}}</div>
|
||
<div class="info-value">{{ formData.projectApprovalFileNo || 'XXX' }}
|
||
</div>
|
||
<div class="info-label">{{
|
||
t('postInvestmentEvaluationForm.decisionInfo.projectApprovalDocumentInfo') }}
|
||
</div>
|
||
<div class="info-value">{{ formData.projectApprovalFileInfo || 'XXX' }}</div>
|
||
</div>
|
||
<div class="info-row">
|
||
<div class="info-label">{{
|
||
t('postInvestmentEvaluationForm.decisionInfo.isDecisionProcedureCompleted')
|
||
}}</div>
|
||
<div class="info-value">{{ initTypeString(yesOrNo,formData.isDecisionProcedureCompleted) || 'XXX' }}</div>
|
||
<div class="info-label">{{
|
||
t('postInvestmentEvaluationForm.decisionInfo.decisionProcedureDocumentNumber') }}</div>
|
||
<div class="info-value">{{ formData.decisionProcedureFileNo || 'XXX' }}
|
||
</div>
|
||
</div>
|
||
<div class="info-row">
|
||
<div class="info-label">{{ t('postInvestmentEvaluationForm.decisionInfo.decisionDocumentInfo')
|
||
}}</div>
|
||
<div class="info-value">{{ formData.decisionFileInfo || 'XXX' }}</div>
|
||
<div class="info-label"></div>
|
||
<div class="info-value"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="progress-report-info-section">
|
||
<div class="form-section-title">{{ t('postInvestmentEvaluationForm.progressReportInfo.title') }}</div>
|
||
<div class="progress-report-info-table">
|
||
<div class="info-row">
|
||
<div class="info-label required">{{
|
||
t('postInvestmentEvaluationForm.progressReportInfo.projectStatus')
|
||
}}</div>
|
||
<div class="info-value">{{ initTypeString(projectStatusOptions,lastListItem.projectStatus) || 'XXX' }}</div>
|
||
<div class="info-label">{{
|
||
t('postInvestmentEvaluationForm.progressReportInfo.constructionStage') }}
|
||
</div>
|
||
<div class="info-value">{{ initTypeString(constructionStageOptions,lastListItem.constructionStage) || 'XXX' }}</div>
|
||
</div>
|
||
<div class="info-row info-row-single">
|
||
<div class="info-label required">{{
|
||
t('postInvestmentEvaluationForm.progressReportInfo.totalInvestmentAmount') }}</div>
|
||
<div class="info-value">{{ lastListItem.projectTotalAmount }}</div>
|
||
</div>
|
||
<div class="info-row">
|
||
<div class="info-label required">{{
|
||
t('postInvestmentEvaluationForm.progressReportInfo.cumulativeInvestmentToMonthEnd') }}</div>
|
||
<div class="info-value">{{ lastListItem.cumulativeInvestmentToDate
|
||
}}</div>
|
||
<div class="info-label required">{{
|
||
t('postInvestmentEvaluationForm.progressReportInfo.investmentCompletionRate') }}</div>
|
||
<div class="info-value">{{ lastListItem.investmentCompletionRate || 'XXX' }}
|
||
</div>
|
||
</div>
|
||
<div class="info-row">
|
||
<div class="info-label">{{
|
||
t('postInvestmentEvaluationForm.progressReportInfo.cumulativePaymentToMonthEnd') }}</div>
|
||
<div class="info-value">{{ lastListItem.cumulativeInvestmentToDate || 'XXX' }}
|
||
</div>
|
||
<div class="info-label">{{
|
||
t('postInvestmentEvaluationForm.progressReportInfo.paymentCompletionRate') }}
|
||
</div>
|
||
<div class="info-value">{{ lastListItem.paymentCompletionRate || 'XXX' }}</div>
|
||
</div>
|
||
<div class="info-row info-row-single">
|
||
<div class="info-label">{{ t('postInvestmentEvaluationForm.progressReportInfo.effectiveness') }}
|
||
</div>
|
||
<div class="info-value">{{ lastListItem.achievements || 'XXX' }}</div>
|
||
</div>
|
||
<div class="info-row info-row-single">
|
||
<div class="info-label">{{
|
||
t('postInvestmentEvaluationForm.progressReportInfo.coordinationMatters') }}
|
||
</div>
|
||
<div class="info-value">{{lastListItem.coordinationIssues || 'XXX' }}</div>
|
||
</div>
|
||
<div class="info-row info-row-single">
|
||
<div class="info-label">{{
|
||
t('postInvestmentEvaluationForm.progressReportInfo.nextWorkArrangements') }}
|
||
</div>
|
||
<div class="info-value">{{ lastListItem.nextWorkPlan || 'XXX' }}</div>
|
||
</div>
|
||
<div class="info-row info-row-single">
|
||
<div class="info-label">{{
|
||
t('postInvestmentEvaluationForm.progressReportInfo.currentStageEvidenceMaterials') }}</div>
|
||
<div class="info-value">
|
||
<UploadFile :modelValue="JSON.parse(lastListItem.supportingDocuments || '[]') || []"
|
||
:fileSize="20" type="simple" :limit="10" :isShowTip="false" disabled/>
|
||
</div>
|
||
</div>
|
||
<div class="info-row info-row-single">
|
||
<div class="info-label">{{ t('postInvestmentEvaluationForm.progressReportInfo.remark') }}</div>
|
||
<div class="info-value">{{ lastListItem.remarks || 'XXX' }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="project-records-section">
|
||
<el-tabs v-model="activeTab" class="project-records-tabs">
|
||
<el-tab-pane :label="t('postInvestmentEvaluationForm.projectRecords.adjustmentRecord')"
|
||
name="adjustment">
|
||
<el-table :data="projectRecordsData.adjustmentRecords" border style="width: 100%"
|
||
class="project-records-table">
|
||
<el-table-column type="index"
|
||
:label="t('postInvestmentEvaluationForm.projectRecords.index')" width="60"
|
||
align="center" />
|
||
<el-table-column prop="projectName"
|
||
:label="t('postInvestmentEvaluationForm.projectRecords.projectName')" min-width="150"
|
||
align="center">
|
||
<template #default="{ row }">
|
||
<el-button link type="primary">{{ row.projectName || 'XXX' }}</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="projectOverview"
|
||
:label="t('postInvestmentEvaluationForm.projectRecords.projectOverview')"
|
||
min-width="150" align="center" />
|
||
<el-table-column prop="projectPlan"
|
||
:label="t('postInvestmentEvaluationForm.projectRecords.projectPlan')" min-width="120"
|
||
align="center" />
|
||
<el-table-column prop="attachments"
|
||
:label="t('postInvestmentEvaluationForm.projectRecords.attachments')" min-width="100"
|
||
align="center" />
|
||
<el-table-column prop="projectNature"
|
||
:label="t('postInvestmentEvaluationForm.projectRecords.projectNature')" min-width="120"
|
||
align="center" />
|
||
<el-table-column prop="projectDirection"
|
||
:label="t('postInvestmentEvaluationForm.projectRecords.projectDirection')"
|
||
min-width="120" align="center" />
|
||
<el-table-column prop="projectImplementationStart"
|
||
:label="t('postInvestmentEvaluationForm.projectRecords.projectImplementationStart')"
|
||
min-width="160" align="center" />
|
||
<el-table-column prop="projectImplementationEnd"
|
||
:label="t('postInvestmentEvaluationForm.projectRecords.projectImplementationEnd')"
|
||
min-width="160" align="center" />
|
||
<el-table-column prop="totalInvestmentAmount"
|
||
:label="t('postInvestmentEvaluationForm.projectRecords.totalInvestmentAmount')"
|
||
min-width="140" align="center" />
|
||
<el-table-column prop="handler"
|
||
:label="t('postInvestmentEvaluationForm.projectRecords.handler')" min-width="100"
|
||
align="center" />
|
||
<el-table-column prop="updateTime"
|
||
:label="t('postInvestmentEvaluationForm.projectRecords.updateTime')" min-width="160"
|
||
align="center" />
|
||
</el-table>
|
||
</el-tab-pane>
|
||
<el-tab-pane :label="t('postInvestmentEvaluationForm.projectRecords.progressDeclarationRecord')"
|
||
name="progress">
|
||
<el-table :data="projectRecordsData.progressRecords" border style="width: 100%"
|
||
class="project-records-table">
|
||
<el-table-column type="index"
|
||
:label="t('postInvestmentEvaluationForm.projectRecords.index')" width="60"
|
||
align="center" />
|
||
<el-table-column prop="projectName" :label="t('progressReportRecord.table.projectName')"
|
||
min-width="200" />
|
||
<el-table-column prop="annualReport" :label="t('progressReportRecord.table.reportDate')" min-width="120"
|
||
sortable />
|
||
<el-table-column prop="implementingBody"
|
||
:label="t('progressReportRecord.table.projectImplementationUnit')" min-width="200" />
|
||
<el-table-column prop="isFinalApplication" :label="t('progressReportRecord.table.isLastDeclaration')"
|
||
min-width="160" >
|
||
<template #default="{ row }">
|
||
{{row.isFinalApplication === 1 ? t('planApply.common.yes') : t('planApply.common.no')}}
|
||
</template>
|
||
|
||
</el-table-column>
|
||
<el-table-column prop="projectStatus" :label="t('progressReportRecord.table.projectStatus')"
|
||
min-width="120" >
|
||
<template #default="{row}">
|
||
{{initTypeString(projectStatusOptions,row.projectStatus)}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="constructionStage" :label="t('progressReportRecord.table.constructionStage')"
|
||
min-width="120" >
|
||
<template #default="{row}">
|
||
{{initTypeString(constructionStageOptions,row.constructionStage)}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="investmentPlanCompletionRate"
|
||
:label="t('progressReportRecord.table.currentYearPlannedImageTotal')" min-width="180" />
|
||
<el-table-column prop="ytdRemainingInvestment"
|
||
:label="t('progressReportRecord.table.enterpriseCumulativeInvestmentToMonthEnd')" min-width="200" />
|
||
<el-table-column prop="investmentCompletionRate"
|
||
:label="t('progressReportRecord.table.currentYearImageCompletion')" min-width="180" />
|
||
<el-table-column prop="projectTotalAmount"
|
||
:label="t('progressReportRecord.table.totalInvestmentAmount')" min-width="160" />
|
||
<el-table-column prop="cumulativeInvestmentToDate"
|
||
:label="t('progressReportRecord.table.cumulativeInvestmentToMonthEnd')" min-width="200" />
|
||
<el-table-column prop="completionRate" :label="t('progressReportRecord.table.totalCompletionRate')"
|
||
min-width="140" />
|
||
<el-table-column prop="achievements" :label="t('progressReportRecord.table.effectiveness')"
|
||
min-width="120" />
|
||
<el-table-column prop="coordinationIssues" :label="t('progressReportRecord.table.coordinationMatters')"
|
||
min-width="160" />
|
||
<el-table-column prop="nextWorkPlan"
|
||
:label="t('progressReportRecord.table.nextWorkArrangements')" min-width="160" />
|
||
<el-table-column prop="updateBy" :label="t('progressReportRecord.table.lastUpdater')"
|
||
min-width="140" />
|
||
<el-table-column prop="updateTime" :label="t('progressReportRecord.table.lastUpdateTime')"
|
||
min-width="180" />
|
||
</el-table>
|
||
</el-tab-pane>
|
||
<el-tab-pane
|
||
:label="t('postInvestmentEvaluationForm.projectRecords.postInvestmentEvaluationRecord')"
|
||
name="evaluation">
|
||
<el-table :data="projectRecordsData.evaluationRecords" border style="width: 100%"
|
||
class="project-records-table">
|
||
<el-table-column type="index"
|
||
:label="t('postInvestmentEvaluationForm.projectRecords.index')" width="60"
|
||
align="center" />
|
||
<el-table-column prop="actualTotalIncome"
|
||
:label="t('postInvestmentEvaluationForm.projectRecords.actualTotalIncome')"
|
||
min-width="140" align="center" />
|
||
<el-table-column prop="actualInvestmentGain"
|
||
:label="t('postInvestmentEvaluationForm.projectRecords.actualInvestmentIncome')"
|
||
min-width="140" align="center" />
|
||
<el-table-column prop="actualInvestmentReturnRate"
|
||
:label="t('postInvestmentEvaluationForm.projectRecords.actualInvestmentIncomeRate')"
|
||
min-width="160" align="center" />
|
||
<el-table-column prop="attachmentUrl"
|
||
:label="t('postInvestmentEvaluationForm.projectRecords.attachments')" min-width="100"
|
||
align="center" >
|
||
<template #default="{row}">
|
||
<UploadFile :modelValue="JSON.parse(row.attachmentUrl || '[]') || []" :fileSize="20" type="simple" :limit="10"
|
||
:isShowTip="false" disabled />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="createBy"
|
||
:label="t('postInvestmentEvaluationForm.projectRecords.handler')" min-width="100"
|
||
align="center" />
|
||
<el-table-column prop="createTime"
|
||
:label="t('postInvestmentEvaluationForm.projectRecords.reportingTime')" min-width="160"
|
||
align="center" />
|
||
</el-table>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { reactive, watch, ref } from 'vue';
|
||
import { useI18n } from 'vue-i18n';
|
||
import UploadFile from '/@/components/Upload/index.vue';
|
||
import {
|
||
cityStrategyOptions,
|
||
constructionNatureOptions, constructionStageOptions,
|
||
Enums, investmentAreaOptions, investmentCategoryOptions, mainBusinessOptions, projectDirectionDetailsOptions,
|
||
projectImportantOptions, projectNatureOptions,
|
||
projectSourceOptions, projectStatusOptions, strategicIndustryOptions,projectDirectionOptions,
|
||
yesOrNo
|
||
} from '/@/hooks/enums';
|
||
import { PostInvestmentEvaluation, ProjectInvestmentInfo } from '/@/views/invBid/postInvestmentEvaluation/interface/type';
|
||
import { InvestmentProjectProgress } from '/@/views/invMid/progressReport/interface/type';
|
||
import { FormInstance, FormRules } from 'element-plus';
|
||
|
||
// 国际化
|
||
const { t } = useI18n();
|
||
|
||
/**
|
||
* 项目记录标签页状态
|
||
*/
|
||
const activeTab = ref('adjustment');
|
||
|
||
/**
|
||
* 项目记录数据
|
||
*/
|
||
const projectRecordsData:{
|
||
adjustmentRecords: InvestmentProjectProgress[];
|
||
progressRecords: InvestmentProjectProgress[];
|
||
evaluationRecords: PostInvestmentEvaluation[];
|
||
} = reactive({
|
||
// 调整记录
|
||
adjustmentRecords: [],
|
||
// 进度记录
|
||
progressRecords: [],
|
||
// 后评价记录
|
||
evaluationRecords: []
|
||
});
|
||
|
||
/**
|
||
* 组件属性定义
|
||
*/
|
||
const props = defineProps<{
|
||
/**
|
||
* 表单数据模型
|
||
*/
|
||
modelValue: ProjectInvestmentInfo;
|
||
}>();
|
||
|
||
/**
|
||
* 事件发射器定义
|
||
*/
|
||
const emit = defineEmits<{
|
||
/**
|
||
* 更新表单数据事件
|
||
* @param e
|
||
* @param value 新的表单数据
|
||
*/
|
||
(e: 'update:modelValue', value: ProjectInvestmentInfo): void;
|
||
}>();
|
||
|
||
/**
|
||
* 默认表单数据
|
||
*/
|
||
const defaultForm: ProjectInvestmentInfo = {
|
||
// 来自ProjectPlanApplyFormItem的字段（这些字段已经在ProjectPlanApplyFormItem中定义）
|
||
id: undefined,
|
||
projectName: '',
|
||
projectNature: '',
|
||
groupCompany: '',
|
||
projectOwnerUnit: '',
|
||
projectMainEntity: '',
|
||
investmentCategory: '',
|
||
investmentArea: '',
|
||
projectAddress: '',
|
||
projectAddressDetail: '',
|
||
projectInvestmentDirection: '',
|
||
investmentDirectionSegmentation: '',
|
||
constructionNature: '',
|
||
keyProject: '',
|
||
isMainBusiness: '',
|
||
mainBusinessTypes: '',
|
||
mainBusinessCode: '',
|
||
isManufacturingIndustry: '',
|
||
urbanStrategy: '',
|
||
projectSource: '',
|
||
majorInvestmentProjects: '',
|
||
isStrategicEmergingIndustries: '',
|
||
projectStartTime: '',
|
||
projectEndTime: '',
|
||
planInvestmentYear: '',
|
||
planPaymentLimit: '',
|
||
ownedFunds: '',
|
||
financialFunds: '',
|
||
externalRaisedCapital: '',
|
||
otherFunds: '',
|
||
governmentFundSourceDesc: '',
|
||
otherFundSourceDesc: '',
|
||
projectTotalAmount: '',
|
||
lastYearCompleted: '',
|
||
ourInvestmentTotalAmount: '',
|
||
ourLastYearCompleted: '',
|
||
projectDesc: '',
|
||
projectPreliminaryPlan: '',
|
||
projectPreliminaryPlanAttachment: '',
|
||
remark: '',
|
||
decisionType: '',
|
||
isProjectApprovalCompleted: '',
|
||
isDecisionProcedureCompleted: '',
|
||
projectApprovalFileNo: '',
|
||
projectApprovalFileInfo: '',
|
||
decisionProcedureFileNo: '',
|
||
decisionFileInfo: '',
|
||
planImageQuota:'',
|
||
// 其他字段
|
||
projectInvestmentEntities: [],
|
||
};
|
||
|
||
/**
|
||
* 表单响应式数据
|
||
*/
|
||
const formData = reactive<ProjectInvestmentInfo>({ ...defaultForm });
|
||
/**
|
||
* 提交数据表单
|
||
* */
|
||
const submitFormData = ref<PostInvestmentEvaluation>({} as PostInvestmentEvaluation);
|
||
const requiredRule = [{ required: true, message: `该字段必填` },{validator: (rule: any, value:any,callback: (e?: Error) => void) => {
|
||
// 检查是否为空值
|
||
if (value === '' || value === null || value === undefined) {
|
||
callback()
|
||
return
|
||
}
|
||
// 检查是否为有效数字
|
||
const numValue = Number(value)
|
||
if (!isNaN(numValue) && isFinite(numValue)) {
|
||
callback()
|
||
} else {
|
||
callback(new Error(`必须是一个数字`))
|
||
}
|
||
}}]
|
||
const rules = ref<FormRules<PostInvestmentEvaluation>>({
|
||
actualTotalIncome: requiredRule,
|
||
actualInvestmentGain:requiredRule,
|
||
actualInvestmentReturnRate:[requiredRule[0]],
|
||
})
|
||
const submitFormDataRef = ref<FormInstance>()
|
||
/**
|
||
* 初始化时将props.modelValue映射到formData
|
||
*/
|
||
if (props.modelValue) {
|
||
const mappedData: ProjectInvestmentInfo = {
|
||
...props.modelValue,
|
||
};
|
||
Object.assign(formData, mappedData);
|
||
}
|
||
const lastListItem = ref<InvestmentProjectProgress>({} as InvestmentProjectProgress)
|
||
/**
|
||
* 监听 formData 变化，同步到父组件
|
||
*/
|
||
watch(
|
||
formData,
|
||
() => {
|
||
// 构造符合ProjectPlanApplyFormItem接口的数据
|
||
const projectPlanData: ProjectInvestmentInfo = {
|
||
...formData
|
||
};
|
||
emit('update:modelValue', projectPlanData as ProjectInvestmentInfo);
|
||
},
|
||
{ deep: true }
|
||
);
|
||
|
||
/**
|
||
* 监听 props.modelValue 变化，同步到 formData
|
||
*/
|
||
watch(
|
||
() => props.modelValue,
|
||
(newVal) => {
|
||
if (newVal) {
|
||
// 将ProjectPlanApplyFormItem的字段映射到PostInvestmentEvaluationFormData
|
||
const mappedData: ProjectInvestmentInfo = {
|
||
...newVal,
|
||
};
|
||
if (newVal.id != null) {
|
||
submitFormData.value.projectId = newVal.id;
|
||
}
|
||
lastListItem.value = (newVal.investmentProjectsProgressEntities && newVal.investmentProjectsProgressEntities.length > 0) ? newVal.investmentProjectsProgressEntities[newVal.investmentProjectsProgressEntities.length - 1] : {} as InvestmentProjectProgress;
|
||
Object.assign(formData, mappedData);
|
||
projectRecordsData.progressRecords = newVal.investmentProjectsProgressEntities || []
|
||
projectRecordsData.evaluationRecords = newVal.evaluationRecordEntities || []
|
||
}
|
||
},
|
||
{ immediate: true, deep: true }
|
||
);
|
||
const actualInvestmentReturnRate = ref('');
|
||
watch(()=>submitFormData.value,(newData)=>{
|
||
// actualInvestmentReturnRate = newData.actualInvestmentGain / newData.actualTotalIncome;
|
||
submitFormData.value.actualInvestmentReturnRate = calculateReturnRate(newData.actualInvestmentGain,newData.actualTotalIncome)
|
||
actualInvestmentReturnRate.value = submitFormData.value.actualInvestmentReturnRate.toFixed(2)
|
||
},{deep:true})
|
||
/**
|
||
* 根据枚举值获取对应的标签文本
|
||
* @param enums 枚举数组
|
||
* @param type 枚举值
|
||
* @returns 对应的标签文本
|
||
*/
|
||
const initTypeString = (enums: Enums[], type: string) => {
|
||
return enums.find(item => item.value === type)?.label;
|
||
}
|
||
// 计算实际投资收益率
|
||
const calculateReturnRate = (totalIncome: string | number,investmentIncome: string | number) => {
|
||
if (!investmentIncome || !totalIncome) {
|
||
return 0;
|
||
}
|
||
|
||
// 转换为数字
|
||
const income = parseFloat(investmentIncome as string);
|
||
const total = parseFloat(totalIncome as string);
|
||
|
||
// 检查是否为有效数字
|
||
if (isNaN(income) || isNaN(total)) {
|
||
return 0;
|
||
}
|
||
|
||
// 计算投资本金 = 总收入 - 投资收益
|
||
const principal = income;
|
||
|
||
// 避免除零错误
|
||
if (principal <= 0) {
|
||
return 0;
|
||
}
|
||
|
||
// 计算投资收益率：投资收益 / 投资本金
|
||
let rate = (total / income) * 100;
|
||
return rate;
|
||
};
|
||
defineExpose({
|
||
validateRefFn: async ()=>{
|
||
const res = await submitFormDataRef.value?.validate();
|
||
if (res){
|
||
return submitFormData.value;
|
||
}
|
||
return false
|
||
},
|
||
})
|
||
const uploadChange = (type:number,_:any,data:any[],index?:number) => {
|
||
if (!data || Object.prototype.toString.call(data) !== '[object Array]' || data.length < 1){
|
||
if (type === 1){
|
||
submitFormData.value.attachmentUrl = []
|
||
}
|
||
if (type === 2){
|
||
formData.projectPreliminaryPlanAttachment = []
|
||
}
|
||
if (type === 3){
|
||
lastListItem.value.supportingDocuments = []
|
||
}
|
||
if (type === 4 && index != null){
|
||
projectRecordsData.evaluationRecords[index].attachmentUrl = []
|
||
}
|
||
}
|
||
const newData = data.map(item =>{
|
||
return {
|
||
name: item.name,
|
||
url: item.url,
|
||
}
|
||
})
|
||
if (type === 1){
|
||
submitFormData.value.attachmentUrl = newData
|
||
}
|
||
if (type === 2){
|
||
formData.projectPreliminaryPlanAttachment = newData
|
||
}
|
||
if (type === 3){
|
||
lastListItem.value.supportingDocuments = newData
|
||
}
|
||
if (type === 4 && index != null){
|
||
projectRecordsData.evaluationRecords[index].attachmentUrl = newData
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.post-investment-evaluation-form {
|
||
background: #fff;
|
||
border-radius: 4px;
|
||
padding: 20px;
|
||
border: 1px solid var(--el-border-color-light);
|
||
}
|
||
|
||
.form-section-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--el-text-color-primary);
|
||
margin: 0 0 20px;
|
||
padding-left: 10px;
|
||
border-left: 4px solid var(--el-color-primary);
|
||
}
|
||
|
||
.evaluation-form {
|
||
width: 100%;
|
||
}
|
||
|
||
/* 表单 label 左对齐 */
|
||
.evaluation-form :deep(.el-form-item__label) {
|
||
text-align: left;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
/* 必填字段标签显示为红色 */
|
||
.evaluation-form :deep(.el-form-item.is-required .el-form-item__label) {
|
||
color: var(--el-color-danger);
|
||
}
|
||
|
||
.form-row {
|
||
margin-bottom: 16px;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.form-row:last-of-type {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.basic-info-section {
|
||
margin-top: 40px;
|
||
}
|
||
|
||
.basic-info-table,
|
||
.additional-info-table {
|
||
border: 1px solid var(--el-border-color-light);
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.additional-info-table {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.decision-info-section {
|
||
margin-top: 40px;
|
||
}
|
||
|
||
.decision-info-table {
|
||
border: 1px solid var(--el-border-color-light);
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.progress-report-info-section {
|
||
margin-top: 40px;
|
||
}
|
||
|
||
.progress-report-info-table {
|
||
border: 1px solid var(--el-border-color-light);
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.project-records-section {
|
||
margin-top: 40px;
|
||
}
|
||
|
||
.project-records-tabs {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.project-records-table {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.annual-investment-plan-section {
|
||
margin-top: 40px;
|
||
}
|
||
|
||
.annual-plan-table {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.annual-plan-table :deep(.el-table__cell) {
|
||
padding: 8px 0;
|
||
}
|
||
|
||
.annual-plan-table :deep(.el-input) {
|
||
width: 100%;
|
||
}
|
||
|
||
.info-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||
}
|
||
|
||
.info-row-full {
|
||
grid-template-columns: 1fr 3fr;
|
||
}
|
||
|
||
.info-row-single {
|
||
grid-template-columns: 1fr 3fr;
|
||
}
|
||
|
||
.info-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.info-label {
|
||
background-color: #f0f7ff;
|
||
padding: 12px 16px;
|
||
border-right: 1px solid var(--el-border-color-lighter);
|
||
font-weight: 500;
|
||
color: var(--el-text-color-primary);
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.info-label.required {
|
||
color: var(--el-color-danger);
|
||
}
|
||
|
||
.info-value {
|
||
background-color: #fff;
|
||
padding: 12px 16px;
|
||
border-right: 1px solid var(--el-border-color-lighter);
|
||
color: var(--el-text-color-primary);
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.info-value-full {
|
||
border-right: none;
|
||
}
|
||
|
||
.info-row .info-value:last-child {
|
||
border-right: none;
|
||
}
|
||
</style> |