From ea7d0785562d13fb3cb63ad188aaf0ca7012de41 Mon Sep 17 00:00:00 2001
From: "zangch@mesnac.com" <zangch@mesnac.com>
Date: Fri, 28 Nov 2025 10:07:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(rfidDevice):=20=E4=BC=98=E5=8C=96=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E6=90=9C=E7=B4=A2=E5=8F=8A=E4=BD=8D=E7=BD=AE=E7=AD=9B?=
 =?UTF-8?q?=E9=80=89=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将位置选择从下拉树改为带搜索过滤功能的树结构展示
- 新增位置过滤输入框，支持动态筛选节点
- 点击位置节点即触发查询，提升交互体验
- 调整部分搜索字段显示状态，简化搜索表单
- 修改设备列表中“在线状态”列默认隐藏
- 修正表格及分页布局，兼容两列布局排版
- 注释条码信息和告警级别搜索项，避免误操作
- 改为显示“是否告警”列，提升搜索筛选灵活性
---
 src/views/rfid/rfidDevice/index.vue     | 302 ++++++++++++++----------
 src/views/rfid/rfidReadRecord/index.vue |  10 +-
 2 files changed, 184 insertions(+), 128 deletions(-)

diff --git a/src/views/rfid/rfidDevice/index.vue b/src/views/rfid/rfidDevice/index.vue
index 8c8da00..fdb40b2 100644
--- a/src/views/rfid/rfidDevice/index.vue
+++ b/src/views/rfid/rfidDevice/index.vue
@@ -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();
diff --git a/src/views/rfid/rfidReadRecord/index.vue b/src/views/rfid/rfidReadRecord/index.vue
index 7ed7055..909e61e 100644
--- a/src/views/rfid/rfidReadRecord/index.vue
+++ b/src/views/rfid/rfidReadRecord/index.vue
@@ -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 }