初始化
This commit is contained in:
563
src/pages/commanage/index.vue
Normal file
563
src/pages/commanage/index.vue
Normal file
@@ -0,0 +1,563 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user