主体库

package.json

@@ -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",

public/index.html

@@ -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;

src/main.js

@@ -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()
 
 /**

src/router/index.js

@@ -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 }
+      }
+    ]
   }
 
 

src/views/enterpriseLibrary/enterprise/components/EnterpriseDetail.vue

@@ -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>

src/views/enterpriseLibrary/enterprise/components/EnterpriseForm.vue

@@ -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;
 }
 

src/views/enterpriseLibrary/enterprise/components/child/AccountOpeningCertificate.vue

@@ -70,6 +70,7 @@ export default {
     margin: 10px 0;
     span{
         margin: 0 5px;
+        font-size: 20px;
     }
 }
 </style>

src/views/enterpriseLibrary/enterprise/components/child/AccountOpeningCertificateDetail.vue

@@ -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>

src/views/enterpriseLibrary/enterprise/components/child/BasicInfo.vue

@@ -101,6 +101,7 @@ export default {
 
     span {
         margin: 0 5px;
+        font-size: 20px;
     }
 }
 </style>

src/views/enterpriseLibrary/enterprise/components/child/BasicInfoDetail.vue

@@ -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>

src/views/enterpriseLibrary/enterprise/components/child/LegalPerson.vue

@@ -93,6 +93,7 @@ export default {
 
     span {
         margin: 0 5px;
+        font-size: 20px;
     }
 }
 </style>

src/views/enterpriseLibrary/enterprise/components/child/LegalPersonDetail.vue

@@ -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>

src/views/enterpriseLibrary/enterprise/index.vue

@@ -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) {