564 lines
16 KiB
Vue
564 lines
16 KiB
Vue
<template>
|
||
<div class="company-management">
|
||
<!-- 操作栏 -->
|
||
<div class="header">
|
||
<el-button type="primary" @click="handleAdd" :icon="Plus">添加企业</el-button>
|
||
</div>
|
||
|
||
<!-- 企业表格 -->
|
||
<el-table :data="companies" border style="width: 100%" v-loading="loading" empty-text="暂无数据">
|
||
<el-table-column label="操作" width="102">
|
||
<template #default="{ row }">
|
||
<el-button type="info" :icon="Edit" circle plain @click="handleEdit(row)" />
|
||
<el-button type="danger" :icon="Delete" circle plain @click="handleDelete(row)" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="code" label="公司代码" width="100" />
|
||
<el-table-column prop="nameCn" label="中文名称" width="180" />
|
||
<el-table-column prop="nameEn" label="英文名称" width="180" />
|
||
<el-table-column prop="industry" label="所属行业" width="120" />
|
||
<el-table-column prop="identity" label="身份" width="120" />
|
||
<el-table-column prop="region" label="地区" width="120" />
|
||
<!--<el-table-column prop="licenseCode" label="营业执照" width="220" />-->
|
||
</el-table>
|
||
|
||
<!-- 添加/编辑对话框 -->
|
||
<el-dialog v-model="dialogVisible"
|
||
:title="isEdit ? '编辑企业' : '添加企业'"
|
||
destroy-on-close
|
||
:close-on-click-modal="false"
|
||
width="800px">
|
||
<el-form :model="form"
|
||
:rules="rules"
|
||
ref="formRef"
|
||
label-width="120px"
|
||
label-position="right">
|
||
|
||
<el-form-item label="中文名称" prop="nameCn">
|
||
<el-input v-model="form.nameCn" placeholder="请输入中文名称" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="英文名称" prop="nameEn">
|
||
<el-input v-model="form.nameEn" placeholder="请输入英文名称" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="所属行业" prop="industry">
|
||
<el-select v-model="form.industry" placeholder="请选择行业">
|
||
<el-option v-for="item in industryOptions"
|
||
:key="item"
|
||
:label="item"
|
||
:value="item" />
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="公司身份" prop="identity">
|
||
<el-select v-model="form.identity" placeholder="请选择身份">
|
||
<el-option v-for="item in identityOptions"
|
||
:key="item"
|
||
:label="item"
|
||
:value="item" />
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="所属地区" prop="region">
|
||
<el-select v-model="form.region" placeholder="请选择地区">
|
||
<el-option v-for="(key,item) in regionOptions"
|
||
:key="item"
|
||
:label="item"
|
||
:value="item" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<!--
|
||
<el-form-item label="营业执照代码" prop="licenseCode">
|
||
<el-input v-model="form.licenseCode" placeholder="请输入营业执照代码" />
|
||
</el-form-item>-->
|
||
<!--<el-form-item label="营业执照" prop="licenseImage">
|
||
<el-upload class="license-uploader"
|
||
drag
|
||
action="/api/upload"
|
||
:show-file-list="false"
|
||
:on-change="handleLicenseChange"
|
||
:auto-upload="false">-->
|
||
<!-- 预览区域 -->
|
||
<!--<div v-if="form.licenseImage || form.licensePreview" class="image-preview">
|
||
<img v-if="isImageFile(form.licenseImageFile)"
|
||
:src="form.licensePreview || getFullUrl(form.licenseImage)"
|
||
class="preview-image" />
|
||
<div v-else class="file-preview">
|
||
<el-icon size="33"><DocumentChecked /></el-icon>
|
||
<div>营业执照文件 <span style="color: #409EFF">√已上传</span></div>
|
||
<div class="file-name">{{ getFileName(form.licenseImage) }}</div>
|
||
</div>
|
||
<div class="preview-mask">
|
||
<el-icon><UploadFilled /></el-icon>
|
||
<div>点击更换文件</div>
|
||
</div>
|
||
</div>-->
|
||
<!-- 未上传状态 -->
|
||
<!--<template v-else>
|
||
<el-icon class="el-icon--upload"><UploadFilled /></el-icon>
|
||
<div class="el-upload__text">
|
||
拖拽文件到此 或 <em>点击上传</em>
|
||
</div>
|
||
<div class="el-upload__tip">
|
||
支持JPG/PNG/PDF格式，大小不超过5MB
|
||
</div>
|
||
</template>
|
||
</el-upload>
|
||
</el-form-item>-->
|
||
|
||
<el-form-item label="公司Logo" prop="logo">
|
||
<el-upload class="logo-uploader"
|
||
drag
|
||
action="/api/upload"
|
||
:show-file-list="false"
|
||
:on-change="handleLogoChange"
|
||
:auto-upload="false">
|
||
<!-- 预览区域 -->
|
||
<div v-if="form.logoaddress || form.logoPreview" class="image-preview">
|
||
<img :src="form.logoPreview || getFullUrl(form.logoaddress)"
|
||
class="preview-image" />
|
||
<div class="preview-mask">
|
||
<el-icon><UploadFilled /></el-icon>
|
||
<div>点击更换Logo</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 未上传状态 -->
|
||
<template v-else>
|
||
<el-icon class="el-icon--upload"><UploadFilled /></el-icon>
|
||
<div class="el-upload__text">
|
||
拖拽图片到此 或 <em>点击上传</em>
|
||
</div>
|
||
<div class="el-upload__tip">
|
||
支持JPG/PNG格式，大小不超过5MB
|
||
</div>
|
||
</template>
|
||
</el-upload>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<template #footer>
|
||
<el-button @click="dialogVisible = false">取消</el-button>
|
||
<el-button type="primary" @click="submitForm">确定</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, onMounted, inject, onUnmounted } from 'vue'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import { Plus, Delete, Edit, UploadFilled, DocumentChecked } from '@element-plus/icons-vue'
|
||
|
||
const $http = inject('$http')
|
||
const ajaxfile = inject('ajaxfile');
|
||
const config = inject('config');
|
||
|
||
// 数据列表
|
||
const companies = ref([])
|
||
const loading = ref(false)
|
||
|
||
// 对话框相关
|
||
const dialogVisible = ref(false)
|
||
const isEdit = ref(false)
|
||
const currentCompanyId = ref(null)
|
||
const formRef = ref(null)
|
||
|
||
// 表单初始数据
|
||
const defaultForm = {
|
||
code: '',
|
||
nameCn: '',
|
||
nameEn: '',
|
||
industry: '',
|
||
identity: '',
|
||
region: '',
|
||
licenseCode: '',
|
||
logoaddress: '',
|
||
licenseImage: ''
|
||
}
|
||
|
||
const form = reactive({ ...defaultForm })
|
||
|
||
// 选项数据
|
||
const industryOptions = ref([]);
|
||
const getIndustry = () => {
|
||
try {
|
||
const rs = $http.post('ConfigPY/GetSingleValue', {
|
||
VarName: "行业分类",
|
||
}).then(rs => {
|
||
//console.log(JSON.parse(rs.data.response));
|
||
industryOptions.value = JSON.parse(rs.data.response)
|
||
})
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
};
|
||
|
||
|
||
const identityOptions = ref([]);
|
||
const getIdentity = () => {
|
||
try {
|
||
const rs = $http.post('ConfigPY/GetSingleValue', {
|
||
VarName: "公司身份",
|
||
}).then(rs => {
|
||
//console.log(JSON.parse(rs.data.response));
|
||
identityOptions.value = JSON.parse(rs.data.response)
|
||
})
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
};
|
||
|
||
const regionOptions = ref([]);
|
||
const getRegion = () => {
|
||
try {
|
||
const rs = $http.post('ConfigPY/GetSingleValue', {
|
||
VarName: "区域",
|
||
}).then(rs => {
|
||
//console.log(JSON.parse(rs.data.response));
|
||
regionOptions.value = JSON.parse(rs.data.response)
|
||
})
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
};
|
||
|
||
// 验证规则
|
||
const rules = reactive({
|
||
nameCn: [
|
||
{ required: true, message: '请输入中文名称', trigger: 'blur' }
|
||
],
|
||
industry: [
|
||
{ required: true, message: '请选择所属行业', trigger: 'change' }
|
||
],
|
||
identity: [
|
||
{ required: true, message: '请选择所属身份', trigger: 'change' }
|
||
],
|
||
region: [
|
||
{ required: true, message: '请选择所属地区', trigger: 'change' }
|
||
]/*,
|
||
licenseCode: [
|
||
{ required: true, message: '请输入营业执照代码', trigger: 'blur' }
|
||
]*/
|
||
})
|
||
|
||
// 获取企业列表
|
||
const getCompanies = async () => {
|
||
try {
|
||
loading.value = true
|
||
const rs = await $http.post('Company/GetComInfo', {
|
||
IsAll: true,
|
||
ID: 0,
|
||
})
|
||
if (rs.data.isok) {
|
||
companies.value = rs.data.response
|
||
//console.log(companies.value);
|
||
} else {
|
||
ElMessage.error(rs.data.message)
|
||
}
|
||
} catch (error) {
|
||
ElMessage.error('获取企业列表失败')
|
||
console.error(error)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// 获取完整图片URL
|
||
const getFullUrl = (filename) => {
|
||
//console.log(config.httpAds + `${filename}`);
|
||
if (!filename) return '';
|
||
// 如果已经是完整URL直接返回
|
||
if (filename.startsWith('http')) return filename;
|
||
// 根据实际存储路径拼接
|
||
return config.Ads + `${filename}`;
|
||
}
|
||
|
||
const beforeImageUpload = (file) => {
|
||
const isImage = file.type.startsWith('image/')
|
||
const isLt5M = file.size / 1024 / 1024 < 5
|
||
|
||
if (!isImage) {
|
||
ElMessage.error('只能上传图片文件!')
|
||
return false
|
||
}
|
||
if (!isLt5M) {
|
||
ElMessage.error('文件大小不能超过5MB!')
|
||
return false
|
||
}
|
||
return true
|
||
}
|
||
const beforeImageUploadPDF = (file) => {
|
||
const isImageOrPDF = file.type.startsWith('image/') || file.type === 'application/pdf';
|
||
const isLt5M = file.size / 1024 / 1024 < 5;
|
||
|
||
if (!isImageOrPDF) {
|
||
ElMessage.error('只能上传图片文件或PDF文件!');
|
||
return false;
|
||
}
|
||
if (!isLt5M) {
|
||
ElMessage.error('文件大小不能超过5MB!');
|
||
return false;
|
||
}
|
||
return true;
|
||
}
|
||
// 添加公司
|
||
const handleAdd = () => {
|
||
Object.assign(form, defaultForm);
|
||
isEdit.value = false;
|
||
dialogVisible.value = true;
|
||
};
|
||
|
||
// 编辑公司
|
||
const handleEdit = (row) => {
|
||
Object.assign(form, row);
|
||
isEdit.value = true;
|
||
currentCompanyId.value = row.id;
|
||
dialogVisible.value = true;
|
||
};
|
||
|
||
// 删除公司
|
||
const handleDelete = (row) => {
|
||
ElMessageBox.confirm('确定删除该公司吗？', '警告', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(async () => {
|
||
try {
|
||
//console.log(row.id);
|
||
const rs = await $http.post('Company/DelCom', { Id: row.id });
|
||
if (rs.data.isok) {
|
||
ElMessage.success('删除成功');
|
||
await getCompanies();
|
||
} else {
|
||
ElMessage.error(rs.data.message);
|
||
}
|
||
} catch (error) {
|
||
ElMessage.error('删除失败');
|
||
console.error(error);
|
||
}
|
||
}).catch(() => { });
|
||
};
|
||
|
||
const handleLogoChange = (file) => {
|
||
form.logoFile = file.raw;
|
||
// 生成本地预览图URL
|
||
form.logoPreview = URL.createObjectURL(file.raw); // 新增预览字段
|
||
};
|
||
|
||
const handleLicenseChange = (file) => {
|
||
form.licenseImageFile = file.raw;
|
||
// 生成本地预览图URL
|
||
form.licensePreview = URL.createObjectURL(file.raw); // 新增预览字段
|
||
};
|
||
|
||
const submitForm = async () => {
|
||
await formRef.value.validate();
|
||
|
||
try {
|
||
// 上传Logo
|
||
if (form.logoFile) {
|
||
const logoFileData = {
|
||
File: form.logoFile,
|
||
Folder: "companylogo" // 根据实际存储目录调整
|
||
};
|
||
const logoUploadRes = await ajaxfile(logoFileData);
|
||
if (logoUploadRes?.fileName) {
|
||
form.logoaddress = "Uploads/companylogo/" + logoUploadRes.fileName;
|
||
} else {
|
||
ElMessage.error('上传Logo失败: ' + logoUploadRes);
|
||
return;
|
||
}
|
||
} else if (form.logoaddress) { // 保留已有Logo逻辑
|
||
form.logoaddress = form.logoaddress.substring(form.logoaddress.lastIndexOf('/') + 1);
|
||
}
|
||
|
||
/* // 上传营业执照
|
||
if (form.licenseImageFile) {
|
||
const licenseFileData = {
|
||
File: form.licenseImageFile,
|
||
Folder: "businesslic" // 根据实际存储目录调整
|
||
};
|
||
const licenseUploadRes = await ajaxfile(licenseFileData);
|
||
if (licenseUploadRes?.fileName) {
|
||
form.licenseImage = licenseUploadRes.fileName;
|
||
} else {
|
||
ElMessage.error('上传营业执照失败: ' + licenseUploadRes);
|
||
return;
|
||
}
|
||
} else if (form.licenseImage) { // 保留已有营业执照逻辑
|
||
form.licenseImage = form.licenseImage.substring(form.licenseImage.lastIndexOf('/') + 1);
|
||
}*/
|
||
|
||
// 提交表单数据
|
||
const api = isEdit.value ? 'Company/EditCom' : 'Company/AddCom';
|
||
const data = isEdit.value ? { ...form, id: currentCompanyId.value } : form;
|
||
|
||
const rs = await $http.post(api, data);
|
||
if (rs.data.isok) {
|
||
ElMessage.success(isEdit.value ? '修改成功' : '添加成功');
|
||
dialogVisible.value = false;
|
||
await getCompanies();
|
||
} else {
|
||
ElMessage.error(rs.data.message);
|
||
}
|
||
} catch (error) {
|
||
ElMessage.error('操作失败');
|
||
console.error(error);
|
||
}
|
||
};
|
||
|
||
const isImageFile = (url) => {
|
||
return /\.(jpe?g|png|gif|webp)$/i.test(url)
|
||
}
|
||
|
||
const getFileName = (url) => {
|
||
return url.split('/').pop()
|
||
}
|
||
// 其他操作函数（handleAdd/handleEdit/handleDelete）与公司管理页面逻辑类似
|
||
// 此处省略，保持与公司管理页面相同逻辑即可
|
||
|
||
onMounted(() => {
|
||
getCompanies()
|
||
getIndustry()
|
||
getIdentity()
|
||
getRegion()
|
||
})
|
||
// 在组件卸载时释放对象URL
|
||
onUnmounted(() => {
|
||
if (form.logoPreview) URL.revokeObjectURL(form.logoPreview);
|
||
if (form.licensePreview) URL.revokeObjectURL(form.licensePreview);
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.company-management {
|
||
padding: 12px;
|
||
}
|
||
|
||
.header {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.logo-uploader,
|
||
.license-uploader {
|
||
border: 1px dashed var(--el-border-color);
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: border-color 0.3s;
|
||
}
|
||
|
||
.logo-uploader {
|
||
width: 300px;
|
||
height: 180px;
|
||
}
|
||
|
||
.license-uploader {
|
||
width: 300px;
|
||
height: 180px;
|
||
}
|
||
|
||
.logo-uploader:hover,
|
||
.license-uploader:hover {
|
||
border-color: var(--el-color-primary);
|
||
}
|
||
|
||
.uploader-icon {
|
||
font-size: 28px;
|
||
color: #8c939d;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.logo-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.license-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.upload-tip {
|
||
font-size: 12px;
|
||
color: #606266;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
/* 通用上传样式 */
|
||
.logo-uploader :deep(.el-upload-dragger),
|
||
.license-uploader :deep(.el-upload-dragger) {
|
||
width: 100%;
|
||
min-height: 180px;
|
||
padding: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 预览区域公共样式 */
|
||
.image-preview {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.preview-image {
|
||
max-width: 100%;
|
||
max-height: 200px;
|
||
object-fit: contain;
|
||
}
|
||
|
||
|
||
|
||
/* 遮罩层样式 */
|
||
.preview-mask {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
color: white;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: 0;
|
||
transition: opacity 0.3s;
|
||
}
|
||
|
||
.image-preview:hover .preview-mask {
|
||
opacity: 1;
|
||
}
|
||
|
||
|
||
.el-icon--upload {
|
||
font-size: 36px;
|
||
color: var(--el-text-color-secondary);
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.el-upload__text {
|
||
font-size: 14px;
|
||
color: var(--el-text-color-regular);
|
||
text-align: center;
|
||
}
|
||
|
||
.el-upload__tip {
|
||
font-size: 12px;
|
||
color: var(--el-text-color-secondary);
|
||
margin-top: 8px;
|
||
}
|
||
</style>
|