11

src/views/system/role/index.vue

@@ -3,58 +3,82 @@
     <list-layout>
     <!-- 搜索区域 -->
     <template #search>
-      <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"
+      <mobile-search-form
+        :model="queryParams"
+        @search="handleQuery"
+        @reset="resetQuery"
+      >
+        <template #form="{ expanded }">
+          <el-form 
+            :model="queryParams" 
+            ref="queryForm" 
+            size="small" 
+            :inline="true"
+            label-width="68px"
           >
-            <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 icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-        </el-form-item>
-      </el-form>
+            <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 v-if="!expanded">
+              <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>
+            </el-form-item>
+          </el-form>
+        </template>
+      </mobile-search-form>
 
-      <el-row :gutter="10" class="mb8">
+      <!-- 操作按钮区域（移动端单独显示） -->
+      <div class="action-buttons-section mobile-only">
+        <mobile-button-group
+          :buttons="actionButtons"
+          :primary-count="2"
+        />
+      </div>
+
+      <!-- 桌面端按钮组 -->
+      <el-row :gutter="10" class="mb8 desktop-only">
         <el-col :span="1.5">
           <el-button
             type="primary"
@@ -265,12 +289,17 @@
 <script>
 import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus, deptTreeSelect } from "@/api/system/role"
 import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu"
+import { mapGetters } from 'vuex'
 import ListLayout from "@/components/ListLayout"
+import MobileSearchForm from '@/components/MobileSearchForm'
+import MobileButtonGroup from '@/components/MobileButtonGroup'
 
 export default {
   name: "Role",
   components: {
-    ListLayout
+    ListLayout,
+    MobileSearchForm,
+    MobileButtonGroup
   },
   dicts: ['sys_normal_disable'],
   data() {
@@ -356,6 +385,26 @@ export default {
       }
     }
   },
+  computed: {
+    ...mapGetters(['device']),
+    isMobile() {
+      if (this.device === 'mobile') {
+        return true
+      }
+      if (typeof window !== 'undefined' && window.innerWidth < 768) {
+        return true
+      }
+      return false
+    },
+    actionButtons() {
+      return [
+        { key: 'add', label: '新增', type: 'primary', icon: 'el-icon-plus', handler: () => this.handleAdd(), disabled: false },
+        { key: 'update', label: '修改', type: 'success', icon: 'el-icon-edit', handler: () => this.handleUpdate(), disabled: this.single },
+        { key: 'delete', label: '删除', type: 'danger', icon: 'el-icon-delete', handler: () => this.handleDelete(), disabled: this.multiple },
+        { key: 'export', label: '导出', type: 'warning', icon: 'el-icon-download', handler: () => this.handleExport(), disabled: false }
+      ]
+    }
+  },
   created() {
     this.getList()
   },
@@ -617,4 +666,33 @@ export default {
     }
   }
 }
-</script>
+</script>
+
+<style scoped>
+/* 操作按钮区域 */
+.action-buttons-section {
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+
+/* 移动端和桌面端按钮组显示控制 */
+@media (max-width: 768px) {
+  .desktop-only {
+    display: none !important;
+  }
+  
+  .action-buttons-section.mobile-only {
+    display: block;
+  }
+}
+
+@media (min-width: 769px) {
+  .mobile-only {
+    display: none !important;
+  }
+  
+  .desktop-only {
+    display: block;
+  }
+}
+</style>