小区调整

master
zzy 2026-04-20 14:57:13 +08:00
parent c0b729ba24
commit 3e4feedc35
5 changed files with 216 additions and 569 deletions

View File

@ -1,76 +1,49 @@
import request from '@/config/axios' import request from '@/config/axios'
/** 小区信息主表comm_community信息 */
export interface Community { export interface Community {
id: number; // 主键ID,和部门id一致 id: number
communityName?: string; // 小区名称 communityName?: string
areaType?: number; // 区域类型0=街道1=社区2=小区 streetName?: string
streetId?: number; // 所属街道ID districtName?: string
districtId?: number; // 所属社区ID communityAddress?: string
communityAddress?: string; // 小区详细地址 longitude?: number
longitude: number; // 小区经度坐标 latitude?: number
houseNum: number; // 房屋数 propertyCompany?: string
latitude: number; // 小区纬度坐标 visitAudit?: boolean
residentNum: number; // 常驻人口数 gateAudit?: boolean
propertyCompany: string; // 小区物业名称 houseNum?: number
floatingNum: number; // 流动人口数 residentNum?: number
visitAudit?: boolean; // 来访审核配置1需要审核0无需审核 floatingNum?: number
propertyNum: number; // 物业人数 propertyNum?: number
gateAudit?: boolean; // 道闸申请配置1需要审核0无需审核 committeeNum?: number
committeeNum: number; // 业委会人数
}
/** 街道社区树形结构 */
export interface CommunityTree {
id: number; // 节点ID
name: string; // 节点名称
areaType: number; // 区域类型0=街道1=社区2=小区
parentId: number; // 父节点ID
children?: CommunityTree[]; // 子节点列表
} }
// 小区信息主表comm_community API
export const CommunityApi = { export const CommunityApi = {
// 查询小区信息主表comm_community分页
getCommunityPage: async (params: any) => { getCommunityPage: async (params: any) => {
return await request.get({ url: `/community/community/page`, params }) return await request.get({ url: `/community/community/page`, params })
}, },
// 查询小区信息主表comm_community详情
getCommunity: async (id: number) => { getCommunity: async (id: number) => {
return await request.get({ url: `/community/community/get?id=` + id }) return await request.get({ url: `/community/community/get?id=` + id })
}, },
// 新增小区信息主表comm_community
createCommunity: async (data: Community) => { createCommunity: async (data: Community) => {
return await request.post({ url: `/community/community/create`, data }) return await request.post({ url: `/community/community/create`, data })
}, },
// 修改小区信息主表comm_community
updateCommunity: async (data: Community) => { updateCommunity: async (data: Community) => {
return await request.put({ url: `/community/community/update`, data }) return await request.put({ url: `/community/community/update`, data })
}, },
// 删除小区信息主表comm_community
deleteCommunity: async (id: number) => { deleteCommunity: async (id: number) => {
return await request.delete({ url: `/community/community/delete?id=` + id }) return await request.delete({ url: `/community/community/delete?id=` + id })
}, },
/** 批量删除小区信息主表comm_community */
deleteCommunityList: async (ids: number[]) => { deleteCommunityList: async (ids: number[]) => {
return await request.delete({ url: `/community/community/delete-list?ids=${ids.join(',')}` }) return await request.delete({ url: `/community/community/delete-list?ids=${ids.join(',')}` })
}, },
// 导出小区信息主表comm_community Excel
exportCommunity: async (params) => { exportCommunity: async (params) => {
return await request.download({ url: `/community/community/export-excel`, params }) return await request.download({ url: `/community/community/export-excel`, params })
},
// 获取街道和社区树形结构
getStreetCommunityTree: async (streetId?: number) => {
return await request.get({
url: `/community/community/street-community-tree`,
params: streetId ? { streetId } : {}
})
} }
} }

View File

