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.
430 lines
12 KiB
430 lines
12 KiB
<template>
|
|
<div>
|
|
<div class="cardTitle">房屋管理</div>
|
|
<div class="search-box">
|
|
<a-row>
|
|
<a-col :span="20">
|
|
<a-space size="large">
|
|
<a-input placeholder="请输入房屋名称" />
|
|
<a-select style="width: 200px" placeholder="请选择房屋类型" />
|
|
<a-select style="width: 200px" placeholder="请选择是否开启租赁" />
|
|
<a-button type="primary" @click='getData'>查 询</a-button>
|
|
<a-button>重 置</a-button>
|
|
</a-space>
|
|
</a-col>
|
|
<a-col :span="4">
|
|
<a-button class="add-btn" @click="drawerConfig.addShow = true">添加房屋</a-button>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
<div class="main">
|
|
<div style="margin-bottom: 16px">
|
|
<!-- 批量操作 -->
|
|
<a-select
|
|
type="primary"
|
|
v-model="activeAction"
|
|
:disabled="!hasSelected"
|
|
:loading="loading"
|
|
style="width: 120px"
|
|
@change="Actions"
|
|
placeholder="请选择操作"
|
|
>
|
|
批量
|
|
<a-select-option v-for="item in ActionsList" :key="item.value">
|
|
{{ item.label }}
|
|
</a-select-option>
|
|
</a-select>
|
|
<span style="margin-left: 8px">
|
|
<template v-if="hasSelected">
|
|
{{ `已选择 ${selectedRowKeys.length} 条` }}
|
|
</template>
|
|
</span>
|
|
</div>
|
|
<!-- 表格 -->
|
|
<a-table
|
|
:columns="columns"
|
|
:data-source="tableData"
|
|
:pagination="pagination"
|
|
:scroll="{ x: 1400 }"
|
|
:row-selection="{
|
|
selectedRowKeys: selectedRowKeys,
|
|
onChange: onSelectChange,
|
|
}"
|
|
:row-key="
|
|
(record, index) => {
|
|
return index;
|
|
}
|
|
"
|
|
>
|
|
<span slot="name" slot-scope="text, row">
|
|
{{
|
|
row.manageBuildingName +
|
|
"栋/" +
|
|
row.manageUnitName +
|
|
"单元/" +
|
|
row.floorLocation +
|
|
"层-" +
|
|
row.name +
|
|
"室"
|
|
}}
|
|
</span>
|
|
<span slot="action" slot-scope="text, row">
|
|
<a-space>
|
|
<a class="ant-dropdown-link" @click='edit(row)'>编辑</a>
|
|
<a class="ant-dropdown-link" @click='del([row.id])'>删除</a>
|
|
</a-space>
|
|
</span>
|
|
<span slot="tags" slot-scope="tag">
|
|
<a-tag
|
|
:color="tag === 1 ? 'volcano' : tag === 2 ? 'geekblue' : 'green'"
|
|
>
|
|
{{ tag === 1 ? "闲置" : tag === 2 ? "在住" : "在租" }}
|
|
</a-tag>
|
|
</span>
|
|
<span slot="switch" slot-scope="switchV, row">
|
|
<a-switch :checked="switchV === 1" @change="handleEnable(row)"></a-switch>
|
|
</span>
|
|
</a-table>
|
|
</div>
|
|
<a-drawer
|
|
title="添加房屋"
|
|
:width="720"
|
|
:visible="drawerConfig.addShow"
|
|
:body-style="{ paddingBottom: '80px' }"
|
|
@close="addClose"
|
|
>
|
|
<div class="drawer-content">
|
|
基本信息
|
|
<a-divider></a-divider>
|
|
<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="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
|
list-type="picture-card"
|
|
:file-list="fileList"
|
|
@preview="handlePreview"
|
|
@change="handleChange"
|
|
>
|
|
<div v-if="fileList.length < 8">
|
|
<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>
|
|
<div class="drawer-footer">
|
|
<a-button :style="{ marginRight: '8px' }" @click="addClose">
|
|
关闭
|
|
</a-button>
|
|
<a-button type="primary" @click="addClose"> 提交 </a-button>
|
|
</div>
|
|
</a-drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
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);
|
|
});
|
|
}
|
|
import { columns,pagination,searchForm } from "./depend/config"
|
|
import { houseList, houseDel, isEnableLease} from '@/api/basic/estate'
|
|
export default {
|
|
data() {
|
|
return {
|
|
drawerConfig:{
|
|
addShow:false,
|
|
},
|
|
previewVisible: false,
|
|
previewImage: '',
|
|
fileList: [
|
|
{
|
|
uid: '-1',
|
|
name: 'image.png',
|
|
status: 'done',
|
|
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
|
},
|
|
{
|
|
uid: '-2',
|
|
name: 'image.png',
|
|
status: 'done',
|
|
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
|
},
|
|
{
|
|
uid: '-3',
|
|
name: 'image.png',
|
|
status: 'done',
|
|
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
|
},
|
|
{
|
|
uid: '-4',
|
|
name: 'image.png',
|
|
status: 'done',
|
|
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
|
},
|
|
{
|
|
uid: '-5',
|
|
name: 'image.png',
|
|
status: 'error',
|
|
},
|
|
],
|
|
form:{
|
|
manageBuildingId:undefined,
|
|
manageUnitId:undefined,
|
|
floorLocation:undefined,
|
|
name:undefined,
|
|
indoorArea:undefined,
|
|
constructionArea:undefined,
|
|
manageEstateTypeId:undefined,
|
|
isEnableLease:undefined,
|
|
houseTypeHall:undefined,
|
|
houseTypeRoom:undefined,
|
|
houseTypeBathroom:undefined,
|
|
estateImgUrls:undefined,
|
|
remarks:undefined,
|
|
},
|
|
rules:{},
|
|
pagination:pagination ,
|
|
searchForm:searchForm,
|
|
columns:columns ,
|
|
activeAction: undefined,
|
|
loading: false,
|
|
// 选择的index
|
|
selectedRowKeys: [],
|
|
tableChoosed: [],
|
|
// 分页
|
|
// 列
|
|
// 数据
|
|
tableData:[],
|
|
ActionsList: [
|
|
{
|
|
label: "批量删除",
|
|
value: 1,
|
|
},
|
|
// {
|
|
// label: "批量导出",
|
|
// value: 2,
|
|
// },
|
|
],
|
|
};
|
|
},
|
|
created() {
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
async getData() {
|
|
const res = await houseList(
|
|
{
|
|
pageNum:this.pagination.current,
|
|
size:this.pagination.pageSize,
|
|
name:this.searchForm.name,
|
|
isEnableLease:this.searchForm.isEnableLease,
|
|
manageEstateTypeId:this.searchForm.manageEstateTypeId,
|
|
}
|
|
)
|
|
this.tableData = res.data.rows
|
|
},
|
|
addHouse() {},
|
|
handleCancel() {
|
|
this.previewVisible = false;
|
|
},
|
|
async handlePreview(file) {
|
|
if (!file.url && !file.preview) {
|
|
file.preview = await getBase64(file.originFileObj);
|
|
}
|
|
this.previewImage = file.url || file.preview;
|
|
this.previewVisible = true;
|
|
},
|
|
handleChange({ fileList }) {
|
|
this.fileList = fileList;
|
|
},
|
|
handleEnable: async function(data) {
|
|
const res = await isEnableLease({
|
|
estateId:data.id
|
|
})
|
|
if(res.code===200){
|
|
this.$message.success(res.msg)
|
|
this.getData()
|
|
}else{
|
|
this.$message.error(res.msg)
|
|
}
|
|
},
|
|
handleTableChange(pagination) {
|
|
console.log(pagination);
|
|
const pager = { ...this.pagination };
|
|
pager.current = pagination.current;
|
|
pager.pageSize = pagination.pageSize;
|
|
this.pagination = pager;
|
|
},
|
|
del(ids) {
|
|
this.$confirm({
|
|
title: "是否删除",
|
|
icon: "",
|
|
onOk:() =>{
|
|
houseDel({estateIds:ids}).then(res=>{
|
|
if(res.code === 200){
|
|
this.$message.success(res.msg)
|
|
}else{
|
|
this.$message.error(res.msg)
|
|
}
|
|
})
|
|
},
|
|
});
|
|
},
|
|
Actions(data) {
|
|
// 批量删除
|
|
if(data===1){
|
|
this.del(this.selectedRowKeys)
|
|
this.activeAction = undefined;
|
|
}
|
|
},
|
|
onSelectChange(selectedRowKeys) {
|
|
this.selectedRowKeys = selectedRowKeys;
|
|
},
|
|
addClose(){
|
|
this.drawerConfig.addShow = false;
|
|
}
|
|
},
|
|
computed: {
|
|
// 是否选择selection
|
|
hasSelected() {
|
|
return this.selectedRowKeys.length > 0;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.role-card {
|
|
line-height: 30px;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid #d9d9d9;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
</style> |