From 5c9639b2b37efaaf2bbdf9f5400efb5d8f4c8ad0 Mon Sep 17 00:00:00 2001
From: itcast <hello@itcast.cn>
Date: Tue, 14 Oct 2025 17:28:57 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A3=85=E5=A4=87=E7=B1=BB=E5=9E=8B=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E9=A1=B5=E9=9D=A2=EF=BC=8C=E7=89=B9=E5=BE=81=E5=80=BC?=
 =?UTF-8?q?=E6=9C=AA=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                            |    2 +-
 src/api/EquipmentLedger/index.js        |    1 +
 src/views/EquipmentTypeConfig/index.vue | 1136 ++++++++++++++++++++---
 src/views/system/role/index.vue         |  477 ++++++----
 4 files changed, 1323 insertions(+), 293 deletions(-)

diff --git a/package.json b/package.json
index a0a97aa6..7f0ff02f 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
     "url": "http://192.168.0.56:3000/bonus/Bonus-Cloud.git"
   },
   "dependencies": {
-    "@riophae/vue-treeselect": "0.4.0",
+    "@riophae/vue-treeselect": "^0.4.0",
     "axios": "0.24.0",
     "china-area-data": "^5.0.1",
     "clipboard": "2.0.8",
diff --git a/src/api/EquipmentLedger/index.js b/src/api/EquipmentLedger/index.js
index a2aa3155..dd5ea96a 100644
--- a/src/api/EquipmentLedger/index.js
+++ b/src/api/EquipmentLedger/index.js
@@ -49,4 +49,5 @@ export const delDevice = (ids) => {
     url: '/material-mall/device/delDevice/'+ids,
     method: 'post',
   })
+
 }
diff --git a/src/views/EquipmentTypeConfig/index.vue b/src/views/EquipmentTypeConfig/index.vue
index 1d0c5f75..209e91c7 100644
--- a/src/views/EquipmentTypeConfig/index.vue
+++ b/src/views/EquipmentTypeConfig/index.vue
@@ -1,136 +1,1028 @@
 <template>
-    <div class="app-container">
-        <el-row>
-            <el-col :span="4">
-                <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
-            </el-col>
-            <el-col :span="20">
-                <el-form ref="queryForm" size="small" label-width="auto" :model="queryParams">
-                    <el-row :gutter="10" style="display: flex; justify-content: space-between">
-                        <el-col>
-                            <el-form-item label="装备范围" prop="deptName">
-                                <el-input v-model="queryParams.deptName" placeholder="请输入关键字" clearable />
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                </el-form>
+  <div class="app-container">
+    <el-row :gutter="24" class="main-content" type="justify">
+      <!-- 左侧树形结构 -->
+      <el-col :span="collapsed ? 1 : 5" class="tree-column">
+        <!-- 树的容器，仅在未折叠时显示 -->
+        <div class="card-container" v-if="!collapsed">
+          <div class="card-header">
+            <span class="card-title">装备分类</span>
+          </div>
+          <el-tree
+            v-if="!collapsed"
+            :data="treeData"
+            :props="defaultProps"
+            :indent="6"
+            @node-click="handleNodeClick"
+            default-expand-all
+            class="tree-container"
+            :loading="treeLoading"
+            :key="collapsed"
+          />
+        </div>
 
-                <el-table :data="tableData" style="width: 100%">
-                    <el-table-column align="center" show-overflow-tooltip type="index" label="序号" width="50" />
-                    <el-table-column align="center" show-overflow-tooltip prop="date" label="所属专业" width="180" />
-                    <el-table-column align="center" show-overflow-tooltip prop="name" label="主工序" width="180" />
-                    <el-table-column align="center" show-overflow-tooltip prop="address" label="子工序" />
-                    <el-table-column align="center" show-overflow-tooltip prop="address" label="序列" />
-                    <el-table-column align="center" show-overflow-tooltip prop="address" label="装备名称" />
-                    <el-table-column align="center" show-overflow-tooltip prop="address" label="规格型号" />
-                    <el-table-column align="center" show-overflow-tooltip prop="address" label="操作" />
-                </el-table>
-            </el-col>
+        <!-- 折叠/展开控制按钮 -->
+        <div style="position: relative; width:15px; height: calc(100vh - 130px); margin-left: 5px;">
+          <el-button
+            size="mini"
+            @click="toggleCollapse"
+            class="collapse-btn"
+            :icon="collapsed ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left'"
+          />
+        </div>
+      </el-col>
+
+      <!-- 右侧内容区域 -->
+      <el-col :span="collapsed ? 23 : 19">
+        <!-- 新增按钮区域 -->
+        <el-row style="margin-bottom: 10px;">
+          <el-col :span="24" style="text-align: right;">
+            <el-button type="primary" @click="handleAdd">新增</el-button>
+          </el-col>
         </el-row>
