13176889840
4 years ago
10 changed files with 0 additions and 3942 deletions
@ -1,368 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<div> |
|||
|
|||
<el-form :inline="true" |
|||
:model="dataForm" |
|||
:rules="dataRule" |
|||
:disabled="formType === 'detail'" |
|||
class="form"> |
|||
<el-form-item label="所属小区" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<span>{{ agencyObj.agencyName }}—{{ agencyObj.gridName }}—{{ agencyObj.label }}</span> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="楼栋名称" |
|||
prop="buildingName" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
maxlength="50" |
|||
show-word-limit |
|||
placeholder="请输入楼栋名称" |
|||
v-model="dataForm.buildingName"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="楼栋类型" |
|||
prop="type" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-radio-group v-model="dataForm.type"> |
|||
|
|||
<el-radio :label="'1'">商品房</el-radio> |
|||
<el-radio :label="'2'">自建房</el-radio> |
|||
<el-radio :label="'3'">别墅</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item label="排序" |
|||
prop="sort" |
|||
label-width="150px"> |
|||
<el-input-number v-model="dataForm.sort" |
|||
label="排序"></el-input-number> |
|||
</el-form-item> |
|||
<el-form-item label="单元数" |
|||
prop="totalUnitNum" |
|||
label-width="150px"> |
|||
<el-input-number v-model="dataForm.totalUnitNum" |
|||
:min="1" |
|||
label="单元数"></el-input-number> |
|||
</el-form-item> |
|||
<el-form-item label="层数" |
|||
prop="totalFloorNum" |
|||
label-width="150px"> |
|||
<el-input-number v-model="dataForm.totalFloorNum" |
|||
:min="1" |
|||
label="层数"></el-input-number> |
|||
</el-form-item> |
|||
<el-form-item label="户数" |
|||
prop="totalHouseNum" |
|||
label-width="150px"> |
|||
<el-input-number v-model="dataForm.totalHouseNum" |
|||
:min="1" |
|||
label="户数"></el-input-number> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="位置坐标" |
|||
prop="longitude" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_3" |
|||
maxlength="50" |
|||
placeholder="请输入关键字" |
|||
v-model="keyWords"> |
|||
</el-input> |
|||
<el-button style="margin-left: 10px" |
|||
type="primary" |
|||
size="small" |
|||
@click="handleSearchMap">查询</el-button> |
|||
<div id="app" |
|||
class="div_map"></div> |
|||
<div style="margin-top: 10px"> |
|||
<span>经度</span> |
|||
<el-input class="item_width_3" |
|||
maxlength="50" |
|||
placeholder="请输入经度" |
|||
v-model="dataForm.longitude"> |
|||
</el-input> |
|||
<span style="margin-left: 20px">纬度</span> |
|||
<el-input class="item_width_3" |
|||
maxlength="50" |
|||
placeholder="请输入纬度" |
|||
v-model="dataForm.latitude"> |
|||
</el-input> |
|||
</div> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
</div> |
|||
<div class="div_btn"> |
|||
<el-button @click="handleCancle">取 消</el-button> |
|||
<el-button v-if="formType != 'detail'" |
|||
type="primary" |
|||
@click="handleComfirm">确 定</el-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from '@/js/dai/request' |
|||
var map |
|||
var search |
|||
var markers |
|||
var infoWindowList |
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
formType: 'add', //表单操作类型 add新增，edit编辑，detail详情 |
|||
|
|||
buildingId: '', //楼栋ID |
|||
dataForm: { |
|||
agencyId: '', // 所属组织ID |
|||
agencyName: '', |
|||
gridId: '', //所属网格ID |
|||
neighborHoodId: '',//所属小区id |
|||
buildingName: '',//房屋名称 |
|||
sort: 0,//排序 |
|||
totalUnitNum: 0,//单元数 |
|||
totalFloorNum: 0,//层数 |
|||
totalHouseNum: 0,//户数 |
|||
type: '1',//房屋类型 |
|||
location: '', //坐标位置 |
|||
longitude: '', //经度 |
|||
latitude: '' //纬度 |
|||
}, |
|||
|
|||
keyWords: '', |
|||
agencyObj: {}, |
|||
|
|||
} |
|||
}, |
|||
components: {}, |
|||
mounted () { |
|||
this.initMap() |
|||
}, |
|||
|
|||
methods: { |
|||
async initForm (type, row, agencyObj) { |
|||
|
|||
this.agencyObj = agencyObj |
|||
this.dataForm.agencyId = agencyObj.agencyId |
|||
this.dataForm.gridId = agencyObj.gridId |
|||
this.dataForm.neighborHoodId = agencyObj.id |
|||
|
|||
map.setCenter(new TMap.LatLng(agencyObj.latitude, agencyObj.longitude)) |
|||
|
|||
this.formType = type |
|||
if (row) { |
|||
this.buildingId = row.buildingId |
|||
this.dataForm = row |
|||
} |
|||
|
|||
}, |
|||
|
|||
async handleComfirm () { |
|||
let url = '' |
|||
if (this.formType === 'add') { |
|||
url = '/gov/org/building/buildingadd' |
|||
} else { |
|||
url = '/gov/org/building/buildingupdate' |
|||
|
|||
this.dataForm.buildingId = this.buildingId |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, this.dataForm) |
|||
|
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '添加楼栋成功' |
|||
}) |
|||
this.resetData() |
|||
this.$emit('dialogOk') |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleCancle () { |
|||
this.resetData() |
|||
this.$emit('dialogCancle') |
|||
|
|||
}, |
|||
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义 |
|||
initMap () { |
|||
// 定义地图中心点坐标 |
|||
var center = new window.TMap.LatLng(36.0722275, 120.38945519) |
|||
// 定义map变量，调用 TMap.Map() 构造函数创建地图 |
|||
map = new window.TMap.Map(document.getElementById('app'), { |
|||
center: center, // 设置地图中心点坐标 |
|||
zoom: 17.2, // 设置地图缩放级别 |
|||
pitch: 43.5, // 设置俯仰角 |
|||
rotation: 45 // 设置地图旋转角度 |
|||
}) |
|||
|
|||
search = new window.TMap.service.Search({ pageSize: 10 }) |
|||
// 新建一个地点搜索类 |
|||
markers = new TMap.MultiMarker({ |
|||
map: map, |
|||
geometries: [] |
|||
}) |
|||
infoWindowList = Array(10) |
|||
|
|||
// 监听地图平移结束 |
|||
map.on('panend', () => { |
|||
this.handleMoveCenter() |
|||
}) |
|||
this.handleMoveCenter() |
|||
}, |
|||
|
|||
setMarker (lat, lng) { |
|||
markers.setGeometries([]) |
|||
markers.add([ |
|||
{ |
|||
id: '4', |
|||
styleId: 'marker', |
|||
position: new TMap.LatLng(lat, lng), |
|||
properties: { |
|||
title: 'marker4' |
|||
} |
|||
} |
|||
]) |
|||
}, |
|||
|
|||
handleSearchMap () { |
|||
infoWindowList.forEach((infoWindow) => { |
|||
infoWindow.close() |
|||
}) |
|||
infoWindowList.length = 0 |
|||
markers.setGeometries([]) |
|||
// 在地图显示范围内以给定的关键字搜索地点 |
|||
search |
|||
.searchRectangle({ |
|||
keyword: this.keyWords, |
|||
bounds: map.getBounds() |
|||
}) |
|||
.then((result) => { |
|||
let { data } = result |
|||
if (Array.isArray(data) && data.length > 0) { |
|||
const { |
|||
location: { lat, lng } |
|||
} = data[0] |
|||
map.setCenter(new TMap.LatLng(lat, lng)) |
|||
this.setMarker(lat, lng) |
|||
this.dataForm.latitude = lat |
|||
this.dataForm.longitude = lng |
|||
} else { |
|||
this.$message.error('未检索到相关位置坐标') |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
handleMoveCenter () { |
|||
//修改地图中心点 |
|||
const center = map.getCenter() |
|||
const lat = center.getLat() |
|||
const lng = center.getLng() |
|||
this.dataForm.latitude = lat |
|||
this.dataForm.longitude = lng |
|||
this.setMarker(lat, lng) |
|||
}, |
|||
resetData () { |
|||
this.buildingId = '' //楼栋ID |
|||
this.dataForm = { |
|||
agencyId: '', // 所属组织ID |
|||
agencyName: '', |
|||
gridId: '', //所属网格ID |
|||
neighborHoodId: '',//所属小区id |
|||
buildingName: '',//房屋名称 |
|||
sort: 0,//排序 |
|||
totalUnitNum: 0,//单元数 |
|||
totalFloorNum: 0,//层数 |
|||
totalHouseNum: 0,//户数 |
|||
type: '1',//房屋类型 |
|||
location: '', //坐标位置 |
|||
longitude: '', //经度 |
|||
latitude: '' //纬度 |
|||
} |
|||
}, |
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
buildingName: [ |
|||
{ required: true, message: '楼栋名称不能为空', trigger: 'blur' }, |
|||
{ |
|||
min: 1, |
|||
max: 50, |
|||
message: '小区名称长度在 1 到 50个字符', |
|||
trigger: 'blur' |
|||
} |
|||
], |
|||
agencyId: [ |
|||
{ required: true, message: '所属组织不能为空', trigger: 'blur' } |
|||
], |
|||
gridId: [ |
|||
{ required: true, message: '所属网格不能为空', trigger: 'blur' } |
|||
], |
|||
|
|||
longitude: [ |
|||
{ required: true, message: '坐标不能为空', trigger: 'blur' } |
|||
] |
|||
} |
|||
}, |
|||
|
|||
}, |
|||
props: {} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.item_width_1 { |
|||
width: 500px; |
|||
} |
|||
.item_width_2 { |
|||
width: 400px; |
|||
} |
|||
.item_width_3 { |
|||
margin-left: 10px; |
|||
width: 200px; |
|||
} |
|||
|
|||
.div_map { |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
.div_btn { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
} |
|||
.el-tabs { |
|||
margin: 0 20px; |
|||
} |
|||
.el-upload__tip { |
|||
color: rgb(155, 155, 155); |
|||
margin: 0; |
|||
} |
|||
.form { |
|||
margin-top: 30px; |
|||
} |
|||
</style> |
|||
@ -1,499 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<div class="div_search"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">房主姓名</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input v-model="ownerName" |
|||
class="resi-cell-input" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入内容"> |
|||
</el-input> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">房主手机</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input v-model="ownerPhone" |
|||
class="resi-cell-input" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入内容"> |
|||
</el-input> |
|||
|
|||
</div> |
|||
</div> |
|||
<el-button style="margin-left:10px" |
|||
type="primary" |
|||
size="small" |
|||
@click="handleSearch">查询</el-button> |
|||
</div> |
|||
<div class="div_btn"> |
|||
<el-button style="float:left" |
|||
type="warning" |
|||
size="small" |
|||
@click="handleExport">导出</el-button> |
|||
<el-button style="float:left" |
|||
type="success" |
|||
size="small" |
|||
@click="handleAdd">新增楼宇</el-button> |
|||
<el-button style="float:left" |
|||
type="primary" |
|||
size="small" |
|||
@click="handleExportModule">下载楼宇模板</el-button> |
|||
<el-upload ref="upload" |
|||
:multiple='false' |
|||
:show-file-list='false' |
|||
:before-upload="beforeUpload" |
|||
action="" |
|||
accept=".xls,.xlsx" |
|||
:limit="1" |
|||
:on-exceed="handleExceed" |
|||
:http-request="uploadFile"> |
|||
<el-button style="margin-left:10px" |
|||
size="small" |
|||
type="danger">导入小区数据</el-button> |
|||
</el-upload> |
|||
</div> |
|||
|
|||
<div class="div_table"> |
|||
<el-table :data="tableData" |
|||
border |
|||
style="width: 100%"> |
|||
<el-table-column prop="buildingName" |
|||
label="楼栋名称" |
|||
width="180"> |
|||
</el-table-column> |
|||
<el-table-column prop="neighborHoodName" |
|||
label="所属小区" |
|||
width="160"> |
|||
</el-table-column> |
|||
<el-table-column prop="buildingType" |
|||
label="楼栋类型" |
|||
width="140"> |
|||
</el-table-column> |
|||
<el-table-column prop="totalUnitNum" |
|||
label="单元数"> |
|||
</el-table-column> |
|||
<el-table-column prop="totalFloorNum" |
|||
label="层数"> |
|||
</el-table-column> |
|||
<el-table-column prop="totalHouseNum" |
|||
label="户数"> |
|||
</el-table-column> |
|||
<el-table-column prop="remark" |
|||
label="备注"> |
|||
</el-table-column> |
|||
<el-table-column label="操作" |
|||
fixed="right" |
|||
width="140" |
|||
header-align="center" |
|||
align="center" |
|||
class="operate"> |
|||
<template slot-scope="scope"> |
|||
|
|||
<el-button type="text" |
|||
style="color:#1C6AFD;text-decoration: underline;" |
|||
size="small" |
|||
@click="handleDetail(scope.row)">查看</el-button> |
|||
<el-button type="text" |
|||
style="color:#00A7A9;text-decoration: underline;" |
|||
size="small" |
|||
@click="handleEdit(scope.row)">修改</el-button> |
|||
|
|||
<el-button type="text" |
|||
style="color:#D51010;text-decoration: underline;" |
|||
size="small" |
|||
@click="handleDelete(scope.row)">删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div> |
|||
<el-pagination @size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="pageNo" |
|||
:page-sizes="[20, 30, 50]" |
|||
:page-size="pageSize" |
|||
layout="sizes, prev, pager, next" |
|||
:total="total"> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 修改弹出框 --> |
|||
<el-dialog :visible.sync="formShow" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="formTitle" |
|||
top="5vh" |
|||
width="900px" |
|||
@closed="diaClose"> |
|||
<build-form ref="ref_form" |
|||
@dialogCancle="addFormCancle" |
|||
@dialogOk="addFormOk"></build-form> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import BuildForm from './buildForm' |
|||
|
|||
import { requestPost } from "@/js/dai/request"; |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
loading: false, |
|||
total: 0, |
|||
pageSize: 20, |
|||
pageNo: 0, |
|||
|
|||
agencyObj: {},//树所选的小区对象 |
|||
ownerName: '', |
|||
ownerPhone: '', |
|||
tableData: [], |
|||
|
|||
//form相关 |
|||
formShow: false, |
|||
formTitle: '新增楼宇', |
|||
|
|||
} |
|||
}, |
|||
components: { |
|||
BuildForm |
|||
}, |
|||
async mounted () { |
|||
console.log('building11111111111111111111111111') |
|||
}, |
|||
computed: { |
|||
rowHeight () { |
|||
return (this.clientHeight - 200) + 'px' |
|||
}, |
|||
...mapGetters(['clientHeight']) |
|||
}, |
|||
methods: { |
|||
|
|||
handleSearch () { |
|||
this.loadTable() |
|||
}, |
|||
|
|||
async loadTable (fromTree, treeObj) { |
|||
if (fromTree) { |
|||
this.agencyObj = treeObj |
|||
} |
|||
|
|||
const url = "/gov/org/building/buildinglist" |
|||
let params = { |
|||
pageSize: this.pageSize, |
|||
pageNo: this.pageNo, |
|||
ownerName: this.ownerName, |
|||
ownerPhone: this.ownerPhone, |
|||
neighborHoodId: this.agencyObj.id |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.total = data.total |
|||
this.tableData = data.list |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
diaClose () { |
|||
this.formShow = false |
|||
}, |
|||
|
|||
handleDetail (row) { |
|||
this.formTitle = '楼栋详情' |
|||
this.formShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_form.initForm('detail', row, this.agencyObj) |
|||
}) |
|||
}, |
|||
|
|||
handleAdd () { |
|||
this.formTitle = '新增楼栋' |
|||
this.formShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_form.initForm('add', null, this.agencyObj) |
|||
}) |
|||
}, |
|||
|
|||
handleEdit (row) { |
|||
this.formTitle = '修改楼栋' |
|||
this.formShow = true |
|||
this.$refs.ref_form.initForm('edit', row, this.agencyObj) |
|||
}, |
|||
|
|||
addFormCancle () { |
|||
this.formShow = false |
|||
}, |
|||
addFormOk () { |
|||
this.formShow = false |
|||
this.loadTable() |
|||
this.$emit('refreshTree') |
|||
}, |
|||
|
|||
async handleDelete (row) { |
|||
|
|||
this.$confirm("确认删除?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}) |
|||
.then(() => { |
|||
this.deleteBuild(row) |
|||
}) |
|||
.catch(err => { |
|||
if (err == "cancel") { |
|||
// this.$message({ |
|||
// type: "info", |
|||
// message: "已取消删除" |
|||
// }); |
|||
} |
|||
|
|||
}); |
|||
|
|||
|
|||
}, |
|||
|
|||
async deleteBuild (row) { |
|||
const url = "/gov/org/building/buildingdel" |
|||
|
|||
let params = { |
|||
buildingId: row.buildingId |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: "success", |
|||
message: "删除成功" |
|||
}); |
|||
this.$emit('refreshTree') |
|||
this.loadTable() |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
//导出表格 |
|||
async handleExport () { |
|||
let title = this.agencyObj.label |
|||
title = title + '—楼栋列表' |
|||
|
|||
const url = "/gov/org/building/exportbuildinginfo" |
|||
let params = { |
|||
ownerName: this.ownerName, |
|||
ownerPhone: this.ownerPhone, |
|||
neighborHoodId: this.agencyObj.id |
|||
} |
|||
|
|||
app.ajax.exportFilePost( |
|||
url, |
|||
params, |
|||
(data, rspMsg) => { |
|||
|
|||
this.download(data, title + '.xls') |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.$message.error(rspMsg); |
|||
} |
|||
); |
|||
|
|||
}, |
|||
|
|||
// 下载文件 |
|||
download (data, fileName) { |
|||
if (!data) { |
|||
return |
|||
} |
|||
|
|||
var csvData = new Blob([data]) |
|||
|
|||
if (window.navigator && window.navigator.msSaveOrOpenBlob) { |
|||
window.navigator.msSaveOrOpenBlob(csvData, fileName); |
|||
} |
|||
// for Non-IE (chrome, firefox etc.) |
|||
else { |
|||
var a = document.createElement('a'); |
|||
document.body.appendChild(a); |
|||
a.style = 'display: none'; |
|||
var url = window.URL.createObjectURL(csvData); |
|||
a.href = url; |
|||
a.download = fileName; |
|||
a.click(); |
|||
a.remove(); |
|||
window.URL.revokeObjectURL(url); |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleExportModule () { |
|||
let title = '' |
|||
title = '楼栋模板' |
|||
|
|||
const url = "/gov/org/building/exporttemplate" |
|||
let params = {} |
|||
|
|||
app.ajax.exportFilePost( |
|||
url, |
|||
params, |
|||
(data, rspMsg) => { |
|||
|
|||
this.download(data, title + '.xls') |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.$message.error(rspMsg); |
|||
} |
|||
); |
|||
}, |
|||
|
|||
// 上传文件之前的钩子 |
|||
beforeUpload (file) { |
|||
this.files = file; |
|||
|
|||
const isText = file.type === 'application/vnd.ms-excel' |
|||
const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' |
|||
|
|||
if (!isText && !isTextComputer) { |
|||
this.$message.error('请选择正确格式的文件') |
|||
return false |
|||
} else { |
|||
this.fileName = file.name; |
|||
return true |
|||
} |
|||
|
|||
}, |
|||
// 上传文件个数超过定义的数量 |
|||
handleExceed (files, fileList) { |
|||
this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传`) |
|||
}, |
|||
|
|||
async uploadFile () { |
|||
this.loading = true |
|||
|
|||
if (this.fileName == "") { |
|||
this.$message.warning('请选择要上传的文件！') |
|||
return false |
|||
} |
|||
|
|||
//清空上传列表 |
|||
this.$refs['upload'].clearFiles() |
|||
|
|||
var url = '/gov/org/building/import' |
|||
let fileFormData = new FormData(); |
|||
fileFormData.append('file', this.files);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名 |
|||
|
|||
const { data, code, msg } = await requestPost(url, fileFormData) |
|||
if (code === 0) { |
|||
|
|||
this.$emit('refreshTree') |
|||
this.loadTable() |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
|
|||
}, |
|||
|
|||
|
|||
handleSizeChange (val) { |
|||
console.log(`每页 ${val} 条`) |
|||
}, |
|||
handleCurrentChange (val) { |
|||
console.log(`当前页: ${val}`) |
|||
}, |
|||
|
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
filterText (val) { |
|||
this.$refs.tree.filter(val); |
|||
} |
|||
}, |
|||
props: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped > |
|||
.div_search { |
|||
display: flex; |
|||
|
|||
.resi-cell { |
|||
display: flex; |
|||
align-items: center; |
|||
.resi-cell-label { |
|||
width: 70px; |
|||
box-sizing: border-box; |
|||
margin-right: 15px; |
|||
text-align: right; |
|||
// line-height: 32; |
|||
} |
|||
|
|||
.resi-cell-input { |
|||
width: 180px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.div_table { |
|||
margin-top: 20px; |
|||
} |
|||
.div_search { |
|||
display: flex; |
|||
|
|||
.resi-cell { |
|||
display: flex; |
|||
align-items: center; |
|||
.resi-cell-label { |
|||
width: 70px; |
|||
box-sizing: border-box; |
|||
margin-right: 15px; |
|||
text-align: right; |
|||
// line-height: 32; |
|||
} |
|||
|
|||
.resi-cell-input { |
|||
width: 180px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.div_btn { |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
.el-row { |
|||
/* margin-bottom: 20px; */ |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
margin-top: 10px; |
|||
margin-right: 50px; |
|||
} |
|||
</style> |
|||
@ -1,266 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
|
|||
<el-row class="row" |
|||
:gutter="10"> |
|||
<el-col :span="5"> |
|||
<el-card> |
|||
|
|||
<div :style="{height:rowHeight}" |
|||
class="div_tree"> |
|||
<el-input placeholder="输入关键字进行过滤" |
|||
v-model="filterText"> |
|||
</el-input> |
|||
|
|||
<el-tree ref="ref_tree" |
|||
class="filter-tree" |
|||
:data="treeData" |
|||
:props="defaultProps" |
|||
:highlight-current="true" |
|||
node-key="id" |
|||
:expand-on-click-node="false" |
|||
default-expand-all |
|||
:filter-node-method="filterNode" |
|||
@node-click="handleNodeClick"> |
|||
</el-tree> |
|||
|
|||
</div> |
|||
|
|||
</el-card> |
|||
</el-col> |
|||
|
|||
<el-col :span="19"> |
|||
<el-card> |
|||
<div :style="{height:rowHeight}"> |
|||
|
|||
<build-table v-if="selTreeObj.level==='neighbourHood'" |
|||
ref="ref_neighTable" |
|||
@refreshTree="refreshTree"></build-table> |
|||
<room-table v-else-if="selTreeObj.level==='building'" |
|||
ref="ref_buildingTable" |
|||
@refreshTree="refreshTree"></room-table> |
|||
<community-table v-else |
|||
ref="ref_communityTable" |
|||
@refreshTree="refreshTree"></community-table> |
|||
|
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
|
|||
</el-row> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import CDialog from '@c/CDialog' |
|||
import communityTable from './communityTable' |
|||
import buildTable from './buildTable' |
|||
import roomTable from './roomTable' |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
filterText: '', |
|||
treeData: [], |
|||
defaultProps: { |
|||
children: 'children', |
|||
label: 'label' |
|||
}, |
|||
|
|||
selTreeObj: {}, |
|||
|
|||
centerPoint: [] |
|||
|
|||
} |
|||
}, |
|||
components: { |
|||
CDialog |
|||
}, |
|||
async mounted () { |
|||
await this.loadOrgData() |
|||
await this.loadTree() |
|||
await this.$refs['ref_communityTable'].loadTable(true, this.selTreeObj) |
|||
if (this.treeData.length > 0) { |
|||
this.$nextTick(() => { |
|||
// ref_tree 元素的ref value 绑定的node-key |
|||
this.$refs.ref_tree.setCurrentKey(this.treeData[0].id); |
|||
}); |
|||
} |
|||
|
|||
}, |
|||
computed: { |
|||
rowHeight () { |
|||
return (this.clientHeight - 200) + 'px' |
|||
}, |
|||
...mapGetters(['clientHeight']) |
|||
}, |
|||
methods: { |
|||
async loadTree (isRefresh) { |
|||
const url = "/gov/org/building/treelist" |
|||
let params = {} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
|
|||
this.treeData = data |
|||
if (!isRefresh && data.length > 0) { |
|||
|
|||
this.selTreeObj = data[0] |
|||
if (!this.selTreeObj.latitude) { |
|||
this.selTreeObj.latitude = this.centerPoint[0] |
|||
} |
|||
|
|||
if (!this.selTreeObj.longitude) { |
|||
this.selTreeObj.longitude = this.centerPoint[1] |
|||
} |
|||
} |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async loadOrgData () { |
|||
const url = "/gov/org/agency/maporg" |
|||
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/agency/maporg" |
|||
let params = {} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.centerPoint = [] |
|||
|
|||
this.centerPoint.push(data.latitude) |
|||
this.centerPoint.push(data.longitude) |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleNodeClick (obj) { |
|||
|
|||
this.getTreeObj(obj) |
|||
|
|||
this.$nextTick(() => { |
|||
if (obj.level === 'building') {//点击楼栋 |
|||
this.$refs['ref_buildingTable'].loadTable(true, this.selTreeObj) |
|||
|
|||
} else if (obj.level === 'neighbourHood') {//点击小区 |
|||
this.$refs['ref_neighTable'].loadTable(true, this.selTreeObj) |
|||
|
|||
} else { |
|||
this.$refs['ref_communityTable'].loadTable(true, this.selTreeObj) |
|||
} |
|||
}) |
|||
|
|||
}, |
|||
|
|||
//添加小区结束 |
|||
async refreshTree () { |
|||
|
|||
await this.loadTree(this.selTreeObj.id) |
|||
this.$nextTick(() => { |
|||
// ref_tree 元素的ref value 绑定的node-key |
|||
this.$refs.ref_tree.setCurrentKey(this.selTreeObj.id); |
|||
}); |
|||
}, |
|||
|
|||
//解析树数据 |
|||
getTreeObj (obj) { |
|||
// 树接口： |
|||
// 组织：组织id、组织名称、type、经度、纬度 |
|||
// 小区：小区id、小区名称、type、所属网格id、所属网格名称、所属组织id、所属组织名称、经度、纬度 |
|||
// 楼：楼id、楼名称、type、所属小区id、所属小区名称 |
|||
if (obj.level === 'building') {//点击楼栋 |
|||
let communityNode = this.$refs.ref_tree.getNode(obj.pid) |
|||
obj.communityId = communityNode.data.id |
|||
obj.communityName = communityNode.data.label |
|||
|
|||
} else if (obj.level === 'neighbourHood') {//点击小区 |
|||
|
|||
let gridNode = this.$refs.ref_tree.getNode(obj.pid) |
|||
let agencyNode = this.$refs.ref_tree.getNode(gridNode.data.pid) |
|||
obj.gridId = gridNode.data.id |
|||
obj.gridName = gridNode.data.label |
|||
obj.agencyId = agencyNode.data.id |
|||
obj.agencyName = agencyNode.data.label |
|||
} else { |
|||
|
|||
} |
|||
|
|||
if (!obj.latitude) { |
|||
obj.latitude = this.centerPoint[0] |
|||
} |
|||
|
|||
if (!obj.longitude) { |
|||
obj.longitude = this.centerPoint[1] |
|||
} |
|||
this.selTreeObj = obj |
|||
console.log(this.selTreeObj) |
|||
|
|||
}, |
|||
|
|||
handleSizeChange (val) { |
|||
console.log(`每页 ${val} 条`) |
|||
}, |
|||
handleCurrentChange (val) { |
|||
console.log(`当前页: ${val}`) |
|||
}, |
|||
|
|||
filterNode (value, data) { |
|||
if (!value) return true; |
|||
return data.label.indexOf(value) !== -1; |
|||
}, |
|||
|
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
filterText (val) { |
|||
this.$refs.ref_tree.filter(val); |
|||
} |
|||
}, |
|||
components: { |
|||
communityTable, buildTable, roomTable |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped > |
|||
.div_tree { |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.div_btn { |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
.el-row { |
|||
/* margin-bottom: 20px; */ |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
margin-top: 10px; |
|||
margin-right: 50px; |
|||
} |
|||
</style> |
|||
@ -1,498 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<div> |
|||
<div v-show="!propertyFormShow"> |
|||
<el-form :inline="false" |
|||
:model="dataForm" |
|||
:rules="dataRule" |
|||
:disabled="formType === 'detail'" |
|||
class="form"> |
|||
|
|||
<el-form-item label="所属组织" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<span>{{ dataForm.agencyName }}</span> |
|||
</el-form-item> |
|||
<el-form-item label="所属网格" |
|||
prop="gridId" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-select class="item_width_1" |
|||
v-model="dataForm.gridId" |
|||
placeholder="请选择" |
|||
clearable> |
|||
<el-option v-for="item in gridList" |
|||
:key="item.gridId" |
|||
:label="item.gridName" |
|||
:value="item.gridId"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="小区名称" |
|||
prop="neighborHoodName" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
maxlength="50" |
|||
show-word-limit |
|||
placeholder="请输入小区名称" |
|||
v-model="dataForm.neighborHoodName"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="关联物业" |
|||
prop="propertyId" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-select class="item_width_2" |
|||
v-model="dataForm.propertyId" |
|||
placeholder="请选择" |
|||
clearable> |
|||
<el-option v-for="item in propertyList" |
|||
:key="item.propertyId" |
|||
:label="item.propertyName" |
|||
:value="item.propertyId"> |
|||
</el-option> |
|||
</el-select> |
|||
|
|||
<el-button style="margin-left: 10px" |
|||
type="primary" |
|||
size="small" |
|||
@click="handleAddProperty">添加物业</el-button> |
|||
</el-form-item> |
|||
<el-form-item label="详细地址" |
|||
prop="address" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
maxlength="50" |
|||
show-word-limit |
|||
placeholder="请输入详细地址" |
|||
v-model="dataForm.address"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="备注" |
|||
prop="remark" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
type="textarea" |
|||
maxlength="500" |
|||
show-word-limit |
|||
:rows="3" |
|||
placeholder="请输入备注，不超过500字" |
|||
v-model="dataForm.remark"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="位置坐标" |
|||
prop="longitude" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_3" |
|||
maxlength="50" |
|||
placeholder="请输入关键字" |
|||
v-model="keyWords"> |
|||
</el-input> |
|||
<el-button style="margin-left: 10px" |
|||
type="primary" |
|||
size="small" |
|||
@click="handleSearchMap">查询</el-button> |
|||
<div id="app" |
|||
class="div_map"></div> |
|||
<div style="margin-top: 10px"> |
|||
<span>经度</span> |
|||
<el-input class="item_width_3" |
|||
maxlength="50" |
|||
placeholder="请输入经度" |
|||
v-model="dataForm.longitude"> |
|||
</el-input> |
|||
<span style="margin-left: 20px">纬度</span> |
|||
<el-input class="item_width_3" |
|||
maxlength="50" |
|||
placeholder="请输入纬度" |
|||
v-model="dataForm.latitude"> |
|||
</el-input> |
|||
</div> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<div v-show="propertyFormShow"> |
|||
<el-form :inline="false" |
|||
:model="propertyForm" |
|||
:rules="propertyRule" |
|||
class="form"> |
|||
<el-form-item label="物业名称" |
|||
prop="name" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
maxlength="50" |
|||
show-word-limit |
|||
placeholder="请输入小区名称" |
|||
v-model="propertyForm.name"> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
<div class="div_btn"> |
|||
<el-button @click="handleCancle">取 消</el-button> |
|||
<el-button v-if="formType != 'detail'" |
|||
type="primary" |
|||
@click="handleComfirm">确 定</el-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from '@/js/dai/request' |
|||
var map |
|||
var search |
|||
var markers |
|||
var infoWindowList |
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
formType: 'add', //表单操作类型 add新增，edit编辑，detail详情 |
|||
|
|||
gridList: [], |
|||
propertyList: [], |
|||
|
|||
neighborHoodId: '', //小区ID |
|||
dataForm: { |
|||
neighborHoodName: '', // 小区名称【不超过50字】 |
|||
agencyId: '', // 所属组织ID |
|||
agencyName: '', |
|||
gridId: '', //所属网格ID |
|||
propertyId: '', //关联物业 |
|||
address: '', //详细地址 |
|||
remark: '', //备注【最大500字】 |
|||
location: '', //坐标位置 |
|||
longitude: '', //经度 |
|||
latitude: '' //纬度 |
|||
}, |
|||
|
|||
propertyFormShow: false, |
|||
propertyForm: { |
|||
name: '' |
|||
}, |
|||
|
|||
keyWords: '', |
|||
agencyObj: {} |
|||
} |
|||
}, |
|||
components: {}, |
|||
mounted () { |
|||
this.initMap() |
|||
}, |
|||
|
|||
methods: { |
|||
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义 |
|||
initMap () { |
|||
// 定义地图中心点坐标 |
|||
var center = new window.TMap.LatLng(36.0722275, 120.38945519) |
|||
// 定义map变量，调用 TMap.Map() 构造函数创建地图 |
|||
map = new window.TMap.Map(document.getElementById('app'), { |
|||
center: center, // 设置地图中心点坐标 |
|||
zoom: 17.2, // 设置地图缩放级别 |
|||
pitch: 43.5, // 设置俯仰角 |
|||
rotation: 45 // 设置地图旋转角度 |
|||
}) |
|||
|
|||
search = new window.TMap.service.Search({ pageSize: 10 }) |
|||
// 新建一个地点搜索类 |
|||
markers = new TMap.MultiMarker({ |
|||
map: map, |
|||
geometries: [] |
|||
}) |
|||
infoWindowList = Array(10) |
|||
|
|||
// 监听地图平移结束 |
|||
map.on('panend', () => { |
|||
this.handleMoveCenter() |
|||
}) |
|||
this.handleMoveCenter() |
|||
}, |
|||
|
|||
setMarker (lat, lng) { |
|||
markers.setGeometries([]) |
|||
markers.add([ |
|||
{ |
|||
id: '4', |
|||
styleId: 'marker', |
|||
position: new TMap.LatLng(lat, lng), |
|||
properties: { |
|||
title: 'marker4' |
|||
} |
|||
} |
|||
]) |
|||
}, |
|||
|
|||
handleSearchMap () { |
|||
infoWindowList.forEach((infoWindow) => { |
|||
infoWindow.close() |
|||
}) |
|||
infoWindowList.length = 0 |
|||
markers.setGeometries([]) |
|||
// 在地图显示范围内以给定的关键字搜索地点 |
|||
search |
|||
.searchRectangle({ |
|||
keyword: this.keyWords, |
|||
bounds: map.getBounds() |
|||
}) |
|||
.then((result) => { |
|||
let { data } = result |
|||
if (Array.isArray(data) && data.length > 0) { |
|||
const { |
|||
location: { lat, lng } |
|||
} = data[0] |
|||
map.setCenter(new TMap.LatLng(lat, lng)) |
|||
this.setMarker(lat, lng) |
|||
this.dataForm.latitude = lat |
|||
this.dataForm.longitude = lng |
|||
} else { |
|||
this.$message.error('未检索到相关位置坐标') |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
handleMoveCenter () { |
|||
//修改地图中心点 |
|||
const center = map.getCenter() |
|||
const lat = center.getLat() |
|||
const lng = center.getLng() |
|||
this.dataForm.latitude = lat |
|||
this.dataForm.longitude = lng |
|||
this.setMarker(lat, lng) |
|||
}, |
|||
|
|||
async initForm (type, row, agencyObj) { |
|||
|
|||
this.agencyObj = agencyObj |
|||
// debugger |
|||
map.setCenter(new TMap.LatLng(agencyObj.latitude, agencyObj.longitude)) |
|||
|
|||
this.formType = type |
|||
if (row) { |
|||
this.neighborHoodId = row.neighborHoodId |
|||
this.dataForm = row |
|||
} |
|||
|
|||
await this.loadAgency() |
|||
await this.loadGrid() |
|||
await this.loadProperty() |
|||
}, |
|||
|
|||
//加载组织 |
|||
async loadAgency () { |
|||
const url = '/epmetuser/customerstaff/staffbasicinfo' |
|||
let params = {} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.dataForm.agencyId = data.agencyId |
|||
this.dataForm.agencyName = data.agencyName |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
//加载网格 |
|||
async loadGrid () { |
|||
const url = '/gov/org/grid/allgridsnopermission ' |
|||
// const url = "https://epmet-dev.elinkservice.cn:7082/api/apimock-v2/95518686fa128a53f64c678906848062/gov/org/grid/allgrids" |
|||
let params = { |
|||
agencyId: this.dataForm.agencyId |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.gridList = data |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
//加载物业 |
|||
async loadProperty () { |
|||
const url = '/gov/org/propertymanagement/list' |
|||
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/propertymanagement/list" |
|||
let params = {} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.propertyList = data |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
handleAddProperty () { |
|||
|
|||
this.propertyForm.name = '' |
|||
this.propertyFormShow = true |
|||
}, |
|||
|
|||
async handleComfirm () { |
|||
if (this.propertyFormShow) { |
|||
this.addProperty() |
|||
} else { |
|||
this.addCommunity() |
|||
} |
|||
}, |
|||
async addCommunity () { |
|||
let url = '' |
|||
if (this.formType === 'add') { |
|||
url = '/gov/org/neighborhood/neighborhoodadd' |
|||
// url = "http://yapi.elinkservice.cn/mock/245/gov/org/neighborhood/neighborhoodadd" |
|||
} else { |
|||
url = '/gov/org/neighborhood/neighborhoodupdate' |
|||
|
|||
this.dataForm.neighborHoodId = this.neighborHoodId |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, this.dataForm) |
|||
|
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '添加小区成功' |
|||
}) |
|||
this.resetData() |
|||
this.$emit('dialogOk') |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
async addProperty () { |
|||
const url = '/gov/org/propertymanagement/add' |
|||
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/propertymanagement/add" |
|||
let params = { |
|||
name: this.propertyForm.name |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '添加物业成功' |
|||
}) |
|||
this.propertyForm.name = '' |
|||
this.propertyFormShow = false |
|||
this.loadProperty() |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
handleCancle () { |
|||
if (this.propertyFormShow) { |
|||
this.propertyForm.name = '' |
|||
this.propertyFormShow = false |
|||
} else { |
|||
this.resetData() |
|||
this.$emit('dialogCancle') |
|||
} |
|||
}, |
|||
resetData () { |
|||
this.neighborHoodId = '' //小区ID |
|||
this.dataForm = { |
|||
neighborHoodName: '', // 小区名称【不超过50字】 |
|||
agencyId: '', // 所属组织ID |
|||
agencyName: '', |
|||
gridId: '', //所属网格ID |
|||
propertyId: '', //关联物业 |
|||
address: '', //详细地址 |
|||
remark: '', //备注【最大500字】 |
|||
location: '', //坐标位置 |
|||
longitude: '', //经度 |
|||
latitude: '' //纬度 |
|||
} |
|||
}, |
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
neighborHoodName: [ |
|||
{ required: true, message: '小区名称不能为空', trigger: 'blur' }, |
|||
{ |
|||
min: 1, |
|||
max: 50, |
|||
message: '小区名称长度在 1 到 50个字符', |
|||
trigger: 'blur' |
|||
} |
|||
], |
|||
agencyId: [ |
|||
{ required: true, message: '所属组织不能为空', trigger: 'blur' } |
|||
], |
|||
gridId: [ |
|||
{ required: true, message: '所属网格不能为空', trigger: 'blur' } |
|||
], |
|||
address: [ |
|||
{ required: true, message: '详细地址不能为空', trigger: 'blur' } |
|||
], |
|||
longitude: [ |
|||
{ required: true, message: '坐标不能为空', trigger: 'blur' } |
|||
] |
|||
} |
|||
}, |
|||
propertyRule () { |
|||
name: [ |
|||
{ required: true, message: '物业名称不能为空', trigger: 'blur' } |
|||
// { min: 1, max: 50, message: '小区名称长度在 1 到 50个字符', trigger: 'blur' } |
|||
] |
|||
} |
|||
}, |
|||
props: {} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.item_width_1 { |
|||
width: 500px; |
|||
} |
|||
.item_width_2 { |
|||
width: 400px; |
|||
} |
|||
.item_width_3 { |
|||
margin-left: 10px; |
|||
width: 200px; |
|||
} |
|||
|
|||
.div_map { |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
.div_btn { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
} |
|||
.el-tabs { |
|||
margin: 0 20px; |
|||
} |
|||
.el-upload__tip { |
|||
color: rgb(155, 155, 155); |
|||
margin: 0; |
|||
} |
|||
.form { |
|||
margin-top: 30px; |
|||
} |
|||
</style> |
|||
@ -1,501 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<div class="div_search"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">房主姓名</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input v-model="ownerName" |
|||
class="resi-cell-input" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入内容"> |
|||
</el-input> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">房主手机</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input v-model="ownerPhone" |
|||
class="resi-cell-input" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入内容"> |
|||
</el-input> |
|||
|
|||
</div> |
|||
</div> |
|||
<el-button style="margin-left:10px" |
|||
type="primary" |
|||
size="small" |
|||
@click="handleSearch">查询</el-button> |
|||
</div> |
|||
<div class="div_btn"> |
|||
<el-button style="float:left" |
|||
type="warning" |
|||
size="small" |
|||
@click="handleExport">导出</el-button> |
|||
<el-button style="float:left" |
|||
type="success" |
|||
size="small" |
|||
@click="handleAdd">新增小区</el-button> |
|||
<el-button style="float:left" |
|||
type="primary" |
|||
size="small" |
|||
@click="handleExportModule">下载小区模板</el-button> |
|||
|
|||
<el-upload ref="upload" |
|||
:multiple='false' |
|||
:show-file-list='false' |
|||
:before-upload="beforeUpload" |
|||
action="" |
|||
accept=".xls,.xlsx" |
|||
:limit="1" |
|||
:on-exceed="handleExceed" |
|||
:http-request="uploadFile"> |
|||
<el-button style="margin-left:10px" |
|||
size="small" |
|||
type="danger">导入小区数据</el-button> |
|||
</el-upload> |
|||
|
|||
</div> |
|||
|
|||
<div class="div_table"> |
|||
<el-table :data="tableData" |
|||
border |
|||
style="width: 100%"> |
|||
<el-table-column prop="neighborHoodName" |
|||
label="小区名称" |
|||
width="180"> |
|||
</el-table-column> |
|||
<el-table-column prop="agencyName" |
|||
label="所属组织" |
|||
width="160"> |
|||
</el-table-column> |
|||
<el-table-column prop="gridName" |
|||
label="所属网格" |
|||
width="140"> |
|||
</el-table-column> |
|||
<el-table-column prop="address" |
|||
label="详细地址"> |
|||
</el-table-column> |
|||
<el-table-column prop="remark" |
|||
label="备注"> |
|||
</el-table-column> |
|||
<el-table-column label="操作" |
|||
fixed="right" |
|||
width="140" |
|||
header-align="center" |
|||
align="center" |
|||
class="operate"> |
|||
<template slot-scope="scope"> |
|||
|
|||
<el-button type="text" |
|||
style="color:#1C6AFD;text-decoration: underline;" |
|||
size="small" |
|||
@click="handleDetail(scope.row)">查看</el-button> |
|||
<el-button type="text" |
|||
style="color:#00A7A9;text-decoration: underline;" |
|||
size="small" |
|||
@click="handleEdit(scope.row)">修改</el-button> |
|||
|
|||
<el-button type="text" |
|||
style="color:#D51010;text-decoration: underline;" |
|||
size="small" |
|||
@click="handleDelete(scope.row)">删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div> |
|||
<el-pagination @size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="pageNo" |
|||
:page-sizes="[20, 30, 50]" |
|||
:page-size="pageSize" |
|||
layout="sizes, prev, pager, next" |
|||
:total="total"> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 修改弹出框 --> |
|||
<el-dialog :visible.sync="formShow" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="formTitle" |
|||
width="900px" |
|||
top="5vh" |
|||
@closed="diaClose"> |
|||
<community-form ref="ref_form" |
|||
@dialogCancle="addFormCancle" |
|||
@dialogOk="addFormOk"></community-form> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import CommunityForm from './communityForm' |
|||
|
|||
import { requestPost } from "@/js/dai/request"; |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
loading: false, |
|||
total: 0, |
|||
pageSize: 20, |
|||
pageNo: 0, |
|||
|
|||
agencyObj: {},//树所选的组织对象 |
|||
ownerName: '', |
|||
ownerPhone: '', |
|||
tableData: [], |
|||
|
|||
//form相关 |
|||
formShow: false, |
|||
formTitle: '新增小区', |
|||
|
|||
files: "", |
|||
fileName: "", |
|||
uploadUlr: window.SITE_CONFIG['apiURL'] + '/gov/org/neighborhood/import' |
|||
|
|||
} |
|||
}, |
|||
components: { |
|||
CommunityForm |
|||
}, |
|||
async mounted () { |
|||
|
|||
}, |
|||
computed: { |
|||
rowHeight () { |
|||
return (this.clientHeight - 200) + 'px' |
|||
}, |
|||
...mapGetters(['clientHeight']) |
|||
}, |
|||
methods: { |
|||
|
|||
handleSearch () { |
|||
this.loadTable() |
|||
}, |
|||
async loadTable (fromTree, treeObj) { |
|||
if (fromTree) { |
|||
this.agencyObj = treeObj |
|||
} |
|||
|
|||
const url = "/gov/org/neighborhood/neighborhoodlist" |
|||
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/neighborhood/neighborhoodlist" |
|||
let params = { |
|||
pageSize: this.pageSize, |
|||
pageNo: this.pageNo, |
|||
ownerName: this.ownerName, |
|||
ownerPhone: this.ownerPhone, |
|||
level: this.agencyObj.level, |
|||
id: this.agencyObj.id |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.total = data.total |
|||
this.tableData = data.list |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
diaClose () { |
|||
this.formShow = false |
|||
}, |
|||
|
|||
handleDetail (row) { |
|||
this.formTitle = '小区详情' |
|||
this.formShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_form.initForm('detail', row, this.agencyObj) |
|||
}) |
|||
}, |
|||
|
|||
handleAdd () { |
|||
this.formTitle = '新增小区' |
|||
this.formShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_form.initForm('add', null, this.agencyObj) |
|||
}) |
|||
}, |
|||
|
|||
handleEdit (row) { |
|||
this.formTitle = '修改小区' |
|||
this.formShow = true |
|||
this.$refs.ref_form.initForm('edit', row, this.agencyObj) |
|||
}, |
|||
|
|||
addFormCancle () { |
|||
this.formShow = false |
|||
}, |
|||
addFormOk () { |
|||
this.formShow = false |
|||
this.loadTable() |
|||
this.$emit('refreshTree') |
|||
}, |
|||
|
|||
async handleDelete (row) { |
|||
|
|||
this.$confirm("确认删除?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}) |
|||
.then(() => { |
|||
this.deleteCommunity(row) |
|||
}) |
|||
.catch(err => { |
|||
if (err == "cancel") { |
|||
// this.$message({ |
|||
// type: "info", |
|||
// message: "已取消删除" |
|||
// }); |
|||
} |
|||
|
|||
}); |
|||
}, |
|||
|
|||
async deleteCommunity (row) { |
|||
const url = "/gov/org/neighborhood/neighborhooddel" |
|||
|
|||
let params = { |
|||
neighborHoodId: row.neighborHoodId |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: "success", |
|||
message: "删除成功" |
|||
}); |
|||
this.$emit('refreshTree') |
|||
this.loadTable() |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
//导出表格 |
|||
async handleExport () { |
|||
let title = this.agencyObj.label |
|||
title = title + '—小区列表' |
|||
|
|||
const url = "/gov/org/neighborhood/exportneighborhoodinfo" |
|||
let params = { |
|||
ownerName: this.ownerName, |
|||
ownerPhone: this.ownerPhone, |
|||
level: this.agencyObj.level, |
|||
id: this.agencyObj.id |
|||
} |
|||
|
|||
app.ajax.exportFilePost( |
|||
url, |
|||
params, |
|||
(data, rspMsg) => { |
|||
|
|||
this.download(data, title + '.xls') |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.$message.error(rspMsg); |
|||
} |
|||
); |
|||
|
|||
}, |
|||
|
|||
// 下载文件 |
|||
download (data, fileName) { |
|||
if (!data) { |
|||
return |
|||
} |
|||
|
|||
var csvData = new Blob([data]) |
|||
|
|||
if (window.navigator && window.navigator.msSaveOrOpenBlob) { |
|||
window.navigator.msSaveOrOpenBlob(csvData, fileName); |
|||
} |
|||
// for Non-IE (chrome, firefox etc.) |
|||
else { |
|||
var a = document.createElement('a'); |
|||
document.body.appendChild(a); |
|||
a.style = 'display: none'; |
|||
var url = window.URL.createObjectURL(csvData); |
|||
a.href = url; |
|||
a.download = fileName; |
|||
a.click(); |
|||
a.remove(); |
|||
window.URL.revokeObjectURL(url); |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleExportModule () { |
|||
let title = '' |
|||
title = '小区模板' |
|||
|
|||
const url = "/gov/org/neighborhood/exporttemplate" |
|||
let params = {} |
|||
|
|||
app.ajax.exportFilePost( |
|||
url, |
|||
params, |
|||
(data, rspMsg) => { |
|||
|
|||
this.download(data, title + '.xls') |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.$message.error(rspMsg); |
|||
} |
|||
); |
|||
}, |
|||
|
|||
// 上传文件之前的钩子 |
|||
beforeUpload (file) { |
|||
this.files = file; |
|||
|
|||
const isText = file.type === 'application/vnd.ms-excel' |
|||
const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' |
|||
|
|||
if (!isText && !isTextComputer) { |
|||
this.$message.error('请选择正确格式的文件') |
|||
return false |
|||
} else { |
|||
this.fileName = file.name; |
|||
return true |
|||
} |
|||
|
|||
}, |
|||
// 上传文件个数超过定义的数量 |
|||
handleExceed (files, fileList) { |
|||
this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传`) |
|||
}, |
|||
|
|||
async uploadFile () { |
|||
this.loading = true |
|||
|
|||
if (this.fileName == "") { |
|||
this.$message.warning('请选择要上传的文件！') |
|||
return false |
|||
} |
|||
|
|||
//清空上传列表 |
|||
this.$refs['upload'].clearFiles() |
|||
|
|||
var url = '/gov/org/neighborhood/import' |
|||
let fileFormData = new FormData(); |
|||
fileFormData.append('file', this.files);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名 |
|||
// let params = { |
|||
// file: this.files |
|||
// } |
|||
|
|||
const { data, code, msg } = await requestPost(url, fileFormData) |
|||
if (code === 0) { |
|||
|
|||
this.$emit('refreshTree') |
|||
this.loadTable() |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
|
|||
}, |
|||
|
|||
handleSizeChange (val) { |
|||
console.log(`每页 ${val} 条`) |
|||
}, |
|||
handleCurrentChange (val) { |
|||
console.log(`当前页: ${val}`) |
|||
}, |
|||
|
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
filterText (val) { |
|||
this.$refs.tree.filter(val); |
|||
} |
|||
}, |
|||
props: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped > |
|||
.div_search { |
|||
display: flex; |
|||
|
|||
.resi-cell { |
|||
display: flex; |
|||
align-items: center; |
|||
.resi-cell-label { |
|||
width: 70px; |
|||
box-sizing: border-box; |
|||
margin-right: 15px; |
|||
text-align: right; |
|||
// line-height: 32; |
|||
} |
|||
|
|||
.resi-cell-input { |
|||
width: 180px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.div_table { |
|||
margin-top: 20px; |
|||
} |
|||
.div_search { |
|||
display: flex; |
|||
|
|||
.resi-cell { |
|||
display: flex; |
|||
align-items: center; |
|||
.resi-cell-label { |
|||
width: 70px; |
|||
box-sizing: border-box; |
|||
margin-right: 15px; |
|||
text-align: right; |
|||
// line-height: 32; |
|||
} |
|||
|
|||
.resi-cell-input { |
|||
width: 180px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.div_btn { |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
.el-row { |
|||
/* margin-bottom: 20px; */ |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
margin-top: 10px; |
|||
margin-right: 50px; |
|||
} |
|||
</style> |
|||
@ -1,318 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<div> |
|||
<el-form :inline="false" |
|||
:model="dataForm" |
|||
:rules="dataRule" |
|||
:disabled="formType === 'detail'" |
|||
class="form"> |
|||
|
|||
<el-form-item label="所属楼栋" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<span>{{ agencyObj.communityName }}—{{agencyObj.label}}</span> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="单元号" |
|||
prop="buildingUnitId" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-select class="item_width_1" |
|||
v-model="dataForm.buildingUnitId" |
|||
placeholder="请选择" |
|||
clearable> |
|||
<el-option v-for="item in unitList" |
|||
:key="item.id" |
|||
:label="item.unitName" |
|||
:value="item.id"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="门牌号" |
|||
prop="doorName" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
placeholder="请输入门牌号" |
|||
v-model="dataForm.doorName"> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="房屋类型" |
|||
prop="houseType" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-radio-group v-model="dataForm.houseType"> |
|||
|
|||
<el-radio :label="'1'">楼房</el-radio> |
|||
<el-radio :label="'2'">平房</el-radio> |
|||
<el-radio :label="'3'">别墅</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="房屋用途" |
|||
prop="purpose" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-radio-group v-model="dataForm.purpose"> |
|||
|
|||
<el-radio :label="'1'">商品房</el-radio> |
|||
<el-radio :label="'2'">自建房</el-radio> |
|||
<el-radio :label="'3'">别墅</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="出租" |
|||
prop="rentFlag" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-radio-group v-model="dataForm.rentFlag"> |
|||
|
|||
<el-radio :label="0">是</el-radio> |
|||
<el-radio :label="1">否</el-radio> |
|||
|
|||
</el-radio-group> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="房主姓名" |
|||
prop="ownerName" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
maxlength="50" |
|||
show-word-limit |
|||
placeholder="请输入房主姓名" |
|||
v-model="dataForm.ownerName"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="房主电话" |
|||
prop="ownerPhone" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
type='number' |
|||
placeholder="请输入房主电话" |
|||
v-model="dataForm.ownerPhone"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="房主身份证" |
|||
prop="ownerIdCard" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
type='number' |
|||
placeholder="请输入房主身份证" |
|||
v-model="dataForm.ownerIdCard"> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
</div> |
|||
<div class="div_btn"> |
|||
<el-button @click="handleCancle">取 消</el-button> |
|||
<el-button v-if="formType != 'detail'" |
|||
type="primary" |
|||
@click="handleComfirm">确 定</el-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from '@/js/dai/request' |
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
formType: 'add', //表单操作类型 add新增，edit编辑，detail详情 |
|||
|
|||
unitList: [], |
|||
|
|||
houseId: '', //房屋ID |
|||
dataForm: { |
|||
neighborHoodId: '', // 所属小区ID |
|||
buildingId: '',//所属楼栋ID |
|||
buildingUnitId: '',//所属单元ID |
|||
doorName: '',//门牌号 |
|||
houseType: '1',//房屋类型【楼房，平房，别墅】 |
|||
purpose: '1',//房屋用途【住宅，商业，办公，工业，仓储，商住混用，其他】 |
|||
rentFlag: 0,//是否出租【是：1，否：0】 |
|||
ownerPhone: '', //房主电话 |
|||
ownerName: '', //房主名字 |
|||
ownerIdCard: '' //房主身份证 |
|||
}, |
|||
|
|||
keyWords: '', |
|||
agencyObj: {}, |
|||
|
|||
} |
|||
}, |
|||
components: {}, |
|||
mounted () { |
|||
|
|||
}, |
|||
|
|||
methods: { |
|||
async initForm (type, row, agencyObj) { |
|||
|
|||
this.agencyObj = agencyObj |
|||
this.dataForm.neighborHoodId = agencyObj.communityId |
|||
this.dataForm.buildingId = agencyObj.id |
|||
|
|||
this.formType = type |
|||
if (row) { |
|||
this.houseId = row.houseId |
|||
this.dataForm = row |
|||
} |
|||
|
|||
await this.loadUnitList() |
|||
|
|||
}, |
|||
|
|||
//加载单元 |
|||
async loadUnitList () { |
|||
const url = '/gov/org/building/buildingunitlist' |
|||
|
|||
let params = { |
|||
buildingId: this.agencyObj.id |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.unitList = data |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
|
|||
|
|||
async handleComfirm () { |
|||
let url = '' |
|||
// this.dataForm.buildingUnitId = '14a8df50bc43fda1753088fb458d2942' |
|||
if (this.formType === 'add') { |
|||
url = '/gov/org/house/houseadd' |
|||
} else { |
|||
url = '/gov/org/house/houseupdate' |
|||
this.dataForm.houseId = this.houseId |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, this.dataForm) |
|||
|
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '添加楼栋成功' |
|||
}) |
|||
this.resetData() |
|||
this.$emit('dialogOk') |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleCancle () { |
|||
this.resetData() |
|||
this.$emit('dialogCancle') |
|||
|
|||
}, |
|||
|
|||
resetData () { |
|||
this.houseId = '' //房屋ID |
|||
this.dataForm = { |
|||
neighborHoodId: '', // 所属小区ID |
|||
buildingId: '',//所属楼栋ID |
|||
buildingUnitId: 0,//所属单元ID |
|||
doorName: 0,//门牌号 |
|||
houseType: '1',//房屋类型【楼房，平房，别墅】 |
|||
purpose: '1',//房屋用途【住宅，商业，办公，工业，仓储，商住混用，其他】 |
|||
rentFlag: '1',//是否出租【是：1，否：0】 |
|||
ownerPhone: '', //房主电话 |
|||
ownerName: '', //房主名字 |
|||
ownerIdCard: '' //房主身份证 |
|||
} |
|||
}, |
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
buildingUnitId: [ |
|||
{ required: true, message: '所属单元不能为空', trigger: 'blur' }, |
|||
], |
|||
|
|||
doorName: [ |
|||
{ required: true, message: '门牌号不能为空', trigger: 'blur' } |
|||
], |
|||
houseType: [ |
|||
{ required: true, message: '房屋类型不能为空', trigger: 'blur' } |
|||
], |
|||
|
|||
purpose: [ |
|||
{ required: true, message: '房屋用途不能为空', trigger: 'blur' } |
|||
], |
|||
rentFlag: [ |
|||
{ required: true, message: '是否出租不能为空', trigger: 'blur' } |
|||
], |
|||
ownerPhone: [ |
|||
{ required: true, message: '房主电话不能为空', trigger: 'blur' } |
|||
], |
|||
ownerName: [ |
|||
{ required: true, message: '房主姓名不能为空', trigger: 'blur' } |
|||
], |
|||
ownerIdCard: [ |
|||
{ required: true, message: '房主身份证号不能为空', trigger: 'blur' } |
|||
], |
|||
} |
|||
}, |
|||
|
|||
}, |
|||
props: {} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.item_width_1 { |
|||
width: 500px; |
|||
} |
|||
.item_width_2 { |
|||
width: 400px; |
|||
} |
|||
.item_width_3 { |
|||
margin-left: 10px; |
|||
width: 200px; |
|||
} |
|||
|
|||
.div_btn { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
} |
|||
.el-tabs { |
|||
margin: 0 20px; |
|||
} |
|||
.el-upload__tip { |
|||
color: rgb(155, 155, 155); |
|||
margin: 0; |
|||
} |
|||
.form { |
|||
margin-top: 30px; |
|||
} |
|||
</style> |
|||
@ -1,510 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<div class="div_search"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">房主姓名</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input v-model="ownerName" |
|||
class="resi-cell-input" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入内容"> |
|||
</el-input> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">房主手机</div> |
|||
<div class="resi-cell-value"> |
|||
<el-input v-model="ownerPhone" |
|||
class="resi-cell-input" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入内容"> |
|||
</el-input> |
|||
|
|||
</div> |
|||
</div> |
|||
<el-button style="margin-left:10px" |
|||
type="primary" |
|||
size="small" |
|||
@click="handleSearch">查询</el-button> |
|||
</div> |
|||
<div class="div_btn"> |
|||
<el-button style="float:left" |
|||
type="warning" |
|||
size="small" |
|||
@click="handleExport">导出</el-button> |
|||
<el-button style="float:left" |
|||
type="success" |
|||
size="small" |
|||
@click="handleAdd">新增房屋</el-button> |
|||
<el-button style="float:left" |
|||
type="primary" |
|||
size="small" |
|||
@click="handleExportModule">下载房屋模板</el-button> |
|||
<el-upload ref="upload" |
|||
:multiple='false' |
|||
:show-file-list='false' |
|||
:before-upload="beforeUpload" |
|||
action="" |
|||
accept=".xls,.xlsx" |
|||
:limit="1" |
|||
:on-exceed="handleExceed" |
|||
:http-request="uploadFile"> |
|||
<el-button style="margin-left:10px" |
|||
size="small" |
|||
type="danger">导入小区数据</el-button> |
|||
</el-upload> |
|||
</div> |
|||
|
|||
<div class="div_table"> |
|||
<el-table :data="tableData" |
|||
border |
|||
style="width: 100%"> |
|||
<el-table-column prop="houseName" |
|||
label="房屋名称" |
|||
width="120"> |
|||
</el-table-column> |
|||
<el-table-column prop="neighborHoodName" |
|||
label="所属小区" |
|||
width="160"> |
|||
</el-table-column> |
|||
<el-table-column prop="buildingName" |
|||
label="所属楼栋"> |
|||
</el-table-column> |
|||
<el-table-column prop="unitNum" |
|||
label="单元号"> |
|||
</el-table-column> |
|||
<el-table-column prop="doorName" |
|||
label="门牌号"> |
|||
</el-table-column> |
|||
<el-table-column prop="houseType" |
|||
label="房屋类型"> |
|||
</el-table-column> |
|||
<el-table-column prop="purpose" |
|||
label="房屋用途"> |
|||
</el-table-column> |
|||
<el-table-column prop="rentFlag" |
|||
label="是否出租"> |
|||
</el-table-column> |
|||
<el-table-column prop="ownerName" |
|||
label="房主姓名"> |
|||
</el-table-column> |
|||
<el-table-column prop="ownerPhone" |
|||
label="房主电话"> |
|||
</el-table-column> |
|||
<el-table-column prop="ownerIdCard" |
|||
label="身份证"> |
|||
</el-table-column> |
|||
<el-table-column label="操作" |
|||
fixed="right" |
|||
width="140" |
|||
header-align="center" |
|||
align="center" |
|||
class="operate"> |
|||
<template slot-scope="scope"> |
|||
|
|||
<el-button type="text" |
|||
style="color:#1C6AFD;text-decoration: underline;" |
|||
size="small" |
|||
@click="handleDetail(scope.row)">查看</el-button> |
|||
<el-button type="text" |
|||
style="color:#00A7A9;text-decoration: underline;" |
|||
size="small" |
|||
@click="handleEdit(scope.row)">修改</el-button> |
|||
|
|||
<el-button type="text" |
|||
style="color:#D51010;text-decoration: underline;" |
|||
size="small" |
|||
@click="handleDelete(scope.row)">删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div> |
|||
<el-pagination @size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="pageNo" |
|||
:page-sizes="[20, 30, 50]" |
|||
:page-size="pageSize" |
|||
layout="sizes, prev, pager, next" |
|||
:total="total"> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 修改弹出框 --> |
|||
<el-dialog :visible.sync="formShow" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="formTitle" |
|||
width="900px" |
|||
@closed="diaClose"> |
|||
<room-form ref="ref_form" |
|||
@dialogCancle="addFormCancle" |
|||
@dialogOk="addFormOk"></room-form> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import roomForm from './roomForm' |
|||
|
|||
import { requestPost } from "@/js/dai/request"; |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
loading: false, |
|||
total: 0, |
|||
pageSize: 20, |
|||
pageNo: 0, |
|||
|
|||
|
|||
agencyObj: {},//树所选的小区对象 |
|||
ownerName: '', |
|||
ownerPhone: '', |
|||
tableData: [], |
|||
|
|||
//form相关 |
|||
formShow: false, |
|||
formTitle: '新增房屋', |
|||
|
|||
|
|||
} |
|||
}, |
|||
components: { |
|||
roomForm |
|||
}, |
|||
async mounted () { |
|||
|
|||
}, |
|||
computed: { |
|||
rowHeight () { |
|||
return (this.clientHeight - 200) + 'px' |
|||
}, |
|||
...mapGetters(['clientHeight']) |
|||
}, |
|||
methods: { |
|||
|
|||
|
|||
handleSearch () { |
|||
this.loadTable() |
|||
}, |
|||
|
|||
async loadTable (fromTree, treeObj) { |
|||
if (fromTree) { |
|||
this.agencyObj = treeObj |
|||
} |
|||
const url = "/gov/org/house/houselist" |
|||
|
|||
let params = { |
|||
pageSize: this.pageSize, |
|||
pageNo: this.pageNo, |
|||
ownerName: this.ownerName, |
|||
ownerPhone: this.ownerPhone, |
|||
buildingId: this.agencyObj.id |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.total = data.total |
|||
this.tableData = data.list |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
diaClose () { |
|||
this.formShow = false |
|||
}, |
|||
|
|||
handleDetail (row) { |
|||
this.formTitle = '房屋详情' |
|||
this.formShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_form.initForm('detail', row, this.agencyObj) |
|||
}) |
|||
}, |
|||
|
|||
handleAdd () { |
|||
this.formTitle = '新增房屋' |
|||
this.formShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_form.initForm('add', null, this.agencyObj) |
|||
}) |
|||
}, |
|||
|
|||
handleEdit (row) { |
|||
this.formTitle = '修改房屋' |
|||
this.formShow = true |
|||
this.$refs.ref_form.initForm('edit', row, this.agencyObj) |
|||
}, |
|||
|
|||
addFormCancle () { |
|||
this.formShow = false |
|||
}, |
|||
addFormOk () { |
|||
this.formShow = false |
|||
this.loadTable() |
|||
}, |
|||
|
|||
async handleDelete (row) { |
|||
|
|||
this.$confirm("确认删除?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}) |
|||
.then(() => { |
|||
this.deleteRoom(row) |
|||
}) |
|||
.catch(err => { |
|||
if (err == "cancel") { |
|||
// this.$message({ |
|||
// type: "info", |
|||
// message: "已取消删除" |
|||
// }); |
|||
} |
|||
|
|||
}); |
|||
|
|||
|
|||
}, |
|||
|
|||
async deleteRoom (row) { |
|||
const url = "/gov/org/house/housedel" |
|||
|
|||
let params = { |
|||
houseId: row.houseId |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: "success", |
|||
message: "删除成功" |
|||
}); |
|||
this.$emit('refreshTree') |
|||
this.loadTable() |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
//导出表格 |
|||
async handleExport () { |
|||
let title = this.agencyObj.label |
|||
title = title + '—房屋列表' |
|||
|
|||
const url = "/gov/org/house/exporthouseinfo" |
|||
let params = { |
|||
ownerName: this.ownerName, |
|||
ownerPhone: this.ownerPhone, |
|||
buildingId: this.agencyObj.id |
|||
} |
|||
|
|||
app.ajax.exportFilePost( |
|||
url, |
|||
params, |
|||
(data, rspMsg) => { |
|||
|
|||
this.download(data, title + '.xls') |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.$message.error(rspMsg); |
|||
} |
|||
); |
|||
|
|||
}, |
|||
|
|||
// 下载文件 |
|||
download (data, fileName) { |
|||
if (!data) { |
|||
return |
|||
} |
|||
|
|||
var csvData = new Blob([data]) |
|||
|
|||
if (window.navigator && window.navigator.msSaveOrOpenBlob) { |
|||
window.navigator.msSaveOrOpenBlob(csvData, fileName); |
|||
} |
|||
// for Non-IE (chrome, firefox etc.) |
|||
else { |
|||
var a = document.createElement('a'); |
|||
document.body.appendChild(a); |
|||
a.style = 'display: none'; |
|||
var url = window.URL.createObjectURL(csvData); |
|||
a.href = url; |
|||
a.download = fileName; |
|||
a.click(); |
|||
a.remove(); |
|||
window.URL.revokeObjectURL(url); |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleExportModule () { |
|||
let title = '' |
|||
title = '房屋模板' |
|||
|
|||
const url = "/gov/org/house/exporttemplate" |
|||
let params = {} |
|||
|
|||
app.ajax.exportFilePost( |
|||
url, |
|||
params, |
|||
(data, rspMsg) => { |
|||
|
|||
this.download(data, title + '.xls') |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.$message.error(rspMsg); |
|||
} |
|||
); |
|||
}, |
|||
|
|||
// 上传文件之前的钩子 |
|||
beforeUpload (file) { |
|||
this.files = file; |
|||
|
|||
const isText = file.type === 'application/vnd.ms-excel' |
|||
const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' |
|||
|
|||
if (!isText && !isTextComputer) { |
|||
this.$message.error('请选择正确格式的文件') |
|||
return false |
|||
} else { |
|||
this.fileName = file.name; |
|||
return true |
|||
} |
|||
|
|||
}, |
|||
// 上传文件个数超过定义的数量 |
|||
handleExceed (files, fileList) { |
|||
this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传`) |
|||
}, |
|||
|
|||
async uploadFile () { |
|||
this.loading = true |
|||
|
|||
if (this.fileName == "") { |
|||
this.$message.warning('请选择要上传的文件！') |
|||
return false |
|||
} |
|||
|
|||
//清空上传列表 |
|||
this.$refs['upload'].clearFiles() |
|||
|
|||
var url = '/gov/org/house/import' |
|||
let fileFormData = new FormData(); |
|||
fileFormData.append('file', this.files);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名 |
|||
|
|||
const { data, code, msg } = await requestPost(url, fileFormData) |
|||
if (code === 0) { |
|||
|
|||
this.$emit('refreshTree') |
|||
this.loadTable() |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
|
|||
}, |
|||
|
|||
handleSizeChange (val) { |
|||
console.log(`每页 ${val} 条`) |
|||
}, |
|||
handleCurrentChange (val) { |
|||
console.log(`当前页: ${val}`) |
|||
}, |
|||
|
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
filterText (val) { |
|||
this.$refs.tree.filter(val); |
|||
} |
|||
}, |
|||
props: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped > |
|||
.div_search { |
|||
display: flex; |
|||
|
|||
.resi-cell { |
|||
display: flex; |
|||
align-items: center; |
|||
.resi-cell-label { |
|||
width: 70px; |
|||
box-sizing: border-box; |
|||
margin-right: 15px; |
|||
text-align: right; |
|||
// line-height: 32; |
|||
} |
|||
|
|||
.resi-cell-input { |
|||
width: 180px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.div_table { |
|||
margin-top: 20px; |
|||
} |
|||
.div_search { |
|||
display: flex; |
|||
|
|||
.resi-cell { |
|||
display: flex; |
|||
align-items: center; |
|||
.resi-cell-label { |
|||
width: 70px; |
|||
box-sizing: border-box; |
|||
margin-right: 15px; |
|||
text-align: right; |
|||
// line-height: 32; |
|||
} |
|||
|
|||
.resi-cell-input { |
|||
width: 180px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.div_btn { |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
.el-row { |
|||
/* margin-bottom: 20px; */ |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
margin-top: 10px; |
|||
margin-right: 50px; |
|||
} |
|||
</style> |
|||
@ -1,275 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<div class="resi-container"> |
|||
<el-card class="resi-card"> |
|||
<el-row class="resi-row-box" :class="openSearch && 'resi-row-more'"> |
|||
<el-row class="resi-row" :gutter="20"> |
|||
<el-col span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属组织</div> |
|||
<div class="resi-cell-value" :class="'resi-cell-value-radio'"> |
|||
<el-select |
|||
v-model="fmData.agencyId" |
|||
placeholder="请选择" |
|||
size="small" |
|||
clearable |
|||
class="resi-cell-select" |
|||
> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
|
|||
<el-col span="6"> |
|||
<div class="resi-cell"> |
|||
<div class="resi-cell-label">所属组织</div> |
|||
<div class="resi-cell-value" :class="'resi-cell-value-radio'"> |
|||
<el-input |
|||
v-model="fmData.agencyId" |
|||
class="resi-cell-input" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</el-row> |
|||
<el-row class="resi-search"> |
|||
<el-col span="24"> |
|||
<el-button type="primary" size="mini" @click="handleSearch" |
|||
>查询</el-button |
|||
> |
|||
</el-col> |
|||
</el-row> |
|||
</el-card> |
|||
</div> |
|||
|
|||
<el-card class="resi-card-table"> |
|||
<div class="resi-row-btn"> |
|||
<el-button type="warning" size="small">导出</el-button> |
|||
<el-button type="success" size="small" @click="handleAdd" |
|||
>新增</el-button |
|||
> |
|||
</div> |
|||
<el-table :data="tableData" border style="width: 100%"> |
|||
<el-table-column prop="date" label="日期" width="180"> |
|||
</el-table-column> |
|||
<el-table-column prop="name" label="姓名" width="180"> |
|||
</el-table-column> |
|||
<el-table-column prop="address" label="地址"> </el-table-column> |
|||
</el-table> |
|||
<div> |
|||
<el-pagination |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="currentPage" |
|||
:page-sizes="[100, 200, 300, 400]" |
|||
:page-size="100" |
|||
layout="sizes, prev, pager, next" |
|||
:total="1000" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
components: {}, |
|||
data() { |
|||
return { |
|||
dialogVisible: false, |
|||
openSearch: false, |
|||
|
|||
currentPage: 1, |
|||
|
|||
tableData: [ |
|||
{ |
|||
date: '2016-05-02', |
|||
name: '王小虎', |
|||
address: '上海市普陀区金沙江路 1518 弄' |
|||
}, |
|||
{ |
|||
date: '2016-05-04', |
|||
name: '王小虎', |
|||
address: '上海市普陀区金沙江路 1517 弄' |
|||
} |
|||
], |
|||
|
|||
fmData: { |
|||
agencyId: '' |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
handleSizeChange(val) { |
|||
console.log(`每页 ${val} 条`) |
|||
}, |
|||
handleCurrentChange(val) { |
|||
console.log(`当前页: ${val}`) |
|||
}, |
|||
handleClose() { |
|||
this.dialogVisible = false |
|||
}, |
|||
handleSearch(val) { |
|||
console.log('searchhh--', val) |
|||
}, |
|||
handleClick(tab, event) { |
|||
console.log(tab, event) |
|||
}, |
|||
handleAdd() { |
|||
this.dialogVisible = true |
|||
}, |
|||
handleSUbmit() { |
|||
console.log('baseform', this.$refs) |
|||
|
|||
this.tabsList.forEach((item) => { |
|||
console.log('otherFOrm', this.$refs[item.column_name][0].form) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.tabs-other-info { |
|||
.el-tabs__item { |
|||
// width: 50px; |
|||
height: 20px; |
|||
box-sizing: border-box; |
|||
margin-right: 7px; |
|||
padding: 0 10px !important; |
|||
font-size: 8px; |
|||
font-weight: 500; |
|||
color: #666666; |
|||
line-height: 20px; |
|||
background: #ebecf1; |
|||
border-radius: 2px; |
|||
} |
|||
.el-tabs__nav-wrap::after, |
|||
.el-tabs__active-bar { |
|||
display: none; |
|||
} |
|||
.el-tabs__nav-next, |
|||
.el-tabs__nav-prev { |
|||
line-height: 20px; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
<style lang="scss" scoped> |
|||
.resi-card-table { |
|||
margin-top: 20px; |
|||
} |
|||
.resi-row-btn { |
|||
margin-bottom: 13px; |
|||
} |
|||
.resi-other { |
|||
width: 100%; |
|||
display: flex; |
|||
.resi-other-title { |
|||
width: 100px; |
|||
box-sizing: border-box; |
|||
margin-bottom: 10px; |
|||
// padding: 6px 12px 0 0; |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
color: #333; |
|||
text-align: center; |
|||
} |
|||
.tabs-other-info { |
|||
// padding-left: 60px; |
|||
} |
|||
} |
|||
|
|||
.resi-btns { |
|||
margin-top: 20px; |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
|
|||
<style lang="scss" scoped> |
|||
.resi-container .resi-card { |
|||
position: relative; |
|||
overflow: visible; |
|||
} |
|||
.resi-down { |
|||
position: absolute; |
|||
left: 50%; |
|||
bottom: -10px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 46px; |
|||
height: 12px; |
|||
box-sizing: border-box; |
|||
margin-left: -23rpx; |
|||
cursor: pointer; |
|||
background: #ffffff; |
|||
border-radius: 0 0 10px 10px; |
|||
img { |
|||
display: block; |
|||
} |
|||
} |
|||
.resi-row-box { |
|||
height: 104px; |
|||
overflow: hidden; |
|||
transition: height 0.5s; |
|||
} |
|||
.resi-row-more { |
|||
height: max-content; |
|||
transition: height 0.5s; |
|||
} |
|||
.resi-row { |
|||
margin-bottom: 20px; |
|||
} |
|||
.resi-search { |
|||
.el-col { |
|||
text-align: right; |
|||
} |
|||
} |
|||
.resi-cell { |
|||
display: flex; |
|||
align-items: center; |
|||
.resi-cell-label { |
|||
width: 70px; |
|||
box-sizing: border-box; |
|||
margin-right: 15px; |
|||
text-align: right; |
|||
// line-height: 32; |
|||
} |
|||
.resi-cell-value-radio { |
|||
display: flex; |
|||
align-items: center; |
|||
min-height: 32px; |
|||
} |
|||
.resi-cell-input { |
|||
width: 180px; |
|||
} |
|||
.resi-cell-select { |
|||
width: 180px; |
|||
box-sizing: border-box; |
|||
margin-right: 10px; |
|||
&-middle { |
|||
width: 130px; |
|||
} |
|||
&-small { |
|||
width: 88px; |
|||
} |
|||
} |
|||
.resi-cell-select:last-child { |
|||
margin-right: 0; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,674 +0,0 @@ |
|||
<template> |
|||
<div v-if="pageLoading"> |
|||
<resi-search v-if="searchList.length > 0" ref="resiSearch" :form-list="searchList" @search="handleSearch" /> |
|||
<el-card class="resi-card-table"> |
|||
<div class="resi-row-btn"> |
|||
<el-button type="warning" size="small">导出</el-button> |
|||
<el-button type="success" size="small" @click="handleAdd">新增</el-button> |
|||
<el-button type="primary" size="small">下载人口模板</el-button> |
|||
<el-button type="danger" size="small">导入人口数据</el-button> |
|||
</div> |
|||
<el-table |
|||
:data="tableData" |
|||
border |
|||
style="width: 100%" |
|||
class="resi-table"> |
|||
<el-table-column |
|||
type="index" |
|||
align="center" |
|||
width="50"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
v-for="item in tableHeader" |
|||
:key="item.columnName" |
|||
:prop="item.columnName" |
|||
:label="item.label" |
|||
align="center" |
|||
width="180"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ handleFilterSpan(scope.row, item)}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
fixed="right" |
|||
label="操作" |
|||
align="center" |
|||
width="120"> |
|||
<template slot-scope="scope"> |
|||
<el-button @click="handleLook(scope.row)" type="text" size="small" class="btn-color-look">查看</el-button> |
|||
<el-button @click="handleEdit(scope.row)" type="text" size="small" class="btn-color-edit">编辑</el-button> |
|||
<el-popconfirm |
|||
title="删除之后无法回复，确认删除？" |
|||
@onConfirm="handleDel(scope.row)" |
|||
> |
|||
<el-button slot="reference" type="text" size="small" class="btn-color-del">删除</el-button> |
|||
</el-popconfirm> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div> |
|||
<el-pagination |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="currentPage" |
|||
:page-sizes="[20, 50, 100, 200]" |
|||
:page-size="pageSize" |
|||
layout="sizes, prev, pager, next" |
|||
:total="total"> |
|||
</el-pagination> |
|||
</div> |
|||
</el-card> |
|||
|
|||
<el-dialog |
|||
title="新增" |
|||
:visible.sync="dialogVisible" |
|||
width="80%" |
|||
append-to-body |
|||
:close-on-click-modal="false" |
|||
:before-close="handlerCancle"> |
|||
<resi-form v-if="dialogVisible" ref="baseForm" :fixed="true" :form-list="formList" @changegroup="handleChangeGroup" /> |
|||
<div v-if="dialogVisible" class="resi-other"> |
|||
<div class="resi-other-title">其他</div> |
|||
<div class="tabs-other-info"> |
|||
<el-tabs v-model="activeName" @tab-click="handleClick"> |
|||
<el-tab-pane v-for="item in tabsList" :key="item.columnName" |
|||
:label="item.label" :name="'group' + item.groupId"> |
|||
<resi-form :ref="'group' + item.groupId" :columns="3" :support-add="item.supportAdd" |
|||
:form-id="item.columnName" :form-list=" item.itemList" /> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
</div> |
|||
<div class="resi-btns"> |
|||
<el-button size="small" @click="handlerCancle">取消</el-button> |
|||
<el-button type="primary" size="small" @click="handleSUbmit">提交</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
<el-dialog |
|||
title="编辑" |
|||
:visible.sync="dialogEditVisible" |
|||
width="80%" |
|||
append-to-body |
|||
:close-on-click-modal="false" |
|||
:before-close="handlerEditCancle"> |
|||
<edit-resi v-if="dialogEditVisible" ref="baseForm" :disabled="disabled" :form-info="editForm" :fixed="true" :form-list="formList" @changegroup="handleChangeGroup" /> |
|||
<div v-if="dialogEditVisible" class="resi-other"> |
|||
<div class="resi-other-title">其他</div> |
|||
<div class="tabs-other-info"> |
|||
<el-tabs v-model="activeName" @tab-click="handleClick"> |
|||
<el-tab-pane v-for="item in tabsList" :key="item.columnName" |
|||
:label="item.label" :name="'group' + item.groupId"> |
|||
<edit-resi :ref="'group' + item.groupId" :columns="3" :support-add="item.supportAdd" |
|||
:form-id="item.columnName" :muti-list="item.mutiList" :form-list=" item.itemList" :disabled="disabled" /> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
</div> |
|||
<div class="resi-btns"> |
|||
<el-button size="small" @click="handlerEditCancle">取消</el-button> |
|||
<el-button v-if="!disabled" type="primary" size="small" @click="handleEditSUbmit">提交</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import resiSearch from '../../components/resiSearch.vue' |
|||
import resiForm from '../../components/resiForm.vue' |
|||
import editResi from '../../components/editResi.vue' |
|||
export default { |
|||
components: { |
|||
resiSearch, |
|||
resiForm, |
|||
editResi |
|||
}, |
|||
data () { |
|||
return { |
|||
disabled: false, |
|||
pageLoading: false, |
|||
dialogEditVisible: false, |
|||
dialogVisible: false, |
|||
openSearch: false, |
|||
currentPage: 1, |
|||
pageSize: 20, |
|||
total: null, |
|||
conditions: [], |
|||
activeName: '', |
|||
tableData: [], |
|||
searchList: [], |
|||
value: '', |
|||
editForm: { |
|||
GRID_ID: '', |
|||
VILLAGE_ID: '', |
|||
BUILD_ID: '', |
|||
HOME_ID: '' |
|||
}, |
|||
editTableName: { |
|||
|
|||
}, |
|||
formList: [], |
|||
tableHeader: [], |
|||
tabsForm: [{ |
|||
label: '所属网格', |
|||
itemType: 'input', |
|||
optionSourceType: '', |
|||
sort: '1', |
|||
require: true, |
|||
validType: null, |
|||
columnName: 'grid' |
|||
}, { |
|||
label: '小区名称', |
|||
require: true, |
|||
itemType: 'select', |
|||
optionSourceType: '', |
|||
sort: '1', |
|||
validType: null, |
|||
columnName: 'shequ' |
|||
}, { |
|||
label: '户籍查询', |
|||
require: true, |
|||
itemType: 'input', |
|||
optionSourceType: '', |
|||
sort: '1', |
|||
validType: null, |
|||
columnName: 'huji' |
|||
}, { |
|||
label: '本地户籍', |
|||
itemType: 'select', |
|||
require: true, |
|||
optionSourceType: '', |
|||
sort: '1', |
|||
validType: null, |
|||
columnName: 'huji1' |
|||
}, { |
|||
label: '姓名', |
|||
itemType: 'input', |
|||
optionSourceType: '', |
|||
sort: '1', |
|||
validType: null, |
|||
require: true, |
|||
columnName: 'username' |
|||
}], |
|||
tabsList: [] |
|||
} |
|||
}, |
|||
async created () { |
|||
await this.getSearchList() |
|||
// await this.getFormList() |
|||
await this.getTableHeader() |
|||
this.getTableData() |
|||
this.pageLoading = true |
|||
console.log('storeoooo----0000', this.$store) |
|||
}, |
|||
methods: { |
|||
handleSizeChange (val) { |
|||
console.log(`每页 ${val} 条`) |
|||
this.pageSize = val |
|||
this.getTableData() |
|||
}, |
|||
handleCurrentChange (val) { |
|||
console.log(`当前页: ${val}`) |
|||
this.currentPage = val |
|||
this.getTableData() |
|||
}, |
|||
handleFilterSpan (row, item) { |
|||
let _val = '' |
|||
if (item.itemType === 'radio' && item.options.length > 0) { |
|||
item.options.forEach(n => { |
|||
if (n.value === row[item.columnName]) _val = n.label |
|||
}) |
|||
} |
|||
return _val || row[item.columnName] |
|||
}, |
|||
handleSearch (val) { |
|||
console.log('searchhh--', val) |
|||
this.currentPage = 1 |
|||
this.conditions = val |
|||
this.getTableData() |
|||
}, |
|||
handleClick (tab, event) { |
|||
console.log(tab, event) |
|||
}, |
|||
async handleLook (row) { |
|||
this.disabled = true |
|||
await this.getFormList() |
|||
this.getrowInfo(row.icResiUserId) |
|||
}, |
|||
async handleEdit (row) { |
|||
this.disabled = false |
|||
await this.getFormList() |
|||
this.getrowInfo(row.icResiUserId) |
|||
}, |
|||
async handleAdd () { |
|||
await this.getFormList() |
|||
this.dialogVisible = true |
|||
}, |
|||
async handleChangeGroup (val) { |
|||
console.log('changeguoprrrrr----', val) |
|||
let { childGroup, value } = val |
|||
let hasT = false |
|||
let i = 0 |
|||
// const list = { ...this.tabsList } |
|||
this.tabsList.forEach((item, index) => { |
|||
if (item.tableName === childGroup.tableName) { |
|||
hasT = true |
|||
i = index |
|||
} |
|||
}) |
|||
if (value === 1 || value === '1') { |
|||
// console.log('changegroup----999', value) |
|||
if (!hasT) { |
|||
childGroup.itemList.forEach(async item => { |
|||
if (item.optionSourceType === 'remote') { |
|||
await this.getOptionsList(item.optionSourceValue).then(res => { |
|||
item.options = res |
|||
}) |
|||
// console.log('') |
|||
} |
|||
}) |
|||
this.tabsList.push(childGroup) |
|||
} |
|||
} else { |
|||
// console.log('changegroup----000', value) |
|||
if (hasT) this.tabsList.splice(i, 1) |
|||
} |
|||
}, |
|||
formetForm () { |
|||
const _baseForm = this.$refs.baseForm.handleForm() |
|||
let arr = [] |
|||
if (_baseForm.length === 0) return false |
|||
arr.push([ ..._baseForm ]) |
|||
this.tabsList.forEach(item => { |
|||
arr.push([ ...this.$refs['group' + item.groupId][0].handleForm() ]) |
|||
}) |
|||
let arr2 = arr.reduce(function (a, b) { return a.concat(b) }) |
|||
let noChange = true |
|||
arr2.forEach(item => { |
|||
if (item.list.length !== 0) noChange = false |
|||
}) |
|||
console.log('arr2', arr2) |
|||
if (noChange) { |
|||
this.$message.warning('您还没有做任何修改') |
|||
return false |
|||
} |
|||
// 合并相同tableName的多个数组 |
|||
let hash = {} |
|||
let i = 0 |
|||
let res = [] |
|||
let finalArr = [] |
|||
arr2.forEach(function (item) { |
|||
let name = item.tableName |
|||
if (hash[name]) { |
|||
res[hash[name] - 1].list.push(...item.list) |
|||
} else { |
|||
hash[name] = ++i |
|||
res.push({ |
|||
list: [...item.list], |
|||
supportAdd: item.supportAdd, |
|||
tableName: name |
|||
}) |
|||
} |
|||
}) |
|||
console.log('res', res) |
|||
// 多个list合并成一个list子集 |
|||
res.forEach(item => { |
|||
let _form = {} |
|||
item.list.length > 0 && item.list.forEach(n => { |
|||
_form = { ..._form, ...n } |
|||
}) |
|||
if (item.list.length > 0) { |
|||
finalArr.push({ |
|||
tableName: item.tableName, |
|||
list: item.supportAdd ? [...item.list] : [{ ..._form }] |
|||
}) |
|||
} |
|||
}) |
|||
console.log('finalArr', finalArr) |
|||
return finalArr |
|||
}, |
|||
async handleEditSUbmit () { |
|||
const arr = await this.formetForm() |
|||
if (arr) this.submitEdit(arr) |
|||
}, |
|||
async handleSUbmit () { |
|||
const arr = await this.formetForm() |
|||
if (arr) this.submitAdd(arr) |
|||
}, |
|||
handleDel (row) { |
|||
let params = { |
|||
formCode: 'resi_base_info', |
|||
icResiUserId: row.icResiUserId |
|||
} |
|||
this.$http |
|||
.post('/epmetuser/icresiuser/delete', params) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
this.$message.success('删除成功') |
|||
this.getTableData() |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
handleFormatUrl (url) { |
|||
return url.includes('?') |
|||
}, |
|||
handlerEditCancle () { |
|||
this.$refs.baseForm.resetForm() |
|||
this.tabsList.forEach(item => { |
|||
this.$refs['group' + item.groupId][0].resetForm() |
|||
}) |
|||
this.dialogEditVisible = false |
|||
}, |
|||
handlerCancle () { |
|||
this.$refs.baseForm.resetForm() |
|||
this.tabsList.forEach(item => { |
|||
this.$refs['group' + item.groupId][0].resetForm() |
|||
}) |
|||
this.dialogVisible = false |
|||
}, |
|||
submitAdd (arr) { |
|||
this.$http |
|||
.post('/epmetuser/icresiuser/add', arr) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
this.$message.success('提交成功') |
|||
// this.$refs[formName].resetFields(); |
|||
this.$refs.baseForm.resetForm() |
|||
this.tabsList.forEach(item => { |
|||
this.$refs['group' + item.groupId][0].resetForm() |
|||
}) |
|||
this.getTableData() |
|||
this.dialogVisible = false |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
submitEdit (arr) { |
|||
this.$http |
|||
.post('/epmetuser/icresiuser/edit', arr) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
this.$message.success('提交成功') |
|||
// this.$refs[formName].resetFields(); |
|||
this.$refs.baseForm.resetForm() |
|||
this.tabsList.forEach(item => { |
|||
this.$refs['group' + item.groupId][0].resetForm() |
|||
}) |
|||
this.getTableData() |
|||
this.dialogEditVisible = false |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
getTableHeader () { |
|||
this.$http |
|||
.post('/oper/customize/icform/tableheaders', { formCode: 'resi_base_info' }) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
this.tableHeader = res.data |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
getTableData () { |
|||
let params = { |
|||
formCode: 'resi_base_info', |
|||
pageNo: this.currentPage, |
|||
pageSize: this.pageSize, |
|||
conditions: this.conditions |
|||
} |
|||
this.$http |
|||
.post('/epmetuser/icresiuser/listresi', params) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
this.tableData = res.data.list |
|||
this.total = res.data.total |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
getrowInfo (id) { |
|||
let params = { |
|||
formCode: 'resi_base_info', |
|||
icResiUserId: id |
|||
} |
|||
this.$http |
|||
.post('/epmetuser/icresiuser/detail', params) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
// console.log('getrowInfo----', res.data) |
|||
let info = res.data |
|||
this.editTableName = { ...info } |
|||
let list = info[this.formList[0].tableName][0] |
|||
for (let n in list) { |
|||
this.editForm[n] = list[n] |
|||
} |
|||
this.formList.forEach(item => { |
|||
if (item.childGroup && info[item.childGroup.tableName]) { |
|||
// let _info = info[item.childGroup.tableName] |
|||
// item.childGroup.itemList.forEach(n => { |
|||
// n.columnValue = _info[0][n.columnName] |
|||
// }) |
|||
this.tabsList.push(item.childGroup) |
|||
} |
|||
item.columnValue = list[item.columnName] |
|||
item.ID = list.ID |
|||
}) |
|||
this.tabsList.forEach(item => { |
|||
let _info = info[item.tableName] |
|||
if (item.supportAdd) { |
|||
// console.log('tabsList---333', item.label) |
|||
const _list = [...item.itemList] |
|||
let mutiList = [] |
|||
if (_info) { |
|||
_info.forEach((fo, index) => { |
|||
// console.log('mutiList----555' + index, mutiList, _list) |
|||
mutiList.splice(index, 0, { |
|||
row: index, |
|||
itemList: _list.map(m => { |
|||
// console.log('itemList---item' + index, m) |
|||
return { |
|||
...m, |
|||
ID: fo.ID, |
|||
columnValue: fo[m.columnName] |
|||
} |
|||
}) |
|||
}) |
|||
// console.log('mutiList----666' + index, mutiList) |
|||
}) |
|||
} |
|||
item.mutiList = mutiList |
|||
} else { |
|||
if (_info) { |
|||
item.itemList.forEach(n => { |
|||
n.ID = _info[0].ID |
|||
n.columnValue = _info[0][n.columnName] |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
// console.log('getrowInfo---formname', this.tabsList) |
|||
this.dialogEditVisible = true |
|||
} |
|||
}) |
|||
.catch((err) => { |
|||
console.log('getrowInfo---formnameerr', err) |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
async getOptionsList (url) { |
|||
let options = [] |
|||
// console.log('getOptionsList----', url) |
|||
await this.$http |
|||
.post(url, { formCode: 'resi_base_info' }) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
options = res.data |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
return options |
|||
}, |
|||
getSearchList () { |
|||
this.$http |
|||
.post('/oper/customize/icform/conditionlist', { formCode: 'resi_base_info', dynamic: true }) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
// console.log('获取查询详情成功', res.data) |
|||
this.searchList = res.data |
|||
res.data.forEach(item => { |
|||
if (item.optionSourceType === 'remote') { |
|||
this.getOptionsList(item.optionSourceValue).then(res => { |
|||
item.options = res |
|||
}) |
|||
// console.log('') |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
async getFormList () { |
|||
await this.$http |
|||
.post('/oper/customize/icform/getcustomerform', { formCode: 'resi_base_info', dynamic: true }) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
console.log('获取详情成功getFormList') |
|||
let { itemList, groupList } = res.data |
|||
this.activeName = 'group' + res.data.groupList[0].groupId |
|||
itemList.forEach(async item => { |
|||
if (item.optionSourceType === 'remote') { |
|||
await this.getOptionsList(item.optionSourceValue).then(res => { |
|||
item.options = res |
|||
}) |
|||
} |
|||
}) |
|||
groupList.forEach(item => { |
|||
item.itemList.forEach(async n => { |
|||
n.tableName = item.tableName |
|||
if (n.optionSourceType === 'remote') { |
|||
await this.getOptionsList(n.optionSourceValue).then(res => { |
|||
n.options = res |
|||
}) |
|||
} |
|||
}) |
|||
}) |
|||
this.formList = itemList |
|||
this.tabsList = groupList |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.tabs-other-info { |
|||
.el-tabs__item { |
|||
// width: 50px; |
|||
height: 20px; |
|||
box-sizing: border-box; |
|||
margin-right: 7px; |
|||
padding: 0 10px !important; |
|||
font-size: 8px; |
|||
font-weight: 500; |
|||
color: #666666; |
|||
line-height: 20px; |
|||
background: #EBECF1; |
|||
border-radius: 2px; |
|||
} |
|||
.el-tabs__nav-wrap::after, .el-tabs__active-bar { |
|||
display: none; |
|||
} |
|||
.el-tabs__nav-next, .el-tabs__nav-prev { |
|||
line-height: 20px; |
|||
} |
|||
|
|||
} |
|||
.resi-table { |
|||
.el-button--text { |
|||
text-decoration: underline; |
|||
} |
|||
.btn-color-del { |
|||
margin-left: 10px; |
|||
color: rgba(213, 16, 16, 1); |
|||
} |
|||
.btn-color-edit { |
|||
color: rgba(0, 167, 169, 1); |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
<style lang="scss" scoped> |
|||
.resi-card-table { |
|||
margin-top: 20px; |
|||
} |
|||
.resi-row-btn { |
|||
margin-bottom: 13px; |
|||
} |
|||
.resi-other { |
|||
width: 100%; |
|||
display: flex; |
|||
.resi-other-title { |
|||
flex-shrink: 0; |
|||
// display: inline-block; |
|||
width: 100px; |
|||
box-sizing: border-box; |
|||
margin-bottom: 10px; |
|||
// padding: 6px 12px 0 0; |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
color: #333; |
|||
text-align: center; |
|||
} |
|||
.tabs-other-info { |
|||
// display: inline-block; |
|||
// flex: 1; |
|||
// padding-left: 60px; |
|||
width: calc(100% - 100px); |
|||
} |
|||
} |
|||
|
|||
.resi-btns { |
|||
margin-top: 20px; |
|||
text-align: center; |
|||
} |
|||
|
|||
</style> |
|||
@ -1,33 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<div class="m-info"> |
|||
<h2>社区查询</h2> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
// i18nMessages: messages, |
|||
updatePassowrdVisible: false, |
|||
customerName: localStorage.getItem('customerName'), |
|||
userType: localStorage.getItem('userType') |
|||
} |
|||
}, |
|||
components: {}, |
|||
mounted() { |
|||
//关闭所有标签页 |
|||
// tabs, 关闭全部 |
|||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter( |
|||
(item) => item.name === 'home' |
|||
) |
|||
}, |
|||
methods: { |
|||
changeCustomerName(customerName) { |
|||
this.$emit('changeCustomerName', customerName) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue