From c74a8b54f8ec01aa9a63e4a18d2cd2e36e1f735e Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Mon, 20 Oct 2025 18:29:12 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BB=E4=BD=93=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 public/index.html                             |   1 +
 src/main.js                                   |   4 +
 src/router/index.js                           |  14 ++
 .../components/EnterpriseDetail.vue           | 166 ++++++++++++++++++
 .../enterprise/components/EnterpriseForm.vue  |   2 +-
 .../child/AccountOpeningCertificate.vue       |   1 +
 .../child/AccountOpeningCertificateDetail.vue |  96 ++++++++++
 .../enterprise/components/child/BasicInfo.vue |   1 +
 .../components/child/BasicInfoDetail.vue      | 128 ++++++++++++++
 .../components/child/LegalPerson.vue          |   1 +
 .../components/child/LegalPersonDetail.vue    | 124 +++++++++++++
 .../enterpriseLibrary/enterprise/index.vue    |  14 +-
 13 files changed, 550 insertions(+), 3 deletions(-)
 create mode 100644 src/views/enterpriseLibrary/enterprise/components/EnterpriseDetail.vue
 create mode 100644 src/views/enterpriseLibrary/enterprise/components/child/AccountOpeningCertificateDetail.vue
 create mode 100644 src/views/enterpriseLibrary/enterprise/components/child/BasicInfoDetail.vue
 create mode 100644 src/views/enterpriseLibrary/enterprise/components/child/LegalPersonDetail.vue

diff --git a/package.json b/package.json
index a210961..ec248f1 100644
--- a/package.json
+++ b/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",
diff --git a/public/index.html b/public/index.html
index 925455c..7e6e76e 100644
--- a/public/index.html
+++ b/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;
diff --git a/src/main.js b/src/main.js
index 5d32769..29dc2b7 100644
--- a/src/main.js
+++ b/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()
 
 /**
diff --git a/src/router/index.js b/src/router/index.js
index a69409d..59f73a0 100644
--- a/src/router/index.js
+++ b/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 }
+      }
+    ]
   }
 
 
diff --git a/src/views/enterpriseLibrary/enterprise/components/EnterpriseDetail.vue b/src/views/enterpriseLibrary/enterprise/components/EnterpriseDetail.vue
new file mode 100644
index 0000000..e584f62
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/enterpriseLibrary/enterprise/components/EnterpriseForm.vue b/src/views/enterpriseLibrary/enterprise/components/EnterpriseForm.vue
index 8ac5df3..e1f9b5c 100644
--- a/src/views/enterpriseLibrary/enterprise/components/EnterpriseForm.vue
+++ b/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;
 }
 
diff --git a/src/views/enterpriseLibrary/enterprise/components/child/AccountOpeningCertificate.vue b/src/views/enterpriseLibrary/enterprise/components/child/AccountOpeningCertificate.vue
index cf577fb..4aa7a62 100644
--- a/src/views/enterpriseLibrary/enterprise/components/child/AccountOpeningCertificate.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/views/enterpriseLibrary/enterprise/components/child/AccountOpeningCertificateDetail.vue b/src/views/enterpriseLibrary/enterprise/components/child/AccountOpeningCertificateDetail.vue
new file mode 100644
index 0000000..619e84f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/enterpriseLibrary/enterprise/components/child/BasicInfo.vue b/src/views/enterpriseLibrary/enterprise/components/child/BasicInfo.vue
index e66f084..826cdfc 100644
--- a/src/views/enterpriseLibrary/enterprise/components/child/BasicInfo.vue
+++ b/src/views/enterpriseLibrary/enterprise/components/child/BasicInfo.vue
@@ -101,6 +101,7 @@ export default {
 
     span {
         margin: 0 5px;
+        font-size: 20px;
     }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/enterpriseLibrary/enterprise/components/child/BasicInfoDetail.vue b/src/views/enterpriseLibrary/enterprise/components/child/BasicInfoDetail.vue
new file mode 100644
index 0000000..c9a10f4
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/enterpriseLibrary/enterprise/components/child/LegalPerson.vue b/src/views/enterpriseLibrary/enterprise/components/child/LegalPerson.vue
index 3625499..cc116de 100644
--- a/src/views/enterpriseLibrary/enterprise/components/child/LegalPerson.vue
+++ b/src/views/enterpriseLibrary/enterprise/components/child/LegalPerson.vue
@@ -93,6 +93,7 @@ export default {
 
     span {
         margin: 0 5px;
+        font-size: 20px;
     }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/enterpriseLibrary/enterprise/components/child/LegalPersonDetail.vue b/src/views/enterpriseLibrary/enterprise/components/child/LegalPersonDetail.vue
new file mode 100644
index 0000000..93842c0
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/enterpriseLibrary/enterprise/index.vue b/src/views/enterpriseLibrary/enterprise/index.vue
index 86ce7a6..d606eca 100644
--- a/src/views/enterpriseLibrary/enterprise/index.vue
+++ b/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) {