first commit
This commit is contained in:
710
src/components/investment/common/ProjectPlanApplyFormDetails.vue
Normal file
710
src/components/investment/common/ProjectPlanApplyFormDetails.vue
Normal file
@@ -0,0 +1,710 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user