lis8.0-vue3/src/views/liswork/xtwh/comopt/index.vue

<template>
  <div class="app-container">
    <el-row :gutter="20" class="main-row">
      <!-- 左侧树区域 -->
      <el-col :span="4" :xs="24" class="tree-col">
        <el-input v-model="deptName" placeholder="请输入仪器名称" clearable prefix-icon="Search" class="tree-search-input" />
        <el-radio-group v-model="radiotype" @change="radioChange">
          <el-radio value="1" size="large">仪器组</el-radio>
          <el-radio value="2" size="large">所有仪器</el-radio>
        </el-radio-group>
        <div class="tree-container">
          <el-tree :data="deptOptions" :props="treeProps" expand-on-click-node :filter-node-method="filterNode"
            ref="deptTreeRef" node-key="id" highlight-current :expanded-keys="expandedKeys"
            @node-click="handleNodeClick">
            <!-- 自定义树节点模板：新增newflag徽章 -->
            <template #default="{ node, data }">
              <span class="tree-node-content">
                {{ node.label }}
                <!-- 新节点徽章：newflag=1时显示黄色"新"标 -->
                <el-badge v-if="data.newflag === '1'" value="new" class="new-node-badge" />
              </span>
            </template>
          </el-tree>
        </div>
      </el-col>

      <!-- 右侧列表区域  -->
      <el-col :span="20" :xs="24" class="table-col">
        <el-row :gutter="10" class="yq-title-row">
          <h1 class="yq-title">仪器:{{ yqmc }}</h1>
        </el-row>
        <el-tabs v-model="activeName" type="card" class="tabs_box">
          <el-tab-pane v-for="tab in tabList" :key="tab.key" :label="tab.label" :name="tab.key" />
        </el-tabs>
        <!-- 动态组件渲染 -->
        <component :is="currentComponent" :key="activeName" v-model="queryParams.yq" @updateTree="getDeptTree" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="ComOpt" lang="ts">
import { ref, watch, nextTick, computed } from 'vue'
import { ElMessage, ElTree, TreeNode, ElMessageBox, ElBadge } from 'element-plus'
import { paramList, paramTree, getdef, updateParam } from '@/api/liswork/xtwh/ComOpt'
// @ts-ignore
import { getFirstLetter } from '@/utils/pinyin.js'

import SysGlobal from './components/sysGlobal.vue'
import SysReport from './components/sysReport.vue'

// ========== TypeScript 类型定义 ==========
interface InstrTreeNode {
  id: string
  label: string
  lx: string
  newflag: string  // 新增newflag字段
  children?: InstrTreeNode[]
}

interface ParamTreeResponse {
  code: string
  msg: string
  data: InstrTreeNode[]
  url: null | string
  method: null | string
  params: null | any
  problemId: null | string
}

interface QueryParams {
  yq?: string | undefined
  xxdh?: string | undefined
  xxqz?: string | undefined
  groupId?: string | undefined
}


const radiotype = ref<string>("1")
// ========== 响应式变量 ==========
// 树相关
const deptTreeRef = ref<InstanceType<typeof ElTree>>()
const deptOptions = ref<InstrTreeNode[]>([])
const deptName = ref<string>("")
const yqmc = ref<string>("")
const expandedKeys = ref<string[]>([])
const isFiltering = ref<boolean>(false)
const treeProps = ref({
  label: 'label',
  children: 'children',
  isLeaf: (data: Record<string, any>) => !data.children || data.children.length === 0
})

// 查询参数
const queryParams = ref<QueryParams>({
  yq: undefined,
  xxdh: undefined,
  xxqz: undefined,
  groupId: undefined
})



const tabList = [
  { key: 'SysGlobal', label: '系统全局参数', component: SysGlobal },
  { key: 'SysReport', label: '报告界面', component: SysReport },
]
const activeName = ref('SysGlobal')

// 计算当前要渲染的组件
const currentComponent = computed(() => {
  return tabList.find(tab => tab.key === activeName.value)?.component || 'SysGlobal'
})


const treeData = ref<InstrTreeNode[]>([])
const radioChange = (val: string) => {
  if (val == "1") {
    deptOptions.value = treeData.value
  } else {
    const result = [];
    // 遍历外层数组的每个分组
    for (let i = 0; i < treeData.value.length; i++) {
      const group = treeData.value[i];
      if (group.children && Array.isArray(group.children)) {
        for (let j = 0; j < group.children.length; j++) {
          result.push(group.children[j]);
        }
      }
    }
    deptOptions.value = result
  }


  // 默认展开第一个一级节点的子级
  nextTick(() => {
    if (deptOptions.value.length > 0) {
      const firstLevelNode = deptOptions.value[0]
      if (firstLevelNode && firstLevelNode.children && firstLevelNode.children.length > 0) {
        expandedKeys.value = [firstLevelNode.id]
        const firstChildNode = firstLevelNode.children[0]
        queryParams.value.yq = firstChildNode.id
        yqmc.value = firstChildNode.label

        deptTreeRef.value?.setCurrentKey(firstChildNode.id)
      }
    }
  })
}