-    </div>
+
+        <el-table
+          :data="tableData"
+          style="width: 100%"
+          :loading="tableLoading"
+        >
+          <el-table-column align="center" show-overflow-tooltip type="index" label="序号" width="50" />
+
+          <el-table-column align="center" show-overflow-tooltip prop="level1" label="所属专业" width="180" />
+          <el-table-column align="center" show-overflow-tooltip prop="level2" label="施工主工序" width="180" />
+          <el-table-column align="center" show-overflow-tooltip prop="level3" label="施工子工序" min-width="180" />
+          <el-table-column align="center" show-overflow-tooltip prop="level4" label="装备大类" min-width="200"/>
+          <el-table-column align="center" show-overflow-tooltip prop="level5" label="装备小类" min-width="200"/>
+          <el-table-column align="center" show-overflow-tooltip prop="level6" label="装备名称" min-width="200" />
+          <el-table-column align="center" show-overflow-tooltip prop="createBy" label="创建人" min-width="200" />
+          <el-table-column align="center" show-overflow-tooltip prop="createTime" label="创建时间" min-width="200" />
+          <el-table-column align="center" show-overflow-tooltip prop="updateBy" label="更新人" min-width="200" />
+          <el-table-column align="center" show-overflow-tooltip prop="updateTime" label="更新时间" min-width="200" />
+
+          <el-table-column align="center" fixed="right" min-width="200" label="操作">
+            <template slot-scope="scope">
+              <el-button type="text" size="mini" @click="onHandlePreview(scope.row)">
+                <i class="el-icon-view"></i> 查看
+              </el-button>
+              <el-button type="text" size="mini" @click="onHandleEdit(scope.row)">
+                <i class="el-icon-edit"></i> 编辑
+              </el-button>
+              <el-button type="text" size="mini" @click="onHandleDelete(scope.row)">
+                <i class="el-icon-delete"></i> 删除
+              </el-button>
+              <el-button type="text" size="mini" @click="onHandleConfig(scope.row)">
+                <i class="el-icon-setting"></i> 配置特征项
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getDeviceList"
+          layout="total, sizes, prev, pager, next, jumper"
+        />
+      </el-col>
+    </el-row>
+
+    <!-- 查看弹窗 -->
+    <el-dialog
+      :title="`查看装备 - ${formData.deviceName || ''}`"
+      :visible.sync="previewDialogVisible"
+      width="600px"
+      :close-on-click-modal="false"
+      :before-close="handlePreviewClose"
+    >
+      <el-form
+        ref="previewForm"
+        :model="formData"
+        label-width="100px"
+        size="small"
+        class="detail-form"
+        disabled
+      >
+        <el-row :gutter="20">
+          <el-col :span="24" v-if="formData.level1">
+            <el-form-item label="所属专业">
+              <el-input v-model="formData.level1" placeholder="无"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24" v-if="formData.level2">
+            <el-form-item label="施工主工序">
+              <el-input v-model="formData.level2" placeholder="无"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24" v-if="formData.level3">
+            <el-form-item label="施工子工序">
+              <el-input v-model="formData.level3" placeholder="无"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24" v-if="formData.level4">
+            <el-form-item label="装备大类">
+              <el-input v-model="formData.level4" placeholder="无"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24" v-if="formData.level5">
+            <el-form-item label="装备小类">
+              <el-input v-model="formData.level5" placeholder="无"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24" v-if="formData.level6">
+            <el-form-item label="装备名称">
+              <el-input v-model="formData.level6" placeholder="无"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="handlePreviewClose">关闭</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 编辑弹窗 -->
+    <el-dialog
+      :title="`编辑装备 - ${formData.deviceName || ''}`"
+      :visible.sync="editDialogVisible"
+      width="70%"
+      :close-on-click-modal="false"
+      :before-close="handleEditClose"
+    >
+      <el-form
+        ref="editForm"
+        :model="formData"
+        :rules="editFormRules"
+        label-width="120px"
+        size="small"
+        class="detail-form"
+      >
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="装备分类" prop="categoryPath">
+              <el-cascader
+                v-model="formData.categoryPath"
+                :options="processedTreeData"
+                :props="cascaderProps"
+                :key="'edit-cascader-' + formData.id"
+                placeholder="请选择装备分类（最多六级）"
+                clearable
+                style="width: 100%;"
+                @change="handleEditCategoryChange"
+                filterable
+                popper-class="six-level-cascader"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="装备名称" prop="deviceName">
+              <el-input
+                v-model="formData.deviceName"
+                placeholder="请输入装备名称"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="handleEditClose">取消</el-button>
+        <el-button type="primary" @click="submitEditForm">保存</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 新增弹窗 -->
+    <el-dialog
+      :title="'新增装备'"
+      :visible.sync="addDialogVisible"
+      width="70%"
+      :close-on-click-modal="false"
+      :before-close="handleAddClose"
+    >
+      <el-form
+        ref="addForm"
+        :model="addFormData"
+        :rules="addFormRules"
+        label-width="120px"
+        size="small"
+        class="detail-form"
+      >
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="装备分类" prop="categoryPath">
+              <el-cascader
+                v-model="addFormData.categoryPath"
+                :options="processedTreeData"
+                :props="cascaderProps"
+                placeholder="请选择装备分类（最多六级）"
+                clearable
+                style="width: 100%;"
+                @change="handleCategoryChange"
+                filterable
+                popper-class="six-level-cascader"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="装备名称" prop="deviceName">
+              <el-input
+                v-model="addFormData.deviceName"
+                placeholder="请输入装备名称"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="handleAddClose">取消</el-button>
+        <el-button type="primary" @click="submitAddForm">保存</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- ==================== 新增：配置特征项弹窗 ==================== -->
+    <el-dialog
+      :title="`配置特征项 - ${currentEquipmentName || '未选择装备'}`"
+      :visible.sync="configDialogVisible"
+      width="600px"
+      :close-on-click-modal="false"
+      :before-close="handleConfigClose"
+    >
+      <el-form
+        ref="configForm"
+        :model="configForm"
+        :rules="configFormRules"
+        label-width="120px"
+        size="small"
+      >
+        <el-form-item label="已选装备">
+          <!-- 1. 通过 readonly 实现“不可修改但可选中复制”（推荐，更友好）
+               2. 添加 background="#f5f5f5" 区分不可编辑状态，避免用户误解 -->
+          <el-input
+            v-model="currentEquipmentName"
+            placeholder="无"
+            readonly
+            style="background: #f5f5f5;"
+          />
+        </el-form-item>
+        <el-form-item label="选择特征项" prop="featureIds">
+          <el-select
+            v-model="configForm.featureIds"
+            multiple
+            filterable
+            placeholder="请选择特征项（可多选）"
+            style="width: 100%;"
+          >
+            <el-option
+              v-for="item in featureItemList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="handleConfigClose">取消</el-button>
+        <el-button type="primary" @click="submitConfigForm">保存配置</el-button>
+      </div>
+    </el-dialog>
+    <!-- ============================================================ -->
+
+  </div>
 </template>
 
 <script>
