ZhaoTongYao
3 years ago
3 changed files with 899 additions and 37 deletions
@ -0,0 +1,428 @@ |
|||
<template> |
|||
<div> |
|||
<div class="dialog-h-content scroll-h"> |
|||
<el-form ref="ref_form" |
|||
:inline="false" |
|||
:model="dataForm" |
|||
:rules="dataRule" |
|||
:disabled="formType === 'detail'" |
|||
class="form"> |
|||
|
|||
<el-form-item label="所属楼栋" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<span>{{ dataForm.neighborHoodName }}-{{dataForm.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 v-if="formType != 'detail'" label="房屋编码" |
|||
prop="coding" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_2" |
|||
maxlength="50" |
|||
placeholder="请输入楼栋编码" |
|||
v-model="dataForm.coding"> |
|||
|
|||
</el-input> |
|||
<el-button style="margin-left: 10px" |
|||
type="primary" |
|||
size="small" |
|||
@click="handleCode">生成</el-button> |
|||
</el-form-item> |
|||
<div v-if="formType === 'detail'"> |
|||
<el-form-item label="房屋编码" |
|||
prop="houseCode" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
maxlength="30" |
|||
v-model="dataForm.houseCode"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<div v-if="dataForm.houseQrcodeUrl" |
|||
style="display: flex;flex-direction: column;"> |
|||
<img style="margin-left: 70px;width: 200px;" |
|||
:src="dataForm.houseQrcodeUrl"> |
|||
<a style="margin-left: 80px" |
|||
:href="dataForm.houseQrcodeUrl" |
|||
target="_blank">下载</a> |
|||
</div> |
|||
</div> |
|||
<!-- <el-form-item label="居住人数" |
|||
style="display: block" |
|||
prop="realPerson" |
|||
label-width="150px"> |
|||
<el-input-number class="item_width_4" |
|||
v-model="dataForm.realPerson" |
|||
:min="0" |
|||
:max="9999" |
|||
label="居住人数"></el-input-number> |
|||
</el-form-item> --> |
|||
<el-form-item label="房屋类型" |
|||
prop="houseType" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-radio-group v-model="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="purpose"> |
|||
|
|||
<el-radio :label="'1'">住宅</el-radio> |
|||
<el-radio :label="'2'">商业</el-radio> |
|||
<el-radio :label="'3'">办公</el-radio> |
|||
<el-radio :label="'4'">工业</el-radio> |
|||
<el-radio :label="'5'">仓储</el-radio> |
|||
<el-radio :label="'6'">商住混用</el-radio> |
|||
<el-radio :label="'7'">其他</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="房屋状态" |
|||
prop="rentFlag" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-radio-group v-model="rentFlag"> |
|||
|
|||
<el-radio :label="1">出租</el-radio> |
|||
<el-radio :label="2">闲置</el-radio> |
|||
<el-radio :label="0">自住</el-radio> |
|||
<el-radio :label="3">未出售</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="30" |
|||
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" |
|||
placeholder="请输入房主身份证" |
|||
v-model="dataForm.ownerIdCard"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="备注" |
|||
prop="remark" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
maxlength="30" |
|||
placeholder="请输入备注" |
|||
v-model="dataForm.remark"> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
</div> |
|||
<div class="div_btn"> |
|||
<el-button size="small" |
|||
@click="handleCancle">取 消</el-button> |
|||
<el-button size="small" |
|||
v-if="formType != 'detail'" |
|||
type="primary" |
|||
:disabled="btnDisable" |
|||
@click="handleComfirm">确 定</el-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from '@/js/dai/request' |
|||
|
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
formType: 'add', //表单操作类型 add新增，edit编辑，detail详情 |
|||
btnDisable: false, |
|||
unitList: [], |
|||
|
|||
houseId: '', //房屋ID |
|||
houseType: '1', |
|||
purpose: '1', |
|||
rentFlag: 0, |
|||
dataForm: { |
|||
neighborHoodId: '', // 所属小区ID |
|||
buildingId: '',//所属楼栋ID |
|||
buildingUnitId: '',//所属单元ID |
|||
doorName: '',//门牌号 |
|||
houseType: '',//房屋类型【楼房，平房，别墅】 |
|||
purpose: '',//房屋用途【住宅，商业，办公，工业，仓储，商住混用，其他】 |
|||
rentFlag: 0,//房屋状态【是：1，否：0】 出租1、闲置2、自住 0 |
|||
ownerPhone: '', //联系方式 |
|||
ownerName: '', //房主名字 |
|||
ownerIdCard: '', //房主身份证 |
|||
remark: '', |
|||
// realPerson: 0, |
|||
coding: '', |
|||
sysCoding: '' |
|||
}, |
|||
|
|||
keyWords: '', |
|||
} |
|||
}, |
|||
components: {}, |
|||
mounted () { |
|||
|
|||
}, |
|||
|
|||
methods: { |
|||
async initForm (type, row, id) { |
|||
|
|||
this.$refs.ref_form.resetFields() |
|||
const url = '/epmetuser/icresicollect/getHouseDetailByCollect' |
|||
const params = { |
|||
id |
|||
} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.formType = type |
|||
|
|||
this.dataForm = { ...data } |
|||
// this.dataForm.neighborHoodId = this.agencyObj.neighborHoodId |
|||
// this.dataForm.buildingId = this.agencyObj.id |
|||
|
|||
await this.loadUnitList() |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
//加载单元 |
|||
async loadUnitList () { |
|||
const url = '/gov/org/building/buildingunitlist' |
|||
|
|||
let params = { |
|||
buildingId: this.dataForm.buildingId |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.unitList = data |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
async handleCode() { |
|||
if (!this.dataForm.buildingUnitId) return this.$message.error('请选择单元') |
|||
const { data, code, msg } = await requestPost( |
|||
"/gov/org/houseInformation/getHouseCoding/" + this.dataForm.buildingUnitId); |
|||
if (msg == "success" && code == 0) { |
|||
this.dataForm.coding = data.coding |
|||
this.dataForm.sysCoding = data.sysCoding |
|||
|
|||
} |
|||
}, |
|||
|
|||
async handleComfirm () { |
|||
this.btnDisable = true |
|||
setTimeout(() => { |
|||
this.btnDisable = false |
|||
}, 10000) |
|||
|
|||
this.dataForm.houseType = this.houseType |
|||
this.dataForm.purpose = this.purpose |
|||
this.dataForm.rentFlag = this.rentFlag |
|||
this.$refs['ref_form'].validate((valid, messageObj) => { |
|||
if (!valid) { |
|||
this.btnDisable = false |
|||
app.util.validateRule(messageObj) |
|||
} else { |
|||
this.addRoom() |
|||
} |
|||
|
|||
}) |
|||
}, |
|||
|
|||
async addRoom () { |
|||
const regCard = /(^\d{15}$)|(^\d{17}(\d|X)$)/; //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X |
|||
if (this.dataForm.ownerIdCard && regCard.test(this.dataForm.ownerIdCard) === false) { |
|||
this.btnDisable = false |
|||
this.$message({ |
|||
type: 'warning', |
|||
message: '请输入正确的身份证号码' |
|||
}) |
|||
return false; |
|||
} |
|||
const regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/; //手机号码 |
|||
if (this.dataForm.ownerPhone && regPhone.test(this.dataForm.ownerPhone) === false) { |
|||
this.btnDisable = false |
|||
this.$message({ |
|||
type: 'warning', |
|||
message: '请输入正确的手机号码' |
|||
}) |
|||
return false; |
|||
} |
|||
|
|||
let url = '' |
|||
|
|||
if (this.formType === 'add') { |
|||
url = '/gov/org/house/houseadd' |
|||
} else { |
|||
url = '/gov/org/house/houseupdate' |
|||
this.dataForm.houseId = this.houseId |
|||
} |
|||
console.log('11111111111111111', this.dataForm) |
|||
return |
|||
const { data, code, msg } = await requestPost(url, this.dataForm) |
|||
this.btnDisable = false |
|||
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.houseType = '1' |
|||
this.purpose = '1' |
|||
this.rentFlag = 0 |
|||
this.dataForm = { |
|||
neighborHoodId: '', // 所属小区ID |
|||
buildingId: '',//所属楼栋ID |
|||
buildingUnitId: '',//所属单元ID |
|||
doorName: '',//门牌号 |
|||
houseType: '1',//房屋类型【楼房，平房，别墅】 |
|||
purpose: '1',//房屋用途【住宅，商业，办公，工业，仓储，商住混用，其他】 |
|||
rentFlag: 0,//是否出租【是：1，否：0】 |
|||
ownerPhone: '', //联系方式 |
|||
ownerName: '', //房主名字 |
|||
ownerIdCard: '', //房主身份证 |
|||
remark: '', // 备注 |
|||
coding: '', |
|||
sysCoding: '' |
|||
} |
|||
|
|||
}, |
|||
// 开启加载动画 |
|||
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' } |
|||
], |
|||
coding: [ |
|||
{ 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: false } |
|||
], |
|||
ownerName: [ |
|||
{ required: false } |
|||
], |
|||
ownerIdCard: [ |
|||
{ required: false } |
|||
], |
|||
remark: [ |
|||
{ required: false } |
|||
], |
|||
} |
|||
}, |
|||
|
|||
}, |
|||
props: {} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped > |
|||
@import "@/assets/scss/modules/visual/communityManageForm.scss"; |
|||
</style> |
|||
@ -0,0 +1,246 @@ |
|||
<template> |
|||
<div class="resi-container"> |
|||
<el-card ref="searchCard" class="search-card"> |
|||
<el-form |
|||
ref="searchForm" |
|||
:inline="true" |
|||
:model="fmData" |
|||
class="demo-form-inline" |
|||
> |
|||
<el-form-item label="填写时间" prop="startTime"> |
|||
<el-date-picker |
|||
v-model="timeRange" |
|||
type="daterange" |
|||
clearable |
|||
size="small" |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
value-format="yyyy-MM-dd" |
|||
> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button |
|||
class="diy-button--search" |
|||
size="small" |
|||
@click="handleSearch" |
|||
>查询</el-button |
|||
> |
|||
<el-button |
|||
class="diy-button--reset" |
|||
size="small" |
|||
@click="resetForm('searchForm')" |
|||
>重置</el-button |
|||
> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-card> |
|||
<el-card class="resi-card-table"> |
|||
<el-table |
|||
:data="tableData" |
|||
border |
|||
style="width: 100%" |
|||
class="resi-table" |
|||
:height="tableHeight" |
|||
> |
|||
<el-table-column label="序号" type="index" align="center" width="50" /> |
|||
<el-table-column |
|||
prop="address" |
|||
width="240" |
|||
label="目的地" |
|||
align="center" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
<el-table-column |
|||
prop="name" |
|||
width="150" |
|||
label="姓名" |
|||
align="center" |
|||
/> |
|||
<el-table-column |
|||
prop="mobile" |
|||
width="180" |
|||
label="手机号" |
|||
align="center" |
|||
/> |
|||
<el-table-column |
|||
prop="idCard" |
|||
width="240" |
|||
label="身份证号" |
|||
align="center" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
<el-table-column |
|||
prop="comeReason" |
|||
width="320" |
|||
label="来访事由" |
|||
align="center" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
<el-table-column |
|||
prop="faceImg" |
|||
min-width="120" |
|||
align="center" |
|||
label="人脸" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-image |
|||
style="max-height: 50px" |
|||
:src="scope.row.faceImg" |
|||
:preview-src-list="[scope.row.faceImg]"> |
|||
<div slot="error" class="image-slot"> |
|||
<!-- <i class="el-icon-picture-outline"></i> --> |
|||
</div> |
|||
</el-image> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div> |
|||
<el-pagination |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="pageNo" |
|||
:page-sizes="[20, 50, 100, 200]" |
|||
:page-size="parseInt(pageSize)" |
|||
layout="sizes, prev, pager, next, total" |
|||
:total="total" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost } from "@/js/dai/request" |
|||
import { mapGetters } from "vuex" |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
openSearch: false, |
|||
|
|||
pageNo: 1, |
|||
pageSize: window.localStorage.getItem("pageSize") || 20, |
|||
total: 1, |
|||
|
|||
tableData: [], |
|||
timeRange: "", |
|||
fmData: { |
|||
startTime: "", |
|||
endTime: "", |
|||
}, |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapGetters(["clientHeight", "iframeHeight"]), |
|||
tableHeight() { |
|||
const h = this.clientHeight - 360 + this.iframeHeigh |
|||
const _h = this.clientHeight - 360 |
|||
return this.$store.state.inIframe ? h : _h |
|||
} |
|||
}, |
|||
watch: { |
|||
timeRange(val) { |
|||
if (Array.isArray(val) && val.length == 2) { |
|||
this.fmData.startTime = val[0] |
|||
this.fmData.endTime = val[1] |
|||
} else { |
|||
this.fmData.startTime = "" |
|||
this.fmData.endTime = "" |
|||
} |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.getTableData() |
|||
}, |
|||
methods: { |
|||
handleSizeChange(val) { |
|||
console.log(`每页 ${val} 条`) |
|||
this.pageSize = val |
|||
window.localStorage.setItem("pageSize", val) |
|||
this.getTableData() |
|||
}, |
|||
handleCurrentChange(val) { |
|||
console.log(`当前页: ${val}`) |
|||
this.pageNo = val |
|||
this.getTableData() |
|||
}, |
|||
|
|||
handleSearch(val) { |
|||
console.log(this.fmData) |
|||
this.pageNo = 1 |
|||
this.getTableData() |
|||
}, |
|||
resetForm(formName) { |
|||
this.$refs[formName].resetFields() |
|||
this.timeRange = "" |
|||
this.fmData.startTime = "" |
|||
this.fmData.endTime = "" |
|||
this.handleSearch() |
|||
}, |
|||
async getTableData() { |
|||
const url = "/epmetuser/icResiCollectVisitor/list" |
|||
const { pageSize, pageNo, fmData } = this |
|||
const { data, code, msg } = await requestPost(url, { |
|||
pageSize, |
|||
pageNo, |
|||
...fmData, |
|||
}) |
|||
if (code === 0) { |
|||
console.log("列表请求成功！！！！！！！！！！！！！！") |
|||
this.total = data.total || 0 |
|||
this.tableData = data.list |
|||
} |
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/buttonstyle.scss"; |
|||
|
|||
.resi-container .resi-card-table { |
|||
::v-deep .el-table th { |
|||
color: #fff; |
|||
background-color: rgba(33, 149, 254, 1); |
|||
// border-right: 1px solid rgba(33, 149, 254, 1); |
|||
} |
|||
} |
|||
.resi-table { |
|||
::v-deep .el-button--text { |
|||
text-decoration: underline; |
|||
} |
|||
} |
|||
.resi-card-table { |
|||
margin-top: 20px; |
|||
} |
|||
.resi-row-btn { |
|||
margin-bottom: 13px; |
|||
.upload-btn { |
|||
display: inline-block; |
|||
margin: 0 10px; |
|||
} |
|||
} |
|||
|
|||
.resi-btns { |
|||
margin-top: 20px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.resi-container .resi-card { |
|||
position: relative; |
|||
overflow: visible; |
|||
} |
|||
.wd50 { |
|||
min-width: 200px; |
|||
} |
|||
.badge { |
|||
display: block; |
|||
color: #F1F2E5; |
|||
background-color: #D7000F; |
|||
border-radius: 12px; |
|||
width: 70px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue