代码提交

src/views/system/equipment/index.vue

@@ -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"
+                 label-width="70px">
-        >
+          <el-form-item label="分类" prop="jijuType">
-          <el-form-item label="类目" prop="equipmenttype">
+            <el-select
-            <el-input v-model="queryParams.equipmenttype" placeholder="请输入类目" clearable style="width: 240px"
+              v-model="queryParams.jijuType"
-                      @keyup.enter.native="handleQuery"
+              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"
+          <el-form-item label="配置" prop="configStatus">
-                      @keyup.enter.native="handleQuery"
+            <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" prop="configStatus" width="130">
-          <el-table-column label="分类" align="center" width="130">
             <template #default="scope">
-              <div class="type-tag-wrapper">
+              <el-tag v-if="scope.row.configStatus === '已配置'" type="success" size="mini">已配置</el-tag>
-                <span
+              <el-tag v-if="scope.row.configStatus === '未配置'" type="warning" size="mini">未配置</el-tag>
-                  :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>
             </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">
+      <div class="equipment-title">
-          <span class="title-label">装备名称：</span>
+        <span class="title-label">装备名称：</span>
-          <span class="title-value">{{ currentEquipmentName }}</span>
+        <span class="title-value">{{ currentEquipmentName }}</span>
-        </div>
+      </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">
+        <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: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>
+          <span class="config-th" style="width:80px;">操作</span>
-                </div>
+        </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: "编辑基本配置", // 弹窗标题
+      dialogTitle: '编辑基本配置', // 弹窗标题
-      currentEquipmentName: "",    // 当前编辑的装备名称
+      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,
+        deptId: '',
-        equipmentName: undefined,
+        equipmentName: '',
-        equipmenttype: undefined
+        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.dialogTitle = `编辑基本配置 - ${row.equipmentName}`
-      this.configForm.deptId = this.currentDeptId;
+      this.configForm.deptId = this.currentDeptId
-      this.configForm.equipmentId = row.equipmentId;
+      this.configForm.equipmentId = row.equipmentId
-       this.configForm.jijuType = row.jijuType;
+      this.configForm.jijuType = row.jijuType
-      this.configForm.configs =[]
+      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;