页面点击搜索没有反应
点击搜索没有反应，下面是代码
<template>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
:inline="true"
v-show="showSearch"
label-width="100px"
>
<el-form-item label="货位" prop="location">
<el-input
v-model="queryParams.params.location"
placeholder="请输入货位名称或编码"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="mac地址" prop="tagId">
<el-input
v-model="queryParams.tagId"
placeholder="请输入标签mac地址"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索
</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置
</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['station:tagLocation:add']"
>新增
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['station:tagLocation:edit']"
>修改
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['station:tagLocation:remove']"
>删除
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-upload2"
size="mini"
@click="handleImport"
v-hasPermi="['station:tagLocation:import']"
>导入
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['station:tagLocation:export']"
>导出
</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"/>
</el-row>
<el-table
v-loading="loading"
:data="tagLocationList"
@selection-change="handleSelectionChange"
@sort-change="sortTable"
border
>
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="主键id" align="center" prop="id" v-if="false"/>
<el-table-column label="货位编码" align="center" prop="locationCode"/>
<el-table-column label="货位名称" align="center" prop="locationName"/>
<el-table-column label="标签mac地址" align="center" prop="tagId"/>
<el-table-column label="库区编码" align="center" prop="regionCode"/>
<el-table-column label="库区名称" align="center" prop="regionName"/>
<el-table-column label="备注" align="center" prop="remark"/>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改货位tag配置信息对话框 -->
<el-dialog
:title="title"
:visible.sync="open"
width="500px"
append-to-body
:close-on-click-modal="false"
>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="仓库" prop="warehouseId">
<el-select
v-model="form.warehouseId"
placeholder="请选择仓库"
size="small"
style="width: 100%"
@change="warehouseChange"
clearable
filterable
>
<el-option
v-for="item in warehouseList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="库区" prop="warehouseRegionId">
<el-select
v-model="form.warehouseRegionId"
placeholder="请选择库区"
size="small"
style="width: 100%"
@change="warehouseRegionChange"
filterable
clearable
>
<el-option
v-for="item in warehouseRegionList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="货位" prop="locationId">
<el-select
v-model="form.locationId"
placeholder="请选择货位"
size="small"
style="width: 100%"
filterable
clearable
>
<el-option
v-for="item in cargoLocationList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="mac地址" prop="tagId">
<el-input v-model="form.tagId" placeholder="请输入标签mac地址"/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input
v-model="form.remark"
type="textarea"
placeholder="请输入内容"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<DataImport
ref="dataImport"
:upload="upload"
width="400px"
@importTemplate="importTemplate"
@success="handleFileSuccess"
@process="handleFileUploadProgress"
/>
</div>
</template>
<script>
import DataImport from "@/components/DataImport";
import {getToken} from "@/utils/auth";
import store from "@/store";
export default {
name: "TagLocation",
data() {
return {
user: store.state.user,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 货位tag配置信息表格数据
tagLocationList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 数据导入
upload: {
// 是否显示弹出层
open: false,
// 弹出层标题
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的数据
updateSupport: 0,
// 设置上传的请求头部
headers: {Authorization: "Bearer " + getToken()},
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/station/tagLocation/importData",
},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
orderByColumn: "",
isAsc: "",
locationId: undefined,
tagId: undefined,
params: {location: undefined},
},
// 表单参数
form: {},
// 表单校验
rules: {
warehouseId: [
{
required: true,
message: "仓库不能为空",
trigger: "blur",
},
],
warehouseRegionId: [
{
required: true,
message: "库区不能为空",
trigger: "blur",
},
],
locationId: [
{
required: true,
message: "货位不能为空",
trigger: "blur",
},
],
tagId: [
{
required: true,
message: "mac地址不能为空",
trigger: "blur",
},
],
},
warehouseList: undefined,
warehouseMap: undefined,
warehouseRegionList: undefined,
cargoLocationList: undefined,
};
},
components: {DataImport},
created() {
this.getList();
},
methods: {
/** 查询货位tag配置信息列表 */
getList() {
this.loading = true;
this.queryParams.deptId =
this.user.station === this.user.company.deptId || this.user.station;
this.$api.listTagLocation(this.queryParams).then((res) => {
this.tagLocationList = res.rows;
this.total = res.total;
this.loading = false;
});
},
getWarehouseList() {
this.$api
.listWarehouse({
deptId:
this.user.station === this.user.company.deptId || this.user.station,
})
.then((res) => {
this.warehouseList = res.rows;
this.warehouseMap = this.warehouseList.reduce((result, item) => {
result[item.id] = item;
return result;
}, {});
});
},
warehouseChange(warehouseId) {
this.form.warehouseRegionId = undefined;
this.form.locationId = undefined;
this.$api
.listWarehouseRegion({warehouseId: warehouseId})
.then((res) => {
this.warehouseRegionList = res.rows;
this.cargoLocationList = undefined;
});
},
warehouseRegionChange(warehouseRegionId) {
this.form.locationId = undefined;
this.$api
.listLocation({warehouseRegionId: warehouseRegionId})
.then((res) => {
this.cargoLocationList = res.rows;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: undefined,
warehouseId: undefined,
warehouseRegionId: undefined,
locationId: undefined,
tagId: undefined,
deptId: undefined,
remark: undefined,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.queryParams.params.location = '';
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
sortTable(column) {
if (column.prop && column.order) {
this.queryParams.sorter = column.prop + "," + column.order;
} else {
// 重置掉之前的搜索条件
this.queryParams.orderByColumn = "";
}
this.getList();
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.getWarehouseList();
this.open = true;
this.title = "添加货位tag配置信息";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
this.getWarehouseList();
const id = row.id || this.ids;
this.$api.getTagLocation(id).then((res) => {
this.warehouseChange(this.form.warehouseId);
this.warehouseRegionChange(this.form.warehouseRegionId);
this.form = res.data;
this.open = true;
this.title = "修改货位tag配置信息";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.id) {
this.$api.updateTagLocation(this.form).then(() => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
this.form.deptId = this.warehouseMap[this.form.warehouseId].deptId;
this.$api.addTagLocation(this.form).then(() => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm("是否确认删除所选货位tag配置信息？").then(() => {
this.$api.delTagLocation(ids).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
});
});
},
/** 导入 */
handleImport() {
this.upload.title = `货位tag配置信息导入`;
this.upload.open = true;
},
/** 导入模板下载 */
importTemplate() {
this.download(
`station/tagLocation/importTemplate`,
{
...this.queryParams,
},
`tagLocation_template_${new Date().getTime()}.xlsx`
);
},
/** 文件上传中处理 */
handleFileUploadProgress() {
this.upload.isUploading = true;
},
/**文件上传成功处理*/
handleFileSuccess(res) {
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.dataImport.dialogClearFiles();
this.$alert(
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
res.msg +
"</div>",
"导入结果",
{dangerouslyUseHTMLString: true}
);
this.getList();
},
/** 导出按钮操作 */
handleExport() {
this.download(
"station/tagLocation/export",
{
...this.queryParams,
},
`tagLocation_${new Date().getTime()}.xlsx`
);
},
},
};
</script>
控制台有报错吗
我看了，应该是你没有改变搜索条件，也就是getList（）这个函数里的条件的值没有变化，导致数据没有变化的
先点下面的第二页，试试有没有变化
<el-input v-model="form.tagId" placeholder="请输入标签mac地址"/>
``` form.tagId改成queryParams.tagId
首先在handleQuery打印下，点击搜素按钮时看看是否进入该按钮
然后在getList里面打印下queryParams看看是否为你搜素的值，
可以把两个 @keyup.enter.native="handleQuery" 先去掉试试
3.如果接口数据是对的，那就是页面没有刷新数据，你需要给el-table加个:key="itemKey",方便当data数据变更的时候提醒el-table更新数据视图。每次更新data数据的时候再加多一句 this.itemKey=Math.random(),这样el-table就晓得啥时更新视图数据
table 上的loading也没变化吗？
watch：看下loading 和 tagLocationList数据变化
getList方法中这个判断逻辑不正确吧，这样写deptId有可能会等于true
this.queryParams.deptId =
this.user.station === this.user.company.deptId || this.user.station;
1.逻辑判断问题
2.通过id获取值的问题
打印res看看里面有没有rows返回值
再打印表格list看看有没有赋值上去
这里赋值 ，有问题
- 请求接口前，打印一下传递的参数是否后端想要的内容，
- F12打开浏览器开发者工具，查看接口传递的 payload 里面的参数是否正确
- 参数传递的没问题，那就是后端的问题
- 这篇文章：页面多次滑动导致页面卡死 也许有你想要的答案，你可以看看