suixy
/
Cambodia-TBR-RFID-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(rfidDevice): 优化设备搜索及位置筛选功能

Browse Source 
- 将位置选择从下拉树改为带搜索过滤功能的树结构展示
- 新增位置过滤输入框，支持动态筛选节点
- 点击位置节点即触发查询，提升交互体验
- 调整部分搜索字段显示状态，简化搜索表单
- 修改设备列表中“在线状态”列默认隐藏
- 修正表格及分页布局，兼容两列布局排版
- 注释条码信息和告警级别搜索项，避免误操作
- 改为显示“是否告警”列，提升搜索筛选灵活性
main
zangch@mesnac.com 1 month ago
parent aab1d35cd2
commit ea7d078556
2 changed files with 184 additions and 128 deletions
Show Stats Download Patch File Download Diff File

302
src/views/rfid/rfidDevice/index.vue
Unescape Escape View File

@ -1,132 +1,159 @@
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-row :gutter="10">
<el-col :span="5">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="设备编号" prop="deviceCode">
<el-input v-model="queryParams.deviceCode" placeholder="请输入设备编号" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="设备名称" prop="deviceName">
<el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="所在位置" prop="locationId">
<el-tree-select
v-model="queryParams.locationId"
:data="locationOptions"
:props="{ value: 'id', label: 'locationAlias', children: 'children' }"
value-key="id"
placeholder="请选择所在位置"
check-strictly
clearable
/>
</el-form-item>
<!-- 以下为不常用搜索条件，按需开放 -->
<!--
<el-form-item label="设备地址" prop="deviceAddress">
<el-input v-model="queryParams.deviceAddress" placeholder="请输入设备地址" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="设备端口" prop="devicePort">
<el-input-number v-model="queryParams.devicePort" :min="0" :max="65535" placeholder="请输入设备端口" controls-position="right" />
</el-form-item>
<el-form-item label="读取频率" prop="readFrequency">
<el-input-number v-model="queryParams.readFrequency" :min="0" placeholder="请输入读取频率" controls-position="right" />
</el-form-item>
-->
<el-form-item label="在线状态" prop="onlineStatus">
<el-select v-model="queryParams.onlineStatus" placeholder="请选择在线状态" clearable >
<el-option v-for="dict in online_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item label="告警状态" prop="alarmStatus">
<el-select v-model="queryParams.alarmStatus" placeholder="请选择告警状态" clearable >
<el-option v-for="dict in alarm_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item label="是否标识" prop="isMarked">
<el-select v-model="queryParams.isMarked" placeholder="请选择是否标识" clearable >
<el-option v-for="dict in is_marked" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<template #header>
<el-input
v-model="treeFilterText"
placeholder="请输入位置名称"
clearable
size="small"
@input="handleLocationFilterInput"
/>
</template>
<el-tree
ref="locationTreeRef"
:data="locationOptions"
node-key="id"
:props="{ label: 'locationAlias', children: 'children' }"
default-expand-all
highlight-current
:filter-node-method="filterLocationTreeNode"
@node-click="handleLocationTreeClick"
/>
</el-card>
</div>
</transition>
</el-col>
<el-col :span="19">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="设备编号" prop="deviceCode">
<el-input v-model="queryParams.deviceCode" placeholder="请输入设备编号" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="设备名称" prop="deviceName">
<el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<!-- <el-form-item label="所在位置" prop="locationId">
<el-tree-select
v-model="queryParams.locationId"
:data="locationOptions"
:props="{ value: 'id', label: 'locationAlias', children: 'children' }"
value-key="id"
placeholder="请选择所在位置"
check-strictly
clearable
/>
</el-form-item> -->
<!-- 以下为不常用搜索条件，按需开放 -->
<!--
<el-form-item label="设备地址" prop="deviceAddress">
<el-input v-model="queryParams.deviceAddress" placeholder="请输入设备地址" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="设备端口" prop="devicePort">
<el-input-number v-model="queryParams.devicePort" :min="0" :max="65535" placeholder="请输入设备端口" controls-position="right" />
</el-form-item>
<el-form-item label="读取频率" prop="readFrequency">
<el-input-number v-model="queryParams.readFrequency" :min="0" placeholder="请输入读取频率" controls-position="right" />
</el-form-item>
-->
<!-- <el-form-item label="在线状态" prop="onlineStatus">
<el-select v-model="queryParams.onlineStatus" placeholder="请选择在线状态" clearable >
<el-option v-for="dict in online_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-form-item> -->
<!-- <el-form-item label="告警状态" prop="alarmStatus">
<el-select v-model="queryParams.alarmStatus" placeholder="请选择告警状态" clearable >
<el-option v-for="dict in alarm_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-form-item> -->
<el-form-item label="是否标识" prop="isMarked">
<el-select v-model="queryParams.isMarked" placeholder="请选择是否标识" clearable >
<el-option v-for="dict in is_marked" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</transition>
<el-card shadow="never">
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['rfid:rfidDevice:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['rfid:rfidDevice:edit']">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['rfid:rfidDevice:remove']">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['rfid:rfidDevice:export']">导出</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-card shadow="never">
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['rfid:rfidDevice:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['rfid:rfidDevice:edit']">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['rfid:rfidDevice:remove']">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['rfid:rfidDevice:export']">导出</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" border :data="rfidDeviceList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column type="index" width="55" align="center" label="序号" />
<el-table-column label="设备编号" align="center" prop="deviceCode" v-if="columns[0].visible" />
<el-table-column label="设备名称" align="center" prop="deviceName" v-if="columns[1].visible" />
<el-table-column label="所在位置" align="center" prop="locationAlias" v-if="columns[2].visible" />
<el-table-column label="设备地址" align="center" prop="deviceAddress" v-if="columns[3].visible" />
<el-table-column label="设备端口" align="center" prop="devicePort" v-if="columns[4].visible" />
<el-table-column label="读取频率" align="center" prop="readFrequency" v-if="columns[5].visible" />
<el-table-column label="在线状态" align="center" prop="onlineStatus" v-if="columns[6].visible">
<template #default="scope">
<dict-tag :options="online_status" :value="scope.row.onlineStatus"/>
</template>
</el-table-column>
<el-table-column label="告警状态" align="center" prop="alarmStatus" v-if="columns[7].visible">
<template #default="scope">
<dict-tag :options="alarm_status" :value="scope.row.alarmStatus"/>
</template>
</el-table-column>
<el-table-column label="是否标识" align="center" prop="isMarked" v-if="columns[8].visible">
<template #default="scope">
<dict-tag :options="is_marked" :value="scope.row.isMarked"/>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" v-if="columns[9].visible" />
<el-table-column label="创建人" align="center" prop="createdBy" v-if="columns[10].visible" />
<el-table-column label="创建时间" align="center" prop="createdAt" width="180" v-if="columns[11].visible">
<template #default="scope">
<span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="更新人" align="center" prop="updatedBy" v-if="columns[12].visible" />
<el-table-column label="更新时间" align="center" prop="updatedAt" width="180" v-if="columns[13].visible">
<template #default="scope">
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['rfid:rfidDevice:edit']"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['rfid:rfidDevice:remove']"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<el-table v-loading="loading" border :data="rfidDeviceList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column type="index" width="55" align="center" label="序号" />
<el-table-column label="设备编号" align="center" prop="deviceCode" v-if="columns[0].visible" />
<el-table-column label="设备名称" align="center" prop="deviceName" v-if="columns[1].visible" />
<el-table-column label="所在位置" align="center" prop="locationAlias" v-if="columns[2].visible" />
<el-table-column label="设备地址" align="center" prop="deviceAddress" v-if="columns[3].visible" />
<el-table-column label="设备端口" align="center" prop="devicePort" v-if="columns[4].visible" />
<el-table-column label="读取频率" align="center" prop="readFrequency" v-if="columns[5].visible" />
<el-table-column label="在线状态" align="center" prop="onlineStatus" v-if="columns[6].visible">
<template #default="scope">
<dict-tag :options="online_status" :value="scope.row.onlineStatus"/>
</template>
</el-table-column>
<el-table-column label="告警状态" align="center" prop="alarmStatus" v-if="columns[7].visible">
<template #default="scope">
<dict-tag :options="alarm_status" :value="scope.row.alarmStatus"/>
</template>
</el-table-column>
<el-table-column label="是否标识" align="center" prop="isMarked" v-if="columns[8].visible">
<template #default="scope">
<dict-tag :options="is_marked" :value="scope.row.isMarked"/>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" v-if="columns[9].visible" />
<el-table-column label="创建人" align="center" prop="createdBy" v-if="columns[10].visible" />
<el-table-column label="创建时间" align="center" prop="createdAt" width="180" v-if="columns[11].visible">
<template #default="scope">
<span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="更新人" align="center" prop="updatedBy" v-if="columns[12].visible" />
<el-table-column label="更新时间" align="center" prop="updatedAt" width="180" v-if="columns[13].visible">
<template #default="scope">
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['rfid:rfidDevice:edit']"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['rfid:rfidDevice:remove']"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-card>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-card>
</el-col>
</el-row>
<!-- 添加或修改设备信息对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="rfidDeviceFormRef" :model="form" :rules="rules" label-width="80px">
@ -245,6 +272,9 @@ const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const treeFilterText = ref('');
const locationTreeRef = ref();
const locationOptions = ref<RfidLocationOption[]>([]);
// 列显隐信息
@ -255,7 +285,7 @@ const columns = ref<FieldOption[]>([
{ key: 3, label: '设备地址', visible: true },
{ key: 4, label: '设备端口', visible: true },
{ key: 5, label: '读取频率', visible: true },
{ key: 6, label: '在线状态', visible: true },
{ key: 6, label: '在线状态', visible: false },
{ key: 7, label: '告警状态', visible: true },
{ key: 8, label: '是否标识', visible: false },
{ key: 9, label: '备注', visible: false },
@ -350,6 +380,32 @@ const loadLocationOptions = async () => {
locationOptions.value.push(root);
}
const handleLocationTreeClick = (data: RfidLocationOption) => {
if (data.id === 0) {
queryParams.value.locationId = undefined;
} else {
queryParams.value.locationId = data.id;
}
handleQuery();
}
const filterLocationTreeNode = (value: string, data: RfidLocationOption) => {
if (!value) {
return true;
}
if (data.id === 0) {
return true;
}
return data.locationAlias?.includes(value);
}
const handleLocationFilterInput = (value: string) => {
if (!locationTreeRef.value) {
return;
}
locationTreeRef.value.filter(value);
}
/** 取消按钮 */
const cancel = () => {
reset();

10
src/views/rfid/rfidReadRecord/index.vue
Unescape Escape View File

@ -19,9 +19,9 @@
<el-option v-for="dict in read_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item label="条码信息" prop="barcode">
<!-- <el-form-item label="条码信息" prop="barcode">
<el-input v-model="queryParams.barcode" placeholder="请输入条码信息" clearable @keyup.enter="handleQuery" />
</el-form-item>
</el-form-item> -->
<el-form-item label="记录时间" style="width: 308px">
<el-date-picker
v-model="dateRange"
@ -38,11 +38,11 @@
<el-option v-for="dict in alarm_flag" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item label="告警级别" prop="alarmLevel">
<!-- <el-form-item label="告警级别" prop="alarmLevel">
<el-select v-model="queryParams.alarmLevel" placeholder="请选择告警级别" clearable >
<el-option v-for="dict in alarm_level" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-form-item>
</el-form-item> -->
<!-- 以下为不常用搜索条件，按需开放 -->
<!--
<el-form-item label="告警类型" prop="alarmType">
@ -224,7 +224,7 @@ const columns = ref<FieldOption[]>([
{ key: 2, label: '读取状态', visible: true },
{ key: 3, label: '条码信息', visible: true },
{ key: 4, label: '记录时间', visible: true },
{ key: 5, label: '是否告警', visible: false },
{ key: 5, label: '是否告警', visible: true },
{ key: 6, label: '告警级别', visible: false },
{ key: 7, label: '告警类型', visible: false },
{ key: 8, label: '告警行为', visible: false }

Write Preview
Loading…
Cancel
Save