修改查寝管理修改页面的bug

This commit is contained in:
MDSMO
2025-08-28 15:11:56 +08:00
parent 24830a6c48
commit a3f6cce8b4

View File

@@ -2,8 +2,25 @@
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="宿舍号" prop="dormitoryNumber">
<el-input v-model="queryParams.dormitoryNumber" placeholder="请输入宿舍号" clearable
@keyup.enter.native="handleQuery" />
<el-select
v-model="queryParams.dormitoryId"
placeholder="请选择宿舍"
filterable
remote
:remote-method="searchQueryDormitories"
:loading="queryDormLoading"
clearable
@change="handleQueryDormitoryChange"
style="width: 200px"
>
<el-option
v-for="dorm in queryDormitoryOptions"
:key="dorm.id"
:label="dorm.dorm_name"
:value="dorm.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="查寝时间" prop="checkDate">
<el-date-picker clearable v-model="queryParams.checkDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
@@ -63,14 +80,31 @@
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
<!-- 添加或修改查寝管理对话框 -->
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="宿舍号">
<DormSelect v-model="form.dormitoryId" />
<el-form-item label="宿舍号" prop="dormitoryId">
<el-select
v-model="form.dormitoryId"
placeholder="请选择宿舍"
filterable
remote
:remote-method="searchDormitories"
:loading="dormLoading"
clearable
@change="handleDormitoryChange"
style="width: 100%"
>
<el-option
v-for="dorm in dormitoryOptions"
:key="dorm.id"
:label="dorm.dorm_name"
:value="dorm.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="查寝图片" prop="checkImage">
<image-upload v-model="form.checkImage" />
@@ -96,15 +130,11 @@
</template>
<script>
import { addDormitoryCheck, delDormitoryCheck, getDormitoryCheck, listDormitoryCheck, updateDormitoryCheck, sendMail } from "@/api/dormitory/dmsDormitoryCheck/dormitoryCheck";
import DormSelect from "@/views/components/DormSelect.vue";
import { addDormitoryCheck, delDormitoryCheck, getDormitoryCheck, listDormitoryCheck, updateDormitoryCheck, sendMail, listDorm } from "@/api/dormitory/dmsDormitoryCheck/dormitoryCheck";
import { fullLoading } from "@/api/helpFunc";
export default {
name: "DormitoryCheck",
components: {
DormSelect
},
data() {
return {
// 遮罩层
@@ -127,15 +157,22 @@ export default {
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
dormitoryId: null,
dormitoryNumber: null,
checkImage: null,
checkResult: null,
checkDate: null,
},
// 查询宿舍选项列表
queryDormitoryOptions: [],
// 查询宿舍搜索加载状态
queryDormLoading: false,
// 表单参数
form: {},
// 宿舍选项列表
dormitoryOptions: [],
// 宿舍搜索加载状态
dormLoading: false,
// 表单校验
rules: {
dormitoryId: [
@@ -193,15 +230,16 @@ export default {
updateTime: null
};
this.resetForm("form");
this.dormitoryOptions = [];
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.queryDormitoryOptions = [];
this.handleQuery();
},
// 多选框选中数据
@@ -219,10 +257,20 @@ export default {
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const checkId = row.checkId || this.ids
const checkId = row.checkId || this.ids;
getDormitoryCheck(checkId).then(response => {
console.log('获取到的数据:', response.data);
this.form = response.data;
console.log(this.form);
// 如果有宿舍信息,添加到选项中
if (this.form.dormitoryId && this.form.dormitoryNumber) {
this.dormitoryOptions = [{
id: this.form.dormitoryId,
dorm_name: this.form.dormitoryNumber
}];
}
this.open = true;
this.title = "修改查寝管理";
});
@@ -262,7 +310,211 @@ export default {
this.download('dmsDormitoryCheck/dormitoryCheck/export', {
...this.queryParams
}, `dormitoryCheck_${new Date().getTime()}.xlsx`)
}
},
/** 搜索宿舍 */
searchDormitories(query) {
if (query !== '') {
this.dormLoading = true;
// 智能搜索:支持多种搜索方式的并行查询
const searchPromises = [];
// 1. 如果包含数字,尝试房间号搜索
if (/\d/.test(query)) {
const roomMatch = query.match(/\d+/);
if (roomMatch) {
searchPromises.push(
listDorm({ pageNum: 1, pageSize: 50, roomNo: roomMatch[0] })
);
}
}
// 2. 尝试楼栋名称搜索
searchPromises.push(
listDorm({ pageNum: 1, pageSize: 50, buildingName: query })
);
// 3. 尝试园区名称搜索
searchPromises.push(
listDorm({ pageNum: 1, pageSize: 50, parkName: query })
);
// 4. 如果查询长度较长,可能是完整的宿舍名称,尝试分解搜索
if (query.length > 2) {
// 尝试提取可能的园区和楼栋信息
const letterPart = query.match(/[A-Za-z\u4e00-\u9fa5]+/);
const numberPart = query.match(/\d+/);
if (letterPart && numberPart) {
// 同时搜索包含字母部分的楼栋和数字部分的房间号
searchPromises.push(
listDorm({
pageNum: 1,
pageSize: 50,
buildingName: letterPart[0],
roomNo: numberPart[0]
})
);
}
}
// 执行所有搜索并合并结果
Promise.allSettled(searchPromises).then(results => {
let allDormitories = [];
const seenIds = new Set();
results.forEach(result => {
if (result.status === 'fulfilled' && result.value.rows) {
result.value.rows.forEach(dorm => {
if (!seenIds.has(dorm.id)) {
seenIds.add(dorm.id);
allDormitories.push(dorm);
}
});
}
});
// 按相关性排序:优先显示包含查询字符串的结果
allDormitories.sort((a, b) => {
const aName = a.dorm_name.toLowerCase();
const bName = b.dorm_name.toLowerCase();
const queryLower = query.toLowerCase();
const aIncludes = aName.includes(queryLower);
const bIncludes = bName.includes(queryLower);
if (aIncludes && !bIncludes) return -1;
if (!aIncludes && bIncludes) return 1;
return aName.localeCompare(bName);
});
this.dormitoryOptions = allDormitories.slice(0, 20); // 限制显示数量
this.dormLoading = false;
}).catch(() => {
this.dormLoading = false;
});
} else {
this.dormitoryOptions = [];
}
},
/** 处理宿舍选择变化 */
handleDormitoryChange(dormitoryId) {
if (dormitoryId) {
const selectedDorm = this.dormitoryOptions.find(dorm => dorm.id === dormitoryId);
if (selectedDorm) {
this.form.dormitoryNumber = selectedDorm.dorm_name;
console.log('选择宿舍:', {
dormitoryId: dormitoryId,
dormitoryNumber: selectedDorm.dorm_name
});
}
} else {
this.form.dormitoryNumber = null;
}
},
/** 搜索查询宿舍 */
searchQueryDormitories(query) {
if (query !== '') {
this.queryDormLoading = true;
// 智能搜索:支持多种搜索方式的并行查询
const searchPromises = [];
// 1. 如果包含数字,尝试房间号搜索
if (/\d/.test(query)) {
const roomMatch = query.match(/\d+/);
if (roomMatch) {
searchPromises.push(
listDorm({ pageNum: 1, pageSize: 50, roomNo: roomMatch[0] })
);
}
}
// 2. 尝试楼栋名称搜索
searchPromises.push(
listDorm({ pageNum: 1, pageSize: 50, buildingName: query })
);
// 3. 尝试园区名称搜索
searchPromises.push(
listDorm({ pageNum: 1, pageSize: 50, parkName: query })
);
// 4. 如果查询长度较长,可能是完整的宿舍名称,尝试分解搜索
if (query.length > 2) {
// 尝试提取可能的园区和楼栋信息
const letterPart = query.match(/[A-Za-z\u4e00-\u9fa5]+/);
const numberPart = query.match(/\d+/);
if (letterPart && numberPart) {
// 同时搜索包含字母部分的楼栋和数字部分的房间号
searchPromises.push(
listDorm({
pageNum: 1,
pageSize: 50,
buildingName: letterPart[0],
roomNo: numberPart[0]
})
);
}
}
// 执行所有搜索并合并结果
Promise.allSettled(searchPromises).then(results => {
let allDormitories = [];
const seenIds = new Set();
results.forEach(result => {
if (result.status === 'fulfilled' && result.value.rows) {
result.value.rows.forEach(dorm => {
if (!seenIds.has(dorm.id)) {
seenIds.add(dorm.id);
allDormitories.push(dorm);
}
});
}
});
// 按相关性排序:优先显示包含查询字符串的结果
allDormitories.sort((a, b) => {
const aName = a.dorm_name.toLowerCase();
const bName = b.dorm_name.toLowerCase();
const queryLower = query.toLowerCase();
const aIncludes = aName.includes(queryLower);
const bIncludes = bName.includes(queryLower);
if (aIncludes && !bIncludes) return -1;
if (!aIncludes && bIncludes) return 1;
return aName.localeCompare(bName);
});
this.queryDormitoryOptions = allDormitories.slice(0, 20); // 限制显示数量
this.queryDormLoading = false;
}).catch(() => {
this.queryDormLoading = false;
});
} else {
this.queryDormitoryOptions = [];
}
},
/** 处理查询宿舍选择变化 */
handleQueryDormitoryChange(dormitoryId) {
if (dormitoryId) {
const selectedDorm = this.queryDormitoryOptions.find(dorm => dorm.id === dormitoryId);
if (selectedDorm) {
this.queryParams.dormitoryNumber = selectedDorm.dorm_name;
console.log('查询选择宿舍:', {
dormitoryId: dormitoryId,
dormitoryNumber: selectedDorm.dorm_name
});
}
} else {
this.queryParams.dormitoryNumber = null;
}
},
/** 宿舍列表查询方法 */
listDorm
}
};
</script>