You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
574 lines
18 KiB
574 lines
18 KiB
<template>
|
|
<div>
|
|
<div class="dialog-h-content scroll-h">
|
|
|
|
<el-form ref="ref_form"
|
|
:inline="false"
|
|
:model="dataForm"
|
|
:rules="dataRule"
|
|
label-width="150px"
|
|
class="g-edit-form">
|
|
|
|
<el-form-item label="所属楼栋"
|
|
style="display: block">
|
|
<span>{{agencyObj.label}}</span>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="单元号"
|
|
prop="buildingUnitId"
|
|
style="display: block">
|
|
<el-select class="u-edit-width-normal"
|
|
v-model.trim="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"
|
|
style="display: block">
|
|
<el-input class="u-edit-width-normal"
|
|
placeholder="请输入门牌号"
|
|
v-model.trim="dataForm.doorName">
|
|
</el-input>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="房屋编码"
|
|
prop="coding"
|
|
style="display: block">
|
|
<el-input class="u-edit-width-normal"
|
|
maxlength="50"
|
|
placeholder="请输入房屋编码"
|
|
v-model.trim="dataForm.coding">
|
|
|
|
</el-input>
|
|
<el-button style="margin-left: 10px"
|
|
type="text"
|
|
class="div-table-button--blue"
|
|
icon="el-icon-upload2"
|
|
size="small"
|
|
@click="handleCode">生成</el-button>
|
|
|
|
</el-form-item> -->
|
|
|
|
<!-- <el-form-item label="房屋编码"
|
|
prop="houseCode"
|
|
style="display: block">
|
|
<el-input class="u-edit-width-normal"
|
|
maxlength="30"
|
|
v-model.trim="dataForm.houseCode">
|
|
</el-input>
|
|
</el-form-item> -->
|
|
|
|
<el-form-item
|
|
label=""
|
|
prop="coding"
|
|
style="display: block">
|
|
<div style="display: flex; align-items:center">
|
|
<!-- <div class="u-edit-width-normal">
|
|
<img style="margin-left: 30px;width: 200px;"
|
|
:src="dataForm.houseQrcodeUrl">
|
|
</div> -->
|
|
<!-- -->
|
|
<a style="margin-left: 10px;"
|
|
class="div-table-button--blue"
|
|
:href="dataForm.houseQrcodeUrl"
|
|
target="_blank" @click="downloadQR"><i class="el-icon-download"></i>下载电子门牌</a>
|
|
</div>
|
|
</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>
|
|
-->
|
|
<!-- <el-form-item label="居住人数"
|
|
style="display: block"
|
|
prop="realPerson"
|
|
>
|
|
<el-input-number class="item_width_4"
|
|
v-model.trim="dataForm.realPerson"
|
|
:min="0"
|
|
:max="9999"
|
|
label="居住人数"></el-input-number>
|
|
</el-form-item> -->
|
|
<el-form-item label="房屋类型"
|
|
prop="houseType"
|
|
style="display: block">
|
|
<el-radio-group v-model.trim="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"
|
|
style="display: block"
|
|
class="u-edit-width-radiolong">
|
|
<el-radio-group v-model.trim="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"
|
|
style="display: block">
|
|
<el-radio-group v-model.trim="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="rentFlag"
|
|
style="display: block">
|
|
<el-checkbox-group v-model.trim="dataForm.familyTags"
|
|
@change="changeFamily">
|
|
<el-checkbox v-for="item in dicts.family_tag"
|
|
:label="item.value"
|
|
:key="item.value">{{item.label}}</el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="房主姓名"
|
|
prop="ownerName"
|
|
style="display: block">
|
|
<el-input class="u-edit-width-normal"
|
|
maxlength="30"
|
|
placeholder="请输入房主姓名"
|
|
v-model.trim="dataForm.ownerName">
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="联系电话"
|
|
prop="ownerPhone"
|
|
style="display: block">
|
|
<el-input class="u-edit-width-normal"
|
|
type='number'
|
|
placeholder="请输入联系电话"
|
|
v-model.trim="dataForm.ownerPhone">
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="房主证件号"
|
|
prop="ownerIdCard"
|
|
style="display: block">
|
|
<el-input class="u-edit-width-normal"
|
|
placeholder="请输入房主证件号"
|
|
v-model.trim="dataForm.ownerIdCard">
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="备注"
|
|
prop="remark"
|
|
style="display: block">
|
|
<el-input class="u-edit-width-normal"
|
|
maxlength="30"
|
|
placeholder="请输入备注"
|
|
v-model.trim="dataForm.remark">
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
</div>
|
|
<div class="m-edit-btn">
|
|
<el-button size="small"
|
|
@click="handleCancle">取 消</el-button>
|
|
<el-button size="small"
|
|
type="primary"
|
|
class="diy-button--blue"
|
|
:disabled="btnDisable"
|
|
@click="handleComfirm">保 存</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
import { Loading } from 'element-ui' // 引入Loading服务
|
|
import { requestPost, requestGet } 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: '',
|
|
familyTags: []//家庭标签
|
|
},
|
|
dicts: {
|
|
family_tag: []
|
|
}, //字典对象
|
|
|
|
keyWords: '',
|
|
agencyObj: {},
|
|
|
|
}
|
|
},
|
|
components: {},
|
|
mounted () {
|
|
|
|
},
|
|
async created () {
|
|
await this.getDicts();
|
|
},
|
|
|
|
methods: {
|
|
|
|
async initForm (type, row, agencyObj) {
|
|
|
|
this.$refs.ref_form.resetFields();
|
|
this.agencyObj = agencyObj
|
|
this.formType = type
|
|
console.log('agencyObj-----', agencyObj)
|
|
if (row) {
|
|
|
|
this.houseId = row.houseId
|
|
await this.loadHouseInfo()
|
|
// this.dataForm = JSON.parse(JSON.stringify(row))
|
|
// this.houseId = this.dataForm.houseId
|
|
|
|
// this.dataForm.buildingUnitId = this.dataForm.unitNumKey
|
|
// this.dataForm = { ... this.dataForm }
|
|
// this.houseType = this.dataForm.houseTypeKey
|
|
// this.purpose = this.dataForm.purposeKey
|
|
// this.rentFlag = parseInt(this.dataForm.rentFlagKey)
|
|
|
|
} else {
|
|
|
|
this.dataForm.neighborHoodId = this.agencyObj.pid
|
|
this.dataForm.buildingId = this.agencyObj.id
|
|
}
|
|
|
|
|
|
await this.loadUnitList()
|
|
|
|
},
|
|
|
|
downloadQR(){
|
|
let title = "房屋二维码";
|
|
console.log(this.houseId)
|
|
let url = "/actual/base/communityHouse/createHouseQrcode/";
|
|
console.log(url)
|
|
this.startLoading('正在生成，需要几分钟时间，请耐心等待...')
|
|
let params={
|
|
id:this.houseId
|
|
}
|
|
app.ajax.exportFilePost(
|
|
url,
|
|
params,
|
|
|
|
(data, rspMsg) => {
|
|
console.log(data)
|
|
this.download(data, title + ".png");
|
|
},
|
|
(rspMsg, data) => {
|
|
this.$message.error(rspMsg);
|
|
}
|
|
);
|
|
|
|
},
|
|
// 下载文件
|
|
download(data, downFileName) {
|
|
if (!data) {
|
|
return;
|
|
}
|
|
|
|
var csvData = new Blob([data]);
|
|
|
|
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
|
|
window.navigator.msSaveOrOpenBlob(csvData, downFileName);
|
|
this.endLoading()
|
|
}
|
|
// 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 = downFileName;
|
|
a.click();
|
|
a.remove();
|
|
window.URL.revokeObjectURL(url);
|
|
this.endLoading()
|
|
}
|
|
},
|
|
|
|
async loadHouseInfo () {
|
|
|
|
const url = "/actual/base/communityHouse/getClearHouseDeatilById/" + this.houseId
|
|
|
|
let params = {}
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
console.log(data)
|
|
if (code === 0) {
|
|
// debugger
|
|
this.dataForm = { ...data }
|
|
this.houseType = this.dataForm.houseType
|
|
this.purpose = this.dataForm.purpose
|
|
this.rentFlag = parseInt(this.dataForm.rentFlag)
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
|
|
},
|
|
|
|
//加载单元
|
|
async loadUnitList () {
|
|
const url = '/actual/base/communityBuildingUnit/listBuildingUnits'
|
|
|
|
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(
|
|
"/actual/base/communityHouse/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 = '/actual/base/communityHouse/saveCommunityHouse'
|
|
} else {
|
|
url = '/actual/base/communityHouse/updateCommunityHouse'
|
|
this.dataForm.houseId = this.houseId
|
|
}
|
|
|
|
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)
|
|
}
|
|
|
|
},
|
|
|
|
//选择家庭
|
|
changeFamily (val) {
|
|
|
|
|
|
},
|
|
|
|
async getDicts () {
|
|
try {
|
|
const dictTypes = ["family_tag"]; // 把所有dictType放在这个数组里
|
|
const requests = dictTypes.map((dictType) => {
|
|
return this.$http.post("sys/dict/data/dictlist", {
|
|
dictType: dictType,
|
|
});
|
|
});
|
|
const results = await Promise.all(requests);
|
|
results.forEach((result, index) => {
|
|
if (result.data.code === 0) {
|
|
this.dicts[dictTypes[index]].push(...result.data.data);
|
|
} else {
|
|
console.log(`获取${dictTypes[index]}字典失败: ${result.msg}`);
|
|
}
|
|
});
|
|
} catch (error) {
|
|
console.log("获取字典失败: ", error);
|
|
}
|
|
},
|
|
|
|
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: '',
|
|
familyTags: []
|
|
}
|
|
|
|
},
|
|
// 开启加载动画
|
|
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: {
|
|
view_real_data: {//显示【显示脱敏信息】按钮
|
|
type: Boolean,
|
|
default: true,
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped >
|
|
@import "@/assets/scss/modules/management/edit-main.scss";
|
|
|
|
.div_tuomin {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 40px;
|
|
}
|
|
</style>
|
|
|