+import {
+  getEquipmentTreeAPI,
+  getEquipmentListAPI,
+  getEquipmentDetailAPI,
+  addEquipmentAPI,
+  updateEquipmentAPI,
+  deleteEquipmentAPI,
+  getEquipmentCascaderAPI,
+  addEquipmentTypeAPI,
+  getEquipmentTypeDetailAPI,
+  updateEquipmentTypeAPI,
+  deleteEquipmentTypeAPI,
+
+} from '@/api/EquipmentConfig/index.js'
+
+import {
+  getPropertyList,        // 对应后端 /equipment/property/list（获取所有特征项）
+  getPropertiesByTypeId,  // 对应后端 /equipment/property/type/{typeId}（获取装备已配置特征项）
+  updateProperty          // 对应后端 /equipment/property（用于保存特征项配置）
+} from '@/api/EquipmentConfig/property.js'
+
 export default {
-    data() {
-        return {
-            queryParams: {
-                deptName: undefined,
-                status: undefined,
-            },
-            data: [
-                {
-                    label: '一级 1',
-                    children: [
-                        {
-                            label: '二级 1-1',
-                            children: [
-                                {
-                                    label: '三级 1-1-1',
-                                },
-                            ],
-                        },
-                    ],
-                },
-                {
-                    label: '一级 2',
-                    children: [
-                        {
-                            label: '二级 2-1',
-                            children: [
-                                {
-                                    label: '三级 2-1-1',
-                                },
-                            ],
-                        },
-                        {
-                            label: '二级 2-2',
-                            children: [
-                                {
-                                    label: '三级 2-2-1',
-                                },
-                            ],
-                        },
-                    ],
-                },
-                {
-                    label: '一级 3',
-                    children: [
-                        {
-                            label: '二级 3-1',
-                            children: [
-                                {
-                                    label: '三级 3-1-1',
-                                },
-                            ],
-                        },
-                        {
-                            label: '二级 3-2',
-                            children: [
-                                {
-                                    label: '三级 3-2-1',
-                                },
-                            ],
-                        },
-                    ],
-                },
-            ],
-            defaultProps: {
-                children: 'children',
-                label: 'label',
-            },
+  data() {
+    return {
+      queryParams: {
+        deptName: undefined,
+        status: undefined,
+        typeId: undefined,
+        pageNum: 1,
+        pageSize: 10
+      },
+      treeData: [],
+      processedTreeData: [],
+      defaultProps: {
+        children: 'children',
+        label: 'name',
+      },
+      cascaderProps: {
+        value: 'id',
+        label: 'name',
+        children: 'children',
+        checkStrictly: true,
+        expandTrigger: 'click'
+      },
+      treeLoading: false,
+      collapsed: false,
+      tableData: [],
+      total: 0,
+      tableLoading: false,
+      previewDialogVisible: false,
+
+      formData: {
+        id: '',
+        categoryPath: [],
+        deviceName: '',
+      },
+
+      editFormRules: {
+        categoryPath: [
+          { required: true, message: '请选择装备分类', trigger: 'change' }
+        ],
+        deviceName: [
+          { required: true, message: '请输入装备名称', trigger: 'blur' }
+        ]
+      },
+      editDialogVisible: false,
+      addDialogVisible: false,
+      addFormData: {
+        categoryPath: [],
+        deviceName: ''
+      },
+      addFormRules: {
+        categoryPath: [
+          { required: true, message: '请选择装备分类（最多六级）', trigger: 'change' }
+        ],
+        deviceName: [
+          { required: true, message: '请输入装备名称', trigger: 'blur' }
+        ]
+      },
+      selectedParentNode: null,
+      levelMapping: new Map(),
+
+      // ==================== 新增：配置特征项相关数据 ====================
+      configDialogVisible: false,      // 配置弹窗的显示状态
+      currentEquipmentId: '',          // 当前正在配置的装备ID
+      currentEquipmentName: '',        // 当前正在配置的装备名称
+      featureItemList: [],             // 所有可选的特征项列表
+      featureLoading: false,           // 新增：特征项加载中状态
+      configForm: {
+        featureIds: []                 // 用于表单绑定的，选中的特征项ID数组
+      },
+      configFormRules: {
+        featureIds: [
+          { required: true, message: '请至少选择一个特征项', trigger: 'change' }
+        ]
+      }
+      // ===============================================================
+    }
+  },
+  methods: {
+    processTreeData(data) {
+      return Array.isArray(data) ? data : (data ? [data] : []);
+    },
+
+    processChildrenData(data, currentLevel = 1) {
+      if (currentLevel > 6) {
+        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;
+      });
     },
-    methods: {
-        handleNodeClick(data) {
-            console.log(data)
-        },
 
-        // 出库按钮
-        onHandleOut() {
-            console.log('出库按钮')
-            this.$router.push('/equipment-ledger-out')
-        },
-
-        // 入库按钮
-        onHandleIn() {
-            console.log('入库按钮')
-            this.$router.push('/equipment-ledger-store')
-        },
-
-        // 维修按钮
-        onHandleRepair() {
-            console.log('维修按钮')
-            this.$router.push('/equipment-ledger-repair')
-        },
-
-        // 退役按钮
-        onHandleRetire() {
-            console.log('退役按钮')
-            this.$router.push('/equipment-ledger-retire')
-        },
+    handleNodeClick(data, node) {
+      if (data.id === 'all') {
+        this.queryParams.typeId = undefined;
+        this.queryParams.parentId = undefined;
+      } else {
+        this.queryParams.typeId = data.id;
+        this.queryParams.parentId = data.parentId;
+      }
+      this.queryParams.pageNum = 1;
+      this.getDeviceList();
     },
+
+    handleCategoryChange(value, selectedOptions) {
+      if (value && value.length > 6) {
+        this.$message.warning('最多只能选择6级分类');
+        this.addFormData.categoryPath = value.slice(0, 6);
+        return;
+      }
+      if (selectedOptions && selectedOptions.length > 0) {
+        const lastNode = selectedOptions[selectedOptions.length - 1];
+        this.addFormData.deviceName = lastNode?.name || '';
+        this.selectedParentNode = lastNode;
+      }
+    },
+
+    handleEditCategoryChange(value, selectedOptions) {
+      if (value && value.length > 6) {
+        this.$message.warning('最多只能选择6级分类');
+        this.formData.categoryPath = value.slice(0, 6);
+        return;
+      }
+    },
+
+    getFullCategoryPath() {
+      if (!this.formData.currentCategoryInfo || !this.formData.currentCategoryInfo.fullPath) {
+        return '无分类信息';
+      }
+      const path = this.formData.currentCategoryInfo.fullPath;
+      const nonEmptyPath = path.filter(item => item && item.trim() !== '');
+      if (nonEmptyPath.length === 0) {
+        return '根分类';
+      }
+      return nonEmptyPath.join(' > ');
+    },
+
+    toggleCollapse() {
+      this.collapsed = !this.collapsed;
+    },
+
+    async getDeviceTree() {
+      try {
+        this.treeLoading = true;
+        const res = await getEquipmentTreeAPI();
+        if (res.code === 200) {
+          this.treeData = this.processTreeData(res.data);
+          this.processedTreeData = this.processTreeData(res.data);
+          this.buildLevelMapping(res.data);
+        } else {
+          this.$message.error(res.msg || '获取装备分类树失败');
+        }
+      } catch (error) {
+        this.$message.error('获取装备分类树失败：' + (error.message || '未知错误'));
+      } finally {
+        this.treeLoading = false;
+      }
+    },
+
+    buildLevelMapping(treeData) {
+      this.levelMapping.clear();
+      const buildMap = (nodes, parentPath = [], currentLevel = 1, parentId = null) => {
+        if (!nodes || !Array.isArray(nodes)) return;
+        nodes.forEach(node => {
+          const nodeId = node.typeId || node.id;
+          const nodeName = node.typeName || node.name || '';
+          const nodeLevel = node.level || currentLevel;
+          const currentPath = [...parentPath];
+          while (currentPath.length < nodeLevel - 1) {
+            currentPath.push('');
+          }
+          currentPath[nodeLevel - 1] = nodeName;
+          while (currentPath.length < 6) {
+            currentPath.push('');
+          }
+          this.levelMapping.set(nodeId, {
+            id: nodeId,
+            name: nodeName,
+            level: nodeLevel,
+            parentId: parentId,
+            fullPath: [...currentPath]
+          });
+          if (node.children && node.children.length > 0) {
+            buildMap(node.children, currentPath, nodeLevel + 1, nodeId);
+          }
+        });
+      };
+      buildMap(treeData, [], 1, null);
+    },
+
+    async getDeviceList() {
+      try {
+        this.tableLoading = true;
+        const listRes = await getEquipmentListAPI(this.queryParams);
+        if (listRes.code === 200) {
+          let rawData = [];
+          let totalCount = 0;
+          if (listRes.data && typeof listRes.data === 'object') {
+            if (listRes.data.rows) {
+              rawData = listRes.data.rows;
+              totalCount = listRes.data.total || 0;
+            } else if (Array.isArray(listRes.data)) {
+              rawData = listRes.data;
+              totalCount = rawData.length;
+            } else if (listRes.data.list) {
+              rawData = listRes.data.list;
+              totalCount = listRes.data.total || rawData.length;
+            } else {
+              rawData = [listRes.data];
+              totalCount = 1;
+            }
+          } else if (Array.isArray(listRes.data)) {
+            rawData = listRes.data;
+            totalCount = rawData.length;
+          } else {
+            rawData = [];
+            totalCount = 0;
+          }
+          if (rawData.length > 0) {
+            this.tableData = this.transformDataToTable(rawData);
+            this.total = totalCount;
+          } else {
+            this.tableData = [];
+            this.total = 0;
+            this.$message.info('该分类下暂无数据');
+          }
+        } else {
+          this.$message.error(listRes.msg || '获取装备列表失败');
+        }
+      } catch (error) {
+        this.$message.error('获取装备列表失败：' + (error.message || '未知错误'));
+      } finally {
+        this.tableLoading = false;
+      }
+    },
+
+    transformDataToTable(data) {
+      if (!data || !Array.isArray(data)) return [];
+      const tableData = [];
+      data.forEach(item => {
+        const itemId = item.typeId || item.id;
+        const levelInfo = this.levelMapping.get(itemId);
+        let level1 = '', level2 = '', level3 = '', level4 = '', level5 = '', level6 = '';
+        if (levelInfo && levelInfo.fullPath) {
+          const path = levelInfo.fullPath;
+          level1 = path[0] || '';
+          level2 = path[1] || '';
+          level3 = path[2] || '';
+          level4 = path[3] || '';
+          level5 = path[4] || '';
+          level6 = path[5] || '';
+        }
+        tableData.push({
+          id: itemId,
+          level1, level2, level3, level4, level5, level6,
+          createBy: item.createBy || '',
+          createTime: item.createTime || '',
+          updateBy: item.updateBy || '',
+          updateTime: item.updateTime || '',
+          rawData: item
+        });
+      });
+      return tableData;
+    },
+
+    async onHandlePreview(row) {
+      try {
+        const targetId = row.rawData.typeId || row.rawData.id || row.id;
+        if (!targetId) {
+          this.$message.warning('无法获取装备ID，查看失败');
+          return;
+        }
+        const res = await getEquipmentTypeDetailAPI(targetId);
+        if (res.code === 200) {
+          const detailData = res.data;
+          const levelInfo = this.levelMapping.get(targetId) || {};
+          const fullPath = levelInfo.fullPath || ['', '', '', '', '', ''];
+          this.formData = {
+            id: detailData.typeId || detailData.id || targetId,
+            level1: fullPath[0],
+            level2: fullPath[1],
+            level3: fullPath[2],
+            level4: fullPath[3],
+            level5: fullPath[4],
+            level6: detailData.typeName || fullPath[5],
+            categoryPath: [],
+            deviceName: '',
+          };
+          this.previewDialogVisible = true;
+        } else {
+          this.$message.error(res.msg || '获取装备详情失败');
+        }
+      } catch (error) {
+        this.$message.error('获取装备详情失败：' + (error.message || '未知错误'));
+      }
+    },
+
+    handlePreviewClose() {
+      this.previewDialogVisible = false;
+    },
+
+    async onHandleEdit(row) {
+      const targetId = row.rawData.typeId || row.rawData.id || row.id;
+      if (!targetId) {
+        this.$message.warning('无法获取装备ID，编辑失败');
+        return;
+      }
+      const levelInfo = this.levelMapping.get(targetId);
+      if (!levelInfo) {
+        this.$message.warning('未找到该装备的分类信息，无法编辑');
+        return;
+      }
+      const categoryPath = this.getCategoryPathById(targetId);
+      if (!this.processedTreeData || this.processedTreeData.length === 0) {
+        this.$message.warning('装备分类数据尚未加载完成，请稍后再试');
+        return;
+      }
+      this.formData = {
+        id: targetId,
+        categoryPath: categoryPath.map(id => String(id)),
+        deviceName: levelInfo.name || '',
+      };
+      console.log('编辑回显数据（所属专业为根）:', this.formData);
+      await this.$nextTick();
+      this.editDialogVisible = true;
+    },
+
+    getCategoryPathById(targetId) {
+      const path = [];
+      let currentId = targetId;
+      while (currentId) {
+        path.unshift(currentId);
+        const currentNodeInfo = this.levelMapping.get(currentId);
+        if (!currentNodeInfo) {
+          console.warn('未找到节点信息:', currentId);
+          break;
+        }
+        currentId = currentNodeInfo.parentId;
+      }
+      console.log('构建的分类路径（从所属专业开始）:', path);
+      return path;
+    },
+
+    handleEditClose() {
+      this.editDialogVisible = false;
+      this.resetEditFormData();
+    },
+
+    // ==================== 新增：配置特征项相关方法 ====================
+    /**
+     * 点击“配置特征项”按钮时触发
+     */
+    async onHandleConfig(row) {
+      // 1. 获取装备ID（对应后端 typeId，原逻辑不变，仅注释说明）
+      const targetId = row.rawData.typeId || row.rawData.id || row.id;
+      if (!targetId) {
+        this.$message.warning('无法获取装备ID，配置失败');
+        return;
+      }
+
+      // 2. 重置表单（原逻辑不变）
+      this.configForm = { featureIds: [] };
+      if (this.$refs.configForm) {
+        this.$refs.configForm.resetFields();
+      }
+
+      // 3. 保存装备信息 + 开启加载状态
+      this.currentEquipmentId = targetId;  // 此ID即后端需要的 typeId
+      this.currentEquipmentName = row.level6 || '未知装备';
+      this.featureLoading = true;  // 开启加载
+
+      try {
+        // 4. 替换API：获取所有可选特征项（原 getFeatureItemListAPI → 新 getPropertyList）
+        const featureListRes = await getPropertyList();
+        if (featureListRes.code === 200) {
+          this.featureItemList = featureListRes.data || [];
+        } else {
+          this.$message.error(featureListRes.msg || '获取特征项列表失败');
+          this.featureItemList = [];
+        }
+
+        // 5. 替换API：获取装备已配置特征项（原 getEquipmentFeatureAPI → 新 getPropertiesByTypeId）
+        const equipmentFeatureRes = await getPropertiesByTypeId(targetId); // 传 typeId
+        if (equipmentFeatureRes.code === 200) {
+          const selectedFeatures = equipmentFeatureRes.data || [];
+          // 提取ID数组（后端返回的是特征项对象列表，需取id）
+          this.configForm.featureIds = selectedFeatures.map(item => item.id);
+        } else {
+          this.$message.error(equipmentFeatureRes.msg || '获取装备已配置特征项失败');
+        }
+
+        // 6. 打开弹窗
+        this.configDialogVisible = true;
+      } catch (error) {
+        this.$message.error('加载配置数据失败：' + (error.message || '未知错误'));
+        this.configDialogVisible = true;
+      } finally {
+        // 7. 关闭加载状态（无论成功失败都执行）
+        this.featureLoading = false;
+      }
+    },
+
+    /**
+     * 关闭配置弹窗时触发
+     */
+    handleConfigClose() {
+      this.configDialogVisible = false;
+      // 重置表单，避免下次打开时显示旧数据
+      this.configForm = { featureIds: [] };
+      if (this.$refs.configForm) {
+        this.$refs.configForm.resetFields();
+      }
+    },
+
+    /**
+     * 提交特征项配置
+     */
+    submitConfigForm() {
+      this.$refs.configForm.validate(async (valid) => {
+        if (valid) {
+          try {
+            // 1. 构造后端需要的参数（注意：后端用 typeId 表示装备ID，非 equipmentId）
+            const submitData = {
+              typeId: this.currentEquipmentId,  // 关键：传 typeId 而非 equipmentId
+              propertyIds: this.configForm.featureIds  // 特征项ID数组（参数名与后端对齐）
+            };
+            console.log('提交特征项配置:', submitData);
+
+            // 2. 替换API：保存配置（原 saveEquipmentFeatureAPI → 新 updateProperty）
+            const res = await updateProperty(submitData);
+            if (res.code === 200) {
+              // 3. 优化提示（区分“配置成功”和“清空配置”）
+              this.$message.success(
+                this.configForm.featureIds.length > 0
+                  ? '特征项配置成功'
+                  : '已清除所有特征项配置'
+              );
+              this.handleConfigClose();
+            } else {
+              this.$message.error(res.msg || '特征项配置失败');
+            }
+          } catch (error) {
+            console.error('配置特征项接口调用错误:', error);
+            this.$message.error('配置特征项失败：' + (error.message || '未知错误'));
+          }
+        } else {
+          this.$message.warning('请完善必填字段后再保存');
+        }
+      });
+    },
+    // ===============================================================
+
+    onHandleDelete(row) {
+      this.$confirm('确定要删除该装备吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        try {
+          const id = row.rawData.id || row.rawData.typeId;
+          const res = await deleteEquipmentTypeAPI(id);
+          if (res.code === 200) {
+            this.$message.success('删除成功');
+            this.getDeviceList();
+          } else {
+            this.$message.error(res.msg || '删除失败');
+          }
+        } catch (error) {
+          this.$message.error('删除失败：' + (error.message || '未知错误'));
+        }
+      });
+    },
+
+    resetEditFormData() {
+      this.formData = {
+        id: '',
+        categoryPath: [],
+        deviceName: ''
+      };
+      if (this.$refs.editForm) {
+        this.$refs.editForm.resetFields();
+      }
+    },
+
+    submitEditForm() {
+      this.$refs.editForm.validate(async (valid) => {
+        if (valid) {
+          try {
+            const categoryPath = this.formData.categoryPath;
+            if (categoryPath.length > 6) {
+              this.$message.warning('分类层级不能超过6级');
+              return;
+            }
+            let parentId = null;
+            let level = 1;
+            if (categoryPath.length > 0) {
+              level = categoryPath.length;
+              parentId = categoryPath.length > 1 ? categoryPath[categoryPath.length - 2] : null;
+            }
+            const submitData = {
+              typeId: this.formData.id,
+              typeName: this.formData.deviceName,
+              parentId: parentId,
+              level: level
+            };
+            console.log('编辑提交数据（所属专业为根）:', submitData);
+            const res = await updateEquipmentTypeAPI(submitData);
+            if (res.code === 200) {
+              this.$message.success('编辑成功');
+              this.editDialogVisible = false;
+              await this.getDeviceTree();
+              this.getDeviceList();
+            } else {
+              this.$message.error(res.msg || '编辑失败');
+            }
+          } catch (error) {
+            console.error('编辑错误:', error);
+            this.$message.error('编辑失败：' + (error.message || '未知错误'));
+          }
+        } else {
+          this.$message.warning('请完善必填字段后再保存');
+        }
+      });
+    },
+
+    handleAdd() {
+      this.resetAddFormData();
+      this.addDialogVisible = true;
+    },
+
+    handleAddClose() {
+      this.addDialogVisible = false;
+      this.resetAddFormData();
+    },
+
+    resetAddFormData() {
+      this.addFormData = {
+        categoryPath: [],
+        deviceName: ''
+      };
+      this.selectedParentNode = null;
+      if (this.$refs.addForm) {
+        this.$refs.addForm.resetFields();
+      }
+    },
+
+    submitAddForm() {
+      this.$refs.addForm.validate(async (valid) => {
+        if (valid) {
+          try {
+            const categoryPath = this.addFormData.categoryPath;
+            if (categoryPath.length >= 6) {
+              this.$message.warning('最多只能选择6级分类，无法在其下新增');
+              return;
+            }
+            const parentId = categoryPath.length > 0 ? categoryPath[categoryPath.length - 1] : null;
+            const level = categoryPath.length + 1;
+            const submitData = {
+              typeName: this.addFormData.deviceName,
+              parentId: parentId,
+              level: level
+            };
+            console.log('新增提交数据:', submitData);
+            const res = await addEquipmentTypeAPI(submitData);
+            if (res.code === 200) {
+              this.$message.success('新增分类成功');
+              this.addDialogVisible = false;
+              await this.getDeviceTree();
+              this.getDeviceList();
+            } else {
+              this.$message.error(res.msg || '新增分类失败');
+            }
+          } catch (error) {
+            this.$message.error('新增分类失败：' + (error.message || '未知错误'));
+          }
+        }
+      });
+    },
+
+    async getCascaderData() {
+      try {
+        const res = await getEquipmentCascaderAPI();
+        if (res.code === 200) {
+          this.cascaderOptions = res.data || [];
+        } else {
+          this.$message.error(res.msg || '获取装备分类数据失败');
+        }
+      } catch (error) {
+        this.$message.error('获取装备分类数据失败：' + (error.message || '未知错误'));
+      }
+    }
+  },
+  async created() {
+    await this.getDeviceTree();
+    await this.getDeviceList();
+  }
 }
 </script>
 
