165 lines
4.4 KiB
Vue
165 lines
4.4 KiB
Vue
<!-- 企业主体库表单 -->
|
|
<template>
|
|
<div class="app-container">
|
|
<div class="content-header">
|
|
<el-button class="reset-btn" @click="handleClose()">返回</el-button>
|
|
<el-button class="search-btn" @click="handleSave()">保存</el-button>
|
|
</div>
|
|
<div class="content-body">
|
|
<el-row :gutter="24" class="content-row">
|
|
<!-- 基本信息 -->
|
|
<el-col :span="6" class="pane-left">
|
|
<BasicInfo ref="basicInfo" />
|
|
</el-col>
|
|
<!-- 法人信息 -->
|
|
<el-col :span="6" class="pane-center">
|
|
<LegalPerson ref="legalPerson" />
|
|
</el-col>
|
|
<!-- 开户证明 -->
|
|
<el-col :span="6" class="pane-right">
|
|
<AccountOpeningCertificate ref="accountOpeningCertificate" />
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { decryptWithSM4 } from '@/utils/sm'
|
|
import BasicInfo from './child/BasicInfo.vue'
|
|
import LegalPerson from './child/LegalPerson.vue'
|
|
import AccountOpeningCertificate from './child/AccountOpeningCertificate.vue'
|
|
export default {
|
|
name: 'EnterpriseForm',
|
|
components: {
|
|
BasicInfo,
|
|
LegalPerson,
|
|
AccountOpeningCertificate
|
|
},
|
|
data() {
|
|
return {
|
|
id: decryptWithSM4(this.$route.query.id),
|
|
type: decryptWithSM4(this.$route.query.type),
|
|
}
|
|
},
|
|
methods: {
|
|
// 返回
|
|
handleClose() {
|
|
const obj = { path: "/enterpriseLibrary/enterprise" }
|
|
this.$tab.closeOpenPage(obj)
|
|
},
|
|
// 保存
|
|
async handleSave() {
|
|
try {
|
|
// 并行校验所有表单
|
|
const [basicInfoData, legalPersonData, accountData] = await Promise.all([
|
|
this.$refs.basicInfo.validate(),
|
|
this.$refs.legalPerson.validate(),
|
|
this.$refs.accountOpeningCertificate.validate()
|
|
])
|
|
|
|
// 所有校验通过，组装完整数据
|
|
const formData = {
|
|
...basicInfoData,
|
|
...legalPersonData,
|
|
...accountData
|
|
}
|
|
|
|
console.log('所有表单校验通过，完整数据:', formData)
|
|
|
|
// 这里可以调用保存接口
|
|
// await this.saveEnterprise(formData)
|
|
this.$message.success('保存成功')
|
|
|
|
} catch (error) {
|
|
// console.error('表单校验失败:', error)
|
|
this.$message.error(error.message || '请完善表单信息')
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.app-container {
|
|
padding: 24px;
|
|
background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
|
|
min-height: 100vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.content-body {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.content-row {
|
|
margin: 0;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
gap: 16px;
|
|
}
|
|
|
|
.pane-left,
|
|
.pane-center,
|
|
.pane-right {
|
|
background: #fff;
|
|
border-radius: 16px 16px 16px 16px;
|
|
min-height: 600px;
|
|
box-shadow: 0px 4px 20px 0px rgba(31, 35, 55, 0.1);
|
|
// border: 1px solid #e8f4ff;
|
|
padding: 0;
|
|
margin-bottom: 20px;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
|
|
.content-header {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
gap: 12px;
|
|
}
|
|
|
|
.search-btn {
|
|
background: #409EFF;
|
|
border-color: #409EFF;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
padding: 12px 24px;
|
|
border-radius: 6px;
|
|
box-shadow: 0px 4px 12px 0px rgba(64, 158, 255, 0.4);
|
|
letter-spacing: 0.5px;
|
|
font-size: 14px;
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
background: #66b1ff;
|
|
border-color: #66b1ff;
|
|
box-shadow: 0px 6px 16px 0px rgba(64, 158, 255, 0.5);
|
|
transform: translateY(-1px);
|
|
}
|
|
}
|
|
|
|
.reset-btn {
|
|
background: #fff;
|
|
border: 1px solid #dcdfe6;
|
|
color: #606266;
|
|
font-weight: 600;
|
|
padding: 12px 24px;
|
|
border-radius: 6px;
|
|
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
|
|
letter-spacing: 0.5px;
|
|
font-size: 14px;
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
background: #f5f7fa;
|
|
border-color: #c0c4cc;
|
|
color: #409EFF;
|
|
box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.15);
|
|
transform: translateY(-1px);
|
|
}
|
|
}
|
|
</style> |