Compare commits

..

2 Commits

Author SHA1 Message Date
tangw
8ee0a90a5c Merge branch 'main' of http://47.97.125.165:8902/jiangs/lis8.0-vue3 2025-12-09 18:07:34 +08:00
tangw
ea9d79144a 系统全局设置界面 2025-12-09 18:07:12 +08:00
3 changed files with 791 additions and 46 deletions

View 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}
});
}

View 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>

View File

@ -2,16 +2,14 @@
<div class="dynamic-input-container">
<!-- 1. 开关组件(替代原单选框 type=0:是/否 → 开启/关闭) -->
<el-switch
active-text="开"
inactive-text="关"
class="custom-switch"
v-if="type === '0'"
v-model="innerValue"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="1"
inactive-value="0"
@change="handleSwitchChange"
inactive-value="0"
@change="handleSwitchChange"
/>
<!-- 2. 下拉框(1):直接绑定value -->
@ -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>