小区调整
parent
c0b729ba24
commit
3e4feedc35
|
|
@ -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 } : {}
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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,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
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue