zhaoyang/estate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

同步6/16

Browse Source
This commit is contained in:
Zy
2026-06-01 18:12:58 +08:00
parent 38274ab612
commit 50e7b14fd6
183 changed files with 8956 additions and 4803 deletions
Download Patch File Download Diff File Expand all files Collapse all files

304
src/components/Holder/CarUser.vue Normal file
View File

@@ -0,0 +1,304 @@
<template>
<slot name="default" />
<el-dialog append-to-body v-model="dialog.dialogVisible" :title="dialog.dialogTitle" width="1050">
<el-table ref="multipleTableRef" :data="tableData" border @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center" width="55" type="index" />
<el-table-column label="业主" align="center">
<template #default="scope">
<span>{{ scope.row.residentName ? scope.row.residentName : '---' }}</span>
</template>
</el-table-column>
<el-table-column label="性别" align="center">
<template #default="scope">
<dict-tag :options="sys_user_sex" :value="scope.row.gender"></dict-tag>
</template>
</el-table-column>
<el-table-column label="手机号" align="center" prop="phone" />
<el-table-column label="车位" align="center" prop="parkingName" />
</el-table>
<template #footer>
<div class="dialog-footer flex flex-items-center flex-justify-between">
<pagination
style="margin-top: 0"
layout="total, prev, pager, next, jumper"
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getlist"
/>
<div>
<el-button @click="conback">退出</el-button>
<el-button type="primary" @click="confirm"> 确定 </el-button>
</div>
</div>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { getBuildinglistAPI, getHouselistAPI } from '@/api/system/house';
import { BillUserlist, queryResidentList_Cars, queryResidentList_holder } from '@/api/system/SdbBill';
import { ref, nextTick, getCurrentInstance, ComponentInternalInstance, toRefs } from 'vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_user_sex } = toRefs<any>(proxy?.useDict('sys_user_sex'));
const props = defineProps({
returnvalue: {
type: String,
default: 'parkingId'
},
titleName: {
type: String,
default: '选择业主'
},
/** 是否多选 false 单选 */
isMultiple: {
type: Boolean,
default: false
}
});
const { titleName, returnvalue } = toRefs(props);
const userid = ref([]);
// ✅ 手动设置默认值（替代 withDefaults）
const emit = defineEmits<{
change: [value: string | number | (string | number)[] | BillUserlist | BillUserlist[]]; // 支持返回数组
}>();
const dialog = ref({
dialogVisible: false,
dialogTitle: titleName.value
});
const queryParams = ref({
pageNum: 1,
pageSize: 10
});
const multipleTableRef = ref();
const tableData = ref<BillUserlist[]>([]);
const total = ref(0);
const loading = ref(false);
const isFetching = ref(false);
// 存储选中项
const multipleSelection = ref<BillUserlist[]>([]);
const isMultiple = computed(() => props.isMultiple ?? false);
// 优化 handleUserSelection，避免重复查找
const handleUserSelection = () => {
isFetching.value = true;
if (!multipleTableRef.value || !tableData.value.length) {
isFetching.value = false;
return;
}
const rowsToSelect = tableData.value.filter((row) => {
return multipleSelection.value.some((selected) => selected.parkingId === row.parkingId);
});
multipleTableRef.value.clearSelection();
if (rowsToSelect.length > 0) {
nextTick(() => {
rowsToSelect.forEach((row) => {
multipleTableRef.value?.toggleRowSelection(row, true);
});
isFetching.value = false;
});
} else {
isFetching.value = false;
}
};
// ====================== 方法 ======================
// 获取列表
function getlist() {
isFetching.value = true; // 加锁
loading.value = true;
queryResidentList_Cars(queryParams.value)
.then((res) => {
tableData.value = res.rows;
total.value = res.total;
handleUserSelection();
})
.catch((error) => {
console.error('获取用户列表失败:', error);
})
.finally(() => {
loading.value = false;
isFetching.value = false; // 加锁
});
}
/** 楼栋列表 */
const buildinglist = ref([]);
/** 房屋列表 */
const unitlist = ref([]);
/** 筛选房屋类型 */
function handleChangeHouse(val: string) {
getBuildinglistAPI().then((res) => {
buildinglist.value = res.data;
});
}
/** 单元列表 */
function handleChangebuilding(val: string) {
getHouselistAPI(val).then((res) => {
unitlist.value = res.data.units;
});
}
// ==============================================
// ✅ 新增：处理 selection-change（多选专用）
// ==============================================
function handleSelectionChange(selection: BillUserlist[]) {
if (isFetching.value) return;
if (isMultiple.value) {
const currentSelectedIds = new Set(selection.map((item) => item.parkingId));
const otherPageSelections = multipleSelection.value.filter((item) => {
const isCurrentPageItem = tableData.value.some((row) => row.parkingId === item.parkingId);
if (isCurrentPageItem) {
return currentSelectedIds.has(item.parkingId);
} else {
return true;
}
});
// 3. 合并：其他页保留的 + 当前页新选中的
const finalSelection = [...otherPageSelections, ...selection];
// 4. 去重（以防万一）
const uniqueMap = new Map();
finalSelection.forEach((item) => uniqueMap.set(item.parkingId, item));
multipleSelection.value = Array.from(uniqueMap.values());
console.log(multipleSelection.value.map((item) => item.parkingId));
} else {
// --- 单选逻辑 ---
if (selection.length > 0) {
const lastSelected = selection[selection.length - 1];
multipleSelection.value = [lastSelected];
nextTick(() => {
if (selection.length > 1) {
multipleTableRef.value?.clearSelection();
multipleTableRef.value?.toggleRowSelection(lastSelected, true);
}
});
} else {
multipleSelection.value = [];
}
}
}
// ==============================================
// 最佳单选方案：点击行选中，无报错、无循环、最稳定
// ==============================================
// 优化 handleRowClick，避免重复
function handleRowClick(row: BillUserlist) {
if (!multipleTableRef.value) return;
if (isMultiple.value) {
const index = multipleSelection.value.findIndex((item) => item.parkingId === row.parkingId);
if (index > -1) {
// 取消选中
multipleSelection.value.splice(index, 1);
multipleTableRef.value?.toggleRowSelection(row, false);
} else {
// 选中
multipleSelection.value.push(row);
multipleTableRef.value?.toggleRowSelection(row, true);
}
} else {
// 【单选模式】先清空，再选中当前行
multipleSelection.value = [];
multipleTableRef.value.clearSelection();
multipleSelection.value = [row];
multipleTableRef.value.toggleRowSelection(row, true);
}
}
// 重置查询
function resetQuery() {
queryParams.value = {
pageNum: 1,
pageSize: 10
};
getlist();
}
// 退出
function conback() {
dialog.value.dialogVisible = false;
resetQuery();
}
// ==============================================
// ✅ 核心修改：根据 returnvalue 返回对应的值
// ==============================================
function confirm() {
dialog.value.dialogVisible = false;
if (isMultiple.value) {
// 多选
if (returnvalue.value === '*') {
// ✅ 返回整个对象数组
emit('change', multipleSelection.value);
} else {
// 返回指定字段数组
emit(
'change',
multipleSelection.value.map((item) => item[returnvalue.value as keyof BillUserlist])
);
}
} else {
// 单选
if (returnvalue.value === '*') {
// ✅ 返回整个对象
emit('change', multipleSelection.value[0]);
} else {
// 返回指定字段
emit('change', multipleSelection.value[0][returnvalue.value as keyof BillUserlist]);
}
}
multipleSelection.value = [];
multipleTableRef.value.clearSelection();
}
defineExpose({
open: (arr: string[] = []) => {
userid.value = arr;
if (arr && arr.length > 0) {
multipleSelection.value = arr.map(
(id) =>
({
parkingId: id
}) as BillUserlist
);
console.log(multipleSelection.value);
} else {
multipleSelection.value = [];
}
getlist();
dialog.value.dialogVisible = true;
}
});
</script>
<style scoped lang="scss">
.residentBox {
width: 385px;
height: 35px;
line-height: 35px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 0 10px;
.defaultbox {
display: flex;
align-items: center;
justify-content: space-between;
}
cursor: pointer;
&:hover {
background-color: #f4f8ff;
}
}
</style>

