Industrial-image-management-system---web/src/views/enterprise-settings/company-info/index.vue

<template>
  <GiPageLayout>
    <div class="enterprise-info-container">
      <!-- 企业基本信息卡片 -->
      <a-card title="企业基本信息" class="mb-6">
        <template #extra>
          <a-button type="primary" @click="editCompanyInfo">
            <template #icon><icon-edit /></template>
            编辑信息
          </a-button>
        </template>
        
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="企业名称">{{ companyInfo.name }}</a-descriptions-item>
          <a-descriptions-item label="统一社会信用代码">{{ companyInfo.creditCode }}</a-descriptions-item>
          <a-descriptions-item label="法定代表人">{{ companyInfo.legalPerson }}</a-descriptions-item>
          <a-descriptions-item label="注册资本">{{ companyInfo.registeredCapital }}</a-descriptions-item>
          <a-descriptions-item label="成立日期">{{ companyInfo.establishDate }}</a-descriptions-item>
          <a-descriptions-item label="营业期限">{{ companyInfo.businessTerm }}</a-descriptions-item>
          <a-descriptions-item label="注册地址" :span="2">{{ companyInfo.registeredAddress }}</a-descriptions-item>
          <a-descriptions-item label="经营范围" :span="2">{{ companyInfo.businessScope }}</a-descriptions-item>
          <a-descriptions-item label="联系电话">{{ companyInfo.phone }}</a-descriptions-item>
          <a-descriptions-item label="企业邮箱">{{ companyInfo.email }}</a-descriptions-item>
          <a-descriptions-item label="官方网站">{{ companyInfo.website }}</a-descriptions-item>
          <a-descriptions-item label="员工人数">{{ companyInfo.employeeCount }}</a-descriptions-item>
        </a-descriptions>
      </a-card>

      <!-- 企业资质证书 -->
      <a-card title="企业资质证书" class="mb-6">
        <template #extra>
          <a-button @click="addCertificate">
            <template #icon><icon-plus /></template>
            新增证书
          </a-button>
        </template>
        
        <a-row :gutter="16">
          <a-col 
            v-for="cert in certificates" 
            :key="cert.id" 
            :span="8" 
            class="mb-4"
          >
            <a-card hoverable>
              <template #cover>
                <img 
                  :src="cert.image" 
                  :alt="cert.name"
                  style="height: 200px; object-fit: cover;"
                />
              </template>
              <a-card-meta 
                :title="cert.name" 
                :description="cert.description"
              />
              <template #actions>
                <a-link @click="viewCertificate(cert)">查看</a-link>
                <a-link @click="editCertificate(cert)">编辑</a-link>
                <a-link @click="deleteCertificate(cert)">删除</a-link>
              </template>
            </a-card>
          </a-col>
        </a-row>
      </a-card>

      <!-- 银行信息 -->
      <a-card title="银行账户信息" class="mb-6">
        <template #extra>
          <a-button @click="addBankAccount">
            <template #icon><icon-plus /></template>
            新增账户
          </a-button>
        </template>
        
        <GiTable
          row-key="id"
          :data="bankAccounts"
          :columns="bankColumns"
          :pagination="false"
        >
          <template #accountType="{ record }">
            <a-tag :color="getBankTypeColor(record.accountType)">
              {{ record.accountType }}
            </a-tag>
          </template>
          
          <template #isDefault="{ record }">
            <a-tag v-if="record.isDefault" color="green">默认账户</a-tag>
            <span v-else>-</span>
          </template>
          
          <template #action="{ record }">
            <a-space>
              <a-link @click="editBankAccount(record)">编辑</a-link>
              <a-link @click="setDefaultAccount(record)" v-if="!record.isDefault">设为默认</a-link>
              <a-link @click="deleteBankAccount(record)">删除</a-link>
            </a-space>
          </template>
        </GiTable>
      </a-card>

      <!-- 企业统计信息 -->
      <a-card title="企业统计信息">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-statistic title="年营业额" :value="statistics.annualRevenue" suffix="万元" />
          </a-col>
          <a-col :span="6">
            <a-statistic title="项目总数" :value="statistics.totalProjects" />
          </a-col>
          <a-col :span="6">
            <a-statistic title="在建项目" :value="statistics.ongoingProjects" />
          </a-col>
          <a-col :span="6">
            <a-statistic title="客户数量" :value="statistics.clientCount" />
          </a-col>
        </a-row>
      </a-card>
    </div>
  </GiPageLayout>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Message } from '@arco-design/web-vue'