@ -1,5 +1,4 @@
import request from '@/config/axios' import request from '@/config/axios'
import type {Dayjs} from 'dayjs';
/** 房屋信息主信息 */ /** 房屋信息主信息 */
export interface House { export interface House {

View File

@ -8,74 +8,46 @@
v-loading="formLoading" v-loading="formLoading"
> >
<div class="form-grid"> <div class="form-grid">
<el-form-item label="区域类型" prop="areaType"> <el-form-item label="小区名称" prop="communityName">
<el-select v-model="formData.areaType" placeholder="请选择区域类型"> <el-input v-model="formData.communityName" placeholder="请输入小区名称" />
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.COMM_AREA_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="名称" prop="communityName"> <el-form-item label="街道名称" prop="streetName">
<el-input v-model="formData.communityName" placeholder="请输入名称" /> <el-input v-model="formData.streetName" placeholder="请输入街道名称" />
</el-form-item> </el-form-item>
<!-- 所属街道仅区域类型为小区/社区时显示 --> <el-form-item label="社区名称" prop="districtName">
<el-form-item v-if="showStreet" label="所属街道" prop="streetId"> <el-input v-model="formData.districtName" placeholder="请输入社区名称" />
<el-select
v-model="formData.streetId"
placeholder="请选择所属街道"
@change="handleStreetChange"
>
<el-option
v-for="street in streetList"
:key="street.id"
:label="street.name"
:value="street.id"
/>
</el-select>
</el-form-item> </el-form-item>
<!-- 所属社区仅区域类型为小区时显示 --> <el-form-item label="小区地址" prop="communityAddress">
<el-form-item v-if="showDistrict" label="所属社区" prop="districtId">
<el-select
v-model="formData.districtId"
placeholder="请选择所属社区"
:disabled="!formData.streetId"
>
<el-option
v-for="district in districtList"
:key="district.id"
:label="district.name"
:value="district.id"
/>
</el-select>
</el-form-item>
<el-form-item label="地址" prop="communityAddress">
<el-input v-model="formData.communityAddress" placeholder="请输入详细地址" /> <el-input v-model="formData.communityAddress" placeholder="请输入详细地址" />
</el-form-item> </el-form-item>
<!-- 小区经度仅区域类型为小区时显示 --> <el-form-item label="小区经度" prop="longitude">
<el-form-item v-if="showAuditItems" label="小区经度" prop="longitude">
<el-input v-model="formData.longitude" placeholder="请输入经度" /> <el-input v-model="formData.longitude" placeholder="请输入经度" />
</el-form-item> </el-form-item>
<!-- 小区纬度仅区域类型为小区时显示 --> <el-form-item label="小区纬度" prop="latitude">
<el-form-item v-if="showAuditItems" label="小区纬度" prop="latitude">
<el-input v-model="formData.latitude" placeholder="请输入纬度" /> <el-input v-model="formData.latitude" placeholder="请输入纬度" />
</el-form-item> </el-form-item>
<!-- 小区物业仅区域类型为小区时显示 --> <el-form-item label="小区物业" prop="propertyCompany">
<el-form-item v-if="showAuditItems" label="小区物业" prop="propertyCompany">
<el-input v-model="formData.propertyCompany" placeholder="请输入物业名称" /> <el-input v-model="formData.propertyCompany" placeholder="请输入物业名称" />
</el-form-item> </el-form-item>
<!-- 来访审核 + 道闸申请仅区域类型为小区时显示 --> <!-- 用户名和密码仅新增时显示 -->
<div v-if="showAuditItems" class="inline-row"> <div v-if="formType === 'create'" class="inline-row">
<el-form-item label="用户名" prop="username">
<el-input v-model="formData.username" placeholder="请输入用户名4-30位数字和字母" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="formData.password" type="password" placeholder="请输入密码4-16位" show-password />
</el-form-item>
</div>
<div class="inline-row">
<el-form-item label="来访审核" prop="visitAudit"> <el-form-item label="来访审核" prop="visitAudit">
<el-radio-group v-model="formData.visitAudit"> <el-radio-group v-model="formData.visitAudit">
<el-radio <el-radio
@ -111,9 +83,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {getBoolDictOptions, DICT_TYPE, getIntDictOptions} from '@/utils/dict' import { getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
import { CommunityApi, Community, CommunityTree } from '@/api/community/community' import { CommunityApi, Community } from '@/api/community/community'
import { watch, reactive, ref, nextTick } from 'vue' import { reactive, ref, nextTick } from 'vue'
defineOptions({ name: 'CommunityForm' }) defineOptions({ name: 'CommunityForm' })
@ -125,205 +97,60 @@ const dialogTitle = ref('')
const formLoading = ref(false) const formLoading = ref(false)
const formType = ref('') const formType = ref('')
// =1=2=3
const AREA_TYPE = {
STREET: 0, //
COMMUNITY: 1, //
RESIDENTIAL: 2 //
}
//
const showStreet = ref(false) //
const showDistrict = ref(false) //
const showAuditItems = ref(false) // 访+
//
const streetList = ref<CommunityTree[]>([])
const districtList = ref<CommunityTree[]>([])
const formData = ref({ const formData = ref({
id: undefined, id: undefined,
communityName: undefined, communityName: undefined,
areaType: undefined, streetName: undefined,
streetId: undefined, districtName: undefined,
districtId: undefined,
communityAddress: undefined, communityAddress: undefined,
longitude: undefined, longitude: undefined,
latitude: undefined, latitude: undefined,
propertyCompany: undefined, propertyCompany: undefined,
username: undefined,
password: undefined,
visitAudit: undefined, visitAudit: undefined,
gateAudit: undefined gateAudit: undefined
}) })
// const formRules = reactive({
const baseFormRules = {
communityName: [{ required: true, message: '小区名称不能为空', trigger: 'blur' }], communityName: [{ required: true, message: '小区名称不能为空', trigger: 'blur' }],
areaType: [{ required: true, message: '区域类型不能为空', trigger: 'change' }], streetName: [{ required: true, message: '街道名称不能为空', trigger: 'blur' }],
districtName: [{ required: true, message: '社区名称不能为空', trigger: 'blur' }],
communityAddress: [{ required: true, message: '小区地址不能为空', trigger: 'blur' }], communityAddress: [{ required: true, message: '小区地址不能为空', trigger: 'blur' }],
streetId: [{ required: true, message: '所属街道不能为空', trigger: 'change' }], username: [
districtId: [{ required: true, message: '所属社区不能为空', trigger: 'change' }], { required: true, message: '用户名不能为空', trigger: 'blur' },
{ pattern: /^[a-zA-Z0-9]{4,30}$/, message: '用户名由 4-30 位数字和字母组成', trigger: 'blur' }
],
password: [
{ required: true, message: '密码不能为空', trigger: 'blur' },
{ min: 4, max: 16, message: '密码长度为 4-16 位', trigger: 'blur' }
],
visitAudit: [{ required: true, message: '来访审核不能为空', trigger: 'change' }], visitAudit: [{ required: true, message: '来访审核不能为空', trigger: 'change' }],
gateAudit: [{ required: true, message: '道闸申请不能为空', trigger: 'change' }] gateAudit: [{ required: true, message: '道闸申请不能为空', trigger: 'change' }]
} })
//
const formRules = reactive({ ...baseFormRules })
const formRef = ref() const formRef = ref()
//
const isInitializing = ref(false)
//
const updateFormVisibility = (val: number) => {
//
Object.keys(formRules).forEach(key => {
delete formRules[key]
})
Object.assign(formRules, {
communityName: baseFormRules.communityName,
areaType: baseFormRules.areaType,
communityAddress: baseFormRules.communityAddress
})
switch (val) {
case AREA_TYPE.STREET:
//
showStreet.value = false
showDistrict.value = false
showAuditItems.value = false
break
case AREA_TYPE.COMMUNITY:
//
showStreet.value = true
showDistrict.value = false
showAuditItems.value = false
formRules.streetId = baseFormRules.streetId
break
case AREA_TYPE.RESIDENTIAL:
//
showStreet.value = true
showDistrict.value = true
showAuditItems.value = true
formRules.streetId = baseFormRules.streetId
formRules.districtId = baseFormRules.districtId
formRules.visitAudit = baseFormRules.visitAudit
formRules.gateAudit = baseFormRules.gateAudit
break
default:
//
showStreet.value = false
showDistrict.value = false
showAuditItems.value = false
}
}
//
watch(
() => formData.value.areaType,
(val) => {
//
if (isInitializing.value) {
updateFormVisibility(val)
return
}
//
formData.value.streetId = undefined
formData.value.districtId = undefined
formData.value.visitAudit = undefined
formData.value.gateAudit = undefined
//
districtList.value = []
//
updateFormVisibility(val)
// 使 nextTick DOM
nextTick(() => {
formRef.value?.clearValidate()
})
},
{ immediate: true } //
)
//
const loadStreetList = async () => {
try {
const tree = await CommunityApi.getStreetCommunityTree()
streetList.value = tree || []
} catch (error) {
console.error('加载街道列表失败:', error)
}
}
//
const handleStreetChange = (streetId: number) => {
//
formData.value.districtId = undefined
if (!streetId) {
districtList.value = []
return
}
//
const street = streetList.value.find(item => item.id === streetId)
if (street && street.children) {
districtList.value = street.children
} else {
districtList.value = []
}
}
const open = async (type: string, id?: number) => { const open = async (type: string, id?: number) => {
dialogVisible.value = true dialogVisible.value = true
dialogTitle.value = t('action.' + type) dialogTitle.value = t('action.' + type)
formType.value = type formType.value = type
//
isInitializing.value = true
resetForm() resetForm()
//
await loadStreetList()
if (id) { if (id) {
formLoading.value = true formLoading.value = true
try { try {
const data = await CommunityApi.getCommunity(id) const data = await CommunityApi.getCommunity(id)
//
formData.value.areaType = data.areaType
// DOM
await nextTick()
// ID
if (data.streetId) {
handleStreetChange(data.streetId)
await nextTick()
}
//
formData.value = { formData.value = {
...formData.value, ...formData.value,
...data ...data
} }
//
await nextTick() await nextTick()
formRef.value?.clearValidate() formRef.value?.clearValidate()
} finally { } finally {
formLoading.value = false formLoading.value = false
} }
} }
//
await nextTick()
isInitializing.value = false
} }
defineExpose({ open }) defineExpose({ open })
@ -353,19 +180,17 @@ const resetForm = () => {
formData.value = { formData.value = {
id: undefined, id: undefined,
communityName: undefined, communityName: undefined,
areaType: undefined, streetName: undefined,
streetId: undefined, districtName: undefined,
districtId: undefined,
communityAddress: undefined, communityAddress: undefined,
longitude: undefined, longitude: undefined,
latitude: undefined, latitude: undefined,
propertyCompany: undefined, propertyCompany: undefined,
username: undefined,
password: undefined,
visitAudit: undefined, visitAudit: undefined,
gateAudit: undefined gateAudit: undefined
} }
streetList.value = []
districtList.value = []
isInitializing.value = false
formRef.value?.resetFields() formRef.value?.resetFields()
} }
</script> </script>

