迁移
This commit is contained in:
		
							
								
								
									
										68
									
								
								project/sass/apps/AppBuildManage/AppBuildManage.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										68
									
								
								project/sass/apps/AppBuildManage/AppBuildManage.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,68 @@ | ||||
| <template> | ||||
|   <div class="AppBuildManage"> | ||||
|     <keep-alive :include="['List']"> | ||||
|       <component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component> | ||||
|     </keep-alive> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import List from './components/List' | ||||
| import Add from './components/Add' | ||||
| import BuildMsg from './components/BuildMsg' | ||||
|  | ||||
| export default { | ||||
|   label: '楼栋管理', | ||||
|   name: 'AppBuildManage', | ||||
|   props: { | ||||
|     instance: Function, | ||||
|     dict: Object, | ||||
|   }, | ||||
|  | ||||
|   data() { | ||||
|     return { | ||||
|       component: 'List', | ||||
|       params: {}, | ||||
|       include: [], | ||||
|     } | ||||
|   }, | ||||
|  | ||||
|   components: { | ||||
|     Add, | ||||
|     List, | ||||
|     BuildMsg, | ||||
|   }, | ||||
|   methods: { | ||||
|     onChange(data) { | ||||
|       if (data.type === 'add') { | ||||
|         this.component = 'Add' | ||||
|         this.params = data.params | ||||
|       } | ||||
|  | ||||
|       if (data.type === 'buildmsg') { | ||||
|         this.component = 'BuildMsg' | ||||
|         this.params = { ...data.params } | ||||
|       } | ||||
|  | ||||
|       if (data.type == 'list') { | ||||
|         this.component = 'List' | ||||
|         this.params = data.params | ||||
|  | ||||
|         this.$nextTick(() => { | ||||
|           if (data.isRefresh) { | ||||
|             this.$refs.component.getList() | ||||
|           } | ||||
|         }) | ||||
|       } | ||||
|     }, | ||||
|   }, | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style lang="scss"> | ||||
| .AppBuildManage { | ||||
|   height: 100%; | ||||
|   background: #f3f6f9; | ||||
|   overflow: auto; | ||||
| } | ||||
| </style> | ||||
							
								
								
									
										402
									
								
								project/sass/apps/AppBuildManage/components/Add.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										402
									
								
								project/sass/apps/AppBuildManage/components/Add.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,402 @@ | ||||
| <template> | ||||
|   <section style="height: 100%" class="AppBuildManage"> | ||||
|     <ai-detail class="Add"> | ||||
|       <!-- 返回按钮 --> | ||||
|       <template #title> | ||||
|         <ai-title :title="isEdit ? '编辑楼栋信息' : '添加楼栋'" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title> | ||||
|       </template> | ||||
|  | ||||
|       <template #content> | ||||
|         <el-form :model="formData" :rules="formRules" ref="ruleForm" label-width="150px" label-suffix=":" align-items="center"> | ||||
|           <!-- 小区名称 --> | ||||
|           <ai-bar title="基础信息"></ai-bar> | ||||
|           <el-form-item label="小区名称" prop="communityName" class="line" ref="communityNameContent"> | ||||
|             <!-- 选择小区 --> | ||||
|             <ai-select v-if="instance" :instance="instance" v-model="formData.communityId" action="/app/appcommunityinfo/listAll" :prop="{ label: 'communityName' }"></ai-select> | ||||
|           </el-form-item> | ||||
|  | ||||
|           <div class="flex"> | ||||
|             <!-- 楼栋号 --> | ||||
|             <el-form-item label="楼栋号" prop="buildingNumber" :rules="[{ required: true, message: '请输入楼栋号', trigger: 'blur' }]"> | ||||
|               <el-input size="small" v-model="formData.buildingNumber" placeholder="请输入" clearable :disabled="isEdit" /> | ||||
|             </el-form-item> | ||||
|  | ||||
|             <!-- 单元数 --> | ||||
|             <el-form-item label="单元数" prop="unitNumber"> | ||||
|               <el-input size="small" v-model.number="formData.unitNumber" placeholder="请输入" clearable :disabled="isEdit" /> | ||||
|             </el-form-item> | ||||
|  | ||||
|             <!-- 起始计数层数 --> | ||||
|             <el-form-item label="起始计数层数" prop="layerStart"> | ||||
|               <el-input size="small" v-model.number="formData.layerStart" placeholder="请输入" clearable :disabled="isEdit"></el-input> | ||||
|             </el-form-item> | ||||
|  | ||||
|             <!-- 最高层数 --> | ||||
|             <el-form-item label="最高层数" prop="layerNumber"> | ||||
|               <el-input size="small" v-model.number="formData.layerNumber" placeholder="请输入" clearable :disabled="isEdit"></el-input> | ||||
|             </el-form-item> | ||||
|  | ||||
|             <!-- 起始计数户数 --> | ||||
|             <el-form-item label="起始计数户数" prop="householdStart"> | ||||
|               <el-input size="small" v-model.number="formData.householdStart" placeholder="请输入" clearable :disabled="isEdit"></el-input> | ||||
|             </el-form-item> | ||||
|  | ||||
|             <!-- 每层户数 --> | ||||
|             <el-form-item label="每层户数" prop="householdNumber"> | ||||
|               <el-input size="small" v-model.number="formData.householdNumber" placeholder="请输入" clearable :disabled="isEdit"></el-input> | ||||
|             </el-form-item> | ||||
|  | ||||
|             <!-- 楼栋长姓名 --> | ||||
|             <el-form-item label="楼栋长姓名" prop="managerName"> | ||||
|               <el-input size="small" v-model="formData.managerName" placeholder="请输入" clearable></el-input> | ||||
|             </el-form-item> | ||||
|  | ||||
|             <!-- 楼栋长联系方式 --> | ||||
|             <el-form-item label="楼栋长联系方式" prop="managerPhone"> | ||||
|               <el-input size="small" v-model.number="formData.managerPhone" placeholder="请输入" clearable></el-input> | ||||
|             </el-form-item> | ||||
|  | ||||
|             <!-- 房屋类别 --> | ||||
|             <el-form-item label="房屋类别" prop="buildingType" class="buildingTypes"> | ||||
|               <el-radio-group v-model="formData.buildingType"> | ||||
|                 <el-radio label="0">单元(公寓)楼</el-radio> | ||||
|                 <el-radio label="1">筒子楼</el-radio> | ||||
|                 <el-radio label="2">别墅</el-radio> | ||||
|  | ||||
|                 <el-radio label="3">自建楼</el-radio> | ||||
|                 <el-radio label="4">平房</el-radio> | ||||
|                 <el-radio label="5">高层公共建筑</el-radio> | ||||
|  | ||||
|                 <el-radio label="6">商住两用</el-radio> | ||||
|                 <el-radio label="7">其它</el-radio> | ||||
|               </el-radio-group> | ||||
|             </el-form-item> | ||||
|  | ||||
|             <!-- 楼栋经度坐标 --> | ||||
|             <el-form-item label="楼栋经度坐标" prop="lng"> | ||||
|               <el-input size="small" v-model="formData.lng" placeholder="请输入" clearable></el-input> | ||||
|             </el-form-item> | ||||
|  | ||||
|             <!-- 楼栋纬度坐标 --> | ||||
|             <el-form-item label="楼栋纬度坐标" prop="lat"> | ||||
|               <el-input size="small" v-model="formData.lat" placeholder="请输入" clearable></el-input> | ||||
|             </el-form-item> | ||||
|  | ||||
|             <!-- 地图位置 --> | ||||
|             <el-form-item label="地图位置" prop="lat"> | ||||
|               <el-button @click="showMap = true">地图标绘</el-button> | ||||
|             </el-form-item> | ||||
|           </div> | ||||
|         </el-form> | ||||
|       </template> | ||||
|  | ||||
|       <!-- 底部按钮 --> | ||||
|       <template #footer> | ||||
|         <el-button @click="cancel">取消</el-button> | ||||
|         <el-button type="primary" @click="confirm()">提交</el-button> | ||||
|       </template> | ||||
|     </ai-detail> | ||||
|     <ai-dialog title="地图" :visible.sync="showMap" @opened="getCorpLocation" width="800px" class="mapDialog" @onConfirm="selectMap"> | ||||
|       <div id="map"></div> | ||||
|       <el-form label-width="80px" style="padding: 10px 20px 0 20px;"> | ||||
|         <el-row type="flex" justify="space-between"> | ||||
|           <el-form-item label="经度"> | ||||
|             <el-input disabled size="small" v-model="placeDetail.lng"></el-input> | ||||
|           </el-form-item> | ||||
|           <el-form-item label="纬度"> | ||||
|             <el-input disabled size="small" v-model="placeDetail.lat"></el-input> | ||||
|           </el-form-item> | ||||
|         </el-row> | ||||
|       </el-form> | ||||
|       <el-input id="searchPlaceInput" size="medium" class="searchPlaceInput" clearable v-model="searchPlace" autocomplete="on" @change="placeSearch.search(searchPlace)" placeholder="请输入关键字"> | ||||
|         <el-button type="primary" slot="append" @click="placeSearch.search(searchPlace)">搜索</el-button> | ||||
|       </el-input> | ||||
|       <div id="searchPlaceOutput" /> | ||||
|     </ai-dialog> | ||||
|   </section> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import { mapState } from 'vuex' | ||||
| import AMapLoader from '@amap/amap-jsapi-loader' | ||||
|  | ||||
| export default { | ||||
|   name: 'Add', | ||||
|   components: {}, | ||||
|   props: { | ||||
|     dict: Object, | ||||
|     params: Object, | ||||
|     instance: Function, | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       formData: { | ||||
|         communityName: '', | ||||
|         buildingNumber: '', | ||||
|         unitNumber: '', | ||||
|         layerStart: '1', | ||||
|         layerNumber: '', | ||||
|         householdStart: '1', | ||||
|         householdNumber: '', | ||||
|         managerName: '', | ||||
|         managerPhone: '', | ||||
|         lng: '', | ||||
|         lat: '', | ||||
|         id: '', // 小区编号 | ||||
|         buildingType: '0', | ||||
|         communityId: '', | ||||
|       }, | ||||
|       formRules: { | ||||
|         unitNumber: [ | ||||
|           { required: true, message: '请输入单元数', trigger: 'change' }, | ||||
|           { | ||||
|             validator: (r, v, cb) => (!v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb('请输入正整数')), | ||||
|           }, | ||||
|         ], | ||||
|         layerStart: [ | ||||
|           { required: true, message: '请输入起始计数层数', trigger: 'change' }, | ||||
|           { | ||||
|             validator: (r, v, cb) => (!v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb('请输入正整数')), | ||||
|           }, | ||||
|         ], | ||||
|  | ||||
|         layerNumber: [ | ||||
|           { required: true, message: '请输入最高层数', trigger: 'change' }, | ||||
|           { | ||||
|             validator: (r, v, cb) => (!v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb('请输入正整数')), | ||||
|           }, | ||||
|         ], | ||||
|         householdStart: [ | ||||
|           { required: true, message: '请输入起始计数户数', trigger: 'change' }, | ||||
|           { | ||||
|             validator: (r, v, cb) => (!v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb('请输入正整数')), | ||||
|           }, | ||||
|         ], | ||||
|  | ||||
|         householdNumber: [ | ||||
|           { required: true, message: '请输入每层户数', trigger: 'change' }, | ||||
|           { | ||||
|             validator: (r, v, cb) => (!v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb('请输入正整数')), | ||||
|           }, | ||||
|         ], | ||||
|       }, | ||||
|       plot: [], | ||||
|       dialogVisible: false, | ||||
|       treeData: [], | ||||
|       map: null, | ||||
|       placeDetail: { | ||||
|         lng: '', | ||||
|         lat: '', | ||||
|       }, | ||||
|       showMap: false, | ||||
|       searchPlace: '', | ||||
|     } | ||||
|   }, | ||||
|   computed: { | ||||
|     ...mapState(['user']), | ||||
|  | ||||
|     isEdit() { | ||||
|       return !!this.params.id | ||||
|     }, | ||||
|   }, | ||||
|   created() { | ||||
|     this.formData.communityId = this.params.communityId | ||||
|     this.getListinfo() | ||||
|   }, | ||||
|   methods: { | ||||
|     selectMap() { | ||||
|       this.formData.lng = this.placeDetail.lng | ||||
|       this.formData.lat = this.placeDetail.lat | ||||
|       this.showMap = false | ||||
|     }, | ||||
|     getCorpLocation() { | ||||
|       this.instance.post('/app/appdvcpconfig/getCorpLocation').then((res) => { | ||||
|         if (res.code == 0) { | ||||
|           this.initMap(res.data) | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     initMap({ lng, lat }) { | ||||
|       AMapLoader.load({ | ||||
|         key: 'b553334ba34f7ac3cd09df9bc8b539dc', | ||||
|         version: '2.0', | ||||
|         plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geocoder'], | ||||
|       }).then((AMap) => { | ||||
|         this.placeDetail.lng = this.formData.lng | ||||
|         this.placeDetail.lat = this.formData.lat | ||||
|         this.map = new AMap.Map('map', { | ||||
|           resizeEnable: true, | ||||
|           zooms: [6, 20], | ||||
|           center: [lng, lat], | ||||
|           zoom: 11, | ||||
|         }) | ||||
|         this.placeSearch = new AMap.PlaceSearch({ map: this.map }) | ||||
|         new AMap.AutoComplete({ | ||||
|           input: 'searchPlaceInput', | ||||
|           output: 'searchPlaceOutput', | ||||
|         }).on('select', (e) => { | ||||
|           if (e?.poi) { | ||||
|             this.placeSearch.setCity(e.poi.adcode) | ||||
|             this.movePosition(e.poi.location) | ||||
|           } | ||||
|         }) | ||||
|         this.map.on('click', (e) => { | ||||
|           new AMap.Geocoder().getAddress(e.lnglat, (sta, res) => { | ||||
|             if (res?.regeocode) { | ||||
|               this.placeDetail = { | ||||
|                 lng: e.lnglat?.lng, | ||||
|                 lat: e.lnglat?.lat, | ||||
|                 address: res.regeocode.formattedAddress, | ||||
|               } | ||||
|             } | ||||
|           }) | ||||
|           this.movePosition(e.lnglat) | ||||
|         }) | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     movePosition(center) { | ||||
|       if (this.map) { | ||||
|         this.map.clearMap() | ||||
|         this.map.panTo(center) | ||||
|         this.map.add([ | ||||
|           new AMap.Marker({ | ||||
|             position: center, | ||||
|             clickable: true, | ||||
|           }), | ||||
|         ]) | ||||
|         this.map.setFitView() | ||||
|       } | ||||
|     }, | ||||
|  | ||||
|     getListinfo() { | ||||
|       return this.instance | ||||
|         .post('/app/appcommunitybuildinginfo/queryDetailById', null, { | ||||
|           params: { | ||||
|             id: this.params.id, | ||||
|           }, | ||||
|         }) | ||||
|         .then((res) => { | ||||
|           if (res.data) { | ||||
|             this.formData = res.data | ||||
|           } | ||||
|         }) | ||||
|     }, | ||||
|  | ||||
|     confirm() { | ||||
|       this.$refs['ruleForm'].validate((valid) => { | ||||
|         if (valid) { | ||||
|           this.instance | ||||
|             .post(`/app/appcommunitybuildinginfo/addOrUpdate`, { | ||||
|               ...this.formData, | ||||
|             }) | ||||
|             .then((res) => { | ||||
|               if (res.code == 0) { | ||||
|                 this.$message.success('提交成功') | ||||
|                 setTimeout(() => { | ||||
|                   this.cancel(true) | ||||
|                 }, 1000) | ||||
|               } | ||||
|             }) | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     // 返回按钮 | ||||
|     cancel(isRefresh) { | ||||
|       this.$emit('change', { | ||||
|         type: 'list', | ||||
|         isRefresh: !!isRefresh, | ||||
|       }) | ||||
|     }, | ||||
|   }, | ||||
|   watch: { | ||||
|     communityNameContent: { | ||||
|       deep: true, | ||||
|     }, | ||||
|   }, | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| .AppBuildManage { | ||||
|   ::v-deep .amap-logo { | ||||
|     display: none!important; | ||||
|   } | ||||
|   ::v-deep .amap-copyright { | ||||
|     display: none!important; | ||||
|   } | ||||
| } | ||||
| .Add { | ||||
|   height: 100%; | ||||
|   .ai-detail__title { | ||||
|     background-color: #fff; | ||||
|   } | ||||
|   .ai-detail__content { | ||||
|     .ai-detail__content--wrapper { | ||||
|       .el-form { | ||||
|         background-color: #fff; | ||||
|         padding: 0 60px; | ||||
|         .flex { | ||||
|           display: flex; | ||||
|           flex-wrap: wrap; | ||||
|           justify-content: space-between; | ||||
|           .el-form-item { | ||||
|             width: 48%; | ||||
|           } | ||||
|           .buildingTypes { | ||||
|             width: 100%; | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| } | ||||
|  | ||||
| ::v-deep .mapDialog { | ||||
|   .el-dialog__body { | ||||
|     padding: 0; | ||||
|  | ||||
|     .ai-dialog__content { | ||||
|       padding: 0; | ||||
|     } | ||||
|  | ||||
|     .ai-dialog__content--wrapper { | ||||
|       padding: 0 !important; | ||||
|       position: relative; | ||||
|     } | ||||
|  | ||||
|     #map { | ||||
|       width: 100%; | ||||
|       height: 420px; | ||||
|     } | ||||
|  | ||||
|     .searchPlaceInput { | ||||
|       position: absolute; | ||||
|       width: 250px; | ||||
|       top: 30px; | ||||
|       left: 25px; | ||||
|     } | ||||
|  | ||||
|     #searchPlaceOutput { | ||||
|       position: absolute; | ||||
|       width: 250px; | ||||
|       left: 25px; | ||||
|       height: initial; | ||||
|       top: 80px; | ||||
|       background: white; | ||||
|       z-index: 250; | ||||
|       max-height: 300px; | ||||
|       overflow-y: auto; | ||||
|  | ||||
|       .auto-item { | ||||
|         text-align: left; | ||||
|         font-size: 14px; | ||||
|         padding: 8px; | ||||
|         box-sizing: border-box; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </style> | ||||
							
								
								
									
										750
									
								
								project/sass/apps/AppBuildManage/components/BuildMsg.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										750
									
								
								project/sass/apps/AppBuildManage/components/BuildMsg.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,750 @@ | ||||
| <template> | ||||
|   <ai-list class="BuildMsg"> | ||||
|     <!-- 标题 --> | ||||
|     <template #title> | ||||
|       <ai-title :title="params.communityName + '-' + params.buildingNumber + '号楼房屋信息'" isShowBack isShowBottomBorder | ||||
|                 @onBackClick="cancel(false)"></ai-title> | ||||
|     </template> | ||||
|     <template #content> | ||||
|       <!-- 性别下拉选择框 --> | ||||
|       <ai-search-bar> | ||||
|         <template #left> | ||||
|           <ai-select v-model="search.livingStatus" placeholder="房屋状态" clearable @change=";(page.current = 1), getList()" | ||||
|                      :selectList="dict.getDict('houselivingStatus')"></ai-select> | ||||
|  | ||||
|           <ai-select v-model="search.existFlow" placeholder="有无流动人口" clearable @change=";(page.current = 1), getList()" | ||||
|                      :selectList="dict.getDict('yesOrNo')"></ai-select> | ||||
|         </template> | ||||
|  | ||||
|         <template #right> | ||||
|           <el-input v-model="search.houseCode" size="small" placeholder="请输入户号/户主" clearable | ||||
|                     @keyup.enter.native=";(page.current = 1), getList()" | ||||
|                     @clear=";(page.current = 1), (search.houseCode = ''), getList()" suffix-icon="iconfont iconSearch"/> | ||||
|         </template> | ||||
|       </ai-search-bar> | ||||
|  | ||||
|       <ai-search-bar> | ||||
|         <template #left> | ||||
|           <div style="height: 32px"/> | ||||
|         </template> | ||||
|  | ||||
|         <template #right> | ||||
|           <ai-import :instance="instance" :dict="dict" type="appcommunityhouseinfo" :importParams="houseImpParam" name="房屋信息" | ||||
|                      @success="getList()"> | ||||
|             <el-button icon="iconfont iconImport">导入房屋信息</el-button> | ||||
|           </ai-import> | ||||
|           <ai-download :instance="instance" url="/app/appcommunityhouseinfo/listExport" :params="houseExpParam" | ||||
|                        fileName="房屋信息" style="margin-right: 10px"> | ||||
|             <el-button icon="iconfont iconExported">导出房屋信息</el-button> | ||||
|           </ai-download> | ||||
|           <ai-import :instance="instance" :dict="dict" type="appcommunityhouseresident" :importParams="houseImpParam" name="人口信息" | ||||
|                      @success="getList()"> | ||||
|             <el-button icon="iconfont iconImport">导入人口信息</el-button> | ||||
|           </ai-import> | ||||
|           <ai-download :instance="instance" url="/app/appcommunityhouseresident/listExport" :params="houseExpParam" | ||||
|                        fileName="人口信息"> | ||||
|             <el-button icon="iconfont iconExported">导出人口信息</el-button> | ||||
|           </ai-download> | ||||
|         </template> | ||||
|       </ai-search-bar> | ||||
|  | ||||
|       <ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex" | ||||
|                 :current.sync="page.current" :size.sync="page.size" @getList="getList" | ||||
|                 @selection-change="(v) => (ids = v.map((e) => e.id))"> | ||||
|         <el-table-column slot="owner" label="房主" align="center"> | ||||
|           <template slot-scope="{ row }"> | ||||
|             <span v-for="(item, i) in row.owner" :key="i" v-if="item.name"> | ||||
|               <span v-if="i < 2" style="margin-right: 5px;"> | ||||
|                 {{ item.name }} | ||||
|               </span> | ||||
|             </span> | ||||
|           </template> | ||||
|         </el-table-column> | ||||
|  | ||||
|         <el-table-column slot="owner" label="联系方式" align="center"> | ||||
|           <template slot-scope="{ row }"> | ||||
|             <span v-for="(item, i) in row.owner" :key="i" v-if="item.phone"> | ||||
|               <span v-if="i < 1"> | ||||
|                 {{ item.phone }} | ||||
|               </span> | ||||
|             </span> | ||||
|           </template> | ||||
|         </el-table-column> | ||||
|  | ||||
|         <el-table-column slot="livingStatus" label="房屋状态" align="center"> | ||||
|           <template slot-scope="{ row }"> | ||||
|             {{ dict.getLabel('houselivingStatus', row.livingStatus) }} | ||||
|           </template> | ||||
|         </el-table-column> | ||||
|  | ||||
|         <el-table-column slot="owner" label="流动人口" align="center"> | ||||
|           <template slot-scope="{ row }"> | ||||
|             <span>{{ row.existFlow == 1 ? '有' : '无' }}</span> | ||||
|           </template> | ||||
|         </el-table-column> | ||||
|  | ||||
|         <el-table-column slot="options" label="操作" align="center" fixed="right" width="140"> | ||||
|           <div class="table-options" slot-scope="{ row }"> | ||||
|             <el-button type="text" @click="toEdit(row.id, 'edit')">编辑</el-button> | ||||
|             <el-button type="text" @click="toEdit(row.id, 'detail')">详情</el-button> | ||||
|           </div> | ||||
|         </el-table-column> | ||||
|       </ai-table> | ||||
|  | ||||
|       <ai-dialog :title="isEdit ? '编辑居民户' : '居民户详情'" :visible.sync="dialogVisible" width="800px" customFooter> | ||||
|         <ai-wrapper label> | ||||
|           <div class="bulidmsg"> | ||||
|             <span class="icon"></span> | ||||
|             <span class="bulidtext">房屋信息</span> | ||||
|           </div> | ||||
|  | ||||
|           <ai-info-item label="所属社区"> | ||||
|             {{ forms.areaName }} | ||||
|           </ai-info-item> | ||||
|  | ||||
|           <ai-info-item label="房屋地址"> | ||||
|             {{ forms.createAddress }} | ||||
|           </ai-info-item> | ||||
|  | ||||
|           <ai-info-item label="房屋类型"> | ||||
|             {{ dict.getLabel('communityBuildingType', forms.buildingType) }} | ||||
|           </ai-info-item> | ||||
|  | ||||
|           <template v-if="!isEdit"> | ||||
|             <ai-info-item label="房屋面积" prop="houseArea" class="line"> | ||||
|               <span>{{ forms.houseArea }}</span | ||||
|               > <span v-if="forms.houseArea">m²</span> | ||||
|             </ai-info-item> | ||||
|  | ||||
|             <ai-info-item label="居住现状" prop="livingStatus"> | ||||
|               <span>{{ dict.getLabel('houselivingStatus', forms.livingStatus) }}</span> | ||||
|             </ai-info-item> | ||||
|  | ||||
|             <ai-info-item label="房屋用途" prop="houseUse"> | ||||
|               <span>{{ dict.getLabel('houseUseStatus', forms.houseUse) }}</span> | ||||
|             </ai-info-item> | ||||
|  | ||||
|             <ai-info-item label="承租情况" prop="leaseSituation"> | ||||
|               <span>{{ dict.getLabel('houseLeaseSituation', forms.leaseSituation) }}</span> | ||||
|             </ai-info-item> | ||||
|  | ||||
|             <ai-info-item label="起租日期" prop="startDate"> | ||||
|               {{ $dateFormat(forms.startDate) }} | ||||
|             </ai-info-item> | ||||
|  | ||||
|             <ai-info-item label="备案证明" prop="isFilingCertificate"> | ||||
|               <span>{{ dict.getLabel('isFilingCertificateStatus', forms.isFilingCertificate) }}</span> | ||||
|             </ai-info-item> | ||||
|           </template> | ||||
|         </ai-wrapper> | ||||
|  | ||||
|         <el-form v-if="isEdit" :model="forms" ref="ruleForm" label-width="100px" label-suffix=":" align-items="center" | ||||
|                  size="small"> | ||||
|           <template> | ||||
|             <el-form-item label="房屋面积" prop="houseArea" class="house"> | ||||
|               <el-input v-model="forms.houseArea" type="text" size="small" placeholder="请输入" suffix="m²"> | ||||
|                 <template slot="suffix">m²</template> | ||||
|               </el-input> | ||||
|             </el-form-item> | ||||
|  | ||||
|             <div class="family-hose"> | ||||
|               <el-form-item label="居住现状"> | ||||
|                 <el-radio-group v-model="forms.livingStatus"> | ||||
|                   <el-radio label="0">自用</el-radio> | ||||
|                   <el-radio label="1">出租</el-radio> | ||||
|                   <el-radio label="2">闲置</el-radio> | ||||
|                 </el-radio-group> | ||||
|               </el-form-item> | ||||
|  | ||||
|               <el-form-item label="房屋用途"> | ||||
|                 <el-radio-group v-model="forms.houseUse"> | ||||
|                   <el-radio label="0">居住</el-radio> | ||||
|                   <el-radio label="1">闲置</el-radio> | ||||
|                   <el-radio label="2">经营</el-radio> | ||||
|                 </el-radio-group> | ||||
|               </el-form-item> | ||||
|             </div> | ||||
|  | ||||
|             <div class="family-hose"> | ||||
|               <el-form-item label="承租情况" prop="leaseSituation"> | ||||
|                 <ai-select v-model="forms.leaseSituation" placeholder="请选择" clearable | ||||
|                            @change=";(page.current = 1), getList()" :selectList="dict.getDict('houseLeaseSituation')" | ||||
|                            size="small"></ai-select> | ||||
|               </el-form-item> | ||||
|  | ||||
|               <el-form-item label="起租日期" prop="startDate"> | ||||
|                 <el-date-picker v-model="forms.startDate" type="date" placeholder="选择日期" size="small" | ||||
|                                 value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker> | ||||
|               </el-form-item> | ||||
|             </div> | ||||
|  | ||||
|             <el-form-item label="备案证明" prop="isFilingCertificate"> | ||||
|               <el-radio-group v-model="forms.isFilingCertificate"> | ||||
|                 <el-radio label="0">有租赁房备案证明</el-radio> | ||||
|                 <el-radio label="1">无租赁房备案证明</el-radio> | ||||
|               </el-radio-group> | ||||
|             </el-form-item> | ||||
|           </template> | ||||
|         </el-form> | ||||
|         <!-- 房主信息 --> | ||||
|         <div class="table"> | ||||
|           <div class="msg"> | ||||
|             <b class="house-msg"> | ||||
|               <span class="icon"></span> | ||||
|               <span class="msg">房主信息</span> | ||||
|             </b> | ||||
|  | ||||
|             <div class="button"> | ||||
|               <ai-person-select :instance="instance" @selectPerson="getOwners" ref="getOwner" :chooseUserList="owners" | ||||
|                                 :isMultiple="true" v-if="isEdit"/> | ||||
|             </div> | ||||
|           </div> | ||||
|  | ||||
|           <ai-table :tableData="owners" :col-configs="owner" ref="aitableex"> | ||||
|             <el-table-column slot="owner" label="居民类型" align="center"> | ||||
|               <template slot-scope="{ row }"> | ||||
|                 {{ dict.getLabel('BulidResidentType', row.residentType) }} | ||||
|               </template> | ||||
|             </el-table-column> | ||||
|  | ||||
|             <el-table-column slot="owner" label="特殊人群" align="center" v-if="!isEdit"> | ||||
|               <template slot-scope="{ row }"> | ||||
|                 {{ row.tips }} | ||||
|               </template> | ||||
|             </el-table-column> | ||||
|  | ||||
|             <el-table-column slot="owner" label="与户主关系" align="center" v-if="isEdit"> | ||||
|               <template slot-scope="{ row }"> | ||||
|                 <ai-select v-model="row.relation" placeholder="与户主关系" clearable | ||||
|                            :selectList="$dict.getDict('householdRelation')"></ai-select> | ||||
|               </template> | ||||
|             </el-table-column> | ||||
|  | ||||
|             <el-table-column slot="owner" label="与户主关系" align="center" v-if="!isEdit"> | ||||
|               <template slot-scope="{ row }"> | ||||
|                 {{ dict.getLabel('householdRelation', row.relation) }} | ||||
|               </template> | ||||
|             </el-table-column> | ||||
|  | ||||
|             <el-table-column slot="options" label="操作" align="center" v-if="isEdit"> | ||||
|               <template slot-scope="scope"> | ||||
|                 <el-button type="text" @click="remove(scope.$index, 'owners')">删除</el-button> | ||||
|               </template> | ||||
|             </el-table-column> | ||||
|           </ai-table> | ||||
|         </div> | ||||
|  | ||||
|         <!-- 承租人信息 --> | ||||
|         <div class="table"> | ||||
|           <div class="msg"> | ||||
|             <b class="house-msg"> | ||||
|               <span class="icon"></span> | ||||
|               <span class="msg">承租人信息</span> | ||||
|             </b> | ||||
|  | ||||
|             <div class="button"> | ||||
|               <ai-person-select :instance="instance" @selectPerson="getRenters" :chooseUserList="renters" | ||||
|                                 :isMultiple="true" v-if="isEdit"/> | ||||
|             </div> | ||||
|           </div> | ||||
|  | ||||
|           <ai-table :tableData="renters" :col-configs="renter" ref="aitableex"> | ||||
|             <el-table-column slot="renters" label="居民类型" align="center"> | ||||
|               <template slot-scope="{ row }"> | ||||
|                 {{ dict.getLabel('BulidResidentType', row.residentType) }} | ||||
|               </template> | ||||
|             </el-table-column> | ||||
|  | ||||
|             <el-table-column slot="renters" label="特殊人群" align="center" v-if="!isEdit"> | ||||
|               <template slot-scope="{ row }"> | ||||
|                 {{ row.tips }} | ||||
|               </template> | ||||
|             </el-table-column> | ||||
|  | ||||
|             <el-table-column slot="renters" label="与户主关系" align="center" v-if="isEdit"> | ||||
|               <template slot-scope="{ row }"> | ||||
|                 <ai-select v-model="row.relation" placeholder="与户主关系" clearable | ||||
|                            :selectList="$dict.getDict('householdRelation')"></ai-select> | ||||
|               </template> | ||||
|             </el-table-column> | ||||
|  | ||||
|             <el-table-column slot="renters" label="与户主关系" align="center" v-if="!isEdit"> | ||||
|               <template slot-scope="{ row }"> | ||||
|                 {{ dict.getLabel('householdRelation', row.relation) }} | ||||
|               </template> | ||||
|             </el-table-column> | ||||
|  | ||||
|             <el-table-column slot="options" label="操作" align="center" v-if="isEdit"> | ||||
|               <template slot-scope="scope"> | ||||
|                 <el-button type="text" @click="remove(scope.$index, 'renters')">删除</el-button> | ||||
|               </template> | ||||
|             </el-table-column> | ||||
|           </ai-table> | ||||
|         </div> | ||||
|  | ||||
|         <!-- 实际居住人员 --> | ||||
|         <div class="table"> | ||||
|           <div class="msg"> | ||||
|             <b class="house-msg"> | ||||
|               <span class="icon"></span> | ||||
|               <span class="msg">实际居住人员</span> | ||||
|             </b> | ||||
|  | ||||
|             <div class="button" v-if="isEdit"> | ||||
|               <ai-person-select :instance="instance" @selectPerson="getLives" :isMultiple="true" | ||||
|                                 :chooseUserList="lives"/> | ||||
|             </div> | ||||
|           </div> | ||||
|  | ||||
|           <ai-table :tableData="lives" :col-configs="live" ref="aitableex"> | ||||
|             <el-table-column slot="lives" label="居民类型" align="center"> | ||||
|               <template slot-scope="{ row }"> | ||||
|                 {{ dict.getLabel('BulidResidentType', row.residentType) }} | ||||
|               </template> | ||||
|             </el-table-column> | ||||
|  | ||||
|             <el-table-column slot="lives" label="特殊人群" align="center" v-if="!isEdit"> | ||||
|               <template slot-scope="{ row }"> | ||||
|                 {{ row.tips }} | ||||
|               </template> | ||||
|             </el-table-column> | ||||
|  | ||||
|             <el-table-column slot="lives" label="与户主关系" align="center" v-if="isEdit"> | ||||
|               <template slot-scope="{ row }"> | ||||
|                 <ai-select v-model="row.relation" placeholder="与户主关系" clearable | ||||
|                            :selectList="$dict.getDict('householdRelation')"></ai-select> | ||||
|               </template> | ||||
|             </el-table-column> | ||||
|  | ||||
|             <el-table-column slot="lives" label="与户主关系" align="center" v-if="!isEdit"> | ||||
|               <template slot-scope="{ row }"> | ||||
|                 {{ dict.getLabel('householdRelation', row.relation) }} | ||||
|               </template> | ||||
|             </el-table-column> | ||||
|  | ||||
|             <el-table-column slot="options" label="操作" align="center" v-if="isEdit"> | ||||
|               <template slot-scope="scope"> | ||||
|                 <el-button type="text" @click="remove(scope.$index, 'lives')">删除</el-button> | ||||
|               </template> | ||||
|             </el-table-column> | ||||
|           </ai-table> | ||||
|         </div> | ||||
|  | ||||
|         <span slot="footer" class="dialog-footer"> | ||||
|           <el-button @click="dialogVisible = false">{{ isEdit ? '取消' : '关闭' }}</el-button> | ||||
|           <el-button type="primary" @click="report" v-if="isEdit">确认</el-button> | ||||
|         </span> | ||||
|       </ai-dialog> | ||||
|     </template> | ||||
|   </ai-list> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| export default { | ||||
|   name: 'BuildMsg', | ||||
|   components: {}, | ||||
|   props: { | ||||
|     dict: Object, | ||||
|     params: Object, | ||||
|     instance: Function, | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       id: '', | ||||
|       page: { | ||||
|         current: 1, | ||||
|         size: 10, | ||||
|       }, | ||||
|       total: 0, | ||||
|       search: { | ||||
|         livingStatus: '', | ||||
|         houseCode: '', | ||||
|       }, | ||||
|       colConfigs: [ | ||||
|         {prop: 'unitNumber', label: '单元', align: 'center'}, | ||||
|         {prop: 'houseCode', label: '户号', align: 'center'}, | ||||
|         {prop: 'livingNumber', label: '住户数', align: 'center'}, | ||||
|         {slot: 'owner', label: '户主', align: 'center'}, | ||||
|         {slot: 'livingStatus', align: 'center'}, | ||||
|         {slot: 'options', label: '操作', align: 'center'}, | ||||
|       ], | ||||
|       tableData: [], | ||||
|       dialogVisible: false, | ||||
|       forms: { | ||||
|         houseArea: '', | ||||
|         livingStatus: 0, | ||||
|         houseUse: 0, | ||||
|         leaseSituation: '', | ||||
|         isFilingCertificate: '', | ||||
|       }, | ||||
|       owners: [], | ||||
|       owner: [ | ||||
|         {prop: 'name', label: '姓名', align: 'center'}, | ||||
|         {prop: 'idNumber', label: '身份证号', align: 'center'}, | ||||
|         {prop: 'phone', label: '联系方式', align: 'center'}, | ||||
|         {slot: 'owner', align: 'center'}, | ||||
|         { | ||||
|           slot: 'relation', | ||||
|           align: 'center', | ||||
|         }, | ||||
|         {slot: 'options', label: '操作', align: 'center'}, | ||||
|       ], | ||||
|       renters: [], | ||||
|       renter: [ | ||||
|         {prop: 'name', label: '姓名', align: 'center'}, | ||||
|         {prop: 'idNumber', label: '身份证号', align: 'center'}, | ||||
|         {prop: 'phone', label: '联系方式', align: 'center'}, | ||||
|         { | ||||
|           slot: 'relation', | ||||
|           align: 'center', | ||||
|         }, | ||||
|         {slot: 'renters', align: 'center'}, | ||||
|         {slot: 'options', label: '操作', align: 'center'}, | ||||
|       ], | ||||
|       lives: [], | ||||
|       live: [ | ||||
|         {prop: 'name', label: '姓名', align: 'center'}, | ||||
|         {prop: 'idNumber', label: '身份证号', align: 'center'}, | ||||
|         {prop: 'phone', label: '联系方式', align: 'center'}, | ||||
|         { | ||||
|           slot: 'relation', | ||||
|           align: 'center', | ||||
|         }, | ||||
|         {slot: 'lives', align: 'center'}, | ||||
|         {slot: 'options', label: '操作', align: 'center'}, | ||||
|       ], | ||||
|       type: '', | ||||
|       ids: '', | ||||
|       buildingId: '', | ||||
|     } | ||||
|   }, | ||||
|   computed: { | ||||
|     houseImpParam() { | ||||
|       return { | ||||
|         buildingId: this.params.id, | ||||
|       } | ||||
|     }, | ||||
|     houseExpParam() { | ||||
|       return { | ||||
|         buildingId: this.params.id, | ||||
|       } | ||||
|     }, | ||||
|     isEdit() { | ||||
|       return this.type == 'edit' | ||||
|     }, | ||||
|   }, | ||||
|   watch: {}, | ||||
|   created() { | ||||
|     this.dict.load('yesOrNo', 'houselivingStatus', 'houseLeaseSituation', 'isFilingCertificateStatus', 'houseUseStatus', 'BulidResidentType', 'communityBuildingType', 'householdRelation').then(() => { | ||||
|       this.getList() | ||||
|     }) | ||||
|   }, | ||||
|   mounted() { | ||||
|   }, | ||||
|   methods: { | ||||
|     getList() { | ||||
|       this.instance | ||||
|       .post(`/app/appcommunityhouseinfo/list`, null, { | ||||
|         params: { | ||||
|           ...this.page, | ||||
|           ...this.search, | ||||
|           buildingId: this.params.id, | ||||
|         }, | ||||
|       }) | ||||
|       .then((res) => { | ||||
|         if (res.code == 0) { | ||||
|           this.tableData = res.data.records | ||||
|           this.total = res.data.total | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     // 返回按钮 | ||||
|     cancel(isRefresh) { | ||||
|       this.$emit('change', { | ||||
|         type: 'list', | ||||
|         isRefresh: !!isRefresh, | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     // 确认增加和编辑 | ||||
|     report() { | ||||
|       this.instance | ||||
|       .post(`/app/appcommunityhouseinfo/update`, { | ||||
|         ...this.forms, | ||||
|         id: this.id, | ||||
|         owner: this.owners, | ||||
|         renter: this.renters, | ||||
|         live: this.lives, | ||||
|       }) | ||||
|       .then((res) => { | ||||
|         if (res.code == 0) { | ||||
|           this.$message.success('提交成功') | ||||
|  | ||||
|           this.dialogVisible = false | ||||
|           this.getList() | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     // 详情 和 编辑 | ||||
|     toEdit(id, type) { | ||||
|       this.id = id | ||||
|       this.type = type | ||||
|       this.instance.post(`/app/appcommunityhouseinfo/queryDetailById?&id=${id}`).then((res) => { | ||||
|         if (res.code == 0) { | ||||
|           this.forms = res.data | ||||
|  | ||||
|           this.owners = this.forms.owner | ||||
|           this.renters = this.forms.renter | ||||
|           this.lives = this.forms.live | ||||
|         } | ||||
|       }) | ||||
|       this.dialogVisible = true | ||||
|     }, | ||||
|  | ||||
|     // 删除 | ||||
|     remove(index, source) { | ||||
|       this.$confirm('确定删除该数据?').then(() => { | ||||
|         this[source].splice(index, 1) | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     // 选择人员 | ||||
|     getOwners(val) { | ||||
|       let listNew = [] | ||||
|       let newName = [] | ||||
|       for (var i = 0; i < val.length; i++) { | ||||
|         if (newName.indexOf(val[i].name) == -1) { | ||||
|           newName.push(val[i].name) | ||||
|           listNew.push(val[i]) | ||||
|         } | ||||
|       } | ||||
|  | ||||
|       this.owners = listNew | ||||
|     }, | ||||
|  | ||||
|     getRenters(val) { | ||||
|       let listNew = [] | ||||
|       let newName = [] | ||||
|       for (var i = 0; i < val.length; i++) { | ||||
|         if (newName.indexOf(val[i].name) == -1) { | ||||
|           newName.push(val[i].name) | ||||
|           listNew.push(val[i]) | ||||
|         } | ||||
|       } | ||||
|  | ||||
|       this.renters = listNew | ||||
|     }, | ||||
|  | ||||
|     getLives(val) { | ||||
|       let listNew = [] | ||||
|       let newName = [] | ||||
|       for (var i = 0; i < val.length; i++) { | ||||
|         if (newName.indexOf(val[i].name) == -1) { | ||||
|           newName.push(val[i].name) | ||||
|           listNew.push(val[i]) | ||||
|         } | ||||
|       } | ||||
|  | ||||
|       this.lives = listNew | ||||
|     }, | ||||
|   }, | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| .BuildMsg { | ||||
|   ::v-deep .ai-list__title { | ||||
|     background-color: #fff; | ||||
|     margin: 0 !important; | ||||
|     padding-left: 20px; | ||||
|   } | ||||
|  | ||||
|   ::v-deep .ai-list__content { | ||||
|     .ai-list__content--right { | ||||
|       .ai-list__content--right-wrapper { | ||||
|         .search-select { | ||||
|           display: flex; | ||||
|           justify-content: space-between; | ||||
|           border-bottom: 1px solid #eee; | ||||
|           padding-bottom: 10px; | ||||
|  | ||||
|           .left { | ||||
|             width: 30%; | ||||
|  | ||||
|             .ai-select { | ||||
|               display: inline-block; | ||||
|             } | ||||
|  | ||||
|             .ai-select:first-child { | ||||
|               margin-right: 15px; | ||||
|             } | ||||
|           } | ||||
|  | ||||
|           .right { | ||||
|             width: 20%; | ||||
|           } | ||||
|         } | ||||
|  | ||||
|         .bar { | ||||
|           display: flex; | ||||
|           justify-content: space-between; | ||||
|           margin-top: 10px; | ||||
|  | ||||
|           .export { | ||||
|             .ai-import { | ||||
|               display: inline-block; | ||||
|               margin-right: 10px; | ||||
|             } | ||||
|  | ||||
|             .ai-download { | ||||
|               display: inline-block; | ||||
|             } | ||||
|           } | ||||
|  | ||||
|           .import { | ||||
|             .ai-import { | ||||
|               display: inline-block; | ||||
|               margin-right: 10px; | ||||
|             } | ||||
|  | ||||
|             .ai-download { | ||||
|               display: inline-block; | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|  | ||||
|         .ai-dialog__wrapper { | ||||
|           background-color: #fff; | ||||
|  | ||||
|           .el-dialog__wrapper { | ||||
|             .el-dialog__body { | ||||
|               .ai-dialog__content { | ||||
|                 .ai-dialog__content--wrapper { | ||||
|                   .ai-wrapper { | ||||
|                     padding-left: 0 !important; | ||||
|  | ||||
|                     .bulidmsg { | ||||
|                       height: 32px; | ||||
|                       line-height: 32px; | ||||
|                       width: 100%; | ||||
|                       margin: 0 0 15px 20px; | ||||
|  | ||||
|                       .icon { | ||||
|                         border-left: 2px solid #2266ff; | ||||
|                       } | ||||
|  | ||||
|                       .bulidtext { | ||||
|                         display: inline-block; | ||||
|                         margin-left: 9px; | ||||
|                         color: #222; | ||||
|                         font-size: 15px; | ||||
|                         font-weight: 800; | ||||
|                       } | ||||
|                     } | ||||
|  | ||||
|                     .create { | ||||
|                       width: 100% !important; | ||||
|  | ||||
|                       .ai-info-item__left { | ||||
|                         width: 78px; | ||||
|                         margin-right: 22px; | ||||
|                       } | ||||
|                     } | ||||
|  | ||||
|                     .Address { | ||||
|                       .ai-info-item__left { | ||||
|                         width: 78px; | ||||
|                         margin-right: 22px; | ||||
|                       } | ||||
|                     } | ||||
|  | ||||
|                     .building { | ||||
|                       padding-left: 40px; | ||||
|  | ||||
|                       .ai-info-item__left { | ||||
|                         width: 78px; | ||||
|                         margin-right: 22px; | ||||
|                       } | ||||
|                     } | ||||
|                   } | ||||
|  | ||||
|                   .el-form { | ||||
|                     padding: 20px 0 0 0; | ||||
|  | ||||
|                     .house { | ||||
|                       width: 50%; | ||||
|  | ||||
|                       .el-form-item__content { | ||||
|                         width: 63%; | ||||
|                       } | ||||
|                     } | ||||
|  | ||||
|                     .family-hose { | ||||
|                       display: flex; | ||||
|                       justify-content: space-between; | ||||
|                     } | ||||
|  | ||||
|                     .line { | ||||
|                       width: 50% !important; | ||||
|                       padding-right: 40px; | ||||
|  | ||||
|                       .el-form-item__content { | ||||
|                         .el-input { | ||||
|                           .el-input__suffix { | ||||
|                             color: #666; | ||||
|                             margin-right: 5px; | ||||
|                           } | ||||
|                         } | ||||
|                       } | ||||
|                     } | ||||
|                   } | ||||
|  | ||||
|                   .table { | ||||
|                     padding: 20px 20px 0 20px; | ||||
|  | ||||
|                     .msg { | ||||
|                       display: flex; | ||||
|                       justify-content: space-between; | ||||
|  | ||||
|                       .house-msg { | ||||
|                         height: 32px; | ||||
|                         line-height: 32px; | ||||
|  | ||||
|                         .icon { | ||||
|                           border-left: 2px solid #2266ff; | ||||
|                         } | ||||
|  | ||||
|                         .msg { | ||||
|                           display: inline-block; | ||||
|                           color: #222; | ||||
|                           font-size: 15px; | ||||
|                           font-weight: 800; | ||||
|                           margin-left: 9px; | ||||
|                         } | ||||
|                       } | ||||
|  | ||||
|                       // .button { | ||||
|                       // } | ||||
|                     } | ||||
|  | ||||
|                     .ai-table { | ||||
|                       margin-top: 10px; | ||||
|                       // .el-table { | ||||
|                       // } | ||||
|                       .pagination { | ||||
|                         display: none; | ||||
|                       } | ||||
|                     } | ||||
|                   } | ||||
|                 } | ||||
|               } | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </style> | ||||
							
								
								
									
										312
									
								
								project/sass/apps/AppBuildManage/components/List.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										312
									
								
								project/sass/apps/AppBuildManage/components/List.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,312 @@ | ||||
| <template> | ||||
|   <section class="AppPetitionManage"> | ||||
|     <ai-detail> | ||||
|       <!-- 标题 --> | ||||
|       <ai-title slot="title" title="楼栋管理" isShowBottomBorder /> | ||||
|       <template #content> | ||||
|         <ai-tree-menu title="楼栋管理" @search="(v) => $refs.gridTree.filter(v)"> | ||||
|           <el-tree :data="treeData" ref="gridTree" :filter-node-method="handleTreeFilter" @node-click="handleSelectGrid" highlight-current node-key="id" :props="{ label: 'name', children: 'children' }" :default-expanded-keys="[defaultShowNodes]" /> | ||||
|         </ai-tree-menu> | ||||
|  | ||||
|         <div class="flex"> | ||||
|           <ai-search-bar bottomBorder> | ||||
|             <template slot="left"> | ||||
|               <!-- 定位状态 --> | ||||
|               <ai-select v-model="search.locationStatus" placeholder="定位状态" clearable :selectList="$dict.getDict('BuildLocationStatus')" @change=";(page.current = 1), getList()"></ai-select> | ||||
|             </template> | ||||
|  | ||||
|             <!-- 搜索 --> | ||||
|             <template slot="right"> | ||||
|               <el-input v-model="search.managerName" size="small" placeholder="楼栋号/楼长/联系方式" clearable @keyup.enter.native=";(page.current = 1), getList()" @clear=";(page.current = 1), (search.managerName = ''), getList()" suffix-icon="iconfont iconSearch" /> | ||||
|             </template> | ||||
|           </ai-search-bar> | ||||
|  | ||||
|           <ai-search-bar class="ai-search-ba"> | ||||
|             <template slot="left"> | ||||
|               <el-button icon="iconfont iconAdd" type="primary" size="small" @click="onAdd('')" :disabled="!isAdd">添加 </el-button> | ||||
|               <el-button icon="iconfont iconDelete" size="small" @click="removeAll" :disabled="ids.length == 0">删除 </el-button> | ||||
|             </template> | ||||
|  | ||||
|             <!-- 导入导出 --> | ||||
|             <template #right> | ||||
|               <ai-import :instance="instance" :dict="dict" type="appcommunitybuildinginfo" :importParams="{ areaId: user.info && user.info.areaId }" name="楼栋管理" @success="getList()"> | ||||
|                 <el-button icon="iconfont iconImport">导入</el-button> | ||||
|               </ai-import> | ||||
|               <ai-download :instance="instance" url="/app/appcommunitybuildinginfo/listExport" :params="param" fileName="楼栋管理模板" :disabled="tableData.length == 0"> | ||||
|                 <el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button> | ||||
|               </ai-download> | ||||
|             </template> | ||||
|           </ai-search-bar> | ||||
|  | ||||
|           <ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex" style="margin-top: 20px;" :current.sync="page.current" :size.sync="page.size" @getList="getList" @selection-change="(v) => (ids = v.map((e) => e.id))"> | ||||
|             <el-table-column slot="locationStatus" label="定位状态" align="center"> | ||||
|               <template slot-scope="{ row }"> | ||||
|                 <span style="color:red" v-if="row.locationStatus == 0">{{ dict.getLabel('BuildLocationStatus', row.locationStatus) }}</span> | ||||
|                 <span style="color:green" v-if="row.locationStatus == 1">{{ dict.getLabel('BuildLocationStatus', row.locationStatus) }}</span> | ||||
|               </template> | ||||
|             </el-table-column> | ||||
|  | ||||
|             <el-table-column slot="options" label="操作" align="center" width="240px" fixed="right"> | ||||
|               <div class="table-options" slot-scope="{ row }"> | ||||
|                 <el-button type="text" @click="onAdd(row.id)">编辑</el-button> | ||||
|                 <el-button type="text" @click="remove(row.id)">删除</el-button> | ||||
|                 <el-button type="text" @click="toBuildMsg(row)">房屋信息</el-button> | ||||
|                 <el-button type="text" @click="$router.push({ name: '63', query: { communityId: row.communityId, buildingId: row.id, unitNum: 1, buildingNumber: row.buildingNumber } })"> | ||||
|                   楼栋模型 | ||||
|                 </el-button> | ||||
|               </div> | ||||
|             </el-table-column> | ||||
|           </ai-table> | ||||
|         </div> | ||||
|       </template> | ||||
|     </ai-detail> | ||||
|   </section> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import { mapState } from 'vuex' | ||||
|  | ||||
| export default { | ||||
|   name: 'List', | ||||
|   props: { | ||||
|     dict: Object, | ||||
|     instance: Function, | ||||
|     params: Object, | ||||
|   }, | ||||
|  | ||||
|   data() { | ||||
|     return { | ||||
|       isAdd: false, | ||||
|       page: { | ||||
|         current: 1, | ||||
|         size: 10, | ||||
|       }, | ||||
|       total: 0, | ||||
|       search: { | ||||
|         locationStatus: '', | ||||
|         managerName: '', | ||||
|       }, | ||||
|       id: '', | ||||
|       ids: [], | ||||
|       colConfigs: [ | ||||
|         { type: 'selection' }, | ||||
|         { | ||||
|           prop: 'communityName', | ||||
|           label: '小区名称', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'buildingNumber', | ||||
|           label: '楼栋号', | ||||
|           align: 'center', | ||||
|         }, | ||||
|         { prop: 'unitNumber', label: '单元数', align: 'center' }, | ||||
|         { | ||||
|           prop: 'layerNumber', | ||||
|           label: '最高层数', | ||||
|           align: 'center', | ||||
|         }, | ||||
|         { prop: 'householdNumber', label: '每层户数', align: 'center' }, | ||||
|         { | ||||
|           prop: 'houseNum', | ||||
|           label: '实有户数', | ||||
|           align: 'center', | ||||
|         }, | ||||
|         { prop: 'residentNum', label: '实有人口', align: 'center' }, | ||||
|         { | ||||
|           prop: 'managerName', | ||||
|           label: '楼栋长名', | ||||
|           align: 'center', | ||||
|         }, | ||||
|         { prop: 'managerPhone', label: '楼栋长联系方式', align: 'center', width: '150' }, | ||||
|         { slot: 'locationStatus' }, | ||||
|         { | ||||
|           slot: 'options', | ||||
|           label: '操作', | ||||
|           align: 'center', | ||||
|         }, | ||||
|       ], | ||||
|       tableData: [], | ||||
|       organizationId: '', | ||||
|       meta: [], | ||||
|       treeData: [], | ||||
|       areaId: '', | ||||
|       communityId: null, | ||||
|       buildingTypeStatus: '', | ||||
|       defaultShowNodes: [], | ||||
|     } | ||||
|   }, | ||||
|  | ||||
|   computed: { | ||||
|     ...mapState(['user']), | ||||
|  | ||||
|     param() { | ||||
|       return { | ||||
|         ...this.search, | ||||
|         communityId: this.communityId, | ||||
|         areaId: this.user.info?.areaId, | ||||
|         ids: this.ids, | ||||
|       } | ||||
|     }, | ||||
|   }, | ||||
|  | ||||
|   created() { | ||||
|     this.dict.load('BuildLocationStatus').then(() => { | ||||
|       this.getList() | ||||
|       this.getListinfo() | ||||
|     }) | ||||
|   }, | ||||
|  | ||||
|   mounted() {}, | ||||
|  | ||||
|   methods: { | ||||
|     getListinfo() { | ||||
|       return this.instance.post(`/app/appcommunityinfo/queryCommunityTree?id=${this.user.info?.areaId}`).then((res) => { | ||||
|         if (res.data) { | ||||
|           this.treeData = [res.data] | ||||
|           this.$nextTick(() => { | ||||
|             this.defaultShowNodes = this.treeData[0].id | ||||
|           }) | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     getList() { | ||||
|       this.instance | ||||
|         .post(`/app/appcommunitybuildinginfo/list`, null, { | ||||
|           params: { | ||||
|             ...this.page, | ||||
|             ...this.search, | ||||
|             communityId: this.communityId, | ||||
|             areaId: this.areaId, | ||||
|           }, | ||||
|         }) | ||||
|         .then((res) => { | ||||
|           if (res.code == 0) { | ||||
|             this.tableData = res.data.records | ||||
|             this.total = res.data.total | ||||
|           } | ||||
|         }) | ||||
|     }, | ||||
|  | ||||
|     // 添加 | ||||
|     onAdd(id) { | ||||
|       this.$emit('change', { | ||||
|         type: 'add', | ||||
|         params: { | ||||
|           id: id || '', | ||||
|           bulidId: this.id, | ||||
|           communityId: this.communityId, | ||||
|         }, | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     // 房屋信息 | ||||
|     toBuildMsg(row) { | ||||
|       this.$emit('change', { | ||||
|         type: 'buildmsg', | ||||
|         params: { | ||||
|           ...row, | ||||
|         }, | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     // 删除 | ||||
|     remove(id) { | ||||
|       this.$confirm('确定删除该数据?').then(() => { | ||||
|         this.instance.post(`/app/appcommunitybuildinginfo/delete?ids=${id}`).then((res) => { | ||||
|           if (res.code == 0) { | ||||
|             this.$message.success('删除成功!') | ||||
|             this.getList() | ||||
|           } | ||||
|         }) | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     removeAll() { | ||||
|       var id = this.ids.join(',') | ||||
|       this.remove(id) | ||||
|     }, | ||||
|  | ||||
|     handleTreeFilter(v, data) { | ||||
|       return data?.name.indexOf(v) > -1 | ||||
|     }, | ||||
|  | ||||
|     handleSelectGrid(data) { | ||||
|       this.isAdd = false | ||||
|       if (data.type == 1) { | ||||
|         this.isAdd = true | ||||
|         this.communityId = data.id | ||||
|         this.areaId = null | ||||
|       } else if (data.type == 0) { | ||||
|         this.communityId = null | ||||
|         this.areaId = data.id | ||||
|       } | ||||
|       this.getList() | ||||
|     }, | ||||
|   }, | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| .AppPetitionManage { | ||||
|   height: 100%; | ||||
|  | ||||
|   .ai-detail { | ||||
|     ::v-deep .ai-detail__content { | ||||
|       .ai-detail__content--wrapper { | ||||
|         display: flex; | ||||
|         justify-content: space-between; | ||||
|         height: 100%; | ||||
|         max-width: 100%; | ||||
|         padding: 15px; | ||||
|  | ||||
|         .AiTreeMenu { | ||||
|           width: 22%; | ||||
|         } | ||||
|  | ||||
|         .flex { | ||||
|           width: 78%; | ||||
|           margin-left: 10px; | ||||
|           padding: 15px; | ||||
|           background-color: #fff; | ||||
|  | ||||
|           .ai-search-ba { | ||||
|             margin-top: 10px; | ||||
|           } | ||||
|  | ||||
|           .ai-table { | ||||
|             margin-top: 0 !important; | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   ::v-deep .el-tree { | ||||
|     .el-tree-node__content { | ||||
|       display: inline-flex; | ||||
|       min-width: 100%; | ||||
|  | ||||
|       &:hover { | ||||
|         background: #e8efff; | ||||
|         color: #222222; | ||||
|         border-radius: 2px; | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     .is-current > .el-tree-node__content { | ||||
|       background: #2266ff; | ||||
|  | ||||
|       &:hover { | ||||
|         background: #2266ff; | ||||
|         color: #fff; | ||||
|       } | ||||
|  | ||||
|       span { | ||||
|         color: #fff; | ||||
|         font-weight: bold; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </style> | ||||
		Reference in New Issue
	
	Block a user