251
src/components/Holder/appUser.vue Normal file
View File

@@ -0,0 +1,251 @@
<template>
<slot name="default" />
<el-dialog append-to-body v-model="dialog.dialogVisible" :title="dialog.dialogTitle" width="1050">
<el-table v-loading="loading" ref="multipleTableRef" :data="tableData" border @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="业主" align="center">
<template #default="scope">
<span>{{ scope.row.user_name ? scope.row.user_name : '---' }}</span>
</template>
</el-table-column>
<el-table-column label="手机号" align="center" prop="user_phone" />
</el-table>
<template #footer>
<div class="dialog-footer flex flex-items-center flex-justify-between">
<pagination
style="margin-top: 0"
layout="total, prev, pager, next, jumper"
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getlist"
/>
<div>
<el-button @click="conback">退出</el-button>
<el-button type="primary" @click="confirm"> 确定 </el-button>
</div>
</div>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { BillUserlist } from '@/api/system/SdbBill';
import { ref, nextTick, getCurrentInstance, ComponentInternalInstance, toRefs } from 'vue';
import { getAppUser } from '@/api/system/cars';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps({
returnvalue: {
type: String,
default: '*'
},
titleName: {
type: String,
default: '选择业主'
},
/** 是否多选 false 单选 */
isMultiple: {
type: Boolean,
default: false
}
});
const { titleName, returnvalue } = toRefs(props);
const userid = ref([]);
// ✅ 手动设置默认值（替代 withDefaults）
const emit = defineEmits<{
change: [value: string | number | (string | number)[] | BillUserlist | BillUserlist[]]; // 支持返回数组
}>();
const dialog = ref({
dialogVisible: false,
dialogTitle: titleName.value
});
const queryParams = ref({
pageNum: 1,
pageSize: 10
});
const multipleTableRef = ref();
const tableData = ref<BillUserlist[]>([]);
const total = ref(0);
const loading = ref(false);
const isFetching = ref(false);
// 存储选中项
const multipleSelection = ref<BillUserlist[]>([]);
const isMultiple = computed(() => props.isMultiple ?? false);
// 优化 handleUserSelection，避免重复查找
const handleUserSelection = () => {
isFetching.value = true;
if (!multipleTableRef.value || !tableData.value.length) {
isFetching.value = false;
return;
}
const rowsToSelect = tableData.value.filter((row) => {
return multipleSelection.value.some((selected) => selected.parkingId === row.parkingId);
});
multipleTableRef.value.clearSelection();
if (rowsToSelect.length > 0) {
nextTick(() => {
rowsToSelect.forEach((row) => {
multipleTableRef.value?.toggleRowSelection(row, true);
});
isFetching.value = false;
});
} else {
isFetching.value = false;
}
};
// ====================== 方法 ======================
// 获取列表
function getlist() {
isFetching.value = true; // 加锁
loading.value = true;
getAppUser(queryParams.value)
.then((res) => {
tableData.value = res.rows;
total.value = res.total;
handleUserSelection();
})
.catch((error) => {
console.error('获取用户列表失败:', error);
})
.finally(() => {
loading.value = false;
isFetching.value = false; // 加锁
});
}
// ==============================================
// ✅ 新增：处理 selection-change（多选专用）
// ==============================================
function handleSelectionChange(selection: BillUserlist[]) {
if (isFetching.value) return;
if (isMultiple.value) {
const currentSelectedIds = new Set(selection.map((item) => item.parkingId));
const otherPageSelections = multipleSelection.value.filter((item) => {
const isCurrentPageItem = tableData.value.some((row) => row.parkingId === item.parkingId);
if (isCurrentPageItem) {
return currentSelectedIds.has(item.parkingId);
} else {
return true;
}
});
// 3. 合并：其他页保留的 + 当前页新选中的
const finalSelection = [...otherPageSelections, ...selection];
// 4. 去重（以防万一）
const uniqueMap = new Map();
finalSelection.forEach((item) => uniqueMap.set(item.parkingId, item));
multipleSelection.value = Array.from(uniqueMap.values());
console.log(multipleSelection.value.map((item) => item.parkingId));
} else {
// --- 单选逻辑 ---
if (selection.length > 0) {
const lastSelected = selection[selection.length - 1];
multipleSelection.value = [lastSelected];
nextTick(() => {
if (selection.length > 1) {
multipleTableRef.value?.clearSelection();
multipleTableRef.value?.toggleRowSelection(lastSelected, true);
}
});
} else {
multipleSelection.value = [];
}
}
}
// 重置查询
function resetQuery() {
queryParams.value = {
pageNum: 1,
pageSize: 10
};
getlist();
}
// 退出
function conback() {
dialog.value.dialogVisible = false;
resetQuery();
}
// ==============================================
// ✅ 核心修改：根据 returnvalue 返回对应的值
// ==============================================
function confirm() {
dialog.value.dialogVisible = false;
if (isMultiple.value) {
// 多选
if (returnvalue.value === '*') {
// ✅ 返回整个对象数组
emit('change', multipleSelection.value);
} else {
// 返回指定字段数组
emit(
'change',
multipleSelection.value.map((item) => item[returnvalue.value as keyof BillUserlist])
);
}
} else {
// 单选
if (returnvalue.value === '*') {
// ✅ 返回整个对象
emit('change', multipleSelection.value[0]);
} else {
// 返回指定字段
emit('change', multipleSelection.value[0][returnvalue.value as keyof BillUserlist]);
}
}
multipleSelection.value = [];
multipleTableRef.value.clearSelection();
}
defineExpose({
open: (arr: string[] = []) => {
userid.value = arr;
if (arr && arr.length > 0) {
multipleSelection.value = arr.map(
(id) =>
({
parkingId: id
}) as BillUserlist
);
console.log(multipleSelection.value);
} else {
multipleSelection.value = [];
}
getlist();
dialog.value.dialogVisible = true;
}
});
</script>
<style scoped lang="scss">
.residentBox {
width: 385px;
height: 35px;
line-height: 35px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 0 10px;
.defaultbox {
display: flex;
align-items: center;
justify-content: space-between;
}
cursor: pointer;
&:hover {
background-color: #f4f8ff;
}
}
</style>

