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.
301 lines
7.9 KiB
301 lines
7.9 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-button type="primary" @click='getData()'>查 询</a-button>
|
|
<a-button @click='reset()'>重 置</a-button>
|
|
</a-space>
|
|
</a-col>
|
|
<a-col :span='4'>
|
|
<a-button class="add-btn" @click="addBuilding">添加楼栋</a-button>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
<commonTable
|
|
:columns="columns"
|
|
:tableData="tableData"
|
|
:ActionsList="ActionsList"
|
|
@handleTableChange="handleTableChange"
|
|
@Actions="Actions"
|
|
@selectionChoosed="selectionChoosed"
|
|
>
|
|
<template v-slot:actionBox="data">
|
|
<a-space size="small">
|
|
<a class="ant-dropdown-link" @click='detail(data)'>详情</a>
|
|
<a class="ant-dropdown-link" @click='del([data.data.id])'>删除</a>
|
|
</a-space>
|
|
</template>
|
|
</commonTable>
|
|
<!-- 添加 -->
|
|
<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"
|
|
>
|
|
<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="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
|
list-type="picture"
|
|
:default-file-list="fileList"
|
|
>
|
|
<a-button> <a-icon type="upload" /> 点击上传 </a-button>
|
|
</a-upload>
|
|
</a-form-model-item>
|
|
</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>
|
|
<!-- 详情 -->
|
|
<a-drawer
|
|
title="楼栋详情"
|
|
:width="720"
|
|
:visible="drawerConfig.detailShow"
|
|
:body-style="{ paddingBottom: '80px' }"
|
|
@close="detailClose"
|
|
>
|
|
<!-- 编辑 -->
|
|
<div class="drawer-content" v-if="drawerConfig.editNow">
|
|
楼栋信息
|
|
<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-form-model-item>
|
|
</a-form-model>
|
|
</div>
|
|
<!-- 详情 -->
|
|
<div class="drawer-content" v-else>
|
|
楼栋信息
|
|
<a-divider></a-divider>
|
|
<a-form
|
|
layout='vertical'
|
|
>
|
|
<a-form-item label="楼栋号" prop="name">
|
|
<span>1栋</span>
|
|
</a-form-item>
|
|
<a-form-item label='上传照片' style="width:70%" >
|
|
</a-form-item>
|
|
</a-form>
|
|
单元信息
|
|
<a-divider></a-divider>
|
|
<a-table :columns="unitColumns" :data-source="unitData">
|
|
<span slot="action" slot-scope="text, row">
|
|
<a-button @click="edit(text,row)">编辑</a-button>
|
|
<a-button @click="del(text,row)">删除</a-button>
|
|
</span>
|
|
</a-table>
|
|
</div>
|
|
<div class="drawer-footer">
|
|
<a-button :style="{ marginRight: '8px' }" @click="detailClose">
|
|
关闭
|
|
</a-button>
|
|
<a-button type="primary" @click="detailClose" v-if="drawerConfig.editNow"> 提交 </a-button>
|
|
<a-button type="primary" @click="drawerConfig.editNow=true" v-else> 编辑 </a-button>
|
|
</div>
|
|
</a-drawer>
|
|
<!-- <a-modal
|
|
title="新增单元"
|
|
:visible="addUnitShow"
|
|
@ok="addSubmit"
|
|
@cancel="addClose"
|
|
>
|
|
<div></div>
|
|
</a-modal> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { columns,pagination,searchForm} from "./depend/config"
|
|
import { buildingList,buildingDel } from "@/api/basic/estate"
|
|
export default {
|
|
data() {
|
|
return {
|
|
pagination,
|
|
columns,
|
|
searchForm,
|
|
drawerConfig:{
|
|
addShow:false,
|
|
detailShow:false,
|
|
title:'添加楼栋',
|
|
editNow:false,
|
|
},
|
|
addUnitShow:false,
|
|
form:{
|
|
name:''
|
|
},
|
|
rules:{
|
|
name:[{required:true,message:'请输入楼栋',trigger:'blur'}],
|
|
fileList:[{required:true}]
|
|
},
|
|
fileList: [],
|
|
tableChoosed: [],
|
|
unitData:[],
|
|
unitColumns: [
|
|
{
|
|
title: "单元名称",
|
|
dataIndex: "name",
|
|
width: "15%",
|
|
},
|
|
{
|
|
title: "楼层数",
|
|
dataIndex: "floor",
|
|
width: "15%",
|
|
},
|
|
{
|
|
title: "公共楼层数",
|
|
dataIndex: "publicFloor",
|
|
width: "18%",
|
|
},
|
|
{
|
|
title: "是否有电梯",
|
|
dataIndex: "elevator",
|
|
width: "18%",
|
|
customRender:function(elevator){
|
|
switch (elevator) {
|
|
case 1:
|
|
return '有'
|
|
case 0:
|
|
return '无'
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
{
|
|
title: "操作",
|
|
dataIndex: "action",
|
|
key: "action",
|
|
width: "180",
|
|
fixed: "right",
|
|
scopedSlots: { customRender: "action" },
|
|
},
|
|
],
|
|
// 数据
|
|
tableData: [],
|
|
ActionsList: [
|
|
{
|
|
label: "批量删除",
|
|
value: 1,
|
|
},
|
|
],
|
|
};
|
|
},
|
|
created() {
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
async getData() {
|
|
const res = await buildingList(
|
|
{
|
|
pageNum:this.pagination.current,
|
|
size:this.pagination.pageSize,
|
|
name:this.searchForm.name
|
|
}
|
|
)
|
|
this.tableData = res.data.rows
|
|
},
|
|
addBuilding(){
|
|
this.drawerConfig.addShow = true
|
|
},
|
|
addSubmit(){
|
|
this.$refs.ruleForm.validate(valid => {
|
|
if (valid) {
|
|
alert('submit!');
|
|
} else {
|
|
console.log('error submit!!');
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
addClose(){
|
|
this.drawerConfig.addShow = false
|
|
},
|
|
detail(data){
|
|
console.log(data);
|
|
this.drawerConfig.detailShow = true;
|
|
},
|
|
detailClose(){
|
|
this.drawerConfig.detailShow = false;
|
|
this.drawerConfig.editNow = false;
|
|
},
|
|
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: ()=>{
|
|
buildingDel({buildingIds:ids}).then(res=>{
|
|
if(res.code === 200){
|
|
this.$message.success(res.msg)
|
|
}else{
|
|
this.$message.error(res.msg)
|
|
}
|
|
})
|
|
},
|
|
});
|
|
},
|
|
Actions(data) {
|
|
let ids =[]
|
|
for(const item of this.tableChoosed){
|
|
ids.push(item.id)
|
|
}
|
|
// 批量删除
|
|
if(data===1){
|
|
this.del(ids)
|
|
}
|
|
},
|
|
selectionChoosed(data) {
|
|
console.log(data);
|
|
this.tableChoosed = data;
|
|
},
|
|
},
|
|
};
|
|
</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> |