装备类型配置页面，特征值未完成

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",

src/api/EquipmentLedger/index.js

@@ -49,4 +49,5 @@ export const delDevice = (ids) => {
     url: '/material-mall/device/delDevice/'+ids,
     method: 'post',
   })
+
 }

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>