feat: 优化设备状态设置与调整记录展示

- 重构设备状态设置页布局，优化设备选择和批量状态调整交互
- 调整设备列表为单行卡片式展示，并统一待保存记录同步逻辑
- 将状态调整记录表和抽屉表格替换为 ZmTable
- 优化调整记录抽屉样式、分页加载和重复请求逻辑

src/views/pms/device/statuslog/ConfigDeviceStatus.vue

@@ -1,338 +1,320 @@
 <template>
-  <div class="container">
-    <el-row :gutter="20" class="equal-height-row">
-      <!-- 左侧设备列表 -->
-      <el-col :span="12" class="col-wrapper">
-        <div class="card">
-          <h3>{{ t('configPerson.deviceList') }}</h3>
-          <div class="dept-select">
-            <el-tree-select
-              clearable
-              v-model="formData.deptId1"
-              :data="deptList"
-              :props="defaultProps"
-              check-strictly
-              node-key="id"
-              filterable
-              :placeholder="t('configPerson.deviceListHolder')"
-              @node-click="handleDeptDeviceTreeNodeClick"
-            />
+  <div class="status-config-page">
+    <div class="selection-grid">
+      <section class="panel">
+        <div class="panel-header">
+          <div class="panel-title">
+            <span class="panel-marker"></span>
+            <span>{{ t('configPerson.deviceList') }}</span>
           </div>
-
-          <!-- 设备搜索框 -->
-          <div class="filter-input">
-            <el-input
-              v-model="deviceFilterText"
-              :placeholder="t('devicePerson.filterDevicePlaceholder')"
-              clearable
-              prefix-icon="Search"
-            />
-          </div>
-
-          <el-scrollbar height="400px">
-            <el-checkbox-group v-model="selectedDevices"  @change="handleDeviceChange">
-              <div
-                v-for="device in filteredDevices"
-                :key="device.id"
-                class="checkbox-item"
-              >
-                <el-checkbox :label="device.id">
-                  {{ device.deviceCode }} ({{ device.deviceName }}) - {{ device.deviceStatusName }}
-                </el-checkbox>
-              </div>
-            </el-checkbox-group>
-          </el-scrollbar>
+          <el-tag size="small" type="info">{{ filteredDevices.length }} 台</el-tag>
         </div>
-      </el-col>
-
-      <!-- 右侧设备状态 -->
-      <el-col :span="12" class="col-wrapper">
-        <div class="card">
-          <h3>{{ t('configDevice.rp') }}</h3>
-          <div class="dept-select">
-            <el-select
-              v-model="formData.deviceStatus"
-              @change="handleStatusChange"
-              :placeholder="t('deviceStatus.choose')"
-              clearable
-              :disabled="selectedDevices.length === 0"
-            >
-              <el-option
-                v-for="dict in getStrDictOptions(DICT_TYPE.PMS_DEVICE_STATUS)"
-                :key="dict.label"
-                :label="dict.label"
-                :value="dict.value"
-              />
-            </el-select>
-          </div>
 
+        <div class="panel-toolbar">
+          <el-tree-select
+            v-model="formData.deptId"
+            :data="deptList"
+            :props="defaultProps"
+            check-strictly
+            node-key="id"
+            filterable
+            clearable
+            size="default"
+            class="toolbar-control"
+            :placeholder="t('configPerson.deviceListHolder')"
+            @node-click="handleDeptDeviceTreeNodeClick"
+            @clear="handleClearDeptForDevice" />
           <el-input
-            v-model="formData.reason"
-            :placeholder="t('configDevice.rfaHolder')"
-            :disabled="!formData.deviceStatus"
-            class="reason-input"
-            type="textarea"
-            :rows="3"
-            @input="handleReasonInput"
-          />
-
-          <div class="action-bar">
+            v-model="deviceFilterText"
+            :placeholder="t('devicePerson.filterDevicePlaceholder')"
+            clearable
+            size="default"
+            class="toolbar-control">
+            <template #prefix>
+              <Icon icon="ep:search" />
+            </template>
+          </el-input>
+        </div>
 
+        <el-scrollbar class="option-scroll">
+          <el-checkbox-group v-model="selectedDevices" class="option-list">
+            <el-checkbox
+              v-for="device in filteredDevices"
+              :key="device.id"
+              :value="device.id"
+              class="option-item"
+              :class="{ 'is-selected': selectedDevices.includes(device.id) }">
+              <span class="option-content">
+                <span class="option-main">{{ device.deviceCode || '暂无编码' }}</span>
+                <span class="option-sub">{{ device.deviceName || '暂无名称' }}</span>
+                <span class="option-extra">当前状态：{{ device.deviceStatusName || '暂无' }}</span>
+              </span>
+            </el-checkbox>
+          </el-checkbox-group>
+          <el-empty v-if="filteredDevices.length === 0" :image-size="92" description="暂无设备" />
+        </el-scrollbar>
+      </section>
+
+      <section class="panel">
+        <div class="panel-header">
+          <div class="panel-title">
+            <span class="panel-marker"></span>
+            <span>{{ t('configDevice.rp') }}</span>
           </div>
