711 lines
31 KiB
Vue
711 lines
31 KiB
Vue
<template>
|
|
<div class="project-plan-apply-form border-r border-[#e5e7eb]">
|
|
<FlowFormView :process-instance-id="processInstanceId"/>
|
|
<div style="display: flex;justify-content: space-between;align-items: center">
|
|
<div class="form-section-title">
|
|
{{ t('planApply.applySection.title') }}
|
|
</div>
|
|
<div class="page-title">{{ title ? title : '' }}</div>
|
|
<div class="page-unit">
|
|
{{ t('planApply.detail.unitLabel') }}
|
|
</div>
|
|
</div>
|
|
<el-form :model="formData" label-width="165px" class="plan-form" :rules="rules" ref="useForm">
|
|
<el-row :gutter="20" class="form-row">
|
|
<el-col :span="24">
|
|
<el-form-item :label="t('planApply.applySection.projectName')" required prop="entity.projectName">
|
|
<template #label>
|
|
<span style="color: var(--el-text-color-regular)">{{t('planApply.applySection.projectName')}}</span>
|
|
</template>
|
|
<span>{{formData.entity.projectName}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20" class="form-row">
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('planApply.applySection.groupName')" required prop="entity.groupCompany">
|
|
<template #label>
|
|
<span style="color: var(--el-text-color-regular)">{{t('planApply.applySection.groupName')}}</span>
|
|
</template>
|
|
<span>{{formData.entity.groupCompany}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('planApply.applySection.projectNature')">
|
|
<span>{{projectNatureOptions.find((item:Enums) => item.value === formData.entity.projectNature)?.label}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20" class="form-row">
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('planApply.applySection.projectMainUnit')" required prop="entity.projectMainEntity">
|
|
<span>{{formData.entity.projectMainEntity}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('reserveRegistration.basicInfo.projectOwnerUnit')">
|
|
<span>{{formData.entity.projectOwnerUnit}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20" class="form-row">
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('planApply.applySection.investmentCategory')" required prop="entity.investmentCategory">
|
|
<template #label>
|
|
<span style="color: var(--el-text-color-regular)">{{t('planApply.applySection.investmentCategory')}}</span>
|
|
</template>
|
|
<span>{{investmentCategoryOptions.find((item:Enums) => item.value === formData.entity.investmentCategory)?.label}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('planApply.applySection.investmentType')" required prop="entity.investmentArea">
|
|
<template #label>
|
|
<span style="color: var(--el-text-color-regular)">{{t('planApply.applySection.investmentType')}}</span>
|
|
</template>
|
|
<span>{{investmentAreaOptions.find((item:Enums) => item.value ===formData.entity.investmentArea)?.label}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20" class="form-row">
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('planApply.applySection.projectAddress')" required prop="entity.projectAddress">
|
|
<template #label>
|
|
<span style="color: var(--el-text-color-regular)">{{t('planApply.applySection.projectAddress')}}</span>
|
|
</template>
|
|
<span>{{formData.entity.projectAddress}}</span>
|
|
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('planApply.applySection.projectDetailAddress')" required prop="entity.projectAddressDetail">
|
|
<template #label>
|
|
<span style="color: var(--el-text-color-regular)">{{t('planApply.applySection.projectDetailAddress')}}</span>
|
|
</template>
|
|
<span>{{formData.entity.projectAddressDetail}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20" class="form-row">
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('reserveRegistration.basicInfo.projectDirection')" required prop="entity.projectInvestmentDirection">
|
|
<span>{{formData.entity.projectInvestmentDirection}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('reserveRegistration.basicInfo.directionSubdivision')" required prop="entity.investmentDirectionSegmentation">
|
|
<template #label>
|
|
<span style="color: var(--el-text-color-regular)">{{t('reserveRegistration.basicInfo.directionSubdivision')}}</span>
|
|
</template>
|
|
<span>{{projectDirectionDetailsOptions.find((item:Enums) => item.value ===formData.entity.investmentDirectionSegmentation)?.label}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20" class="form-row">
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('reserveRegistration.basicInfo.projectSource')" required prop="entity.projectSource">
|
|
<template #label>
|
|
<span style="color: var(--el-text-color-regular)">{{t('reserveRegistration.basicInfo.projectSource')}}</span>
|
|
</template>
|
|
<span>{{projectSourceOptions.find((item:Enums) => item.value === formData.entity.projectSource)?.label}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('planApply.applySection.constructionNature')" required prop="entity.constructionNature">
|
|
<template #label>
|
|
<span style="color: var(--el-text-color-regular)">{{t('planApply.applySection.constructionNature')}}</span>
|
|
</template>
|
|
<span>{{constructionNatureOptions.find((item:Enums) => item.value === formData.entity.constructionNature)?.label}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20" class="form-row">
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('reserveRegistration.basicInfo.majorInvestmentProject')" required prop="entity.majorInvestmentProjects">
|
|
<span>{{formData.entity.majorInvestmentProjects}}</span>
|
|
</el-form-item>
|
|
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('planApply.applySection.keyProject')" required prop="entity.keyProject">
|
|
<span>{{projectImportantOptions.find((item:Enums) => item.value === formData.entity.keyProject)?.label}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20" class="form-row">
|
|
<el-col :span=" 12">
|
|
<el-form-item :label="t('planApply.applySection.isWithinMainBusiness')" required prop="entity.isMainBusiness">
|
|
<span>{{formData.entity.isMainBusiness == t('planApply.common.yes') ? t('planApply.common.yes') : t('planApply.common.no')}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('planApply.applySection.mainBusinessType')" :required="formData.entity.isMainBusiness === t('planApply.common.yes')" prop="entity.mainBusinessTypes">
|
|
<span>{{mainBusinessOptions.find((item:Enums) => item.value === formData.entity.mainBusinessTypes)?.label}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20" class="form-row">
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('reserveRegistration.basicInfo.mainBusinessCode')" required prop="entity.mainBusinessCode">
|
|
<span>{{formData.entity.mainBusinessTypes}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('planApply.applySection.isManufacturing')" required prop="entity.isManufacturingIndustry">
|
|
<span>{{formData.entity.isManufacturingIndustry == t('planApply.common.yes') ? t('planApply.common.yes') : t('planApply.common.no')}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20" class="form-row">
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('reserveRegistration.basicInfo.strategicEmergingIndustry')" required prop="entity.isStrategicEmergingIndustries">
|
|
<span>{{strategicIndustryOptions.find((item:Enums) => item.value === formData.entity.isStrategicEmergingIndustries)?.label}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('planApply.applySection.cityStrategy')" required prop="entity.urbanStrategy">
|
|
<span>{{cityStrategyOptions.find((item:Enums) => item.value === formData.entity.urbanStrategy)?.label}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20" class="form-row">
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('planApply.applySection.projectImplementationStart')" required prop="entity.projectStartTime">
|
|
<span>{{formData.entity.projectStartTime}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('planApply.applySection.projectImplementationEnd')" required prop="entity.projectEndTime">
|
|
<span>{{formData.entity.projectEndTime}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20" class="plan-investment-block">
|
|
<el-col :span="12">
|
|
<div class="plan-investment-panel left-panel">
|
|
<div class="panel-title">{{ t('planApply.planInvestment.currentYearTotalTitle') }}</div>
|
|
<div style="flex: 1;">
|
|
<el-form-item style="height: 82px;" :label="t('planApply.planInvestment.planYear')">
|
|
<span>{{formData.entity.planInvestmentYear}}</span>
|
|
</el-form-item>
|
|
<el-form-item style="height: 82px;" :label="t('planApply.planInvestment.plannedImageQuota')"
|
|
required prop="entity.planImageQuota">
|
|
<span>{{formData.entity.planImageQuota}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
|
|
</el-form-item>
|
|
<el-form-item style="height: 82px;" :label="t('planApply.planInvestment.annualPlanPayment')"
|
|
required prop="entity.planPaymentLimit">
|
|
<span>{{formData.entity.planPaymentLimit}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="plan-investment-panel right-panel">
|
|
<div class="panel-title">{{ t('planApply.planInvestment.currentYearFundingTitle') }}</div>
|
|
<div style="flex: 1;">
|
|
<el-form-item :label="t('planApply.investmentEstimate.capitalFunding')" required prop="entity.ownedFunds">
|
|
<span>{{formData.entity.ownedFunds}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
|
|
</el-form-item>
|
|
<el-form-item :label="t('planApply.investmentEstimate.financialFunding')" required prop="entity.financialFunds">
|
|
<span>{{formData.entity.financialFunds}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
|
|
</el-form-item>
|
|
<el-form-item :label="t('planApply.investmentEstimate.externalRaisedFunds')" required prop="entity.externalRaisedCapital">
|
|
|
|
<span>{{formData.entity.externalRaisedCapital}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
|
|
</el-form-item>
|
|
<el-form-item :label="t('planApply.investmentEstimate.otherFunding')" required prop="entity.otherFunds">
|
|
<span>{{formData.entity.otherFunds}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
|
|
</el-form-item>
|
|
<el-form-item :label="t('planApply.investmentEstimate.financialFundingDescription')">
|
|
<span>{{formData.entity.governmentFundSourceDesc}}</span>
|
|
</el-form-item>
|
|
<el-form-item :label="t('planApply.investmentEstimate.otherFundingDescription')">
|
|
<span>{{formData.entity.otherFundSourceDesc}}</span>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20" class="form-row">
|
|
<el-col :span="24">
|
|
<el-form-item :label="t('planApply.applySection.projectOverview')" required prop="entity.projectDesc">
|
|
<span>{{formData.entity.projectDesc}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row class="form-row">
|
|
<el-col :span="24">
|
|
<el-form-item :label="t('planApply.applySection.projectInitialPlan')">
|
|
<span>{{formData.entity.projectPreliminaryPlan}}</span>
|
|
</el-form-item>
|
|
<el-form-item :label="t('planApply.headerForm.attachments')">
|
|
<UploadFile :modelValue="formData.entity.projectPreliminaryPlanAttachment" :fileSize="20" type="simple" :limit="10"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row class="form-row">
|
|
<el-col :span="24">
|
|
<el-form-item :label="t('planApply.applySection.remark')">
|
|
<span>{{formData.entity.remark}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
|
|
<div class="form-section-title">{{ t('planApply.investmentStatus.title') }}</div>
|
|
<el-row :gutter="20" class="form-row">
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('planApply.investmentStatus.totalInvestmentAmount')" required prop="entity.projectTotalAmount">
|
|
<span>{{formData.entity.projectTotalAmount}}{{t('planApply.investmentEstimate.unitSuffix')}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('planApply.investmentStatus.cumulativeInvestmentLastYear')" required prop="entity.lastYearCompleted">
|
|
<span>{{formData.entity.lastYearCompleted}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20" class="form-row">
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('planApply.investmentStatus.ourTotalInvestmentAmount')" required prop="entity.ourInvestmentTotalAmount">
|
|
|
|
<span>{{formData.entity.ourInvestmentTotalAmount}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('planApply.investmentStatus.ourCumulativeInvestmentLastYear')" required prop="entity.ourLastYearCompleted">
|
|
|
|
<span>{{formData.entity.ourLastYearCompleted}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<div class="form-section-title">{{ t('planApply.annualInvestmentInfo.title') }}</div>
|
|
<div class="table-actions" v-if="isEdit">
|
|
<el-button type="primary" @click="handleAddAnnualInvestment">
|
|
{{ t('planApply.annualInvestmentInfo.add') }}
|
|
</el-button>
|
|
<el-button @click="handleCopyAnnualInvestment">
|
|
{{ t('planApply.annualInvestmentInfo.copy') }}
|
|
</el-button>
|
|
<el-button @click="handleRemoveAnnualInvestment">
|
|
{{ t('planApply.annualInvestmentInfo.remove') }}
|
|
</el-button>
|
|
<el-button @click="handleRemoveAllAnnualInvestment">
|
|
{{ t('planApply.annualInvestmentInfo.removeAll') }}
|
|
</el-button>
|
|
</div>
|
|
<el-table :data="formData.investmentProjects" border style="width: 100%" class="annual-investment-table">
|
|
<el-table-column width="60" align="center">
|
|
<template>
|
|
<el-radio v-model="selectedAnnualInvestmentIndex" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="t('planApply.annualInvestmentInfo.table.index')" width="60" align="center">
|
|
<template #default="{ $index }">
|
|
{{ $index + 1 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="t('planApply.annualInvestmentInfo.table.planYear')" min-width="140">
|
|
<template #default="{ row }">
|
|
<span>{{row.plannedInvestmentYear}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="t('planApply.annualInvestmentInfo.table.plannedImageQuota')" min-width="160">
|
|
<template #default="{ row }">
|
|
<span>{{row.plannedImageAmount}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="t('planApply.annualInvestmentInfo.table.annualPlanPayment')" min-width="160">
|
|
<template #default="{ row }">
|
|
<span>{{row.plannedPaymentAmount}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="t('planApply.annualInvestmentInfo.table.fundingSources')" align="center">
|
|
<el-table-column :label="t('planApply.annualInvestmentInfo.table.capitalFunding')" min-width="140">
|
|
<template #default="{ row }">
|
|
<span>{{row.selfFunding}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="t('planApply.annualInvestmentInfo.table.externalRaisedFunds')"
|
|
min-width="150">
|
|
<template #default="{ row }">
|
|
<span>{{row.fiscalFunding}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="t('planApply.annualInvestmentInfo.table.financialFunding')"
|
|
min-width="140">
|
|
<template #default="{ row }">
|
|
<span>{{row.fiscalFunding}}{{ t('planApply.investmentEstimate.unitSuffix') }} </span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="t('planApply.annualInvestmentInfo.table.otherFunding')" min-width="140">
|
|
<template #default="{ row }">
|
|
<span>{{row.otherFunding}}{{ t('planApply.investmentEstimate.unitSuffix') }} </span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="t('planApply.annualInvestmentInfo.table.financialFundingDescription')"
|
|
min-width="200">
|
|
<template #default="{ row }">
|
|
<span>{{row.fiscalFundingSource}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="t('planApply.annualInvestmentInfo.table.otherFundingDescription')"
|
|
min-width="200">
|
|
<template #default="{ row }">
|
|
<span>{{row.otherFundingSource}}{{ t('planApply.investmentEstimate.unitSuffix') }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="form-section-title">{{ t('planApply.decisionInfo.title') }}</div>
|
|
<el-row :gutter="20" class="form-row">
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('planApply.decisionInfo.decisionType')">
|
|
<span>{{formData.entity.decisionType}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('planApply.decisionInfo.isCompleteEstablishmentProcedures')" required prop="entity.isProjectApprovalCompleted">
|
|
|
|
<span>{{formData.entity.isProjectApprovalCompleted}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20" class="form-row">
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('planApply.decisionInfo.establishmentDocumentNumber')">
|
|
<span>{{formData.entity.projectApprovalFileNo}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('planApply.decisionInfo.establishmentDocumentInfo')">
|
|
<span>{{formData.entity.projectApprovalFileInfo}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20" class="form-row">
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('planApply.decisionInfo.isCompleteDecisionProcedures')" required prop="entity.isDecisionProcedureCompleted">
|
|
<span>{{formData.entity.isDecisionProcedureCompleted}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item :label="t('planApply.decisionInfo.decisionProgramDocumentNumber')">
|
|
<span>{{formData.entity.decisionProcedureFileNo}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20" class="form-row">
|
|
<el-col :span="24">
|
|
<el-form-item :label="t('planApply.decisionInfo.decisionDocumentInfo')">
|
|
<span>{{formData.entity.decisionFileInfo}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, watch } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import type { InvestmentProjects,ProjectPlanApplyFormData } from "../interface/types";
|
|
import {projectNatureOptions,
|
|
investmentAreaOptions,
|
|
investmentCategoryOptions,
|
|
projectDirectionDetailsOptions,
|
|
projectSourceOptions,
|
|
constructionNatureOptions,
|
|
projectImportantOptions,
|
|
mainBusinessOptions,
|
|
strategicIndustryOptions,
|
|
cityStrategyOptions, Enums
|
|
} from "/@/hooks/enums"
|
|
import type { FormInstance, FormRules } from 'element-plus';
|
|
import FlowFormView from '/@/components/workbench/common/FlowFormView.vue'
|
|
const { t } = useI18n();
|
|
const useForm = ref<FormInstance | undefined>();
|
|
const props = withDefaults(defineProps<{
|
|
modelValue?: ProjectPlanApplyFormData;
|
|
rules?: FormRules;
|
|
isEdit: boolean;
|
|
title:string;
|
|
processInstanceId: string;
|
|
}>(), {
|
|
isEdit: true,
|
|
title:'',
|
|
processInstanceId:''
|
|
});
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', value: ProjectPlanApplyFormData): void;
|
|
}>();
|
|
|
|
const defaultForm: ProjectPlanApplyFormData = {
|
|
entity:{
|
|
id:null,
|
|
projectName: '',
|
|
projectNature: '',
|
|
groupCompany: '',
|
|
projectOwnerUnit: '',
|
|
projectMainEntity: '',
|
|
projectDepartment: '',
|
|
investmentCategory: '',
|
|
investmentArea: '',
|
|
projectAddress: '',
|
|
projectAddressDetail: '',
|
|
projectInvestmentDirection: '',
|
|
totalInvestment: '',
|
|
investmentDirectionSegmentation: '',
|
|
projectBackground: '',
|
|
constructionNature: '',
|
|
constructionStage: '',
|
|
keyProject: '',
|
|
isMainBusiness: '',
|
|
mainBusinessTypes: '',
|
|
mainBusinessCode: '',
|
|
isManufacturingIndustry: '',
|
|
isStuckIndustry: '',
|
|
urbanStrategy: '',
|
|
projectSource: '',
|
|
majorInvestmentProjects: '',
|
|
isStrategicEmergingIndustries: '',
|
|
projectStartTime: '',
|
|
projectEndTime: '',
|
|
projectConstructionContent: '',
|
|
planInvestmentYear: '',
|
|
annualPlanTotal: '',
|
|
annualPlanInvestment: '',
|
|
planPaymentLimit: '',
|
|
plannedImageAmount: '',
|
|
ownedFunds: '',
|
|
financialFunds: '',
|
|
externalFunding: '',
|
|
externalRaisedCapital: '',
|
|
otherFunds: '',
|
|
governmentFundSourceDesc: '',
|
|
otherFundSourceDesc: '',
|
|
projectTotalAmount: '',
|
|
lastYearCompleted: '',
|
|
ourInvestmentTotalAmount: '',
|
|
ourLastYearCompleted: '',
|
|
projectDesc: '',
|
|
promotionPlan: '',
|
|
projectPreliminaryPlan: '',
|
|
projectPreliminaryPlanAttachment: '',
|
|
attachments: [],
|
|
remark: '',
|
|
decisionType: '',
|
|
isProjectApprovalCompleted: '',
|
|
isDecisionProcedureCompleted: '',
|
|
projectApprovalFileNo: '',
|
|
projectApprovalFileInfo: '',
|
|
decisionProcedureFileNo: '',
|
|
decisionFileInfo: '',
|
|
submitUnitOpinion: '',
|
|
groupInvestmentDeptOpinion: '',
|
|
submitUnitLeadershipOpinion: '',
|
|
submitUnitMainLeadershipOpinion: '',
|
|
planImageQuota:'',
|
|
},
|
|
investmentProjects: [
|
|
{
|
|
plannedInvestmentYear: '',
|
|
plannedImageAmount: '',
|
|
plannedPaymentAmount: '',
|
|
selfFunding: '',
|
|
externalFunding: '',
|
|
fiscalFunding: '',
|
|
otherFunding: '',
|
|
fiscalFundingSource: '',
|
|
otherFundingSource: '',
|
|
},
|
|
],
|
|
};
|
|
|
|
const formData = ref<ProjectPlanApplyFormData>({ ...defaultForm });
|
|
|
|
const selectedAnnualInvestmentIndex = ref<number>(formData.value.investmentProjects.length > 0 ? 0 : -1);
|
|
|
|
const handleAddAnnualInvestment = () => {
|
|
const newItem: InvestmentProjects = {
|
|
plannedInvestmentYear: '',
|
|
plannedImageAmount: '',
|
|
plannedPaymentAmount: '',
|
|
selfFunding: '',
|
|
externalFunding: '',
|
|
fiscalFunding: '',
|
|
otherFunding: '',
|
|
fiscalFundingSource: '',
|
|
otherFundingSource: '',
|
|
};
|
|
formData.value.investmentProjects.push(newItem);
|
|
selectedAnnualInvestmentIndex.value = formData.value.investmentProjects.length - 1;
|
|
};
|
|
const handleCopyAnnualInvestment = () => {
|
|
if (selectedAnnualInvestmentIndex.value >= 0 && selectedAnnualInvestmentIndex.value < formData.value.investmentProjects.length) {
|
|
const selectedItem = formData.value.investmentProjects[selectedAnnualInvestmentIndex.value];
|
|
const copiedItem: InvestmentProjects = { ...selectedItem };
|
|
formData.value.investmentProjects.push(copiedItem);
|
|
selectedAnnualInvestmentIndex.value = formData.value.investmentProjects.length - 1;
|
|
}
|
|
};
|
|
|
|
const handleRemoveAnnualInvestment = () => {
|
|
if (selectedAnnualInvestmentIndex.value >= 0 && selectedAnnualInvestmentIndex.value < formData.value.investmentProjects.length) {
|
|
formData.value.investmentProjects.splice(selectedAnnualInvestmentIndex.value, 1);
|
|
if (selectedAnnualInvestmentIndex.value >= formData.value.investmentProjects.length) {
|
|
selectedAnnualInvestmentIndex.value = formData.value.investmentProjects.length - 1;
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleRemoveAllAnnualInvestment = () => {
|
|
formData.value.investmentProjects = [];
|
|
selectedAnnualInvestmentIndex.value = -1;
|
|
};
|
|
watch(
|
|
() => props.modelValue,
|
|
newVal => {
|
|
Object.assign(formData.value, newVal || {});
|
|
formData.value.entity.planInvestmentYear = String(newVal?.entity?.planInvestmentYear);
|
|
// 如果有数据且没有选中，默认选中第一行
|
|
if (formData.value.investmentProjects.length > 0 && selectedAnnualInvestmentIndex.value === -1) {
|
|
selectedAnnualInvestmentIndex.value = 0;
|
|
}
|
|
},
|
|
{ immediate: true, deep: true },
|
|
);
|
|
|
|
watch(
|
|
()=> formData.value,
|
|
() => {
|
|
emit('update:modelValue', { ...formData.value });
|
|
},
|
|
{ deep: true },
|
|
);
|
|
const validateForm = () => {
|
|
return useForm.value?.validate();
|
|
}
|
|
defineExpose({
|
|
validateForm: validateForm
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-title-row {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.page-unit {
|
|
font-size: 14px;
|
|
color: var(--el-text-color-secondary);
|
|
}
|
|
|
|
.project-plan-apply-form {
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.form-section-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--el-text-color-primary);
|
|
margin: 24px 0 16px;
|
|
padding-left: 10px;
|
|
border-left: 4px solid var(--el-color-primary);
|
|
}
|
|
|
|
.plan-form {
|
|
width: 100%;
|
|
}
|
|
|
|
/* 表单 label 左对齐 */
|
|
.plan-form :deep(.el-form-item__label) {
|
|
text-align: left;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
/* 必填字段标签显示为红色 */
|
|
/*.plan-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;
|
|
}
|
|
|
|
.sub-section-title {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: var(--el-text-color-primary);
|
|
margin: 24px 0 16px;
|
|
}
|
|
|
|
.plan-investment-panel {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center
|
|
}
|
|
|
|
.panel-title {
|
|
width: 200px;
|
|
padding-top: 0;
|
|
margin-top: 0;
|
|
}
|
|
|
|
|
|
.plan-investment-panel :deep(.el-form-item__label) {
|
|
padding-top: 0;
|
|
line-height: 32px;
|
|
}
|
|
|
|
.plan-investment-panel :deep(.el-form-item) {
|
|
align-items: center;
|
|
}
|
|
|
|
.table-actions {
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.annual-investment-table {
|
|
width: 100%;
|
|
}
|
|
|
|
.annual-investment-table :deep(.el-table__body-wrapper) {
|
|
overflow-x: auto;
|
|
}
|
|
</style>
|