Compare commits
2 Commits
61e1af8c97
...
8ee0a90a5c
| Author | SHA1 | Date | |
|---|---|---|---|
|
8ee0a90a5c | ||
|
|
ea9d79144a |
53
src/api/liswork/xtwh/ComOpt.ts
Normal file
53
src/api/liswork/xtwh/ComOpt.ts
Normal file
@ -0,0 +1,53 @@
|
||||
//@ts-ignore js语法检查忽略
|
||||
import request from '@/utils/request';
|
||||
|
||||
|
||||
// 查询参数列表
|
||||
export function paramList(query?: Object) {
|
||||
return request({
|
||||
url: '/param/query',
|
||||
method: 'get',
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
// 获取默认值
|
||||
export function getdef(query?: Object) {
|
||||
return request({
|
||||
url: '/param/getdef',
|
||||
method: 'get',
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
// 修改参数列表
|
||||
export function updateParam(query?: Object) {
|
||||
return request({
|
||||
url: '/param/update',
|
||||
method: 'put',
|
||||
data: query,
|
||||
});
|
||||
}
|
||||
// 删除参数列表
|
||||
export function delParam(query?: Object) {
|
||||
return request({
|
||||
url: '/param/del',
|
||||
method: 'delete',
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
// 查询参数列表树状结构
|
||||
export function paramTree(query?: Object) {
|
||||
return request({
|
||||
url: '/param/queryTree',
|
||||
method: 'get',
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
// 查询某个参数
|
||||
export function queryOneService(yq: string,xxdh: string) {
|
||||
return request({
|
||||
url: '/param/queryOne',
|
||||
method: 'get',
|
||||
params: {yq,xxdh}
|
||||
});
|
||||
}
|
||||
653
src/views/liswork/xtwh/comopt/index.vue
Normal file
653
src/views/liswork/xtwh/comopt/index.vue
Normal file
@ -0,0 +1,653 @@
|
||||
<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>
|
||||
@ -2,8 +2,6 @@
|
||||
<div class="dynamic-input-container">
|
||||
<!-- 1. 开关组件（替代原单选框 type=0：是/否 → 开启/关闭） -->
|
||||
<el-switch
|
||||
active-text="开"
|
||||
inactive-text="关"
|
||||
class="custom-switch"
|
||||
v-if="type === '0'"
|
||||
v-model="innerValue"
|
||||
@ -82,15 +80,16 @@
|
||||
@change="handleValueChange"
|
||||
/>
|
||||
|
||||
<!-- 7. 数字框（6） -->
|
||||
<!-- 7. 数字框（6）：支持dictData定义小数位数，空值初始化 -->
|
||||
<el-input-number
|
||||
v-else-if="type === '6'"
|
||||
v-model="innerValue"
|
||||
size="small"
|
||||
:min="minNum"
|
||||
:precision="precisionNum"
|
||||
:precision="finalPrecision"
|
||||
controls-position="right"
|
||||
@change="handleValueChange"
|
||||
:placeholder="placeholder || '请输入数字'"
|
||||
/>
|
||||
|
||||
<!-- 8. 日期框（7）：适配yyyy/mm/dd -->
|
||||
@ -129,7 +128,7 @@
|
||||
</template>
|
||||
|
||||
<script setup name="DynamicInput">
|
||||
import { ref, watch, defineProps, defineEmits, onMounted } from "vue";
|
||||
import { ref, watch, defineProps, defineEmits, onMounted, computed } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { getoptionselect } from "@/api/liswork/xtwh/localconfigApi.ts";
|
||||
|
||||
@ -139,82 +138,101 @@ const dictCache = ref({});
|
||||
// Props定义
|
||||
const props = defineProps({
|
||||
modelValue: { // Vue3 规范：v-model 绑定 modelValue
|
||||
type: [String, Number, Boolean],
|
||||
required: true,
|
||||
default: "" // 开关默认值：0（关闭）
|
||||
type: [String, Number, Boolean, null, undefined], // 新增null/undefined支持空值
|
||||
required: false, // 允许空值
|
||||
default: ""
|
||||
},
|
||||
type: { type: String, required: true, default: "5" },
|
||||
dictData: { type: [String, Object, Array], default: "" },
|
||||
placeholder: { type: String, default: "请输入值" },
|
||||
minNum: { type: Number, default: 0 },
|
||||
precisionNum: { type: Number, default: 2 }
|
||||
});
|
||||
|
||||
console.log("子组件接收的props：", {
|
||||
type: props.type,
|
||||
value: props.modelValue,
|
||||
dictData: props.dictData,
|
||||
valueType: typeof props.modelValue
|
||||
type: {type: String, required: true, default: "5"},
|
||||
dictData: {type: [String, Number, Object, Array], default: ""}, // 支持Number类型（小数位数）
|
||||
placeholder: {type: String, default: "请输入值"},
|
||||
minNum: {type: Number, default: -Infinity}, // 数字框最小值改为无限制（空值场景）
|
||||
precisionNum: {type: Number, default: 0} // 默认整数
|
||||
});
|
||||
|
||||
// Emits定义（统一触发 update:modelValue）
|
||||
const emit = defineEmits(["update:modelValue", "change"]);
|
||||
|
||||
// 内部状态
|
||||
const innerValue = ref(""); // 单值组件绑定（开关/下拉/文本等）
|
||||
const innerValue = ref(null); // 初始值改为null，适配空值
|
||||
const multipleValue = ref([]); // 多选值（仅type=3用）
|
||||
const dictOptions = ref([]); // 下拉/字典选项列表
|
||||
const dictLoading = ref(false); // 字典加载状态
|
||||
|
||||
// ========== 核心：数字框小数位数计算 ==========
|
||||
const finalPrecision = computed(() => {
|
||||
if (props.type !== "6") return props.precisionNum;
|
||||
|
||||
// dictData为小数保留位数（优先级最高）
|
||||
if (props.dictData !== "" && props.dictData !== null && props.dictData !== undefined) {
|
||||
const precision = Number(props.dictData);
|
||||
return isNaN(precision) ? 0 : Math.max(0, precision); // 确保非负整数
|
||||
}
|
||||
|
||||
// dictData为空，默认整数（precisionNum=0）
|
||||
return 0;
|
||||
});
|
||||
|
||||
// ========== 核心：值初始化 + 格式适配 ==========
|
||||
watch(() => props.modelValue, (newVal) => {
|
||||
const val = newVal ?? ""; // 开关兜底默认值：0
|
||||
const val = newVal; // 移除兜底空值，保留原始值
|
||||
switch (props.type) {
|
||||
// 开关组件（替代原单选框）：后端1/0 → 前端"是"/"否"
|
||||
// 开关组件（替代原单选框）：后端1/0 → 前端"1"/"0"
|
||||
case "0":
|
||||
innerValue.value = (val === 1 || val === "1" || val === true) ? "1" : "0";
|
||||
break;
|
||||
|
||||
// 下拉框/字典单选：直接绑定value（zddh）
|
||||
case "1":
|
||||
case "2":
|
||||
innerValue.value = String(val); // 强制字符串，匹配选项value类型
|
||||
innerValue.value = val === null || val === undefined ? "" : String(val);
|
||||
break;
|
||||
|
||||
// 字典多选：后端逗号字符串→前端数组
|
||||
case "3":
|
||||
multipleValue.value = typeof val === "string" && val
|
||||
? val.split(",").map(item => String(item))
|
||||
: [];
|
||||
innerValue.value = val;
|
||||
innerValue.value = val || "";
|
||||
break;
|
||||
// 数字框：确保是数字类型
|
||||
|
||||
// 数字框：空值处理，支持小数位数
|
||||
case "6":
|
||||
innerValue.value = !isNaN(Number(val)) ? Number(val) : 0;
|
||||
// 空值/非数字 → 空（null），否则转为数字
|
||||
if (val === null || val === undefined || val === "" || isNaN(Number(val))) {
|
||||
innerValue.value = null;
|
||||
} else {
|
||||
innerValue.value = Number(val);
|
||||
}
|
||||
break;
|
||||
|
||||
// 日期框：后端 yyyy/mm/dd → 前端 yyyy-MM-dd
|
||||
case "7":
|
||||
innerValue.value = typeof val === "string" && val.includes("/")
|
||||
? val.replace(/\//g, "-")
|
||||
: val;
|
||||
: val || null;
|
||||
break;
|
||||
|
||||
// 时间框：后端 hh:mm → 前端 hh:mm:ss
|
||||
case "8":
|
||||
innerValue.value = typeof val === "string" && val.includes(":") && val.split(":").length === 2
|
||||
? `${val}:00`
|
||||
: val;
|
||||
: val || null;
|
||||
break;
|
||||
// 其他类型：直接赋值
|
||||
|
||||
// 其他类型：保留原始值（空值则为null）
|
||||
default:
|
||||
innerValue.value = val;
|
||||
innerValue.value = val === null || val === undefined ? "" : val;
|
||||
break;
|
||||
}
|
||||
}, { immediate: true, deep: true });
|
||||
}, {immediate: true, deep: true});
|
||||
|
||||
// ========== 同步子组件值到父组件 ==========
|
||||
watch(innerValue, (newVal) => {
|
||||
let finalVal = newVal;
|
||||
// 数字框：确保数字类型
|
||||
|
||||
// 数字框：空值提交空字符串，非空则保留数字类型
|
||||
if (props.type === "6") {
|
||||
finalVal = !isNaN(Number(newVal)) ? Number(newVal) : 0;
|
||||
finalVal = newVal === null || newVal === undefined ? "" : Number(newVal);
|
||||
}
|
||||
// 日期框：前端 yyyy-MM-dd → 后端 yyyy/mm/dd
|
||||
else if (props.type === "7" && typeof newVal === "string" && newVal.includes("-")) {
|
||||
@ -224,19 +242,21 @@ watch(innerValue, (newVal) => {
|
||||
else if (props.type === "8" && typeof newVal === "string" && newVal.includes(":")) {
|
||||
finalVal = newVal.split(":").slice(0, 2).join(":");
|
||||
}
|
||||
|
||||
emit("update:modelValue", finalVal);
|
||||
emit("change", finalVal);
|
||||
}, { deep: true });
|
||||
}, {deep: true});
|
||||
|
||||
// ========== 字典加载逻辑 ==========
|
||||
watch([() => props.type, () => props.dictData], async () => {
|
||||
dictOptions.value = [];
|
||||
// 数字框（type=6）不需要加载字典
|
||||
if (props.type === "1") {
|
||||
await parseJsonDict();
|
||||
} else if (["2", "3"].includes(props.type)) {
|
||||
await loadApiDict();
|
||||
}
|
||||
}, { immediate: true, deep: true });
|
||||
}, {immediate: true, deep: true});
|
||||
|
||||
// 解析下拉框JSON数组（type=1）
|
||||
async function parseJsonDict() {
|
||||
@ -252,7 +272,7 @@ async function parseJsonDict() {
|
||||
})).filter(item => item.label && item.value);
|
||||
} catch (error) {
|
||||
ElMessage.error(`下拉框数据解析失败：${error.message}`);
|
||||
console.error("JSON解析失败：", { raw: props.dictData, error });
|
||||
console.error("JSON解析失败：", {raw: props.dictData, error});
|
||||
}
|
||||
}
|
||||
|
||||
@ -266,7 +286,7 @@ async function loadApiDict() {
|
||||
}
|
||||
try {
|
||||
dictLoading.value = true;
|
||||
const res = await getoptionselect({ zdlb: dictType });
|
||||
const res = await getoptionselect({zdlb: dictType});
|
||||
if (res.code === 200 && Array.isArray(res.data)) {
|
||||
dictOptions.value = res.data.map(item => ({
|
||||
label: item.zdmc || item.label || "",
|
||||
@ -278,7 +298,7 @@ async function loadApiDict() {
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error("字典请求失败");
|
||||
console.error("字典API异常：", { dictType, error });
|
||||
console.error("字典API异常：", {dictType, error});
|
||||
} finally {
|
||||
dictLoading.value = false;
|
||||
}
|
||||
@ -315,13 +335,13 @@ watch(multipleValue, (newVal) => {
|
||||
innerValue.value = strVal;
|
||||
emit("update:modelValue", strVal);
|
||||
}
|
||||
}, { deep: true });
|
||||
}, {deep: true});
|
||||
|
||||
// ========== 初始化兜底 ==========
|
||||
onMounted(() => {
|
||||
// 开关组件初始值兜底
|
||||
if (props.type === "0" && !innerValue.value) {
|
||||
innerValue.value = "否"; // 默认关闭
|
||||
if (props.type === "0" && innerValue.value === null) {
|
||||
innerValue.value = "0"; // 默认关闭
|
||||
emit("update:modelValue", 0); // 后端默认值：0
|
||||
}
|
||||
// 多选值初始化
|
||||
@ -334,20 +354,24 @@ onMounted(() => {
|
||||
<style scoped>
|
||||
.dynamic-input-container {
|
||||
width: 100%;
|
||||
height: 100%; /* 关键：占满表格单元格高度 */
|
||||
display: flex;
|
||||
align-items: center; /* 开关组件垂直居中 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
justify-content: center; /* 水平居中 */
|
||||
padding: 0 2px; /* 轻微内边距，避免贴边 */
|
||||
}
|
||||
|
||||
/* 开关组件样式优化 */
|
||||
:deep(.el-switch) {
|
||||
margin: 0 auto; /* 开关水平居中 */
|
||||
}
|
||||
|
||||
/* 深度选择器强制覆盖激活颜色 */
|
||||
:deep(.custom-switch .el-switch__core) {
|
||||
/* 开启状态背景色 */
|
||||
--el-switch-on-color: #13ce66 !important;
|
||||
/* 关闭状态背景色（可选） */
|
||||
--el-switch-off-color: #ff4949 !important;
|
||||
--el-switch-off-color: #C3C3C3 !important;
|
||||
}
|
||||
|
||||
/* 兼容旧版Element Plus（可选） */
|
||||
@ -355,6 +379,7 @@ onMounted(() => {
|
||||
background-color: #13ce66 !important;
|
||||
border-color: #13ce66 !important;
|
||||
}
|
||||
|
||||
:deep(.el-radio-group) {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
@ -368,4 +393,18 @@ onMounted(() => {
|
||||
:deep(.el-time-picker--small) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 数字输入框空值样式优化 */
|
||||
:deep(.el-input-number--small) {
|
||||
.el-input__inner {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 空值时占位符样式 */
|
||||
|
||||
.el-input__placeholder {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user