代码提交
This commit is contained in:
jiang
parent
4709cb472f
commit
beb2f8cc1a
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-row :gutter="20">
|
||||
<el-row :gutter="20" style="height: 100%;background-color: #FFFFFF">
|
||||
<!--公司数据-->
|
||||
<el-col :span="4" :xs="24">
|
||||
<el-col :span="5" :xs="24" style=";height: 100%;margin-top: 10px">
|
||||
<div class="head-container">
|
||||
<el-input v-model="deptName" placeholder="请输入公司名称" clearable size="small" prefix-icon="el-icon-search"
|
||||
style="margin-bottom: 20px"
|
||||
|
|
@ -16,21 +16,81 @@
|
|||
</div>
|
||||
</el-col>
|
||||
<!--装备数据-->
|
||||
<el-col :span="20" :xs="24">
|
||||
<el-col :span="19" :xs="24" style="background-color: #FFFFFF;height: 100%;margin-top: 10px">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="类目" prop="equipmenttype">
|
||||
<el-input v-model="queryParams.equipmenttype" placeholder="请输入类目" clearable style="width: 240px"
|
||||
@keyup.enter.native="handleQuery"
|
||||
label-width="70px">
|
||||
<el-form-item label="分类" prop="jijuType">
|
||||
<el-select
|
||||
v-model="queryParams.jijuType"
|
||||
placeholder="请选择分类"
|
||||
clearable
|
||||
@change="handleDevTypeChange"
|
||||
style="width: 200px"
|
||||
>
|
||||
<el-option label="装备" value="1"/>
|
||||
<el-option label="工具" value="2"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 名称查询 -->
|
||||
<el-form-item label="名称" prop="equipmenttype">
|
||||
<el-input
|
||||
v-model="queryParams.equipmenttype"
|
||||
maxlength="20"
|
||||
placeholder="请输入名称"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="equipmentName">
|
||||
<el-input v-model="queryParams.equipmentName" placeholder="请输入名称" clearable style="width: 240px"
|
||||
@keyup.enter.native="handleQuery"
|
||||
|
||||
<el-form-item label="配置" prop="configStatus">
|
||||
<el-select
|
||||
v-model="queryParams.configStatus"
|
||||
placeholder="请选择配置"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
>
|
||||
<el-option label="已配置" value="已配置"/>
|
||||
<el-option label="未配置" value="未配置"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 动态显示：装备类目级联选择器 -->
|
||||
<el-form-item
|
||||
v-if="queryParams.jijuType === '1'"
|
||||
label="类目"
|
||||
|
||||
prop="equipmentName"
|
||||
>
|
||||
<el-cascader
|
||||
v-model="equipmentName"
|
||||
:options="processedTreeData"
|
||||
:props="cascaderProps"
|
||||
placeholder="请选择装备类目"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
filterable
|
||||
@change="handleCategoryChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 动态显示：工具类目级联选择器 -->
|
||||
<el-form-item
|
||||
v-if="queryParams.jijuType === '2'"
|
||||
label="类目"
|
||||
prop="equipmentName"
|
||||
>
|
||||
<el-cascader
|
||||
v-model="equipmentName"
|
||||
:options="toolTreeData"
|
||||
:props="toolCascaderProps"
|
||||
placeholder="请选择工具类目"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
filterable
|
||||
@change="handleToolCategoryChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
|
|
@ -51,30 +111,25 @@
|
|||
:data="userList"
|
||||
@row-dblclick="handleRowDblClick"
|
||||
:row-class-name="getRowClassName"
|
||||
height="696"
|
||||
height="650"
|
||||
>
|
||||
<el-table-column label="类目" align="center" key="equipmentName" prop="equipmentName"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column label="名称" align="center" key="equipmenttype" prop="equipmenttype"/>
|
||||
<el-table-column label="基本配置" align="center" prop="configStatus"/>
|
||||
<el-table-column label="分类" align="center" width="130">
|
||||
<el-table-column label="基本配置" align="center" prop="configStatus" width="130">
|
||||
<template #default="scope">
|
||||
<div class="type-tag-wrapper">
|
||||
<span
|
||||
:class="[
|
||||
'type-tag',
|
||||
'type-tag-modern',
|
||||
scope.row.jijuType === '1' ? 'type-equipment-modern' : 'type-tool-modern'
|
||||
]"
|
||||
>
|
||||
<i :class="scope.row.jijuType === '1' ? 'el-icon-suitcase' : 'el-icon-tools'" class="tag-icon"></i>
|
||||
{{ scope.row.jijuType === '1' ? '装备' : '工具' }}
|
||||
</span>
|
||||
</div>
|
||||
<el-tag v-if="scope.row.configStatus === '已配置'" type="success" size="mini">已配置</el-tag>
|
||||
<el-tag v-if="scope.row.configStatus === '未配置'" type="warning" size="mini">未配置</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<el-table-column label="分类" align="center" width="130">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.jijuType === '1'" size="mini">装备</el-tag>
|
||||
<el-tag v-if="scope.row.jijuType === '2'" size="mini">工具</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="130">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
|
|
@ -88,7 +143,7 @@
|
|||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination :total="total" :page.sync="queryParams.pageNum"
|
||||
<pagination :total="total" :page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize" @pagination="getList"
|
||||
/>
|
||||
</el-col>
|
||||
|
|
@ -101,22 +156,22 @@
|
|||
width="900px"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<!-- 新增装备名称显示区域 -->
|
||||
<div class="equipment-title">
|
||||
<span class="title-label">装备名称：</span>
|
||||
<span class="title-value">{{ currentEquipmentName }}</span>
|
||||
</div>
|
||||
<!-- 新增装备名称显示区域 -->
|
||||
<div class="equipment-title">
|
||||
<span class="title-label">装备名称：</span>
|
||||
<span class="title-value">{{ currentEquipmentName }}</span>
|
||||
</div>
|
||||
<el-form ref="configForm" :model="configForm" :rules="configRules">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addConfig" style="margin-bottom:10px;">
|
||||
添加配置
|
||||
</el-button>
|
||||
<div class="config-table-header">
|
||||
<span class="config-th" style="width:180px;">配置类型</span>
|
||||
<span class="config-th" style="width:180px;">基本配置标准(台/套)</span>
|
||||
<span class="config-th" style="width:180px;">装备配置率</span>
|
||||
<span class="config-th" style="width:180px;">配置说明</span>
|
||||
<span class="config-th" style="width:80px;">操作</span>
|
||||
</div>
|
||||
<div class="config-table-header">
|
||||
<span class="config-th" style="width:180px;">配置类型</span>
|
||||
<span class="config-th" style="width:180px;">基本配置标准(台/套)</span>
|
||||
<span class="config-th" style="width:180px;">装备配置率</span>
|
||||
<span class="config-th" style="width:180px;">配置说明</span>
|
||||
<span class="config-th" style="width:80px;">操作</span>
|
||||
</div>
|
||||
<div v-for="(item, index) in configForm.configs" :key="index"
|
||||
style="border:1px solid #eee;padding:10px;margin-bottom:10px;"
|
||||
>
|
||||
|
|
@ -159,6 +214,8 @@
|
|||
|
||||
<script>
|
||||
import { listUser, updateEquipmentConfig, deptTreeSelect, selectConfigList } from '@/api/system/equipment'
|
||||
import { getEquipmentTreeAPI } from '@/api/EquipmentConfig'
|
||||
import { getTreeSelectApi } from '@/api/toolsManage'
|
||||
|
||||
export default {
|
||||
name: 'User',
|
||||
|
|
@ -176,9 +233,12 @@ export default {
|
|||
}
|
||||
|
||||
return {
|
||||
processedTreeData: [], // 装备分类树
|
||||
toolTreeData: [], // 工具分类树
|
||||
// 新增两个数据项
|
||||
dialogTitle: "编辑基本配置", // 弹窗标题
|
||||
currentEquipmentName: "", // 当前编辑的装备名称
|
||||
dialogTitle: '编辑基本配置', // 弹窗标题
|
||||
currentEquipmentName: '', // 当前编辑的装备名称
|
||||
equipmentName: '',
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
|
|
@ -195,13 +255,27 @@ export default {
|
|||
currentDeptId: null,
|
||||
// 当前选择的部门名称
|
||||
currentDeptName: '',
|
||||
// 装备分类级联配置
|
||||
cascaderProps: {
|
||||
value: 'id',
|
||||
label: 'name',
|
||||
children: 'children'
|
||||
},
|
||||
// 工具分类级联配置（匹配返回字段：typeId/typeName）
|
||||
toolCascaderProps: {
|
||||
value: 'typeId',
|
||||
label: 'typeName',
|
||||
children: 'children'
|
||||
},
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
deptId: undefined,
|
||||
equipmentName: undefined,
|
||||
equipmenttype: undefined
|
||||
deptId: '',
|
||||
equipmentName: '',
|
||||
equipmenttype: '',
|
||||
configStatus: ''
|
||||
|
||||
},
|
||||
// 弹窗相关
|
||||
inputDialogVisible: false,
|
||||
|
|
@ -253,6 +327,8 @@ export default {
|
|||
created() {
|
||||
this.getList()
|
||||
this.getDeptTree()
|
||||
this.getEquipmentTree() // 初始化加载装备分类树
|
||||
this.getToolTree() // 初始化加载工具分类树
|
||||
},
|
||||
methods: {
|
||||
addConfig() {
|
||||
|
|
@ -263,19 +339,150 @@ export default {
|
|||
configurationDescription: ''
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 分类切换事件（装备/工具）
|
||||
*/
|
||||
handleDevTypeChange(val) {
|
||||
this.queryParams.equipmentName = ''
|
||||
this.equipmentName = ''
|
||||
},
|
||||
/**
|
||||
* 装备类目选择变化
|
||||
*/
|
||||
handleCategoryChange(value) {
|
||||
if (value && value.length > 0) {
|
||||
// 获取选中的最后一级类目名称
|
||||
let currentNode = this.findNodeInTree(this.processedTreeData, value[value.length - 1])
|
||||
this.queryParams.equipmentName = currentNode ? currentNode.name : ''
|
||||
} else {
|
||||
this.queryParams.equipmentName = ''
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 在装备分类树中查找节点
|
||||
*/
|
||||
findNodeInTree(tree, nodeId) {
|
||||
for (let node of tree) {
|
||||
if (node.id === nodeId) {
|
||||
return node
|
||||
}
|
||||
if (node.children && node.children.length > 0) {
|
||||
let found = this.findNodeInTree(node.children, nodeId)
|
||||
if (found) return found
|
||||
}
|
||||
}
|
||||
return null
|
||||
},
|
||||
/**
|
||||
* 在工具分类树中查找节点
|
||||
*/
|
||||
findNodeInToolTree(tree, nodeId) {
|
||||
for (let node of tree) {
|
||||
if (node.typeId === nodeId) {
|
||||
return node
|
||||
}
|
||||
if (node.children && node.children.length > 0) {
|
||||
let found = this.findNodeInToolTree(node.children, nodeId)
|
||||
if (found) return found
|
||||
}
|
||||
}
|
||||
return null
|
||||
},
|
||||
/**
|
||||
* 工具类目选择变化
|
||||
*/
|
||||
handleToolCategoryChange(value) {
|
||||
if (value && value.length > 0) {
|
||||
// 获取选中的最后一级类目名称
|
||||
let currentNode = this.findNodeInToolTree(this.toolTreeData, value[value.length - 1])
|
||||
this.queryParams.equipmentName = currentNode ? currentNode.typeName : ''
|
||||
} else {
|
||||
this.queryParams.equipmentName = ''
|
||||
}
|
||||
},
|
||||
|
||||
async getEquipmentTree() {
|
||||
try {
|
||||
const res = await getEquipmentTreeAPI()
|
||||
if (res.code === 200) {
|
||||
const rawTreeData = this.processTreeData(res.data)
|
||||
this.processedTreeData = this.processChildrenData(rawTreeData)
|
||||
} else {
|
||||
this.$message.error(res.msg || '获取装备分类失败')
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error('获取分类数据失败：' + (error.message || '未知错误'))
|
||||
}
|
||||
},
|
||||
// 处理分类树数据（适配六级分类）
|
||||
processTreeData(data) {
|
||||
return Array.isArray(data) ? data : data ? [data] : []
|
||||
},
|
||||
|
||||
// 递归处理装备分类节点（限制六级，补充level字段）
|
||||
processChildrenData(data, currentLevel = 1) {
|
||||
if (currentLevel > 5) return
|
||||
return data.map(item => {
|
||||
const nodeId = item.typeId ? Number(item.typeId) : item.id ? Number(item.id) : ''
|
||||
const processedItem = {
|
||||
id: nodeId,
|
||||
name: item.typeName || item.name,
|
||||
level: currentLevel,
|
||||
parentId: item.parentId ? Number(item.parentId) : null,
|
||||
...item
|
||||
}
|
||||
// 六级以下不再递归
|
||||
if (item.children && item.children.length > 0 && currentLevel < 6) {
|
||||
processedItem.children = this.processChildrenData(item.children, currentLevel + 1)
|
||||
} else {
|
||||
delete processedItem.children
|
||||
}
|
||||
return processedItem
|
||||
})
|
||||
},
|
||||
|
||||
// 递归处理工具分类节点（限制六级）
|
||||
processToolTreeData(data, currentLevel = 1) {
|
||||
if (currentLevel > 3) return
|
||||
return data.map(item => {
|
||||
const processedItem = { ...item }
|
||||
// 六级以下递归处理子节点
|
||||
if (item.children && item.children.length > 0 && currentLevel < 6) {
|
||||
processedItem.children = this.processToolTreeData(item.children, currentLevel + 1)
|
||||
} else {
|
||||
delete processedItem.children // 超过六级移除子节点
|
||||
}
|
||||
return processedItem
|
||||
})
|
||||
},
|
||||
|
||||
// 获取工具分类树数据（适配返回字段，限制最多6级）
|
||||
async getToolTree() {
|
||||
try {
|
||||
const res = await getTreeSelectApi()
|
||||
if (res.code === 200) {
|
||||
let rawData = res.data || []
|
||||
this.toolTreeData = this.processToolTreeData(rawData)
|
||||
} else {
|
||||
this.$message.error(res.msg || '获取工具分类失败')
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error('获取工具分类数据失败：' + (error.message || '未知错误'))
|
||||
}
|
||||
},
|
||||
removeConfig(index) {
|
||||
this.configForm.configs.splice(index, 1)
|
||||
},
|
||||
/** 双击行事件 */
|
||||
handleRowDblClick(row) {
|
||||
// 在打开弹窗前设置当前装备名称
|
||||
this.currentEquipmentName = row.equipmentName;
|
||||
this.currentEquipmentName = row.equipmentName
|
||||
// 更新弹窗标题
|
||||
this.dialogTitle = `编辑基本配置 - ${row.equipmentName}`;
|
||||
this.configForm.deptId = this.currentDeptId;
|
||||
this.configForm.equipmentId = row.equipmentId;
|
||||
this.configForm.jijuType = row.jijuType;
|
||||
this.configForm.configs =[]
|
||||
this.dialogTitle = `编辑基本配置 - ${row.equipmentName}`
|
||||
this.configForm.deptId = this.currentDeptId
|
||||
this.configForm.equipmentId = row.equipmentId
|
||||
this.configForm.jijuType = row.jijuType
|
||||
this.configForm.configs = []
|
||||
// 检查是否选择了部门
|
||||
if (!this.currentDeptId) {
|
||||
this.$message.warning('请先在左侧选择公司')
|
||||
|
|
@ -290,8 +497,8 @@ export default {
|
|||
}).then(res => {
|
||||
if (res.code === 200) {
|
||||
res.data.forEach(item => {
|
||||
this.configForm.configs.push(item);
|
||||
});
|
||||
this.configForm.configs.push(item)
|
||||
})
|
||||
}
|
||||
})
|
||||
this.inputDialogVisible = true
|
||||
|
|
@ -431,7 +638,309 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss" scoped>
|
||||
.app-container {
|
||||
background-color: #f5f7fa;
|
||||
height: calc(100vh - 84px);
|
||||
}
|
||||
|
||||
/* 搜索区域收起/展开按钮 */
|
||||
.search-toggle-btn {
|
||||
color: #409eff;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
/* 固定操作栏样式 */
|
||||
.sticky-bar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 字段设置弹窗样式 */
|
||||
.field-setting-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.field-setting-group .el-checkbox {
|
||||
width: calc(50% - 10px);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* 原有样式保持不变 */
|
||||
.page-header {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
color: #1f2d3d;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.page-desc {
|
||||
font-size: 14px;
|
||||
color: #8392a5;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-container-btn {
|
||||
/* 使用 clip-path 创建三角形形状 */
|
||||
clip-path: polygon(0 0, 100% 50%, 0 100%);
|
||||
width: 40px;
|
||||
height: 70px;
|
||||
background-color: red;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 14px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 15px;
|
||||
color: #1f2d3d;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.table-count {
|
||||
font-size: 12px;
|
||||
color: #8392a5;
|
||||
}
|
||||
|
||||
.tree-container {
|
||||
height: calc(100vh - 174px);
|
||||
overflow: auto;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.tree-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.query-buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.query-btn {
|
||||
background-color: #409eff;
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
background-color: #f5f7fa;
|
||||
color: #606266;
|
||||
border-color: #dcdfe6;
|
||||
}
|
||||
|
||||
.export-btn {
|
||||
background-color: #67c23a;
|
||||
border-color: #67c23a;
|
||||
}
|
||||
|
||||
.status-operation-bar {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||||
padding: 15px 20px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-stats {
|
||||
display: flex;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: #606266;
|
||||
margin-right: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #1f2d3d;
|
||||
}
|
||||
|
||||
.operation-buttons {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.operation-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.opt-btn {
|
||||
padding: 5px 8px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
color: #00a288;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
color: #00a288;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
color: #00a288;
|
||||
}
|
||||
|
||||
/* 弹窗表单样式 */
|
||||
.detail-form {
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
/* 滚动条美化 */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #a8a8a8;
|
||||
}
|
||||
|
||||
/* 特征值输入框和删除按钮容器 */
|
||||
.feature-value-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.delete-feature-btn {
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.col-center {
|
||||
display: flex;
|
||||
align-items: center; /* 垂直居中 */
|
||||
/* 如果需要整列高度充满父容器，可添加：height: 100%; */
|
||||
}
|
||||
|
||||
.demo-table-expand {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.demo-table-expand label {
|
||||
width: 90px;
|
||||
color: #99a9bf;
|
||||
}
|
||||
|
||||
|
||||
.card-container {
|
||||
position: relative; /* 新增：为按钮绝对定位提供参考 */
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
/* 修改：将按钮定位在右侧中间 */
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: white;
|
||||
color: #606266;
|
||||
padding: 2px;
|
||||
z-index: 10; /* 确保按钮在最上层 */
|
||||
}
|
||||
|
||||
/* 优化按钮悬停效果 */
|
||||
.collapse-btn:hover {
|
||||
background: white;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
/* 折叠状态的样式和过渡动画 */
|
||||
.tree-column {
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
::v-deep .el-table {
|
||||
// 启用斑马纹
|
||||
&.el-table--striped .el-table__body {
|
||||
tr.el-table__row--striped td {
|
||||
background-color: #f6fbfa !important; // 浅紫色
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__header {
|
||||
background: #e9f0ee;
|
||||
|
||||
th {
|
||||
background: #e9f0ee !important;
|
||||
color: #606266;
|
||||
font-weight: 600;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
&.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
|
||||
background-color: #ccf1e9 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 修复被动事件监听器警告 */
|
||||
.el-dialog__wrapper {
|
||||
touch-action: none;
|
||||
|
|
@ -483,6 +992,7 @@ export default {
|
|||
font-size: 14px;
|
||||
border: 1px dashed #dcdfe6;
|
||||
}
|
||||
|
||||
/* 配置弹窗表头样式 */
|
||||
.config-table-header {
|
||||
display: flex;
|
||||
|
|
@ -494,17 +1004,20 @@ export default {
|
|||
padding: 8px 0 8px 8px;
|
||||
border: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.config-th {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.config-table-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* 新增装备名称显示样式 */
|
||||
.equipment-title {
|
||||
margin-bottom: 20px;
|
||||
|
|
@ -524,6 +1037,7 @@ export default {
|
|||
color: #1a73e8;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.type-tag-modern {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
Loading…
Reference in New Issue