653 lines
19 KiB
Vue
653 lines
19 KiB
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"
|
|||
|
|
/>
|
|||
|
|
<div class="tree-container">
|
|||
|
|
<el-tree
|
|||
|
|
:data="deptOptions"
|
|||
|
|
:props="treeProps"
|
|||
|
|
:expand-on-click-node="false"
|
|||
|
|
:filter-node-method="filterNode"
|
|||
|
|
ref="deptTreeRef"
|
|||
|
|
node-key="id"
|
|||
|
|
highlight-current
|
|||
|
|
:expanded-keys="expandedKeys"
|
|||
|
|
@node-click="handleNodeClick"
|
|||
|
|
@expand-change="handleForceExpand"
|
|||
|
|
:default-expanded-keys="[]"
|
|||
|
|
>
|
|||
|
|
<!-- 自定义树节点模板：新增newflag徽章 -->
|
|||
|
|
<template #default="{ node, data }">
|
|||
|
|
<span class="tree-node-content">
|
|||
|
|
{{ node.label }}
|
|||
|
|
<!-- 新节点徽章：newflag=1时显示黄色"新"标 -->
|
|||
|
|
<el-badge
|
|||
|
|
v-if="data.newflag === '1'"
|
|||
|
|
value="新"
|
|||
|
|
class="new-node-badge"
|
|||
|
|
type="warning"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
</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-row :gutter="10" class="table-toolbar">
|
|||
|
|
<el-col :span="1.5">
|
|||
|
|
<el-button type="primary" plain icon="Plus" @click="handleSave">保存</el-button>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="1.5">
|
|||
|
|
<el-button type="success" plain icon="Edit" @click="handleCancelEdit">取消修改</el-button>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="1.5">
|
|||
|
|
<el-button type="danger" plain icon="Download" @click="handleRestoreDefault">还原默认</el-button>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<!-- 三列表格容器 -->
|
|||
|
|
<div class="triple-table-wrapper">
|
|||
|
|
<!-- 第一列表格 -->
|
|||
|
|
<div class="table-panel table-1">
|
|||
|
|
<el-table
|
|||
|
|
v-loading="loading"
|
|||
|
|
:data="tableData1"
|
|||
|
|
@selection-change="handleSelectionChange"
|
|||
|
|
class="config-table"
|
|||
|
|
fit
|
|||
|
|
border
|
|||
|
|
height="100%"
|
|||
|
|
:cell-spacing="0"
|
|||
|
|
>
|
|||
|
|
<el-table-column label="序号" align="center" prop="configSort" width="50" />
|
|||
|
|
<el-table-column :label="`${menuname}编码`" align="center" prop="configCode" v-if="false" show-overflow-tooltip min-width="120" />
|
|||
|
|
<el-table-column :label="`${menuname}名称`" align="left" prop="configName" show-overflow-tooltip min-width="150" />
|
|||
|
|
<el-table-column label="参数值" align="center" prop="configDefvalue" show-overflow-tooltip min-width="100">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<DynamicInput
|
|||
|
|
:type="scope.row.configOptiontype"
|
|||
|
|
v-model="scope.row.configDefvalue"
|
|||
|
|
:dict-data="scope.row.remark"
|
|||
|
|
:placeholder="`请输入${scope.row.configName}值`"
|
|||
|
|
class="edit-input"
|
|||
|
|
/>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="值码" align="center" prop="configDefvalue" v-if="false" show-overflow-tooltip min-width="100" />
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 第二列表格 -->
|
|||
|
|
<div class="table-panel table-2">
|
|||
|
|
<el-table
|
|||
|
|
v-loading="loading"
|
|||
|
|
:data="tableData2"
|
|||
|
|
@selection-change="handleSelectionChange"
|
|||
|
|
class="config-table"
|
|||
|
|
fit
|
|||
|
|
border
|
|||
|
|
height="100%"
|
|||
|
|
:cell-spacing="0"
|
|||
|
|
>
|
|||
|
|
<el-table-column label="序号" align="center" prop="configSort" width="50" />
|
|||
|
|
<el-table-column :label="`${menuname}编码`" align="center" prop="configCode" v-if="false" show-overflow-tooltip min-width="120" />
|
|||
|
|
<el-table-column :label="`${menuname}名称`" align="left" prop="configName" show-overflow-tooltip min-width="150" />
|
|||
|
|
<el-table-column label="参数值" align="center" prop="configDefvalue" show-overflow-tooltip min-width="100">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<DynamicInput
|
|||
|
|
:type="scope.row.configOptiontype"
|
|||
|
|
v-model="scope.row.configDefvalue"
|
|||
|
|
:dict-data="scope.row.remark"
|
|||
|
|
:placeholder="`请输入${scope.row.configName}值`"
|
|||
|
|
class="edit-input"
|
|||
|
|
/>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="值码" align="center" prop="configDefvalue"v-if="false" show-overflow-tooltip min-width="100" />
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 第三列表格 -->
|
|||
|
|
<div class="table-panel table-3">
|
|||
|
|
<el-table
|
|||
|
|
v-loading="loading"
|
|||
|
|
:data="tableData3"
|
|||
|
|
@selection-change="handleSelectionChange"
|
|||
|
|
class="config-table"
|
|||
|
|
fit
|
|||
|
|
border
|
|||
|
|
height="100%"
|
|||
|
|
:cell-spacing="0"
|
|||
|
|
>
|
|||
|
|
<el-table-column label="序号" align="center" prop="configSort" width="50" />
|
|||
|
|
<el-table-column :label="`${menuname}编码`" align="center" prop="configCode" v-if="false" show-overflow-tooltip min-width="120" />
|
|||
|
|
<el-table-column :label="`${menuname}名称`" align="left" prop="configName" show-overflow-tooltip min-width="150" />
|
|||
|
|
<el-table-column label="参数值" align="center" prop="configDefvalue" show-overflow-tooltip min-width="100">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<DynamicInput
|
|||
|
|
:type="scope.row.configOptiontype"
|
|||
|
|
v-model="scope.row.configDefvalue"
|
|||
|
|
:dict-data="scope.row.remark"
|
|||
|
|
:placeholder="`请输入${scope.row.configName}值`"
|
|||
|
|
class="edit-input"
|
|||
|
|
/>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="值码" align="center" prop="configDefvalue" v-if="false" show-overflow-tooltip min-width="100" />
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup name="ComOpt" lang="ts">
|
|||
|
|
import { ref, watch, nextTick, computed } from 'vue'
|
|||
|
|
import { ElMessage, ElTree, ElTreeNode, ElMessageBox, ElBadge } from 'element-plus'
|
|||
|
|
import { paramList, paramTree, getdef, updateParam } from '@/api/liswork/xtwh/ComOpt'
|
|||
|
|
import { getFirstLetter } from '@/utils/pinyin.js'
|
|||
|
|
import DynamicInput from "@/views/liswork/xtwh/localconfig/components/DynamicInput.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
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface RegDictItem {
|
|||
|
|
configId: string | number
|
|||
|
|
configSort: number
|
|||
|
|
configCode: string
|
|||
|
|
configName: string
|
|||
|
|
configDefvalue: string | number
|
|||
|
|
configOptiontype: string
|
|||
|
|
remark: string
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== 响应式变量 ==========
|
|||
|
|
// 树相关
|
|||
|
|
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: InstrTreeNode) => !data.children || data.children.length === 0
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 查询参数
|
|||
|
|
const queryParams = ref<QueryParams>({
|
|||
|
|
yq: undefined,
|
|||
|
|
xxdh: undefined,
|
|||
|
|
xxqz: undefined,
|
|||
|
|
groupId: undefined
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 列表相关
|
|||
|
|
const menuname = ref<string>("仪器全局")
|
|||
|
|
const regdictList = ref<RegDictItem[]>([])
|
|||
|
|
const originRegdictList = ref<RegDictItem[]>([])
|
|||
|
|
const loading = ref<boolean>(false)
|
|||
|
|
const total = ref<number>(0)
|
|||
|
|
|
|||
|
|
// 选择相关
|
|||
|
|
const ids = ref<(string | number)[]>([])
|
|||
|
|
const single = ref<boolean>(true)
|
|||
|
|
const multiple = ref<boolean>(true)
|
|||
|
|
|
|||
|
|
// ========== 核心：拆分三列表格数据 ==========
|
|||
|
|
const tableData1 = computed<RegDictItem[]>(() => {
|
|||
|
|
const splitSize = Math.ceil(total.value / 3) // 每列基础行数
|
|||
|
|
return regdictList.value.slice(0, splitSize)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const tableData2 = computed<RegDictItem[]>(() => {
|
|||
|
|
const splitSize = Math.ceil(total.value / 3)
|
|||
|
|
return regdictList.value.slice(splitSize, splitSize * 2)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const tableData3 = computed<RegDictItem[]>(() => {
|
|||
|
|
const splitSize = Math.ceil(total.value / 3)
|
|||
|
|
return regdictList.value.slice(splitSize * 2)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// ========== 树操作核心方法 ==========
|
|||
|
|
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
|
|||
|
|
handleQuery()
|
|||
|
|
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
|
|||
|
|
handleQuery()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleForceExpand = (_: string[], node: ElTreeNode): void => {
|
|||
|
|
if (isFiltering.value) return
|
|||
|
|
|
|||
|
|
const nodeData = node.data as InstrTreeNode
|
|||
|
|
if (nodeData.children && nodeData.children.length > 0) {
|
|||
|
|
if (node.expanded) {
|
|||
|
|
forceExpandSingleNode(node.key as string)
|
|||
|
|
} else {
|
|||
|
|
expandedKeys.value = []
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== 检索过滤逻辑 ==========
|
|||
|
|
const filterNode = (value: string, data: InstrTreeNode, _node: ElTreeNode): 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 => 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 ElTreeNode) && 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) {
|
|||
|
|
deptOptions.value = response.data
|
|||
|
|
} else {
|
|||
|
|
ElMessage.warning(response.msg || "获取树数据失败")
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error(`获取树数据异常：${(error as Error).message}`)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleQuery = (): void => {
|
|||
|
|
getList()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const getList = async (): Promise<void> => {
|
|||
|
|
loading.value = true
|
|||
|
|
try {
|
|||
|
|
const response = await paramList({ yq: queryParams.value.yq })
|
|||
|
|
regdictList.value = JSON.parse(JSON.stringify(response.data))
|
|||
|
|
originRegdictList.value = JSON.parse(JSON.stringify(response.data))
|
|||
|
|
total.value = response.data.length
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error(`获取列表异常：${(error as Error).message}`)
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleSelectionChange = (val: RegDictItem[]): void => {
|
|||
|
|
ids.value = val.map(item => item.configId)
|
|||
|
|
single.value = val.length === 1
|
|||
|
|
multiple.value = val.length > 1
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleSave = async (): Promise<void> => {
|
|||
|
|
try {
|
|||
|
|
loading.value = true
|
|||
|
|
// 合并三列表格数据提交
|
|||
|
|
const allData = [...tableData1.value, ...tableData2.value, ...tableData3.value]
|
|||
|
|
const res = await updateParam(allData)
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
ElMessage.success("批量保存成功！")
|
|||
|
|
originRegdictList.value = JSON.parse(JSON.stringify(allData))
|
|||
|
|
} else {
|
|||
|
|
ElMessage.error(res.msg || "保存失败，请重试")
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error(`保存失败：${(error as Error).message}`)
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleCancelEdit = (): void => {
|
|||
|
|
ElMessageBox.confirm(
|
|||
|
|
"是否确认取消所有修改，恢复原始数据？",
|
|||
|
|
"提示",
|
|||
|
|
{
|
|||
|
|
confirmButtonText: "确定",
|
|||
|
|
cancelButtonText: "取消",
|
|||
|
|
type: "warning"
|
|||
|
|
}
|
|||
|
|
).then(() => {
|
|||
|
|
regdictList.value = JSON.parse(JSON.stringify(originRegdictList.value))
|
|||
|
|
ElMessage.success("已恢复原始数据！")
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleRestoreDefault = async (): Promise<void> => {
|
|||
|
|
ElMessageBox.confirm(
|
|||
|
|
"是否确认还原所有默认值？此操作会覆盖当前修改！",
|
|||
|
|
"警告",
|
|||
|
|
{
|
|||
|
|
confirmButtonText: "确定",
|
|||
|
|
cancelButtonText: "取消",
|
|||
|
|
type: "danger"
|
|||
|
|
}
|
|||
|
|
).then(async () => {
|
|||
|
|
loading.value = true
|
|||
|
|
try {
|
|||
|
|
const res = await getdef({ yq: queryParams.value.yq })
|
|||
|
|
regdictList.value = JSON.parse(JSON.stringify(res.data))
|
|||
|
|
originRegdictList.value = JSON.parse(JSON.stringify(res.data))
|
|||
|
|
total.value = res.data.length
|
|||
|
|
ElMessage.success("还原默认值成功！")
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error(`还原失败：${(error as Error).message}`)
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== 初始化 ==========
|
|||
|
|
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-search-input {
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.table-toolbar {
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
height: 36px;
|
|||
|
|
line-height: 36px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 三列表格容器
|
|||
|
|
.triple-table-wrapper {
|
|||
|
|
flex: 1;
|
|||
|
|
height: calc(100% - 36px - 24px); // 减去标题行+工具栏高度
|
|||
|
|
display: flex;
|
|||
|
|
gap: 0px; // 表格间间距
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
// 单个表格面板
|
|||
|
|
.table-panel {
|
|||
|
|
flex: 1; // 三列均等分
|
|||
|
|
height: 100%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
background: #fff;
|
|||
|
|
border: 1px solid #e6e6e6;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
|
|||
|
|
// 细微间距优化
|
|||
|
|
&.table-1 {
|
|||
|
|
margin-right: 0px;
|
|||
|
|
}
|
|||
|
|
&.table-2 {
|
|||
|
|
margin: 0 0px;
|
|||
|
|
}
|
|||
|
|
&.table-3 {
|
|||
|
|
margin-left: 0px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 核心：清除表格内上下间隙
|
|||
|
|
:deep(.config-table) {
|
|||
|
|
// 清除表格整体的边框间距
|
|||
|
|
border-collapse: collapse !important;
|
|||
|
|
border-spacing: 0 !important;
|
|||
|
|
|
|||
|
|
// 清除表格头部间距
|
|||
|
|
.el-table__header {
|
|||
|
|
padding: 0 !important;
|
|||
|
|
|
|||
|
|
th {
|
|||
|
|
padding: 0 !important;
|
|||
|
|
border-bottom: 1px solid #e6e6e6 !important;
|
|||
|
|
line-height: 25px !important;
|
|||
|
|
height: 25px !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 清除表格内容区间距
|
|||
|
|
.el-table__body {
|
|||
|
|
padding: 0 !important;
|
|||
|
|
|
|||
|
|
// 清除行间距
|
|||
|
|
.el-table__row {
|
|||
|
|
height: 25px !important;
|
|||
|
|
line-height: 25px !important;
|
|||
|
|
margin: 0 !important;
|
|||
|
|
padding: 0 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 清除单元格内边距和间距
|
|||
|
|
.el-table__cell {
|
|||
|
|
padding: 0 4px !important; // 仅保留左右内边距，上下清零
|
|||
|
|
height: 25px !important;
|
|||
|
|
line-height: 25px !important;
|
|||
|
|
vertical-align: middle !important;
|
|||
|
|
font-size: 12px;
|
|||
|
|
border-bottom: 1px solid #e6e6e6 !important;
|
|||
|
|
border-right: 1px solid #e6e6e6 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 最后一列清除右侧边框
|
|||
|
|
.el-table__cell:last-child {
|
|||
|
|
border-right: none !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 清除表格底部间距
|
|||
|
|
.el-table__footer {
|
|||
|
|
padding: 0 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 编辑输入框适配紧凑布局
|
|||
|
|
.edit-input {
|
|||
|
|
width: 95%;
|
|||
|
|
margin: 0 !important;
|
|||
|
|
padding: 0 !important;
|
|||
|
|
|
|||
|
|
:deep(.el-input__inner) {
|
|||
|
|
padding: 0 5px;
|
|||
|
|
height: 25px !important; // 缩小输入框高度适配紧凑行高
|
|||
|
|
line-height: 25px !important;
|
|||
|
|
font-size: 12px;
|
|||
|
|
border: 1px solid #dcdfe6;
|
|||
|
|
margin: 0 !important;
|
|||
|
|
|
|||
|
|
&:focus {
|
|||
|
|
border-color: #409eff;
|
|||
|
|
outline: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|