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.
312 lines
8.4 KiB
312 lines
8.4 KiB
<template>
|
|
<div class="main">
|
|
<div class="cardTitle">小区管理</div>
|
|
<div class="search-box">
|
|
<a-space size="large">
|
|
<a-form-model layout="inline">
|
|
<a-form-model-item label="小区名称">
|
|
<a-input v-model="form.communityName" placeholder="请输入小区名称" />
|
|
</a-form-model-item>
|
|
</a-form-model>
|
|
<a-button type="primary" @click="handlerSearch">查 询</a-button>
|
|
<a-button @click="handlerReset">重 置</a-button>
|
|
</a-space>
|
|
</div>
|
|
<!-- 表格 -->
|
|
<div id="commonTable">
|
|
<div style="margin-bottom: 16px">
|
|
<a-button icon="plus" @click="hanlderAdd" type="primary" ghost>
|
|
添加小区
|
|
</a-button>
|
|
</div>
|
|
<a-table
|
|
:columns="columns"
|
|
:data-source="tableData"
|
|
:pagination="pagination"
|
|
@change="handleTableChange"
|
|
:row-key="
|
|
(record, index) => {
|
|
return index;
|
|
}
|
|
"
|
|
>
|
|
<span slot="pics" slot-scope="text,record">
|
|
<img style="width: 40px;height: 40px" v-for="(item, index) in record.communityImgList" :src="$ImgUrl(item.url)" :key="index">
|
|
<!-- {{record.communityImgList}} -->
|
|
</span>
|
|
<span slot="action" slot-scope="text,record">
|
|
<a @click="detail(record)">修改</a>
|
|
</span>
|
|
</a-table>
|
|
</div>
|
|
<a-drawer :title="modelType == 1 ? '填写小区信息':'修改小区信息'" :visible="visible" @close="hanlderClose" width="512">
|
|
<a-form-model>
|
|
<a-form-model-item label="小区全称">
|
|
<a-input v-model="addForm.name" style="width: 260px" placeholder="请输入小区全称" />
|
|
</a-form-model-item>
|
|
<a-form-model-item label="公司名称">
|
|
<a-select v-model="addForm.companyId" style="width: 260px" placeholder="请选择公司">
|
|
<a-select-option :value="item.id" v-for="(item, index) in companyData" :key="index">
|
|
{{item.companyName}}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-model-item>
|
|
<a-form-model-item label="小区地址">
|
|
<a-select v-model="province" @change="cityChange1" style="width: 120px" placeholder="请选择省">
|
|
<a-select-option :value="item.id" v-for="(item) in cityData" :key="item.id">
|
|
{{item.name}}
|
|
</a-select-option>
|
|
</a-select>
|
|
<a-select v-model="address1" @change="cityChange2" style="width: 120px;margin-left: 20px" placeholder="请选择市">
|
|
<a-select-option :value="item.id" v-for="(item) in cityData2" :key="item.id">
|
|
{{item.name}}
|
|
</a-select-option>
|
|
</a-select>
|
|
<a-select v-model="addForm.address" style="width: 120px;margin-left: 20px" placeholder="请选择区">
|
|
<a-select-option :value="item.id" v-for="(item) in cityData3" :key="item.id">
|
|
{{item.name}}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-model-item>
|
|
<a-form-model-item>
|
|
<a-input v-model="addForm.addressDetails" style="width: 260px" placeholder="请输入详细地址"></a-input>
|
|
</a-form-model-item>
|
|
<a-form-model-item label="小区正门图片">
|
|
<commonUpload @handleChange="addFile" :fileList="fileList"></commonUpload>
|
|
</a-form-model-item>
|
|
</a-form-model>
|
|
<a-button @click="addConfirm" type="primary">确定</a-button>
|
|
<a-button style="margin-left: 20px" @click="hanlderClose">取消</a-button>
|
|
</a-drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {getCommunityList, getAddCommunity, getAllRequest, updateCommunity, findByIdAdmin} from "@/api/manage"
|
|
import {getAllCity, getCityByParent} from "@/api/city"
|
|
export default {
|
|
data() {
|
|
return {
|
|
form: {
|
|
pageNum: 1,
|
|
size: 10,
|
|
communityName: ''
|
|
},
|
|
addForm: {
|
|
companyId: undefined,
|
|
name: '',
|
|
address: undefined,
|
|
addressDetails: '',
|
|
communityUrls: []
|
|
},
|
|
// 分页
|
|
pagination: {
|
|
current: 1,
|
|
total: 0,
|
|
pageSize: 10,
|
|
showTotal: (total) => `共 ${total} 条`,
|
|
showSizeChanger: true,
|
|
showQuickJumper: true,
|
|
},
|
|
// 列
|
|
columns: [
|
|
{
|
|
title: "小区名称",
|
|
dataIndex: "name",
|
|
width: "200",
|
|
},
|
|
{
|
|
title: "公司名称",
|
|
dataIndex: "companyName",
|
|
width: "200",
|
|
},
|
|
{
|
|
title: "小区地址",
|
|
dataIndex: "addressName",
|
|
width: "200",
|
|
},
|
|
{
|
|
title: "小区图片",
|
|
dataIndex: "communityImgList",
|
|
width: "200",
|
|
scopedSlots: { customRender: "pics" },
|
|
},
|
|
{
|
|
title: "操作",
|
|
dataIndex: "action",
|
|
key: "action",
|
|
width: "180",
|
|
fixed: "right",
|
|
scopedSlots: { customRender: "action" },
|
|
},
|
|
],
|
|
// 数据
|
|
tableData: [],
|
|
companyData: [],
|
|
cityData: [],
|
|
cityData2: [],
|
|
cityData3: [],
|
|
province: undefined,
|
|
address1: undefined,
|
|
// 添加/修改小区
|
|
modelType: 1, //1添加 2修改
|
|
visible: false,
|
|
fileList: []
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getApi();
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
getData() {
|
|
getCommunityList(this.form).then(res => {
|
|
let data = res.data.rows;
|
|
this.pagination.total = res.data.total;
|
|
this.tableData = data
|
|
})
|
|
},
|
|
getApi() {
|
|
let obj = {pageNum: 1,size: 1000};
|
|
getAllRequest(obj).then(res => {
|
|
let data = res.data.rows
|
|
this.companyData = data;
|
|
})
|
|
getAllCity().then(res => {
|
|
let data = res.data;
|
|
this.cityData = data;
|
|
})
|
|
},
|
|
//分页
|
|
handleTableChange(pagination) {
|
|
this.form.size = pagination.pageSize;
|
|
this.form.pageNum = pagination.current;
|
|
this.getData();
|
|
},
|
|
selectionChoosed(data) {
|
|
this.tableChoosed = data
|
|
},
|
|
//点击详情
|
|
detail(record) {
|
|
this.modelType = 2;
|
|
findByIdAdmin({communityId: record.id}).then(res => {
|
|
let data = res.data;
|
|
this.addForm.name = data.name;
|
|
this.addForm.companyId = data.companyId;
|
|
this.addForm.addressDetails = data.addressDetails;
|
|
getCityByParent({parentId: data.provinceId}).then(res => {
|
|
let data = res.data;
|
|
this.cityData2 = data;
|
|
})
|
|
getCityByParent({parentId: data.cityId}).then(res => {
|
|
let data = res.data;
|
|
this.cityData3 = data;
|
|
})
|
|
this.province = data.provinceId //回调省
|
|
this.address1 = data.cityId //回调市
|
|
this.addForm.address = data.countyId //回调区
|
|
//
|
|
this.addForm.communityUrls = [];
|
|
if (res.data.imgList.length > 0) {
|
|
const pic = [];
|
|
this.addForm.communityUrls.push(res.data.imgList[0].url)
|
|
for (let item of res.data.imgList) {
|
|
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),
|
|
};
|
|
pic.push(obj);
|
|
}
|
|
this.fileList = pic;
|
|
}else{
|
|
this.addForm.communityUrls=[]
|
|
}
|
|
})
|
|
this.chosenId = record.id; //小区id
|
|
this.visible = true;
|
|
},
|
|
//查询
|
|
handlerSearch() {
|
|
this.getData()
|
|
},
|
|
//重置
|
|
handlerReset() {
|
|
this.form.communityName = '';
|
|
this.getData()
|
|
},
|
|
//添加小区
|
|
hanlderAdd() {
|
|
this.modelType = 1;
|
|
this.visible = true;
|
|
},
|
|
hanlderClose() {
|
|
this.addForm = {
|
|
companyId: undefined,
|
|
name: '',
|
|
address: undefined,
|
|
addressDetails: '',
|
|
communityUrls: []
|
|
},
|
|
this.province = undefined;
|
|
this.address1 = undefined;
|
|
this.cityData2 = [];
|
|
this.cityData3 = [];
|
|
this.visible = false;
|
|
this.fileList = [];
|
|
},
|
|
addConfirm() {
|
|
if(this.modelType == 1) {
|
|
getAddCommunity(this.addForm).then((res) => {
|
|
if (res.code === 200) {
|
|
this.$message.success(res.msg);
|
|
this.getData();
|
|
} else {
|
|
this.$message.error(res.msg);
|
|
}
|
|
})
|
|
} else {
|
|
let obj = Object.assign({id: this.chosenId}, this.addForm)
|
|
updateCommunity(obj).then((res) => {
|
|
if (res.code === 200) {
|
|
this.$message.success(res.msg);
|
|
this.getData();
|
|
} else {
|
|
this.$message.error(res.msg);
|
|
}
|
|
})
|
|
}
|
|
this.hanlderClose()
|
|
},
|
|
//添加小区-输入城市
|
|
cityChange1(val) {
|
|
this.address1 = undefined,
|
|
this.addForm.address = undefined,
|
|
this.cityData3 = [],
|
|
this.cityData2 = this.cityData[val-2].cityList
|
|
},
|
|
cityChange2(val) {
|
|
this.addForm.address = undefined
|
|
getCityByParent({parentId: val}).then(res => {
|
|
let data = res.data;
|
|
this.cityData3 = data;
|
|
})
|
|
},
|
|
//添加小区-上传图片
|
|
addFile(file) {
|
|
this.fileList = file;
|
|
this.addForm.communityUrls = [];
|
|
file.forEach(ele => {
|
|
if(ele.status == 'done') {
|
|
this.addForm.communityUrls.push(ele.response.data)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
</style> |