// ========== 树操作核心方法 ==========
const forceExpandSingleNode = (nodeId: string): void => {
  expandedKeys.value = []
  nextTick(() => {
    expandedKeys.value = [nodeId]
    // deptTreeRef.value?.expand(nodeId, false)
  })
}

const handleNodeClick = (data: InstrTreeNode): void => {
  if (isFiltering.value) {
    queryParams.value.groupId = data.id === "-1" ? undefined : data.id
    return
  }

  if (data.children && data.children.length > 0) {
    const isExpanded = expandedKeys.value.includes(data.id)
    expandedKeys.value = isExpanded ? [] : [data.id]
    !isExpanded && forceExpandSingleNode(data.id)
  } else {
    queryParams.value.yq = data.id
    yqmc.value = data.label
  }
}
// ========== 检索过滤逻辑 ==========
const filterNode = (value: string, data: any, _node: TreeNode): boolean => {
  if (!value) return true

  const keyword = value.trim().toUpperCase()
  const nodeLabel = data.label?.toLowerCase() || ''
  const nodePinyinFirst = data.label ? getFirstLetter(data.label).toUpperCase() : ''

  const currentMatch = nodeLabel.includes(keyword.toLowerCase()) || nodePinyinFirst.includes(keyword)
  const childrenMatch = (data.children || []).some((child: any) => filterNode(value, child, _node))
  return currentMatch || childrenMatch
}

const debounceFilter = (() => {
  let timer: number | undefined
  return (val: string): void => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      isFiltering.value = true
      deptTreeRef.value?.filter(val)

      if (val) {
        expandedKeys.value = []
        const expandMatched = (nodes: InstrTreeNode[]) => {
          nodes.forEach(node => {
            if (filterNode(val, node, {} as TreeNode) && node.children?.length) {
              expandedKeys.value.push(node.id)
            }
            node.children && expandMatched(node.children)
          })
        }
        expandMatched(deptOptions.value)
      } else {
        expandedKeys.value = []
      }
      isFiltering.value = false
    }, 300)
  }
})()

watch(deptName, debounceFilter, { immediate: false })

// ========== 业务逻辑 ==========
const getDeptTree = async (): Promise<void> => {
  try {
    const response = await paramTree() as ParamTreeResponse
    if (response.code === "0" && response.data) {
      treeData.value = response.data

      radioChange('1')
    } else {
      ElMessage.warning(response.msg || "获取树数据失败")
    }
  } catch (error) {
    ElMessage.error(`获取树数据异常：${(error as Error).message}`)
  }
}





// ========== 初始化 ==========
getDeptTree()
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 8px;
  box-sizing: border-box;
}

.main-row {
  display: flex;
  flex: 1;
  height: 100%;
  overflow: hidden;
}

.tree-col {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;


  .tree-container {
    flex: 1;
    height: 100%;
    overflow: auto;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    padding: 8px;

    // 核心：树选中节点样式
    :deep(.el-tree) {
      --el-tree-node-transition-duration: 0.2s;

      .el-tree-node__children {
        transition: all var(--el-tree-node-transition-duration) ease-in-out;
      }

      .el-tree-node__expand-icon.is-leaf {
        display: none;
      }

      // 选中节点的背景色（蓝色）+ 文字白色
      .el-tree-node.is-current>.el-tree-node__content {
        background-color: #409eff !important;
        color: #ffffff !important;
      }

      // 选中节点hover样式（加深蓝色）
      .el-tree-node.is-current>.el-tree-node__content:hover {
        background-color: #1e88e5 !important;
      }

      // 树节点内容容器样式
      .tree-node-content {
        display: inline-flex;
        align-items: center;
        gap: 4px; // 徽章和文字间距
        height: 100%;
      }

      // 新节点徽章样式
      .new-node-badge {
        --el-badge-font-size: 10px !important;
        --el-badge-height: 16px !important;
        --el-badge-padding: 0 4px !important;
        --el-badge-warning-color: #FFEC24 !important; // 黄色徽章
        --el-badge-warning-bg-color: #fff7e6 !important; // 浅黄色背景
        --el-badge-border-radius: 2px !important; // 圆角优化

        // 徽章文字样式
        .el-badge__content {
          font-size: 10px !important;
          line-height: 16px !important;
          padding: 0 4px !important;
          height: 16px !important;
        }
      }
    }
  }
}

.table-col {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  // 仪器标题行样式
  .yq-title-row {
    margin-bottom: 8px;

    .yq-title {
      font-size: 16px; // 缩小h1字体（默认24px→16px）
      color: #409eff; // 蓝色（Element Plus主题色）
      font-weight: 600;
      margin: 0; // 清除默认margin
      line-height: 1.2;
    }
  }
}
</style>