小区调整
zzy
parent
c0b729ba24
commit
3e4feedc35
|
|
@ -1,76 +1,49 @@
|
|||
import request from '@/config/axios'
|
||||
|
||||
/** 小区信息主表（comm_community）信息 */
|
||||
export interface Community {
|
||||
id: number; // 主键ID,和部门id一致
|
||||
communityName?: string; // 小区名称
|
||||
areaType?: number; // 区域类型：0=街道，1=社区，2=小区
|
||||
streetId?: number; // 所属街道ID
|
||||
districtId?: number; // 所属社区ID
|
||||
communityAddress?: string; // 小区详细地址
|
||||
longitude: number; // 小区经度坐标
|
||||
houseNum: number; // 房屋数
|
||||
latitude: number; // 小区纬度坐标
|
||||
residentNum: number; // 常驻人口数
|
||||
propertyCompany: string; // 小区物业名称
|
||||
floatingNum: number; // 流动人口数
|
||||
visitAudit?: boolean; // 来访审核配置：1需要审核，0无需审核
|
||||
propertyNum: number; // 物业人数
|
||||
gateAudit?: boolean; // 道闸申请配置：1需要审核，0无需审核
|
||||
committeeNum: number; // 业委会人数
|
||||
}
|
||||
|
||||
/** 街道社区树形结构 */
|
||||
export interface CommunityTree {
|
||||
id: number; // 节点ID
|
||||
name: string; // 节点名称
|
||||
areaType: number; // 区域类型：0=街道，1=社区，2=小区
|
||||
parentId: number; // 父节点ID
|
||||
children?: CommunityTree[]; // 子节点列表
|
||||
id: number
|
||||
communityName?: string
|
||||
streetName?: string
|
||||
districtName?: string
|
||||
communityAddress?: string
|
||||
longitude?: number
|
||||
latitude?: number
|
||||
propertyCompany?: string
|
||||
visitAudit?: boolean
|
||||
gateAudit?: boolean
|
||||
houseNum?: number
|
||||
residentNum?: number
|
||||
floatingNum?: number
|
||||
propertyNum?: number
|
||||
committeeNum?: number
|
||||
}
|
||||
|
||||
// 小区信息主表（comm_community） API
|
||||
export const CommunityApi = {
|
||||
// 查询小区信息主表（comm_community）分页
|
||||
getCommunityPage: async (params: any) => {
|
||||
return await request.get({ url: `/community/community/page`, params })
|
||||
},
|
||||
|
||||
// 查询小区信息主表（comm_community）详情
|
||||
getCommunity: async (id: number) => {
|
||||
return await request.get({ url: `/community/community/get?id=` + id })
|
||||
},
|
||||
|
||||
// 新增小区信息主表（comm_community）
|
||||
createCommunity: async (data: Community) => {
|
||||
return await request.post({ url: `/community/community/create`, data })
|
||||
},
|
||||
|
||||
// 修改小区信息主表（comm_community）
|
||||
updateCommunity: async (data: Community) => {
|
||||
return await request.put({ url: `/community/community/update`, data })
|
||||
},
|
||||
|
||||
// 删除小区信息主表（comm_community）
|
||||
deleteCommunity: async (id: number) => {
|
||||
return await request.delete({ url: `/community/community/delete?id=` + id })
|
||||
},
|
||||
|
||||
/** 批量删除小区信息主表（comm_community） */
|
||||
deleteCommunityList: async (ids: number[]) => {
|
||||
return await request.delete({ url: `/community/community/delete-list?ids=${ids.join(',')}` })
|
||||
},
|
||||
|
||||
// 导出小区信息主表（comm_community） Excel
|
||||
exportCommunity: async (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 } : {}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import request from '@/config/axios'
|
||||
import type {Dayjs} from 'dayjs';
|
||||
|
||||
/** 房屋信息主信息 */
|
||||
export interface House {
|
||||
|
|
|
|||
|
|
@ -8,74 +8,46 @@
|
|||
v-loading="formLoading"
|
||||
>
|
||||
<div class="form-grid">
|
||||
<el-form-item label="区域类型" prop="areaType">
|
||||
<el-select v-model="formData.areaType" 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 label="小区名称" prop="communityName">
|
||||
<el-input v-model="formData.communityName" placeholder="请输入小区名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="名称" prop="communityName">
|
||||
<el-input v-model="formData.communityName" placeholder="请输入名称" />
|
||||
<el-form-item label="街道名称" prop="streetName">
|
||||
<el-input v-model="formData.streetName" placeholder="请输入街道名称" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 所属街道：仅区域类型为小区/社区时显示 -->
|
||||
<el-form-item v-if="showStreet" label="所属街道" prop="streetId">
|
||||
<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 label="社区名称" prop="districtName">
|
||||
<el-input v-model="formData.districtName" placeholder="请输入社区名称" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 所属社区：仅区域类型为小区时显示 -->
|
||||
<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-form-item label="小区地址" prop="communityAddress">
|
||||
<el-input v-model="formData.communityAddress" placeholder="请输入详细地址" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 小区经度：仅区域类型为小区时显示 -->
|
||||
<el-form-item v-if="showAuditItems" label="小区经度" prop="longitude">
|
||||
<el-form-item label="小区经度" prop="longitude">
|
||||
<el-input v-model="formData.longitude" placeholder="请输入经度" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 小区纬度：仅区域类型为小区时显示 -->
|
||||
<el-form-item v-if="showAuditItems" label="小区纬度" prop="latitude">
|
||||
<el-form-item label="小区纬度" prop="latitude">
|
||||
<el-input v-model="formData.latitude" placeholder="请输入纬度" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 小区物业：仅区域类型为小区时显示 -->
|
||||
<el-form-item v-if="showAuditItems" label="小区物业" prop="propertyCompany">
|
||||
<el-form-item label="小区物业" prop="propertyCompany">
|
||||
<el-input v-model="formData.propertyCompany" placeholder="请输入物业名称" />
|
||||
</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-radio-group v-model="formData.visitAudit">
|
||||
<el-radio
|
||||
|
|
@ -111,9 +83,9 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {getBoolDictOptions, DICT_TYPE, getIntDictOptions} from '@/utils/dict'
|
||||
import { CommunityApi, Community, CommunityTree } from '@/api/community/community'
|
||||
import { watch, reactive, ref, nextTick } from 'vue'
|
||||
import { getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { CommunityApi, Community } from '@/api/community/community'
|
||||
import { reactive, ref, nextTick } from 'vue'
|
||||
|
||||
defineOptions({ name: 'CommunityForm' })
|
||||
|
||||
|
|
@ -125,205 +97,60 @@ const dialogTitle = ref('')
|
|||
const formLoading = ref(false)
|
||||
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({
|
||||
id: undefined,
|
||||
communityName: undefined,
|
||||
areaType: undefined,
|
||||
streetId: undefined,
|
||||
districtId: undefined,
|
||||
streetName: undefined,
|
||||
districtName: undefined,
|
||||
communityAddress: undefined,
|
||||
longitude: undefined,
|
||||
latitude: undefined,
|
||||
propertyCompany: undefined,
|
||||
username: undefined,
|
||||
password: undefined,
|
||||
visitAudit: undefined,
|
||||
gateAudit: undefined
|
||||
})
|
||||
|
||||
// 基础表单规则
|
||||
const baseFormRules = {
|
||||
const formRules = reactive({
|
||||
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' }],
|
||||
streetId: [{ required: true, message: '所属街道不能为空', trigger: 'change' }],
|
||||
districtId: [{ required: true, message: '所属社区不能为空', trigger: 'change' }],
|
||||
username: [
|
||||
{ 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' }],
|
||||
gateAudit: [{ required: true, message: '道闸申请不能为空', trigger: 'change' }]
|
||||
}
|
||||
|
||||
// 响应式表单规则
|
||||
const formRules = reactive({ ...baseFormRules })
|
||||
})
|
||||
|
||||
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) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
|
||||
// 标记为初始化模式
|
||||
isInitializing.value = true
|
||||
|
||||
resetForm()
|
||||
|
||||
// 先加载街道列表
|
||||
await loadStreetList()
|
||||
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
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,
|
||||
...data
|
||||
}
|
||||
|
||||
// 清除所有校验状态
|
||||
await nextTick()
|
||||
formRef.value?.clearValidate()
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化完成
|
||||
await nextTick()
|
||||
isInitializing.value = false
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
|
|
@ -353,19 +180,17 @@ const resetForm = () => {
|
|||
formData.value = {
|
||||
id: undefined,
|
||||
communityName: undefined,
|
||||
areaType: undefined,
|
||||
streetId: undefined,
|
||||
districtId: undefined,
|
||||
streetName: undefined,
|
||||
districtName: undefined,
|
||||
communityAddress: undefined,
|
||||
longitude: undefined,
|
||||
latitude: undefined,
|
||||
propertyCompany: undefined,
|
||||
username: undefined,
|
||||
password: undefined,
|
||||
visitAudit: undefined,
|
||||
gateAudit: undefined
|
||||
}
|
||||
streetList.value = []
|
||||
districtList.value = []
|
||||
isInitializing.value = false
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -1,20 +1,12 @@
|
|||
<template>
|
||||
<el-row :gutter="20">
|
||||
<!-- 左侧街道社区树 -->
|
||||
<el-col :span="4" :xs="24">
|
||||
<ContentWrap class="h-1/1">
|
||||
<CommunityTreeSelect @node-click="handleTreeNodeClick" ref="treeSelectRef" />
|
||||
</ContentWrap>
|
||||
</el-col>
|
||||
<el-col :span="20" :xs="24">
|
||||
<!-- 搜索工作栏 -->
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item label="小区名称" prop="communityName">
|
||||
<el-input
|
||||
|
|
@ -25,9 +17,38 @@
|
|||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="街道名称" prop="streetName">
|
||||
<el-input
|
||||
v-model="queryParams.streetName"
|
||||
placeholder="请输入街道名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="社区名称" prop="districtName">
|
||||
<el-input
|
||||
v-model="queryParams.districtName"
|
||||
placeholder="请输入社区名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
||||
<el-button type="primary" @click="handleQuery">
|
||||
<Icon icon="ep:search" class="mr-5px" /> 查询
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<Icon icon="ep:refresh" class="mr-5px" /> 重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 操作按钮栏 -->
|
||||
<ContentWrap>
|
||||
<div class="mb-15px">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
|
|
@ -37,7 +58,7 @@
|
|||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
type="primary"
|
||||
plain
|
||||
@click="handleExport"
|
||||
:loading="exportLoading"
|
||||
|
|
@ -54,20 +75,18 @@
|
|||
>
|
||||
<Icon icon="ep:delete" class="mr-5px" /> 批量删除
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap :body-style="{ padding: '0' }">
|
||||
<ContentWrap>
|
||||
<el-table
|
||||
row-key="id"
|
||||
v-loading="loading"
|
||||
:data="list"
|
||||
:stripe="false"
|
||||
:stripe="true"
|
||||
:show-overflow-tooltip="true"
|
||||
@selection-change="handleRowCheckboxChange"
|
||||
class="community-table"
|
||||
:header-cell-style="{
|
||||
background: '#1890ff',
|
||||
color: '#ffffff',
|
||||
|
|
@ -86,16 +105,12 @@
|
|||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="序号" align="center" type="index" width="80" />
|
||||
<el-table-column label="小区名称" align="center" prop="communityName" min-width="120" />
|
||||
<el-table-column label="区域类型" align="center" prop="areaType" width="100">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.COMM_AREA_TYPE" :value="scope.row.areaType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="所属街道" align="center" prop="streetName" min-width="120" />
|
||||
<el-table-column label="所属社区" align="center" prop="districtName" min-width="120" />
|
||||
<el-table-column label="小区地址" align="center" prop="communityAddress" min-width="200" />
|
||||
<el-table-column label="房屋数" align="center" prop="houseNum" width="100" />
|
||||
<el-table-column label="常驻人口数" align="center" prop="residentNum" width="120" />
|
||||
<el-table-column label="流动人口数" align="center" prop="floatingNum" width="120" />
|
||||
<el-table-column label="物业人数" align="center" prop="propertyNum" width="100" />
|
||||
<el-table-column label="业委会人数" align="center" prop="committeeNum" width="120" />
|
||||
<el-table-column label="操作" align="center" min-width="120px" fixed="right">
|
||||
|
|
@ -120,17 +135,13 @@
|
|||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-container">
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</ContentWrap>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<CommunityForm ref="formRef" @success="handleFormSuccess" />
|
||||
|
|
@ -142,27 +153,25 @@ import download from '@/utils/download'
|
|||
import { CommunityApi, Community } from '@/api/community/community'
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
import CommunityForm from './CommunityForm.vue'
|
||||
import CommunityTreeSelect from './components/CommunityTreeSelect/index.vue'
|
||||
|
||||
/** 小区信息主表（comm_community） 列表 */
|
||||
defineOptions({ name: 'Community' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage()
|
||||
const { t } = useI18n()
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const list = ref<Community[]>([]) // 列表的数据
|
||||
const total = ref(0) // 列表的总页数
|
||||
const loading = ref(true)
|
||||
const list = ref<Community[]>([])
|
||||
const total = ref(0)
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
communityName: undefined,
|
||||
streetId: undefined,
|
||||
districtId: undefined
|
||||
streetName: undefined,
|
||||
districtName: undefined
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const treeSelectRef = ref() // 树选择组件
|
||||
const exportLoading = ref(false) // 导出的加载中
|
||||
const queryFormRef = ref()
|
||||
const exportLoading = ref(false)
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
|
|
@ -185,38 +194,9 @@ const handleQuery = () => {
|
|||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
treeSelectRef.value?.reset()
|
||||
queryParams.streetId = undefined
|
||||
queryParams.districtId = undefined
|
||||
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 openForm = (type: string, id?: number) => {
|
||||
|
|
@ -225,55 +205,42 @@ const openForm = (type: string, id?: number) => {
|
|||
|
||||
/** 表单提交成功回调 */
|
||||
const handleFormSuccess = async () => {
|
||||
// 刷新列表
|
||||
await getList()
|
||||
// 刷新树
|
||||
await refreshTree()
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
// 删除的二次确认
|
||||
await message.delConfirm()
|
||||
// 发起删除
|
||||
await CommunityApi.deleteCommunity(id)
|
||||
message.success(t('common.delSuccess'))
|
||||
// 刷新列表
|
||||
await getList()
|
||||
// 刷新树
|
||||
await refreshTree()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 批量删除小区信息主表（comm_community） */
|
||||
const handleDeleteBatch = async () => {
|
||||
try {
|
||||
// 删除的二次确认
|
||||
await message.delConfirm()
|
||||
await CommunityApi.deleteCommunityList(checkedIds.value);
|
||||
checkedIds.value = [];
|
||||
await CommunityApi.deleteCommunityList(checkedIds.value)
|
||||
checkedIds.value = []
|
||||
message.success(t('common.delSuccess'))
|
||||
await getList();
|
||||
// 刷新树
|
||||
await refreshTree()
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
const checkedIds = ref<number[]>([])
|
||||
const handleRowCheckboxChange = (records: Community[]) => {
|
||||
checkedIds.value = records.map((item) => item.id!);
|
||||
checkedIds.value = records.map((item) => item.id!)
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
// 导出的二次确认
|
||||
await message.exportConfirm()
|
||||
// 发起导出
|
||||
exportLoading.value = true
|
||||
const data = await CommunityApi.exportCommunity(queryParams)
|
||||
download.excel(data, '小区信息主表（comm_community）.xls')
|
||||
download.excel(data, '小区信息.xls')
|
||||
} catch {
|
||||
} finally {
|
||||
exportLoading.value = false
|
||||
|
|
|
|||
Loading…
Reference in New Issue