271 lines
8.5 KiB
Vue
271 lines
8.5 KiB
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> |