机构选择组件 筛选条件布局调整

src/components/orgSelect/index.vue

@@ -3,11 +3,11 @@
   <div>
 
     <div style="width: 98%;">
-      <div class="tags-box" :class="{'tags-box-disabled':!disabled,'tags-box-mini':size === 'mini'}" @click="showDialog">
+      <div class="tags-box" :class="{'tags-box-disabled':disabled,'tags-box-mini':size === 'mini'}" @click="showDialog">
         <el-tag type="success" :size="size" v-for="v in currentTempList" :key="v.id">{{ v.shortName }}</el-tag>
 
       </div>
-      <div  class="tags_last" :class="{'tags-box-disabled':!disabled}">
+      <div  class="tags_last" :class="{'tags-box-disabled':disabled}">
         <i v-if="currentTempList.length > 0 && !disabled" class="el-icon-circle-close close-icon" @click="clear"></i>
         <span v-show="currentTempList.length > 0" class="tags-num">{{ currentTempList.length }}</span>
       </div>
@@ -37,7 +37,9 @@
               size="mini"
               style="width: 95%"
             >
-              <el-form-item label="上级机构：">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="上级机构：">
                 <tree-select
                   v-model="left.condition.orgId"
                   :searchable="searchable"
@@ -54,10 +56,9 @@
                   noResultsText="没有搜索结果"
                 />
               </el-form-item>
-              <!--            <el-form-item >
-                            <el-checkbox v-model="left.condition.searchChild" @change="leftSearch">是否包含下级</el-checkbox>
-                          </el-form-item>-->
-              <el-form-item label="机构类型：">
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="机构类型：">
                 <el-select
                   prop="type"
                   label="机构类型"
@@ -75,13 +76,23 @@
                   />
                 </el-select>
               </el-form-item>
-              <el-form-item label="机构名称：">
+              </el-col>
+            </el-row>
+            
+              <!--            <el-form-item >
+                            <el-checkbox v-model="left.condition.searchChild" @change="leftSearch">是否包含下级</el-checkbox>
+                          </el-form-item>-->
+             <el-row>
+               <el-col :span="12">
+                <el-form-item label="机构名称：">
                 <el-input
                   v-model="left.condition.orgName"
                   clearable
                   @input="leftSearch"
                 ></el-input>
               </el-form-item>
+              </el-col>
+             </el-row>            
             </el-form>
             <el-row class="result_row">
               <el-col :span="12">搜索结果</el-col>
@@ -91,8 +102,8 @@
               >
             </el-row>
             <el-table
-              style="width: 100%"
-              height="calc(100% - 100px)"
+              style="width: 99%;margin:auto;"
+              height="calc(100% - 148px)"
               :data="left.data"
               @selection-change="handleLeftSelectionChange"
             >
@@ -121,7 +132,9 @@
               size="mini"
               style="width: 95%"
             >
-              <el-form-item label="组织机构：">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="组织机构：">
                 <tree-select
                   v-model="right.condition.orgId"
                   :searchable="searchable"
@@ -139,10 +152,9 @@
                 />
 
               </el-form-item>
-              <!--            <el-form-item >
-                            <el-checkbox v-model="right.condition.searchChild" @change="rightSearch">是否包含下级</el-checkbox>
-                          </el-form-item>-->
-              <el-form-item label="机构类型：">
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="机构类型：">
                 <el-select
                   prop="type"
                   label="机构类型"
@@ -160,13 +172,23 @@
                   />
                 </el-select>
               </el-form-item>
-              <el-form-item label="机构名称：">
+              </el-col>
+            </el-row>
+              
+              <!--            <el-form-item >
+                            <el-checkbox v-model="right.condition.searchChild" @change="rightSearch">是否包含下级</el-checkbox>
+                          </el-form-item>-->
+             <el-row>
+               <el-col :span="12">
+                <el-form-item label="机构名称：">
                 <el-input
                   v-model="right.condition.orgName"
                   clearable
                   @input="rightSearch"
                 ></el-input>
               </el-form-item>
+              </el-col>
+             </el-row>             
             </el-form>
             <el-row class="result_row">
               <el-col :span="12">搜索结果</el-col>
@@ -176,7 +198,8 @@
               >
             </el-row>
             <el-table
