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.
252 lines
6.6 KiB
252 lines
6.6 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
|
|
:scroll="{ x: 1300 }"
|
|
:columns="columns"
|
|
:data-source="tableData"
|
|
:pagination="pagination"
|
|
@change="handleTableChange"
|
|
:row-key="
|
|
(record, index) => {
|
|
return index;
|
|
}
|
|
"
|
|
>
|
|
<span slot="pics" slot-scope="text,record">
|
|
<img :src="item.url" alt="" v-for="(item, index) in record.communityImgList" :key="index">
|
|
</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 @change="cityChange1" style="width: 120px" placeholder="请选择省">
|
|
<a-select-option :value="item.id" v-for="(item, index) in cityData" :key="index">
|
|
{{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, index) in cityData2" :key="index">
|
|
{{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, index) in cityData3" :key="index">
|
|
{{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="小区正门图片">
|
|
<imgUpload @handleChange="addFile"></imgUpload>
|
|
</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 imgUpload from "@/components/upload/index.vue"
|
|
import {getCommunityList, getAddCommunity, getAllRequest, updateCommunity} from "@/api/manage"
|
|
import {getAllCity, getCityByParent} from "@/api/city"
|
|
export default {
|
|
components: {
|
|
imgUpload
|
|
},
|
|
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: [],
|
|
address1: undefined,
|
|
// 添加/修改小区
|
|
modelType: 1, //1添加 2修改
|
|
visible: false,
|
|
};
|
|
},
|
|
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;
|
|
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.visible = false;
|
|
},
|
|
addConfirm() {
|
|
if(this.modelType == 1) {
|
|
getAddCommunity(this.addForm).then(() => {
|
|
this.getData();
|
|
})
|
|
} else {
|
|
let obj = Object.assign({id: this.chosenId}, this.addForm)
|
|
updateCommunity(obj).then(() => {
|
|
this.getData();
|
|
})
|
|
}
|
|
this.visible = false;
|
|
},
|
|
//添加小区-输入城市
|
|
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) {
|
|
let communityUrls = [];
|
|
communityUrls.push(file[0].response.data);
|
|
this.addForm.communityUrls = communityUrls;
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
</style> |