完成调查问卷
This commit is contained in:
@@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<div class="residentBox" @click="choiceResidentFun">
|
||||
<slot v-if="$slots.default" />
|
||||
|
||||
<div v-else class="residentBox" @click="choiceResidentFun">
|
||||
<div class="defaultbox" v-if="multipleSelection.length === 0">
|
||||
<span>请选择</span>
|
||||
<el-icon><Search /></el-icon>
|
||||
@@ -27,7 +29,7 @@
|
||||
</nav>
|
||||
|
||||
<!-- 关键:去掉 @selection-change,改用 row-click 实现单选,永不报错! -->
|
||||
<el-table ref="multipleTableRef" :data="tableData" border @row-click="handleRowClick">
|
||||
<el-table ref="multipleTableRef" :data="tableData" border @row-click="handleRowClick" @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" />
|
||||
@@ -63,7 +65,7 @@
|
||||
/>
|
||||
<div>
|
||||
<el-button @click="conback">退出</el-button>
|
||||
<el-button type="primary" @click="confim">确定</el-button>
|
||||
<el-button type="primary" @click="confirm">确定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -90,14 +92,24 @@ interface tableType extends ResidentVO {
|
||||
housePath?: string;
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
userid: string | number;
|
||||
}>();
|
||||
const { userid } = toRefs(props);
|
||||
// 触发方法
|
||||
const emit = defineEmits<{
|
||||
change: [value: string | number];
|
||||
change: [value: string | number | (string | number)[]]; // 支持返回数组
|
||||
}>();
|
||||
|
||||
// ✅ 正确写法:分开定义,避免类型问题
|
||||
const props = defineProps<{
|
||||
userid: string | number | string[] | number[];
|
||||
isMultiple?: boolean;
|
||||
returnvalue?: keyof tableType | '*';
|
||||
}>();
|
||||
|
||||
// ✅ 手动设置默认值(替代 withDefaults)
|
||||
const isMultiple = computed(() => props.isMultiple ?? false);
|
||||
const returnvalue = computed(() => props.returnvalue ?? 'userId'); // 👈 默认 userId
|
||||
|
||||
const { userid } = toRefs(props);
|
||||
|
||||
const dialog = ref({
|
||||
dialogVisible: false,
|
||||
dialogTitle: '选择住户'
|
||||
@@ -123,28 +135,65 @@ const total = ref(0);
|
||||
const loading = ref(false);
|
||||
|
||||
// ==============================================
|
||||
// 最佳单选方案:点击行选中,无报错、无循环、最稳定
|
||||
// ✅ 新增:处理 selection-change(多选专用)
|
||||
// ==============================================
|
||||
function handleRowClick(row) {
|
||||
multipleTableRef.value?.clearSelection();
|
||||
multipleTableRef.value?.toggleRowSelection(row, true);
|
||||
multipleSelection.value = [row];
|
||||
function handleSelectionChange(selection: tableType[]) {
|
||||
if (isMultiple.value) {
|
||||
multipleSelection.value = selection;
|
||||
}
|
||||
}
|
||||
|
||||
// ==============================================
|
||||
// 自动回显 userid
|
||||
// 最佳单选方案:点击行选中,无报错、无循环、最稳定
|
||||
// ==============================================
|
||||
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);
|
||||
}
|
||||
} else {
|
||||
// 单选:原有逻辑保持不变
|
||||
multipleTableRef.value?.clearSelection();
|
||||
multipleTableRef.value?.toggleRowSelection(row, true);
|
||||
multipleSelection.value = [row];
|
||||
}
|
||||
}
|
||||
|
||||
// ==============================================
|
||||
// ✅ 修改:支持多选回显
|
||||
// ==============================================
|
||||
const handleUserSelection = () => {
|
||||
if (!userid.value || !tableData.value.length) return;
|
||||
|
||||
const findItem = tableData.value.find((item) => item.id == userid.value);
|
||||
if (findItem) {
|
||||
multipleSelection.value = [findItem];
|
||||
nextTick(() => {
|
||||
multipleTableRef.value?.clearSelection();
|
||||
multipleTableRef.value?.toggleRowSelection(findItem, true);
|
||||
});
|
||||
}
|
||||
nextTick(() => {
|
||||
multipleTableRef.value?.clearSelection();
|
||||
|
||||
if (isMultiple.value && Array.isArray(userid.value)) {
|
||||
// 多选回显
|
||||
const selectedItems: tableType[] = [];
|
||||
userid.value.forEach((id) => {
|
||||
const findItem = tableData.value.find((item) => item.userId == id);
|
||||
if (findItem) {
|
||||
selectedItems.push(findItem);
|
||||
multipleTableRef.value?.toggleRowSelection(findItem, true);
|
||||
}
|
||||
});
|
||||
multipleSelection.value = selectedItems;
|
||||
} else {
|
||||
// 单选回显(原有逻辑)
|
||||
const findItem = tableData.value.find((item) => item.id == userid.value);
|
||||
if (findItem) {
|
||||
multipleSelection.value = [findItem];
|
||||
multipleTableRef.value?.toggleRowSelection(findItem, true);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
watch(userid, handleUserSelection, { immediate: true });
|
||||
@@ -178,7 +227,6 @@ function resetQuery() {
|
||||
pageSize: 10,
|
||||
ownerRelationship: '', // 👈 这里也改
|
||||
name: '',
|
||||
date: null,
|
||||
type: '', // 👈 这里也改
|
||||
status: '', // 👈 这里也改
|
||||
houseId: null,
|
||||
@@ -195,16 +243,44 @@ function conback() {
|
||||
resetQuery();
|
||||
}
|
||||
|
||||
// 确定
|
||||
function confim() {
|
||||
// ==============================================
|
||||
// ✅ 核心修改:根据 returnvalue 返回对应的值
|
||||
// ==============================================
|
||||
function confirm() {
|
||||
dialog.value.dialogVisible = false;
|
||||
if (multipleSelection.value.length > 0) {
|
||||
emit('change', multipleSelection.value[0].id);
|
||||
if (isMultiple.value) {
|
||||
// 多选
|
||||
if (returnvalue.value === '*') {
|
||||
// ✅ 返回整个对象数组
|
||||
emit('change', multipleSelection.value);
|
||||
} else {
|
||||
// 返回指定字段数组
|
||||
emit(
|
||||
'change',
|
||||
multipleSelection.value.map((item) => item[returnvalue.value as keyof tableType])
|
||||
);
|
||||
}
|
||||
} else {
|
||||
// 单选
|
||||
if (returnvalue.value === '*') {
|
||||
// ✅ 返回整个对象
|
||||
emit('change', multipleSelection.value[0]);
|
||||
} else {
|
||||
// 返回指定字段
|
||||
emit('change', multipleSelection.value[0][returnvalue.value as keyof tableType]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化
|
||||
getlist();
|
||||
|
||||
defineExpose({
|
||||
open: () => {
|
||||
dialog.value.dialogVisible = true;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
/>
|
||||
<div>
|
||||
<el-button @click="conback">退出</el-button>
|
||||
<el-button type="primary" @click="confim"> 确定 </el-button>
|
||||
<el-button type="primary" @click="confirm"> 确定 </el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -69,17 +69,17 @@ interface tableType extends ResidentVO {
|
||||
|
||||
const props = defineProps({
|
||||
userid: {
|
||||
type: String || Number
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
returnvalue: {
|
||||
type: String,
|
||||
default: 'id',
|
||||
required: true
|
||||
default: 'id'
|
||||
}
|
||||
});
|
||||
const { userid } = toRefs(props);
|
||||
const emit = defineEmits<{
|
||||
change: [value: string | number];
|
||||
change: [value: string | number | tableType];
|
||||
}>();
|
||||
|
||||
const dialog = ref({
|
||||
@@ -108,10 +108,10 @@ const loading = ref(false);
|
||||
const treedata = ref([]);
|
||||
|
||||
// 存储选中项
|
||||
const multipleSelection = ref([]);
|
||||
const multipleSelection = ref<tableType[]>([]);
|
||||
|
||||
// 单选点击事件(完全替代 selection-change)
|
||||
const handleRowClick = (row) => {
|
||||
const handleRowClick = (row: tableType) => {
|
||||
multipleTableRef.value?.clearSelection();
|
||||
multipleTableRef.value?.toggleRowSelection(row, true);
|
||||
multipleSelection.value = [row];
|
||||
@@ -177,11 +177,12 @@ function conback() {
|
||||
}
|
||||
|
||||
// 确定
|
||||
function confim() {
|
||||
function confirm() {
|
||||
dialog.value.dialogVisible = false;
|
||||
console.log(multipleSelection.value, props.returnvalue);
|
||||
if (multipleSelection.value.length > 0) {
|
||||
if (props.returnvalue === 'id') {
|
||||
emit('change', multipleSelection.value[0].id);
|
||||
emit('change', multipleSelection.value[0].userId);
|
||||
} else if (props.returnvalue === 'value') {
|
||||
emit('change', multipleSelection.value[0]);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user