elink-star
/
epmet-work-pc
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

居民信息对齐调整

V1.0
jiangyy 3 years ago
parent
aa860a0c4d
commit
9b6cd2da28
3 changed files with 181 additions and 171 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

@ -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
View File

@ -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
View File

@ -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;
} }

Write Preview
Loading…
Cancel
Save