Merge branch 'feature/equipment-dynamic'

src/views/pms/device/allotlog/ConfigDeviceAllot.vue

@@ -1,397 +1,482 @@
 <template>
-  <div class="container">
-    <el-row :gutter="20" class="equal-height-row">
-      <!-- 左侧设备列表 -->
-      <el-col :span="12" class="col-height">
-        <div class="card left-card">
-          <h3>{{ t('configPerson.deviceList') }}</h3>
-          <div class="dept-select">
+  <div class="allot-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>
+          <el-tag size="small" type="info">{{ filteredDevices.length }} 台</el-tag>
+        </div>
+
+        <div class="panel-toolbar">
+          <el-tree-select
+            v-model="formData.sourceDeptId"
+            :data="deptList"
+            :props="defaultProps"
+            check-strictly
+            node-key="id"
+            filterable
+            clearable
+            size="default"
+            class="toolbar-control"
+            :placeholder="t('configPerson.deviceListHolder')"
+            @node-click="handleSourceDeptClick"
+            @clear="handleClearSourceDept" />
+          <el-input
+            v-model="deviceFilterText"
+            :placeholder="t('devicePerson.filterDevicePlaceholder')"
+            :disabled="!devicesLoaded"
+            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.deptName || '暂无' }}</span>
+              </span>
+            </el-checkbox>
+          </el-checkbox-group>
+          <el-empty
+            v-if="devicesLoaded && 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.deptList') }}</span>
+          </div>
+          <el-tag size="small" type="info">{{ selectedDevices.length }} 台已选</el-tag>
+        </div>
+
+        <el-form class="target-form" label-position="top" size="default">
+          <el-form-item>
+            <template #label>
+              <span>调拨部门</span>
+              <span class="required-star">*</span>
+            </template>
             <el-tree-select
-              clearable
-              v-model="formData.deptId"
+              v-model="formData.targetDeptId"
               :data="deptList"
               :props="defaultProps"
               check-strictly
               node-key="id"
               filterable
+              clearable
+              class="toolbar-control"
+              :disabled="selectedDevices.length === 0"
               :placeholder="t('configPerson.deviceListHolder')"
-              @node-click="handleDeptDeviceTreeNodeClick"
-            />
-          </div>
-
-          <!-- 设备搜索框 -->
-          <div class="filter-input">
-            <el-input
-              v-model="deviceFilterText"
-              :placeholder="t('devicePerson.filterDevicePlaceholder')"
-              :disabled="!devicesLoaded"
+              @change="handleTargetDeptChange"
+              @clear="handleClearTargetDept" />
+          </el-form-item>
+
+          <el-form-item>
+            <template #label>
+              <span>{{ t('devicePerson.rp') }}</span>
+              <span class="required-star">*</span>
+            </template>
+            <el-select
+              v-model="selectedPersons"
+              multiple
+              filterable
               clearable
-              prefix-icon="Search"
-            />
-          </div>
-
-          <el-scrollbar height="500px">
-            <el-checkbox-group v-model="selectedDevices">
-              <div v-for="device in filteredDevices" :key="device.id" class="checkbox-item">
-                <el-checkbox :label="device.id">
-                  {{ device.deviceCode }} ({{ device.deviceName }}) - {{ device.deptName }} ——
-                  {{ device.devicePersons }}
-                </el-checkbox>
-              </div>
-            </el-checkbox-group>
-          </el-scrollbar>
-        </div>
-      </el-col>
-
-      <!-- 右侧部门选择 -->
-      <el-col :span="12" class="col-height">
-        <div class="card right-card">
-          <h3>{{ t('configDevice.deptList') }}</h3>
-          <ContentWrap class="dept-tree-container" height="400px">
-            <DeptTree2
-              ref="deptTreeRef"
-              v-model="selectedDeptId"
-              height="100%"
-              @update:model-value="handleDeptChange"
-            />
-          </ContentWrap>
-        </div>
-      </el-col>
-    </el-row>
-
-    <!-- 暂存关联列表 -->
-    <div class="submit-area">
-      <div class="card selection-area">
-        <div class="control-row">
-          <!-- 左侧人员选择 -->
-          <div class="control-group">
-            <label class="control-title">{{ t('devicePerson.rp') }} <span class="required-star">*</span></label>
-            <div class="person-selector">
-              <el-select
-                v-model="selectedPersons"
-                multiple
-                filterable
-                :placeholder="t('configPerson.selectPersons')"
-                style="width: 100%"
-              >
-                <el-option
-                  v-for="person in simpleUsers"
-                  :key="person.id"
-                  :label="person.nickname"
-                  :value="person.id"
-                />
-              </el-select>
-            </div>
+              collapse-tags
+              collapse-tags-tooltip
+              :max-collapse-tags="6"
+              popper-class="allot-person-tags-popper"
+              class="toolbar-control person-select"
+              :loading="personLoading"
+              :disabled="!formData.targetDeptId"
+              :placeholder="t('configPerson.selectPersons')"
+              @change="syncRelations">
+              <el-option
+                v-for="person in simpleUsers"
+                :key="person.id"
+                :label="person.nickname || person.username"
+                :value="person.id" />
+            </el-select>
+          </el-form-item>
+
+          <div class="target-tip">
+            选择目标部门后会加载该部门人员，调拨记录会按设备逐条生成预览。
           </div>
+        </el-form>
+      </section>
+    </div>
 
-          <div class="control-group">
-            <label class="control-title"
-              >{{ t('configDevice.reasonForAdjustment')
-              }}<span class="required-star">*</span></label
-            >
-            <div class="reason-input-wrapper">
-              <el-input
-                v-model="formData.reason"
-                :placeholder="t('configDevice.rfaHolder')"
-                class="reason-input"
-                type="textarea"
-                :rows="4"
-                resize="none"
-                @input="updateTempRelations"
-              />
-            </div>
-          </div>
+    <section class="panel reason-panel">
+      <div class="panel-header">
+        <div class="panel-title">
+          <span class="panel-marker"></span>
+          <span>{{ t('configDevice.reasonForAdjustment') }}</span>
+          <span class="required-star">*</span>
         </div>
       </div>
-
-      <div class="temp-list card" v-if="true">
-        <h3>{{ t('configPerson.adjustmentRecords') }}</h3>
-        <el-table :data="tempRelations" style="width: 100%">
-          <el-table-column prop="deviceNames" label="设备" width="200" />
-          <el-table-column prop="deptName" label="部门" />
-          <el-table-column prop="deptId" label="部门id" v-if="false" />
-          <el-table-column prop="reason" label="调拨原因" />
-          <el-table-column label="操作" width="120">
-            <template #default="{ row }">
-              <el-button type="danger" size="small" @click="removeTempRelation(row.deviceId)">
-                删除
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
+      <el-input
+        v-model="formData.reason"
+        :placeholder="t('configDevice.rfaHolder')"
+        type="textarea"
+        :rows="4"
+        resize="none"
+        size="default"
+        :disabled="selectedDevices.length === 0 || !formData.targetDeptId"
+        @input="syncRelations" />
+    </section>
+
+    <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="default"
+          :disabled="isSaveDisabled"
+          @click="submitRelations">
+          <Icon icon="ep:check" class="mr-5px" />
+          {{ t('iotMaintain.save') }}
+        </el-button>
       </div>
 
-      <el-button
-        type="primary"
-        size="large"
-        style="min-width: 180px"
-        @click="submitRelations"
-        :disabled="tempRelations.length === 0 || !formData.reason.trim()"
-      >
-        {{ t('iotMaintain.save') }}
-      </el-button>
-    </div>
+      <ZmTable
+        :data="tempRelations"
+        :loading="false"
+        :show-border="true"
+        settings-cache-key="pms-device-allot-config-record"
+        class="record-table">
+        <ZmTableColumn prop="deviceNames" :label="t('deviceStatus.deviceName')" min-width="240" />
+        <ZmTableColumn prop="oldDeptName" label="原部门" min-width="160" />
+        <ZmTableColumn prop="deptName" label="调拨部门" min-width="160" />
+        <ZmTableColumn prop="personNames" :label="t('devicePerson.rp')" min-width="220">
+          <template #default="{ row }">
+            <span>{{ row.personNames || '未选择责任人' }}</span>
+          </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 { useRoute, useRouter } from 'vue-router'
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
 import * as DeptApi from '@/api/system/dept'
 import * as UserApi from '@/api/system/user'
-import { IotDeviceApi, IotDeviceVO } from '@/api/pms/device'
-import DeptTree2 from '@/views/pms/device/DeptTree2.vue'
-import { useRouter, useRoute } from 'vue-router'
+import type { UserVO } from '@/api/system/user'
+import { IotDeviceApi, type IotDeviceVO } from '@/api/pms/device'
 import { useTagsViewStore } from '@/store/modules/tagsView'
-import { UserVO } from '@/api/system/user'
+import { defaultProps, handleTree } from '@/utils/tree'
 
-const router = useRouter()
-const route = useRoute() // 获取路由参数
-const { t } = useI18n() // 国际化
 defineOptions({ name: 'ConfigDeviceAllot' })
