技术方案库修改

src/router/index.js

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

src/views/enterpriseLibrary/technical/components/RightTable.vue

@@ -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()

src/views/enterpriseLibrary/technical/components/TechnicalDetail.vue

@@ -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 BasicInfoDetail from './child/BasicInfoDetail.vue'
-import FileInfo from './child/FileInfo.vue'
+import FileInfoDetail from './child/FileInfoDetail.vue'
-import GlobalUploadAnimation from '@/views/common/GlobalUploadAnimation.vue'
+import { getDetailDataAPI } from '@/api/enterpriseLibrary/technical/technical'
-import { addDataAPI, editDataAPI, getDetailDataAPI } from '@/api/enterpriseLibrary/technical/technical'
 
 export default {
-    name: 'TechnicalForm',
+    name: 'TechnicalDetail',
     components: {
-        BasicInfo,
+        BasicInfoDetail,
-        FileInfo,
+        FileInfoDetail,
-        GlobalUploadAnimation
     },
     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;
 }

src/views/enterpriseLibrary/technical/components/TechnicalForm.vue

@@ -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;
 }

src/views/enterpriseLibrary/technical/components/child/BasicInfoDetail.vue

@@ -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">
+        <div class="detail-content">
-            <el-form-item label="电压等级" prop="voltageLevel">
+            <DetailItem label="电压等级" :value="form.voltageLevel" />
-                <el-select v-model="form.voltageLevel" placeholder="请选择电压等级" class="form-item">
+            <DetailItem label="建设性质" :value="form.natureConstruction" />
-                    <el-option v-for="item in dict.type.voltage_level" :key="item.value" :label="item.label"
+            <DetailItem label="结构形式" :value="form.structuralForm" />
-                        :value="item.value"></el-option>
+            <DetailItem label="基础形式" :value="form.basicForm" />
-                </el-select>
+        </div>
-            </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>
 </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: {
-        // 校验规则
+        setDetailData() {
-        validate() {
-            return new Promise((resolve, reject) => {
-                this.$refs.basicInfoForm.validate((valid) => {
-                    if (valid) {
-                        resolve(this.form) // 校验成功返回表单数据
-                    } else {
-                        reject(new Error('基础信息未填写完整'))
-                    }
-                })
-            })
-        },
-
-        setFormData() {
             this.form = {
                 voltageLevel: this.detailData.voltageLevel || '',
-                natureConstruction: this.detailData.natureConstruction.split(',') || [],
+                natureConstruction: this.detailData.natureConstruction || '',
                 structuralForm: this.detailData.structuralForm || '',
                 basicForm: this.detailData.basicForm || '',
             }
         },
-
     },
 
-
 }
 </script>
 

src/views/enterpriseLibrary/technical/components/child/FileInfoDetail.vue

@@ -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">
+        <div class="detail-content">
-            <!-- 文件上传 -->
+            <FileOrImageDisplay label="文件上传" :file="form.fileList[0]" :image-url="form.url" />
-            <el-form-item label="文件上传" prop="fileList">
+        </div>
-                <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>
 </template>
 
 <script>
-// 默认参数
+
-const defaultParams = {
+import FileOrImageDisplay from '@/views/common/FileOrImageDisplay.vue';
-    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'
 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:{
+        detailData: {
             handler(newVal) {
-                if(Object.keys(newVal).length > 0){
+                if (Object.keys(newVal).length > 0) {
-                    this.limitUploadNum = 1;
+                    this.setDetailData(newVal)
-                    this.disabled = true;
-                    this.setFormData(newVal)
                 }
             },
             immediate: true
@@ -75,47 +45,20 @@ export default {
     created() {
     },
     methods: {
-        // 校验规则
+        setDetailData() {
-        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() {
             const fileList = this.getFileList();
             this.form = {
                 fileList: fileList,
-                delFileList: []
+                url: fileList[0].filePath
             }
         },
-        getFileList(){
+        getFileList() {
             return this.detailData.resourceFileVoList.map(item => {
                 return {
                     name: item.fileName,
                     filePath: item.filePath,
-                    lsFilePath:item.lsFilePath,
+                    lsFilePath: item.lsFilePath,
-                    fileType:item.fileType
+                    fileType: item.fileType
                 };
             });
         }