仪器参数
This commit is contained in:
parent
04dd1d3f82
commit
bdfe449803
@ -334,3 +334,20 @@ aside {
|
|||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.tabs_box>.el-tabs__header {
|
||||||
|
height: 1.875rem !important;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
font-size: .875rem;
|
||||||
|
|
||||||
|
.el-tabs__item {
|
||||||
|
height: 1.875rem !important;
|
||||||
|
padding: 0 .625rem;
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
border-bottom: .125rem solid #409eff !important;
|
||||||
|
background-color: #e9f1fb;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -46,7 +46,7 @@
|
|||||||
:userList="userList" @changeStatus="changeStatus" @batchShow="handleBatchScan" />
|
:userList="userList" @changeStatus="changeStatus" @batchShow="handleBatchScan" />
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="16">
|
<el-col :span="16">
|
||||||
<el-tabs v-model="activeName" type="card" class="demo-tabs">
|
<el-tabs v-model="activeName" type="card" class="tabs_box">
|
||||||
<el-tab-pane label="鉴定(终报)结果" name="first">
|
<el-tab-pane label="鉴定(终报)结果" name="first">
|
||||||
<ZbReport ref="labResultRef" v-model:labPat="labPat" :labPatKey="queryParams"
|
<ZbReport ref="labResultRef" v-model:labPat="labPat" :labPatKey="queryParams"
|
||||||
@update:labPatKey="queryParams = $event" :dictData="dictData" :labResutsData="zbLabResuts"
|
@update:labPatKey="queryParams = $event" :dictData="dictData" :labResutsData="zbLabResuts"
|
||||||
@ -842,22 +842,6 @@ const sendMessage = () => {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
:deep(.el-tabs--card>.el-tabs__header) {
|
|
||||||
height: 1.875rem !important;
|
|
||||||
margin-bottom: 0px;
|
|
||||||
font-size: .875rem;
|
|
||||||
|
|
||||||
.el-tabs__item {
|
|
||||||
height: 1.875rem !important;
|
|
||||||
padding: 0 .625rem;
|
|
||||||
|
|
||||||
&.is-active {
|
|
||||||
border-bottom: .125rem solid #409eff !important;
|
|
||||||
background-color: #e9f1fb;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.box-shadow {
|
.box-shadow {
|
||||||
box-shadow: 2px 2px 4px 0px rgba(206, 217, 234, 0.7);
|
box-shadow: 2px 2px 4px 0px rgba(206, 217, 234, 0.7);
|
||||||
border-radius: .75rem;
|
border-radius: .75rem;
|
||||||
|
|||||||
@ -54,7 +54,7 @@
|
|||||||
</CustomTable>
|
</CustomTable>
|
||||||
</ContextMenu>
|
</ContextMenu>
|
||||||
<div class="tabs_btns">
|
<div class="tabs_btns">
|
||||||
<el-tabs v-model="activeName2" type="card" class="demo-tabs" :size="autoSize">
|
<el-tabs v-model="activeName2" type="card" class="tabs_box" :size="autoSize">
|
||||||
<el-tab-pane label="药敏结果" name="first">
|
<el-tab-pane label="药敏结果" name="first">
|
||||||
<CustomTable ref="ymTableRef" :data="ymTableData" :columns="ymColumns" :config="ymTableConfig"
|
<CustomTable ref="ymTableRef" :data="ymTableData" :columns="ymColumns" :config="ymTableConfig"
|
||||||
:enable-column-drag="true" @row-click="ymRowHandle" @column-drag-end="ymHandleColumnDragEnd">
|
:enable-column-drag="true" @row-click="ymRowHandle" @column-drag-end="ymHandleColumnDragEnd">
|
||||||
|
|||||||
327
src/views/liswork/xtwh/comopt/components/sysGlobal.vue
Normal file
327
src/views/liswork/xtwh/comopt/components/sysGlobal.vue
Normal file
@ -0,0 +1,327 @@
|
|||||||
|
<!-- 系统全局选项 -->
|
||||||
|
<template>
|
||||||
|
<div class="sys_box">
|
||||||
|
<el-row :gutter="10" class="table-toolbar">
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button type="primary" plain icon="Check" @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="RefreshRight" @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="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="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="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>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
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'
|
||||||
|
// @ts-ignore
|
||||||
|
import DynamicInput from "@/views/liswork/xtwh/localconfig/components/DynamicInput.vue"
|
||||||
|
const emits = defineEmits(['updateTree'])
|
||||||
|
const yq = defineModel<string>()
|
||||||
|
|
||||||
|
interface RegDictItem {
|
||||||
|
configId: string | number
|
||||||
|
configSort: number
|
||||||
|
configCode: string
|
||||||
|
configName: string
|
||||||
|
configDefvalue: string | number
|
||||||
|
configOptiontype: string
|
||||||
|
remark: string
|
||||||
|
}
|
||||||
|
// 列表相关
|
||||||
|
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 getList = async (): Promise<void> => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const response = await paramList({ yq: yq.value })
|
||||||
|
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 == 0) {
|
||||||
|
ElMessage.success(res.msg || "保存成功")
|
||||||
|
originRegdictList.value = JSON.parse(JSON.stringify(allData))
|
||||||
|
// 更新树结构状态
|
||||||
|
emits('updateTree')
|
||||||
|
}
|
||||||
|
} 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: "error"
|
||||||
|
}
|
||||||
|
).then(async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const res = await getdef({ yq: yq.value })
|
||||||
|
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
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
watch(yq, (newVal) => {
|
||||||
|
if (newVal !== undefined) {
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
}, { immediate: true })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.sys_box {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-toolbar {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 三列表格容器
|
||||||
|
.triple-table-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
height: calc(100% - 45px); // 减去标题行+工具栏高度
|
||||||
|
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>
|
||||||
12
src/views/liswork/xtwh/comopt/components/sysReport.vue
Normal file
12
src/views/liswork/xtwh/comopt/components/sysReport.vue
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<!-- 报告界面参数 -->
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
报告界面参数
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
@ -3,154 +3,37 @@
|
|||||||
<el-row :gutter="20" class="main-row">
|
<el-row :gutter="20" class="main-row">
|
||||||
<!-- 左侧树区域 -->
|
<!-- 左侧树区域 -->
|
||||||
<el-col :span="4" :xs="24" class="tree-col">
|
<el-col :span="4" :xs="24" class="tree-col">
|
||||||
<el-input
|
<el-input v-model="deptName" placeholder="请输入仪器名称" clearable prefix-icon="Search" class="tree-search-input" />
|
||||||
v-model="deptName"
|
<el-radio-group v-model="radiotype" @change="radioChange">
|
||||||
placeholder="请输入仪器名称"
|
<el-radio value="1" size="large">仪器组</el-radio>
|
||||||
clearable
|
<el-radio value="2" size="large">所有仪器</el-radio>
|
||||||
prefix-icon="Search"
|
</el-radio-group>
|
||||||
class="tree-search-input"
|
|
||||||
/>
|
|
||||||
<div class="tree-container">
|
<div class="tree-container">
|
||||||
<el-tree
|
<el-tree :data="deptOptions" :props="treeProps" expand-on-click-node :filter-node-method="filterNode"
|
||||||
:data="deptOptions"
|
ref="deptTreeRef" node-key="id" highlight-current :expanded-keys="expandedKeys"
|
||||||
:props="treeProps"
|
@node-click="handleNodeClick">
|
||||||
: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徽章 -->
|
<!-- 自定义树节点模板:新增newflag徽章 -->
|
||||||
<template #default="{ node, data }">
|
<template #default="{ node, data }">
|
||||||
<span class="tree-node-content">
|
<span class="tree-node-content">
|
||||||
{{ node.label }}
|
{{ node.label }}
|
||||||
<!-- 新节点徽章:newflag=1时显示黄色"新"标 -->
|
<!-- 新节点徽章:newflag=1时显示黄色"新"标 -->
|
||||||
<el-badge
|
<el-badge v-if="data.newflag === '1'" value="new" class="new-node-badge" />
|
||||||
v-if="data.newflag === '1'"
|
|
||||||
value="新"
|
|
||||||
class="new-node-badge"
|
|
||||||
type="warning"
|
|
||||||
/>
|
|
||||||
|
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-tree>
|
</el-tree>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<!-- 右侧列表区域(三列表格) -->
|
<!-- 右侧列表区域 -->
|
||||||
<el-col :span="20" :xs="24" class="table-col">
|
<el-col :span="20" :xs="24" class="table-col">
|
||||||
<el-row :gutter="10" class="yq-title-row">
|
<el-row :gutter="10" class="yq-title-row">
|
||||||
<h1 class="yq-title">仪器:{{ yqmc }}</h1>
|
<h1 class="yq-title">仪器:{{ yqmc }}</h1>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row :gutter="10" class="table-toolbar">
|
<el-tabs v-model="activeName" type="card" class="tabs_box">
|
||||||
<el-col :span="1.5">
|
<el-tab-pane v-for="tab in tabList" :key="tab.key" :label="tab.label" :name="tab.key" />
|
||||||
<el-button type="primary" plain icon="Plus" @click="handleSave">保存</el-button>
|
</el-tabs>
|
||||||
</el-col>
|
<!-- 动态组件渲染 -->
|
||||||
<el-col :span="1.5">
|
<component :is="currentComponent" :key="activeName" v-model="queryParams.yq" @updateTree="getDeptTree" />
|
||||||
<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-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
@ -158,17 +41,20 @@
|
|||||||
|
|
||||||
<script setup name="ComOpt" lang="ts">
|
<script setup name="ComOpt" lang="ts">
|
||||||
import { ref, watch, nextTick, computed } from 'vue'
|
import { ref, watch, nextTick, computed } from 'vue'
|
||||||
import { ElMessage, ElTree, ElTreeNode, ElMessageBox, ElBadge } from 'element-plus'
|
import { ElMessage, ElTree, TreeNode, ElMessageBox, ElBadge } from 'element-plus'
|
||||||
import { paramList, paramTree, getdef, updateParam } from '@/api/liswork/xtwh/ComOpt'
|
import { paramList, paramTree, getdef, updateParam } from '@/api/liswork/xtwh/ComOpt'
|
||||||
|
// @ts-ignore
|
||||||
import { getFirstLetter } from '@/utils/pinyin.js'
|
import { getFirstLetter } from '@/utils/pinyin.js'
|
||||||
import DynamicInput from "@/views/liswork/xtwh/localconfig/components/DynamicInput.vue"
|
|
||||||
|
import SysGlobal from './components/sysGlobal.vue'
|
||||||
|
import SysReport from './components/sysReport.vue'
|
||||||
|
|
||||||
// ========== TypeScript 类型定义 ==========
|
// ========== TypeScript 类型定义 ==========
|
||||||
interface InstrTreeNode {
|
interface InstrTreeNode {
|
||||||
id: string
|
id: string
|
||||||
label: string
|
label: string
|
||||||
lx: string
|
lx: string
|
||||||
newflag:string // 新增newflag字段
|
newflag: string // 新增newflag字段
|
||||||
children?: InstrTreeNode[]
|
children?: InstrTreeNode[]
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -189,16 +75,8 @@ interface QueryParams {
|
|||||||
groupId?: string | undefined
|
groupId?: string | undefined
|
||||||
}
|
}
|
||||||
|
|
||||||
interface RegDictItem {
|
|
||||||
configId: string | number
|
|
||||||
configSort: number
|
|
||||||
configCode: string
|
|
||||||
configName: string
|
|
||||||
configDefvalue: string | number
|
|
||||||
configOptiontype: string
|
|
||||||
remark: string
|
|
||||||
}
|
|
||||||
|
|
||||||
|
const radiotype = ref<string>("1")
|
||||||
// ========== 响应式变量 ==========
|
// ========== 响应式变量 ==========
|
||||||
// 树相关
|
// 树相关
|
||||||
const deptTreeRef = ref<InstanceType<typeof ElTree>>()
|
const deptTreeRef = ref<InstanceType<typeof ElTree>>()
|
||||||
@ -210,7 +88,7 @@ const isFiltering = ref<boolean>(false)
|
|||||||
const treeProps = ref({
|
const treeProps = ref({
|
||||||
label: 'label',
|
label: 'label',
|
||||||
children: 'children',
|
children: 'children',
|
||||||
isLeaf: (data: InstrTreeNode) => !data.children || data.children.length === 0
|
isLeaf: (data: Record<string, any>) => !data.children || data.children.length === 0
|
||||||
})
|
})
|
||||||
|
|
||||||
// 查询参数
|
// 查询参数
|
||||||
@ -221,47 +99,67 @@ const queryParams = ref<QueryParams>({
|
|||||||
groupId: 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 tabList = [
|
||||||
const tableData1 = computed<RegDictItem[]>(() => {
|
{ key: 'SysGlobal', label: '系统全局参数', component: SysGlobal },
|
||||||
const splitSize = Math.ceil(total.value / 3) // 每列基础行数
|
{ key: 'SysReport', label: '报告界面', component: SysReport },
|
||||||
return regdictList.value.slice(0, splitSize)
|
]
|
||||||
|
const activeName = ref('SysGlobal')
|
||||||
|
|
||||||
|
// 计算当前要渲染的组件
|
||||||
|
const currentComponent = computed(() => {
|
||||||
|
return tabList.find(tab => tab.key === activeName.value)?.component || 'SysGlobal'
|
||||||
})
|
})
|
||||||
|
|
||||||
const tableData2 = computed<RegDictItem[]>(() => {
|
|
||||||
const splitSize = Math.ceil(total.value / 3)
|
|
||||||
return regdictList.value.slice(splitSize, splitSize * 2)
|
|
||||||
})
|
|
||||||
|
|
||||||
const tableData3 = computed<RegDictItem[]>(() => {
|
const treeData = ref<InstrTreeNode[]>([])
|
||||||
const splitSize = Math.ceil(total.value / 3)
|
const radioChange = (val: string) => {
|
||||||
return regdictList.value.slice(splitSize * 2)
|
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 => {
|
const forceExpandSingleNode = (nodeId: string): void => {
|
||||||
expandedKeys.value = []
|
expandedKeys.value = []
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
expandedKeys.value = [nodeId]
|
expandedKeys.value = [nodeId]
|
||||||
deptTreeRef.value?.expand(nodeId, false)
|
// deptTreeRef.value?.expand(nodeId, false)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleNodeClick = (data: InstrTreeNode): void => {
|
const handleNodeClick = (data: InstrTreeNode): void => {
|
||||||
if (isFiltering.value) {
|
if (isFiltering.value) {
|
||||||
queryParams.value.groupId = data.id === "-1" ? undefined : data.id
|
queryParams.value.groupId = data.id === "-1" ? undefined : data.id
|
||||||
handleQuery()
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -271,26 +169,11 @@ const handleNodeClick = (data: InstrTreeNode): void => {
|
|||||||
!isExpanded && forceExpandSingleNode(data.id)
|
!isExpanded && forceExpandSingleNode(data.id)
|
||||||
} else {
|
} else {
|
||||||
queryParams.value.yq = data.id
|
queryParams.value.yq = data.id
|
||||||
yqmc.value=data.label
|
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 => {
|
const filterNode = (value: string, data: any, _node: TreeNode): boolean => {
|
||||||
if (!value) return true
|
if (!value) return true
|
||||||
|
|
||||||
const keyword = value.trim().toUpperCase()
|
const keyword = value.trim().toUpperCase()
|
||||||
@ -298,7 +181,7 @@ const filterNode = (value: string, data: InstrTreeNode, _node: ElTreeNode): bool
|
|||||||
const nodePinyinFirst = data.label ? getFirstLetter(data.label).toUpperCase() : ''
|
const nodePinyinFirst = data.label ? getFirstLetter(data.label).toUpperCase() : ''
|
||||||
|
|
||||||
const currentMatch = nodeLabel.includes(keyword.toLowerCase()) || nodePinyinFirst.includes(keyword)
|
const currentMatch = nodeLabel.includes(keyword.toLowerCase()) || nodePinyinFirst.includes(keyword)
|
||||||
const childrenMatch = (data.children || []).some(child => filterNode(value, child, _node))
|
const childrenMatch = (data.children || []).some((child: any) => filterNode(value, child, _node))
|
||||||
return currentMatch || childrenMatch
|
return currentMatch || childrenMatch
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -314,7 +197,7 @@ const debounceFilter = (() => {
|
|||||||
expandedKeys.value = []
|
expandedKeys.value = []
|
||||||
const expandMatched = (nodes: InstrTreeNode[]) => {
|
const expandMatched = (nodes: InstrTreeNode[]) => {
|
||||||
nodes.forEach(node => {
|
nodes.forEach(node => {
|
||||||
if (filterNode(val, node, {} as ElTreeNode) && node.children?.length) {
|
if (filterNode(val, node, {} as TreeNode) && node.children?.length) {
|
||||||
expandedKeys.value.push(node.id)
|
expandedKeys.value.push(node.id)
|
||||||
}
|
}
|
||||||
node.children && expandMatched(node.children)
|
node.children && expandMatched(node.children)
|
||||||
@ -336,7 +219,9 @@ const getDeptTree = async (): Promise<void> => {
|
|||||||
try {
|
try {
|
||||||
const response = await paramTree() as ParamTreeResponse
|
const response = await paramTree() as ParamTreeResponse
|
||||||
if (response.code === "0" && response.data) {
|
if (response.code === "0" && response.data) {
|
||||||
deptOptions.value = response.data
|
treeData.value = response.data
|
||||||
|
|
||||||
|
radioChange('1')
|
||||||
} else {
|
} else {
|
||||||
ElMessage.warning(response.msg || "获取树数据失败")
|
ElMessage.warning(response.msg || "获取树数据失败")
|
||||||
}
|
}
|
||||||
@ -345,88 +230,9 @@ const getDeptTree = async (): Promise<void> => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
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()
|
getDeptTree()
|
||||||
@ -456,9 +262,6 @@ getDeptTree()
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
.tree-search-input {
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-container {
|
.tree-container {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@ -482,13 +285,13 @@ getDeptTree()
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 选中节点的背景色(蓝色)+ 文字白色
|
// 选中节点的背景色(蓝色)+ 文字白色
|
||||||
.el-tree-node.is-current > .el-tree-node__content {
|
.el-tree-node.is-current>.el-tree-node__content {
|
||||||
background-color: #409eff !important;
|
background-color: #409eff !important;
|
||||||
color: #ffffff !important;
|
color: #ffffff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 选中节点hover样式(加深蓝色)
|
// 选中节点hover样式(加深蓝色)
|
||||||
.el-tree-node.is-current > .el-tree-node__content:hover {
|
.el-tree-node.is-current>.el-tree-node__content:hover {
|
||||||
background-color: #1e88e5 !important;
|
background-color: #1e88e5 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -539,115 +342,5 @@ getDeptTree()
|
|||||||
line-height: 1.2;
|
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>
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user