Browse Source

居民信息上方样式修改

feature
马魁 3 years ago
parent
commit
1e60f78d04
  1. 144
      src/assets/scss/modules/management/list-main.css
  2. 1
      src/assets/scss/modules/management/list-main.min.css
  3. 4
      src/views/components/rangeInput.vue
  4. 220
      src/views/components/resiSearch.vue
  5. 41
      src/views/modules/base/resi.vue

144
src/assets/scss/modules/management/list-main.css

@ -0,0 +1,144 @@
.div_main {
width: 100%;
}
.div_main .marginl-20 {
margin-left: 16px;
}
.div_main .div_search {
padding: 10px;
background-color: #f6f6f6;
border: 1px solid #D3DCE6;
margin: 7px 7px;
}
.div_main .div_search .div_search_btn {
float: right;
}
.div_main .div_search .div_search_label {
line-height: 36px;
margin-left: 24px;
margin-right: 6px;
font-size: 14px;
color: #606266;
vertical-align: middle;
}
.div_main .data-tag {
margin-left: 10px;
}
.div_main .item_width_normal {
width: 138px;
}
.div_main .item_width_daterange {
width: 176px;
}
.div_main .item_width_buildcascader {
width: 151px;
}
.div_main .div_table {
margin: 15px 7px 7px;
position: relative;
}
.div_main .div_table .div_btn {
display: flex;
justify-content: space-between;
}
.div_main .div_table .div_btn .div_btn_left {
display: flex;
}
.div_main .div_table .div_btn .div_btn_left .btn_upload {
margin-left: 10px;
display: flex;
}
.div_main .div_table .div_table_item {
margin-top: 10px;
position: relative;
}
.div_main .item_width_2 {
width: 138px;
}
.div_main .item_width_1 {
width: 260px;
}
.div_main .item_width_3 {
width: 200px;
}
.div_main .list_item_width_1 {
width: 165px;
}
.div_main .list_item_width_2 {
width: 135px;
}
.div-mult-form {
margin-top: 20px;
}
.div-mult-form .div_person {
display: flex;
font-size: 14px;
padding-bottom: 20px;
}
.div-mult-form .div_person .person_title {
text-align: right;
flex: 0 0 100px;
line-height: 36px;
padding: 0 12px 0 0;
}
.div-mult-form .div_person .tag_item {
margin-right: 10px;
margin-top: 10px;
}
.div-mult-form .div_person .tag_tip {
margin-top: 10px;
color: #9c9c9c;
}
.div-mult-table {
position: relative;
padding: 0 20px;
}
.div-mult-table .div_selcount {
position: absolute;
bottom: 10px;
left: 30px;
}
.div_dialog_table {
padding: 10px;
}
.div_dialog_table .table {
margin-top: 20px;
}
.twoline {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.font_color_blue {
color: #0054d7;
}

1
src/assets/scss/modules/management/list-main.min.css

@ -0,0 +1 @@
.div_main{width:100%}.div_main .marginl-20{margin-left:16px}.div_main .div_search{padding:10px;background-color:#f6f6f6;border:1px solid #D3DCE6;margin:7px 7px}.div_main .div_search .div_search_btn{float:right}.div_main .div_search .div_search_label{line-height:36px;margin-left:24px;margin-right:6px;font-size:14px;color:#606266;vertical-align:middle}.div_main .data-tag{margin-left:10px}.div_main .item_width_normal{width:138px}.div_main .item_width_daterange{width:176px}.div_main .item_width_buildcascader{width:151px}.div_main .div_table{margin:15px 7px 7px;position:relative}.div_main .div_table .div_btn{display:flex;justify-content:space-between}.div_main .div_table .div_btn .div_btn_left{display:flex}.div_main .div_table .div_btn .div_btn_left .btn_upload{margin-left:10px;display:flex}.div_main .div_table .div_table_item{margin-top:10px;position:relative}.div_main .item_width_2{width:138px}.div_main .item_width_1{width:260px}.div_main .item_width_3{width:200px}.div_main .list_item_width_1{width:165px}.div_main .list_item_width_2{width:135px}.div-mult-form{margin-top:20px}.div-mult-form .div_person{display:flex;font-size:14px;padding-bottom:20px}.div-mult-form .div_person .person_title{text-align:right;flex:0 0 100px;line-height:36px;padding:0 12px 0 0}.div-mult-form .div_person .tag_item{margin-right:10px;margin-top:10px}.div-mult-form .div_person .tag_tip{margin-top:10px;color:#9c9c9c}.div-mult-table{position:relative;padding:0 20px}.div-mult-table .div_selcount{position:absolute;bottom:10px;left:30px}.div_dialog_table{padding:10px}.div_dialog_table .table{margin-top:20px}.twoline{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.font_color_blue{color:#0054d7}

4
src/views/components/rangeInput.vue

@ -127,5 +127,7 @@ export default {
.div_middle { .div_middle {
padding: 0 10px; padding: 0 10px;
position: relative;
bottom: 10px;
} }
</style> </style>

220
src/views/components/resiSearch.vue

@ -1,101 +1,17 @@
<template> <template>
<div class="resi-container"> <div class="resi-container">
<!-- <el-card class="resi-card"> --> <!-- <el-card class="resi-card"> -->
<el-row> <div>
<el-row v-if="showGrid"
class="resi-row">
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属组织</div>
<div class="resi-cell-value">
<el-cascader class="customer_cascader"
ref="myCascader"
v-model="agencyIdArray"
:options="orgOptions"
:props="orgOptionProps"
:show-all-levels="false"
@change="handleChangeAgency"></el-cascader>
</div>
</div>
</el-col>
<el-col :span="18"> <el-form :inline="true" :label-width="'100px'" class="header_form_box" v-for="(item, index) in sliceList(itemList, 4)"
<div class="resi-cell"> :key="index">
<div class="resi-cell-label">所属房屋</div> <el-form-item v-for="n in item"
<div class="resi-cell-value">
<el-select v-model.trim="form.VILLAGE_ID"
placeholder="请选择小区"
size="small"
filterable
clearable
class="resi-cell-select"
@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="width: 120px;"
class="resi-cell-select"
: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="width: 120px;"
class="resi-cell-select"
@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="width: 120px;"
class="resi-cell-select">
<el-option v-for="item in optionsH"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
</el-col>
</el-row>
<el-row v-for="(item, index) in sliceList(itemList, 4)"
:key="index"
class="resi-row">
<el-col v-for="n in item"
:key="n.id" :key="n.id"
:span="computdSpan(item.length)"> :span="computdSpan(item.length)"
>
<div class="resi-cell"> <div class="resi-cell">
<div class="resi-cell-label" <div class="resi-cell-label"
:class="item.length != 4 && 'resi-cell-label1'">{{ n.label }}</div> :class="item.length != 4 && 'resi-cell-label1'">{{ n.label }}:</div>
<div class="resi-cell-value" <div class="resi-cell-value"
:class="n.itemType === 'radio' && 'resi-cell-value-radio'"> :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'"
@ -169,14 +85,90 @@
<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>
</div> </div>
</el-col> </el-form-item>
</el-row>
</el-row> <el-form-item label="所属组织" prop="agencyIdArray">
<el-cascader class="item_width_normal"
ref="myCascader"
v-model="agencyIdArray"
:options="orgOptions"
:props="orgOptionProps"
:show-all-levels="false"
@change="handleChangeAgency"></el-cascader>
</el-form-item>
<el-form-item label="所属房屋" prop="VILLAGE_ID">
<div class="resi-cell">
<div class="resi-cell-value">
<el-select v-model.trim="form.VILLAGE_ID"
placeholder="请选择小区"
size="small"
filterable
clearable
class="resi-cell-select"
@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="width: 120px;"
class="resi-cell-select"
: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="width: 120px;"
class="resi-cell-select"
@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="width: 120px;"
class="resi-cell-select">
<el-option v-for="item in optionsH"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
</el-form-item>
</el-form>
</div>
<el-row v-if="showSmartSearchForm" <el-row v-if="showSmartSearchForm"
class="resi-row-more"> class="resi-row-more">
@ -194,23 +186,23 @@
:formType="formType"></smart-search-rule> :formType="formType"></smart-search-rule>
</el-col> </el-col>
</el-row> </el-row>
<el-row v-if="isArrow" <el-row v-if="isArrow"
class="resi-search"> class="resi-search">
<el-col :span="24"> <el-col :span="24">
<el-button type="primary" <el-button type="primary"
size="small" size="small"
class="diy-button--blue" @click="handleSearch" plain>查询 </el-button>
@click="handleSearch">查询</el-button>
<el-button type="primary"
size="small"
class="diy-button--orange"
@click="handleSmartSearch">智能查询</el-button>
<el-button style="margin-left:10px" <el-button style="margin-left:10px"
size="small" size="small"
class="diy-button--gray" type="primary"
plain
@click="resetForm">重置</el-button> @click="resetForm">重置</el-button>
<el-button type="primary"
size="small"
plain
@click="handleSmartSearch">智能查询</el-button>
<span class="font_color_blue">收起 <i class="el-icon-arrow-up"></i></span>
</el-col> </el-col>
</el-row> </el-row>
@ -262,6 +254,7 @@ export default {
return _form return _form
} }
let itemList = this.formList.map(item => { let itemList = this.formList.map(item => {
console.log(item);
if (item.itemType == 'inputRange' && item.funType == 'agetoyear') { if (item.itemType == 'inputRange' && item.funType == 'agetoyear') {
item.columnName = 'age' item.columnName = 'age'
} }
@ -362,7 +355,7 @@ export default {
'AGENCY_ID': 'like' 'AGENCY_ID': 'like'
}, },
showSmartSearchForm: true, showSmartSearchForm: false,
formType: 'add', formType: 'add',
selBtnIndex: 1, selBtnIndex: 1,
btnList: [ btnList: [
@ -380,7 +373,7 @@ export default {
nextLogicalRel: "", nextLogicalRel: "",
nextLogicalRelName: "", nextLogicalRelName: "",
personRule: { personRule: {
ruleDesc: '',// ruleDesc: '',//
itemGroupId: '', itemGroupId: '',
itemId: '', itemId: '',
queryType: '', queryType: '',
@ -466,12 +459,13 @@ export default {
let index = 0 let index = 0
let arrTemp = [] let arrTemp = []
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
index = parseInt(i / count) index = parseInt(0)
if (arrTemp.length <= index) { if (arrTemp.length <= index) {
arrTemp.push([]) arrTemp.push([])
} }
arrTemp[index].push(data[i]) arrTemp[index].push(data[i])
} }
console.log(arrTemp);
return arrTemp return arrTemp
} }
} }
@ -816,17 +810,11 @@ export default {
</script> </script>
<style lang="scss" scope> <style lang="scss" scope>
.resi-row-more { @import "@/assets/scss/modules/management/list-main.scss";
height: max-content;
transition: height 0.5s;
width: 100%;
border-top: 1px dotted #8b8b8b; .header_form_box{
margin-top: 5px; display: flex;
padding-top: 15px; flex-wrap: wrap;
}
.resi-row {
margin-bottom: 14px;
} }
.resi-search { .resi-search {
// padding-right: 20px; // padding-right: 20px;

41
src/views/modules/base/resi.vue

@ -27,7 +27,7 @@
<!-- </template> --> <!-- </template> -->
<!-- <el-row v-if="openSearch" <!-- <el-row v-if="openSearch"
class="resi-search"> class="resi-search">
<el-col :span="24"> <el-col :span="24">
<el-button size="small" <el-button size="small"
class="diy-button--blue" class="diy-button--blue"
@ -52,20 +52,18 @@
<div class="div_btn_left"> <div class="div_btn_left">
<el-button v-if="btnAuths.ic_resi_add" <el-button v-if="btnAuths.ic_resi_add"
size="small" size="small"
class="diy-button--purple" @click="handleAdd" plain type="primary"> <i class="el-icon-plus"></i> 新增小区</el-button>
@click="handleAdd">新增</el-button>
<el-button v-if="btnAuths.ic_resi_export" <el-button v-if="btnAuths.ic_resi_export"
style="margin-left:10px" style="margin-left:10px"
class="diy-button--green"
size="small" size="small"
@click="diyExport">导出</el-button> @click="diyExport" plain type="primary">导出</el-button>
<el-button v-if="btnAuths.ic_resi_import" <!-- <el-button v-if="btnAuths.ic_resi_import"
style="margin-left:10px" style="margin-left:10px"
class="diy-button--blue" class="diy-button--blue"
size="small" size="small"
@click="handleExportModule('room')">下载模板</el-button> @click="handleExportModule('room')">下载模板</el-button> -->
<el-upload v-if="btnAuths.ic_resi_import" <!-- <el-upload v-if="btnAuths.ic_resi_import"
:headers="$getElUploadHeaders()" :headers="$getElUploadHeaders()"
ref="upload" ref="upload"
class="upload-demo" class="upload-demo"
@ -83,20 +81,20 @@
class="diy-button--yellow" class="diy-button--yellow"
size="small" size="small"
:loading="importLoading">{{ importBtnTitle }}</el-button> :loading="importLoading">{{ importBtnTitle }}</el-button>
</el-upload> </el-upload> -->
<el-button v-if="btnAuths.ic_resi_smart_import && displayedBaobiaoBtn"
style="margin-left:10px"
size="small"
@click="reportForm" plain type="primary">核对</el-button>
<el-button style="margin-left:10px" <el-button style="margin-left:10px"
v-if="btnAuths.ic_resi_batch_del" v-if="btnAuths.ic_resi_batch_del"
class="diy-button--red"
size="small" size="small"
@click="deleteBatch">批量删除</el-button> @click="deleteBatch" plain type="primary">批量删除</el-button>
<!-- <el-button type="primary" size="small">下载人口模板</el-button> --> <!-- <el-button type="primary" size="small">下载人口模板</el-button> -->
<el-button v-if="btnAuths.ic_resi_smart_import && displayedBaobiaoBtn"
style="margin-left:10px"
class="diy-button--orange"
size="small"
@click="reportForm">智能填报</el-button>
</div> </div>
</div> </div>
@ -1456,6 +1454,7 @@ export default {
background: #ebecf1; background: #ebecf1;
border-radius: 2px; border-radius: 2px;
} }
::v-deep .el-tabs__nav-wrap::after, ::v-deep .el-tabs__nav-wrap::after,
::v-deep .el-tabs__active-bar { ::v-deep .el-tabs__active-bar {
display: none; display: none;
@ -1478,6 +1477,16 @@ export default {
position: relative; position: relative;
overflow: visible; overflow: visible;
} }
::v-deep .el-button--primary.is-plain{
color: #0055d7;
background: #ffffff;
border-color: #0055d7;
}
::v-deep .el-button--primary.is-plain:hover{
color: #fff;
background: #0055d7;
border-color: #0055d7;
}
.resi-container .resi-card-table { .resi-container .resi-card-table {
::v-deep .el-table th { ::v-deep .el-table th {
color: #fff; color: #fff;

Loading…
Cancel
Save