<template>
|
<div class="container mx-auto px-4 py-8 bg-white">
|
<div class="max-w-4xl mx-auto">
|
<!-- 面包屑导航 -->
|
<div class="mb-6 text-gray-500">
|
<el-breadcrumb separator="/">
|
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
<el-breadcrumb-item>补贴申请</el-breadcrumb-item>
|
</el-breadcrumb>
|
</div>
|
|
<!-- 成功页面 -->
|
<div v-if="showSuccess" class="text-center py-12">
|
<el-result icon="success" title="申请提交成功" sub-title="我们将尽快处理您的申请">
|
<template #extra>
|
<div class="text-gray-600 mb-6">
|
<p>申请编号：{{ applicationNo }}</p>
|
<p class="mt-2">请保存此编号以便后续查询</p>
|
</div>
|
<div class="flex justify-center space-x-4">
|
<el-button type="primary" @click="goHome">返回首页</el-button>
|
<el-button @click="checkProgress">查看进度</el-button>
|
</div>
|
</template>
|
</el-result>
|
</div>
|
|
<!-- 申请表单 -->
|
<div v-else>
|
<!-- 标题 -->
|
<div class="text-center mb-8">
|
<h1 class="text-2xl font-bold text-gray-900">上海市工业通信业用能设备更新专项扶持工作平台企业申请表</h1>
|
<!-- <p class="mt-2 text-gray-600">平台企业申请表</p> -->
|
<p class="mt-2 text-gray-500">填报日期：2025 年 {{ currentMonth }} 月 {{ currentDay }} 日</p>
|
</div>
|
|
<!-- 申请表单 -->
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="180px" class="mt-8">
|
<el-form-item label="企业名称" prop="companyName">
|
<el-input v-model="form.companyName" placeholder="请输入企业名称" />
|
</el-form-item>
|
|
<el-form-item label="统一社会信用代码" prop="socialCreditCode">
|
<el-input v-model="form.socialCreditCode" placeholder="请输入统一社会信用代码" />
|
</el-form-item>
|
|
<el-form-item label="企业经营地址" prop="businessAddress">
|
<el-input v-model="form.businessAddress" placeholder="请输入企业经营地址" />
|
</el-form-item>
|
|
<el-form-item label="注册地址" prop="registeredAddress">
|
<el-input v-model="form.registeredAddress" placeholder="请输入注册地址" />
|
</el-form-item>
|
|
<el-form-item label="企业经营范围" prop="businessScope">
|
<el-input v-model="form.businessScope" type="textarea" :rows="3" placeholder="请输入企业经营范围" />
|
</el-form-item>
|
|
<el-form-item label="自营线上平台名称" prop="platformName">
|
<el-input v-model="form.platformName" placeholder="请输入自营线上平台名称" />
|
</el-form-item>
|
|
<el-form-item label="2024年企业销售额" prop="salesAmount">
|
<el-input-number v-model="form.salesAmount" :min="0" :controls="false" placeholder="请输入销售额">
|
<template #append>万元</template>
|
</el-input-number>
|
</el-form-item>
|
|
<el-form-item label="法定代表人" required>
|
<div class="flex space-x-4">
|
<el-form-item prop="legalRepresentative" class="flex-1 mb-0">
|
<el-input v-model="form.legalRepresentative" placeholder="请输入法定代表人姓名" />
|
</el-form-item>
|
<el-form-item prop="legalRepresentativePhone" class="flex-1 mb-0">
|
<el-input v-model="form.legalRepresentativePhone" placeholder="请输入联系电话/手机" />
|
</el-form-item>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="联系人" required>
|
<div class="flex space-x-4">
|
<el-form-item prop="contactPerson" class="flex-1 mb-0">
|
<el-input v-model="form.contactPerson" placeholder="请输入联系人姓名" />
|
</el-form-item>
|
<el-form-item prop="contactPhone" class="flex-1 mb-0">
|
<el-input v-model="form.contactPhone" placeholder="请输入联系电话/手机" />
|
</el-form-item>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="企业承诺" class="mt-8">
|
<div class="text-gray-600 text-sm leading-relaxed">
|
我单位按照上海市工业通信业用能设备更新专项扶持工作的有关规定，保证提供的所有申报数据、材料等信息真实有效，并接受有关部门的监督。
|
</div>
|
</el-form-item>
|
|
<!-- 下载和提交按钮 -->
|
<div class="flex justify-center space-x-6 mt-8">
|
<el-button type="primary" plain @click="downloadForm">
|
<el-icon class="mr-2"><Download /></el-icon>下载申请表
|
</el-button>
|
<el-button type="primary" @click="submitForm">
|
<el-icon class="mr-2"><Check /></el-icon>提交申请
|
</el-button>
|
</div>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { SERVE_URL } from '@/constants';
|
import { Check, Download } from '@element-plus/icons-vue';
|
import { ElMessage } from 'element-plus';
|
import { reactive, ref } from 'vue';
|
import { useRouter } from 'vue-router';
|
|
const router = useRouter();
|
const formRef = ref();
|
const currentMonth = new Date().getMonth() + 1;
|
const currentDay = new Date().getDate();
|
|
const form = reactive({
|
companyName: '',
|
socialCreditCode: '',
|
businessAddress: '',
|
registeredAddress: '',
|
businessScope: '',
|
platformName: '',
|
salesAmount: 0,
|
legalRepresentative: '',
|
legalRepresentativePhone: '',
|
contactPerson: '',
|
contactPhone: '',
|
});
|
|
const rules = {
|
companyName: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
|
socialCreditCode: [{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' }],
|
businessAddress: [{ required: true, message: '请输入企业经营地址', trigger: 'blur' }],
|
registeredAddress: [{ required: true, message: '请输入注册地址', trigger: 'blur' }],
|
businessScope: [{ required: true, message: '请输入企业经营范围', trigger: 'blur' }],
|
platformName: [{ required: true, message: '请输入自营线上平台名称', trigger: 'blur' }],
|
salesAmount: [{ required: true, message: '请输入2024年企业销售额', trigger: 'blur' }],
|
legalRepresentative: [{ required: true, message: '请输入法定代表人姓名', trigger: 'blur' }],
|
legalRepresentativePhone: [{ required: true, message: '请输入法定代表人联系方式', trigger: 'blur' }],
|
contactPerson: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
|
contactPhone: [{ required: true, message: '请输入联系人联系方式', trigger: 'blur' }],
|
};
|
|
const showSuccess = ref(false);
|
const applicationNo = ref('');
|
|
const generateApplicationNo = () => {
|
const date = new Date();
|
const year = date.getFullYear();
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
const day = String(date.getDate()).padStart(2, '0');
|
const random = Math.floor(Math.random() * 10000)
|
.toString()
|
.padStart(4, '0');
|
return `SQ${year}${month}${day}${random}`;
|
};
|
|
const goHome = () => {
|
router.push('/');
|
};
|
|
const checkProgress = () => {
|
// 这里可以跳转到进度查询页面
|
ElMessage.info('进度查询功能开发中');
|
};
|
|
const downloadForm = () => {
|
// 这里添加下载表格的逻辑
|
const link = document.createElement('a');
|
link.href = `${SERVE_URL}files/subsidy_application_form.doc`;
|
link.download = '上海市工业通信业用能设备更新专项扶持工作平台企业申请表.doc';
|
document.body.appendChild(link);
|
link.click();
|
document.body.removeChild(link);
|
ElMessage.success('开始下载申请表');
|
};
|
|
const submitForm = () => {
|
formRef.value.validate((valid: boolean) => {
|
if (valid) {
|
// 生成申请编号
|
applicationNo.value = generateApplicationNo();
|
// 显示成功页面
|
showSuccess.value = true;
|
ElMessage.success('提交成功');
|
} else {
|
return false;
|
}
|
});
|
};
|
</script>
|
|
<style scoped>
|
:deep(.el-form-item__label) {
|
font-weight: 500;
|
}
|
|
:deep(.el-input-number.is-controls-right .el-input__wrapper) {
|
padding-right: 80px;
|
}
|
</style>
|
