bonus
/
smart-bid-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

技术方案库修改

This commit is contained in:
cwchen 2025-10-30 17:56:52 +08:00
parent 9de47f6e4f
commit 991428f85a
6 changed files with 55 additions and 443 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/router/index.js
View File

@ -325,8 +325,8 @@ export const dynamicRoutes = [
children: [
{
path: 'index',
component: () => import('@/views/enterpriseLibrary/technical/components/TechnicalForm'),
name: 'TechnicalAdd',
component: () => import('@/views/enterpriseLibrary/technical/components/TechnicalDetail'),
name: 'TechnicalDetail',
meta: { title: '方案详情', activeMenu: '/enterpriseLibrary/enterprise', noCache: true }
}
]

14
src/views/enterpriseLibrary/technical/components/RightTable.vue
View File

@ -15,7 +15,7 @@
</template>
<template slot="handle" slot-scope="{ data }">
<el-button type="text" v-hasPermi="['enterpriseLibrary:technical:detail']" class="action-btn"
@click="handleUpdate(data)">
@click="handleDetail(data)">
查看
</el-button>
<el-button type="text" v-hasPermi="['enterpriseLibrary:technical:edit']" class="action-btn"
@ -98,6 +98,18 @@ export default {
}
})
},
/** 查看操作 */
handleDetail(row) {
this.$router.push({
name: 'TechnicalDetail',
query: {
enterpriseId: encryptWithSM4(this.enterpriseId || '0'),
technicalSolutionTypeId: encryptWithSM4(this.technicalSolutionTypeId + '' || '0'),
type: encryptWithSM4('detail'),
technicalSolutionId: encryptWithSM4(row.technicalSolutionId + '' || '0'),
}
})
},
/* 搜索操作 */
handleQuery() {
this.$refs.technicalTableRef.getTableList()

230
src/views/enterpriseLibrary/technical/components/TechnicalDetail.vue
View File

@ -8,17 +8,16 @@
<div class="content-header">
<el-button class="reset-btn" @click="handleClose()">返回</el-button>
<el-button class="search-btn" :loading="isSaving" @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" :detailData="detailData" />
<BasicInfoDetail ref="basicInfo" :detailData="detailData" />
</el-col>
<!-- 文件上传 -->
<el-col :span="6" class="pane-center">
<FileInfo ref="fileInfo" :detailData="detailData" />
<FileInfoDetail ref="fileInfo" :detailData="detailData" />
</el-col>
</el-row>
</div>
@ -27,17 +26,15 @@
<script>
import { encryptWithSM4,decryptWithSM4 } from '@/utils/sm'
import BasicInfo from './child/BasicInfo.vue'
import FileInfo from './child/FileInfo.vue'
import GlobalUploadAnimation from '@/views/common/GlobalUploadAnimation.vue'
import { addDataAPI, editDataAPI, getDetailDataAPI } from '@/api/enterpriseLibrary/technical/technical'
import BasicInfoDetail from './child/BasicInfoDetail.vue'
import FileInfoDetail from './child/FileInfoDetail.vue'
import { getDetailDataAPI } from '@/api/enterpriseLibrary/technical/technical'
export default {
name: 'TechnicalForm',
name: 'TechnicalDetail',
components: {
BasicInfo,
FileInfo,
GlobalUploadAnimation
BasicInfoDetail,
FileInfoDetail,
},
data() {
return {
@ -46,10 +43,6 @@ export default {
technicalSolutionId: decryptWithSM4(this.$route.query.technicalSolutionId),
type: decryptWithSM4(this.$route.query.type),
showUploadAnimation: false,
showSaveAnimation: false, // 新增：保存动画状态
uploadQueue: 0, // 上传队列计数器
animationText: '识别中',
isSaving: false, // 新增：保存按钮loading状态
detailData: {} // 详情数据
}
},
@ -70,130 +63,14 @@ export default {
},
// 获取详情
async getDetail() {
if (this.type === 'edit') {
if (this.type === 'detail') {
const res = await getDetailDataAPI({ technicalSolutionTypeId: this.technicalSolutionTypeId,
technicalSolutionId: this.technicalSolutionId })
technicalSolutionId: this.technicalSolutionId ,type:'detail'})
console.log('res:', res);
this.detailData = res.data;
}
},
// 保存
async handleSave() {
// 如果正在保存中，直接返回
if (this.isSaving) {
return
}
this.isSaving = true
this.showSaveAnimation = true
try {
// 并行校验所有表单
const [basicInfoData, fileInfoData] = await Promise.all([
this.$refs.basicInfo.validate(),
this.$refs.fileInfo.validate()
])
// 所有校验通过，组装完整数据
let formData = {
...basicInfoData,
...fileInfoData,
allFiles: [
...fileInfoData.fileList.map(file => JSON.parse(JSON.stringify(file))),
],
delFiles: [
...fileInfoData.delFileList
]
}
let allFiles = formData.allFiles.map(file => {
return file?.response?.fileRes ? {
...file.response.fileRes,
} : null;
}).filter(item => item !== null);
formData.files = allFiles;
formData.natureConstruction = formData.natureConstruction.join(',');
formData.enterpriseId = this.enterpriseId;
formData.technicalSolutionTypeId = this.technicalSolutionTypeId;
// 删除不必要的属性
delete formData.fileList;
delete formData.delFileList;
delete formData.allFiles;
console.log('所有表单校验通过，完整数据:', formData)
// 保存请求
const res = await this.saveData(formData)
console.log('res:', res);
if (res.code === 200) {
this.$message.success('保存成功')
this.handleClose()
}
} catch (error) {
if (error instanceof Error && error.message.includes('未填写完整')) {
this.$message.error(error.message)
}
} finally {
// 无论成功失败，都关闭动画
this.isSaving = false
this.showSaveAnimation = false
}
},
// 保存接口
async saveData(formData) {
return new Promise((resolve, reject) => {
if (this.type === 'add') { // 新增
addDataAPI(formData).then(res => {
resolve(res)
}).catch(error => {
reject(error)
})
} else { // 修改
formData.technicalSolutionId = this.technicalSolutionId;
editDataAPI(formData).then(res => {
resolve(res)
}).catch(error => {
reject(error)
})
}
})
},
// 开始上传
handleStartUpload(data) {
this.animationText = data
this.uploadQueue++
this.showUploadAnimation = true
},
// 结束上传
handleEndUpload(data) {
if (this.uploadQueue > 0) {
this.uploadQueue--
}
// 如果队列为空，隐藏动画
if (this.uploadQueue === 0) {
this.showUploadAnimation = false
}
}
},
mounted() {
// 监听上传开始事件
this.$bus.$on('startUpload', this.handleStartUpload)
// 监听上传结束事件
this.$bus.$on('endUpload', this.handleEndUpload)
},
beforeDestroy() {
// 移除所有事件监听
this.$bus.$off('startUpload', this.handleStartUpload)
this.$bus.$off('endUpload', this.handleEndUpload)
// 重置状态
this.showUploadAnimation = false
this.showSaveAnimation = false
this.uploadQueue = 0
this.animationText = '识别中'
this.isSaving = false
}
}
</script>
@ -216,93 +93,6 @@ export default {
}
}
// 全局上传动画样式
.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);
// 遮罩层阻止点击
pointer-events: auto;
}
.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;
animation: slideInUp 0.3s ease-out;
// 动画内容可以有点击事件
pointer-events: auto;
.spinner {
width: 60px;
height: 60px;
border: 4px solid #f3f7ff;
border-top: 4px solid #1F72EA;
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 #4A8BFF;
border-radius: 50%;
animation: spin 0.8s linear infinite reverse;
}
}
.animation-text {
font-size: 20px;
font-weight: 600;
color: #1F72EA;
margin-bottom: 8px;
background: linear-gradient(135deg, #1F72EA 0%, #4A8BFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.animation-subtext {
font-size: 14px;
color: #666;
opacity: 0.8;
}
}
}
.content-body {
margin-top: 20px;
}

