admin-sjzx/src/views/pqs/runManage/assessment/components/assess/index.vue

<template>
    <div :style="height">
        <splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
            <pane :size="size">
                <AssessTree
                    :default-expand-all="false"
                    @node-click="handleNodeClick"
                    @init="handleNodeClick"
                    ref="assessTreeRef"
                    :current-node-key="currentTreeKey"
                ></AssessTree>
            </pane>
            <pane style="background: #fff">
                <div class="actionButtons mb10">
                  <el-button type="primary" icon="el-icon-Upload" @click="handleImportClick">导入数据背景</el-button>
                    <el-upload
                      ref="uploadRef"
                      class="import-data-upload"
                      action="#"
                      :auto-upload="false"
                      :show-file-list="false"
                      :on-change="handleFileChange"
                      :accept="'.xlsx,.xls,.csv'"
                      style="display: none"
                    >
                    </el-upload>
                    <el-button type="primary" icon="el-icon-Memo" class="ml10" @click="assess">评估</el-button>
                    <el-button type="primary" icon="el-icon-Download" @click="exportReport">导出报告</el-button>
                </div>
                <div :style="collapseHeight" style="overflow-y: auto">
                    <el-collapse v-model="collapseName" class="pl10 pr10">
                        <el-collapse-item title="基本信息" :name="1">
                          <div class="loading-container">
                            <div v-if="infoLoading" class="loading-wrapper">
                              <el-icon class="is-loading"><Loading /></el-icon>
                              <span class="loading-text">加载中...</span>
                            </div>
                            <information v-show="!infoLoading" :node-id="currentNodeId" @data-loaded="() => infoLoading = false" />
                          </div>
                        </el-collapse-item>
                        <el-collapse-item title="评估结果信息" :name="2">
                          <div class="loading-container">
                            <div v-if="outcomeLoading" class="loading-wrapper">
                            <el-icon class="is-loading"><Loading /></el-icon>
                            <span class="loading-text">加载中...</span>
                          </div>
                            <Outcome v-show="!outcomeLoading" :node-id="currentNodeId" @data-status="handleDataStatus" @data-loaded="() => outcomeLoading = false" />
                          </div>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </pane>
        </splitpanes>
    </div>
</template>

<script setup lang="ts">
import { ElMessage, ElLoading } from 'element-plus'
import { onMounted, ref, provide ,nextTick } from 'vue'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
import TableStore from '@/utils/tableStore'
import AssessTree from '@/components/tree/pqs/assessTree.vue'
import TableHeader from '@/components/table/header/index.vue'
import { mainHeight } from '@/utils/layout'
import information from './information.vue'
import Outcome from './outcome.vue'
import {exportResult,evaluation} from '@/api/advance-boot/assess'
import { Loading } from '@element-plus/icons-vue'

defineOptions({
    // name: 'harmonic-boot/report/word'
})
const collapseName = ref([1, 2])
const height = mainHeight(80)
const collapseHeight = mainHeight(125)
const size = ref(0)
const dotList: any = ref({})
const infoLoading = ref(false)
const outcomeLoading = ref(false)
// 添加当前节点 ID 的响应式变量
const currentNodeId = ref<string | number | null>(null)

const tableStore = new TableStore({
    url: '',
    method: 'POST',
    column: [],
    beforeSearchFun: () => {},
    loadCallback: () => {}
})
provide('tableStore', tableStore)

//有无评估结果
const result = ref(true)
const handleDataStatus = (hasData: boolean) => {
  if (!hasData) {
    result.value = false
  } else {
    result.value = true
  }
}


const exportReport = () => { 
    if (!result.value){
        ElMessage.warning('请先评估！')
        return
    } 
    
    // 显示导出中提示
    const loading = ElLoading.service({
        lock: true,
        text: '导出中...',
        background: 'rgba(0, 0, 0, 0.7)'
    })
    
    exportResult({}, currentNodeId.value).then((res: any) => {
        let blob = new Blob([res], {  // 注意使用 res.data 而不是 res
           type: 'application/vnd.ms-excel'
        })
        const url = window.URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = url
        link.download = '评估结果.xls'  // 建议添加文件扩展名
        document.body.appendChild(link)
        link.click()
        link.remove()
        window.URL.revokeObjectURL(url)
        
        // 关闭加载提示并显示成功消息
        loading.close()
        ElMessage.success('导出成功！')
    }).catch(error => {
        // 处理导出失败情况
        loading.close()
        ElMessage.error('导出失败，请重试！')
    })
}