View File

@ -1,117 +0,0 @@
<!--
街道社区树选择组件
功能搜索输入框 + 街道社区树支持点击同一节点取消选中
Props:
filterPlaceholder 搜索输入框占位文字默认 '请输入街道/社区名称'
Events:
node-click(nodeId: number | undefined, areaType: number | undefined) 点击节点后触发取消选中时传 undefined
Expose:
reset() 清空选中状态供外部重置按钮调用
-->
<template>
<div>
<el-input
v-model="filterText"
class="mb-15px"
clearable
:placeholder="filterPlaceholder"
>
<template #prefix>
<Icon icon="ep:search" />
</template>
</el-input>
<el-tree
ref="treeRef"
:data="treeList"
:expand-on-click-node="false"
:filter-node-method="handleFilterNode"
:props="treeProps"
default-expand-all
highlight-current
node-key="id"
@node-click="handleNodeClick"
/>
</div>
</template>
<script setup lang="ts">
import { ElTree } from 'element-plus'
import { CommunityApi, CommunityTree } from '@/api/community/community'
defineOptions({ name: 'CommunityTreeSelect' })
withDefaults(
defineProps<{
filterPlaceholder?: string //
}>(),
{
filterPlaceholder: '请输入街道/社区名称'
}
)
const emit = defineEmits<{
'node-click': [nodeId: number | undefined, areaType: number | undefined]
}>()
//
const treeProps = {
label: 'name',
children: 'children'
}
const filterText = ref('') //
const treeList = ref<CommunityTree[]>([]) //
const treeRef = ref<InstanceType<typeof ElTree>>() // Ref
let currentNodeId: number | null = null // ID
/** 加载街道社区树 */
const loadTree = async () => {
const res = await CommunityApi.getStreetCommunityTree()
treeList.value = res || []
}
/** 基于名字过滤 */
const handleFilterNode = (value: string, data: CommunityTree) => {
if (!value) return true
return data.name?.indexOf(value) !== -1
}
/** 监听过滤关键字 */
watch(filterText, (val) => {
treeRef.value?.filter(val)
})
/** 处理节点点击:支持点击同一节点取消选中 */
const handleNodeClick = (row: CommunityTree) => {
if (currentNodeId === row.id) {
//
treeRef.value?.setCurrentKey(undefined)
currentNodeId = null
emit('node-click', undefined, undefined)
} else {
//
currentNodeId = row.id
emit('node-click', row.id, row.areaType)
}
}
/** 清空选中状态(供外部重置按钮调用) */
const reset = () => {
currentNodeId = null
filterText.value = ''
treeRef.value?.setCurrentKey(undefined)
}
/** 刷新树数据 */
const refresh = async () => {
await loadTree()
}
defineExpose({ reset, refresh })
/** 初始化 */
onMounted(async () => {
await loadTree()
})
</script>

