搜索栏

src/views/components/resiSearch.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="resi-container">
     <!-- <el-card class="resi-card"> -->
-    <div>
+    <div class="g-main">
 
       <el-form :inline="true" class="header_form_box" v-for="(item, index) in sliceList(itemList, 4)"
-        :class="boxHeight ? 'setFormBoxHeightAuto' : 'setFormBoxHeight'" :key="index">
+        :class="boxHeight ? 'm-form-box-height-auto' : 'm-form-box-height'" :key="index">
         <el-form-item v-for="n in item" :key="n.id">
           <div class="resi-cell">
             <div style="width:100px;text-align: right;padding-right:14px ;">{{ n.label }}:</div>
             <div class="resi-cell-value" :class="n.itemType === 'radio' && 'resi-cell-value-radio'">
               <el-input v-if="n.itemType === 'input' || n.itemType === 'textarea'" v-model.trim="form[n.columnName]"
-                class="item_width_normal" size="small" clearable placeholder="请输入内容">
+                class="u-item-width-normal" size="small" clearable placeholder="请输入内容">
               </el-input>
               <template v-else-if="n.itemType == 'inputRange'">
                 <!-- <el-input
@@ -23,12 +23,12 @@
                 <inputRange style="height:37px;" v-model="form[n.columnName]" :type="n.validType" @change="handleAgeChange" />
               </template>
               <template v-else-if="n.itemType === 'datepicker'">
-                  <el-date-picker style="width:218px ;" v-if="n.queryType === 'daterange'" v-model.trim="timer.startPickerTime"
+                  <el-date-picker  v-if="n.queryType === 'daterange'" v-model.trim="timer.startPickerTime"
                   :picker-options="startPickerOptions" type="date" align="right" unlink-panels placeholder="开始时间"
-                  class="item_width_daterange" size="small" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
+                  class="u-item-width-daterange" style="margin-right:34px;" size="small" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                 </el-date-picker>
-                <el-date-picker style="width:219px ;" v-if="n.queryType === 'daterange'" v-model.trim="timer.endPickerTime"
+                <el-date-picker  v-if="n.queryType === 'daterange'" v-model.trim="timer.endPickerTime"
-                  :picker-options="endPickerOptions" class="item_width_daterange data-tag" size="small" type="date"
+                  :picker-options="endPickerOptions" class="u-item-width-daterange data-tag" size="small" type="date"
                   value-format="yyyy-MM-dd" value="yyyy-MM-dd" placeholder="结束时间">
                 </el-date-picker>
                 <el-date-picker v-else v-model.trim="form[n.columnName]" class="resi-cell-input" type="inputRange"
@@ -36,7 +36,7 @@
                 </el-date-picker>
               </template>
               <el-select v-else-if="n.itemType === 'select' || n.itemType === 'radio'" v-model.trim="form[n.columnName]"
-                placeholder="请选择" size="small" clearable class="item_width_normal"
+                placeholder="请选择" size="small" clearable class="u-item-width-normal"
                 :collapse-tags="n.multiSelect == 1 ? true : false" :multiple="n.multiSelect == 1 ? true : false">
                 <el-option v-for="item in n.options" :key="item.value" :label="item.label" :value="item.value">
                 </el-option>
@@ -55,7 +55,7 @@
 
         <el-form-item  prop="agencyIdArray">
           <span style="width:100px;text-align: right;padding-right:14px;display: inline-block; " >所属组织:</span>
-          <el-cascader class="item_width_normal" ref="myCascader" v-model="agencyIdArray" :options="orgOptions"
+          <el-cascader class="u-item-width-normal" ref="myCascader" v-model="agencyIdArray" :options="orgOptions"
             :props="orgOptionProps" :show-all-levels="false" @change="handleChangeAgency"></el-cascader>
         </el-form-item>
 
@@ -64,24 +64,24 @@
             <div class="resi-cell-value">
               <span style="width:100px;text-align: right;padding-right:14px;display: inline-block; " >所属房屋:</span>
               <el-select v-model.trim="form.VILLAGE_ID" placeholder="请选择小区" size="small" filterable clearable
-                class="item_width_communitycascader" @clear="handleClearVillage" @change="handleChangeV">
+                class="u-item-width-communitycascader" @clear="handleClearVillage" @change="handleChangeV">
                 <el-option v-for="item in optionsV" :key="item.value" :label="item.label" :value="item.value">
                 </el-option>
               </el-select>
               <el-select v-model.trim="form.BUILD_ID" placeholder="楼号" size="small" filterable clearable
-                style="margin-left: 5px" class="item_width_buildcascader" :disabled="changeVDisabled" @clear="handleClearBuild"
+                style="margin-left: 5px" class="u-item-width-buildcascader" :disabled="changeVDisabled" @clear="handleClearBuild"
                 @change="handleChangeB">
                 <el-option v-for="item in optionsB" :key="item.value" :label="item.label" :value="item.value">
                 </el-option>
               </el-select>
               <el-select v-model.trim="form.UNIT_ID" :disabled="changeBDisabled" placeholder="单元" size="small"
-                filterable clearable style="margin-left: 5px" class="item_width_buildcascader" @click="handleClearDan"
+                filterable clearable style="margin-left: 5px" class="u-item-width-buildcascader" @click="handleClearDan"
                 @change="handleChangeD">
                 <el-option v-for="item in optionsD" :key="item.value" :label="item.label" :value="item.value">
                 </el-option>
               </el-select>
               <el-select v-model.trim="form.HOME_ID" :disabled="changeDDisabled" placeholder="房号" size="small"
-                filterable clearable style="margin-left: 5px" class="item_width_buildcascader">
+                filterable clearable style="margin-left: 5px" class="u-item-width-buildcascader">
                 <el-option v-for="item in optionsH" :key="item.value" :label="item.label" :value="item.value">
                 </el-option>
               </el-select>
@@ -796,9 +796,6 @@ export default {
 
 <style lang="scss" scope>
 @import "@/assets/scss/modules/management/list-main.scss";
-@import "@/assets/scss/modules/visual/communityManage.scss";
-
-
 
 .header_form_box {
   display: flex;
@@ -810,6 +807,7 @@ export default {
     text-align: right;
   }
 }
+
 .resi-container .resi-cell {
   display: flex;
   align-items: center;
@@ -836,10 +834,15 @@ export default {
   .resi-cell--daterange {
     max-width: 240px;
   }
+  .el-form--inline {
+  ::v-deep .el-form-item{
+  margin-right: 0px !important;
+}
+}
   .resi-cell-select {
     max-width: 200px;
     box-sizing: border-box;
-    margin-right: 10px;
+   
     &-middle {
       width: 130px;
     }