87
src/views/enterpriseLibrary/technical/components/TechnicalForm.vue
View File

@ -216,93 +216,6 @@ export default {
}
}
// 全局上传动画样式
.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);
// 遮罩层阻止点击
pointer-events: auto;
}
.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;
animation: slideInUp 0.3s ease-out;
// 动画内容可以有点击事件
pointer-events: auto;
.spinner {
width: 60px;
height: 60px;
border: 4px solid #f3f7ff;
border-top: 4px solid #1F72EA;
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 #4A8BFF;
border-radius: 50%;
animation: spin 0.8s linear infinite reverse;
}
}
.animation-text {
font-size: 20px;
font-weight: 600;
color: #1F72EA;
margin-bottom: 8px;
background: linear-gradient(135deg, #1F72EA 0%, #4A8BFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.animation-subtext {
font-size: 14px;
color: #666;
opacity: 0.8;
}
}
}
.content-body {
margin-top: 20px;
}

76
src/views/enterpriseLibrary/technical/components/child/BasicInfoDetail.vue
View File

@ -4,74 +4,43 @@
<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="voltageLevel">
<el-select v-model="form.voltageLevel" placeholder="请选择电压等级" class="form-item">
<el-option v-for="item in dict.type.voltage_level" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="建设性质" prop="natureConstruction">
<el-select v-model="form.natureConstruction" placeholder="请选择工程性质" class="form-item" multiple>
<el-option v-for="item in dict.type.construction_nature" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="结构形式" prop="structuralForm">
<el-select v-model="form.structuralForm" placeholder="请选择结构形式" class="form-item">
<el-option v-for="item in dict.type.structural_form" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="基础形式" prop="basicForm">
<el-select v-model="form.basicForm" placeholder="请选择基础形式" class="form-item">
<el-option v-for="item in dict.type.basic_form" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-form>
<div class="detail-content">
<DetailItem label="电压等级" :value="form.voltageLevel" />
<DetailItem label="建设性质" :value="form.natureConstruction" />
<DetailItem label="结构形式" :value="form.structuralForm" />
<DetailItem label="基础形式" :value="form.basicForm" />
</div>
</div>
</template>
<script>
import DetailItem from '@/views/common/DetailItem.vue';
export default {
name: 'BasicInfoTechnical',
name: 'BasicInfoDetailTechnical',
components: {
DetailItem
},
props: {
detailData: {
type: Object,
default: () => { }
}
},
dicts: ['voltage_level', 'construction_nature', 'structural_form', 'basic_form'],
data() {
return {
form: {
voltageLevel: undefined,
natureConstruction: [],
natureConstruction: undefined,
structuralForm: undefined,
basicForm: undefined,
},
rules: {
voltageLevel: [
{ required: true, message: '请选择电压等级', trigger: 'change' }
],
natureConstruction: [
{ required: true, message: '请选择建设性质', trigger: 'change' }
],
structuralForm: [
{ required: true, message: '请选择结构形式', trigger: 'change' }
],
basicForm: [
{ required: true, message: '请选择基础形式', trigger: 'change' }
],
}
}
},
watch: {
detailData:{
handler(newVal) {
if(Object.keys(newVal).length > 0){
this.setFormData(newVal)
this.setDetailData(newVal)
}
},
immediate: true
@ -80,31 +49,16 @@ export default {
created() {
},
methods: {
// 校验规则
validate() {
return new Promise((resolve, reject) => {
this.$refs.basicInfoForm.validate((valid) => {
if (valid) {
resolve(this.form) // 校验成功返回表单数据
} else {
reject(new Error('基础信息未填写完整'))
}
})
})
},
setFormData() {
setDetailData() {
this.form = {
voltageLevel: this.detailData.voltageLevel || '',
natureConstruction: this.detailData.natureConstruction.split(',') || [],
natureConstruction: this.detailData.natureConstruction || '',
structuralForm: this.detailData.structuralForm || '',
basicForm: this.detailData.basicForm || '',
}
},
},
}
</script>

77
src/views/enterpriseLibrary/technical/components/child/FileInfoDetail.vue
View File

@ -4,36 +4,19 @@
<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">
<UploadMoreFile :fileList="form.fileList" @file-change="handleFileChange" @del-file="handleDelFile"
type="business_license" :uploadType="uploadType" :maxFileTips="maxFileTips"
:fileUploadRule="fileUploadRule" :limitUploadNum="limitUploadNum" :disabled="disabled" />
</el-form-item>
</el-form>
<div class="detail-content">
<FileOrImageDisplay label="文件上传" :file="form.fileList[0]" :image-url="form.url" />
</div>
</div>
</template>
<script>
// 默认参数
const defaultParams = {
fileType: 'technical_solution',
uploadType: 'pdf、doc、docx',
maxFileTips: '500MB',
fileUploadRule: {
fileUploadType: 'technical_solution',
fields_json: '',
suffix: 'technical_solution_database'
},
limitUploadNum: 5,
disabled: false
};
import UploadMoreFile from '@/views/common/UploadMoreFile.vue'
import FileOrImageDisplay from '@/views/common/FileOrImageDisplay.vue';
export default {
name: 'FileInfoTechnical',
components: {
UploadMoreFile
FileOrImageDisplay
},
props: {
detailData: {
@ -43,30 +26,17 @@ export default {
},
data() {
return {
fileType: defaultParams.fileType,
uploadType: defaultParams.uploadType,
maxFileTips: defaultParams.maxFileTips,
fileUploadRule: defaultParams.fileUploadRule,
limitUploadNum: defaultParams.limitUploadNum,
disabled: defaultParams.disabled,
form: {
fileList: [],
delFileList: []
url: ''
},
rules: {
fileList: [
{ required: true, message: '请上传文件', trigger: 'change' }
],
}
}
},
watch: {
detailData: {
handler(newVal) {
if (Object.keys(newVal).length > 0) {
this.limitUploadNum = 1;
this.disabled = true;
this.setFormData(newVal)
this.setDetailData(newVal)
}
},
immediate: true
@ -75,38 +45,11 @@ export default {
created() {
},
methods: {
// 校验规则
validate() {
return new Promise((resolve, reject) => {
this.$refs.basicInfoForm.validate((valid) => {
if (valid) {
resolve(this.form) // 校验成功返回表单数据
} else {
reject(new Error('文件上传未完成'))
}
})
})
},
// 文件变化
handleFileChange(file) {
console.log(file);
this.form.fileList = file;
},
// 文件删除时触发
handleDelFile(file) {
const delPath = file?.response?.fileRes?.filePath || file?.filePath || null;
if(delPath){
this.form.delFileList.push(delPath);
}
},
setFormData() {
setDetailData() {
const fileList = this.getFileList();
this.form = {
fileList: fileList,
delFileList: []
url: fileList[0].filePath
}
},
getFileList() {