主体库
This commit is contained in:
parent
244bb647c3
commit
c74a8b54f8
|
|
@ -45,6 +45,7 @@
|
|||
"sm-crypto": "^0.3.13",
|
||||
"sortablejs": "1.10.2",
|
||||
"splitpanes": "2.4.1",
|
||||
"v-viewer": "^1.7.4",
|
||||
"vue": "2.6.12",
|
||||
"vue-count-to": "1.0.13",
|
||||
"vue-cropper": "0.5.5",
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
height: 100%;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
}
|
||||
.chromeframe {
|
||||
margin: 0.2em 0;
|
||||
|
|
|
|||
|
|
@ -35,6 +35,9 @@ import DictTag from '@/components/DictTag'
|
|||
// 字典数据组件
|
||||
import DictData from '@/components/DictData'
|
||||
|
||||
import Viewer from 'v-viewer'
|
||||
import 'viewerjs/dist/viewer.css'
|
||||
|
||||
// 全局方法挂载
|
||||
Vue.prototype.getDicts = getDicts
|
||||
Vue.prototype.getConfigKey = getConfigKey
|
||||
|
|
@ -57,6 +60,7 @@ Vue.component('ImagePreview', ImagePreview)
|
|||
import { getConfigKey } from '@/utils/systemConfig' // 引入get方法
|
||||
Vue.use(directive)
|
||||
Vue.use(plugins)
|
||||
Vue.use(Viewer)
|
||||
DictData.install()
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -249,6 +249,20 @@ export const dynamicRoutes = [
|
|||
meta: { title: '新增主体信息', activeMenu: '/enterpriseLibrary/enterprise', noCache: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/EnterpriseDetail',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
permissions: ['enterpriseLibrary:enterprise:detail'],
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/enterpriseLibrary/enterprise/components/EnterpriseDetail'),
|
||||
name: 'EnterpriseDetail',
|
||||
meta: { title: '主体信息详情', activeMenu: '/enterpriseLibrary/enterprise', noCache: true }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,166 @@
|
|||
<!-- 企业主体库表单 -->
|
||||
<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">
|
||||
<BasicInfoDetail ref="basicInfoDetail" />
|
||||
</el-col>
|
||||
<!-- 法人信息 -->
|
||||
<el-col :span="6" class="pane-center">
|
||||
<LegalPersonDetail ref="legalPersonDetail" />
|
||||
</el-col>
|
||||
<!-- 开户证明 -->
|
||||
<el-col :span="6" class="pane-right">
|
||||
<AccountOpeningCertificateDetail ref="accountOpeningCertificateDetail" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { decryptWithSM4 } from '@/utils/sm'
|
||||
import BasicInfoDetail from './child/BasicInfoDetail.vue'
|
||||
import LegalPersonDetail from './child/LegalPersonDetail.vue'
|
||||
import AccountOpeningCertificateDetail from './child/AccountOpeningCertificateDetail.vue'
|
||||
|
||||
export default {
|
||||
name: 'EnterpriseDetail',
|
||||
components: {
|
||||
BasicInfoDetail,
|
||||
LegalPersonDetail,
|
||||
AccountOpeningCertificateDetail
|
||||
},
|
||||
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>
|
||||
|
|
@ -84,7 +84,7 @@ export default {
|
|||
.app-container {
|
||||
padding: 24px;
|
||||
background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
|
||||
max-height: 100vh;
|
||||
min-height: 100vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@ export default {
|
|||
margin: 10px 0;
|
||||
span{
|
||||
margin: 0 5px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<template>
|
||||
<div class="basic-info-detail">
|
||||
<div class="basic-info-title">
|
||||
<img src="@/assets/enterpriseLibrary/legalperson.png" alt="开户证明">
|
||||
<span>开户证明</span>
|
||||
</div>
|
||||
|
||||
<div class="detail-content">
|
||||
<!-- 开户许可证 -->
|
||||
<div class="detail-item">
|
||||
<div class="item-label">开户许可证</div>
|
||||
<div class="item-value">
|
||||
<el-image :src="url" :preview-src-list="srcList" class="license-image">
|
||||
</el-image>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 开户银行 -->
|
||||
<div class="detail-item">
|
||||
<div class="item-label">开户银行</div>
|
||||
<div class="item-value">{{ enterpriseName || '中讯科技股份有限公司' }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 开户账号 -->
|
||||
<div class="detail-item">
|
||||
<div class="item-label">开户账号</div>
|
||||
<div class="item-value">{{ enterpriseCode || '12345678901313132390' }}</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UploadFile from '@/views/common/UploadFile.vue'
|
||||
import basicInfo from '@/assets/enterpriseLibrary/basic-info.png'
|
||||
export default {
|
||||
name: 'AccountOpeningCertificateDetail',
|
||||
components: {
|
||||
UploadFile
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: '',
|
||||
enterpriseName: '',
|
||||
url: basicInfo,
|
||||
srcList: [basicInfo],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 校验规则
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.basic-info-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
|
||||
span {
|
||||
margin: 0 5px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
.detail-item {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.item-label {
|
||||
color: #424242;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
color: #424242;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
|
||||
.license-image {
|
||||
max-width: 200px;
|
||||
max-height: 120px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -101,6 +101,7 @@ export default {
|
|||
|
||||
span {
|
||||
margin: 0 5px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
<template>
|
||||
<div class="basic-info-detail">
|
||||
<div class="basic-info-title">
|
||||
<img src="@/assets/enterpriseLibrary/basic-info.png" alt="基本信息">
|
||||
<span>基本信息</span>
|
||||
</div>
|
||||
|
||||
<div class="detail-content">
|
||||
<!-- 营业执照 -->
|
||||
<div class="detail-item">
|
||||
<div class="item-label">营业执照</div>
|
||||
<div class="item-value">
|
||||
<el-image :src="url" :preview-src-list="srcList" class="license-image">
|
||||
</el-image>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 企业名称 -->
|
||||
<div class="detail-item">
|
||||
<div class="item-label">企业名称</div>
|
||||
<div class="item-value">{{ enterpriseName || '中讯科技股份有限公司' }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 统一社会信用代码 -->
|
||||
<div class="detail-item">
|
||||
<div class="item-label">统一社会信用代码</div>
|
||||
<div class="item-value">{{ enterpriseCode || '12345678901313132390' }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 注册资本 -->
|
||||
<div class="detail-item">
|
||||
<div class="item-label">注册资本</div>
|
||||
<div class="item-value">{{ registeredCapital || '11000.00' }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 营业期限 -->
|
||||
<div class="detail-item">
|
||||
<div class="item-label">营业期限</div>
|
||||
<div class="item-value">{{ businessTerm || '2015/01/01-2035/01/01' }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 住所 -->
|
||||
<div class="detail-item">
|
||||
<div class="item-label">住所</div>
|
||||
<div class="item-value">{{ residence || '安徽省合肥市蜀山区望江西路100号' }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 经营范围 -->
|
||||
<div class="detail-item">
|
||||
<div class="item-label">经营范围</div>
|
||||
<div class="item-value">{{ businessScope || '软件开发、技术服务、电子商务' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog title="营业执照" :visible.sync="showPhoto" width="60%" append-to-body>
|
||||
<view-photo :images="images" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import basicInfo from '@/assets/enterpriseLibrary/basic-info.png'
|
||||
export default {
|
||||
name: 'BasicInfoDetail',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: '',
|
||||
url: basicInfo,
|
||||
srcList: [basicInfo],
|
||||
enterpriseName: '',
|
||||
enterpriseCode: '',
|
||||
registeredCapital: '',
|
||||
businessTerm: '',
|
||||
residence: '',
|
||||
businessScope: '',
|
||||
fileList: [],
|
||||
showPhoto: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openPhoto() {
|
||||
this.showPhoto = true
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.basic-info-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
|
||||
span {
|
||||
margin: 0 5px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
.detail-item {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.item-label {
|
||||
color: #424242;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
color: #424242;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
|
||||
.license-image {
|
||||
max-width: 200px;
|
||||
max-height: 120px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
object-fit: cover;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -93,6 +93,7 @@ export default {
|
|||
|
||||
span {
|
||||
margin: 0 5px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
<template>
|
||||
<div class="basic-info-detail">
|
||||
<div class="basic-info-title">
|
||||
<img src="@/assets/enterpriseLibrary/legalperson.png" alt="法人信息">
|
||||
<span>法人信息</span>
|
||||
</div>
|
||||
|
||||
<div class="detail-content">
|
||||
<!-- 身份证人像面 -->
|
||||
<div class="detail-item">
|
||||
<div class="item-label">身份证人像面</div>
|
||||
<div class="item-value">
|
||||
<el-image :src="url" :preview-src-list="srcList" class="license-image">
|
||||
</el-image>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 身份证国徽面 -->
|
||||
<div class="detail-item">
|
||||
<div class="item-label">身份证国徽面</div>
|
||||
<div class="item-value">
|
||||
<el-image :src="url" :preview-src-list="srcList" class="license-image">
|
||||
</el-image>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 法人姓名 -->
|
||||
<div class="detail-item">
|
||||
<div class="item-label">法人姓名</div>
|
||||
<div class="item-value">{{ enterpriseName || '中讯科技股份有限公司' }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 法人身份证号 -->
|
||||
<div class="detail-item">
|
||||
<div class="item-label">法人身份证号</div>
|
||||
<div class="item-value">{{ enterpriseCode || '12345678901313132390' }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 身份证有效期 -->
|
||||
<div class="detail-item">
|
||||
<div class="item-label">身份证有效期</div>
|
||||
<div class="item-value">{{ registeredCapital || '11000.00' }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 法人职务 -->
|
||||
<div class="detail-item">
|
||||
<div class="item-label">法人职务</div>
|
||||
<div class="item-value">{{ businessTerm || '2015/01/01-2035/01/01' }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 法人联系方式 -->
|
||||
<div class="detail-item">
|
||||
<div class="item-label">法人联系方式</div>
|
||||
<div class="item-value">{{ residence || '安徽省合肥市蜀山区望江西路100号' }}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UploadFile from '@/views/common/UploadFile.vue'
|
||||
import basicInfo from '@/assets/enterpriseLibrary/basic-info.png'
|
||||
export default {
|
||||
name: 'LegalPersonDetail',
|
||||
components: {
|
||||
UploadFile
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: '',
|
||||
enterpriseName: '',
|
||||
enterpriseCode: '',
|
||||
registeredCapital: '',
|
||||
businessTerm: '',
|
||||
residence: '',
|
||||
businessScope: '',
|
||||
fileList: [],
|
||||
url: basicInfo,
|
||||
srcList: [basicInfo],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.basic-info-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
|
||||
span {
|
||||
margin: 0 5px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
.detail-item {
|
||||
margin-bottom: 16px;
|
||||
.item-label {
|
||||
color: #424242;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
color: #424242;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
|
||||
.license-image {
|
||||
max-width: 200px;
|
||||
max-height: 120px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
<img :src="EnterpriseKnowledge" alt="企业知识库" />
|
||||
<span>企业知识库</span>
|
||||
</div>
|
||||
<div v-hasPermi="['enterpriseLibrary:enterprise:detail']">
|
||||
<div v-hasPermi="['enterpriseLibrary:enterprise:detail']" @click="handleDetail(enterprise)">
|
||||
<img :src="EnterpriseDetail" alt="详情" />
|
||||
<span>详情</span>
|
||||
</div>
|
||||
|
|
@ -248,7 +248,6 @@ export default {
|
|||
// 新增企业
|
||||
handleAdd() {
|
||||
console.log('新增企业')
|
||||
// this.$router.push('/enterpriseLibrary/enterprise/add')
|
||||
this.$router.push({
|
||||
name: 'EnterpriseForm',
|
||||
query: {
|
||||
|
|
@ -257,6 +256,17 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
// 详情
|
||||
handleDetail(enterprise){
|
||||
this.$router.push({
|
||||
name: 'EnterpriseDetail',
|
||||
query: {
|
||||
type: encryptWithSM4('detail'),
|
||||
id: encryptWithSM4(enterprise.id ?? '0'),
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
// 分页大小改变
|
||||
handleSizeChange(val) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue