779 lines
34 KiB
Vue
779 lines
34 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:'',
|
|
status:0,
|
|
deptId:0,
|
|
processInstanceId:'',
|
|
},
|
|
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>
|