186
src/components/Holder/house.vue
View File

@@ -1,8 +1,8 @@
<template>
<slot name="default" />
<el-dialog append-to-body v-model="dialog.dialogVisible" :title="dialog.dialogTitle" width="1250">
<nav class="flex flex-items-center mb-8">
<el-dialog append-to-body v-model="dialog.dialogVisible" :title="dialog.dialogTitle" width="1400">
<nav class="flex flex-items-center mb-8 justify-between">
<!-- <div class="flex flex-items-center">
<div style="width: 70px; text-align: right; padding-right: 10px">房屋类型</div>
<div class="flex-1">
@@ -12,32 +12,40 @@
</div>
</div> -->
<div class="flex flex-items-center">
<div style="width: 50px; text-align: right; padding-right: 10px">楼栋</div>
<div class="flex-1"></div>
<el-select @change="handleChangebuilding" clearable style="width: 140px" v-model="queryParams.buildingId">
<el-option v-for="(item, index) in buildinglist" :key="index" :label="item.buildingName" :value="item.id"></el-option>
</el-select>
</div>
<div class="flex flex-items-center mr-20px">
<div style="width: 50px; text-align: right; padding-right: 10px">单元</div>
<div class="flex-1">
<el-select @change="handleChangeUnit" clearable style="width: 140px" v-model="queryParams.unitNoId">
<el-option v-for="(item, index) in unitlist" :key="index" :label="item.unitNoName" :value="item.unitNoId"></el-option>
<div class="flex flex-items-center">
<div style="width: 50px; text-align: right; padding-right: 10px">楼栋</div>
<div class="flex-1"></div>
<el-select @change="handleChangebuilding" clearable style="width: 120px" v-model="queryParams.buildingId">
<el-option v-for="(item, index) in buildinglist" :key="index" :label="item.buildingName" :value="item.id"></el-option>
</el-select>
</div>
</div>
<div class="flex flex-items-center mr-20px">
<div style="width: 80px; text-align: right; padding-right: 10px">房屋类型</div>
<div class="flex-1">
<el-select clearable @change="handleHouseUseChange" style="width: 140px" v-model="queryParams.houseUseTypeId">
<el-option v-for="(item, index) in houseUseTypeList" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
<div class="flex flex-items-center mr-20px">
<div style="width: 50px; text-align: right; padding-right: 10px">单元</div>
<div class="flex-1">
<el-select @change="handleChangeUnit" clearable style="width: 120px" v-model="queryParams.unitNoId">
<el-option v-for="(item, index) in unitlist" :key="index" :label="item.unitNoName" :value="item.unitNoId"></el-option>
</el-select>
</div>
</div>
</div>
<div class="flex flex-items-center mr-20px">
<div style="width: 80px; text-align: right; padding-right: 10px">业主名称</div>
<div class="flex-1">
<el-input clearable @clear="handleClear" v-model="queryParams.residentName" placeholder="查找业主"></el-input>
<div class="flex flex-items-center mr-20px">
<div style="width: 80px; text-align: right; padding-right: 10px">房屋类型</div>
<div class="flex-1">
<el-select clearable @change="handleHouseUseChange" style="width: 120px" v-model="queryParams.houseUseTypeId">
<el-option v-for="(item, index) in houseUseTypeList" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
</div>
</div>
<div class="flex flex-items-center mr-20px">
<div style="width: 60px; text-align: right; padding-right: 10px">房屋号</div>
<div class="flex-1">
<el-input clearable @clear="handleClear" style="width: 120px" v-model="queryParams.houseNo" placeholder="请输入房屋号"></el-input>
</div>
</div>
<div class="flex flex-items-center mr-20px">
<div style="width: 80px; text-align: right; padding-right: 10px">业主名称</div>
<div class="flex-1">
<el-input clearable @clear="handleClear" style="width: 120px" v-model="queryParams.residentName" placeholder="请输入业主名称"></el-input>
</div>
</div>
</div>
<div>
@@ -45,14 +53,7 @@
<el-button @click="resetQuery">重置</el-button>
</div>
</nav>
<el-table
v-loading="loading"
@row-click="handleRowClick"
ref="multipleTableRef"
:data="tableData"
border
@selection-change="handleSelectionChange"
>
<el-table row-key="houseId" v-loading="loading" ref="multipleTableRef" :data="tableData" border @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center" width="55" type="index" />
<el-table-column label="小区" align="center" prop="villageName" />
@@ -87,7 +88,7 @@
<script setup lang="ts">
import { getBuildinglistAPI, getBuildingOnly, getHouselistAPI } from '@/api/system/house';
import { listHouseUseType } from '@/api/system/houseUse';
import { listHouseUseType, listHouseUseType_add_house } from '@/api/system/houseUse';
import { BillHouse, listBillHouse } from '@/api/system/SdbBill';
import { ref, watch, nextTick, getCurrentInstance, ComponentInternalInstance, toRefs } from 'vue';
@@ -128,7 +129,7 @@ const dialog = ref({
const queryParams = ref({
pageNum: 1,
pageSize: 10,
// houseUseTypeId: null,
houseNo: '',
buildingId: null,
unitNoId: null,
houseUseTypeId: null,
@@ -147,29 +148,35 @@ const isMultiple = computed(() => props.isMultiple ?? false);
// 优化 handleUserSelection，避免重复查找
const handleUserSelection = () => {
if (!tableData.value.length) return;
multipleSelection.value = [];
if (showids.value.length > 0) {
const arr = showids.value;
arr.forEach((item) => {
const target = tableData.value.find((row) => row.houseId == item);
target && multipleSelection.value.push(target);
});
isFetching.value = true;
if (!multipleTableRef.value || !tableData.value.length) {
isFetching.value = false;
return;
}
// 1. 获取当前页所有行的 houseId 集合，用于快速判断
// const currentPageIds = new Set(tableData.value.map((item) => item.houseId));
const rowsToSelect = tableData.value.filter((row) => {
return multipleSelection.value.some((selected) => selected.houseId === row.houseId);
});
multipleTableRef.value.clearSelection();
if (rowsToSelect.length > 0) {
nextTick(() => {
if (multipleTableRef.value) {
multipleTableRef.value.clearSelection();
multipleSelection.value.forEach((item) => {
multipleTableRef.value.toggleRowSelection(item, true);
});
}
rowsToSelect.forEach((row) => {
multipleTableRef.value?.toggleRowSelection(row, true);
});
isFetching.value = false;
});
} else {
isFetching.value = false;
}
};
// ====================== 方法 ======================
const houseUseTypeList = ref([]);
const isFetching = ref(false);
// 获取列表
function getlist() {
isFetching.value = true; // 🔒 加锁：禁止 selection-change 更新数据
loading.value = true;
listBillHouse(queryParams.value)
.then((res) => {
@@ -182,6 +189,7 @@ function getlist() {
})
.finally(() => {
loading.value = false;
isFetching.value = false;
});
}
@@ -225,34 +233,44 @@ function handleChangeUnit() {
// ✅ 新增：处理 selection-change（多选专用）
// ==============================================
function handleSelectionChange(selection: BillHouse[]) {
// 🛑 如果正在获取数据/恢复状态，直接返回，不要更新 multipleSelection
if (isFetching.value) return;
if (isMultiple.value) {
multipleSelection.value = selection;
}
}
// ==============================================
// 最佳单选方案：点击行选中，无报错、无循环、最稳定
// ==============================================
// 优化 handleRowClick，避免重复
function handleRowClick(row: BillHouse) {
if (!multipleTableRef.value) return;
if (isMultiple.value) {
const index = multipleSelection.value.findIndex((item) => item.houseId === row.houseId);
if (index > -1) {
// 取消选中
multipleSelection.value.splice(index, 1);
multipleTableRef.value?.toggleRowSelection(row, false);
} else {
// 选中
multipleSelection.value.push(row);
multipleTableRef.value?.toggleRowSelection(row, true);
}
// 1. 获取当前表格中所有选中行的 ID
const currentSelectedIds = new Set(selection.map((item) => item.houseId));
const otherPageSelections = multipleSelection.value.filter((item) => {
// 判断 item 是否属于当前页
const isCurrentPageItem = tableData.value.some((row) => row.houseId === item.houseId);
if (isCurrentPageItem) {
// 如果是当前页的数据，检查是否在当前 selection 中
return currentSelectedIds.has(item.houseId);
} else {
// 如果不是当前页的数据，保留（假设是之前页选的）
return true;
}
});
// 去重合并
const finalSelection = [...otherPageSelections, ...selection];
// 再次去重以防万一
const uniqueMap = new Map();
finalSelection.forEach((item) => uniqueMap.set(item.houseId, item));
multipleSelection.value = Array.from(uniqueMap.values());
console.log(multipleSelection.value.map((item) => item.houseId));
} else {
// 【单选模式】先清空，再选中当前行
multipleSelection.value = [];
multipleTableRef.value.clearSelection();
multipleSelection.value = [row];
multipleTableRef.value.toggleRowSelection(row, true);
// ✅ 补充：单选模式下，selection-change 触发时，直接取最新的一项
// 这样配合 handleRowClick 的 clearSelection + toggle 就能实现完美单选
if (selection.length > 0) {
const lastSelected = selection[selection.length - 1];
multipleSelection.value = [lastSelected];
nextTick(() => {
if (selection.length > 1) {
multipleTableRef.value?.clearSelection();
multipleTableRef.value?.toggleRowSelection(lastSelected, true);
}
});
} else {
multipleSelection.value = [];
}
}
}
// 重置查询
@@ -263,6 +281,7 @@ function resetQuery() {
houseUseTypeId: null,
buildingId: null,
unitNoId: null,
houseNo: '',
residentName: ''
};
getlist();
@@ -308,15 +327,20 @@ function confirm() {
defineExpose({
open: (showidArray: string[] = []) => {
multipleSelection.value = [];
showids.value = showidArray;
if (showidArray && showidArray.length > 0) {
multipleSelection.value = showidArray.map(
(id) =>
({
houseId: id
}) as BillHouse
);
}
getlist();
dialog.value.dialogVisible = true;
listHouseUseType({
pageNum: 1,
pageSize: 99999
}).then((res) => {
houseUseTypeList.value = res.rows;
listHouseUseType_add_house().then((res) => {
houseUseTypeList.value = res.data;
});
handleChangeHouse();
}

146
src/components/Holder/index.vue
View File

@@ -28,8 +28,7 @@
</div>
</nav>
<!-- 关键：去掉 @selection-change，改用 row-click 实现单选，永不报错！ -->
<el-table ref="multipleTableRef" :data="tableData" border @row-click="handleRowClick" @selection-change="handleSelectionChange">
<el-table ref="multipleTableRef" row-key="id" :data="tableData" border @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center" width="55" type="index" />
<el-table-column label="姓名" align="center" prop="name" />
@@ -38,6 +37,11 @@
<dict-tag :options="com_resident_type" :value="row.type" />
</template>
</el-table-column>
<el-table-column label="与业主关系" align="center" width="95" prop="ownerRelationship">
<template #default="{ row }">
<dict-tag :options="com_resident_relationship" :value="row.ownerRelationship" />
</template>
</el-table-column>
<el-table-column label="状态" align="center" width="85" prop="status">
<template #default="{ row }">
<dict-tag :options="com_certification_status" :value="row.status" />
@@ -45,7 +49,7 @@
</el-table-column>
<el-table-column label="证件号码" align="center" prop="idCard" />
<el-table-column label="手机号码" align="center" prop="phone" />
<el-table-column label="房间" align="center">
<el-table-column label="房间" show-overflow-tooltip align="center">
<template #default="{ row }">
{{ row.housePath }}
</template>
@@ -75,7 +79,7 @@
import { listResident } from '@/api/system/resident';
import { ResidentVO } from '@/api/system/resident/type';
import { getHousePathById } from '@/utils/house';
import { ref, watch, nextTick, getCurrentInstance, ComponentInternalInstance, toRefs } from 'vue';
import { ref, nextTick, getCurrentInstance, ComponentInternalInstance, toRefs } from 'vue';
import { useHouseStore } from '@/store/modules/house';
const houseStore = useHouseStore();
@@ -111,7 +115,7 @@ const props = defineProps<{
// ✅ 手动设置默认值（替代 withDefaults）
const isMultiple = computed(() => props.isMultiple ?? false);
const returnvalue = computed(() => props.returnvalue ?? 'id'); // 👈 默认 userId
const returnvalue = computed(() => props.returnvalue ?? '*'); // 👈 默认 userId
const { userid } = toRefs(props);
@@ -140,50 +144,66 @@ const total = ref(0);
const loading = ref(false);
// ==============================================
// ✅ 新增：处理 selection-change（多选专用）
// ✅ 优化：处理 selection-change
// ==============================================
function handleSelectionChange(selection: tableType[]) {
if (isMultiple.value) {
multipleSelection.value = selection;
}
}
// 多选逻辑：合并当前页选中项和之前页选中项
const currentSelectedIds = new Set(selection.map((item) => item.id));
// ==============================================
// 最佳单选方案：点击行选中，无报错、无循环、最稳定
// ==============================================
function handleRowClick(row) {
if (isMultiple.value) {
// 多选：点击行切换选中状态
const isSelected = multipleSelection.value.some((item) => item.id === row.id);
if (isSelected) {
multipleSelection.value = multipleSelection.value.filter((item) => item.id !== row.id);
multipleTableRef.value?.toggleRowSelection(row, false);
} else {
multipleSelection.value.push(row);
multipleTableRef.value?.toggleRowSelection(row, true);
}
// 过滤掉当前页未选中的旧数据
const otherPageSelections = multipleSelection.value.filter((item) => {
const isCurrentPageItem = tableData.value.some((row) => row.id === item.id);
if (isCurrentPageItem) {
return currentSelectedIds.has(item.id);
}
return true; // 保留其他页的数据
});
// 合并当前页新选中的数据
const finalSelection = [...otherPageSelections, ...selection];
// 去重
const uniqueMap = new Map();
finalSelection.forEach((item) => uniqueMap.set(item.id, item));
multipleSelection.value = Array.from(uniqueMap.values());
} else {
// 单选：原有逻辑保持不变
multipleTableRef.value?.clearSelection();
multipleTableRef.value?.toggleRowSelection(row, true);
multipleSelection.value = [row];
// 单选逻辑：始终只保留最后一个选中的项
if (selection.length > 0) {
// 获取最后选中的那一项
const lastSelected = selection[selection.length - 1];
multipleSelection.value = [lastSelected];
// 关键：如果 selection 长度大于1（比如之前选了一个，现在又选一个，el-table可能暂时上报两个），
// 我们需要手动清除表格中其他的勾选状态，只保留最后一个
nextTick(() => {
if (selection.length > 1) {
multipleTableRef.value?.clearSelection();
multipleTableRef.value?.toggleRowSelection(lastSelected, true);
}
});
} else {
multipleSelection.value = [];
}
}
}
// ==============================================
// ✅ 修改：支持多选回显
// ==============================================
// ✅ 优化：回显逻辑
const handleUserSelection = () => {
if (!userid.value || !tableData.value.length) return;
if (!multipleTableRef.value) return;
// 先清空所有选择
multipleTableRef.value.clearSelection();
multipleSelection.value = [];
if (!props.userid && props.userid !== 0) return;
nextTick(() => {
multipleTableRef.value?.clearSelection();
if (isMultiple.value && Array.isArray(userid.value)) {
if (isMultiple.value && Array.isArray(props.userid)) {
// 多选回显
const selectedItems: tableType[] = [];
userid.value.forEach((id) => {
const findItem = tableData.value.find((item) => item.userId == id);
props.userid.forEach((id) => {
const findItem = tableData.value.find((item) => item.id == id || item.userId == id);
if (findItem) {
selectedItems.push(findItem);
multipleTableRef.value?.toggleRowSelection(findItem, true);
@@ -191,38 +211,43 @@ const handleUserSelection = () => {
});
multipleSelection.value = selectedItems;
} else {
// 单选回显（原有逻辑）
const findItem = tableData.value.find((item) => item.id == userid.value);
// 单选回显
// 注意：props.userid 可能是单个 ID
const targetId = Array.isArray(props.userid) ? props.userid[0] : props.userid;
const findItem = tableData.value.find((item) => item.id == targetId || item.userId == targetId);
if (findItem) {
multipleSelection.value = [findItem];
multipleTableRef.value?.toggleRowSelection(findItem, true);
multipleSelection.value = [findItem];
}
}
});
};
watch(userid, handleUserSelection, { immediate: true });
watch(tableData, handleUserSelection);
// 打开选择框
function choiceResidentFun() {
// 初始化
getlist();
dialog.value.dialogVisible = true;
}
// 获取列表
function getlist() {
loading.value = true;
listResident(queryParams.value).then((res) => {
tableData.value = res.rows;
tableData.value.forEach((item) => {
if (item.houseId !== null) {
const houselist = getHousePathById(treedata.value, item.houseId, 'label');
item.housePath = houselist?.join('-') || '';
}
listResident(queryParams.value)
.then((res) => {
tableData.value = res.rows;
tableData.value.forEach((item) => {
if (item.houseId !== null) {
const houselist = getHousePathById(treedata.value, item.houseId, 'label');
item.housePath = houselist?.join('-') || '';
}
});
handleUserSelection();
total.value = res.total;
})
.finally(() => {
loading.value = false;
});
total.value = res.total;
loading.value = false;
});
}
// 重置查询
@@ -268,6 +293,7 @@ function confirm() {
}
} else {
// 单选
console.log(multipleSelection.value[0], multipleSelection.value);
if (returnvalue.value === '*') {
// ✅ 返回整个对象
emit('change', multipleSelection.value[0]);
@@ -276,13 +302,21 @@ function confirm() {
emit('change', multipleSelection.value[0][returnvalue.value as keyof tableType]);
}
}
} else {
emit('change', null);
}
}
// 初始化
getlist();
defineExpose({
open: () => {
open: (arr) => {
if (arr && arr.length > 0) {
multipleSelection.value = arr.map((id) => ({
id: id
}));
} else {
multipleSelection.value = [];
}
getlist();
dialog.value.dialogVisible = true;
}
});

134
src/components/Holder/repairUser.vue
View File

@@ -2,12 +2,12 @@
<slot v-if="$slots.default" />
<div v-else class="residentBox" @click="choiceResidentFun">
<div class="defaultbox" v-if="multipleSelection.length === 0">
<div class="defaultbox" v-if="multipleSelection.length === 0 && props.username === null">
<span>请选择</span>
<el-icon><Search /></el-icon>
</div>
<div v-else class="overflow-auto overflow-hidden w-full text-ellipsis text-nowrap">
<span>姓名：{{ multipleSelection[0]?.name }}</span>
<span>姓名：{{ multipleSelection[0]?.nickName ?? props.username }}</span>
</div>
</div>
@@ -30,7 +30,7 @@
<el-button @click="resetQuery">重置</el-button>
</div>
</nav>
<el-table @row-click="handleRowClick" ref="multipleTableRef" :data="tableData" border @selection-change="handleSelectionChange">
<el-table ref="multipleTableRef" :data="tableData" border @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center" width="55" type="index" />
<el-table-column label="姓名" align="center" prop="nickName" />
@@ -80,9 +80,13 @@ const props = defineProps({
type: String,
default: ''
},
username: {
type: String,
default: null
},
returnvalue: {
type: String,
default: 'id'
default: 'userId'
},
titleName: {
type: String,
@@ -121,6 +125,7 @@ const multipleTableRef = ref();
const tableData = ref<tableType[]>([]);
const total = ref(0);
const loading = ref(false);
const isFetching = ref(false); // 加锁，防止重复触发 selection-change
// 存储选中项
const multipleSelection = ref<tableType[]>([]);
@@ -129,29 +134,31 @@ const isMultiple = computed(() => props.isMultiple ?? false);
// 优化 handleUserSelection，避免重复查找
const handleUserSelection = () => {
if (!userid.value || !tableData.value.length) return;
multipleSelection.value = [];
if (userid.value.trim() !== '') {
const arr = userid.value.split(',');
arr.forEach((item) => {
const target = tableData.value.find((row) => row.userId == item);
target && multipleSelection.value.push(target);
});
isFetching.value = true;
console.log('获取列表');
if (tableData.value.length <= 0 || !multipleTableRef.value) {
isFetching.value = false;
return;
}
const rowsToSelect = tableData.value.filter((row) => {
return multipleSelection.value.some((selected) => selected.userId === row.userId);
});
multipleTableRef.value.clearSelection();
if (rowsToSelect.length > 0) {
nextTick(() => {
if (multipleTableRef.value) {
multipleTableRef.value.clearSelection();
multipleSelection.value.forEach((item) => {
multipleTableRef.value.toggleRowSelection(item, true);
});
}
rowsToSelect.forEach((row) => {
multipleTableRef.value?.toggleRowSelection(row, true);
});
isFetching.value = false;
});
} else {
isFetching.value = false;
}
};
// 监听
// 监听优化：只在 userid 变化时触发
// watch(userid, handleUserSelection, { immediate: true });
watch(userid, handleUserSelection, { immediate: true });
// watch(tableData, () => {
// if (userid.value) handleUserSelection(); // 仅在有 userid 时重新处理
// });
@@ -160,6 +167,17 @@ const handleUserSelection = () => {
// 打开选择框
function choiceResidentFun() {
dialog.value.dialogVisible = true;
multipleSelection.value = []; // 打开时清空之前的选择
if (typeof props.userid === 'string' && props.userid.trim() !== '') {
multipleSelection.value = [
{
userId: props.userid
} as ResidentVO
];
} else if (Array.isArray(props.userid)) {
multipleSelection.value = props.userid.map((id) => ({ userId: id })) as tableType[];
}
getlist();
}
// 获取列表
@@ -167,8 +185,9 @@ function getlist() {
loading.value = true;
getUserByRoleKey(userType.value)
.then((res) => {
tableData.value = res.data;
tableData.value = res.rows;
total.value = res.total;
handleUserSelection();
})
.catch((error) => {
console.error('获取用户列表失败:', error);
@@ -177,40 +196,45 @@ function getlist() {
loading.value = false;
});
}
// ==============================================
// ✅ 新增：处理 selection-change（多选专用）
// ==============================================
function handleSelectionChange(selection: tableType[]) {
if (isFetching.value) return;
if (isMultiple.value) {
multipleSelection.value = selection;
}
}
// ==============================================
// 最佳单选方案：点击行选中，无报错、无循环、最稳定
// ==============================================
// 优化 handleRowClick，避免重复
function handleRowClick(row: tableType) {
if (!multipleTableRef.value) return;
if (isMultiple.value) {
const index = multipleSelection.value.findIndex((item) => item.id === row.id);
if (index > -1) {
// 取消选中
multipleSelection.value.splice(index, 1);
multipleTableRef.value?.toggleRowSelection(row, false);
} else {
// 选中
multipleSelection.value.push(row);
multipleTableRef.value?.toggleRowSelection(row, true);
}
const currentSelectedIds = new Set(selection.map((item) => item.id));
const otherPageSelections = multipleSelection.value.filter((item) => {
const isCurrentPageItem = tableData.value.some((row) => row.id === item.id);
if (isCurrentPageItem) {
return currentSelectedIds.has(item.id);
} else {
return true;
}
});
// 3. 合并：其他页保留的 + 当前页新选中的
const finalSelection = [...otherPageSelections, ...selection];
// 4. 去重（以防万一）
const uniqueMap = new Map();
finalSelection.forEach((item) => uniqueMap.set(item.id, item));
multipleSelection.value = Array.from(uniqueMap.values());
console.log(multipleSelection.value.map((item) => item.id));
} else {
// 【单选模式】先清空，再选中当前行
multipleSelection.value = [];
multipleTableRef.value.clearSelection();
multipleSelection.value = [row];
multipleTableRef.value.toggleRowSelection(row, true);
// --- 单选逻辑 ---
if (selection.length > 0) {
const lastSelected = selection[selection.length - 1];
multipleSelection.value = [lastSelected];
nextTick(() => {
if (selection.length > 1) {
multipleTableRef.value?.clearSelection();
multipleTableRef.value?.toggleRowSelection(lastSelected, true);
}
});
} else {
multipleSelection.value = [];
}
}
console.log('handleSelectionChange', selection);
}
// 重置查询
function resetQuery() {
@@ -250,23 +274,21 @@ function confirm() {
// 单选
if (returnvalue.value === '*') {
// ✅ 返回整个对象
emit('change', multipleSelection.value[0]);
emit('change', multipleSelection.value[multipleSelection.value.length - 1]);
} else {
// 返回指定字段
emit('change', multipleSelection.value[0][returnvalue.value as keyof tableType]);
emit('change', multipleSelection.value[multipleSelection.value.length - 1][returnvalue.value as keyof tableType]);
}
}
multipleSelection.value = [];
multipleTableRef.value.clearSelection();
}
// 初始化
getlist();
onMounted(() => {
// 初始化
});
defineExpose({
open: () => {
dialog.value.dialogVisible = true;
handleUserSelection();
getlist();
}
});
</script>

76
src/components/Holder/user.vue
View File

@@ -1,7 +1,7 @@
<template>
<slot name="default" />
<el-dialog append-to-body v-model="dialog.dialogVisible" :title="dialog.dialogTitle" width="1050">
<el-table @row-click="handleRowClick" ref="multipleTableRef" :data="tableData" border @selection-change="handleSelectionChange">
<el-table ref="multipleTableRef" :data="tableData" border @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center" width="55" type="index" />
<el-table-column label="业主" align="center">
@@ -49,7 +49,7 @@ const { sys_user_sex } = toRefs<any>(proxy?.useDict('sys_user_sex'));
const props = defineProps({
returnvalue: {
type: String,
default: 'houseId'
default: 'residentId'
},
titleName: {
type: String,
@@ -84,7 +84,7 @@ const multipleTableRef = ref();
const tableData = ref<BillUserlist[]>([]);
const total = ref(0);
const loading = ref(false);
const isFetching = ref(false);
// 存储选中项
const multipleSelection = ref<BillUserlist[]>([]);
@@ -92,29 +92,32 @@ const isMultiple = computed(() => props.isMultiple ?? false);
// 优化 handleUserSelection，避免重复查找
const handleUserSelection = () => {
if (!tableData.value.length) return;
multipleSelection.value = [];
const arr = userid.value;
if (!arr.length) return;
arr.forEach((item) => {
const target = tableData.value.find((row) => row.residentId == item);
target && multipleSelection.value.push(target);
isFetching.value = true;
if (!multipleTableRef.value || !tableData.value.length) {
isFetching.value = false;
return;
}
const rowsToSelect = tableData.value.filter((row) => {
return multipleSelection.value.some((selected) => selected.residentId === row.residentId);
});
nextTick(() => {
if (multipleTableRef.value) {
multipleTableRef.value.clearSelection();
multipleSelection.value.forEach((item) => {
multipleTableRef.value.toggleRowSelection(item, true);
multipleTableRef.value.clearSelection();
if (rowsToSelect.length > 0) {
nextTick(() => {
rowsToSelect.forEach((row) => {
multipleTableRef.value?.toggleRowSelection(row, true);
});
}
});
isFetching.value = false;
});
} else {
isFetching.value = false;
}
};
// ====================== 方法 ======================
// 获取列表
function getlist() {
isFetching.value = true; // 加锁
loading.value = true;
queryResidentList_holder(queryParams.value)
.then((res) => {
@@ -127,6 +130,7 @@ function getlist() {
})
.finally(() => {
loading.value = false;
isFetching.value = false; // 加锁
});
}
@@ -152,8 +156,31 @@ function handleChangebuilding(val: string) {
// ✅ 新增：处理 selection-change（多选专用）
// ==============================================
function handleSelectionChange(selection: BillUserlist[]) {
if (isFetching.value) return;
if (isMultiple.value) {
multipleSelection.value = selection;
const currentSelectedIds = new Set(selection.map((item) => item.residentId));
const otherPageSelections = multipleSelection.value.filter((item) => {
const isCurrentPageItem = tableData.value.some((row) => row.residentId === item.residentId);
if (isCurrentPageItem) {
return currentSelectedIds.has(item.residentId);
} else {
return true;
}
});
// 3. 合并：其他页保留的 + 当前页新选中的
const finalSelection = [...otherPageSelections, ...selection];
// 4. 去重（以防万一）
const uniqueMap = new Map();
finalSelection.forEach((item) => uniqueMap.set(item.residentId, item));
multipleSelection.value = Array.from(uniqueMap.values());
console.log(multipleSelection.value.map((item) => item.residentId));
} else {
// --- 单选逻辑 ---
if (selection.length > 0) {
multipleSelection.value = [selection[selection.length - 1]];
} else {
multipleSelection.value = [];
}
}
}
// ==============================================
@@ -232,6 +259,17 @@ function confirm() {
defineExpose({
open: (arr: string[] = []) => {
userid.value = arr;
if (arr && arr.length > 0) {
multipleSelection.value = arr.map(
(id) =>
({
residentId: id
}) as BillUserlist
);
} else {
multipleSelection.value = [];
}
getlist();
dialog.value.dialogVisible = true;
}