-              height="calc(100% - 100px)"
+              style="width: 99%;margin:auto;"
+              height="calc(100% - 148px)"
               :data="right.data"
               @selection-change="handleRightSelectionChange"
             >
@@ -557,7 +580,7 @@ export default {
 }
 
 .el-row-top {
-  height: 500px;
+  height: 550px;
   display: flex;
 
   v-deep & > .el-col {

src/components/orgSelect/zl.orgSelect.vue

@@ -23,7 +23,7 @@
     >
       <el-row class="el-row-top">
         <el-col :span="11">          
-          <el-card class="box-card leftbox" :body-style="{ height: '100%' }">
+          <el-card class="box-card" :body-style="{ height: '100%' }">
             <el-row class="result_row">
               <el-col :span="12">搜索条件</el-col>
             </el-row>
@@ -32,8 +32,10 @@
               v-model="left.condition"
               label-width="120px"
               size="mini"
-              style="width: 95%"
+              style="width:95%"
             >
+            <el-row>
+            <el-col :span="12">
               <el-form-item label="组织机构：">
                 <tree-select
                   v-model="left.condition.orgId"
@@ -54,6 +56,8 @@
               <!--            <el-form-item >
                             <el-checkbox v-model="left.condition.searchChild" @change="leftSearch">是否包含下级</el-checkbox>
                           </el-form-item>-->
+            </el-col>
+            <el-col :span="12">
               <el-form-item label="机构类型：">
                 <el-select
                   prop="type"
@@ -73,6 +77,19 @@
                   />
                 </el-select>
               </el-form-item>
+            </el-col>   
+            </el-row>
+            <el-row>               
+            <el-col :span="12">
+              <el-form-item label="机构名称：">
+                <el-input
+                  v-model="left.condition.orgName"
+                  clearable
+                  @input="leftSearch"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12" v-if="left.condition.orgType==4">
               <el-form-item label="网点层级：" >
                 <el-select
                   prop="type"
@@ -91,13 +108,8 @@
                   />
                 </el-select>
               </el-form-item>
-              <el-form-item label="机构名称：">
-                <el-input
-                  v-model="left.condition.orgName"
-                  clearable
-                  @input="leftSearch"
-                ></el-input>
-              </el-form-item>
+            </el-col>
+            </el-row>
             </el-form>
             <el-row class="result_row">
               <el-col :span="12">搜索结果</el-col>
@@ -107,8 +119,8 @@
               >
             </el-row>
             <el-table
-              style="width: 100%"
-              height="calc(100% - 248px)"
+              style="width: 99%;margin:auto;"
+              height="calc(100% - 154px)"
               :data="left.data"
               @selection-change="handleLeftSelectionChange"
             >
@@ -137,6 +149,9 @@
               size="mini"
               style="width: 95%"
             >
+            <el-row>
+              <el-col :span="12">
+           
               <el-form-item label="组织机构：">
                 <tree-select
                   v-model="right.condition.orgId"
@@ -155,6 +170,8 @@
                 />
 
               </el-form-item>
+            </el-col>
+            <el-col :span="12">
               <!--            <el-form-item >
                             <el-checkbox v-model="right.condition.searchChild" @change="rightSearch">是否包含下级</el-checkbox>
                           </el-form-item>-->
@@ -176,6 +193,19 @@
                   />
                 </el-select>
               </el-form-item>
+            </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+              <el-form-item label="机构名称：">
+                <el-input
+                  v-model="right.condition.orgName"
+                  clearable
+                  @input="rightSearch"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+              <el-col :span="12" v-if="right.condition.orgType==4">
               <el-form-item label="网点层级：" >
                 <el-select
                   prop="type"
@@ -194,13 +224,8 @@
                   />
                 </el-select>
               </el-form-item>
-              <el-form-item label="机构名称：">
-                <el-input
-                  v-model="right.condition.orgName"
-                  clearable
-                  @input="rightSearch"
-                ></el-input>
-              </el-form-item>
+              </el-col>              
+            </el-row>
             </el-form>
             <el-row class="result_row">
               <el-col :span="12">搜索结果</el-col>
@@ -210,7 +235,8 @@
               >
             </el-row>
             <el-table
-              height="calc(100% - 248px)"
+              style="width: 99%;margin:auto;"
+              height="calc(100% - 154px)"
               :data="right.data"
               @selection-change="handleRightSelectionChange"
             >