增加添加楼栋功能
This commit is contained in:
aaron
parent
143ca04f75
commit
899f292b54
@ -25,4 +25,13 @@ export function createCommunity(data) {
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 添加楼栋
|
||||
export function createBuilding(data) {
|
||||
return request({
|
||||
url: '/api/community/building',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
@ -24,9 +24,9 @@ const routes = [
|
||||
},
|
||||
{
|
||||
path: '/community/building',
|
||||
name: 'buildingList',
|
||||
name: 'BuildingList',
|
||||
component: () => import('../views/community/BuildingList.vue'),
|
||||
meta: { title: '楼栋列表' }
|
||||
meta: { title: '楼栋管理' }
|
||||
},
|
||||
{
|
||||
path: '/community/station',
|
||||
|
||||
@ -2,20 +2,31 @@
|
||||
<div class="building-list">
|
||||
<div class="table-header">
|
||||
<h1>楼栋列表</h1>
|
||||
<a-select
|
||||
v-model:value="selectedCommunity"
|
||||
style="width: 200px"
|
||||
placeholder="请选择小区"
|
||||
@change="handleCommunityChange"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="item in communityOptions"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
>
|
||||
{{ item.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<a-button type="primary" @click="showAddModal">添加楼栋</a-button>
|
||||
</div>
|
||||
|
||||
<!-- 添加筛选区域 -->
|
||||
<div class="table-filter">
|
||||
<a-form layout="inline">
|
||||
<a-form-item label="所属小区">
|
||||
<a-select
|
||||
v-model:value="filterForm.community_id"
|
||||
placeholder="请选择小区"
|
||||
style="width: 200px"
|
||||
allowClear
|
||||
@change="handleFilter"
|
||||
>
|
||||
<a-select-option :value="undefined">全部</a-select-option>
|
||||
<a-select-option
|
||||
v-for="item in communityOptions"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
>
|
||||
{{ item.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
@ -32,13 +43,56 @@
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<!-- 添加楼栋模态框 -->
|
||||
<a-modal
|
||||
v-model:visible="addModalVisible"
|
||||
title="添加楼栋"
|
||||
@cancel="handleCancel"
|
||||
:confirmLoading="confirmLoading"
|
||||
width="500px"
|
||||
>
|
||||
<template #footer>
|
||||
<a-space>
|
||||
<a-button @click="handleCancel">取消</a-button>
|
||||
<a-button type="primary" :loading="confirmLoading" @click="handleAdd">
|
||||
保存
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formState"
|
||||
:rules="rules"
|
||||
:label-col="{ span: 6 }"
|
||||
:wrapper-col="{ span: 16 }"
|
||||
>
|
||||
<a-form-item label="所属小区" name="community_id" required>
|
||||
<a-select
|
||||
v-model:value="formState.community_id"
|
||||
placeholder="请选择小区"
|
||||
:options="communityOptions"
|
||||
:field-names="{ label: 'name', value: 'id' }"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="楼栋名称" name="building_name" required>
|
||||
<a-input v-model:value="formState.building_name" placeholder="请输入楼栋名称" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="楼栋编号" name="building_number" required>
|
||||
<a-input v-model:value="formState.building_number" placeholder="请输入楼栋编号" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { getCommunityList, getBuildingList } from '@/api/community'
|
||||
import { getBuildingList, getCommunityList, createBuilding } from '@/api/community'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
export default defineComponent({
|
||||
@ -46,7 +100,6 @@ export default defineComponent({
|
||||
const loading = ref(false)
|
||||
const tableData = ref([])
|
||||
const communityOptions = ref([])
|
||||
const selectedCommunity = ref(undefined)
|
||||
|
||||
const pagination = ref({
|
||||
current: 1,
|
||||
@ -64,12 +117,24 @@ export default defineComponent({
|
||||
width: 80,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '所属小区',
|
||||
dataIndex: 'community_name',
|
||||
key: 'community_name',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '楼栋名称',
|
||||
dataIndex: 'building_name',
|
||||
key: 'building_name',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '楼栋编号',
|
||||
dataIndex: 'building_number',
|
||||
key: 'building_number',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'create_time',
|
||||
@ -84,43 +149,19 @@ export default defineComponent({
|
||||
return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
|
||||
// 获取小区列表
|
||||
const fetchCommunityOptions = async () => {
|
||||
try {
|
||||
const res = await getCommunityList({
|
||||
skip: 0,
|
||||
limit: 1000 // 获取所有小区作为选项
|
||||
})
|
||||
if (res.code === 200) {
|
||||
communityOptions.value = res.data.items
|
||||
// 如果有小区数据，自动选择第一个并加载楼栋
|
||||
if (communityOptions.value.length > 0) {
|
||||
selectedCommunity.value = communityOptions.value[0].id
|
||||
fetchData()
|
||||
}
|
||||
} else {
|
||||
message.error(res.message || '获取小区列表失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取小区列表失败:', error)
|
||||
message.error('获取小区列表失败')
|
||||
}
|
||||
}
|
||||
// 添加筛选表单数据
|
||||
const filterForm = ref({
|
||||
community_id: undefined
|
||||
})
|
||||
|
||||
// 获取楼栋列表数据
|
||||
// 修改获取楼栋列表数据的方法，添加筛选参数
|
||||
const fetchData = async () => {
|
||||
if (!selectedCommunity.value) {
|
||||
tableData.value = []
|
||||
pagination.value.total = 0
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
loading.value = true
|
||||
const params = {
|
||||
skip: (pagination.value.current - 1) * pagination.value.pageSize,
|
||||
limit: pagination.value.pageSize,
|
||||
community_id: selectedCommunity.value
|
||||
community_id: filterForm.value.community_id // 添加小区筛选参数
|
||||
}
|
||||
|
||||
const res = await getBuildingList(params)
|
||||
@ -138,6 +179,28 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
|
||||
// 筛选变化处理
|
||||
const handleFilter = () => {
|
||||
pagination.value.current = 1 // 重置页码
|
||||
fetchData()
|
||||
}
|
||||
|
||||
// 获取小区选项
|
||||
const fetchCommunityOptions = async () => {
|
||||
try {
|
||||
const res = await getCommunityList({
|
||||
skip: 0,
|
||||
limit: 1000 // 获取所有小区
|
||||
})
|
||||
if (res.code === 200) {
|
||||
communityOptions.value = res.data.items
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取小区列表失败:', error)
|
||||
message.error('获取小区列表失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 表格变化处理
|
||||
const handleTableChange = (pag) => {
|
||||
pagination.value.current = pag.current
|
||||
@ -145,14 +208,60 @@ export default defineComponent({
|
||||
fetchData()
|
||||
}
|
||||
|
||||
// 小区选择变化处理
|
||||
const handleCommunityChange = () => {
|
||||
pagination.value.current = 1 // 重置页码
|
||||
fetchData()
|
||||
// 添加楼栋相关
|
||||
const addModalVisible = ref(false)
|
||||
const confirmLoading = ref(false)
|
||||
const formRef = ref(null)
|
||||
|
||||
const formState = ref({
|
||||
community_id: undefined,
|
||||
building_name: '',
|
||||
building_number: ''
|
||||
})
|
||||
|
||||
const rules = {
|
||||
community_id: [{ required: true, message: '请选择所属小区' }],
|
||||
building_name: [{ required: true, message: '请输入楼栋名称' }],
|
||||
building_number: [{ required: true, message: '请输入楼栋编号' }]
|
||||
}
|
||||
|
||||
// 显示添加模态框
|
||||
const showAddModal = () => {
|
||||
addModalVisible.value = true
|
||||
fetchCommunityOptions()
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
const handleAdd = () => {
|
||||
formRef.value.validate().then(async () => {
|
||||
try {
|
||||
confirmLoading.value = true
|
||||
const res = await createBuilding(formState.value)
|
||||
if (res.code === 200) {
|
||||
message.success('添加成功')
|
||||
addModalVisible.value = false
|
||||
fetchData() // 刷新列表
|
||||
} else {
|
||||
message.error(res.message || '添加失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('添加楼栋失败:', error)
|
||||
message.error('添加失败')
|
||||
} finally {
|
||||
confirmLoading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 取消添加
|
||||
const handleCancel = () => {
|
||||
formRef.value?.resetFields()
|
||||
addModalVisible.value = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchCommunityOptions()
|
||||
fetchData()
|
||||
fetchCommunityOptions() // 页面加载时获取小区选项
|
||||
})
|
||||
|
||||
return {
|
||||
@ -160,11 +269,19 @@ export default defineComponent({
|
||||
columns,
|
||||
tableData,
|
||||
pagination,
|
||||
communityOptions,
|
||||
selectedCommunity,
|
||||
handleTableChange,
|
||||
handleCommunityChange,
|
||||
formatDateTime
|
||||
formatDateTime,
|
||||
addModalVisible,
|
||||
confirmLoading,
|
||||
formState,
|
||||
formRef,
|
||||
rules,
|
||||
communityOptions,
|
||||
showAddModal,
|
||||
handleAdd,
|
||||
handleCancel,
|
||||
filterForm,
|
||||
handleFilter
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -185,4 +302,33 @@ export default defineComponent({
|
||||
:deep(.ant-table-content) {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
:deep(.ant-modal-body) {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
:deep(.ant-modal-footer) {
|
||||
text-align: right;
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.table-filter {
|
||||
margin-bottom: 16px;
|
||||
padding: 16px 24px;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item) {
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user