-const selectedDeptId = ref<number | string>('')
+
+type TempRelation = {
+  deviceId: number
+  deviceNames: string
+  oldDeptId?: number
+  oldDeptName: string
+  deptId: number
+  deptName: string
+  personIds: number[]
+  personNames: string
+  reason: string
+}
+
+type ConfigFormData = {
+  sourceDeptId?: number
+  targetDeptId?: number
+  reason: string
+}
+
+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 deptList = ref<Tree[]>([]) // 树形结构
-const selectedDevices = ref<number[]>([]) // 改为数组存储多选
-const { delView } = useTagsViewStore() // 视图操作
-// 设备加载状态标记 只有加载完设备才能通过文本框筛选
+const simpleUsers = ref<UserVO[]>([])
+const selectedDevices = ref<number[]>([])
+const selectedPersons = ref<number[]>([])
+const tempRelations = ref<TempRelation[]>([])
+const deviceFilterText = ref('')
 const devicesLoaded = ref(false)
+const personLoading = ref(false)
 
-const formData = ref({
-  id: undefined,
-  deviceCode: undefined,
-  deviceName: undefined,
-  brand: undefined,
-  model: undefined,
-  deptId: undefined as string | undefined,
-  deviceStatus: undefined,
-  reason: '',
-  assetProperty: undefined,
-  picUrl: undefined
+const formData = reactive<ConfigFormData>({
+  sourceDeptId: undefined,
+  targetDeptId: undefined,
+  reason: ''
 })
 
-const queryParams = reactive({
-  deptId: formData.value.deptId
-})
-
-const deptTreeRef = ref<InstanceType<typeof DeptTree2>>()
-
-const emit = defineEmits(['success', 'node-click']) // 定义 success 树点击 事件，用于操作成功后的回调
+const filteredDevices = computed(() => {
+  const searchText = deviceFilterText.value.toLowerCase().trim()
+  if (!searchText) return simpleDevices.value
 
-const simpleUsers = ref<UserVO[]>([]) // 人员下拉列表选项
-const selectedPersons = ref<number[]>([]) // 存储选中的人员ID
+  return simpleDevices.value.filter((device) => {
+    return (
+      (device.deviceCode || '').toLowerCase().includes(searchText) ||
+      (device.deviceName || '').toLowerCase().includes(searchText) ||
+      (device.deptName || '').toLowerCase().includes(searchText)
+    )
+  })
+})
 
-// 响应式数据
-const tempRelationsMap = ref(
-  new Map<
-    number,
-    {
-      deviceId: number
-      deviceNames: string
-      deptId: number
-      deptName: string
-      reason: string
-    }
-  >()
-)
+const selectedPersonObjects = computed(() => {
+  return simpleUsers.value.filter((person) => selectedPersons.value.includes(person.id))
+})
 
-// 计算属性转换 Map 为数组
-const tempRelations = computed(() => Array.from(tempRelationsMap.value.values()))
+const selectedPersonNames = computed(() => {
+  return selectedPersonObjects.value
+    .map((person) => person.nickname || person.username)
+    .filter(Boolean)
+    .join('、')
+})
 
-const updateTempRelations = () => {
-  if (!selectedDeptId.value) {
-    // 未选择部门时清除所有关联
-    tempRelationsMap.value.clear()
-    return
-  }
+const targetDeptName = computed(() => {
+  if (!formData.targetDeptId) return ''
+  return findDeptNode(deptList.value, formData.targetDeptId)?.name || '未知部门'
+})
 
-  // 获取部门信息
-  const treeNode = deptTreeRef.value?.treeRef?.getNode(selectedDeptId.value)
-  const deptName = treeNode?.data?.name || '未知部门'
+const isSaveDisabled = computed(() => {
+  return (
+    tempRelations.value.length === 0 ||
+    !formData.targetDeptId ||
+    !selectedPersons.value.length ||
+    tempRelations.value.some((item) => !item.reason?.trim() || !item.personIds.length)
+  )
+})
 
-  // 创建当前应该存在的设备集合
-  const currentDeviceIds = new Set(selectedDevices.value)
+watch(
+  selectedDevices,
+  (newVal, oldVal) => {
+    const removedDeviceIds = oldVal.filter((id) => !newVal.includes(id))
+    tempRelations.value = tempRelations.value.filter(
+      (relation) => !removedDeviceIds.includes(relation.deviceId)
+    )
 
-  // 清理无效关联（包含：1.当前部门外的关联 2.未选中的设备）
-  Array.from(tempRelationsMap.value.entries()).forEach(([deviceId, relation]) => {
-    if (relation.deptId !== selectedDeptId.value || !currentDeviceIds.has(deviceId)) {
-      tempRelationsMap.value.delete(deviceId)
+    if (!newVal.length) {
+      selectedPersons.value = []
+      simpleUsers.value = []
+      formData.targetDeptId = undefined
+      formData.reason = ''
+      tempRelations.value = []
+      return
     }
-  })
 
-  // 添加/更新当前选中设备的关联
-  selectedDevices.value.forEach((deviceId) => {
-    const device = simpleDevices.value.find((d) => d.id === deviceId)
-    if (device) {
-      tempRelationsMap.value.set(deviceId, {
-        deviceId,
-        deviceNames: `${device.deviceCode} (${device.deviceName})`,
-        deptId: selectedDeptId.value as number,
-        deptName,
-        reason: formData.value.reason
-      })
+    if (formData.targetDeptId && hasSameTargetDept()) {
+      ElMessage.warning('不能选择设备原属部门作为调拨部门')
+      formData.targetDeptId = undefined
+      selectedPersons.value = []
+      simpleUsers.value = []
     }
-  })
-}
 
-// 添加设备选择监听
-watch(
-  [selectedDevices, selectedDeptId],
-  () => {
-    updateTempRelations()
+    syncRelations()
   },
-  { deep: true, immediate: true, debounce: 100 }
+  { deep: true }
 )
 
-// 监听部门变化
-watch(selectedDeptId, (newVal) => {
-  if (newVal) {
-    loadDeptPersons(newVal as number)
-  } else {
-    simpleUsers.value = []
-  }
-  selectedPersons.value = [] // 切换部门时清空已选人员
-})
+const getDeviceLabel = (device: IotDeviceVO) => {
+  return `${device.deviceCode || '暂无编码'}（${device.deviceName || '暂无名称'}）`
+}
 
-// 修改部门变更处理方法
-const handleDeptChange = (deptId) => {
-  if (!deptId) {
-    selectedDeptId.value = ''
-    return
-  }
-  // 校验部门选择
-  if (!validateDeptSelection(deptId)) {
-    // 重置部门选择
-    selectedDeptId.value = ''
-    deptTreeRef.value?.treeRef?.setCurrentKey(undefined) // 清除树的选择状态
-    deptTreeRef.value?.treeRef?.setCurrentNode(undefined)
+const hasSameTargetDept = () => {
+  return selectedDevices.value.some((deviceId) => {
+    const device = simpleDevices.value.find((item) => item.id === deviceId)
+    return device?.deptId === formData.targetDeptId
+  })
+}
+
+const syncRelations = () => {
+  if (!formData.targetDeptId) {
+    tempRelations.value = []
     return
   }
-  selectedDeptId.value = deptId
-  updateTempRelations()
-}
 
-/** 处理 部门-设备 树 被点击 */
-const handleDeptDeviceTreeNodeClick = async (row: { [key: string]: any }) => {
-  emit('node-click', row)
-  formData.value.deptId = row.id
-  selectedDevices.value = []
-  await getDeviceList()
+  const selectedDeviceSet = new Set(selectedDevices.value)
+  const personIds = [...selectedPersons.value]
+  const personNames = selectedPersonNames.value
+  tempRelations.value = simpleDevices.value
+    .filter((device) => selectedDeviceSet.has(device.id))
+    .map((device) => ({
+      deviceId: device.id,
+      deviceNames: getDeviceLabel(device),
+      oldDeptId: device.deptId,
+      oldDeptName: device.deptName || '暂无',
+      deptId: formData.targetDeptId!,
+      deptName: targetDeptName.value,
+      personIds,
+      personNames,
+      reason: formData.reason
+    }))
 }
 
-/** 获得 部门下的设备 列表 */
 const getDeviceList = async () => {
+  devicesLoaded.value = false
   try {
-    // 查询到数据后才能进行搜索 筛选
-    devicesLoaded.value = false
-
-    const params = { deptId: formData.value.deptId }
-    const data = await IotDeviceApi.simpleDevices(params)
+    const data = await IotDeviceApi.simpleDevices({ deptId: formData.sourceDeptId })
     simpleDevices.value = data || []
-
-    devicesLoaded.value = true
+    selectedDevices.value = selectedDevices.value.filter((id) =>
+      simpleDevices.value.some((device) => device.id === id)
+    )
+    syncRelations()
   } catch (error) {
     simpleDevices.value = []
-    // 即使失败也启用搜索框（避免卡在禁用状态）
+    ElMessage.error('获取设备列表失败')
+  } finally {
     devicesLoaded.value = true
-    console.error('获取设备列表失败:', error)
   }
 }
 
-// 选择部门后 加载部门人员
-const loadDeptPersons = async (deptId: number) => {
-  if (!deptId) {
+const getUserList = async () => {
+  if (!formData.targetDeptId) {
     simpleUsers.value = []
+    selectedPersons.value = []
+    syncRelations()
     return
   }
+
+  personLoading.value = true
   try {
-    // 调用API获取部门人员
-    const params = { deptId: deptId, pageNo: 1, pageSize: 10 }
-    const data = await UserApi.simpleUserList(params)
-    simpleUsers.value = data.map((user) => ({
-      id: user.id,
-      nickname: user.nickname || user.username
-    }))
+    const data = await UserApi.simpleUserList({
+      deptId: formData.targetDeptId,
+      pageNo: 1,
+      pageSize: 100
+    })
+    simpleUsers.value = data || []
+    selectedPersons.value = selectedPersons.value.filter((id) =>
+      simpleUsers.value.some((person) => person.id === id)
+    )
+    syncRelations()
   } catch (error) {
-    console.error('获取部门人员失败:', error)
     simpleUsers.value = []
+    selectedPersons.value = []
+    ElMessage.error('获取责任人列表失败')
+  } finally {
+    personLoading.value = false
   }
 }
 
-// 计算选中的设备原部门集合
-const originDeptIds = computed(
-  () =>
-    selectedDevices.value
-      .map((deviceId) => simpleDevices.value.find((d) => d.id === deviceId)?.deptId)
-      .filter(Boolean) as number[]
-)
-
-// 部门选择校验方法
-const validateDeptSelection = (deptId: number) => {
-  if (originDeptIds.value.includes(deptId)) {
-    ElMessage.error('不能选择设备原属部门作为调拨部门')
-    return false
-  }
-  return true
+const handleSourceDeptClick = async (row: Tree) => {
+  formData.sourceDeptId = row.id
+  selectedDevices.value = []
+  selectedPersons.value = []
+  simpleUsers.value = []
+  formData.targetDeptId = undefined
+  deviceFilterText.value = ''
+  await getDeviceList()
 }
 
-// 设备过滤文本
-const deviceFilterText = ref('')
+const handleClearSourceDept = () => {
+  simpleDevices.value = []
+  selectedDevices.value = []
+  selectedPersons.value = []
+  tempRelations.value = []
+  deviceFilterText.value = ''
+  devicesLoaded.value = false
+}
 
-// 计算属性：过滤设备列表
-const filteredDevices = computed(() => {
-  const searchText = deviceFilterText.value.toLowerCase().trim()
-  if (!searchText) return simpleDevices.value
+const handleTargetDeptChange = async () => {
+  if (formData.targetDeptId && hasSameTargetDept()) {
+    ElMessage.error('不能选择设备原属部门作为调拨部门')
+    formData.targetDeptId = undefined
+    selectedPersons.value = []
+    simpleUsers.value = []
+    syncRelations()
+    return
+  }
 
-  return simpleDevices.value.filter((device) => {
-    return (
-      (device.deviceCode || '').toLowerCase().includes(searchText) ||
-      (device.deviceName || '').toLowerCase().includes(searchText)
-    )
-  })
-})
+  selectedPersons.value = []
+  await getUserList()
+}
 
-// 在计算属性区域添加 selectedPersonNames
-const selectedPersonNames = computed(() => {
-  return selectedPersons.value
-    .map((id) => {
-      const user = simpleUsers.value.find((u) => u.id === id)
-      return user?.nickname || ''
-    })
-    .filter(Boolean) // 过滤掉空值
-})
+const handleClearTargetDept = () => {
+  formData.targetDeptId = undefined
+  selectedPersons.value = []
+  simpleUsers.value = []
+  syncRelations()
+}
 
 const removeTempRelation = (deviceId: number) => {
-  tempRelationsMap.value.delete(deviceId)
   selectedDevices.value = selectedDevices.value.filter((id) => id !== deviceId)
+  tempRelations.value = tempRelations.value.filter((relation) => relation.deviceId !== deviceId)
 }
 
 const submitRelations = async () => {
-  try {
-    // 提交前二次校验
-    const invalidDept = tempRelations.value.some((r) => originDeptIds.value.includes(r.deptId))
-    if (invalidDept) {
-      ElMessage.error('存在调拨部门与设备原属部门相同的情况，请检查')
-      return
-    }
+  if (!selectedDevices.value.length) {
+    ElMessage.error(t('iotMaintain.deviceHolder'))
+    return
+  }
 
-    if (!selectedPersons.value.length) {
-      ElMessage.error('请选择责任人')
-      return
-    }
+  if (!formData.targetDeptId) {
+    ElMessage.error('请选择调拨部门')
+    return
+  }
 
-    // 转换为后端需要的格式
-    const submitData = tempRelations.value.map((r) => ({
-      deviceId: r.deviceId,
-      deptId: r.deptId,
-      reason: r.reason,
-      personIds: selectedPersons.value || [], // 添加人员ID列表
-      personNames: [...selectedPersonNames.value]
+  if (!selectedPersons.value.length) {
+    ElMessage.error(t('configPerson.selectPersons'))
+    return
+  }
+
+  if (hasSameTargetDept()) {
+    ElMessage.error('存在调拨部门与设备原属部门相同的情况，请检查')
+    return
+  }
+
+  if (tempRelations.value.some((item) => !item.reason?.trim())) {
+    ElMessage.error(t('configDevice.rfaHolder'))
+    return
+  }
+
+  try {
+    const submitData = tempRelations.value.map((relation) => ({
+      deviceId: relation.deviceId,
+      deptId: relation.deptId,
+      reason: relation.reason,
+      personIds: relation.personIds,
+      personNames: relation.personNames ? relation.personNames.split('、') : []
     }))
+
     await IotDeviceApi.saveDeviceAllot(submitData)
-    // 模拟API调用
-    console.log('提交数据:', submitData)
     ElMessage.success('提交成功')
     tempRelations.value = []
     delView(unref(router.currentRoute.value))
@@ -401,239 +486,262 @@ 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) // 转换为树形结构
+    deptList.value = handleTree(deptData)
 
-    // 从路由参数获取部门ID
-    const routeDeptId = route.query.deptId ? Number(route.query.deptId) : null
+    const routeDeptId = route.query.deptId ? Number(route.query.deptId) : undefined
+    const targetDeptId = routeDeptId || deptList.value[0]?.id
 
-    let targetDeptId: number
-
-    if (routeDeptId) {
-      // 如果路由参数有部门ID，使用路由参数中的部门ID
-      targetDeptId = routeDeptId
-    } else if (deptList.value.length > 0) {
-      // 否则使用第一个节点
-      targetDeptId = deptList.value[0].id
-    } else {
-      console.warn('部门树数据为空，无法设置默认值')
+    if (!targetDeptId) {
+      ElMessage.warning('暂无可用部门数据')
       return
     }
 
-    // 设置默认选中的部门（转换后树的第一个节点）
-    // if (deptList.value.length > 0) {
-    // 获取转换后树的第一个节点
-    // const firstRootNode = deptList.value[0]
-
-    // 设置设备部门的默认值
-    formData.value.deptId = targetDeptId
-    // 触发设备部门的节点点击事件，加载设备列表
+    formData.sourceDeptId = targetDeptId
     const targetDeptNode = findDeptNode(deptList.value, targetDeptId)
-    // 触发设备部门的节点点击事件，加载设备列表
     if (targetDeptNode) {
-      await handleDeptDeviceTreeNodeClick(targetDeptNode)
+      await handleSourceDeptClick(targetDeptNode)
+    } else {
+      await getDeviceList()
     }
-    // } else {
-    // console.warn("部门树数据为空，无法设置默认值")
-    // }
   } catch (error) {
-    console.error('初始化部门树失败:', error)
     ElMessage.error('加载部门数据失败')
   }
-
-  nextTick(() => {
-    // 强制重新计算布局
-    window.dispatchEvent(new Event('resize'))
-  })
 })
-
-// 在部门树中查找指定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
-}
 </script>
 
-<style scoped>
-.container {
-  padding: 20px;
+<style lang="scss" scoped>
+.allot-config-page {
+  min-height: calc(
+    100vh - 20px - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height)
+  );
+  background: #f5f7fb;
 }
 
-.card {
-  border: 1px solid #ebeef5;
-  border-radius: 4px;
-  padding: 20px;
-  margin-bottom: 20px;
-  background: white;
-  display: flex;
-  flex-direction: column;
-  height: 100%; /* 根据实际需要调整整体高度 */
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  transition: box-shadow 0.2s;
+.selection-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
 }
 
-.card:hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+.panel {
+  overflow: hidden;
+  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);
 }
 
-.dept-select {
-  margin-bottom: 20px;
+.panel-title {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
 }
 
-.user-list {
-  margin-bottom: 20px;
-  border: 1px solid #ebeef5;
+.panel-marker {
+  width: 4px;
+  height: 18px;
+  margin-right: 10px;
+  background: var(--el-color-primary);
   border-radius: 4px;
-  padding: 10px;
 }
 
-.action-bar {
-  text-align: right;
+.panel-toolbar {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 12px;
+  padding: 16px 18px 0;
 }
 
-.temp-list {
-  margin-top: 20px;
+.toolbar-control {
+  width: 100%;
 }
 
-.submit-area {
-  margin-top: 20px;
-  text-align: center;
+.target-form {
+  padding: 18px;
 }
 
-h3 {
-  margin: 0 0 15px 0;
-  color: #303133;
+.target-tip {
+  padding: 10px 12px;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--el-text-color-secondary);
+  background: #f8fbff;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 6px;
 }
 
-.dept-select {
-  flex-shrink: 0; /* 防止搜索框被压缩 */
+.person-select :deep(.el-select__tags) {
+  flex-wrap: nowrap;
+  max-width: calc(100% - 48px);
+  overflow: hidden;
 }
 
-.el-scrollbar__wrap {
-  overflow-x: hidden;
+.person-select :deep(.el-tag) {
+  flex-shrink: 0;
+  max-width: 92px;
 }
 
-.tree-container .el-tree {
-  height: 100% !important;
+.person-select :deep(.el-tag__content) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-/* 左侧滚动区域 */
-.el-scrollbar,
-.tree-container {
-  scrollbar-width: thin;
-  scrollbar-color: #c0c4cc transparent;
+:global(.allot-person-tags-popper .el-select__selection) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  max-width: 520px;
+  max-height: 220px;
+  overflow-y: auto;
 }
 
-.left-card,
-.right-card {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  height: 100%; /* 继承父级高度 */
+:global(.allot-person-tags-popper .el-select__selected-item) {
+  max-width: 120px;
 }
 
-.dept-tree-container {
-  flex: 1;
-  min-height: 0; /* 关键：允许内容区域收缩 */
-  position: relative;
+:global(.allot-person-tags-popper .el-tag__content),
+:global(.allot-person-tags-popper .el-select__tags-text) {
+  display: inline-block;
+  max-width: 92px;
   overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: bottom;
 }
 
-/* 调整树形组件内部滚动 */
-:deep(.el-tree) {
-  height: 100%;
-  overflow: auto;
+.option-scroll {
+  height: 430px;
+  padding: 14px 18px 18px;
 }
 
-.equal-height-row {
+.option-list {
   display: flex;
-  align-items: stretch; /* 关键：等高布局 */
+  flex-direction: column;
+  gap: 10px;
 }
 
-.col-height {
+.option-item {
   display: flex;
-  flex-direction: column;
-  min-height: 400px; /* 统一最小高度 */
-}
+  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;
+  align-items: flex-start;
+
+  &:hover,
+  &.is-selected {
+    background: #f7fbff;
+    border-color: var(--el-color-primary-light-5);
+    box-shadow: 0 6px 18px rgb(64 158 255 / 10%);
+  }
 
-.filter-input {
-  margin-bottom: 15px;
-}
+  :deep(.el-checkbox__input) {
+    margin-top: 2px;
+  }
 
-.no-data {
-  padding: 20px;
-  text-align: center;
-  color: #999;
+  :deep(.el-checkbox__label) {
+    flex: 1;
+    min-width: 0;
+    padding-left: 10px;
+  }
 }
 
-.control-row {
-  display: flex;
+.option-content {
+  display: grid;
   width: 100%;
-  gap: 20px;
+  min-width: 0;
+  align-items: center;
+  grid-template-columns: minmax(90px, 0.7fr) minmax(120px, 1fr) minmax(150px, 1.2fr);
+  gap: 12px;
 }
 
-/* 调整文本域高度 */
-.reason-input-wrapper :deep(.el-textarea__inner) {
-  height: 100% !important;
-  min-height: 100px;
+.option-main,
+.option-sub,
+.option-extra {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-/* 响应式调整 */
-@media (max-width: 992px) {
-  .control-row {
-    flex-direction: column;
-    gap: 15px;
-  }
+.option-main {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
 
-  .control-group {
-    width: 100%;
-  }
+.option-sub,
+.option-extra {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
 }
 
-.selection-area {
-  display: flex;
+.reason-panel,
+.record-panel {
+  margin-top: 16px;
 }
 
-.control-group {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
+.reason-panel {
+  padding-bottom: 18px;
+
+  :deep(.el-textarea) {
+    padding: 18px 18px 0;
+  }
 }
 
-.control-title {
-  display: block;
-  margin-bottom: 8px;
-  font-weight: bold;
-  color: #606266;
+.record-panel {
+  padding-bottom: 18px;
 }
 
-.person-selector,
-.reason-input-wrapper {
-  flex: 1;
-  min-height: 100px;
+.record-table {
+  width: calc(100% - 36px);
+  margin: 18px;
 }
 
 .required-star {
-  color: #ff4d4f;
-  margin-left: 3px;
-  vertical-align: middle;
+  margin-left: 4px;
+  color: var(--el-color-danger);
+}
+
+@media (width <= 1180px) {
+  .selection-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
 }
 </style>

src/views/pms/device/allotlog/DeviceAllotLogDrawer.vue

@@ -1,50 +1,106 @@
 <template>
   <el-drawer
-    :title="t('configPerson.adjustmentRecords')"
     :append-to-body="true"
     :model-value="modelValue"
-    @update:model-value="$emit('update:modelValue', $event)"
     :show-close="false"
     direction="rtl"
     :size="computedSize"
+    class="allot-log-drawer"
     :before-close="handleClose"
-  >
-    <template v-if="deviceId">
-      <div v-loading="loading" style="height: 100%">
-        <el-table :data="deviceAllots" 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="oldDeptName" :label="t('deviceStatus.beforeDept')" width="180" />
-          <el-table-column prop="newDeptName" :label="t('deviceStatus.afterDept')" width="180" />
-          <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:position" :size="22" />
+          </div>
+          <div>
+            <div class="drawer-title">{{ t('configPerson.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('configPerson.adjustmentRecords') }}</span>
+            </div>
+            <span class="record-total">共 {{ total }} 条</span>
+          </div>
+
+          <div class="info-card__body record-card__body">
+            <ZmTable
+              :data="deviceAllots"
+              :loading="loading"
+              :show-border="true"
+              settings-cache-key="pms-device-allot-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="oldDeptName"
+                :label="t('deviceStatus.beforeDept')"
+                min-width="170" />
+              <ZmTableColumn
+                prop="newDeptName"
+                :label="t('deviceStatus.afterDept')"
+                min-width="170" />
+              <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">
-const { t } = useI18n() // 国际化
-import { ref, watch, defineOptions, defineEmits, toRefs } from 'vue'
+import { ref } from 'vue'
 import { ElMessage } from 'element-plus'
-import {dateFormatter} from "@/utils/formatTime";
-import {IotDeviceAllotLogApi} from "@/api/pms/iotdeviceallotlog";
-const drawerVisible = ref<boolean>(false)
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+import { IotDeviceAllotLogApi, type IotDeviceAllotLogVO } from '@/api/pms/iotdeviceallotlog'
+import { dateFormatter } from '@/utils/formatTime'
+
+type DeviceAllotLogRow = IotDeviceAllotLogVO & {
+  createTime?: string
+}
+
+const { t } = useI18n()
+const { ZmTable, ZmTableColumn } = useTableComponents<DeviceAllotLogRow>()
 const emit = defineEmits(['update:modelValue', 'add', 'delete'])
 
 defineOptions({
@@ -55,53 +111,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 deviceAllots = ref([])
+const total = ref(0)
+const deviceAllots = ref<DeviceAllotLogRow[]>([])
 
 const props = defineProps({
   modelValue: Boolean,
   deviceId: Number
 })
 
-// 使用 toRefs 解构响应式属性
-const { modelValue, deviceId } = toRefs(props)
-
-// 监听抽屉打开事件
-watch(modelValue, (isOpen) => {
-  if (isOpen && deviceId.value) {
-    loadDeviceAllots(deviceId.value)
-  }
-})
-
-// 监听bom树节点ID变化
-watch(() => props.deviceId, async (newVal) => {
-  if (newVal) {
-    await loadDeviceAllots(newVal)
-  }
-})
+const updateWindowWidth = () => {
+  windowWidth.value = window.innerWidth
+}
 
-// 加载设备的状态调整记录
-const loadDeviceAllots = async (deviceId: number) => {
+const loadDeviceAllots = async (deviceId: number, resetPage = true) => {
   queryParams.deviceId = deviceId
-  queryParams.pageNo = 1
+  if (resetPage) {
+    queryParams.pageNo = 1
+  }
   try {
     loading.value = true
-    // API调用
     const data = await IotDeviceAllotLogApi.getIotDeviceAllotLogPage(queryParams)
-    deviceAllots.value = data.list
-    total.value = data.total
+    deviceAllots.value = data.list || []
+    total.value = data.total || 0
   } catch (error) {
     ElMessage.error('数据加载失败')
   } finally {
@@ -109,34 +152,158 @@ const loadDeviceAllots = async (deviceId: number) => {
   }
 }
 
-// 修改分页处理
 const handlePagination = (pagination: any) => {
   queryParams.pageNo = pagination.page
   queryParams.pageSize = pagination.limit
   if (props.deviceId) {
-    loadDeviceAllots(props.deviceId)
+    loadDeviceAllots(props.deviceId, false)
   }
 }
 
-// 打开抽屉
 const openDrawer = () => {
-  drawerVisible.value = true
+  emit('update:modelValue', true)
 }
 
-// 关闭抽屉
 const closeDrawer = () => {
-  drawerVisible.value = false
+  handleClose()
 }
 
-// 关闭抽屉
 const handleClose = () => {
   emit('update:modelValue', false)
   deviceAllots.value = []
   total.value = 0
 }
 
-defineExpose({ openDrawer, closeDrawer, loadDeviceAllots }) // 暴露方法给父组件
+defineExpose({ openDrawer, closeDrawer, loadDeviceAllots })
 
+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(.allot-log-drawer .el-drawer__body) {
+  padding: 0 24px 24px;
+}
+
+:global(.allot-log-drawer .el-drawer__header) {
+  padding: 24px;
+  margin-bottom: 0;
+}
+
+@media (width <= 768px) {
+  :global(.allot-log-drawer .el-drawer__body) {
+    padding: 0 16px 16px;
+  }
+}
+</style>

src/views/pms/device/personlog/ConfigDevicePerson.vue

@@ -1,528 +1,483 @@
 <template>
-  <div class="container">
-    <el-row :gutter="20" class="equal-height-row">
-      <!-- 左侧设备列表 -->
-      <el-col :span="12">
-        <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"
-              @clear="handleClearDeptForDevice"
-            />
-          </div>
-          <!-- 设备搜索框 -->
-          <div class="filter-input">
-            <el-input
-              v-model="deviceFilterText"
-              :placeholder="t('devicePerson.filterDevicePlaceholder')"
-              :disabled="!devicesLoaded"
-              clearable
-              prefix-icon="Search"
-            />
+  <div class="person-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>
+          <el-tag size="small" type="info">{{ filteredDevices.length }} 台</el-tag>
+        </div>
 
-          <el-scrollbar height="450px">
-            <el-checkbox-group v-model="selectedDevices">
-              <div
-                v-for="device in filteredDevices"
-                :key="device.id"
-                class="radio-item"
-              >
-                <el-checkbox :label="device.id">
-                  {{ device.deviceCode }} ({{ device.deviceName }}) - {{ device.devicePersons }}
-                </el-checkbox>
-              </div>
-            </el-checkbox-group>
-          </el-scrollbar>
+        <div class="panel-toolbar">
+          <el-tree-select
+            v-model="formData.deptId1"
+            :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="deviceFilterText"
+            :placeholder="t('devicePerson.filterDevicePlaceholder')"
+            :disabled="!devicesLoaded"
+            clearable
+            size="default"
+            class="toolbar-control">
+            <template #prefix>
+              <Icon icon="ep:search" />
+            </template>
+          </el-input>
         </div>
-      </el-col>
-
-      <!-- 右侧责任人选择 -->
-      <el-col :span="12">
-        <div class="card">
-          <h3>{{ t('configPerson.rp') }}</h3>
-          <div class="dept-select">
-            <el-tree-select
-              clearable
-              v-model="formData.deptIds"
-              :data="deptList"
-              :props="defaultProps"
-              multiple
-              show-checkbox
-              check-strictly
-              node-key="id"
-              filterable
-              :placeholder="t('configPerson.rpHolder')"
-              @node-click="handleDeptCheckChange"
-              @clear="handleClearDeptForPerson"
-            />
-          </div>
 
-          <!-- 责任人搜索框 -->
-          <div class="filter-input">
-            <el-input
-              v-model="userFilterText"
-              :placeholder="t('devicePerson.filterUserPlaceholder')"
-              :disabled="!personLoaded"
-              clearable
-              prefix-icon="Search"
-            />
+        <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.devicePersons || '暂无' }}</span>
+              </span>
+            </el-checkbox>
+          </el-checkbox-group>
+          <el-empty
+            v-if="devicesLoaded && 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('configPerson.rp') }}</span>
           </div>
+          <el-tag size="small" type="info">{{ filteredUsers.length }} 人</el-tag>
+        </div>
+
+        <div class="panel-toolbar">
+          <el-tree-select
+            v-model="formData.deptIds"
+            :data="deptList"
+            :props="defaultProps"
+            multiple
+            show-checkbox
+            check-strictly
+            node-key="id"
+            filterable
+            clearable
+            collapse-tags
+            collapse-tags-tooltip
+            :max-collapse-tags="8"
+            popper-class="dept-tags-popper"
+            size="default"
+            class="toolbar-control dept-tags-select"
+            :placeholder="t('configPerson.rpHolder')"
+            @change="handlePersonDeptChange"
+            @clear="handleClearDeptForPerson" />
+          <el-input
+            v-model="userFilterText"
+            :placeholder="t('devicePerson.filterUserPlaceholder')"
+            clearable
+            size="default"
+            class="toolbar-control">
+            <template #prefix>
+              <Icon icon="ep:search" />
+            </template>
+          </el-input>
+        </div>
 
-          <el-scrollbar height="450px">
-            <el-checkbox-group v-model="selectedUsers" @change="handleUserSelectionChange">
-              <div
-                v-for="user in filteredUsers"
-                :key="user.id"
-                class="list-item"
-              >
-                <el-checkbox :label="user.id">
-                  {{ user.nickname }} ({{ user.deptName }})
-                </el-checkbox>
-              </div>
-            </el-checkbox-group>
-          </el-scrollbar>
+        <el-scrollbar class="option-scroll">
+          <el-checkbox-group
+            v-model="selectedUsers"
+            class="option-list"
+            @change="handleUserSelectionChange">
+            <el-checkbox
+              v-for="user in filteredUsers"
+              :key="user.id"
+              :value="user.id"
+              class="option-item"
+              :class="{ 'is-selected': selectedUsers.includes(user.id) }">
+              <span class="option-content">
+                <span class="option-main">{{ user.nickname || user.username }}</span>
+                <span class="option-sub">{{ user.deptName || '暂无部门' }}</span>
+              </span>
+            </el-checkbox>
+          </el-checkbox-group>
+          <el-empty
+            v-if="personLoaded && filteredUsers.length === 0"
+            :image-size="92"
+            description="暂无责任人" />
+        </el-scrollbar>
+      </section>
+    </div>
+
+    <section class="panel reason-panel">
+      <div class="panel-header">
+        <div class="panel-title">
+          <span class="panel-marker"></span>
+          <span>{{ t('configPerson.reasonForAdjustment') }}</span>
+          <span class="required-star">*</span>
         </div>
-      </el-col>
-    </el-row>
-
-    <!-- 暂存关联列表 -->
-    <div class="submit-area">
-      <div class="card">
-        <h3>{{ t('configPerson.reasonForAdjustment') }}<span class="required-star">*</span></h3>
-        <el-input
-          v-model="formData.reason"
-          :placeholder="t('configPerson.rfaHolder')"
-          class="reason-input"
-          type="textarea"
-          :rows="3"
-          @input="handleReasonInput"
-          :disabled="selectedDevices.length === 0 || selectedUsers.length === 0"
-        />
       </div>
-      <div class="temp-list card">
-        <h3>{{ t('configPerson.adjustmentRecords') }}</h3>
-        <el-table :data="tempRelations" style="width: 100%">
-          <el-table-column prop="deviceNames" :label="t('devicePerson.deviceName')" width="200" />
-          <el-table-column prop="userNames" :label="t('devicePerson.rp')" />
-          <el-table-column prop="reason" :label="t('configPerson.reasonForAdjustment')" />
-          <el-table-column :label="t('devicePerson.operation')" width="120">
-            <template #default="{ row }">
-              <el-button
-                type="danger"
-                size="small"
-                @click="removeTempRelation(row.deviceIds)"
-              >
-                {{ t('fault.del') }}
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-
-        <div class="submit-area">
-          <el-button
-            type="primary"
-            size="large"
-            @click="submitRelations"
-            :disabled="isSaveDisabled"
-          >
-            {{ t('iotMaintain.save') }}
-          </el-button>
+      <el-input
+        v-model="formData.reason"
+        :placeholder="t('configPerson.rfaHolder')"
+        type="textarea"
+        :rows="4"
+        resize="none"
+        size="default"
+        :disabled="selectedDevices.length === 0 || selectedUsers.length === 0"
+        @input="handleReasonInput" />
+    </section>
+
+    <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="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-person-config-record"
+        class="record-table">
+        <ZmTableColumn prop="deviceNames" :label="t('devicePerson.deviceName')" min-width="240" />
+        <ZmTableColumn prop="userNames" :label="t('devicePerson.rp')" min-width="220">
+          <template #default="{ row }">
+            <span>{{ row.userNames || '未选择责任人' }}</span>
+          </template>
+        </ZmTableColumn>
+        <ZmTableColumn
+          prop="reason"
+          :label="t('configPerson.reasonForAdjustment')"
+          min-width="280"
+          align="left">
+          <template #default="{ row }">
+            <span>{{ row.reason || '未填写调整原因' }}</span>
+          </template>
+        </ZmTableColumn>
+        <ZmTableColumn :label="t('devicePerson.operation')" width="120" fixed="right" action>
+          <template #default="{ row }">
+            <el-button type="danger" link size="default" @click="removeTempRelation(row.deviceIds)">
+              <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 { useDebounceFn } from '@vueuse/core'
 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 {IotDevicePersonApi, IotDevicePersonVO} from "@/api/pms/iotdeviceperson";
-import * as UserApi from "@/api/system/user";
-import {simpleUserList, UserVO} from "@/api/system/user";
-import { useRouter, useRoute } from 'vue-router'
-const router = useRouter()
-const route = useRoute() // 获取路由参数
-const { t } = useI18n() // 国际化
-import { useTagsViewStore } from "@/store/modules/tagsView";
+import { useRoute, useRouter } from 'vue-router'
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+import * as DeptApi from '@/api/system/dept'
+import * as UserApi from '@/api/system/user'
+import type { UserVO } from '@/api/system/user'
+import { IotDeviceApi, type IotDeviceVO } from '@/api/pms/device'
+import { IotDevicePersonApi } from '@/api/pms/iotdeviceperson'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import { defaultProps, handleTree } from '@/utils/tree'
 
 defineOptions({ name: 'ConfigDevicePerson' })
 
-const simpleDevices = ref<IotDeviceVO[]>([])
-const simpleUsers = ref<UserVO[]>([])
-
-const deptList = ref<Tree[]>([]) // 树形结构
-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,
-  assetProperty: undefined,
-  reason: '',
-  picUrl: undefined,
-  deptIds: [] as number[], // 改为部门ID数组
-})
-
-const queryParams = reactive({
-  deptId1: formData.value.deptId1,
-  deptId: formData.value.deptId,
-})
-
-const emit = defineEmits(['success', 'node-click']) // 定义 success 树点击 事件，用于操作成功后的回调
-
-// 响应式数据
-const selectedDevices = ref<number[]>([])
-// 责任人过滤文本
-const userFilterText = ref('')
-const selectedUsers = ref<number[]>([])
-const tempRelations = ref<Array<{
+type TempRelation = {
   deviceIds: number[]
   deviceNames: string
   userIds: number[]
   userNames: string
   reason: string
-}>>([])
+}
 
-watch(selectedDevices, async (newVal, oldVal) => {
-  // 找出新增的设备
-  const addedDevices = newVal.filter(id => !oldVal.includes(id));
-  // 找出取消选择的设备
-  const removedDevices = oldVal.filter(id => !newVal.includes(id))
+type ConfigFormData = {
+  deptId1?: number
+  deptIds: number[]
+  reason: string
+}
 
-  // 移除对应设备的关联记录
-  tempRelations.value = tempRelations.value.filter(
-    r => !removedDevices.includes(r.deviceIds[0])
-  )
+const router = useRouter()
+const route = useRoute()
+const { t } = useI18n()
+const { delView } = useTagsViewStore()
+const { ZmTable, ZmTableColumn } = useTableComponents<TempRelation>()
 
-  // 为新增的设备创建关联记录
-  if (addedDevices.length > 0) {
-    const addedDeviceObjects = simpleDevices.value.filter(d =>
-      addedDevices.includes(d.id)
-    );
-    addedDeviceObjects.forEach(device => {
-      // 使用当前已选的责任人和调整原因
-      updateDeviceRelation(device, selectedUsers.value);
-    });
-  }
+const deptList = ref<Tree[]>([])
+const simpleDevices = ref<IotDeviceVO[]>([])
+const simpleUsers = ref<UserVO[]>([])
+const selectedDevices = ref<number[]>([])
+const selectedUsers = ref<number[]>([])
+const tempRelations = ref<TempRelation[]>([])
+const deviceFilterText = ref('')
+const userFilterText = ref('')
+const devicesLoaded = ref(false)
+const personLoaded = ref(false)
 
-  // 当没有选中设备时清空其他选项
-  if (newVal.length === 0) {
-    selectedUsers.value = []
-    formData.value.reason = ''
-  }
+const formData = reactive<ConfigFormData>({
+  deptId1: undefined,
+  deptIds: [],
+  reason: ''
+})
 
-  // 获取设备部门ID集合
-  const deptIdSet = new Set<number>()
-  newVal.forEach(deviceId => {
-    const device = simpleDevices.value.find(d => d.id === deviceId)
-    if (device?.deptId) deptIdSet.add(device.deptId)
+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) ||
+      (device.devicePersons || '').toLowerCase().includes(searchText)
+    )
   })
-  formData.value.deptIds = Array.from(deptIdSet)
-  // 部门更新后自动加载人员
-  await getUserList()
-}, { deep: true })
+})
+
+const filteredUsers = computed(() => {
+  const searchText = userFilterText.value.toLowerCase().trim()
+  if (!searchText) return simpleUsers.value
+
+  return simpleUsers.value.filter((user) => {
+    return (
+      (user.nickname || '').toLowerCase().includes(searchText) ||
+      (user.username || '').toLowerCase().includes(searchText) ||
+      (user.deptName || '').toLowerCase().includes(searchText)
+    )
+  })
+})
+
+const selectedUserObjects = computed(() => {
+  return simpleUsers.value.filter((user) => selectedUsers.value.includes(user.id))
+})
+
+const isSaveDisabled = computed(() => {
+  return (
+    tempRelations.value.length === 0 ||
+    selectedUsers.value.length === 0 ||
+    tempRelations.value.some((item) => !item.reason?.trim() || item.userIds.length === 0)
+  )
+})
 
-// 监听部门ID变化 部门变化后重新筛选用户
 watch(
-  () => formData.value.deptIds,
-  async (newVal, oldVal) => {
-    // 找出被删除的部门
-    const deletedDeptIds = oldVal?.filter(id => !newVal?.includes(id)) || []
-
-    if (deletedDeptIds.length > 0) {
-      // 找出被删除部门下的用户ID
-      const usersToRemove = simpleUsers.value
-        .filter(user => deletedDeptIds.includes(user.deptId))
-        .map(user => user.id)
-
-      // 同步更新已选用户
-      selectedUsers.value = selectedUsers.value.filter(
-        id => !usersToRemove.includes(id)
-      )
-
-      // 更新关联记录
-      tempRelations.value = tempRelations.value.map(relation => {
-        const validUserIds = relation.userIds.filter(
-          id => !usersToRemove.includes(id)
-        )
-
-        // 获取有效用户名称
-        const validUsers = simpleUsers.value.filter(
-          u => validUserIds.includes(u.id)
-        )
-
-        return {
-          ...relation,
-          userIds: validUserIds,
-          userNames: validUsers.map(u => u.nickname).join(', ')
-        }
-      })
+  selectedDevices,
+  (newVal, oldVal) => {
+    const removedDeviceIds = oldVal.filter((id) => !newVal.includes(id))
+    tempRelations.value = tempRelations.value.filter(
+      (relation) => !removedDeviceIds.includes(relation.deviceIds[0])
+    )
+
+    if (newVal.length === 0) {
+      selectedUsers.value = []
+      formData.deptIds = []
+      formData.reason = ''
+      simpleUsers.value = []
+      personLoaded.value = false
+      tempRelations.value = []
+      return
     }
 
-    // 重新加载人员列表
-    await getUserList()
+    syncPersonDeptBySelectedDevices()
+    syncRelations()
+    void debouncedGetUserList()
   },
-  { deep: true } // 深度监听数组变化
+  { deep: true }
 )
 
-const handleUserSelectionChange = (userIds: number[]) => {
-  // 处理清空责任人的情况
-  if (userIds.length === 0) {
-    tempRelations.value.forEach(relation => {
-      relation.userIds = []
-      relation.userNames = ''
-    })
-    return
-  }
-
-  if (selectedDevices.value.length === 0) {
-    ElMessage.warning('请先选择设备')
-    selectedUsers.value = []
-    return
-  }
-
-  // 获取所有选中设备
-  const devices = simpleDevices.value.filter(d =>
-    selectedDevices.value.includes(d.id)
-  )
+const getDeviceLabel = (device: IotDeviceVO) => {
+  return `${device.deviceCode || '暂无编码'}（${device.deviceName || '暂无名称'}）`
+}
 
-  // 更新所有设备的关联关系
-  devices.forEach(device => {
-    updateDeviceRelation(device, userIds)
-  })
+const getUserNames = () => {
+  return selectedUserObjects.value.map((user) => user.nickname || user.username).join('、')
 }
 
-/** 处理 部门-设备 树 被点击 */
-const handleDeptDeviceTreeNodeClick = async (row: { [key: string]: any }) => {
-  emit('node-click', row)
-  formData.value.deptId1 = row.id
-  await getDeviceList()
+const syncRelations = () => {
+  const userIds = [...selectedUsers.value]
+  const userNames = getUserNames()
+  const selectedDeviceSet = new Set(selectedDevices.value)
+
+  tempRelations.value = simpleDevices.value
+    .filter((device) => selectedDeviceSet.has(device.id))
+    .map((device) => ({
+      deviceIds: [device.id],
+      deviceNames: getDeviceLabel(device),
+      userIds,
+      userNames,
+      reason: formData.reason
+    }))
 }
 
-// 新增计算属性：判断保存按钮是否禁用
-const isSaveDisabled = computed(() => {
-  // 当没有调整记录或调整原因为空时禁用按钮
-  return tempRelations.value.length === 0 || !formData.value.reason.trim();
-});
+const syncPersonDeptBySelectedDevices = () => {
+  const deptIdSet = new Set<number>()
+  selectedDevices.value.forEach((deviceId) => {
+    const device = simpleDevices.value.find((item) => item.id === deviceId)
+    if (device?.deptId) {
+      deptIdSet.add(device.deptId)
+    }
+  })
+  formData.deptIds = Array.from(deptIdSet)
+}
 
-/** 获得 部门下的设备 列表 */
 const getDeviceList = async () => {
+  devicesLoaded.value = false
   try {
-    // 查询到数据后才能进行搜索 筛选
-    devicesLoaded.value = false
-
-    const params = { deptId: formData.value.deptId1 }
-    const data = await IotDeviceApi.simpleDevices(params)
+    const data = await IotDeviceApi.simpleDevices({ deptId: formData.deptId1 })
     simpleDevices.value = data || []
-
-    devicesLoaded.value = true
+    selectedDevices.value = selectedDevices.value.filter((id) =>
+      simpleDevices.value.some((device) => device.id === id)
+    )
   } catch (error) {
     simpleDevices.value = []
-    // 即使失败也启用搜索框（避免卡在禁用状态）
+    ElMessage.error('获取设备列表失败')
+  } finally {
     devicesLoaded.value = true
-    console.error('获取设备列表失败:', error)
   }
 }
 
-/** 处理 部门-人员 树 被点击 */
-const handleDeptUserTreeNodeClick = async (row: { [key: string]: any }) => {
-  emit('node-click', row)
-  formData.value.deptId = row.id
-  await getUserList()
-}
-
-/** 获得 部门下的人员 列表 */
 const getUserList = async () => {
-  try {
-    // 开始加载时禁用搜索框
-    personLoaded.value = false
-
-    // 保留当前选中但不在被删除部门的用户
-    const currentDeptIds = formData.value.deptIds || []
-    const validUserIds = simpleUsers.value
-      .filter(user => currentDeptIds.includes(user.deptId))
-      .map(user => user.id)
+  const deptIds = formData.deptIds || []
 
-    selectedUsers.value = selectedUsers.value.filter(
-      id => validUserIds.includes(id)
-    )
+  if (!deptIds.length) {
+    simpleUsers.value = []
+    selectedUsers.value = []
+    personLoaded.value = true
+    syncRelations()
+    return
+  }
 
-    const params = {
-      deptIds: formData.value.deptIds,
-      // deptId: formData.value.deptId,
+  personLoaded.value = false
+  try {
+    const data = await UserApi.simpleUserList({
+      deptIds,
       pageNo: 1,
-      pageSize: 10 }
-    const data = await UserApi.simpleUserList(params)
+      pageSize: 100
+    } as any)
     simpleUsers.value = data || []
-
-    personLoaded.value = true
+    selectedUsers.value = selectedUsers.value.filter((id) =>
+      simpleUsers.value.some((user) => user.id === id)
+    )
+    syncRelations()
   } catch (error) {
     simpleUsers.value = []
-    // 即使失败也启用搜索框（避免卡在禁用状态）
+    selectedUsers.value = []
+    ElMessage.error('获取责任人列表失败')
+  } finally {
     personLoaded.value = true
-    console.error('获取人员列表失败:', error)
   }
 }
 
-// 设备加载状态标记 只有加载完设备才能通过文本框筛选
-const devicesLoaded = ref(false)
+const debouncedGetUserList = useDebounceFn(async () => {
+  if (!selectedDevices.value.length) return
+  await getUserList()
+}, 600)
 
-// 人员加载状态标记 只有加载完人员才能通过文本框筛选
-const personLoaded = ref(false)
+const handleDeptDeviceTreeNodeClick = async (row: Tree) => {
+  formData.deptId1 = row.id
+  selectedDevices.value = []
+  deviceFilterText.value = ''
+  await getDeviceList()
+}
 
-// 设备过滤文本
-const deviceFilterText = ref('')
+const handlePersonDeptChange = async () => {
+  userFilterText.value = ''
+  await getUserList()
+}
 
-// 计算属性：过滤设备列表
-const filteredDevices = computed(() => {
-  const searchText = deviceFilterText.value.toLowerCase().trim()
-  if (!searchText) return simpleDevices.value
+const handleUserSelectionChange = (userIds: number[]) => {
+  if (!selectedDevices.value.length) {
+    ElMessage.warning('请先选择设备')
+    selectedUsers.value = []
+    return
+  }
 
-  return simpleDevices.value.filter(device => {
-    return (
-      (device.deviceCode || '').toLowerCase().includes(searchText) ||
-      (device.deviceName || '').toLowerCase().includes(searchText)
-    )
-  })
-})
+  selectedUsers.value = userIds
+  syncRelations()
+}
 
-// 新增输入处理方法
 const handleReasonInput = (value: string) => {
-  formData.value.reason = value
-  // 同步到所有已选设备的记录
-  selectedDevices.value.forEach(deviceId => {
-    const relation = tempRelations.value.find(
-      r => r.deviceIds[0] === deviceId
-    )
-    if (relation) {
-      relation.reason = value
-    }
-  })
+  formData.reason = value
+  syncRelations()
 }
 
-// 更新设备关联关系
-const updateDeviceRelation = (device: IotDeviceVO, userIds: number[]) => {
-  // 获取当前选择的人员
-  const users = simpleUsers.value.filter(u => userIds.includes(u.id))
-
-  const newRelation = {
-    deviceIds: [device.id],
-    deviceNames: `${device.deviceCode} (${device.deviceName})`,
-    userIds: users.map(u => u.id),
-    userNames: users.map(u => u.nickname).join(', '),
-    reason: formData.value.reason
-  }
-
-  const existIndex = tempRelations.value.findIndex(
-    // r => r.deviceIds[0] === device.id
-    r => r.deviceIds.includes(device.id)
+const removeTempRelation = (deviceIds: number[]) => {
+  selectedDevices.value = selectedDevices.value.filter((id) => !deviceIds.includes(id))
+  tempRelations.value = tempRelations.value.filter(
+    (relation) => relation.deviceIds.join() !== deviceIds.join()
   )
-
-  if (existIndex > -1) {
-    tempRelations.value[existIndex] = newRelation
-  } else {
-    tempRelations.value.push(newRelation)
-  }
 }
 
-// 处理 设备关联 部门选择清空事件
 const handleClearDeptForDevice = () => {
   simpleDevices.value = []
   selectedDevices.value = []
-  devicesLoaded.value = false  // 清空时禁用搜索框
+  selectedUsers.value = []
+  tempRelations.value = []
   deviceFilterText.value = ''
+  devicesLoaded.value = false
 }
 
-// 处理 人员关联 部门选择清空事件
 const handleClearDeptForPerson = () => {
-  formData.value.deptIds = []
+  formData.deptIds = []
   simpleUsers.value = []
   selectedUsers.value = []
-  personLoaded.value = false  // 清空时禁用搜索框
   userFilterText.value = ''
-
-  // 清空所有暂存记录中的责任人
-  tempRelations.value.forEach(relation => {
-    relation.userIds = []
-    relation.userNames = ''
-  })
+  personLoaded.value = false
+  syncRelations()
 }
 
-// 新增部门选择监听
-const handleDeptCheckChange = () => {
-  // getUserList() // 选择变化时重新加载人员
-}
-
-// 过滤后的人员列表计算属性
-const filteredUsers = computed(() => {
-  const searchText = userFilterText.value.toLowerCase().trim()
-  if (!searchText) return simpleUsers.value
+const submitRelations = async () => {
+  if (!selectedDevices.value.length) {
+    ElMessage.error(t('iotMaintain.deviceHolder'))
+    return
+  }
 
-  return simpleUsers.value.filter(user => {
-    return (user.nickname || '').toLowerCase().includes(searchText)
-  })
-})
+  if (!selectedUsers.value.length) {
+    ElMessage.error(t('configPerson.selectPersons'))
+    return
+  }
 
-const removeTempRelation = (deviceIds: number[]) => {
-  tempRelations.value = tempRelations.value.filter(
-    r => r.deviceIds.join() !== deviceIds.join()
-  )
-  // 同步取消勾选设备
-  selectedDevices.value = selectedDevices.value.filter(
-    id => !deviceIds.includes(id)
-  )
-}
+  if (tempRelations.value.some((item) => !item.reason?.trim())) {
+    ElMessage.error(t('configPerson.rfaHolder'))
+    return
+  }
 
-const submitRelations = async () => {
   try {
-    // 校验必须选择设备
-    if (selectedDevices.value.length === 0) {
-      ElMessage.error(t('iotMaintain.deviceHolder')) // 请选择设备
-      return
-    }
-    // 校验必须选择责任人
-    if (selectedUsers.value.length === 0) {
-      ElMessage.error(t('configPerson.selectPersons')) // 请选择责任人
-      return
-    }
-    // 校验所有调整原因
-    const hasEmptyReason = tempRelations.value.some(
-      item => !item.reason?.trim()
-    )
-    if (hasEmptyReason) {
-      ElMessage.error(t('configPerson.rfaHolder'))
-      return
-    }
-    // 校验 设备 责任人 必须都选择 不能为空
-    // 转换为后端需要的格式
-    const submitData = tempRelations.value.flatMap(relation => {
-      return relation.deviceIds.map(deviceId => ({
+    const submitData = tempRelations.value.flatMap((relation) => {
+      return relation.deviceIds.map((deviceId) => ({
         deviceId,
         userIds: relation.userIds,
         userNames: relation.userNames,
         reason: relation.reason
       }))
     })
+
     await IotDevicePersonApi.saveDevicePersonRelation(submitData)
-    // 模拟API调用
     ElMessage.success('提交成功')
     tempRelations.value = []
     delView(unref(router.currentRoute.value))
@@ -532,150 +487,251 @@ 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) // 转换为树形结构
+    deptList.value = handleTree(deptData)
 
-    // 从路由参数获取部门ID
-    const routeDeptId = route.query.deptId ? Number(route.query.deptId) : null
+    const routeDeptId = route.query.deptId ? Number(route.query.deptId) : undefined
+    const targetDeptId = routeDeptId || deptList.value[0]?.id
 
-    let targetDeptId: number
-
-    if (routeDeptId) {
-      // 如果路由参数有部门ID，使用路由参数中的部门ID
-      targetDeptId = routeDeptId
-    } else if (deptList.value.length > 0) {
-      // 否则使用第一个节点
-      targetDeptId = deptList.value[0].id
-    } else {
-      console.warn("部门树数据为空，无法设置默认值")
+    if (!targetDeptId) {
+      ElMessage.warning('暂无可用部门数据')
       return
     }
 
-    // 设置默认选中的部门（转换后树的第一个节点）
-    // if (deptList.value.length > 0) {
-      // 获取转换后树的第一个节点
-      // const firstRootNode = deptList.value[0]
+    formData.deptId1 = targetDeptId
+    formData.deptIds = [targetDeptId]
 
-    // 设置设备部门的默认值
-    formData.value.deptId1 = targetDeptId
-    // 触发设备部门的节点点击事件，加载设备列表
     const targetDeptNode = findDeptNode(deptList.value, targetDeptId)
-    // 触发设备部门的节点点击事件，加载设备列表
     if (targetDeptNode) {
       await handleDeptDeviceTreeNodeClick(targetDeptNode)
+    } else {
+      await getDeviceList()
     }
-
-    // 设置责任人部门的默认值
-    formData.value.deptIds = [targetDeptId]
-    // 触发责任人部门的节点点击事件，加载人员列表
-    await getUserList() //handleDeptUserTreeNodeClick(firstRootNode)
-    // } else {
-      // console.warn("部门树数据为空，无法设置默认值")
-    // }
+    await getUserList()
   } 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>
+.person-config-page {
+  min-height: calc(
+    100vh - 20px - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height)
+  );
+  background: #f5f7fb;
 }
 
-</script>
+.selection-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
 
-<style scoped>
-.equal-height-row {
+.panel {
+  overflow: hidden;
+  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%);
+}
+
+.panel-header {
   display: flex;
-  align-items: stretch;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 56px;
+  padding: 0 18px;
+  background: #f4f9ff;
+  border-bottom: 1px solid var(--el-border-color-lighter);
 }
 
-.container {
-  padding: 20px;
+.panel-title {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
 }
 
-.card {
-  border: 1px solid #ebeef5;
+.panel-marker {
+  width: 4px;
+  height: 18px;
+  margin-right: 10px;
+  background: var(--el-color-primary);
   border-radius: 4px;
-  padding: 20px;
-  margin-bottom: 20px;
-  background: white;
-  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
-  transition: box-shadow 0.2s;
 }
 
-.list-item {
-  padding: 8px 12px;
-  border-bottom: 1px solid #f0f0f0;
+.panel-toolbar {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 12px;
+  padding: 16px 18px 0;
 }
 
-.dept-select {
-  margin-bottom: 20px;
+.toolbar-control {
+  width: 100%;
 }
 
-.action-bar {
-  text-align: right;
+.dept-tags-select :deep(.el-select__tags) {
+  flex-wrap: nowrap;
+  max-width: calc(100% - 48px);
+  overflow: hidden;
 }
 
-.temp-list {
-  margin-top: 20px;
+.dept-tags-select :deep(.el-tag) {
+  flex-shrink: 0;
+  max-width: 92px;
 }
 
-.submit-area {
-  margin-top: 20px;
-  text-align: center;
+.dept-tags-select :deep(.el-tag__content) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-h3 {
-  margin: 0 0 15px 0;
-  color: #303133;
+:global(.dept-tags-popper .el-select__selection) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  max-width: 520px;
+  max-height: 220px;
+  overflow-y: auto;
 }
 
-.radio-item {
-  width: 100%;
-  padding: 8px 12px;
-  border-bottom: 1px solid #f0f0f0;
+:global(.dept-tags-popper .el-select__selected-item) {
+  max-width: 120px;
+}
+
+:global(.dept-tags-popper .el-tag__content),
+:global(.dept-tags-popper .el-select__tags-text) {
+  display: inline-block;
+  max-width: 92px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: bottom;
+}
+
+.option-scroll {
+  height: 430px;
+  padding: 14px 18px 18px;
+}
+
+.option-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.option-item {
+  display: flex;
+  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;
+  align-items: flex-start;
+
+  &: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;
   width: 100%;
-  height: 100%;
+  min-width: 0;
+  align-items: center;
+  grid-template-columns: minmax(90px, 0.7fr) minmax(120px, 1fr) minmax(150px, 1.2fr);
+  gap: 12px;
 }
 
-.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;
 }
 
-.required-star {
-  color: #ff4d4f;
-  margin-left: 3px;
-  vertical-align: middle;
+.option-main {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+
+.option-sub,
+.option-extra {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+
+.reason-panel,
+.record-panel {
+  margin-top: 16px;
 }
 
-.filter-input {
-  margin-bottom: 15px;
+.reason-panel {
+  padding-bottom: 18px;
+
+  :deep(.el-textarea) {
+    padding: 18px 18px 0;
+  }
 }
 
-.no-data {
-  padding: 20px;
-  text-align: center;
-  color: #999;
+.record-panel {
+  padding-bottom: 18px;
+}
+
+.record-table {
+  width: calc(100% - 36px);
+  margin: 18px;
+}
+
+.required-star {
+  margin-left: 4px;
+  color: var(--el-color-danger);
+}
+
+@media (width <= 1180px) {
+  .selection-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
 }
 </style>

src/views/pms/device/personlog/DevicePersonLogDrawer.vue

@@ -1,51 +1,110 @@
 <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="person-log-drawer"
     :before-close="handleClose"
-  >
-    <template v-if="deviceId">
-      <div v-loading="loading" style="height: 100%">
-        <el-table :data="devicePersons" 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="oldPersonNames" :label="t('deviceStatus.beforePerson')" width="180" />
-          <el-table-column prop="newPersonNames" :label="t('deviceStatus.afterPerson')" width="180" />
-          <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:user" :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="devicePersons"
+              :loading="loading"
+              :show-border="true"
+              settings-cache-key="pms-device-person-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="oldPersonNames"
+                :label="t('deviceStatus.beforePerson')"
+                min-width="170" />
+              <ZmTableColumn
+                prop="newPersonNames"
+                :label="t('deviceStatus.afterPerson')"
+                min-width="170" />
+              <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">
-const { t } = useI18n() // 国际化
-import { ref, watch, defineOptions, defineEmits, toRefs } from 'vue'
+import { ref } from 'vue'
 import { ElMessage } from 'element-plus'
-import {dateFormatter} from "@/utils/formatTime";
-import {DICT_TYPE} from "@/utils/dict";
-import {IotDevicePersonLogApi} from "@/api/pms/iotdevicepersonlog";
-const drawerVisible = ref<boolean>(false)
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+import { dateFormatter } from '@/utils/formatTime'
+import { IotDevicePersonLogApi, type IotDevicePersonLogVO } from '@/api/pms/iotdevicepersonlog'
+
+type DevicePersonLogRow = IotDevicePersonLogVO & {
+  deviceName?: string
+  deviceCode?: string
+  oldPersonNames?: string
+  newPersonNames?: string
+  creatorName?: string
+  createTime?: string
+}
+
+const { t } = useI18n()
+const { ZmTable, ZmTableColumn } = useTableComponents<DevicePersonLogRow>()
 const emit = defineEmits(['update:modelValue', 'add', 'delete'])
 
 defineOptions({
@@ -56,53 +115,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 devicePersons = ref([])
+const total = ref(0)
+const devicePersons = ref<DevicePersonLogRow[]>([])
 
 const props = defineProps({
   modelValue: Boolean,
   deviceId: Number
 })
 
-// 使用 toRefs 解构响应式属性
-const { modelValue, deviceId } = toRefs(props)
-
-// 监听抽屉打开事件
-watch(modelValue, (isOpen) => {
-  if (isOpen && deviceId.value) {
-    loadDevicePersons(deviceId.value)
-  }
-})
-
-// 监听bom树节点ID变化
-watch(() => props.deviceId, async (newVal) => {
-  if (newVal) {
-    await loadDevicePersons(newVal)
-  }
-})
+const updateWindowWidth = () => {
+  windowWidth.value = window.innerWidth
+}
 
-// 加载设备的状态调整记录
-const loadDevicePersons = async (deviceId: number) => {
+const loadDevicePersons = async (deviceId: number, resetPage = true) => {
   queryParams.deviceId = deviceId
-  queryParams.pageNo = 1
+  if (resetPage) {
+    queryParams.pageNo = 1
+  }
   try {
     loading.value = true
-    // API调用
     const data = await IotDevicePersonLogApi.getIotDevicePersonLogPage(queryParams)
-    devicePersons.value = data.list
-    total.value = data.total
+    devicePersons.value = data.list || []
+    total.value = data.total || 0
   } catch (error) {
     ElMessage.error('数据加载失败')
   } finally {
@@ -110,34 +156,158 @@ const loadDevicePersons = async (deviceId: number) => {
   }
 }
 
-// 修改分页处理
 const handlePagination = (pagination: any) => {
   queryParams.pageNo = pagination.page
   queryParams.pageSize = pagination.limit
   if (props.deviceId) {
-    loadDevicePersons(props.deviceId)
+    loadDevicePersons(props.deviceId, false)
   }
 }
 
-// 打开抽屉
 const openDrawer = () => {
-  drawerVisible.value = true
+  emit('update:modelValue', true)
 }
 
-// 关闭抽屉
 const closeDrawer = () => {
-  drawerVisible.value = false
+  handleClose()
 }
 
-// 关闭抽屉
 const handleClose = () => {
   emit('update:modelValue', false)
   devicePersons.value = []
   total.value = 0
 }
 
-defineExpose({ openDrawer, closeDrawer, loadDevicePersons }) // 暴露方法给父组件
+defineExpose({ openDrawer, closeDrawer, loadDevicePersons })
 
+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(.person-log-drawer .el-drawer__body) {
+  padding: 0 24px 24px;
+}
+
+:global(.person-log-drawer .el-drawer__header) {
+  padding: 24px;
+  margin-bottom: 0;
+}
+
+@media (width <= 768px) {
+  :global(.person-log-drawer .el-drawer__body) {
+    padding: 0 16px 16px;
+  }
+}
+</style>

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>