用户管理

ruoyi-admin-vue/src/views/inventory/materials/index.vue

@@ -697,7 +697,7 @@ export default {
 
     /** 重置按钮操作 */
     resetQuery() {
-      this.resetForm("queryForm");
+      // this.resetForm("queryForm");
       this.queryParams = {
         pageNum: 1,
         pageSize: 10,

ruoyi-admin-vue/src/views/system/user/index.vue

 <template>
   <div class="app-container">
-    <el-row :gutter="20">
-      <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
-        <!--部门数据-->
-        <pane size="16">
+
+    <PageTitle>
+      <template #buttons>        
+        <el-button type="primary" plain icon="el-icon-plus" size="medium" @click="handleAdd" v-hasPermi="['system:user:add']">新增</el-button>
+      
+        <el-button type="success" plain icon="el-icon-edit" size="medium" :disabled="single" @click="handleUpdate" v-hasPermi="['system:user:edit']">修改</el-button>
+      
+        <el-button type="danger" plain icon="el-icon-delete" size="medium" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:user:remove']">删除</el-button>
+      
+        <el-button type="info" plain icon="el-icon-upload2" size="medium" @click="handleImport" v-hasPermi="['system:user:import']">导入</el-button>
+      
+        <el-button type="warning" plain icon="el-icon-download" size="medium" @click="handleExport" v-hasPermi="['system:user:export']">导出</el-button> 
+      </template>
+    </PageTitle>
+
+     <div class="page-container-noback flex1">
+      <div class="flex-container flex1" style="min-height: 200px;overflow: hidden;">
+        <div class="card-container shadow left-card" style="overflow: auto;min-width: 16%;">
           <el-col>
             <div class="head-container">
               <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
@@ -21,51 +35,35 @@
               @node-click="handleNodeClick" />
             </div>
           </el-col>
-        </pane>
-        <!--用户数据-->
-        <pane size="84">
-          <el-col>
-            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-              <el-form-item label="用户名称" prop="userName">
-                <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
-              </el-form-item>
-              <el-form-item label="手机号码" prop="phonenumber">
-                <el-input v-model="queryParams.phonenumber" 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 icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-              </el-form-item>
-            </el-form>
+        </div>
+        <div class="card-container shadow flex1 right-card flex-container" style="flex-direction: column;padding: 20px;min-height: 200px;">
 
-            <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:user: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:user: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:user:remove']">删除</el-button>
-              </el-col>
-              <el-col :span="1.5">
-                <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['system:user:import']">导入</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:user:export']">导出</el-button>
-              </el-col>
-              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
-            </el-row>
+          <page-wrapper-search 
+            :model="queryParams" 
+            ref="queryForm" 
+            size="small" 
+            @search="handleQuery"
+            @reset="resetQuery"
+          >
+            <el-form-item label="用户名称" prop="userName">
+              <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item label="手机号码" prop="phonenumber">
+              <el-input v-model="queryParams.phonenumber" 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>
+          </page-wrapper-search>
 
-            <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
+          <!-- 树形数据表格 -->
+          <div style="flex: 1;min-height: 200px;">
+            <el-table v-loading="loading" :data="userList" height="100%" @selection-change="handleSelectionChange">
               <el-table-column type="selection" width="50" align="center" />
               <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns.userId.visible" />
               <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns.userName.visible" :show-overflow-tooltip="true" />
@@ -96,12 +94,12 @@
                 </template>
               </el-table-column>
             </el-table>
+          </div>
+          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
 
-            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
-          </el-col>
-        </pane>
-      </splitpanes>
-    </el-row>
+        </div>
+      </div>
+    </div>
 
     <!-- 添加或修改用户配置对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
@@ -420,10 +418,10 @@ export default {
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.dateRange = []
-      this.resetForm("queryForm")
-      this.queryParams.deptId = undefined
-      this.$refs.tree.setCurrentKey(null)
+      this.queryParams.userName = ''
+      this.queryParams.phonenumber = ''
+      this.queryParams.status = ''
+     this.queryParams.pageNum = 1
       this.handleQuery()
     },
     // 多选框选中数据
@@ -564,4 +562,13 @@ export default {
     }
   }
 }
-</script>
+</script>
\ No newline at end of file
+
+<style lang="scss" scoped>
+.right-card {
+  margin-left: var(--container-pd);
+}
+.left-card {
+  padding: var(--container-pd);
+}
+</style>
\ No newline at end of file