// 添加文件上传相关引用
const uploadRef = ref()
const selectedFile = ref<File | null>(null)

const handleImportClick = () => {
  // 手动触发文件选择
  const inputElement = uploadRef.value.$el.querySelector('input[type="file"]')
  if (inputElement) {
    inputElement.click()
  }
}

const handleFileChange = (file: any) => {
  const selectedFileObj = file.raw
  if (selectedFileObj) {
    selectedFile.value = selectedFileObj
    ElMessage.success(`已选择文件: ${selectedFileObj.name}`)
  }
}

// 评估功能
const assess = async () => {
  // 检查是否已选择文件
  if (!selectedFile.value) {
    ElMessage.warning('请先导入数据背景文件！')
    return
  }
  
  // 检查是否已选择节点
  if (!currentNodeId.value) {
    ElMessage.warning('请选择评估节点！')
    return
  }
  
  try {
    ElMessage.info('评估中...')
    
    // 调用后端评估接口
    const formData = new FormData()
    formData.append('assessId', currentNodeId.value.toString())
    formData.append('file', selectedFile.value)
    
    // 假设你有一个调用评估接口的方法，如 evaluation
    // 你需要在 API 文件中实现这个方法
    const response = await evaluation(currentNodeId.value.toString(), selectedFile.value)
    
    //loading.close()
    selectedFile.value = null
    if (response.data) {
      ElMessage.success('评估成功！')
      // 展开评估结果
      collapseName.value = [2]
      // 更新评估状态
      result.value = true


      // ✅ 强制更新 nodeId，触发子组件的 watch
      // 可以通过修改 currentNodeId 的值，或者重新赋值来触发 watch
      const tempId = currentNodeId.value
      currentNodeId.value = null // 先置空
      setTimeout(() => {
        currentNodeId.value = tempId // 再恢复，触发 watch
      }, 0)

    } else {
      ElMessage.error('评估失败！')
      result.value = false
    }
  } catch (error) {
    ElMessage.error('评估失败，请重试！')
    result.value = false
  }
}


onMounted(() => {
    const dom = document.getElementById('navigation-splitpanes')
    setTimeout(() => {
        if (dom) {
            size.value = Math.round((180 / dom.offsetHeight) * 100)
        }
    }, 100)
})

// 添加树组件的引用
const assessTreeRef = ref<any>(null)
// 控制树组件当前高亮的节点key
const currentTreeKey = ref<string | number | null>(null)
// 保存上一次真正有效的节点key（子节点）
const lastValidNodeKey = ref<string | number | null>(null)

const handleNodeClick = (data: any, node: any) => {
  // 阻止点击父节点的逻辑处理
  if (!data || 
      (node && !node.isLeaf) || 
      (data.children && data.children.length > 0) ||
      (node && node.childNodes && node.childNodes.length > 0)) {
    
    // 点击父节点时，保持树的高亮状态为上一次有效的子节点
    currentTreeKey.value = lastValidNodeKey.value
    return
  }
  
  // 点击的是子节点，更新高亮状态
  lastValidNodeKey.value = data?.id || null
  currentTreeKey.value = lastValidNodeKey.value
  dotList.value = data
  currentNodeId.value = data?.id || null


  // ✅ 开启两个 loading
  infoLoading.value = true
  outcomeLoading.value = true
}
</script>
<style lang="scss" scoped>
.splitpanes.default-theme .splitpanes__pane {
    background: #eaeef1;
}

:deep(.el-collapse-item__header) {
    // font-family: AlimamaDongFangDaKai;
    font-size: 20px;
    &::before {
        content: '▍'; /* 添加星号 */
        font-size: 16px;
        color: var(--el-color-primary);
  
    }
}

.actionButtons {
    display: flex;
    justify-content: end;
}

.loading-container {
  position: relative;
  min-height: 100px; /* 防止空白时高度塌陷 */
}

.loading-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.loading-text {
  margin-left: 8px;
  color: #606266;
}


.is-loading {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.ml10 {
  margin-left: 10px;
}
</style>