修改全局样式

src/assets/styles/element-ui.scss

@@ -90,7 +90,8 @@
 }
 
 .tree-container{
-  height: calc(100vh - 218px);
+  min-height: calc(100vh - 180px);;
+  max-height: 850px;
   overflow: auto;
 }
 
@@ -104,4 +105,4 @@
 
 .table-header_cell{
   text-align: center !important;
-}
+}

src/assets/styles/index.scss

@@ -171,9 +171,16 @@ aside {
 
 //main-container全局样式
 .app-container {
-  padding: 20px;
+  padding: 10px;
   height: calc(100vh - 86px);
   overflow: auto;
+  background-color: #f1f1f1;
+}
+
+.main-search-box{
+  background-color: #fff;
+  padding: 10px;
+  margin-bottom: 10px
 }
 
 .components-container {
@@ -181,10 +188,6 @@ aside {
   position: relative;
 }
 
-.pagination-container {
-  margin-top: 30px;
-}
-
 .text-center {
   text-align: center;
 }
@@ -281,3 +284,5 @@ aside {
 .el-button [class*=el-icon-] + span{
   margin-left: 2px;
 }
+
+

src/assets/styles/ruoyi.scss

@@ -103,10 +103,14 @@
 
 /** 表格布局 **/
 .pagination-container {
-	position: relative;
-	height: 30px;
-	margin-bottom: 10px;
-	margin-top: 15px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+	height: 50px;
+	padding: 10px;
+  background-color: #fff;
+  border:1px solid #f1f1f1;
+  border-top:none;
 }
 
 /* tree border */
@@ -117,10 +121,7 @@
     border-radius:4px;
 }
 
-.pagination-container .el-pagination {
-	right: 0;
-	position: absolute;
-}
+
 
 @media ( max-width : 768px) {
   .pagination-container .el-pagination > .el-pagination__jump {
@@ -287,3 +288,10 @@
  .el-button--mini{
    font-size: 13px!important;
  }
+.el-table thead{
+  >tr{
+    >th{
+      background-color: #CCE8F7!important;
+    }
+  }
+}

src/components/orgTree/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="org-tree">
     <div class="head-container">
       <el-input
         v-model="deptName"
@@ -30,9 +30,9 @@
         v-bind="$attrs"
       >
         <span class="custom-tree-node" slot-scope="{ node, data }">
-          
+
             <span>{{ node.label }}</span>
-         
+
         </span>
       </el-tree>
     </div>
@@ -170,6 +170,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.org-tree{
+  background-color: #fff;
+  padding: 10px;
+}
 .el-tree-ex {
   // overflow: auto;
   ::v-deep .is-current > .el-tree-node__content {

src/views/system/dept/index.vue

@@ -1,192 +1,129 @@
 <template>
   <div class="app-container">
-    <!-- <el-row :gutter="20"> -->
+    <el-row :gutter="10">
     <!--机构数据-->
-    <!-- <el-col :span="4" :xs="24"> -->
-    <!-- <div class="head-container">
-          <el-input
-            v-model="deptName"
-            placeholder="请输入机构名称"
-            clearable
-            size="small"
-            prefix-icon="el-icon-search"
-            style="margin-bottom: 20px"
-          />
-        </div> -->
-
-    <!-- <div style="margin-bottom: 10px">
-            <el-checkbox v-model="queryParams.checkSub" @change="changeCheckBox"
-              >关联下级</el-checkbox
-            >
-          </div>
-          <el-tree
-            :data="deptOptions"
-            :props="defaultProps"
-            :expand-on-click-node="false"
-            :filter-node-method="filterNode"
-            ref="tree"
-            node-key="id"
-            :default-expanded-keys="defaultKeys"
-            :default-checked-keys="defaultKeys"
-            @node-click="handleNodeClick"
-          /> -->
-    <!-- <div class="tree-container"> -->
-    <layoutCom>
+     <el-col :span="4" :xs="24">
       <org-tree
-        slot="leftBar"
         v-model="queryParams.orgId"
         @defaultKey="defaultKeys"
         @checkChange="checkChange"
         @click="handleNodeClick"
       ></org-tree>
-      <!-- </div> -->
-      <!-- </el-col> -->
+     </el-col>
       <!--用户数据-->
-      <!-- <el-col :span="20" :xs="24"> -->
+     <el-col :span="20" :xs="24">
       <!--    搜索条件    -->
-      <el-row slot="rightBar">
-        <el-col>
-          <el-form
-            :model="queryParams"
-            ref="queryForm"
-            size="small"
-            :inline="true"
-            v-show="showSearch"
-          >
-            <el-form-item label="机构名称" prop="name">
-              <el-input
-                v-model="queryParams.name"
-                placeholder="请输入机构名称"
-                clearable
-                @keyup.enter.native="handleQuery"
-                maxlength="50"
-                @input="inputRestriction"
-              />
-            </el-form-item>
-            <el-form-item label="机构编码" prop="code">
-              <el-input
-                v-model="queryParams.code"
-                placeholder="请输入机构编码"
-                clearable
-                @keyup.enter.native="handleQuery"
-              />
-            </el-form-item>
-            <el-form-item label="机构类型" prop="type">
-              <el-select
-                v-model="queryParams.type"
-                placeholder="请选择机构类型"
-                clearable
-              >
-                <el-option
-                  v-for="dict in dict.type.sys_org_type"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-                />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="机构状态" prop="isLock">
-              <el-select
-                v-model="queryParams.isLock"
-                placeholder="请选择机构状态"
-                clearable
+        <div class="main-search-box">
+           <el-form
+             :model="queryParams"
+             ref="queryForm"
+             size="small"
+             :inline="true"
+             v-show="showSearch"
+           >
+             <el-form-item label="机构名称" prop="name" >
+               <el-input
+                 v-model="queryParams.name"
+                 placeholder="请输入机构名称"
+                 clearable
+                 @keyup.enter.native="handleQuery"
+                 maxlength="50" @input="inputRestriction"
+               />
+             </el-form-item>
+             <el-form-item label="机构编码" prop="code">
+               <el-input
+                 v-model="queryParams.code"
+                 placeholder="请输入机构编码"
+                 clearable
+                 @keyup.enter.native="handleQuery"
+               />
+             </el-form-item>
+             <el-form-item label="状态" prop="isLock">
+               <el-select
+                 v-model="queryParams.isLock"
+                 placeholder="请选择状态"
+                 clearable
+               >
+                 <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="机构类型" prop="type">
+               <el-select
+                 v-model="queryParams.type"
+                 placeholder="请选择机构类型"
+                 clearable
+               >
+                 <el-option
+                   v-for="dict in dict.type.sys_org_type"
+                   :key="dict.value"
+                   :label="dict.label"
+                   :value="dict.value"
+                 />
+               </el-select>
+             </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-row :gutter="10">
+            <el-col :span="1.5">
+              <el-button
+                type="primary"
+                icon="el-icon-plus"
+                size="mini"
+                @click="handleAdd"
+                v-hasPermi="['system:dept:add']"
+              >新增机构</el-button
               >
-                <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-row :gutter="10" class="mb8">
-              <el-col :span="1.5">
-                <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-col>
-              <el-col :span="1.5">
-                <el-form-item>
-                  <el-button
-                    v-if="false"
-                    type="primary"
-                    icon="el-icon-plus"
-                    size="mini"
-                    @click="showDialogEdit(0)"
-                    v-hasPermi="['system:dept:add']"
-                  ></el-button>
-                  <el-button
-                    type="primary"
-                    icon="el-icon-plus"
-                    size="mini"
-                    @click="handleAdd"
-                    v-hasPermi="['system:dept:add']"
-                    >新增机构</el-button
-                  >
-                </el-form-item>
-              </el-col>
-              <right-toolbar
-                :showSearch.sync="showSearch"
-                @queryTable="getList"
-              ></right-toolbar>
-            </el-row>
-          </el-form>
-
+            </el-col>
+            <right-toolbar
+              :showSearch.sync="showSearch"
+              @queryTable="getList"
+            ></right-toolbar>
+          </el-row>
+        </div>
           <el-table
-            border
-            height="650"
-            size="small"
-            v-loading="loading"
-            :data="deptList"
-            @selection-change="handleSelectionChange"
-          >
-            <el-table-column label="序号" align="center" min-width="50">
-              <template v-slot:default="scope">
-                <span v-text="getPageIndex(scope.$index)"> </span>
-              </template>
-            </el-table-column>
-            <el-table-column
-              v-if="false"
-              prop="name"
-              label="机构名称"
-              min-width="200"
-            ></el-table-column>
-            <el-table-column
-              prop="shortName"
-              label="机构简称"
-              min-width="50"
-            ></el-table-column>
-            <el-table-column
-              align="center"
-              prop="type"
-              width="150"
-              label="机构类型"
-            >
-              <template v-slot="scope">
-                <dict-tag
-                  :options="dict.type.sys_org_type"
-                  :value="scope.row.type"
-                />
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop="code"
-              label="机构编码"
-              min-width="50"
-            ></el-table-column>
+          border
+          height="650"
+          size="small"
+          v-loading="loading"
+          :data="deptList">
+          <el-table-column label="序号" align="center" width="80">
+            <template v-slot:default="scope">
+              <span v-text="getPageIndex(scope.$index)"> </span>
+            </template>
+          </el-table-column>
+          <el-table-column v-if="false"
+            prop="name"
+            label="机构名称"
+          ></el-table-column>
+          <el-table-column
+            prop="shortName"
+            label="机构简称"
+          ></el-table-column>
+          <el-table-column align="center" prop="type" width="150" label="机构类型">
+            <template v-slot="scope">
+              <dict-tag
+                :options="dict.type.sys_org_type"
+                :value="scope.row.type"
+              />
+            </template>
+          </el-table-column>
+           <el-table-column  prop="code" label="机构编码" min-width="50"></el-table-column>
 
             <el-table-column prop="isLock" align="center" label="机构状态">
               <template v-slot="scope">
@@ -204,12 +141,10 @@
               min-width="60"
               width="60"
             ></el-table-column>
-            <el-table-column
-              v-if="false"
+            <el-table-column v-if="false"
               align="center"
               prop="weatherCityCode"
               label="城市天气区域"
-              width="150"
             >
               <template slot-scope="r">
                 <span>{{ getCode(r.row.weatherCityCode) }}</span>
@@ -222,25 +157,19 @@
               <span v-text="scope.row.managerPhone"> </span>
             </template>
           </el-table-column> -->
-            <el-table-column
-              v-if="false"
+            <el-table-column  v-if="false"
               align="center"
               prop="manager"
               label="负责人"
-              width="150"
             ></el-table-column>
-            <el-table-column
-              v-if="false"
+            <el-table-column v-if="false"
               align="center"
               prop="managerPhone"
               label="负责人电话"
-              width="150"
             ></el-table-column>
             <el-table-column
               label="操作"
               align="center"
-              width="300"
-              fixed="right"
               class-name="small-padding fixed-width"
             >
               <template slot-scope="scope">
@@ -283,7 +212,6 @@
               </template>
             </el-table-column>
           </el-table>
-
           <pagination
             v-show="total > 0"
             :total="total"
@@ -292,8 +220,7 @@
             @pagination="getList"
           />
         </el-col>
-      </el-row>
-    </layoutCom>
+     </el-row>
 
     <!-- 添加或修改机构对话框 -->
     <DialogCom
@@ -405,7 +332,7 @@
               />
             </el-form-item>
           </el-col>
-          
+
         </el-row>
 
         <el-row>

src/views/system/user/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-row :gutter="20">
+    <el-row :gutter="10">
       <!--机构数据-->
       <el-col :span="4" :xs="24">
         <org-tree
@@ -14,152 +14,153 @@
       <!--用户数据-->
       <el-col :span="20" :xs="24">
         <!--    搜索条件    -->
-        <el-form
-          :model="queryParams"
-          ref="queryForm"
-          size="small"
-          :inline="true"
-          v-show="showSearch"
-          label-width="68px"
-        >
-          <el-form-item label="账号" prop="username">
-            <el-input
-              :maxlength="20"
-              v-model="queryParams.username"
-              placeholder="请输入账号"
-              clearable
-              style="width: 200px"
-              @keyup.enter.native="handleQuery"
-            />
-          </el-form-item>
-          <el-form-item label="姓名" prop="name">
-            <el-input
-              :maxlength="50"
-              v-model="queryParams.name"
-              placeholder="请输入姓名"
-              clearable
-              style="width: 200px"
-              @keyup.enter.native="handleQuery"
-            />
-          </el-form-item>
-
-          <el-form-item label="用户角色" prop="roleIds">
-            <!-- @visible-change="selectAllRoles" -->
-            <el-select
-              style="width: 200px"
-              v-model="queryParams.roleId"
-              placeholder="请选择用户角色"
-              clearable
-            >
-              <el-option
-                v-for="item in role_options"
-                :key="item.id"
-                :label="item.roleName"
-                :value="item.id"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="状态" prop="isLock">
-            <el-select
-              v-model="queryParams.isLock"
-              placeholder="请选择状态"
-              clearable
-              style="width: 200px"
-            >
-              <el-option
-                v-for="dict in dict.type.sys_user_is_lock"
-                :key="dict.value"
-                :label="dict.label"
-                :value="dict.value"
+        <div class="main-search-box">
+          <el-form
+            :model="queryParams"
+            ref="queryForm"
+            size="small"
+            :inline="true"
+            v-show="showSearch"
+            label-width="68px"
+          >
+            <el-form-item label="账号" prop="username">
+              <el-input
+                :maxlength="20"
+                v-model="queryParams.username"
+                placeholder="请输入账号"
+                clearable
+                style="width: 200px"
+                @keyup.enter.native="handleQuery"
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="管理人员" prop="isLock">
-            <el-switch
-              v-model="queryParams.onlyManager"
-              active-text=""
-              @change="handleQuery"
-            >
-            </el-switch>
-          </el-form-item>
-          <el-form-item>
-            <el-button
-              type="primary"
-              icon="el-icon-search"
-              size="mini"
-              @click="handleQuery"
+            </el-form-item>
+            <el-form-item label="姓名" prop="name">
+              <el-input
+                :maxlength="50"
+                v-model="queryParams.name"
+                placeholder="请输入姓名"
+                clearable
+                style="width: 200px"
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+
+            <el-form-item label="用户角色" prop="roleIds">
+              <!-- @visible-change="selectAllRoles" -->
+              <el-select
+                style="width: 200px"
+                v-model="queryParams.roleId"
+                placeholder="请选择用户角色"
+                clearable
+              >
+                <el-option
+                  v-for="item in role_options"
+                  :key="item.id"
+                  :label="item.roleName"
+                  :value="item.id"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="状态" prop="isLock">
+              <el-select
+                v-model="queryParams.isLock"
+                placeholder="请选择状态"
+                clearable
+                style="width: 200px"
+              >
+                <el-option
+                  v-for="dict in dict.type.sys_user_is_lock"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="管理人员" prop="isLock">
+              <el-switch
+                v-model="queryParams.onlyManager"
+                active-text=""
+                @change="handleQuery"
+              >
+              </el-switch>
+            </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 icon="el-icon-refresh" size="mini" @click="resetQuery"
               >重置</el-button
-            >
-          </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>
-
-        <!--    按纽    -->
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button
-              type="primary"
-              icon="el-icon-plus"
-              size="mini"
-              @click="handleAdd"
-              v-hasPermi="['system:user:add']"
+              >
+            </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>
+          <!--    按纽    -->
+          <el-row :gutter="10">
+            <el-col :span="1.5">
+              <el-button
+                type="primary"
+                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-outline" 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="primary"
-              plain
-              icon="el-icon-upload2"
-              size="mini"
-              @click="handleImport"
-              v-hasPermi="['system:user:import']"
+              >
+            </el-col>
+            <!-- <el-col :span="1.5">
+              <el-button type="success" plain icon="el-icon-edit-outline" 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="primary"
+                plain
+                icon="el-icon-upload2"
+                size="mini"
+                @click="handleImport"
+                v-hasPermi="['system:user:import']"
               >导入</el-button
-            >
-          </el-col>
+              >
+            </el-col>
 
-          <el-col :span="1.5">
-            <el-button
-              type="primary"
-              plain
-              icon="el-icon-download"
-              size="mini"
-              @click="handleExport"
-              v-hasPermi="['system:user:export']"
+            <el-col :span="1.5">
+              <el-button
+                type="primary"
+                plain
+                icon="el-icon-download"
+                size="mini"
+                @click="handleExport"
+                v-hasPermi="['system:user:export']"
               >导出用户角色</el-button
-            >
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              type="primary"
-              plain
-              icon="el-icon-download"
-              size="mini"
-              @click="handleExportManager"
-              v-hasPermi="['system:user:exportManager']"
+              >
+            </el-col>
+            <el-col :span="1.5">
+              <el-button
+                type="primary"
+                plain
+                icon="el-icon-download"
+                size="mini"
+                @click="handleExportManager"
+                v-hasPermi="['system:user:exportManager']"
               >导出管理人员</el-button
-            >
-          </el-col>
-          <right-toolbar
-            :showSearch.sync="showSearch"
-            @queryTable="getList"
-            :columns="columns"
-          ></right-toolbar>
-        </el-row>
+              >
+            </el-col>
+            <right-toolbar
+              :showSearch.sync="showSearch"
+              @queryTable="getList"
+              :columns="columns"
+            ></right-toolbar>
+          </el-row>
+        </div>
         <el-table
           border
           height="650"
@@ -198,7 +199,7 @@
             align="left"
             key="orgName"
             prop="orgName"
-            width="200"
+            width="180"
             v-if="columns[3].visible"
             :show-overflow-tooltip="true"
           />
@@ -206,7 +207,7 @@
             label="用户角色"
             align="left"
             prop="roles"
-            width="240"
+            width="300"
             v-if="columns[2].visible"
             :show-overflow-tooltip="true"
           >
@@ -242,12 +243,12 @@
             </template>
           </el-table-column>
           <el-table-column
-            label="是否管理人员"
+            label="管理人员"
             align="center"
             key="isManager"
             prop="isManager"
             v-if="columns[5].visible"
-            width="120"
+            width="100"
           >
             <template slot-scope="scope">
               {{ scope.row.isManage === "Y" ? "是" : "否" }}
@@ -259,7 +260,7 @@
             key="lastIp"
             prop="lastIp"
             v-if="columns[6].visible"
-            width="120"
+            width="140"
           />
           <el-table-column
             label="登录时间"
@@ -267,7 +268,7 @@
             key="lastTime"
             prop="lastTime"
             v-if="columns[7].visible"
-            width="120"
+            width="140"
           />
           <el-table-column
             label="操作"