机构管理页面 使用公共页面布局

src/views/system/dept/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="app-container">
-    <el-row :gutter="20">
+    <!-- <el-row :gutter="20"> -->
       <!--机构数据-->
-      <el-col :span="4" :xs="24">
+      <!-- <el-col :span="4" :xs="24"> -->
         <!-- <div class="head-container">
           <el-input
             v-model="deptName"
@@ -30,7 +30,8 @@
             :default-checked-keys="defaultKeys"
             @node-click="handleNodeClick"
           /> -->
-          <div class="tree-container">
+          <!-- <div class="tree-container"> -->
+            <layoutCom>
           <org-tree
         slot="leftBar"
         v-model="queryParams.orgId"
@@ -38,11 +39,13 @@
         @checkChange="checkChange"
         @click="handleNodeClick"
       ></org-tree>
-        </div>
-      </el-col>
+        <!-- </div> -->
+      <!-- </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"
@@ -256,7 +259,8 @@
           @pagination="getList"
         />
       </el-col>
-    </el-row>
+      </el-row>
+      </layoutCom>
 
     <!-- 添加或修改机构对话框 -->
     <DialogCom