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

---
 .../enterpriseLibrary/enterprise/index.vue    | 601 ++++++++++++++++++
 1 file changed, 601 insertions(+)
 create mode 100644 src/views/enterpriseLibrary/enterprise/index.vue

diff --git a/src/views/enterpriseLibrary/enterprise/index.vue b/src/views/enterpriseLibrary/enterprise/index.vue
new file mode 100644
index 0000000..967598a
--- /dev/null
+++ b/src/views/enterpriseLibrary/enterprise/index.vue
@@ -0,0 +1,601 @@
+<template>
+    <!-- 主体库 -->
+    <div class="app-container">
+        
+        <!-- 搜索区域 -->
+        <div class="search-container">
+            <div class="search-content">
+                <div class="search-left">
+                    <h2 class="page-title">投标人主体库</h2>
+                </div>
+                <div class="search-right">
+                    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
+                        <el-form-item prop="enterpriseName">
+                            <el-input 
+                                v-model="queryParams.enterpriseName" 
+                                placeholder="请输入企业名称进行查询" 
+                                clearable 
+                                maxlength="32"
+                                class="search-input">
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery" class="search-btn">查询</el-button>
+                            <el-button icon="el-icon-refresh" size="small" @click="resetQuery" class="reset-btn">重置</el-button>
+                        </el-form-item>
+                    </el-form>
+                </div>
+            </div>
+        </div>
+
+        <!-- 企业卡片网格 -->
+        <div class="enterprise-grid">
+            <!-- 新建企业卡片 -->
+            <div class="enterprise-card create-card" @click="handleAdd">
+                <div class="create-icon">
+                    <i class="el-icon-plus"></i>
+                </div>
+                <div class="create-text">新建企业主体信息</div>
+            </div>
+
+            <!-- 企业信息卡片 -->
+            <div class="enterprise-card" v-for="(enterprise, index) in enterpriseList" :key="index">
+                <div class="enterprise-header">
+                    <h3 class="enterprise-name">{{ enterprise.name }}</h3>
+                    <div class="enterprise-rating">{{ enterprise.rating }}</div>
+                </div>
+                
+                <div class="enterprise-info">
+                    <div class="info-item">
+                        <span class="label">法定代表人:</span>
+                        <span class="value">{{ enterprise.legalRepresentative }}</span>
+                    </div>
+                    <div class="info-item">
+                        <span class="label">统一信用代码:</span>
+                        <span class="value">{{ enterprise.creditCode }}</span>
+                    </div>
+                </div>
+
+                <!-- 过期文档标签 -->
+                <div class="expired-tags" v-if="enterprise.expiredDocs && enterprise.expiredDocs.length > 0">
+                    <span class="expired-tag" v-for="doc in enterprise.expiredDocs" :key="doc">{{ doc }}</span>
+                </div>
+
+                <!-- 资质库 -->
+                <div class="qualification-section">
+                    <div class="qualification-label">资质库</div>
+                    <div class="qualification-items">
+                        <div class="qualification-item" v-for="n in 7" :key="n">
+                            <span class="qualification-number">1</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 操作按钮 -->
+                <div class="enterprise-actions">
+                    <el-button type="primary" size="mini" icon="el-icon-document">企业知识库</el-button>
+                    <el-button size="mini" icon="el-icon-view">详情</el-button>
+                    <el-button size="mini" icon="el-icon-edit">编辑</el-button>
+                    <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
+                </div>
+            </div>
+        </div>
+
+        <!-- 分页 -->
+        <div class="pagination-container">
+            <el-pagination
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                :current-page="queryParams.pageNum"
+                :page-sizes="[10, 20, 50, 100]"
+                :page-size="queryParams.pageSize"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="total">
+            </el-pagination>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Enterprise',
+    components: {
+
+    },
+    data() {
+        return {
+            queryParams: {
+                enterpriseName: '',
+                pageNum: 1,
+                pageSize: 10
+            },
+            total: 1000,
+            enterpriseList: [
+                {
+                    name: '中电鸿信信息科技有限公司',
+                    legalRepresentative: '沈宇',
+                    creditCode: '91320000668382125',
+                    rating: 'D',
+                    expiredDocs: ['【身份证】已过期', '【营业执照】已过期']
+                },
+                {
+                    name: '中电鸿信信息科技有限公司',
+                    legalRepresentative: '沈宇',
+                    creditCode: '91320000668382125',
+                    rating: 'D',
+                    expiredDocs: []
+                },
+                {
+                    name: '中电鸿信信息科技有限公司',
+                    legalRepresentative: '沈宇',
+                    creditCode: '91320000668382125',
+                    rating: 'D',
+                    expiredDocs: []
+                },
+                {
+                    name: '中电鸿信信息科技有限公司',
+                    legalRepresentative: '沈宇',
+                    creditCode: '91320000668382125',
+                    rating: 'D',
+                    expiredDocs: []
+                },
+                {
+                    name: '中电鸿信信息科技有限公司',
+                    legalRepresentative: '沈宇',
+                    creditCode: '91320000668382125',
+                    rating: 'D',
+                    expiredDocs: []
+                },
+                {
+                    name: '中电鸿信信息科技有限公司',
+                    legalRepresentative: '沈宇',
+                    creditCode: '91320000668382125',
+                    rating: 'D',
+                    expiredDocs: []
+                },
+                {
+                    name: '中电鸿信信息科技有限公司',
+                    legalRepresentative: '沈宇',
+                    creditCode: '91320000668382125',
+                    rating: 'D',
+                    expiredDocs: []
+                },
+                {
+                    name: '中电鸿信信息科技有限公司',
+                    legalRepresentative: '沈宇',
+                    creditCode: '91320000668382125',
+                    rating: 'D',
+                    expiredDocs: []
+                },
+                {
+                    name: '中电鸿信信息科技有限公司',
+                    legalRepresentative: '沈宇',
+                    creditCode: '91320000668382125',
+                    rating: 'D',
+                    expiredDocs: []
+                },
+                {
+                    name: '中电鸿信信息科技有限公司',
+                    legalRepresentative: '沈宇',
+                    creditCode: '91320000668382125',
+                    rating: 'D',
+                    expiredDocs: []
+                },
+                {
+                    name: '中电鸿信信息科技有限公司',
+                    legalRepresentative: '沈宇',
+                    creditCode: '91320000668382125',
+                    rating: 'D',
+                    expiredDocs: []
+                }
+            ]
+        }
+    },
+
+    created() {
+        this.getList()
+    },
+
+    methods: {
+        // 获取企业列表
+        getList() {
+            // 这里可以调用API获取数据
+            console.log('获取企业列表')
+        },
+        
+        // 查询
+        handleQuery() {
+            this.queryParams.pageNum = 1
+            this.getList()
+        },
+        
+        // 重置
+        resetQuery() {
+            this.queryParams.enterpriseName = ''
+            this.handleQuery()
+        },
+        
+        // 新增企业
+        handleAdd() {
+            console.log('新增企业')
+        },
+        
+        // 分页大小改变
+        handleSizeChange(val) {
+            this.queryParams.pageSize = val
+            this.getList()
+        },
+        
+        // 当前页改变
+        handleCurrentChange(val) {
+            this.queryParams.pageNum = val
+            this.getList()
+        }
+    },
+}
+</script>
+
+<style scoped lang="scss">
+.app-container {
+  padding: 20px;
+  background: #f5f5f5;
+  min-height: 100vh;
+}
+
+.page-header {
+  margin-bottom: 20px;
+  
+  .page-title {
+    font-size: 24px;
+    font-weight: 500;
+    color: #333;
+    margin: 0;
+  }
+}
+
+.search-container {
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  
+  .search-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .search-left {
+    .page-title {
+      font-size: 24px;
+      font-weight: 500;
+      color: #333;
+      margin: 0;
+    }
+  }
+  
+  .search-right {
+    .search-input {
+      width: 300px;
+    }
+    
+    .search-btn {
+      background: #409EFF;
+      border-color: #409EFF;
+      color: #fff;
+      font-weight: 500;
+      padding: 8px 16px;
+      border-radius: 4px;
+      
+      &:hover {
+        background: #66b1ff;
+        border-color: #66b1ff;
+      }
+    }
+    
+    .reset-btn {
+      background: #fff;
+      border-color: #dcdfe6;
+      color: #606266;
+      font-weight: 500;
+      padding: 8px 16px;
+      border-radius: 4px;
+      
+      &:hover {
+        background: #f5f7fa;
+        border-color: #c0c4cc;
+        color: #409EFF;
+      }
+    }
+  }
+}
+
+.enterprise-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+  margin-bottom: 30px;
+  max-height: 600px;
+  overflow-y: auto;
+  padding: 10px;
+  
+  /* 自定义滚动条样式 */
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 4px;
+    
+    &:hover {
+      background: #a8a8a8;
+    }
+  }
+}
+
+.enterprise-card {
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    transform: translateY(-2px);
+  }
+  
+  &.create-card {
+    border: 2px dashed #ddd;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 200px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    
+    &:hover {
+      border-color: #409EFF;
+      background: #f0f8ff;
+    }
+    
+    .create-icon {
+      font-size: 48px;
+      color: #999;
+      margin-bottom: 10px;
+    }
+    
+    .create-text {
+      font-size: 16px;
+      color: #666;
+    }
+  }
+}
+
+.enterprise-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 15px;
+  
+  .enterprise-name {
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+    margin: 0;
+    flex: 1;
+    line-height: 1.4;
+  }
+  
+  .enterprise-rating {
+    background: #409EFF;
+    color: #fff;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    font-weight: bold;
+    margin-left: 10px;
+  }
+}
+
+.enterprise-info {
+  margin-bottom: 15px;
+  
+  .info-item {
+    display: flex;
+    margin-bottom: 8px;
+    
+    .label {
+      color: #666;
+      font-size: 14px;
+      min-width: 100px;
+    }
+    
+    .value {
+      color: #333;
+      font-size: 14px;
+      flex: 1;
+    }
+  }
+}
+
+.expired-tags {
+  margin-bottom: 15px;
+  
+  .expired-tag {
+    display: inline-block;
+    background: #ff4d4f;
+    color: #fff;
+    font-size: 12px;
+    padding: 2px 8px;
+    border-radius: 4px;
+    margin-right: 8px;
+    margin-bottom: 4px;
+  }
+}
+
+.qualification-section {
+  margin-bottom: 15px;
+  
+  .qualification-label {
+    font-size: 14px;
+    color: #666;
+    margin-bottom: 8px;
+  }
+  
+  .qualification-items {
+    display: flex;
+    gap: 8px;
+    
+    .qualification-item {
+      width: 24px;
+      height: 24px;
+      background: #f0f0f0;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      
+      .qualification-number {
+        font-size: 12px;
+        color: #666;
+      }
+    }
+  }
+}
+
+.enterprise-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  
+  .el-button {
+    font-size: 12px;
+    padding: 6px 12px;
+  }
+}
+
+.pagination-container {
+  display: flex;
+  justify-content: center;
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-top: 20px;
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
+  
+  .el-pagination {
+    .el-pagination__total {
+      color: #606266;
+      font-weight: 500;
+    }
+    
+    .el-pagination__sizes {
+      .el-select {
+        .el-input__inner {
+          border-color: #dcdfe6;
+          border-radius: 4px;
+        }
+      }
+    }
+    
+    .el-pager li {
+      border-radius: 4px;
+      margin: 0 2px;
+      
+      &.active {
+        background: #409EFF;
+        color: #fff;
+      }
+      
+      &:hover {
+        color: #409EFF;
+      }
+    }
+    
+    .btn-prev,
+    .btn-next {
+      border-radius: 4px;
+      margin: 0 2px;
+      
+      &:hover {
+        color: #409EFF;
+      }
+    }
+    
+    .el-pagination__jump {
+      .el-input__inner {
+        border-color: #dcdfe6;
+        border-radius: 4px;
+      }
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 1200px) {
+  .enterprise-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 900px) {
+  .enterprise-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .search-container {
+    .search-content {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 15px;
+    }
+    
+    .search-right {
+      width: 100%;
+      
+      .search-input {
+        width: 100%;
+        max-width: 300px;
+      }
+    }
+  }
+  
+  .enterprise-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .enterprise-actions {
+    flex-direction: column;
+    
+    .el-button {
+      width: 100%;
+      margin-bottom: 8px;
+    }
+  }
+  
+  .pagination-container {
+    .el-pagination {
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+  }
+}
+</style>