477 lines
13 KiB
Vue
477 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<div class="app-container" :class="{ 'no-pointer-events': showUploadAnimation || showSaveAnimation }">
|
|||
|
|
<!-- 全局上传动画 -->
|
|||
|
|
<div v-if="showUploadAnimation" class="global-upload-animation">
|
|||
|
|
<div class="animation-mask"></div>
|
|||
|
|
<div class="animation-content">
|
|||
|
|
<div class="spinner"></div>
|
|||
|
|
<div class="animation-text">{{ animationText }}</div>
|
|||
|
|
<div class="animation-subtext">正在处理文件，请稍候...</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 保存动画 -->
|
|||
|
|
<div v-if="showSaveAnimation" class="global-upload-animation">
|
|||
|
|
<div class="animation-mask"></div>
|
|||
|
|
<div class="animation-content">
|
|||
|
|
<div class="spinner"></div>
|
|||
|
|
<div class="animation-text">数据上传中</div>
|
|||
|
|
<div class="animation-subtext">请稍后，正在保存数据...</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="content-header">
|
|||
|
|
<el-breadcrumb separator="/" class="breadcrumb">
|
|||
|
|
<!-- 面包屑可根据实际需求添加 -->
|
|||
|
|
</el-breadcrumb>
|
|||
|
|
<div class="header-actions">
|
|||
|
|
<el-button class="reset-btn" @click="handleBack()" :disabled="showSaveAnimation">返回</el-button>
|
|||
|
|
<el-button class="search-btn" @click="handleSave()" :loading="showSaveAnimation">
|
|||
|
|
{{ type === 'add' ? '新增' : '保存' }}
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="content-body">
|
|||
|
|
<el-row :gutter="24" class="content-row">
|
|||
|
|
<el-col :span="24" class="form-pane">
|
|||
|
|
<BasicInfo
|
|||
|
|
ref="basicInfoRef"
|
|||
|
|
:industry-type-options="industryTypeOptions"
|
|||
|
|
:type="type"
|
|||
|
|
/>
|
|||
|
|
</el-col>
|
|||
|
|
|
|||
|
|
<el-col :span="12" class="form-pane">
|
|||
|
|
<ProjectFile
|
|||
|
|
ref="projectFileRef"
|
|||
|
|
title="项目文件"
|
|||
|
|
/>
|
|||
|
|
</el-col>
|
|||
|
|
|
|||
|
|
<el-col :span="12" class="form-pane">
|
|||
|
|
<SectionFile
|
|||
|
|
ref="sectionFileRef"
|
|||
|
|
title="标段/标包文件"
|
|||
|
|
/>
|
|||
|
|
</el-col>
|
|||
|
|
|
|||
|
|
<el-col :span="24" class="form-pane">
|
|||
|
|
<AnalysisLabel
|
|||
|
|
ref="analysisLabelRef"
|
|||
|
|
title="解析标签组"
|
|||
|
|
/>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { decryptWithSM4, encryptWithSM4 } from '@/utils/sm'
|
|||
|
|
import BasicInfo from './child/BasicInfo.vue'
|
|||
|
|
import ProjectFile from './child/ProjectFile.vue'
|
|||
|
|
import SectionFile from './child/SectionFile.vue'
|
|||
|
|
import AnalysisLabel from './child/AnalysisLabel.vue'
|
|||
|
|
import {
|
|||
|
|
addTemplateInfo,
|
|||
|
|
updateTemplateInfo,
|
|||
|
|
checkTemplateNameUnique,
|
|||
|
|
getTemplateInfoDetail
|
|||
|
|
} from "@/api/template/templateInfo/templateInfo";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'TemplateForm',
|
|||
|
|
components: {
|
|||
|
|
BasicInfo,
|
|||
|
|
ProjectFile,
|
|||
|
|
SectionFile,
|
|||
|
|
AnalysisLabel
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
// 仅保留必要的props，移除type和rowData（从路由获取）
|
|||
|
|
visible: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
industryTypeOptions: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => []
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
type: 'add', // 默认为新增，将从路由参数覆盖
|
|||
|
|
templateId: null, // 从路由参数解析的模板ID
|
|||
|
|
showUploadAnimation: false,
|
|||
|
|
showSaveAnimation: false,
|
|||
|
|
uploadQueue: 0,
|
|||
|
|
animationText: '识别中'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 返回列表页
|
|||
|
|
handleBack() {
|
|||
|
|
const obj = { path: "/templateInfo/index" };
|
|||
|
|
this.$tab.closeOpenPage(obj);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 处理文件数据，提取fileRes中的属性到顶层
|
|||
|
|
processFile(file, source) {
|
|||
|
|
const baseProps = {
|
|||
|
|
compositionName: file.compositionName,
|
|||
|
|
businessType: file.businessType,
|
|||
|
|
compositionType: file.compositionType,
|
|||
|
|
compositionFileType: file.compositionFileType,
|
|||
|
|
source: source,
|
|||
|
|
fileName: file.response?.fileRes?.fileName || file.name || '',
|
|||
|
|
filePath: file.response?.fileRes?.filePath || file.filePath || '',
|
|||
|
|
fileSize: file.response?.fileRes?.fileSize || file.size || 0,
|
|||
|
|
fileType: file.response?.fileRes?.fileType || '',
|
|||
|
|
sourceFileName: file.response?.fileRes?.sourceFileName || file.name || '',
|
|||
|
|
suffixName: file.response?.fileRes?.suffixName || '',
|
|||
|
|
percentage: file.percentage || 0,
|
|||
|
|
status: file.status || ''
|
|||
|
|
};
|
|||
|
|
delete baseProps.response;
|
|||
|
|
return baseProps;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 保存模板信息
|
|||
|
|
async handleSave() {
|
|||
|
|
if (this.showSaveAnimation) return;
|
|||
|
|
this.showSaveAnimation = true;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 1. 校验并获取所有子组件数据
|
|||
|
|
const [basicData, projectFileData, sectionFileData, analysisLabelData] = await Promise.all([
|
|||
|
|
this.$refs.basicInfoRef.validate(),
|
|||
|
|
this.$refs.projectFileRef.validate(),
|
|||
|
|
this.$refs.sectionFileRef.validate(),
|
|||
|
|
this.$refs.analysisLabelRef.validate()
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
console.log("project",projectFileData)
|
|||
|
|
console.log("section",sectionFileData)
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 2. 处理文件列表
|
|||
|
|
const projectFiles = projectFileData.flatMap(tab =>
|
|||
|
|
tab.fileList.map(file => this.processFile(file, 'project'))
|
|||
|
|
);
|
|||
|
|
const sectionFiles = sectionFileData.flatMap(tab =>
|
|||
|
|
tab.fileList.map(file => this.processFile(file, 'section'))
|
|||
|
|
);
|
|||
|
|
const allFiles = [...projectFiles, ...sectionFiles];
|
|||
|
|
|
|||
|
|
if (allFiles.length === 0) {
|
|||
|
|
throw new Error('请至少上传一个文件');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 3. 处理删除的文件路径
|
|||
|
|
const processDelFiles = (delFileList) => {
|
|||
|
|
return delFileList.map(path => path.includes('mainDatabase/') ? path : path);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 4. 合并表单数据
|
|||
|
|
const formData = {
|
|||
|
|
...basicData,
|
|||
|
|
...analysisLabelData,
|
|||
|
|
templateId: this.type === 'edit' ? this.templateId : null,
|
|||
|
|
useState: '0',
|
|||
|
|
publishedStatus: '1',
|
|||
|
|
files: allFiles,
|
|||
|
|
delFiles: [
|
|||
|
|
...processDelFiles(projectFileData.flatMap(item => item.delFileList || [])),
|
|||
|
|
...processDelFiles(sectionFileData.flatMap(item => item.delFileList || []))
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
console.log('666',formData)
|
|||
|
|
|
|||
|
|
// 5. 校验模板名称唯一性（仅编辑时）
|
|||
|
|
if (this.type === 'edit') {
|
|||
|
|
const uniqueRes = await checkTemplateNameUnique({
|
|||
|
|
templateName: formData.templateName,
|
|||
|
|
templateId: formData.templateId
|
|||
|
|
});
|
|||
|
|
if (uniqueRes.data > 0) {
|
|||
|
|
throw new Error('同一行业下模板名称已存在，请更换');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 6. 调用接口保存
|
|||
|
|
if (this.type === 'add') {
|
|||
|
|
await addTemplateInfo(formData);
|
|||
|
|
} else {
|
|||
|
|
await updateTemplateInfo(formData);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.$message.success(`${this.type === 'add' ? '新增' : '编辑'}模板成功`);
|
|||
|
|
this.$emit('save-success');
|
|||
|
|
this.handleBack();
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
this.$message.error(error.message || '请完善表单信息');
|
|||
|
|
} finally {
|
|||
|
|
this.showSaveAnimation = false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 上传动画控制
|
|||
|
|
handleStartUpload(text) {
|
|||
|
|
this.animationText = text || '处理中';
|
|||
|
|
this.uploadQueue++;
|
|||
|
|
this.showUploadAnimation = true;
|
|||
|
|
},
|
|||
|
|
handleEndUpload() {
|
|||
|
|
this.uploadQueue--;
|
|||
|
|
if (this.uploadQueue <= 0) {
|
|||
|
|
this.showUploadAnimation = false;
|
|||
|
|
this.uploadQueue = 0;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 加载模板详情（编辑模式）
|
|||
|
|
async loadTemplateData() {
|
|||
|
|
if (!this.templateId) return;
|
|||
|
|
try {
|
|||
|
|
const res = await getTemplateInfoDetail({ templateId: this.templateId });
|
|||
|
|
const detail = res.data || {};
|
|||
|
|
|
|||
|
|
console.log('111',detail)
|
|||
|
|
|
|||
|
|
// 向子组件传递数据
|
|||
|
|
this.$refs.basicInfoRef.setFormData(detail);
|
|||
|
|
this.$refs.projectFileRef.setFormData(detail.projectFiles || []);
|
|||
|
|
this.$refs.sectionFileRef.setFormData(detail.sectionFiles || []);
|
|||
|
|
this.$refs.analysisLabelRef.setFormData(detail);
|
|||
|
|
} catch (error) {
|
|||
|
|
this.$message.error('加载模板详情失败：' + error.message);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
// 监听上传动画事件
|
|||
|
|
this.$bus.$on('startUpload', this.handleStartUpload);
|
|||
|
|
this.$bus.$off('endUpload', this.handleEndUpload);
|
|||
|
|
this.$bus.$on('endUpload', this.handleEndUpload);
|
|||
|
|
|
|||
|
|
// 从路由参数中解析type和templateId（核心逻辑）
|
|||
|
|
const { type: encryptedType, templateId: encryptedTemplateId } = this.$route.query;
|
|||
|
|
|
|||
|
|
// 解析并验证type
|
|||
|
|
if (encryptedType) {
|
|||
|
|
try {
|
|||
|
|
const decryptedType = decryptWithSM4(encryptedType);
|
|||
|
|
// 确保type只能是add或edit，非法值默认add
|
|||
|
|
this.type = ['add', 'edit'].includes(decryptedType) ? decryptedType : 'add';
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('解析type失败：', e);
|
|||
|
|
this.type = 'add'; // 解析失败默认新增
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 解析templateId
|
|||
|
|
if (encryptedTemplateId) {
|
|||
|
|
try {
|
|||
|
|
this.templateId = decryptWithSM4(encryptedTemplateId);
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('解析templateId失败：', e);
|
|||
|
|
this.templateId = null; // 解析失败置空
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 编辑模式且有有效ID时，加载详情数据
|
|||
|
|
if (this.type === 'edit' && this.templateId) {
|
|||
|
|
this.loadTemplateData();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
beforeDestroy() {
|
|||
|
|
// 移除事件监听，避免内存泄漏
|
|||
|
|
this.$bus.$off('startUpload', this.handleStartUpload);
|
|||
|
|
this.$bus.$off('endUpload', this.handleEndUpload);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.app-container {
|
|||
|
|
padding: 24px;
|
|||
|
|
background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
|
|||
|
|
min-height: 100vh;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
&.no-pointer-events {
|
|||
|
|
pointer-events: none;
|
|||
|
|
* { pointer-events: none; }
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.global-upload-animation {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
z-index: 9999;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
pointer-events: auto;
|
|||
|
|
|
|||
|
|
.animation-mask {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background: rgba(255, 255, 255, 0.6);
|
|||
|
|
backdrop-filter: blur(4px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.animation-content {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 10000;
|
|||
|
|
text-align: center;
|
|||
|
|
background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
|
|||
|
|
padding: 40px 50px;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
box-shadow: 0 10px 40px rgba(31, 114, 234, 0.15), 0 0 0 1px rgba(31, 114, 234, 0.1);
|
|||
|
|
min-width: 280px;
|
|||
|
|
|
|||
|
|
.spinner {
|
|||
|
|
width: 60px;
|
|||
|
|
height: 60px;
|
|||
|
|
border: 4px solid #f3f7ff;
|
|||
|
|
border-top: 4px solid #409EFF;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
animation: spin 1.2s linear infinite;
|
|||
|
|
margin: 0 auto 20px;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
&::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
top: -4px;
|
|||
|
|
left: -4px;
|
|||
|
|
right: -4px;
|
|||
|
|
bottom: -4px;
|
|||
|
|
border: 4px solid transparent;
|
|||
|
|
border-top: 4px solid #66b1ff;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
animation: spin 0.8s linear infinite reverse;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.animation-text {
|
|||
|
|
font-size: 20px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #409EFF;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
|
|||
|
|
-webkit-background-clip: text;
|
|||
|
|
-webkit-text-fill-color: transparent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.animation-subtext {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #666;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.breadcrumb {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #606266;
|
|||
|
|
|
|||
|
|
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner {
|
|||
|
|
color: #303133;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-actions {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-body {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-row {
|
|||
|
|
margin: 0;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-pane {
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
box-shadow: 0px 4px 20px 0px rgba(31, 35, 55, 0.1);
|
|||
|
|
padding: 20px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 300px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-btn {
|
|||
|
|
background: #409EFF;
|
|||
|
|
border-color: #409EFF;
|
|||
|
|
color: #fff;
|
|||
|
|
padding: 12px 24px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
box-shadow: 0px 4px 12px 0px rgba(64, 158, 255, 0.4);
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
background: #66b1ff;
|
|||
|
|
box-shadow: 0px 6px 16px 0px rgba(64, 158, 255, 0.5);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.reset-btn {
|
|||
|
|
background: #fff;
|
|||
|
|
border: 1px solid #dcdfe6;
|
|||
|
|
color: #606266;
|
|||
|
|
padding: 12px 24px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
background: #f5f7fa;
|
|||
|
|
color: #409EFF;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes spin {
|
|||
|
|
0% { transform: rotate(0deg); }
|
|||
|
|
100% { transform: rotate(360deg); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 992px) {
|
|||
|
|
.content-row {
|
|||
|
|
gap: 16px;
|
|||
|
|
}
|
|||
|
|
.form-pane {
|
|||
|
|
flex: 0 0 100%;
|
|||
|
|
max-width: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|