parent
c9cfbd6f16
commit
8efa6fa4d3
@ -0,0 +1,360 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-drawer
|
||||
:title="formTitle"
|
||||
:width="720"
|
||||
:visible="show"
|
||||
:body-style="{ paddingBottom: '80px' }"
|
||||
@close="close"
|
||||
>
|
||||
<div class="drawer-content" v-if="formType !== 3">
|
||||
楼栋信息
|
||||
<a-divider></a-divider>
|
||||
<a-form-model
|
||||
layout="vertical"
|
||||
ref="ruleForm"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
>
|
||||
<a-form-model-item label="楼栋号" prop="name">
|
||||
<a-input
|
||||
v-model="form.name"
|
||||
placeholder="请输入楼栋号"
|
||||
style="width: 50%"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item
|
||||
label="上传照片"
|
||||
style="width: 70%"
|
||||
prop="fileList"
|
||||
>
|
||||
<a-upload
|
||||
:action="`${$upload}`"
|
||||
:headers="uploadHeaders"
|
||||
accept='.jpg,.JPG,.png,.PNG'
|
||||
list-type="picture"
|
||||
:file-list="fileList"
|
||||
@preview="handlePreview"
|
||||
@change="fileChange"
|
||||
>
|
||||
<a-button> <a-icon type="upload" /> 点击上传 </a-button>
|
||||
</a-upload>
|
||||
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
|
||||
<img alt="example" style="width: 100%" :src="previewImage" />
|
||||
</a-modal>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<div class="drawer-content detail" v-else-if="formType===3">
|
||||
楼栋信息
|
||||
<a-divider></a-divider>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item label="楼栋号" prop="name">
|
||||
<span>{{form.name}}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="楼栋照片" style="width: 70%" v-if="fileList.length>0">
|
||||
<a-upload
|
||||
:action="`${$upload}`"
|
||||
:headers="uploadHeaders"
|
||||
accept='.jpg,.JPG,.png,.PNG'
|
||||
list-type="picture"
|
||||
:file-list="fileList"
|
||||
@preview="handlePreview"
|
||||
@change="fileChange"
|
||||
>
|
||||
</a-upload>
|
||||
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
|
||||
<img alt="example" style="width: 100%" :src="previewImage" />
|
||||
</a-modal>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
单元信息
|
||||
<a-divider></a-divider>
|
||||
<a-button class='add-btn' @click='addUnit' style="margin-bottom:5px">新增单元</a-button>
|
||||
<a-table :columns="unitColumns" :data-source="unitData" :row-key="record => record.id">
|
||||
<span slot="action" slot-scope="text, row">
|
||||
<a-space><a @click="addUnit(text, row)">编辑</a>
|
||||
<a @click="delUnit(text, row)">删除</a></a-space>
|
||||
</span>
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- foot -->
|
||||
<div class="drawer-footer">
|
||||
<a-button :style="{ marginRight: '8px' }" @click="close">
|
||||
关闭
|
||||
</a-button>
|
||||
<a-button type="primary" @click="submit" v-if="formType !==3">
|
||||
提交
|
||||
</a-button>
|
||||
<a-button type="primary" @click="edit" v-else> 编辑 </a-button>
|
||||
</div>
|
||||
</a-drawer>
|
||||
<!-- 单元 -->
|
||||
<a-modal
|
||||
:title="unit.modalTitle"
|
||||
:visible="unit.showModal"
|
||||
@ok="unitSubmit"
|
||||
@cancel="unitClose"
|
||||
>
|
||||
<div>
|
||||
<a-form-model
|
||||
ref="unForm"
|
||||
:model="unit.unitForm"
|
||||
:rules="unit.rules"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-form-model-item prop='name' label='单元名称'>
|
||||
<a-input placeholder='请输入' v-model="unit.unitForm.name"/>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item prop='floor' label='楼层数'>
|
||||
<a-input placeholder='请输入' v-model.number="unit.unitForm.floor"/>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item prop='publicFloor' label='公共楼层数'>
|
||||
<a-input placeholder='请输入' v-model.number="unit.unitForm.publicFloor"/>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item prop='elevator' label='是否有电梯'>
|
||||
<a-select placeholder='请选择' v-model="unit.unitForm.elevator">
|
||||
<a-select-option :value='1'>有</a-select-option>
|
||||
<a-select-option :value='0'>无</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { form, rules, unitColumns,uploadHeaders } from "./config";
|
||||
import { buildInsert,buildUpdate, buildInfo, unitAdd, unitUpdate, unitDel } from '@/api/basic/estate'
|
||||
function getBase64(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => resolve(reader.result);
|
||||
reader.onerror = (error) => reject(error);
|
||||
});
|
||||
}
|
||||
export default {
|
||||
props: {
|
||||
show: Boolean,
|
||||
type: Number,
|
||||
editId: Number,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form,
|
||||
rules,
|
||||
unitColumns,
|
||||
uploadHeaders,
|
||||
previewVisible: false,
|
||||
previewImage: "",
|
||||
imgLoading: false,
|
||||
formTitle:'新增楼栋',
|
||||
fileList: [], //图片list
|
||||
unitData: [], //单元数据
|
||||
formType: 1, //1 add 2edit 3detail
|
||||
unit:{// 单元
|
||||
showModal:false, //弹窗
|
||||
modalTitle:'',
|
||||
unitForm:{ //表单
|
||||
id:null,
|
||||
name:'',
|
||||
floor:null,
|
||||
elevator:undefined,
|
||||
publicFloor:null,
|
||||
manageBuildingId:null
|
||||
},
|
||||
rules:{
|
||||
name:[{required:true,message:'请输入单元名称',trigger:'blur'}],
|
||||
floor:[{required:true,message:'请输入楼层数',trigger:'blur'}],
|
||||
elevator:[{required:true,message:'是否有电梯',trigger:'change'}],
|
||||
publicFloor:[{required:true,message:'公共楼层数',trigger:'blur'}],
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getInfo(){
|
||||
buildInfo({buildingId:this.form.id}).then(res=>{
|
||||
this.form.name =res.data.name
|
||||
this.unitData =res.data.manageUnitFBIVoList
|
||||
if(!res.data.buildingInfoImgList.length){
|
||||
this.fileList=[]
|
||||
}
|
||||
const file = []
|
||||
for(let item of res.data.buildingInfoImgList){
|
||||
let obj = {
|
||||
name:item.url.split('_')[0] +'.'+ item.url.split('.')[1],
|
||||
url: this.$ImgUrl(item.url),
|
||||
uid:item.url.split('_')[1],
|
||||
status:'done',
|
||||
thumbUrl: this.$ImgUrl(item.url),
|
||||
}
|
||||
file.push(obj)
|
||||
}
|
||||
this.fileList = file
|
||||
})
|
||||
},
|
||||
close() {// 楼栋drawer关闭的回调
|
||||
this.$emit('close');
|
||||
this.form = {
|
||||
id:null,
|
||||
name: '',
|
||||
buildingInfoImgUrls:[]
|
||||
}
|
||||
this.unitData =[]
|
||||
this.fileList = []
|
||||
},
|
||||
edit(){// 楼栋修改
|
||||
this.formType = 2;
|
||||
},
|
||||
submit(){// 楼栋提交
|
||||
let file = []
|
||||
for(let item of this.fileList){
|
||||
// 新增的照片
|
||||
if(item.response){
|
||||
file.push(item.response.data)
|
||||
}else{
|
||||
// 已添加的照片
|
||||
file.push(item.url.split('/')[item.url.split('/').length-1])
|
||||
}
|
||||
}
|
||||
this.form.buildingInfoImgUrls = file
|
||||
this.$refs.ruleForm.validate(async valid => {
|
||||
if (valid) {
|
||||
if(this.formType ===1){
|
||||
const res = await buildInsert(this.form)
|
||||
if(res.code === 200){
|
||||
this.$message.success(res.msg)
|
||||
this.close()
|
||||
}else{
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
}else if(this.formType ===2){
|
||||
const res = await buildUpdate(this.form)
|
||||
if(res.code === 200){
|
||||
this.$message.success(res.msg)
|
||||
this.close()
|
||||
}else{
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
addUnit(data,row){//新增单元
|
||||
console.log(row);
|
||||
if(row!==undefined){
|
||||
this.unit.modalTitle='修改单元'
|
||||
this.unit.unitForm= {...row}
|
||||
this.unit.unitForm.manageBuildingId = this.form.id
|
||||
}else{
|
||||
this.unit.modalTitle='新增单元'
|
||||
}
|
||||
this.unit.showModal=true
|
||||
console.log(this.unit.unitForm);
|
||||
},
|
||||
unitSubmit(){//单元提交
|
||||
this.$refs.unForm.validate(async valid => {
|
||||
if (valid) {
|
||||
if(this.unit.modalTitle==='新增单元'){
|
||||
let res = await unitAdd(this.unit.unitForm)
|
||||
if(res.code === 200){
|
||||
this.$message.success(res.msg)
|
||||
this.getInfo()
|
||||
this.unitClose()
|
||||
}else{
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
}else{
|
||||
let res = await unitUpdate(this.unit.unitForm)
|
||||
if(res.code === 200){
|
||||
this.$message.success(res.msg)
|
||||
this.getInfo()
|
||||
this.unitClose()
|
||||
}else{
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
delUnit(data,row){
|
||||
this.$confirm({
|
||||
title: "是否删除",
|
||||
icon: "delete",
|
||||
onOk: async() => {
|
||||
let res = await unitDel({unitIds:[row.id]})
|
||||
if(res.code === 200){
|
||||
this.$message.success(res.msg)
|
||||
this.getInfo()
|
||||
}else{
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
unitClose(){
|
||||
this.unit.showModal = false;
|
||||
this.$refs.unForm.resetFields()
|
||||
},
|
||||
async handlePreview(file) {
|
||||
if (!file.url && !file.preview) {
|
||||
file.preview = await getBase64(file.originFileObj);
|
||||
}
|
||||
this.previewImage = file.url || file.preview;
|
||||
this.previewVisible = true;
|
||||
},
|
||||
handleCancel() {
|
||||
this.previewVisible = false;
|
||||
},
|
||||
fileChange(info) {
|
||||
this.fileList = info.fileList
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
type: {
|
||||
handler(val) {
|
||||
this.formType = val;
|
||||
},
|
||||
},
|
||||
editId:{
|
||||
handler(val) {
|
||||
this.form.id = val;
|
||||
this.unit.unitForm.manageBuildingId = val
|
||||
if(this.formType !== 1){
|
||||
this.getInfo()
|
||||
}
|
||||
},
|
||||
},
|
||||
formType:{
|
||||
handler(val) {
|
||||
switch (val) {
|
||||
case 1:
|
||||
this.formTitle ='新增楼栋'
|
||||
break;
|
||||
case 2:
|
||||
this.formTitle ='修改楼栋'
|
||||
break;
|
||||
case 3:
|
||||
this.formTitle ='楼栋详情'
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.detail{
|
||||
/deep/.anticon svg{
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,33 @@
|
||||
/**
|
||||
* 表单
|
||||
*
|
||||
*/
|
||||
|
||||
// 表单
|
||||
export const form = {
|
||||
manageBuildingId:undefined,
|
||||
manageUnitId:undefined,
|
||||
floorLocation:undefined,
|
||||
name:undefined,
|
||||
indoorArea:undefined,
|
||||
constructionArea:undefined,
|
||||
manageEstateTypeId:undefined,
|
||||
isEnableLease:undefined,
|
||||
houseTypeHall:undefined,
|
||||
houseTypeRoom:undefined,
|
||||
houseTypeBathroom:undefined,
|
||||
estateImgUrls:[],
|
||||
remarks:undefined,
|
||||
}
|
||||
export const rules = {
|
||||
floorLocation: [
|
||||
{ required: true, message: "楼层位置", trigger: "blur" },
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: "请输入房屋名称", trigger: "blur" },
|
||||
],
|
||||
}
|
||||
import store from "@/store";
|
||||
export const uploadHeaders = {
|
||||
"manage-login-token": store.getters.getToken,
|
||||
}
|
||||
@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-form-model
|
||||
layout="vertical"
|
||||
ref="ruleForm"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:wrapper-col="{ span: 18 }"
|
||||
>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="楼栋" prop="manageBuildingId">
|
||||
<a-select
|
||||
v-model="form.manageBuildingId"
|
||||
placeholder="请选择楼栋"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="单元" prop="manageUnitId">
|
||||
<a-select v-model="form.manageUnitId" placeholder="请选择单元" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="楼层" prop="floorLocation">
|
||||
<a-select v-model="form.floorLocation" placeholder="请选择楼层" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="房屋名称" prop="name">
|
||||
<a-input v-model="form.name" placeholder="请输入房屋名称" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="室内面积" prop="indoorArea">
|
||||
<a-input
|
||||
type="number"
|
||||
v-model="form.indoorArea"
|
||||
placeholder="请输入室内面积"
|
||||
suffix="㎡"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="建筑面积" prop="constructionArea">
|
||||
<a-input
|
||||
v-model="form.constructionArea"
|
||||
type="number"
|
||||
suffix="㎡"
|
||||
placeholder="请输入建筑面积"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="房屋类型" prop="manageEstateTypeId">
|
||||
<a-select
|
||||
mode="multiple"
|
||||
v-model="form.manageEstateTypeId"
|
||||
placeholder="请选择房屋类型"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item label="是否开启租赁" prop="isEnableLease">
|
||||
<a-select v-model="form.isEnableLease" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<div>房屋户型</div>
|
||||
</a-col>
|
||||
<a-col :span="4">
|
||||
<a-form-model-item label="厅" prop="houseTypeHall">
|
||||
<a-input type="number" :min="0" v-model="form.houseTypeHall" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="4">
|
||||
<a-form-model-item label="室" prop="houseTypeRoom">
|
||||
<a-input type="number" :min="0" v-model="form.houseTypeRoom" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="4">
|
||||
<a-form-model-item label="卫" prop="houseTypeBathroom">
|
||||
<a-input type="number" :min="0" v-model="form.houseTypeBathroom" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item label="房屋照片" prop="estateImgUrls">
|
||||
<a-upload
|
||||
:action="`${$upload}`"
|
||||
list-type="picture-card"
|
||||
:file-list="fileList"
|
||||
@preview="handlePreview"
|
||||
@change="handleChange"
|
||||
>
|
||||
<div v-if="fileList.length < 5">
|
||||
<a-icon type="plus" />
|
||||
<div class="ant-upload-text">Upload</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<a-modal
|
||||
:visible="previewVisible"
|
||||
:footer="null"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<img alt="example" style="width: 100%" :src="previewImage" />
|
||||
</a-modal>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item label="备注" prop="remarks">
|
||||
<a-textarea v-model="form.remarks" :rows="4" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { form, rules, uploadHeaders } from "./form.js";
|
||||
function getBase64(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => resolve(reader.result);
|
||||
reader.onerror = error => reject(error);
|
||||
});
|
||||
}
|
||||
export default {
|
||||
props: {
|
||||
editId: Number,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form,
|
||||
rules,
|
||||
uploadHeaders,
|
||||
fileList: [],
|
||||
previewVisible: false,
|
||||
previewImage: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async handlePreview(file) {
|
||||
if (!file.url && !file.preview) {
|
||||
file.preview = await getBase64(file.originFileObj);
|
||||
}
|
||||
this.previewImage = file.url || file.preview;
|
||||
this.previewVisible = true;
|
||||
},
|
||||
handleCancel() {
|
||||
this.previewVisible = false;
|
||||
},
|
||||
handleChange({ fileList }) {
|
||||
this.fileList = fileList;
|
||||
console.log(this.fileList);
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
</style>
|
||||
Loading…
Reference in new issue