yudao-admin-yiqun/yudao-ui-admin-vue3/src/views/pressure2/inspectionNature/index.vue

<template>
  <el-row :gutter="20" class="standard-class-list">
    <div class="left-tree">
      <el-tree
        :data="getPressureEquipmentCategory"
        node-key="value"
        default-expand-all
        :highlight-current="false"
        :expand-on-click-node="false"
        :icon="''"
        :draggable="true"
        @node-click="handleNodeClick"
      >
        <template #default="{ data }">
          <div class="class-content">
            <el-icon size="16" color="#015293">
              <Management/>
            </el-icon>
            <span class="custom-tree-node">
              {{ data.label }}
            </span>
          </div>
        </template>
      </el-tree>
    </div>
    <div class="right-table">
      <!-- 搜索表单 -->
      <!--      <el-form :inline="true" :model="searchForm" class="search-form">
              <el-form-item label="检验性质">
                <el-select v-model="searchForm.inspectionNature" placeholder="请选择" clearable
                           style="width: 180px">
                  <el-option
                    v-for="item in pressureInspectionNature"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="fetchInspectionNatureList">查询</el-button>
                <el-button @click="handleReset">重置</el-button>
              </el-form-item>
            </el-form>-->

      <!-- 操作按钮 -->
      <div class="table-buttons">
        <el-button type="primary" @click="handleCreateOrEditInspectionNature()">新增</el-button>
        <el-button type="danger" @click="handleDeleteInspectionNature">删除</el-button>
      </div>

      <!-- 数据表格 -->
      <el-table
        ref="tableRef"
        :data="inspectionNatureList"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50" align="center"/>
        <el-table-column label="检验性质" prop="inspectionNature" min-width="120">
          <template #default="{ row }">
            {{
              getPressureInspectionNatureType[row.equipmentCategory]?.find(x => x.value === row.inspectionNature)?.label || '-'
            }}
          </template>
        </el-table-column>
        <el-table-column label="所属设备" prop="equipmentCategory" min-width="100">
          <template #default="{ row }">
            {{
              getPressureEquipmentCategory[0].children.find(x => x.value === row.equipmentCategory)?.label || '-'
            }}
          </template>
        </el-table-column>
        <el-table-column label="设备类型" prop="equipmentType" min-width="120">
          <template #default="{ row }">
            {{
              getPressureEquipType[row.equipmentCategory]?.find(x => x.value === row.equipmentType)?.label || '-'
            }}
          </template>
        </el-table-column>
        <el-table-column label="默认报告模板数" prop="defaultTemplateCount" min-width="120"/>
        <el-table-column label="关联报告模板数" prop="templateCount" min-width="120"/>
        <el-table-column label="最近修改人" prop="updaterName" min-width="100"/>
        <el-table-column label="最近修改时间" prop="updateTime" min-width="160">
          <template #default="{ row }">
            {{ row.updateTime ? dayjs(row.updateTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleCreateOrEditInspectionNature(row)">编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="fetchInspectionNatureList"
        @size-change="fetchInspectionNatureList"
        class="pagination"
      />
    </div>
  </el-row>
  <CustomDialog
    v-model="inspectionNatureCreateOrEditDialog"
    :title="(editType === 'edit' ? '编辑' : '添加') + '检验性质'"
    width="1200px"
    style="padding-right: 40px;"
    :showFooter="false"
    @cancel="handleInspectionNatureDialogClose"
  >
    <el-form ref="inspectionNatureFormRef" :model="inspectionNatureForm"
             :rules="inspectionNatureFormRules"
             label-width="110px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="所属设备" prop="equipmentCategory">
            <el-select v-model="inspectionNatureForm.equipmentCategory" placeholder="请选择所属设备"
                       @change="handleEquipmentCategoryChange">
              <el-option
                v-for="item in getPressureEquipmentCategory[0].children"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="检验性质" prop="inspectionNature" >
            <el-select v-model="inspectionNatureForm.inspectionNature" placeholder="请选择检验性质">
              <el-option
                v-for="item in getPressureInspectionNature"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备类型" prop="equipmentType">
            <el-select v-model="inspectionNatureForm.equipmentType" placeholder="请选择设备类型">
              <el-option
                v-for="item in getPressureEquipContainerType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="检验项目" prop="templateSaveReqVOList">
        <!-- <el-select readonly placeholder="请选择关联报告模板" @click.stop.prevent="handleShowReportList"/> -->
        <el-select
          :model-value="getTemplateNames"
          clearable
          multiple
          @remove-tag="handleRemoveTag"
          @click.stop.prevent="() => handleShowReportList()"
          @clear="handleClearSelectedItem"
          placeholder="请选择检验项目"
        />
        <!-- <div class="custom-select" @click.stop.prevent="handleShowReportList">
          <el-input readonly placeholder="请选择关联报告模板"/>
          <el-icon size="14"><ArrowDown /></el-icon>
        </div> -->
      </el-form-item>
    </el-form>
    <el-table ref="sortTableRef" :data="inspectionNatureForm.templateSaveReqVOList" row-key="templateId">
      <el-table-column label="" width="40" align="center">
        <template #default>
          <div class="drag-handle">
            <el-icon style="cursor: move; color: #909399"><Menu /></el-icon>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="检验项目名称" prop="name">
        <template #default="{ row }">
          <div style="display: flex; align-items: center; gap: 4px;">
            <span v-if="row.projectType === 'MAIN'" style="display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background-color: #6cbcf5; color: #fff; font-size: 12px; border-radius: 2px; font-weight: bold;">主</span>
            <span>{{ row.name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="是否默认" prop="isDefault" width="200">
        <template #default="scope">
          <div style="display: flex; align-items: center; gap: 6px;">
            <el-switch v-model="scope.row.isDefault" active-value="1" inactive-value="0"
                       style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"/>
            <el-input-number
              v-if="scope.row.isDefault === '1' && scope.row.projectType !== 'MAIN'"
              v-model="scope.row.defaultCount"
              :min="1"
              :max="999"
              size="small"
              controls-position="right"
              style="width: 70px;"
            />
          </div>
        </template>
      </el-table-column>
      <!-- 电站锅炉内检时显示部件选择 -->
      <el-table-column label="部件" prop="part" v-if="isPowerStationBoiler">
        <template #default="scope">
          <el-select
            v-model="scope.row.part"
            multiple
            placeholder="请选择部件"
            style="width: 100%"
          >
            <el-option
              v-for="item in getPressureBoilerPartType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="() => handleDeleteReport(scope.row, scope.$index)">
            解除关联
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex; justify-content: center; padding-top: 24px;">
      <el-button type="default" @click="handleInspectionNatureDialogClose">取消</el-button>
      <el-button type="primary" @click="handleInspectionNatureSubmit">确定</el-button>
    </div>
  </CustomDialog>
  <CustomDialog
    v-model="reportTemplateDialog_Boiler"
    title="选择检验项目"
    width="1200px"
    append-to-body 
    @confirm="handleReportTemplateConfirm"
  >
    <!-- 搜索表单 -->
    <el-form :inline="true" :model="reportSearchForm" class="search-form" @submit.prevent>
      <el-form-item label="检验项目">
        <el-input v-model="reportSearchKeyword" placeholder="输入关键词高亮匹配项" clearable style="width: 240px"/>
      </el-form-item>
    </el-form>

    <!-- 检验项目列表 - 复选框网格布局 -->
    <div class="checkItemContentWrapper" v-loading="reportLoading">
      <div class="inspection-grid">
        <!-- 标题行 -->
        <template v-if="reportTemplateList.length > 0">
          <!-- Grid 容器 -->
          <div
            class="grid-container"
            :style="{
                'grid-template-columns':
                  reportTemplateList.length < 5
                    ? `repeat(${reportTemplateList.length}, 1fr)`
                    : `repeat(5, 1fr)`
              }"
          >
            <!-- 循环渲染子项 -->
            <div class="grid-item" v-for="item in reportTemplateList" :key="item.id">
              <el-checkbox
                :disabled="isReportSelected(item)"
                v-model="item.selected"
                @change="(val) => handleReportItemSelect(item, val)"
              />
              <div style="display: flex; align-items: center; gap: 4px;">
                <span v-if="item.projectType === 'MAIN'" style="display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background-color: #6cbcf5; color: #fff; font-size: 12px; border-radius: 2px; font-weight: bold;">主</span>
                <span v-html="highlightText(item.projectName)"></span>
              </div>
            </div>
          </div>
        </template>
        <el-empty v-else :description="`暂无【${groupName}】检验项目`"/>
      </div>
    </div>
  </CustomDialog>
</template>
<script lang="ts" setup>
defineOptions({ name: 'InspectionNatureBolierList' })
import {DynamicTbApi} from '@/api/pressure2/dynamictb'
import CustomDialog from '@/components/CustomDialog/index.vue'
import {Management, Menu} from '@element-plus/icons-vue'
import {useDictStore} from '@/store/modules/dict'
import dayjs from 'dayjs'
import {
  getPressure2InspectionNatureList,
  createPressure2InspectionNature,
  updatePressure2InspectionNature,
  deletePressure2InspectionNature,
  getPressure2InspectionNatureInfo
} from '@/api/pressure2/inspectionNature'
import {has} from 'lodash'
import {ElMessage, ElMessageBox} from 'element-plus'
import Sortable from 'sortablejs'

const dictStore = useDictStore()
// 检验性质字典
const getPressureInspectionNatureType = ref<Record<string, any[]>>({
  '300': computed(() => dictStore.getDictMap['pressure_inspection_nature_pipe']), //管道
  '200': computed(() => dictStore.getDictMap['pressure_inspection_nature_boiler']) //锅炉
})

let getPressureInspectionNature = ref([...getPressureInspectionNatureType.value['300'], ...getPressureInspectionNatureType.value['200']])
let pressureInspectionNature = ref([...getPressureInspectionNatureType.value['300'], ...getPressureInspectionNatureType.value['200']])
// 所属设备
const getPressureEquipmentCategory = computed(() => [{
  value: '-1', label: '全部设备', children: [
    {label: '锅炉', value: '200'},
    {label: '管道', value: '300'}
  ]
}])

// 设备类型字典
const getPressureEquipType = ref<Record<string, any[]>>({
  '300': computed(() => dictStore.getDictMap['system_equip_pipe_type']), //管道
  '200': computed(() => dictStore.getDictMap['system_equip_boiler_type']) //锅炉
})
let getPressureEquipContainerType = []

// 锅炉检验部件类型字典
const getPressureBoilerPartType = computed(() => dictStore.getDictMap['pressure2_boiler_part_type'])

// 主表格相关
const tableRef = ref()
const inspectionNatureList = ref([])
const pageNo = ref(1)
const pageSize = ref(10)
const total = ref(0)
const searchForm = ref<any>({})
const selectedRows = ref<any[]>([])
const currentEquipmentCategory = ref<string | null>(null)
const getTemplateNames = computed(() => inspectionNatureForm.value.templateSaveReqVOList.map(x => x.name))

// 获取检验性质列表
const fetchInspectionNatureList = async () => {
  const params: any = {
    pageNo: pageNo.value,
    pageSize: pageSize.value,
    equipmentCategory: currentEquipmentCategory.value,
    ...searchForm.value
  }
  const result = await getPressure2InspectionNatureList(params)
  if (result) {
    inspectionNatureList.value = result.list.filter(x => {
      return x.equipmentCategory !== '100';
    })
    total.value = result.total
  }
}
onMounted(() => {
  fetchInspectionNatureList()
})


// 表格选择变化
const handleSelectionChange = (rows: any[]) => {
  selectedRows.value = rows
}

// 设备类型查询
const handleNodeClick = (data) => {
  const equipmentCategory = data.value === '-1' ? null : data.value
  currentEquipmentCategory.value = equipmentCategory
  pageNo.value = 1
  fetchInspectionNatureList()
  // 更新检验性质字典
  if (data.value === '-1') {
    pressureInspectionNature.value = [...getPressureInspectionNatureType.value['200'], ...getPressureInspectionNatureType.value['300']]
  } else {
    pressureInspectionNature.value = getPressureInspectionNatureType.value[data.value] || []
  }
}

// 编辑 & 新增 检验性质按钮
const handleCreateOrEditInspectionNature = async (row?: any) => {
  if (row) {
    editInspectionNatureId.value = row.id
    editType.value = 'edit'
    // 判断是否为锅炉或管道（需要特殊处理）
    getPressureInspectionNature = getPressureInspectionNatureType.value[row.equipmentCategory]
    getPressureEquipContainerType = getPressureEquipType.value[row.equipmentCategory]
    inspectionNatureCreateOrEditDialog.value = true
    await loadDetailInfo(row.id)
    return
  } else {
    editType.value = 'create'
    // 重置为默认字典
    getPressureInspectionNature = getPressureInspectionNatureType.value['100']
    getPressureEquipContainerType = getPressureEquipType.value['100']
  }
  inspectionNatureCreateOrEditDialog.value = true
}

// 加载详情信息（锅炉/管道专用）
const loadDetailInfo = async (id: string) => {
  try {
    const detailInfo = await DynamicTbApi.getPressureInspectionNatureInfoBoiler({id})
    inspectionNatureForm.value = {
      ...detailInfo,
      templateSaveReqVOList: detailInfo.templateDetailRespVOList.map(item => ({
        ...item,
        name: item.templateName,
        // 将后端返回的 part 字符串转换为数组
        part: item.part ? (typeof item.part === 'string' ? item.part.split('/').filter(p => p) : (item.part || [])) : [],
        defaultCount: item.defaultCount || 1
      }))
    }
  } catch (error) {
    console.error('加载详情失败:', error)
    ElMessage.error('加载详情失败')
  }
}

const handleEquipmentCategoryChange = (value) => {
  getPressureInspectionNature = getPressureInspectionNatureType.value[value]
  getPressureEquipContainerType = getPressureEquipType.value[value]
  // 切换设备类别时清空设备类型
  inspectionNatureForm.value.equipmentType = ''
}

// 删除检验性质
const handleDeleteInspectionNature = () => {
  if (!selectedRows.value.length) return ElMessage.warning('请选择检验性质')
  if (selectedRows.value.length > 1) return ElMessage.warning('仅限选择一个检验性质')
  ElMessageBox.confirm('确定删除选中的检验性质吗？', '删除提示', {
    confirmButtonText: '确 认',
    cancelButtonText: '取 消'
  }).then(async () => {
    const res = await deletePressure2InspectionNature({id: selectedRows.value[0].id})
    if (res) {
      ElMessage.success('删除成功')
      fetchInspectionNatureList()
    }
  })
}

// 新增&编辑 检验性质
const inspectionNatureCreateOrEditDialog = ref(false)
const editType = ref('')
const editInspectionNatureId = ref('')
const inspectionNatureFormRef = ref()
const inspectionNatureForm = ref({
  inspectionNature: '',
  equipmentCategory: '',
  equipmentType: '',
  templateSaveReqVOList: [] as any[]
})
const inspectionNatureFormRules = ref({
  inspectionNature: [
    {required: true, message: '请选择检验性质', trigger: 'blur'}
  ],
  equipmentCategory: [
    {required: true, message: '请选择设备类别', trigger: 'blur'}
  ],
  equipmentType: [
    {required: true, message: '请选择设备类型', trigger: 'blur'}
  ],
  templateSaveReqVOList: [
    {required: true, message: '请选择关联报告模板', trigger: 'blur'}
  ]
})

const handleDeleteReport = (row, $index) => {
  inspectionNatureForm.value.templateSaveReqVOList.splice($index, 1)
}

const handleInspectionNatureDialogClose = () => {
  inspectionNatureCreateOrEditDialog.value = false
  editType.value = ''
  inspectionNatureFormRef.value.resetFields()
  inspectionNatureForm.value.templateSaveReqVOList = []
  reportTemplateList.value = []
  reportSearchKeyword.value = ''
}

// 提交检验性质
const handleInspectionNatureSubmit = async () => {
  try {
    await inspectionNatureFormRef.value.validate()

    // 判断是否为电站锅炉内检
    const isPowerStationBoiler = inspectionNatureForm.value.equipmentType == '1' &&
      inspectionNatureForm.value.equipmentCategory == '200' &&
      inspectionNatureForm.value.inspectionNature == '100'
    console.log(inspectionNatureForm.value.templateSaveReqVOList)
    const params = {
      ...inspectionNatureForm.value,
      templateSaveReqVOList: inspectionNatureForm.value.templateSaveReqVOList.map((item: any, index: number) => ({
        id: item.id,
        templateId: item.templateId,
        isDefault: item.isDefault,
        defaultCount: item.defaultCount,
        sort: index + 1,
        inspectionNatureId: has(item, 'inspectionNatureId') ? item.inspectionNatureId : (editType.value === 'edit' ? editInspectionNatureId.value : undefined),
        // 如果是电站锅炉内检，将 part 数组转换为字符串
        part: isPowerStationBoiler ? (item.part || []).join('/') : ""
      })),
      id: editType.value === 'edit' ? editInspectionNatureId.value : undefined
    }

    // 根据设备类型选择不同的更新接口
    const result = editType.value === 'edit' ? await updatePressure2InspectionNature(params) : await createPressure2InspectionNature(params)

    if (result) {
      ElMessage.success((editType.value === 'edit' ? '编辑' : '新增') + '成功')
      handleInspectionNatureDialogClose()
      fetchInspectionNatureList()
    }
  } catch (error) {
    console.error('提交失败:', error)
  }
}

// 报告模板列表相关
const reportTotal = ref(0)
const reportSearchForm = ref<any>({})
const reportTemplateList = ref<any[]>([])
const reportLoading = ref(false)
const reportSearchKeyword = ref('') // 搜索关键词

// 高亮匹配文本
const highlightText = (text: string) => {
  if (!text) return ''
  const keyword = reportSearchKeyword.value
  if (!keyword) return text
  // 转义正则特殊字符
  const escaped = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
  const regex = new RegExp(`(${escaped})`, 'gi')
  return text.replace(regex, '<mark style="background-color: #fff3cd; padding: 0 2px;">$1</mark>')
}

// 判断报告是否已选中
const isReportSelected = (item: any) => {
  // 判断是否已经有主项目
  if (inspectionNatureForm.value.templateSaveReqVOList.some((x: any) => x.projectType === 'MAIN') && item.projectType === 'MAIN'){
    console.log(item)
    return true
  }
  return inspectionNatureForm.value.templateSaveReqVOList.some(
    (x: any) => x.templateId === item.id
  )
}

// 处理报告项选择变化
const handleReportItemSelect = (item: any, checked: boolean) => {
  if (checked) {
    // 添加到已选列表
    if (!isReportSelected(item.id)) {
      inspectionNatureForm.value.templateSaveReqVOList.push({
        templateId: item.id,
        name: item.projectName,
        isDefault: item.isDefault || '0',
        defaultCount: 1,
        part: []
      })
    }
  } else {
    // 从已选列表移除
    const index = inspectionNatureForm.value.templateSaveReqVOList.findIndex(
      (x: any) => x.id === item.id
    )
    if (index > -1) {
      inspectionNatureForm.value.templateSaveReqVOList.splice(index, 1)
    }
  }
}

const fetchReportTemplateList_Boiler = async () => {
  reportLoading.value = true
  try {
    const params = {
      pageNo: 1,
      pageSize: 999,
      reportType: 100,
      ...reportSearchForm.value
    }
    const result = await DynamicTbApi.getDynamicTbPageInspection(params)
    if (result) {
      reportTemplateList.value = result.list
      reportTotal.value = result.total
    }
  } catch (error) {
    console.error('获取报告模板列表失败:', error)
  } finally {
    reportLoading.value = false
  }
}


// 报告模板弹窗
const reportTemplateDialog_Boiler = ref(false)
const handleShowReportList = () => {
  reportTemplateDialog_Boiler.value = true
  fetchReportTemplateList_Boiler()

}

const handleClearSelectedItem = () => {
  inspectionNatureForm.value.templateSaveReqVOList = []
}
const handleRemoveTag = (name) => {
  inspectionNatureForm.value.templateSaveReqVOList = inspectionNatureForm.value.templateSaveReqVOList.filter(item => item.name !== name)
}

const handleReportTemplateConfirm = () => {
  // 直接关闭弹窗，数据已在 handleReportItemSelect 中实时更新
  reportTemplateDialog_Boiler.value = false
}

// 判断是否为电站锅炉内检
const isPowerStationBoiler = computed(() => {
  return inspectionNatureForm.value.equipmentType == '1' &&
    inspectionNatureForm.value.equipmentCategory == '200' &&
    inspectionNatureForm.value.inspectionNature == '100'
})

// 拖拽排序
const sortTableRef = ref()
const sortableInstance = ref<any>(null)

const initSortable = () => {
  nextTick(() => {
    if (sortableInstance.value) {
      sortableInstance.value.destroy()
      sortableInstance.value = null
    }

    const tableBody = sortTableRef.value?.$el?.querySelector('.el-table__body-wrapper tbody')
    if (!tableBody) return

    sortableInstance.value = Sortable.create(tableBody, {
      animation: 150,
      handle: '.drag-handle',
      ghostClass: 'sortable-ghost',
      chosenClass: 'sortable-chosen',
      dragClass: 'sortable-drag',
      onEnd: (evt: any) => {
        const { oldIndex, newIndex } = evt
        if (oldIndex !== undefined && newIndex !== undefined && oldIndex !== newIndex) {
          const list = inspectionNatureForm.value.templateSaveReqVOList
          const movedItem = list.splice(oldIndex, 1)[0]
          list.splice(newIndex, 0, movedItem)
        }
      }
    })
  })
}

// 弹窗打开且数据变化时重新初始化拖拽
watch(
  () => [inspectionNatureCreateOrEditDialog.value, inspectionNatureForm.value.templateSaveReqVOList.length],
  () => {
    if (inspectionNatureCreateOrEditDialog.value) {
      initSortable()
    }
  }
)

onBeforeUnmount(() => {
  if (sortableInstance.value) {
    sortableInstance.value.destroy()
    sortableInstance.value = null
  }
})
</script>
<style lang="scss" scoped>
.standard-class-list {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  margin: 0 !important;
  min-height: calc(100vh - 120px);

  .right-table {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .left-tree {
    min-width: 240px;
    max-width: 280px;
    margin-right: 24px;
    padding: 16px;
    border-radius: 8px;
    border-right: none;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  }

  .search-form {
    margin-bottom: 16px;
    padding: 16px;
    background-color: var(--el-fill-color-blank);
    border-radius: 8px;
    border: 1px solid var(--el-border-color-lighter);
  }

  .table-buttons {
    margin-bottom: 16px;
    display: flex;
    gap: 12px;
  }

  .pagination {
    margin-top: 16px;
    justify-content: flex-end;
    padding: 12px 0;
  }

  :deep(.el-table) {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

    .el-table__header-wrapper {
      th {
        color: var(--el-text-color-primary);
        font-weight: 600;
      }
    }

    .el-table__row {
      &:hover {
        background-color: var(--el-color-primary-light-9) !important;
      }
    }
  }

  :deep(.el-tree) {
    .el-tree-node {
      &.is-current {
        // background: none !important;
      }
    }

    .el-tree-node__content {
      height: 48px;
      border-radius: 6px;
      margin-bottom: 4px;
      transition: all 0.3s;

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

      &:hover {
        background-color: var(--el-color-primary-light-9);
        transform: translateX(4px);
      }

      &.is-current {
        background-color: var(--el-color-primary-light-8);
        color: var(--el-color-primary);
        font-weight: 600;
      }
    }
  }

  .add-class-btn {
    width: 100%;
    height: 38px;
    margin-right: 10px;
    border-radius: 0;

    .el-icon {
      margin-right: 6px;
    }
  }

  .class-content {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;

    .el-icon {
      margin-top: 2px;
    }

    .custom-tree-node {
      padding-left: 8px;
      font-size: 14px;
    }

    .more {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%) rotate(90deg);
      margin: 0;
    }
  }
}

.custom-tree-node-popover {
  color: var(--el-text-color-primary);

  .el-button {
    display: block;
    margin-left: 0;
    margin-bottom: 8px;
    height: 36px;
    width: 100%;
    line-height: 36px;
    text-align: center;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.inspection-grid {
  width: 100%;
  padding: 16px;
}


/* Grid 容器核心配置 */
.grid-container {
  display: grid;
  /* 5列等宽，列间距 12px，行间距 16px */
  grid-template-columns: repeat(5, 1fr);
  align-items: center; /* 垂直居中 */
  grid-gap: 1px;
  background-color: var(--el-border-color-light);
  border: 1px solid var(--el-border-color-light);
}

/* 子项布局：复选框 + 文本 + 图标 */
.grid-item {
  display: flex;
  align-items: center;
  padding-left: 20px;
  padding-right: 12px;
  height: 52px;
  background-color: #fff;

  .el-checkbox {
    margin-right: 6px;
  }
}

/* 复选框样式优化（可选） */
.grid-item input[type='checkbox'] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.custom-select {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  line-height: 32px;
  min-height: 32px;

  :deep(.el-input) {
    width: 100%;
    height: 100%;
    flex: 1;

    .el-input__inner {
      cursor: pointer;
    }
  }

  :deep(.el-icon) {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--el-text-color-placeholder);
  }
}

// 拖拽排序样式
.sortable-ghost {
  opacity: 0.4;
  background: #c8ebfb;
}

.sortable-chosen {
  opacity: 0.8;
}

.sortable-drag {
  opacity: 0.8;
}

.drag-handle {
  cursor: move;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>