-<style></style>
+<style scoped>
+.app-container {
+  padding: 20px;
+  background-color: #f5f7fa;
+  height: calc(100vh - 84px);
+}
+.tree-column {
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: row;
+}
+.card-container {
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  flex-grow: 1;
+  width: 240px;
+}
+.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;
+}
+.tree-container {
+  height: calc(100vh - 174px);
+  overflow: auto;
+  padding: 15px;
+}
+.el-col-1 {
+  width: 1.5% !important;
+}
+.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-container::-webkit-scrollbar {
+  display: none;
+}
+.pagination-container {
+  padding: 15px 20px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.path-change-tip {
+  font-size: 12px;
+  color: #909399;
+  background-color: #f4f4f5;
+  padding: 8px 12px;
+  border-radius: 4px;
+  margin-top: 5px;
+}
+.path-change-tip i {
+  color: #409eff;
+  margin-right: 5px;
+}
+:deep(.el-input.is-disabled .el-input__inner) {
+  background-color: #f5f7fa;
+  border-color: #e4e7ed;
+  color: #606266;
+}
+</style>
+
+<style>
+.six-level-cascader .el-cascader-menu {
+  max-height: 300px;
+  overflow-y: auto;
+}
+.six-level-cascader .el-cascader-menu__item {
+  position: relative;
+  transition: all 0.2s;
+}
+.six-level-cascader .el-cascader-menu[data-level="1"] .el-cascader-menu__item { padding-left: 20px; font-weight: 500; }
+.six-level-cascader .el-cascader-menu[data-level="2"] .el-cascader-menu__item { padding-left: 35px; font-weight: 400; }
+.six-level-cascader .el-cascader-menu[data-level="3"] .el-cascader-menu__item { padding-left: 50px; font-size: 13px; }
+.six-level-cascader .el-cascader-menu[data-level="4"] .el-cascader-menu__item { padding-left: 65px; font-size: 13px; color: #666; }
+.six-level-cascader .el-cascader-menu[data-level="5"] .el-cascader-menu__item { padding-left: 80px; font-size: 12px; color: #888; }
+.six-level-cascader .el-cascader-menu[data-level="6"] .el-cascader-menu__item { padding-left: 95px; font-size: 12px; color: #999; background-color: #f8f9fa; }
+.six-level-cascader .el-cascader-menu[data-level="7"] .el-cascader-menu__item { display: none; }
+.six-level-cascader .el-cascader-menu::-webkit-scrollbar { width: 6px; }
+.six-level-cascader .el-cascader-menu::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
+.six-level-cascader .el-cascader-menu::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
+.six-level-cascader .el-cascader-menu::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
+</style>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 55c71d9f..c80a66e8 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,171 +1,187 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
-      <el-form-item label="角色名称" prop="roleName">
-        <el-input
-          v-model="queryParams.roleName"
-          placeholder="请输入角色名称"
-          clearable
-          style="width: 240px"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="权限字符" prop="roleKey">
-        <el-input
-          v-model="queryParams.roleKey"
-          placeholder="请输入权限字符"
-          clearable
-          style="width: 240px"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="状态" prop="status">
-        <el-select
-          v-model="queryParams.status"
-          placeholder="角色状态"
-          clearable
-          style="width: 240px"
-        >
-          <el-option
-            v-for="dict in dict.type.sys_normal_disable"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="创建时间">
-        <el-date-picker
-          v-model="dateRange"
-          style="width: 240px"
-          value-format="yyyy-MM-dd"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        ></el-date-picker>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
+    <!-- 查询条件卡片 -->
+    <div class="card-container">
+      <div class="card-header query-header">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" class="query-form">
+          <el-form-item label="角色名称" prop="roleName">
+            <el-input
+              v-model="queryParams.roleName"
+              placeholder="请输入角色名称"
+              clearable
+              style="width: 240px"
+            />
+          </el-form-item>
+          <el-form-item label="权限字符" prop="roleKey">
+            <el-input
+              v-model="queryParams.roleKey"
+              placeholder="请输入权限字符"
+              clearable
+              style="width: 240px"
+            />
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-select
+              v-model="queryParams.status"
+              placeholder="角色状态"
+              clearable
+              style="width: 240px"
+            >
+              <el-option
+                v-for="dict in dict.type.sys_normal_disable"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="创建时间">
+            <el-date-picker
+              v-model="dateRange"
+              style="width: 240px"
+              value-format="yyyy-MM-dd"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item class="query-buttons">
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
+            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
 
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['system:role:add']"
-        >新增
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['system:role:edit']"
-        >修改
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['system:role:remove']"
-        >删除
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['system:role:export']"
-        >导出
-        </el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+    <!-- 操作按钮和表格卡片 -->
+    <div class="card-container">
+      <div class="card-header operation-header">
+        <el-row :gutter="10" class="mb8 operation-row">
+
+          <el-col :span="24">
+            <div class="action-bar">
+              <!-- 操作按钮 -->
+              <el-button
+                type="primary"
+                plain
+                icon="el-icon-plus"
+                size="mini"
+                @click="handleAdd"
+                v-hasPermi="['system:role:add']"
+              >新增
+              </el-button>
+              <el-button
+                type="success"
+                plain
+                icon="el-icon-edit"
+                size="mini"
+                :disabled="single"
+                @click="handleUpdate"
+                v-hasPermi="['system:role:edit']"
+              >修改
+              </el-button>
+              <el-button
+                type="danger"
+                plain
+                icon="el-icon-delete"
+                size="mini"
+                :disabled="multiple"
+                @click="handleDelete"
+                v-hasPermi="['system:role:remove']"
+              >删除
+              </el-button>
+              <el-button
+                type="warning"
+                plain
+                icon="el-icon-download"
+                size="mini"
+                @click="handleExport"
+                v-hasPermi="['system:role:export']"
+              >导出
+              </el-button>
+
+              <!-- 搜索工具栏 -->
+              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+
+      <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange" :selectable="checkSelectable" :row-class-name="getRowClassName">
+        <el-table-column type="selection" min-width="55" align="center"/>
+        <el-table-column label="角色编号" prop="roleId" min-width="120" align="center"/>
+        <el-table-column label="角色名称" align="center" prop="roleName" :show-overflow-tooltip="true" min-width="150"/>
+        <el-table-column label="权限字符" align="center" prop="roleKey" :show-overflow-tooltip="true" min-width="150"/>
+        <el-table-column label="显示顺序" align="center" prop="roleSort" min-width="100"/>
+        <el-table-column label="状态" align="center" min-width="100">
+          <template slot-scope="scope">
+            <el-switch
+              v-model="scope.row.status"
+              active-value="0"
+              inactive-value="1"
+              @change="handleStatusChange(scope.row)"
+            ></el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" align="center" prop="createTime" min-width="180">
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.createTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template slot-scope="scope" v-if="scope.row.roleId !== 1 && scope.row.isBuiltIn !== '0'">
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-edit"
+              @click="handleUpdate(scope.row)"
+              v-hasPermi="['system:role:edit']"
+            >修改
+            </el-button>
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              @click="handleDelete(scope.row)"
+              v-hasPermi="['system:role:remove']"
+            >删除
+            </el-button>
+            <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
+                         v-hasPermi="['system:role:edit']"
+            >
+              <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"
+                                  v-hasPermi="['system:role:edit']"
+                >数据权限
+                </el-dropdown-item>
+                <el-dropdown-item command="handleAuthUser" icon="el-icon-user"
+                                  v-hasPermi="['system:role:edit']"
+                >分配用户
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </template>
+        </el-table-column>
+      </el-table>
+
+
+
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+
+
+
+
+    </div>
 
-    <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange" :selectable="checkSelectable" :row-class-name="getRowClassName">
-      <el-table-column type="selection" min-width="55" align="center"/>
-      <el-table-column label="角色编号" prop="roleId" min-width="120" align="center"/>
-      <el-table-column label="角色名称" align="center" prop="roleName" :show-overflow-tooltip="true" min-width="150"/>
-      <el-table-column label="权限字符" align="center" prop="roleKey" :show-overflow-tooltip="true" min-width="150"/>
-      <el-table-column label="显示顺序" align="center" prop="roleSort" min-width="100"/>
-      <el-table-column label="状态" align="center" min-width="100">
-        <template slot-scope="scope">
-          <el-switch
-            v-model="scope.row.status"
-            active-value="0"
-            inactive-value="1"
-            @change="handleStatusChange(scope.row)"
-          ></el-switch>
-        </template>
-      </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" min-width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope" v-if="scope.row.roleId !== 1 && scope.row.isBuiltIn !== '0'">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:role:edit']"
-          >修改
-          </el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['system:role:remove']"
-          >删除
-          </el-button>
-          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
-                       v-hasPermi="['system:role:edit']"
-          >
-            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"
-                                v-hasPermi="['system:role:edit']"
-              >数据权限
-              </el-dropdown-item>
-              <el-dropdown-item command="handleAuthUser" icon="el-icon-user"
-                                v-hasPermi="['system:role:edit']"
-              >分配用户
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-        </template>
-      </el-table-column>
-    </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
 
     <!-- 添加或修改角色配置对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -476,15 +492,12 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      // 过滤掉不可选的行（虽然界面上不可选，但为了安全起见还是过滤一次）
+      // 过滤掉不可选的行
       const validSelection = selection.filter(row => this.checkSelectable(row));
-
-      // 更新选中的roleId数组
       this.ids = validSelection.map(item => item.roleId);
-      // 更新单选和多选状态
       this.single = validSelection.length !== 1;
       this.multiple = !validSelection.length;
-  },
+    },
     // 更多操作触发
     handleCommand(command, row) {
       switch (command) {
@@ -637,7 +650,6 @@ export default {
       return !(row.roleId === 1 || row.isBuiltIn === '0');
     },
 
-
     getRowClassName(row) {
       return !this.checkSelectable(row) ? 'disabled-row' : '';
     },
@@ -645,8 +657,79 @@ export default {
 }
 </script>
 
+<style scoped>
+.app-container {
+  padding: 20px;
+  background-color: #f5f7fa;
+}
 
-<style>
+.card-container {
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+
+/* 查询条件卡片头部样式 */
+.query-header {
+  padding: 14px;
+  border-bottom: 1px solid #e4e7ed;
+  display: flex;
+  align-items: center;
+  min-height: 60px;
+}
+
+.query-form {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  width: 100%;
+  gap: 15px;
+}
+
+.query-form .el-form-item {
+  margin-bottom: 0;
+  display: flex;
+  align-items: center;
+}
+
+.query-buttons {
+  display: flex;
+  gap: 10px;
+}
+
+/* 操作按钮卡片头部样式 */
+.operation-header {
+  padding: 14px;
+  border-bottom: 1px solid #e4e7ed;
+  display: flex;
+  align-items: center;
+  min-height: 50px;
+}
+
+.operation-row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 0 !important;
+}
+
+/* 新增：统一的操作栏容器样式，用于将所有按钮和工具栏放在右侧 */
+.action-bar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end; /* 关键：整体内容靠右对齐 */
+  gap: 10px; /* 统一设置内部元素的间距 */
+  width: 100%;
+}
+
+/* 表格样式 */
+.card-container .el-table {
+  width: 100%;
+}
+
+/* 禁用行样式 */
 .disabled-row {
   background-color: #f5f7fa !important;
   color: #909399;
@@ -660,4 +743,58 @@ export default {
 .disabled-row:hover td {
   background-color: #f5f7fa !important;
 }
+
+/* 响应式调整 */
+@media (max-width: 1200px) {
+  .query-form {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .query-form .el-form-item {
+    width: 100%;
+  }
+
+  .query-buttons {
+    width: 100%;
+    justify-content: flex-end;
+
+
+  }
+
+  .operation-row {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  /* 在小屏幕上，操作栏自动变为垂直排列并左对齐 */
+
+
+
+
+  .action-bar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .left-buttons {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .right-toolbar-col {
+    width: 100%;
+    justify-content: flex-end;
+  }
+}
+
+
+.pagination-container {
+  padding: 15px 20px;
+  margin-top: 5px;;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
 </style>