import type { TableColumnData } from '@arco-design/web-vue'

// 企业基本信息
const companyInfo = reactive({
  name: '风电智能检测技术有限公司',
  creditCode: '91110000123456789X',
  legalPerson: '张三',
  registeredCapital: '5000万元',
  establishDate: '2018-03-15',
  businessTerm: '2018-03-15至无固定期限',
  registeredAddress: '北京市朝阳区科技园区创新大厦8层',
  businessScope: '风力发电设备检测技术开发；技术咨询；技术服务；智能检测设备销售；工程技术咨询；专业技术服务',
  phone: '010-12345678',
  email: 'info@windtech.com',
  website: 'https://www.windtech.com',
  employeeCount: '158人'
})

// 企业资质证书
const certificates = ref([
  {
    id: 1,
    name: '高新技术企业证书',
    description: '有效期：2023-12-31',
    image: '/api/placeholder/300/200',
    issueDate: '2021-01-01',
    expiryDate: '2023-12-31'
  },
  {
    id: 2,
    name: 'ISO9001质量管理体系认证',
    description: '有效期：2025-06-30',
    image: '/api/placeholder/300/200',
    issueDate: '2022-07-01',
    expiryDate: '2025-06-30'
  },
  {
    id: 3,
    name: '安全生产许可证',
    description: '有效期：2024-12-31',
    image: '/api/placeholder/300/200',
    issueDate: '2021-01-01',
    expiryDate: '2024-12-31'
  }
])

// 银行账户信息
const bankAccounts = ref([
  {
    id: 1,
    bankName: '中国工商银行',
    accountNumber: '1234567890123456789',
    accountName: '风电智能检测技术有限公司',
    accountType: '基本户',
    isDefault: true
  },
  {
    id: 2,
    bankName: '中国建设银行',
    accountNumber: '9876543210987654321',
    accountName: '风电智能检测技术有限公司',
    accountType: '一般户',
    isDefault: false
  }
])

// 银行账户表格列配置
const bankColumns: TableColumnData[] = [
  { title: '开户银行', dataIndex: 'bankName', width: 200 },
  { title: '银行账号', dataIndex: 'accountNumber', width: 200 },
  { title: '账户名称', dataIndex: 'accountName', width: 250 },
  { title: '账户类型', dataIndex: 'accountType', slotName: 'accountType', width: 120 },
  { title: '默认账户', dataIndex: 'isDefault', slotName: 'isDefault', width: 100 },
  { title: '操作', slotName: 'action', width: 200 }
]

// 企业统计信息
const statistics = reactive({
  annualRevenue: 12580,
  totalProjects: 156,
  ongoingProjects: 23,
  clientCount: 68
})

// 获取银行账户类型颜色
const getBankTypeColor = (type: string) => {
  const colorMap: Record<string, string> = {
    '基本户': 'blue',
    '一般户': 'green',
    '专用户': 'orange'
  }
  return colorMap[type] || 'gray'
}

// 操作方法
const editCompanyInfo = () => {
  Message.info('编辑企业信息功能开发中...')
}

const addCertificate = () => {
  Message.info('新增资质证书功能开发中...')
}

const viewCertificate = (cert: any) => {
  Message.info(`查看证书: ${cert.name}`)
}

const editCertificate = (cert: any) => {
  Message.info(`编辑证书: ${cert.name}`)
}

const deleteCertificate = (cert: any) => {
  Message.info(`删除证书: ${cert.name}`)
}

const addBankAccount = () => {
  Message.info('新增银行账户功能开发中...')
}

const editBankAccount = (account: any) => {
  Message.info(`编辑银行账户: ${account.bankName}`)
}

const setDefaultAccount = (account: any) => {
  Message.info(`设置默认账户: ${account.bankName}`)
}

const deleteBankAccount = (account: any) => {
  Message.info(`删除银行账户: ${account.bankName}`)
}
</script>

<style scoped>
.enterprise-info-container {
  padding: 16px;
}

.mb-6 {
  margin-bottom: 24px;
}

.mb-4 {
  margin-bottom: 16px;
}
</style>