View File

@ -1,136 +1,147 @@
<template> <template>
<el-row :gutter="20"> <ContentWrap>
<!-- 左侧街道社区树 --> <!-- 搜索工作栏 -->
<el-col :span="4" :xs="24"> <el-form
<ContentWrap class="h-1/1"> class="-mb-15px"
<CommunityTreeSelect @node-click="handleTreeNodeClick" ref="treeSelectRef" /> :model="queryParams"
</ContentWrap> ref="queryFormRef"
</el-col> :inline="true"
<el-col :span="20" :xs="24"> label-width="80px"
<!-- 搜索工作栏 --> >
<ContentWrap> <el-form-item label="小区名称" prop="communityName">
<el-form <el-input
class="-mb-15px" v-model="queryParams.communityName"
:model="queryParams" placeholder="请输入小区名称"
ref="queryFormRef" clearable
:inline="true" @keyup.enter="handleQuery"
label-width="68px" class="!w-240px"
> />
<el-form-item label="小区名称" prop="communityName"> </el-form-item>
<el-input <el-form-item label="街道名称" prop="streetName">
v-model="queryParams.communityName" <el-input
placeholder="请输入小区名称" v-model="queryParams.streetName"
clearable placeholder="请输入街道名称"
@keyup.enter="handleQuery" clearable
class="!w-240px" @keyup.enter="handleQuery"
/> class="!w-240px"
</el-form-item> />
<el-form-item> </el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> <el-form-item label="社区名称" prop="districtName">
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> <el-input
<el-button v-model="queryParams.districtName"
type="primary" placeholder="请输入社区名称"
plain clearable
@click="openForm('create')" @keyup.enter="handleQuery"
v-hasPermi="['community:community:create']" class="!w-240px"
> />
<Icon icon="ep:plus" class="mr-5px" /> 新增 </el-form-item>
</el-button> <el-form-item>
<el-button <el-button type="primary" @click="handleQuery">
type="success" <Icon icon="ep:search" class="mr-5px" /> 查询
plain </el-button>
@click="handleExport" <el-button @click="resetQuery">
:loading="exportLoading" <Icon icon="ep:refresh" class="mr-5px" /> 重置
v-hasPermi="['community:community:export']" </el-button>
> </el-form-item>
<Icon icon="ep:download" class="mr-5px" /> 导出 </el-form>
</el-button> </ContentWrap>
<el-button
type="danger"
plain
:disabled="isEmpty(checkedIds)"
@click="handleDeleteBatch"
v-hasPermi="['community:community:delete']"
>
<Icon icon="ep:delete" class="mr-5px" /> 批量删除
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 --> <!-- 操作按钮栏 -->
<ContentWrap :body-style="{ padding: '0' }"> <ContentWrap>
<el-table <div class="mb-15px">
row-key="id" <el-button
v-loading="loading" type="primary"
:data="list" plain
:stripe="false" @click="openForm('create')"
:show-overflow-tooltip="true" v-hasPermi="['community:community:create']"
@selection-change="handleRowCheckboxChange" >
class="community-table" <Icon icon="ep:plus" class="mr-5px" /> 新增
:header-cell-style="{ </el-button>
background: '#1890ff', <el-button
color: '#ffffff', type="primary"
textAlign: 'center', plain
fontWeight: 'normal', @click="handleExport"
fontSize: '14px', :loading="exportLoading"
borderColor: '#1890ff' v-hasPermi="['community:community:export']"
}" >
:cell-style="{ <Icon icon="ep:download" class="mr-5px" /> 导出
textAlign: 'center', </el-button>
fontSize: '14px', <el-button
color: '#333333', type="danger"
borderColor: '#ebeef5' plain
}" :disabled="isEmpty(checkedIds)"
> @click="handleDeleteBatch"
<el-table-column type="selection" width="55" align="center" /> v-hasPermi="['community:community:delete']"
<el-table-column label="序号" align="center" type="index" width="80" /> >
<el-table-column label="小区名称" align="center" prop="communityName" min-width="120" /> <Icon icon="ep:delete" class="mr-5px" /> 批量删除
<el-table-column label="区域类型" align="center" prop="areaType" width="100"> </el-button>
<template #default="scope"> </div>
<dict-tag :type="DICT_TYPE.COMM_AREA_TYPE" :value="scope.row.areaType" /> </ContentWrap>
</template>
</el-table-column> <!-- 列表 -->
<el-table-column label="所属街道" align="center" prop="streetName" min-width="120" /> <ContentWrap>
<el-table-column label="所属社区" align="center" prop="districtName" min-width="120" /> <el-table
<el-table-column label="小区地址" align="center" prop="communityAddress" min-width="200" /> row-key="id"
<el-table-column label="房屋数" align="center" prop="houseNum" width="100" /> v-loading="loading"
<el-table-column label="常驻人口数" align="center" prop="residentNum" width="120" /> :data="list"
<el-table-column label="物业人数" align="center" prop="propertyNum" width="100" /> :stripe="true"
<el-table-column label="业委会人数" align="center" prop="committeeNum" width="120" /> :show-overflow-tooltip="true"
<el-table-column label="操作" align="center" min-width="120px" fixed="right"> @selection-change="handleRowCheckboxChange"
<template #default="scope"> :header-cell-style="{
<el-button background: '#1890ff',
link color: '#ffffff',
type="primary" textAlign: 'center',
@click="openForm('update', scope.row.id)" fontWeight: 'normal',
v-hasPermi="['community:community:update']" fontSize: '14px',
> borderColor: '#1890ff'
编辑 }"
</el-button> :cell-style="{
<el-button textAlign: 'center',
link fontSize: '14px',
type="danger" color: '#333333',
@click="handleDelete(scope.row.id)" borderColor: '#ebeef5'
v-hasPermi="['community:community:delete']" }"
> >
删除 <el-table-column type="selection" width="55" align="center" />
</el-button> <el-table-column label="序号" align="center" type="index" width="80" />
</template> <el-table-column label="小区名称" align="center" prop="communityName" min-width="120" />
</el-table-column> <el-table-column label="所属街道" align="center" prop="streetName" min-width="120" />
</el-table> <el-table-column label="所属社区" align="center" prop="districtName" min-width="120" />
<!-- 分页 --> <el-table-column label="小区地址" align="center" prop="communityAddress" min-width="200" />
<div class="pagination-container"> <el-table-column label="房屋数" align="center" prop="houseNum" width="100" />
<Pagination <el-table-column label="常驻人口数" align="center" prop="residentNum" width="120" />
:total="total" <el-table-column label="流动人口数" align="center" prop="floatingNum" width="120" />
v-model:page="queryParams.pageNo" <el-table-column label="物业人数" align="center" prop="propertyNum" width="100" />
v-model:limit="queryParams.pageSize" <el-table-column label="业委会人数" align="center" prop="committeeNum" width="120" />
@pagination="getList" <el-table-column label="操作" align="center" min-width="120px" fixed="right">
/> <template #default="scope">
</div> <el-button
</ContentWrap> link
</el-col> type="primary"
</el-row> @click="openForm('update', scope.row.id)"
v-hasPermi="['community:community:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['community:community:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗添加/修改 --> <!-- 表单弹窗添加/修改 -->
<CommunityForm ref="formRef" @success="handleFormSuccess" /> <CommunityForm ref="formRef" @success="handleFormSuccess" />
@ -142,27 +153,25 @@ import download from '@/utils/download'
import { CommunityApi, Community } from '@/api/community/community' import { CommunityApi, Community } from '@/api/community/community'
import { DICT_TYPE } from '@/utils/dict' import { DICT_TYPE } from '@/utils/dict'
import CommunityForm from './CommunityForm.vue' import CommunityForm from './CommunityForm.vue'
import CommunityTreeSelect from './components/CommunityTreeSelect/index.vue'
/** 小区信息主表comm_community 列表 */ /** 小区信息主表comm_community 列表 */
defineOptions({ name: 'Community' }) defineOptions({ name: 'Community' })
const message = useMessage() // const message = useMessage()
const { t } = useI18n() // const { t } = useI18n()
const loading = ref(true) // const loading = ref(true)
const list = ref<Community[]>([]) // const list = ref<Community[]>([])
const total = ref(0) // const total = ref(0)
const queryParams = reactive({ const queryParams = reactive({
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
communityName: undefined, communityName: undefined,
streetId: undefined, streetName: undefined,
districtId: undefined districtName: undefined
}) })
const queryFormRef = ref() // const queryFormRef = ref()
const treeSelectRef = ref() // const exportLoading = ref(false)
const exportLoading = ref(false) //
/** 查询列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
@ -185,38 +194,9 @@ const handleQuery = () => {
/** 重置按钮操作 */ /** 重置按钮操作 */
const resetQuery = () => { const resetQuery = () => {
queryFormRef.value.resetFields() queryFormRef.value.resetFields()
treeSelectRef.value?.reset()
queryParams.streetId = undefined
queryParams.districtId = undefined
handleQuery() handleQuery()
} }
/** 刷新树组件 */
const refreshTree = async () => {
await treeSelectRef.value?.refresh()
}
/** 处理树节点被点击 */
const handleTreeNodeClick = async (nodeId: number | undefined, areaType: number | undefined) => {
//
queryParams.streetId = undefined
queryParams.districtId = undefined
if (nodeId && areaType !== undefined) {
// areaType: 0=1=2=
if (areaType === 0) {
// streetId
queryParams.streetId = nodeId
} else if (areaType === 1) {
// districtId
queryParams.districtId = nodeId
}
}
queryParams.pageNo = 1
await getList()
}
/** 添加/修改操作 */ /** 添加/修改操作 */
const formRef = ref() const formRef = ref()
const openForm = (type: string, id?: number) => { const openForm = (type: string, id?: number) => {
@ -225,55 +205,42 @@ const openForm = (type: string, id?: number) => {
/** 表单提交成功回调 */ /** 表单提交成功回调 */
const handleFormSuccess = async () => { const handleFormSuccess = async () => {
//
await getList() await getList()
//
await refreshTree()
} }
/** 删除按钮操作 */ /** 删除按钮操作 */
const handleDelete = async (id: number) => { const handleDelete = async (id: number) => {
try { try {
//
await message.delConfirm() await message.delConfirm()
//
await CommunityApi.deleteCommunity(id) await CommunityApi.deleteCommunity(id)
message.success(t('common.delSuccess')) message.success(t('common.delSuccess'))
//
await getList() await getList()
//
await refreshTree()
} catch {} } catch {}
} }
/** 批量删除小区信息主表comm_community */ /** 批量删除小区信息主表comm_community */
const handleDeleteBatch = async () => { const handleDeleteBatch = async () => {
try { try {
//
await message.delConfirm() await message.delConfirm()
await CommunityApi.deleteCommunityList(checkedIds.value); await CommunityApi.deleteCommunityList(checkedIds.value)
checkedIds.value = []; checkedIds.value = []
message.success(t('common.delSuccess')) message.success(t('common.delSuccess'))
await getList(); await getList()
//
await refreshTree()
} catch {} } catch {}
} }
const checkedIds = ref<number[]>([]) const checkedIds = ref<number[]>([])
const handleRowCheckboxChange = (records: Community[]) => { const handleRowCheckboxChange = (records: Community[]) => {
checkedIds.value = records.map((item) => item.id!); checkedIds.value = records.map((item) => item.id!)
} }
/** 导出按钮操作 */ /** 导出按钮操作 */
const handleExport = async () => { const handleExport = async () => {
try { try {
//
await message.exportConfirm() await message.exportConfirm()
//
exportLoading.value = true exportLoading.value = true
const data = await CommunityApi.exportCommunity(queryParams) const data = await CommunityApi.exportCommunity(queryParams)
download.excel(data, '小区信息主表comm_community.xls') download.excel(data, '小区信息.xls')
} catch { } catch {
} finally { } finally {
exportLoading.value = false exportLoading.value = false