+          <el-tag size="small" type="info">{{ selectedDevices.length }} 台已选</el-tag>
         </div>
-      </el-col>
-    </el-row>
-
-    <!-- 暂存关联列表 -->
-    <div class="temp-list card">
-      <h3>{{ t('configPerson.adjustmentRecords') }}</h3>
-      <el-table :data="tempRelations" style="width: 100%">
-        <el-table-column prop="deviceNames" :label="t('deviceStatus.deviceName')" width="200" >
-          <template #default="{ row }">
-            {{ row.deviceNames }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="status" :label="t('deviceStatus.status')" >
-          <template #default="scope">
-            <dict-tag :type="DICT_TYPE.PMS_DEVICE_STATUS" :value="scope.row.status" />
-          </template>
-        </el-table-column>
-        <el-table-column prop="reason" :label="t('configDevice.reasonForAdjustment')" />
-        <el-table-column :label="t('deviceStatus.operation')" width="120">
-          <template #default="{ row }">
-            <el-button
-              type="danger"
-              size="small"
-              @click="removeTempRelation(row.deviceId)"
-            >
-              {{ t('fault.del') }}
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
 
-      <div class="submit-area">
+        <div class="status-form">
+          <el-form label-position="top" size="default">
+            <el-form-item :label="t('deviceStatus.status')">
+              <el-select
+                v-model="formData.deviceStatus"
+                :placeholder="t('deviceStatus.choose')"
+                clearable
+                class="toolbar-control"
+                :disabled="selectedDevices.length === 0"
+                @change="syncRelations">
+                <el-option
+                  v-for="dict in statusOptions"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value" />
+              </el-select>
+            </el-form-item>
+
+            <el-form-item>
+              <template #label>
+                <span>{{ t('configDevice.reasonForAdjustment') }}</span>
+                <span class="required-star">*</span>
+              </template>
+              <el-input
+                v-model="formData.reason"
+                :placeholder="t('configDevice.rfaHolder')"
+                type="textarea"
+                :rows="8"
+                resize="none"
+                :disabled="!formData.deviceStatus"
+                @input="syncRelations" />
+            </el-form-item>
+          </el-form>
+        </div>
+      </section>
+    </div>
+
+    <section class="panel record-panel">
+      <div class="panel-header">
+        <div class="panel-title">
+          <span class="panel-marker"></span>
+          <span>{{ t('configPerson.adjustmentRecords') }}</span>
+        </div>
         <el-button
           type="primary"
-          size="large"
-          @click="submitRelations"
+          size="default"
           :disabled="isSaveDisabled"
-        >
+          @click="submitRelations">
+          <Icon icon="ep:check" class="mr-5px" />
           {{ t('iotMaintain.save') }}
         </el-button>
       </div>
-    </div>
+
+      <ZmTable
+        :data="tempRelations"
+        :loading="false"
+        :show-border="true"
+        settings-cache-key="pms-device-status-config-record"
+        class="record-table">
+        <ZmTableColumn prop="deviceNames" :label="t('deviceStatus.deviceName')" min-width="240" />
+        <ZmTableColumn prop="status" :label="t('deviceStatus.status')" min-width="140">
+          <template #default="{ row }">
+            <dict-tag :type="DICT_TYPE.PMS_DEVICE_STATUS" :value="row.status" />
+          </template>
+        </ZmTableColumn>
+        <ZmTableColumn
+          prop="reason"
+          :label="t('configDevice.reasonForAdjustment')"
+          min-width="280"
+          align="left">
+          <template #default="{ row }">
+            <span>{{ row.reason || '未填写调整原因' }}</span>
+          </template>
+        </ZmTableColumn>
+        <ZmTableColumn :label="t('deviceStatus.operation')" width="120" fixed="right" action>
+          <template #default="{ row }">
+            <el-button type="danger" link size="default" @click="removeTempRelation(row.deviceId)">
+              <Icon icon="ep:delete" class="mr-4px" />
+              {{ t('fault.del') }}
+            </el-button>
+          </template>
+        </ZmTableColumn>
+      </ZmTable>
+    </section>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { computed, onMounted, reactive, ref, unref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
-import {defaultProps, handleTree} from "@/utils/tree";
-import * as DeptApi from "@/api/system/dept";
-import {IotDeviceApi, IotDeviceVO} from "@/api/pms/device";
-import {DICT_TYPE, getStrDictOptions} from "@/utils/dict";
-import { useRouter, useRoute } from 'vue-router'
-import { useTagsViewStore } from "@/store/modules/tagsView";
-const router = useRouter()
-const route = useRoute() // 获取路由参数
+import { useRoute, useRouter } from 'vue-router'
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+import * as DeptApi from '@/api/system/dept'
+import { IotDeviceApi, type IotDeviceVO } from '@/api/pms/device'
+import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import { defaultProps, handleTree } from '@/utils/tree'
 
-const { t } = useI18n() // 国际化
 defineOptions({ name: 'ConfigDeviceStatus' })
 
-const simpleDevices = ref<IotDeviceVO[]>([])
-const currentStatus = ref<string>('')
-const adjustReason = ref<string>('')
-const deptList = ref<Tree[]>([]) // 树形结构
-const selectedDevices = ref<number[]>([]) // 改为数组存储多选
-// 获取当前设备对象
-const currentDevice = computed(() => {
-  return simpleDevices.value.find(d => d.id === selectedDevice.value)
-})
-
-const { delView } = useTagsViewStore() // 视图操作
-
-const formData = ref({
-  id: undefined,
-  deviceCode: undefined,
-  deviceName: undefined,
-  brand: undefined,
-  model: undefined,
-  deptId: undefined as string | undefined,
-  deptId1: undefined as string | undefined,
-  deviceStatus: undefined,
-  reason: '',
-  assetProperty: undefined,
-  picUrl: undefined,
-})
-
-const queryParams = reactive({
-  deptId1: formData.value.deptId1,
-  deptId: formData.value.deptId,
-})
-
-const emit = defineEmits(['success', 'node-click']) // 定义 success 树点击 事件，用于操作成功后的回调
-
-// 响应式数据
-const selectedDevice = ref<number>(0)
-const selectedDept = ref('')
-const tempRelations = ref<Array<{
+type TempRelation = {
   deviceId: number
   deviceNames: string
   status: string
-  statusLabel: string
   reason: string
-}>>([])
-
-// 设备切换时清空状态
-const handleDeviceChange = () => {
-  currentStatus.value = ''
-  adjustReason.value = ''
-  // 尝试从暂存记录恢复数据
-  const existRecord = tempRelations.value.find(r => r.deviceId === selectedDevice.value)
-  if (existRecord) {
-    currentStatus.value = existRecord.deviceStatus
-    adjustReason.value = existRecord.reason
-  }
 }
 
-// 修改watch监听
-watch(selectedDevices, (newVal, oldVal) => {
-  // 删除取消选择的设备
-  const removedDevices = oldVal.filter(id => !newVal.includes(id))
-  removedDevices.forEach(deviceId => {
-    const index = tempRelations.value.findIndex(r => r.deviceId === deviceId)
-    if (index > -1) tempRelations.value.splice(index, 1)
-  })
+type ConfigFormData = {
+  deptId?: number
+  deviceStatus?: string
+  reason: string
+}
 
-  // 自动应用当前状态到新选设备
-  if (formData.value.deviceStatus && formData.value.reason) {
-    saveCurrentRelation()
-  }
+const router = useRouter()
+const route = useRoute()
+const { t } = useI18n()
+const { delView } = useTagsViewStore()
+const { ZmTable, ZmTableColumn } = useTableComponents<TempRelation>()
+
+const deptList = ref<Tree[]>([])
+const simpleDevices = ref<IotDeviceVO[]>([])
+const selectedDevices = ref<number[]>([])
+const tempRelations = ref<TempRelation[]>([])
+const deviceFilterText = ref('')
+
+const formData = reactive<ConfigFormData>({
+  deptId: undefined,
+  deviceStatus: undefined,
+  reason: ''
 })
 
-// 修改保存方法
-const saveCurrentRelation = () => {
-  if (!formData.value.deviceStatus /*|| !formData.value.reason*/) return
+const statusOptions = computed(() => getStrDictOptions(DICT_TYPE.PMS_DEVICE_STATUS))
 
-  const statusDict = getStrDictOptions(DICT_TYPE.PMS_DEVICE_STATUS)
-    .find(d => d.value === formData.value.deviceStatus)
+const filteredDevices = computed(() => {
+  const searchText = deviceFilterText.value.toLowerCase().trim()
+  if (!searchText) return simpleDevices.value
 
-  selectedDevices.value.forEach(deviceId => {
-    const device = simpleDevices.value.find(d => d.id === deviceId)
-    if (!device) return
+  return simpleDevices.value.filter((device) => {
+    return (
+      (device.deviceCode || '').toLowerCase().includes(searchText) ||
+      (device.deviceName || '').toLowerCase().includes(searchText) ||
+      (device.deviceStatusName || '').toLowerCase().includes(searchText)
+    )
+  })
+})
 
-    const newRelation = {
-      deviceId,
-      deviceNames: `${device.deviceCode} (${device.deviceName})`,
-      status: formData.value.deviceStatus!,
-      statusLabel: statusDict?.label || '未知状态',
-      reason: formData.value.reason
-    }
+const isSaveDisabled = computed(() => {
+  return (
+    tempRelations.value.length === 0 ||
+    !formData.reason.trim() ||
+    tempRelations.value.some((item) => !item.status || !item.reason?.trim())
+  )
+})
 
-    const existIndex = tempRelations.value.findIndex(r => r.deviceId === deviceId)
-    if (existIndex > -1) {
-      tempRelations.value[existIndex] = newRelation
-    } else {
-      tempRelations.value.push(newRelation)
+watch(
+  selectedDevices,
+  (newVal, oldVal) => {
+    const removedDeviceIds = oldVal.filter((id) => !newVal.includes(id))
+    tempRelations.value = tempRelations.value.filter(
+      (relation) => !removedDeviceIds.includes(relation.deviceId)
+    )
+
+    if (newVal.length === 0) {
+      formData.deviceStatus = undefined
+      formData.reason = ''
+      tempRelations.value = []
+      return
     }
-  })
+
+    syncRelations()
+  },
+  { deep: true }
+)
+
+const getDeviceLabel = (device: IotDeviceVO) => {
+  return `${device.deviceCode || '暂无编码'}（${device.deviceName || '暂无名称'}）`
 }
 
-/** 处理 部门-设备 树 被点击 */
-const handleDeptDeviceTreeNodeClick = async (row: { [key: string]: any }) => {
-  emit('node-click', row)
-  formData.value.deptId1 = row.id
-  await getDeviceList()
+const syncRelations = () => {
+  if (!formData.deviceStatus) {
+    tempRelations.value = []
+    return
+  }
+
+  const selectedDeviceSet = new Set(selectedDevices.value)
+  tempRelations.value = simpleDevices.value
+    .filter((device) => selectedDeviceSet.has(device.id))
+    .map((device) => ({
+      deviceId: device.id,
+      deviceNames: getDeviceLabel(device),
+      status: formData.deviceStatus!,
+      reason: formData.reason
+    }))
 }
 
-/** 获得 部门下的设备 列表 */
 const getDeviceList = async () => {
   try {
-    const params = { deptId: formData.value.deptId1 }
-    const data = await IotDeviceApi.simpleDevices(params)
+    const data = await IotDeviceApi.simpleDevices({ deptId: formData.deptId })
     simpleDevices.value = data || []
+    selectedDevices.value = selectedDevices.value.filter((id) =>
+      simpleDevices.value.some((device) => device.id === id)
+    )
+    syncRelations()
   } catch (error) {
     simpleDevices.value = []
-    console.error('获取设备列表失败:', error)
+    ElMessage.error('获取设备列表失败')
   }
 }
 
-// 添加计算属性：判断保存按钮是否禁用
-const isSaveDisabled = computed(() => {
-  // 当没有调整记录或调整原因为空时禁用按钮
-  return tempRelations.value.length === 0 || !formData.value.reason.trim();
-});
-
-// 添加状态变更处理
-const handleStatusChange = () => {
-  if (selectedDevices.value.length > 0) {
-    saveCurrentRelation()
-  }
+const handleDeptDeviceTreeNodeClick = async (row: Tree) => {
+  formData.deptId = row.id
+  selectedDevices.value = []
+  deviceFilterText.value = ''
+  await getDeviceList()
 }
 
-// 新增输入处理方法
-const handleReasonInput = (value: string) => {
-  formData.value.reason = value
-  if (selectedDevices.value.length > 0 && formData.value.deviceStatus) {
-    saveCurrentRelation()
-  }
+const handleClearDeptForDevice = () => {
+  simpleDevices.value = []
+  selectedDevices.value = []
+  tempRelations.value = []
+  deviceFilterText.value = ''
 }
 
-// 添加多设备判断方法
-const isMultiDevice = (row: any) => {
-  return selectedDevices.value.includes(row.deviceId) && selectedDevices.value.length > 1
+const removeTempRelation = (deviceId: number) => {
+  selectedDevices.value = selectedDevices.value.filter((id) => id !== deviceId)
+  tempRelations.value = tempRelations.value.filter((relation) => relation.deviceId !== deviceId)
 }
 
-// 设备过滤文本
-const deviceFilterText = ref('')
-
-// 计算属性：过滤设备列表
-const filteredDevices = computed(() => {
-  const searchText = deviceFilterText.value.toLowerCase().trim()
-  if (!searchText) return simpleDevices.value
-
-  return simpleDevices.value.filter(device => {
-    return (
-      (device.deviceCode || '').toLowerCase().includes(searchText) ||
-      (device.deviceName || '').toLowerCase().includes(searchText)
-    )
-  })
-})
-
-// 修改删除方法
-const removeTempRelation = (deviceId: number) => {
-  // 从暂存列表删除
-  tempRelations.value = tempRelations.value.filter(r => r.deviceId !== deviceId)
+const submitRelations = async () => {
+  if (!selectedDevices.value.length) {
+    ElMessage.error(t('iotMaintain.deviceHolder'))
+    return
+  }
 
-  // 从选中设备中移除
-  selectedDevices.value = selectedDevices.value.filter(id => id !== deviceId)
+  if (!formData.deviceStatus) {
+    ElMessage.error(t('deviceStatus.choose'))
+    return
+  }
 
-  // 如果当前表单状态为空，尝试恢复其他设备的状态
-  if (!formData.value.deviceStatus && tempRelations.value.length > 0) {
-    const firstRelation = tempRelations.value[0]
-    formData.value.deviceStatus = firstRelation.status
-    formData.value.reason = firstRelation.reason
+  if (tempRelations.value.some((item) => !item.reason?.trim())) {
+    ElMessage.error('请填写所有设备的调整原因')
+    return
   }
-}
 
-// 提交时处理数据
-const submitRelations = async () => {
   try {
-    // 检查是否有空的原因
-    const hasEmptyReason = tempRelations.value.some(
-      item => !item.reason?.trim()
-    )
-    if (hasEmptyReason) {
-      ElMessage.error('请填写所有设备的调整原因')
-      return
-    }
-    // 转换数据结构
-    const submitData = tempRelations.value.map(r => ({
-      deviceId: r.deviceId,
-      status: r.status,
-      reason: r.reason
+    const submitData = tempRelations.value.map((relation) => ({
+      deviceId: relation.deviceId,
+      status: relation.status,
+      reason: relation.reason
     }))
+
     await IotDeviceApi.saveDeviceStatuses(submitData)
     ElMessage.success('提交成功')
     tempRelations.value = []
@@ -343,168 +325,200 @@ const submitRelations = async () => {
   }
 }
 
-/** 初始化 */
+const findDeptNode = (nodes: Tree[], deptId: number): Tree | null => {
+  for (const node of nodes) {
+    if (node.id === deptId) return node
+
+    if (node.children?.length) {
+      const found = findDeptNode(node.children, deptId)
+      if (found) return found
+    }
+  }
+
+  return null
+}
+
 onMounted(async () => {
   try {
-    // 初始化部门树
     const deptData = await DeptApi.getSimpleDeptList()
-    deptList.value = handleTree(deptData) // 转换为树形结构
-
-    // 从路由参数获取部门ID
-    const routeDeptId = route.query.deptId ? Number(route.query.deptId) : null
-    let targetDeptId: number
-
-    if (routeDeptId) {
-      // 如果路由参数有部门ID，使用路由参数中的部门ID
-      targetDeptId = routeDeptId
-    } else if (deptList.value.length > 0) {
-      // 否则使用第一个节点
-      targetDeptId = deptList.value[0].id
-    } else {
-      console.warn("部门树数据为空，无法设置默认值")
+    deptList.value = handleTree(deptData)
+
+    const routeDeptId = route.query.deptId ? Number(route.query.deptId) : undefined
+    const targetDeptId = routeDeptId || deptList.value[0]?.id
+
+    if (!targetDeptId) {
+      ElMessage.warning('暂无可用部门数据')
       return
     }
 
-    // 设置默认选中的部门（转换后树的第一个节点）
-    // if (deptList.value.length > 0) {
-      // 获取转换后树的第一个节点
-      // const firstRootNode = deptList.value[0]
-
-    // 设置设备部门的默认值
-    formData.value.deptId1 = targetDeptId
-    // 触发设备部门的节点点击事件，加载设备列表
+    formData.deptId = targetDeptId
     const targetDeptNode = findDeptNode(deptList.value, targetDeptId)
-    // 触发设备部门的节点点击事件，加载设备列表
     if (targetDeptNode) {
       await handleDeptDeviceTreeNodeClick(targetDeptNode)
+    } else {
+      await getDeviceList()
     }
-    // } else {
-      // console.warn("部门树数据为空，无法设置默认值")
-    // }
   } catch (error) {
-    console.error("初始化部门树失败:", error)
-    ElMessage.error("加载部门数据失败")
+    ElMessage.error('加载部门数据失败')
   }
 })
+</script>
 
-// 在部门树中查找指定ID的节点
-const findDeptNode = (nodes: Tree[], deptId: number): Tree | null => {
-  for (const node of nodes) {
-    if (node.id === deptId) {
-      return node
-    }
-    if (node.children && node.children.length > 0) {
-      const found = findDeptNode(node.children, deptId)
-      if (found) return found
-    }
-  }
-  return null
+<style lang="scss" scoped>
+.status-config-page {
+  min-height: calc(
+    100vh - 20px - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height)
+  );
+  background: #f5f7fb;
 }
 
-</script>
-
-<style scoped>
-.container {
-  padding: 20px;
+.selection-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
 }
 
-.card {
-  border: 1px solid #ebeef5;
-  border-radius: 4px;
-  padding: 20px;
-  margin-bottom: 20px;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
+.panel {
   overflow: hidden;
-  background: white;
-  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
-  transition: box-shadow 0.2s;
+  background: var(--el-bg-color);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 6px;
+  box-shadow: 0 8px 24px rgb(15 35 70 / 5%);
 }
 
-.list-item {
-  padding: 8px 12px;
-  border-bottom: 1px solid #f0f0f0;
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 56px;
+  padding: 0 18px;
+  background: #f4f9ff;
+  border-bottom: 1px solid var(--el-border-color-lighter);
 }
 
-.col-wrapper {
+.panel-title {
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
 }
 
-.dept-select {
-  margin-bottom: 20px;
+.panel-marker {
+  width: 4px;
+  height: 18px;
+  margin-right: 10px;
+  background: var(--el-color-primary);
+  border-radius: 4px;
 }
 
-.user-list {
-  margin-bottom: 20px;
-  border: 1px solid #ebeef5;
-  border-radius: 4px;
-  padding: 10px;
+.panel-toolbar {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 12px;
+  padding: 16px 18px 0;
 }
 
-.action-bar {
-  text-align: right;
+.toolbar-control {
+  width: 100%;
 }
 
-.temp-list {
-  margin-top: 20px;
+.status-form {
+  padding: 18px;
 }
 
-.submit-area {
-  margin-top: 20px;
-  text-align: center;
+.option-scroll {
+  height: 430px;
+  padding: 14px 18px 18px;
 }
 
-h3 {
-  margin: 0 0 15px 0;
-  color: #303133;
+.option-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
 
-.radio-item {
-  width: 100%;
-  padding: 8px 12px;
-  border-bottom: 1px solid #f0f0f0;
+.option-item {
+  display: flex;
+  align-items: flex-start;
+  height: auto;
+  min-width: 0;
+  padding: 12px;
+  cursor: pointer;
+  background: var(--el-fill-color-blank);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 6px;
+  transition:
+    border-color 0.2s,
+    background-color 0.2s,
+    box-shadow 0.2s;
+
+  &:hover,
+  &.is-selected {
+    background: #f7fbff;
+    border-color: var(--el-color-primary-light-5);
+    box-shadow: 0 6px 18px rgb(64 158 255 / 10%);
+  }
+
+  :deep(.el-checkbox__input) {
+    margin-top: 2px;
+  }
+
+  :deep(.el-checkbox__label) {
+    flex: 1;
+    min-width: 0;
+    padding-left: 10px;
+  }
 }
 
-.radio-item .el-radio {
+.option-content {
+  display: grid;
+  align-items: center;
+  grid-template-columns: minmax(90px, 0.7fr) minmax(120px, 1fr) minmax(150px, 1.2fr);
+  gap: 12px;
   width: 100%;
-  height: 100%;
+  min-width: 0;
 }
 
-.radio-item .el-radio__label {
-  display: block;
-  white-space: nowrap;
+.option-main,
+.option-sub,
+.option-extra {
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.equal-height-row {
-  display: flex;
-  align-items: stretch;
+.option-main {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
 }
 
-.el-scrollbar {
-  flex: 1;
+.option-sub,
+.option-extra {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
 }
 
-.reason-input {
-  margin-top: 20px;
+.record-panel {
+  padding-bottom: 18px;
+  margin-top: 16px;
 }
 
-/* 添加多设备标签样式 */
-.el-tag {
-  margin-left: 8px;
-  vertical-align: middle;
+.record-table {
+  width: calc(100% - 36px);
+  margin: 18px;
 }
 
-.filter-input {
-  margin-bottom: 15px;
+.required-star {
+  margin-left: 4px;
+  color: var(--el-color-danger);
 }
 
-.no-data {
-  padding: 20px;
-  text-align: center;
-  color: #999;
+@media (width <= 1180px) {
+  .selection-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
 }
 </style>

src/views/pms/device/statuslog/DeviceStatusLogDrawer.vue

@@ -1,61 +1,119 @@
 <template>
   <el-drawer
-    :title="t('configDevice.adjustmentRecords')"
     :append-to-body="true"
     :model-value="modelValue"
-    @update:model-value="$emit('update:modelValue', $event)"
     :show-close="false"
     direction="rtl"
     :size="computedSize"
+    class="status-log-drawer"
     :before-close="handleClose"
-  >
-    <template v-if="deviceId">
-      <div v-loading="loading" style="height: 100%">
-        <el-table :data="deviceStatuses" style="width: 100%">
-          <el-table-column prop="deviceName" :label="t('deviceStatus.deviceName')" width="180" />
-          <el-table-column prop="deviceCode" :label="t('deviceStatus.deviceCode')" width="180" />
-          <el-table-column prop="oldStatus" :label="t('deviceStatus.beforeStatus')" width="180" >
-            <template #default="scope">
-              <dict-tag :type="DICT_TYPE.PMS_DEVICE_STATUS" :value="scope.row.oldStatus" />
-            </template>
-          </el-table-column>
-          <el-table-column prop="newStatus" :label="t('deviceStatus.afterStatus')" width="180" >
-            <template #default="scope">
-              <dict-tag :type="DICT_TYPE.PMS_DEVICE_STATUS" :value="scope.row.newStatus" />
-            </template>
-          </el-table-column>
-          <el-table-column prop="reason" :label="t('configDevice.reasonForAdjustment')" width="180" />
-          <el-table-column prop="creatorName" :label="t('deviceStatus.adjuster')" width="180" />
-          <el-table-column
-            :label="t('deviceStatus.adjustTime')"
-            align="center"
-            prop="createTime"
-            width="180"
-            :formatter="dateFormatter"
-          />
-        </el-table>
-        <!-- 分页 -->
-        <Pagination
-          :total="total"
-          v-model:page="queryParams.pageNo"
-          v-model:limit="queryParams.pageSize"
-          @pagination="handlePagination"
-        />
+    @update:model-value="$emit('update:modelValue', $event)">
+    <template #header>
+      <div class="drawer-header">
+        <div class="drawer-header__main">
+          <div class="drawer-header__icon">
+            <Icon icon="ep:sort" :size="22" />
+          </div>
+          <div>
+            <div class="drawer-title">{{ t('configDevice.adjustmentRecords') }}</div>
+            <div class="drawer-subtitle">查看设备状态调整前后的变化记录</div>
+          </div>
+        </div>
+        <el-button circle size="default" @click="handleClose">
+          <Icon icon="ep:close" />
+        </el-button>
       </div>
     </template>
 
+    <template v-if="deviceId">
+      <div v-loading="loading" class="drawer-body">
+        <section class="info-card record-card">
+          <div class="info-card__header">
+            <div class="info-card__title">
+              <span class="info-card__marker"></span>
+              <span>{{ t('configDevice.adjustmentRecords') }}</span>
+            </div>
+            <span class="record-total">共 {{ total }} 条</span>
+          </div>
+
+          <div class="info-card__body record-card__body">
+            <ZmTable
+              :data="deviceStatuses"
+              :loading="loading"
+              :show-border="true"
+              settings-cache-key="pms-device-status-log"
+              class="record-table">
+              <ZmTableColumn
+                prop="deviceName"
+                :label="t('deviceStatus.deviceName')"
+                min-width="170" />
+              <ZmTableColumn
+                prop="deviceCode"
+                :label="t('deviceStatus.deviceCode')"
+                min-width="150" />
+              <ZmTableColumn
+                prop="oldStatus"
+                :label="t('deviceStatus.beforeStatus')"
+                min-width="150">
+                <template #default="{ row }">
+                  <dict-tag :type="DICT_TYPE.PMS_DEVICE_STATUS" :value="row.oldStatus" />
+                </template>
+              </ZmTableColumn>
+              <ZmTableColumn
+                prop="newStatus"
+                :label="t('deviceStatus.afterStatus')"
+                min-width="150">
+                <template #default="{ row }">
+                  <dict-tag :type="DICT_TYPE.PMS_DEVICE_STATUS" :value="row.newStatus" />
+                </template>
+              </ZmTableColumn>
+              <ZmTableColumn
+                prop="reason"
+                :label="t('configDevice.reasonForAdjustment')"
+                min-width="220"
+                align="left" />
+              <ZmTableColumn
+                prop="creatorName"
+                :label="t('deviceStatus.adjuster')"
+                min-width="130" />
+              <ZmTableColumn
+                :label="t('deviceStatus.adjustTime')"
+                prop="createTime"
+                min-width="170"
+                :formatter="dateFormatter" />
+            </ZmTable>
+
+            <Pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNo"
+              v-model:limit="queryParams.pageSize"
+              @pagination="handlePagination" />
+          </div>
+        </section>
+      </div>
+    </template>
   </el-drawer>
 </template>
-<script setup lang="ts">
 
-import { ref, watch, defineOptions, defineEmits, toRefs } from 'vue'
+<script setup lang="ts">
+import { ref } from 'vue'
 import { ElMessage } from 'element-plus'
-import * as IotDeviceStatusLogApi from '@/api/pms/iotdevicestatuslog'
-import {dateFormatter} from "@/utils/formatTime";
-import {DICT_TYPE} from "@/utils/dict";
-const drawerVisible = ref<boolean>(false)
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+import { IotDeviceStatusLogApi, type IotDeviceStatusLogVO } from '@/api/pms/iotdevicestatuslog'
+import { DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+
+type DeviceStatusLogRow = IotDeviceStatusLogVO & {
+  deviceName?: string
+  deviceCode?: string
+  creatorName?: string
+  createTime?: string
+}
+
+const { t } = useI18n()
+const { ZmTable, ZmTableColumn } = useTableComponents<DeviceStatusLogRow>()
 const emit = defineEmits(['update:modelValue', 'add', 'delete'])
-const { t } = useI18n() // 国际化
 
 defineOptions({
   name: 'DeviceStatusLogDrawer'
@@ -65,53 +123,40 @@ const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   createTime: [],
-  deviceId: '',
+  deviceId: undefined as number | undefined,
   name: '',
   code: ''
 })
 
 const windowWidth = ref(window.innerWidth)
-// 动态计算百分比
 const computedSize = computed(() => {
+  if (windowWidth.value <= 768) return '100%'
   return windowWidth.value > 1200 ? '60%' : '80%'
 })
 
 const loading = ref(false)
-const total = ref(0) // 列表的总页数
-const deviceStatuses = ref([])
+const total = ref(0)
+const deviceStatuses = ref<DeviceStatusLogRow[]>([])
 
 const props = defineProps({
   modelValue: Boolean,
   deviceId: Number
 })
 
-// 使用 toRefs 解构响应式属性
-const { modelValue, deviceId } = toRefs(props)
-
-// 监听抽屉打开事件
-watch(modelValue, (isOpen) => {
-  if (isOpen && deviceId.value) {
-    loadDeviceStatuses(deviceId.value)
-  }
-})
-
-// 监听bom树节点ID变化
-watch(() => props.deviceId, async (newVal) => {
-  if (newVal) {
-    await loadDeviceStatuses(newVal)
-  }
-})
+const updateWindowWidth = () => {
+  windowWidth.value = window.innerWidth
+}
 
-// 加载设备的状态调整记录
-const loadDeviceStatuses = async (deviceId: number) => {
+const loadDeviceStatuses = async (deviceId: number, resetPage = true) => {
   queryParams.deviceId = deviceId
-  queryParams.pageNo = 1
+  if (resetPage) {
+    queryParams.pageNo = 1
+  }
   try {
     loading.value = true
-    // API调用
-    const data = await IotDeviceStatusLogApi.IotDeviceStatusLogApi.getIotDeviceStatusLogPage(queryParams)
-    deviceStatuses.value = data.list
-    total.value = data.total
+    const data = await IotDeviceStatusLogApi.getIotDeviceStatusLogPage(queryParams)
+    deviceStatuses.value = data.list || []
+    total.value = data.total || 0
   } catch (error) {
     ElMessage.error('数据加载失败')
   } finally {
@@ -119,33 +164,158 @@ const loadDeviceStatuses = async (deviceId: number) => {
   }
 }
 
-// 修改分页处理
 const handlePagination = (pagination: any) => {
   queryParams.pageNo = pagination.page
   queryParams.pageSize = pagination.limit
   if (props.deviceId) {
-    loadDeviceStatuses(props.deviceId)
+    loadDeviceStatuses(props.deviceId, false)
   }
 }
 
-// 打开抽屉
 const openDrawer = () => {
-  drawerVisible.value = true
+  emit('update:modelValue', true)
 }
 
-// 关闭抽屉
 const closeDrawer = () => {
-  drawerVisible.value = false
+  handleClose()
 }
 
-// 关闭抽屉
 const handleClose = () => {
   emit('update:modelValue', false)
   deviceStatuses.value = []
+  total.value = 0
 }
 
-defineExpose({ openDrawer, closeDrawer, loadDeviceStatuses }) // 暴露方法给父组件
+defineExpose({ openDrawer, closeDrawer, loadDeviceStatuses })
 
+onMounted(() => {
+  window.addEventListener('resize', updateWindowWidth)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateWindowWidth)
+})
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  width: 100%;
+  padding-right: 4px;
+}
+
+.drawer-header__main {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.drawer-header__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  margin-right: 12px;
+  color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+  border: 1px solid var(--el-color-primary-light-7);
+  border-radius: 6px;
+}
+
+.drawer-title {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 24px;
+  color: var(--el-text-color-primary);
+}
+
+.drawer-subtitle {
+  margin-top: 4px;
+  font-size: 13px;
+  color: var(--el-text-color-secondary);
+}
+
+.drawer-body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-height: 100%;
+}
+
+.info-card {
+  overflow: hidden;
+  background: var(--el-bg-color);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 6px;
+}
+
+.info-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 56px;
+  padding: 0 20px;
+  background: #f4f9ff;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+}
+
+.info-card__title {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+
+.info-card__marker {
+  width: 4px;
+  height: 18px;
+  margin-right: 10px;
+  background: var(--el-color-primary);
+  border-radius: 4px;
+}
+
+.info-card__body {
+  padding: 20px;
+}
+
+.record-card {
+  flex: 1;
+  min-height: 0;
+}
+
+.record-total {
+  font-size: 13px;
+  color: var(--el-text-color-secondary);
+}
+
+.record-card__body {
+  display: flex;
+  flex-direction: column;
+  min-height: 420px;
+}
+
+.record-table {
+  flex: 1;
+  width: 100%;
+}
+
+:global(.status-log-drawer .el-drawer__body) {
+  padding: 0 24px 24px;
+}
+
+:global(.status-log-drawer .el-drawer__header) {
+  padding: 24px;
+  margin-bottom: 0;
+}
+
+@media (width <= 768px) {
+  :global(.status-log-drawer .el-drawer__body) {
+    padding: 0 16px 16px;
+  }
+}
+</style>