主体库
This commit is contained in:
parent
ee2fdaef86
commit
244bb647c3
Binary file not shown.
|
After Width: | Height: | Size: 647 B |
Binary file not shown.
|
After Width: | Height: | Size: 359 B |
Binary file not shown.
|
After Width: | Height: | Size: 468 B |
Binary file not shown.
|
After Width: | Height: | Size: 551 B |
Binary file not shown.
|
After Width: | Height: | Size: 403 B |
Binary file not shown.
|
After Width: | Height: | Size: 647 B |
|
|
@ -235,6 +235,20 @@ export const dynamicRoutes = [
|
|||
meta: { title: '接收详情', activeMenu: '/archivesManagement/filesTransfer/accept', noCache: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/EnterpriseForm',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
permissions: ['enterpriseLibrary:enterprise:add'],
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/enterpriseLibrary/enterprise/components/EnterpriseForm'),
|
||||
name: 'EnterpriseForm',
|
||||
meta: { title: '新增主体信息', activeMenu: '/enterpriseLibrary/enterprise', noCache: true }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,342 @@
|
|||
<template>
|
||||
<div class="upload-container">
|
||||
<el-upload class="upload-demo" drag action="#" multiple :show-file-list="true" :before-upload="beforeUpload"
|
||||
:on-change="handleFileChange" :on-remove="handleRemove" :on-exceed="handleExceed" :file-list="files"
|
||||
:accept="accept" :limit="limitUploadNum" :auto-upload="false">
|
||||
<div class="upload-content">
|
||||
<!-- 当只有一张图片时显示缩略图 -->
|
||||
<div v-if="showImagePreview" class="image-preview">
|
||||
<img :src="previewImageUrl" :alt="previewImageName" class="preview-thumbnail" />
|
||||
<div class="preview-overlay">
|
||||
<div class="preview-text">
|
||||
<div class="main-text">点击更换图片</div>
|
||||
<div class="tip-text">或拖拽新图片到此处</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 默认上传区域 -->
|
||||
<div v-else class="upload-text">
|
||||
<div class="main-text"> + 点击或将文件拖拽到这里上传</div>
|
||||
<div class="tip-text">
|
||||
<div>文件大小上限 {{ maxFileTips }}，</div>
|
||||
<div>支持文件类型：{{ uploadType }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'UploadFile',
|
||||
props: {
|
||||
fileList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
maxFileTips: {
|
||||
type: String,
|
||||
default: '20MB'
|
||||
},
|
||||
uploadType: {
|
||||
type: String,
|
||||
default: 'png、jpg、jpeg'
|
||||
},
|
||||
limitUploadNum: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
files: this.fileList,
|
||||
previewImageUrl: '',
|
||||
previewImageName: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
beforeUpload(file) {
|
||||
// 验证文件类型
|
||||
const fileExtension = file.name.split('.').pop().toLowerCase();
|
||||
const isAllowedType = this.allowedTypes.includes(fileExtension);
|
||||
|
||||
// 验证MIME类型（额外验证）
|
||||
const isAllowedMimeType = this.mimeTypes.includes(file.type);
|
||||
|
||||
// 验证文件大小
|
||||
const isLtMaxSize = file.size / 1024 / 1024 < this.maxSizeMB;
|
||||
|
||||
if (!isAllowedType || !isAllowedMimeType) {
|
||||
this.$message.error(`只能上传 ${this.uploadType} 格式的文件!`);
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!isLtMaxSize) {
|
||||
this.$message.error(`文件大小不能超过 ${this.maxFileTips}!`);
|
||||
return false;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
// 文件状态改变
|
||||
handleFileChange(file, fileList) {
|
||||
|
||||
this.files = fileList;
|
||||
|
||||
// 生成图片预览
|
||||
if (file.raw && this.isImageFile(file.raw) && fileList.length === 1) {
|
||||
this.generateImagePreview(file.raw);
|
||||
} else {
|
||||
// 如果不是单张图片，清除预览
|
||||
this.previewImageUrl = '';
|
||||
this.previewImageName = '';
|
||||
}
|
||||
console.log('文件列表更新:', this.files.length, '个文件');
|
||||
this.$emit('file-change', this.files);
|
||||
},
|
||||
// 处理文件超出限制
|
||||
handleExceed(files, fileList) {
|
||||
// 当文件数量超出限制时，用新文件替换旧文件
|
||||
if (files.length > 0) {
|
||||
// 清空原有文件列表
|
||||
this.files = [];
|
||||
|
||||
// 手动触发新文件的上传流程
|
||||
const newFile = files[0];
|
||||
this.beforeUpload(newFile); // 先进行验证
|
||||
|
||||
// 创建新的文件对象
|
||||
const newFileObj = {
|
||||
name: newFile.name,
|
||||
size: newFile.size,
|
||||
type: newFile.type,
|
||||
raw: newFile,
|
||||
uid: Date.now() // 生成新的uid
|
||||
};
|
||||
|
||||
// 更新文件列表
|
||||
this.files = [newFileObj];
|
||||
|
||||
// 生成预览
|
||||
if (this.isImageFile(newFile)) {
|
||||
this.generateImagePreview(newFile);
|
||||
}
|
||||
|
||||
this.$emit('file-change', this.files);
|
||||
// this.$message.success('文件已替换');
|
||||
}
|
||||
},
|
||||
// 移除文件
|
||||
handleRemove(file, fileList) {
|
||||
this.files = fileList;
|
||||
|
||||
// 如果移除了图片，清除预览
|
||||
if (fileList.length === 0 || (fileList[0] && !this.isImageFile(fileList[0].raw))) {
|
||||
this.previewImageUrl = '';
|
||||
this.previewImageName = '';
|
||||
} else if (fileList.length === 1 && fileList[0] && this.isImageFile(fileList[0].raw)) {
|
||||
// 如果只剩一张图片，重新生成预览
|
||||
this.generateImagePreview(fileList[0].raw);
|
||||
}
|
||||
|
||||
this.$emit('file-change', fileList);
|
||||
},
|
||||
// 判断是否为图片文件
|
||||
isImageFile(file) {
|
||||
return file && file.type && file.type.startsWith('image/');
|
||||
},
|
||||
// 生成图片预览
|
||||
generateImagePreview(file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
this.previewImageUrl = e.target.result;
|
||||
this.previewImageName = file.name;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
},
|
||||
// 清空所有文件
|
||||
clearFiles() {
|
||||
this.files = [];
|
||||
this.previewImageUrl = '';
|
||||
this.previewImageName = '';
|
||||
this.$emit('file-change', []);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 是否显示图片预览
|
||||
showImagePreview() {
|
||||
return this.previewImageUrl &&
|
||||
this.files.length === 1 &&
|
||||
this.files[0] &&
|
||||
this.files[0].raw &&
|
||||
this.isImageFile(this.files[0].raw);
|
||||
},
|
||||
accept() {
|
||||
return this.uploadType.split('、').map(type => `.${type}`).join(',');
|
||||
},
|
||||
// 获取支持的文件类型数组
|
||||
allowedTypes() {
|
||||
return this.uploadType.split('、');
|
||||
},
|
||||
// 获取文件大小限制（转换为MB数字）
|
||||
maxSizeMB() {
|
||||
const sizeStr = this.maxFileTips.toLowerCase();
|
||||
if (sizeStr.includes('mb')) {
|
||||
return parseFloat(sizeStr);
|
||||
} else if (sizeStr.includes('kb')) {
|
||||
return parseFloat(sizeStr) / 1024;
|
||||
} else if (sizeStr.includes('gb')) {
|
||||
return parseFloat(sizeStr) * 1024;
|
||||
}
|
||||
return 20;
|
||||
},
|
||||
// 获取MIME类型映射
|
||||
mimeTypes() {
|
||||
const typeMap = {
|
||||
'png': 'image/png',
|
||||
'jpg': 'image/jpeg',
|
||||
'jpeg': 'image/jpeg',
|
||||
'gif': 'image/gif',
|
||||
'bmp': 'image/bmp',
|
||||
'webp': 'image/webp',
|
||||
'svg': 'image/svg+xml'
|
||||
};
|
||||
return this.allowedTypes.map(type => typeMap[type] || `image/${type}`);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
fileList: {
|
||||
handler(newVal) {
|
||||
this.files = newVal;
|
||||
// 如果外部传入文件列表，也尝试生成预览
|
||||
if (newVal.length === 1 && newVal[0] && newVal[0].raw && this.isImageFile(newVal[0].raw)) {
|
||||
this.generateImagePreview(newVal[0].raw);
|
||||
} else {
|
||||
this.previewImageUrl = '';
|
||||
this.previewImageName = '';
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.upload-container {
|
||||
width: 100%;
|
||||
|
||||
.upload-demo {
|
||||
width: 100%;
|
||||
|
||||
::v-deep .el-upload {
|
||||
width: 100%;
|
||||
|
||||
.el-upload-dragger {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
border: 2px dashed #DCDFE6;
|
||||
border-radius: 8px;
|
||||
background-color: #FAFAFA;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
border-color: #409EFF;
|
||||
background-color: #F5F7FA;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
|
||||
// 图片预览样式
|
||||
.image-preview {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
|
||||
.preview-thumbnail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.preview-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
|
||||
.preview-text {
|
||||
text-align: center;
|
||||
color: white;
|
||||
pointer-events: none;
|
||||
|
||||
.main-text {
|
||||
font-size: 16px;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
font-size: 12px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .preview-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 默认上传区域样式
|
||||
.upload-text {
|
||||
text-align: center;
|
||||
|
||||
.main-text {
|
||||
font-size: 18px;
|
||||
color: #1F72EA;
|
||||
margin-bottom: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
line-height: 1.5;
|
||||
|
||||
div {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
<!-- 企业主体库表单 -->
|
||||
<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">
|
||||
<BasicInfo ref="basicInfo" />
|
||||
</el-col>
|
||||
<!-- 法人信息 -->
|
||||
<el-col :span="6" class="pane-center">
|
||||
<LegalPerson ref="legalPerson" />
|
||||
</el-col>
|
||||
<!-- 开户证明 -->
|
||||
<el-col :span="6" class="pane-right">
|
||||
<AccountOpeningCertificate ref="accountOpeningCertificate" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { decryptWithSM4 } from '@/utils/sm'
|
||||
import BasicInfo from './child/BasicInfo.vue'
|
||||
import LegalPerson from './child/LegalPerson.vue'
|
||||
import AccountOpeningCertificate from './child/AccountOpeningCertificate.vue'
|
||||
export default {
|
||||
name: 'EnterpriseForm',
|
||||
components: {
|
||||
BasicInfo,
|
||||
LegalPerson,
|
||||
AccountOpeningCertificate
|
||||
},
|
||||
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%);
|
||||
max-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>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="basic-info-title">
|
||||
<img src="@/assets/enterpriseLibrary/legalperson.png" alt="开户证明">
|
||||
<span>开户证明</span>
|
||||
</div>
|
||||
<el-form :model="form" :rules="rules" ref="accountOpeningCertificateForm" label-width="110px" label-position="top">
|
||||
<el-form-item label="开户许可证" prop="fileList">
|
||||
<UploadFile :fileList="form.fileList"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="开户银行" prop="openingBank">
|
||||
<el-input v-model="form.openingBank" placeholder="自动提取"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开户账号" prop="openingAccount">
|
||||
<el-input v-model="form.openingAccount" placeholder="自动提取"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UploadFile from '@/views/common/UploadFile.vue'
|
||||
export default {
|
||||
name: 'AccountOpeningCertificate',
|
||||
components:{UploadFile},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
fileList:[],
|
||||
openingBank: '',
|
||||
openingAccount: '',
|
||||
},
|
||||
rules: {
|
||||
fileList:[
|
||||
{ required: true, message: '请上传开户许可证', trigger: 'blur' }
|
||||
],
|
||||
openingBank: [
|
||||
{ required: true, message: '请输入开户银行', trigger: 'blur' }
|
||||
],
|
||||
openingAccount: [
|
||||
{ required: true, message: '请输入开户账号', trigger: 'blur' }
|
||||
],
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 校验规则
|
||||
validate() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$refs.accountOpeningCertificateForm.validate((valid) => {
|
||||
if (valid) {
|
||||
resolve(this.form) // 校验成功返回表单数据
|
||||
} else {
|
||||
reject(new Error('开户证明未填写完整'))
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.basic-info-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
span{
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="basic-info-title">
|
||||
<img src="@/assets/enterpriseLibrary/basic-info.png" alt="基本信息">
|
||||
<span>基本信息</span>
|
||||
</div>
|
||||
<el-form :model="form" :rules="rules" ref="basicInfoForm" label-width="110px" label-position="top">
|
||||
<!-- 营业执照 -->
|
||||
<el-form-item label="营业执照" prop="fileList">
|
||||
<UploadFile :fileList="form.fileList" />
|
||||
</el-form-item>
|
||||
<el-form-item label="企业名称" prop="enterpriseName">
|
||||
<el-input v-model="form.enterpriseName" placeholder="自动提取"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="统一社会信用代码" prop="enterpriseCode">
|
||||
<el-input v-model="form.enterpriseCode" placeholder="自动提取"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="注册资本" prop="registeredCapital">
|
||||
<el-input v-model="form.registeredCapital" placeholder="自动提取"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="营业期限" prop="businessTerm">
|
||||
<el-input v-model="form.businessTerm" placeholder="自动提取"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="住所" prop="residence">
|
||||
<el-input v-model="form.residence" placeholder="自动提取"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="经营范围" prop="businessScope">
|
||||
<el-input v-model="form.businessScope" placeholder="自动提取"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UploadFile from '@/views/common/UploadFile.vue'
|
||||
export default {
|
||||
name: 'BasicInfo',
|
||||
components: {
|
||||
UploadFile
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
enterpriseName: '',
|
||||
enterpriseCode: '',
|
||||
registeredCapital: '',
|
||||
businessTerm: '',
|
||||
residence: '',
|
||||
businessScope: '',
|
||||
fileList: []
|
||||
},
|
||||
rules: {
|
||||
fileList: [
|
||||
{ required: true, message: '请上传营业执照', trigger: 'blur' }
|
||||
],
|
||||
enterpriseName: [
|
||||
{ required: true, message: '请输入企业名称', trigger: 'blur' }
|
||||
],
|
||||
enterpriseCode: [
|
||||
{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' }
|
||||
],
|
||||
registeredCapital: [
|
||||
{ required: true, message: '请输入注册资本', trigger: 'blur' }
|
||||
],
|
||||
businessTerm: [
|
||||
{ required: true, message: '请输入营业期限', trigger: 'blur' }
|
||||
],
|
||||
residence: [
|
||||
{ required: true, message: '请输入住所', trigger: 'blur' }
|
||||
],
|
||||
businessScope: [
|
||||
{ required: true, message: '请输入经营范围', trigger: 'blur' }
|
||||
],
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 校验规则
|
||||
validate() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$refs.basicInfoForm.validate((valid) => {
|
||||
if (valid) {
|
||||
resolve(this.form) // 校验成功返回表单数据
|
||||
} else {
|
||||
reject(new Error('基本信息未填写完整'))
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.basic-info-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
|
||||
span {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="basic-info-title">
|
||||
<img src="@/assets/enterpriseLibrary/legalperson.png" alt="法人信息">
|
||||
<span>法人信息</span>
|
||||
</div>
|
||||
<el-form :model="form" :rules="rules" ref="legalPersonForm" label-width="110px" label-position="top">
|
||||
<!-- 身份证人像面 -->
|
||||
<el-form-item label="身份证人像面" prop="fileList">
|
||||
<UploadFile :fileList="form.fileList" />
|
||||
</el-form-item>
|
||||
<!-- 身份证国徽面 -->
|
||||
<el-form-item label="身份证国徽面" prop="fileList2">
|
||||
<UploadFile :fileList="form.fileList2" />
|
||||
</el-form-item>
|
||||
<el-form-item label="法人姓名" prop="legalPersonName">
|
||||
<el-input v-model="form.legalPersonName" placeholder="自动提取"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="法人身份证号" prop="legalPersonIdCard">
|
||||
<el-input v-model="form.legalPersonIdCard" placeholder="自动提取"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证有效期" prop="idCardStartDate">
|
||||
<el-input v-model="form.idCardStartDate" placeholder="自动提取"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="法人职务" prop="legalPersonPosition">
|
||||
<el-input v-model="form.legalPersonPosition" placeholder="请输入法人职务"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="法人联系方式" prop="legalPersonPhone">
|
||||
<el-input v-model="form.legalPersonPhone" placeholder="请输入法人联系方式"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UploadFile from '@/views/common/UploadFile.vue'
|
||||
export default {
|
||||
name: 'LegalPerson',
|
||||
components: { UploadFile },
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
legalPersonName: '',
|
||||
legalPersonIdCard: '',
|
||||
idCardStartDate: '',
|
||||
legalPersonPosition: '',
|
||||
legalPersonPhone: '',
|
||||
fileList: [],
|
||||
fileList2: [],
|
||||
},
|
||||
rules: {
|
||||
fileList: [
|
||||
{ required: true, message: '请上传身份证人像面', trigger: 'blur' }
|
||||
],
|
||||
fileList2: [
|
||||
{ required: true, message: '请上传身份证国徽面', trigger: 'blur' }
|
||||
],
|
||||
legalPersonName: [
|
||||
{ required: true, message: '请输入法人姓名', trigger: 'blur' }
|
||||
],
|
||||
legalPersonIdCard: [
|
||||
{ required: true, message: '请输入法人身份证号', trigger: 'blur' }
|
||||
],
|
||||
idCardStartDate: [
|
||||
{ required: true, message: '请输入身份证有效期', trigger: 'blur' }
|
||||
],
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 校验规则
|
||||
validate() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$refs.legalPersonForm.validate((valid) => {
|
||||
if (valid) {
|
||||
resolve(this.form) // 校验成功返回表单数据
|
||||
} else {
|
||||
reject(new Error('法人信息未填写完整'))
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.basic-info-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
|
||||
span {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,264 +1,299 @@
|
|||
<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 class="app-container">
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-container">
|
||||
<div class="search-content">
|
||||
<div class="search-left">
|
||||
<h2 class="page-title">投标人主体库</h2>
|
||||
</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 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" @keyup.enter.native="handleQuery">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="small" @click="handleQuery" class="search-btn">查询</el-button>
|
||||
<el-button 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" v-hasPermi="['enterpriseLibrary:enterprise:add']">
|
||||
<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>
|
||||
|
||||
<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="data-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">资质库</span>
|
||||
<span class="stat-value">10</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">业绩库</span>
|
||||
<span class="stat-value">23</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">人员库</span>
|
||||
<span class="stat-value">55</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">财务库</span>
|
||||
<span class="stat-value">88</span>
|
||||
</div>
|
||||
<!-- <div class="stat-item">
|
||||
<span class="stat-label">技术方案库</span>
|
||||
<span class="stat-value">88</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">工器具库</span>
|
||||
<span class="stat-value">88</span>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="enterprise-actions">
|
||||
<div>
|
||||
<img :src="EnterpriseKnowledge" alt="企业知识库" />
|
||||
<span>企业知识库</span>
|
||||
</div>
|
||||
<div v-hasPermi="['enterpriseLibrary:enterprise:detail']">
|
||||
<img :src="EnterpriseDetail" alt="详情" />
|
||||
<span>详情</span>
|
||||
</div>
|
||||
<div v-hasPermi="['enterpriseLibrary:enterprise:edit']">
|
||||
<img :src="EnterpriseEdit" alt="编辑" />
|
||||
<span>编辑</span>
|
||||
</div>
|
||||
<div v-hasPermi="['enterpriseLibrary:enterprise:del']">
|
||||
<img :src="EnterpriseDelete" alt="删除" />
|
||||
<span>删除</span>
|
||||
</div>
|
||||
</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>
|
||||
import EnterpriseKnowledge from '@/assets/enterpriseLibrary/enterprise/enterprise-knowledge.png';
|
||||
import EnterpriseDetail from '@/assets/enterpriseLibrary/enterprise/enterprise-detail.png';
|
||||
import EnterpriseEdit from '@/assets/enterpriseLibrary/enterprise/enterprise-edit.png';
|
||||
import EnterpriseDelete from '@/assets/enterpriseLibrary/enterprise/enterprise-delete.png';
|
||||
import { encryptWithSM4 } from '@/utils/sm'
|
||||
export default {
|
||||
name: 'Enterprise',
|
||||
components: {
|
||||
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: []
|
||||
}
|
||||
]
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 企业知识库、编辑等图片引用
|
||||
EnterpriseKnowledge,
|
||||
EnterpriseDetail,
|
||||
EnterpriseEdit,
|
||||
EnterpriseDelete,
|
||||
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('获取企业列表')
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getList()
|
||||
// 查询
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 获取企业列表
|
||||
getList() {
|
||||
// 这里可以调用API获取数据
|
||||
console.log('获取企业列表')
|
||||
},
|
||||
// 重置
|
||||
resetQuery() {
|
||||
this.queryParams.enterpriseName = ''
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 查询
|
||||
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()
|
||||
// 新增企业
|
||||
handleAdd() {
|
||||
console.log('新增企业')
|
||||
// this.$router.push('/enterpriseLibrary/enterprise/add')
|
||||
this.$router.push({
|
||||
name: 'EnterpriseForm',
|
||||
query: {
|
||||
type: encryptWithSM4('add'),
|
||||
id: encryptWithSM4(''),
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 分页大小改变
|
||||
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;
|
||||
background: linear-gradient( 180deg, #F1F6FF 20%, #E5EFFF 100%);
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
color: #424242;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.search-container {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
padding: 0 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.search-content {
|
||||
display: flex;
|
||||
|
|
@ -287,10 +322,13 @@ export default {
|
|||
font-weight: 500;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
|
||||
letter-spacing: 1px;
|
||||
|
||||
&:hover {
|
||||
background: #66b1ff;
|
||||
border-color: #66b1ff;
|
||||
box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -300,12 +338,15 @@ export default {
|
|||
color: #606266;
|
||||
font-weight: 500;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
box-shadow: 0px 4px 8px 0px rgba(76, 76, 76, 0.2);
|
||||
letter-spacing: 1px;
|
||||
|
||||
&:hover {
|
||||
background: #f5f7fa;
|
||||
border-color: #c0c4cc;
|
||||
color: #409EFF;
|
||||
box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -316,7 +357,7 @@ export default {
|
|||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
max-height: 600px;
|
||||
max-height: calc(100vh - 280px);
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
|
||||
|
|
@ -387,9 +428,9 @@ export default {
|
|||
margin-bottom: 15px;
|
||||
|
||||
.enterprise-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #424242;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
line-height: 1.4;
|
||||
|
|
@ -418,14 +459,15 @@ export default {
|
|||
margin-bottom: 8px;
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
color: #888888;
|
||||
font-size: 14px;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
color: #424242;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -446,32 +488,32 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.qualification-section {
|
||||
.data-stats {
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
|
||||
.qualification-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.stat-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 8px 4px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e9ecef;
|
||||
|
||||
.qualification-items {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
.stat-label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.stat-value {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -480,20 +522,93 @@ export default {
|
|||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.el-button {
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
padding: 6px 12px;
|
||||
font-weight: 500;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
min-width: 70px;
|
||||
height: 60px;
|
||||
gap: 6px;
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// 企业知识库按钮 - 蓝色主题
|
||||
> div:nth-child(1) {
|
||||
background: #409EFF;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background: #66b1ff;
|
||||
box-shadow: 0px 4px 8px rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
// 详情按钮 - 浅蓝色主题
|
||||
> div:nth-child(2) {
|
||||
background: #f0f8ff;
|
||||
border: none;
|
||||
color: #409EFF;
|
||||
|
||||
&:hover {
|
||||
background: #e6f3ff;
|
||||
color: #66b1ff;
|
||||
box-shadow: 0px 4px 8px rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
// 编辑按钮 - 橙色主题
|
||||
> div:nth-child(3) {
|
||||
background: #fff7e6;
|
||||
border: none;
|
||||
color: #ff9500;
|
||||
|
||||
&:hover {
|
||||
background: #fff2d9;
|
||||
color: #ffb84d;
|
||||
box-shadow: 0px 4px 8px rgba(255, 149, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
// 删除按钮 - 红色主题
|
||||
> div:nth-child(4) {
|
||||
background: #fff1f0;
|
||||
border: none;
|
||||
color: #ff4d4f;
|
||||
|
||||
&:hover {
|
||||
background: #ffe7e6;
|
||||
color: #ff7875;
|
||||
box-shadow: 0px 4px 8px rgba(255, 77, 79, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
// background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
// box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
margin-top: 20px;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
|
|
|
|||
Loading…
Reference in New Issue