Browse Source

居民信息对齐调整

dev2
jiangyy 3 years ago
parent
commit
9b6cd2da28
  1. 6
      src/assets/scss/modules/management/list-main.scss
  2. 10
      src/views/components/rangeInput.vue
  3. 336
      src/views/components/resiSearch.vue

6
src/assets/scss/modules/management/list-main.scss

@ -44,10 +44,14 @@
.item_width_normal{ .item_width_normal{
width: 168px; width: 168px;
} }
//查询栏---日期时间范围的宽度 //查询栏---分开的日期时间范围的宽度
.item_width_daterange{ .item_width_daterange{
width: 206px; width: 206px;
} }
//查询栏---合并的日期时间范围的宽度
.item_width_daterange2{
width: 455px;
}
//查询栏---小区单元楼号级联长度 //查询栏---小区单元楼号级联长度
.item_width_communitycascader{ .item_width_communitycascader{
width: 141px; width: 141px;

10
src/views/components/rangeInput.vue

@ -106,9 +106,9 @@ export default {
max-width: 200px; max-width: 200px;
height: 37px; height: 37px;
} }
// .wd50 { .wd50 {
// // width: 45%; width: 79px;
// } }
.demo-form-inline { .demo-form-inline {
::v-deep { ::v-deep {
.el-form-item { .el-form-item {
@ -127,8 +127,8 @@ export default {
} }
.div_middle { .div_middle {
padding: 0 10px; padding: 0 3px;
position: relative; position: relative;
bottom: 10px; bottom: 10px;
} }
</style> </style>

336
src/views/components/resiSearch.vue

@ -3,170 +3,170 @@
<!-- <el-card class="resi-card"> --> <!-- <el-card class="resi-card"> -->
<div> <div>
<el-form :inline="true" :label-width="'100px'" class="header_form_box" v-for="(item, index) in sliceList(itemList, 4)" :class="boxHeight?'setFormBoxHeightAuto':'setFormBoxHeight'" <el-form :inline="true"
:key="index"> :label-width="'110px'"
<el-form-item v-for="n in item" class="header_form_box"
:key="n.id" v-for="(item, index) in sliceList(itemList, 4)"
:span="computdSpan(item.length)" :class="boxHeight?'setFormBoxHeightAuto':'setFormBoxHeight'"
class="margin0" :key="index">
> <el-form-item v-for="n in item"
<div class="resi-cell"> :key="n.id"
<div class="resi-cell-label" :span="computdSpan(item.length)"
:class="item.length != 4 && 'resi-cell-label1'">{{ n.label }}:</div> :label="n.label"
<div class="resi-cell-value" class="margin0">
:class="n.itemType === 'radio' && 'resi-cell-value-radio'">
<el-input v-if="n.itemType === 'input' || n.itemType === 'textarea'" <el-input v-if="n.itemType === 'input' || n.itemType === 'textarea'"
v-model.trim="form[n.columnName]" v-model.trim="form[n.columnName]"
class="resi-cell-input" class="item_width_normal"
size="small" size="small"
clearable clearable
placeholder="请输入内容"> placeholder="请输入内容">
</el-input> </el-input>
<template v-else-if="n.itemType == 'inputRange'"> <template v-else-if="n.itemType == 'inputRange'">
<!-- <el-input <!-- <el-input
v-model.trim="form[n.columnName]" v-model.trim="form[n.columnName]"
class="resi-cell-input" class="resi-cell-input"
size="small" size="small"
clearable clearable
placeholder="请输入内容" placeholder="请输入内容"
/> --> /> -->
<inputRange v-model="form[n.columnName]" <inputRange v-model="form[n.columnName]"
:type="n.validType" :type="n.validType"
@change="handleAgeChange" /> @change="handleAgeChange" />
</template> </template>
<template v-else-if="n.itemType === 'datepicker'"> <template v-else-if="n.itemType === 'datepicker'">
<el-date-picker v-if="n.queryType === 'daterange'" <el-date-picker v-if="n.queryType === 'daterange'"
v-model.trim="form[n.columnName]" v-model.trim="form[n.columnName]"
type="daterange" type="daterange"
align="right" align="right"
unlink-panels unlink-panels
range-separator="至" range-separator="至"
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期" end-placeholder="结束日期"
class="resi-cell--daterange" class="item_width_daterange2"
size="small" size="small"
format="yyyy-MM-dd" format="yyyy-MM-dd"
value-format="yyyy-MM-dd"> value-format="yyyy-MM-dd">
</el-date-picker> </el-date-picker>
<el-date-picker v-else <el-date-picker v-else
v-model.trim="form[n.columnName]" v-model.trim="form[n.columnName]"
class="resi-cell-input" class="item_width_normal"
type="date" type="date"
size="small" size="small"
clearable clearable
format="yyyy-MM-dd" format="yyyy-MM-dd"
value-format="yyyy-MM-dd" value-format="yyyy-MM-dd"
placeholder="选择日期"> placeholder="选择日期">
</el-date-picker> </el-date-picker>
</template> </template>
<el-select v-else-if="n.itemType === 'select' || n.itemType === 'radio'" <el-select v-else-if="n.itemType === 'select' || n.itemType === 'radio'"
v-model.trim="form[n.columnName]" v-model.trim="form[n.columnName]"
placeholder="请选择" placeholder="请选择"
size="small" size="small"
clearable clearable
class="resi-cell-select" class="item_width_normal"
:collapse-tags="n.multiSelect == 1 ? true : false" :collapse-tags="n.multiSelect == 1 ? true : false"
:multiple="n.multiSelect == 1 ? true : false"> :multiple="n.multiSelect == 1 ? true : false">
<el-option v-for="item in n.options" <el-option v-for="item in n.options"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
<el-cascader v-else-if="n.itemType === 'cascader'" <el-cascader v-else-if="n.itemType === 'cascader'"
v-model.trim="form[n.columnName]" v-model.trim="form[n.columnName]"
:options="n.options" :options="n.options"
:props="{ checkStrictly: true }" :props="{ checkStrictly: true }"
clearable clearable
size="small" size="small"
class="resi-cell-select"> class="resi-cell-select">
</el-cascader> </el-cascader>
<template v-else-if="n.itemType === 'checkbox'"> <template v-else-if="n.itemType === 'checkbox'">
<el-checkbox-group v-model="form[n.columnName]"> <el-checkbox-group v-model="form[n.columnName]">
<el-checkbox v-for="ns in n.options" <el-checkbox v-for="ns in n.options"
:key="ns.value" :key="ns.value"
:label="ns.value">{{ns.label}}</el-checkbox> :label="ns.value">{{ns.label}}</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</template> </template>
</div>
</div>
</el-form-item> </el-form-item>
<el-form-item label="所属组织" prop="agencyIdArray"> <el-form-item label="所属组织"
<el-cascader class="item_width_normal" prop="agencyIdArray">
ref="myCascader" <el-cascader class="item_width_normal"
v-model="agencyIdArray" ref="myCascader"
:options="orgOptions" size="small"
:props="orgOptionProps" v-model="agencyIdArray"
:show-all-levels="false" :options="orgOptions"
@change="handleChangeAgency"></el-cascader> :props="orgOptionProps"
:show-all-levels="false"
@change="handleChangeAgency"></el-cascader>
</el-form-item> </el-form-item>
<el-form-item label="所属房屋" prop="VILLAGE_ID"> <el-form-item label="所属房屋"
<div class="resi-cell"> prop="VILLAGE_ID">
<div class="resi-cell-value">
<el-select v-model.trim="form.VILLAGE_ID" <el-select v-model.trim="form.VILLAGE_ID"
placeholder="请选择小区" placeholder="请选择小区"
size="small" size="small"
filterable filterable
clearable clearable
class="resi-cell-select" class="item_width_communitycascader"
@clear="handleClearVillage" @clear="handleClearVillage"
@change="handleChangeV"> @change="handleChangeV">
<el-option v-for="item in optionsV" <el-option v-for="item in optionsV"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
<el-select v-model.trim="form.BUILD_ID" <el-select v-model.trim="form.BUILD_ID"
placeholder="楼号" placeholder="楼号"
size="small" size="small"
filterable filterable
clearable clearable
style="width: 120px;" style="margin-left:5px"
class="resi-cell-select" class="item_width_buildcascader"
:disabled="changeVDisabled" :disabled="changeVDisabled"
@clear="handleClearBuild" @clear="handleClearBuild"
@change="handleChangeB"> @change="handleChangeB">
<el-option v-for="item in optionsB" <el-option v-for="item in optionsB"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
<el-select v-model.trim="form.UNIT_ID" <el-select v-model.trim="form.UNIT_ID"
:disabled="changeBDisabled" :disabled="changeBDisabled"
placeholder="单元" placeholder="单元"
size="small" size="small"
filterable filterable
clearable clearable
style="width: 120px;" style="margin-left:5px"
class="resi-cell-select" class="item_width_buildcascader"
@click="handleClearDan" @click="handleClearDan"
@change="handleChangeD"> @change="handleChangeD">
<el-option v-for="item in optionsD" <el-option v-for="item in optionsD"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
<el-select v-model.trim="form.HOME_ID" <el-select v-model.trim="form.HOME_ID"
:disabled="changeDDisabled" :disabled="changeDDisabled"
placeholder="房号" placeholder="房号"
size="small" size="small"
filterable filterable
clearable clearable
style="width: 120px;" style="margin-left:5px"
class="resi-cell-select"> class="item_width_buildcascader">
<el-option v-for="item in optionsH" <el-option v-for="item in optionsH"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
</div>
</div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
@ -191,19 +191,25 @@
class="resi-search"> class="resi-search">
<el-col :span="24"> <el-col :span="24">
<el-button type="primary" <el-button size="small"
size="small" class="diy-button--blue"
@click="handleSearch" plain>查询 </el-button> @click="handleSmartSearch">智能查询</el-button>
<el-button style="margin-left:10px" <el-button style="margin-left:10px"
size="small" size="small"
type="primary" class="diy-button--white"
plain
@click="resetForm">重置</el-button> @click="resetForm">重置</el-button>
<el-button type="primary" <el-button class="diy-button--blue"
size="small" size="small"
plain @click="handleSearch">查询 </el-button>
@click="handleSmartSearch">智能查询</el-button>
<span class="font_color_blue" style="cursor:pointer;" @click="boxHeight = !boxHeight">{{boxHeight?'收起':'展开'}} <i :class="boxHeight?'el-icon-arrow-up':'el-icon-arrow-down'"></i></span> <el-button style="margin-left:15px"
size="small"
class="div-table-button--blue"
type="text"
@click="boxHeight = !boxHeight">{{boxHeight?'收起':'展开'}}<i class="el-icon-arrow-down el-icon--right"></i></el-button>
<!-- <span class="font_color_blue"
style="cursor:pointer;"
@click="boxHeight = !boxHeight">{{boxHeight?'收起':'展开'}} <i :class="boxHeight?'el-icon-arrow-up':'el-icon-arrow-down'"></i></span> -->
</el-col> </el-col>
</el-row> </el-row>
@ -288,7 +294,7 @@ export default {
} }
return { return {
boxHeight:false, boxHeight: false,
pageLoading: false, pageLoading: false,
openSearch: false, openSearch: false,
optionsV: [], optionsV: [],
@ -814,7 +820,7 @@ export default {
<style lang="scss" scope> <style lang="scss" scope>
@import "@/assets/scss/modules/management/list-main.scss"; @import "@/assets/scss/modules/management/list-main.scss";
@import "@/assets/scss/modules/visual/communityManage.scss"; @import "@/assets/scss/modules/visual/communityManage.scss";
.header_form_box{ .header_form_box {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }

Loading…
Cancel
Save