feat: 优化设备调拨配置与记录抽屉

- 重构设备调拨设置页交互，改为设备选择、目标部门/责任人设置、原因填写和记录预览的分区布局
- 使用 ZmTable 替换调拨配置预览表和调拨记录抽屉表格
- 优化调拨记录抽屉样式、分页加载和关闭清理逻辑
- 精简调拨配置页无用逻辑，补充调拨部门、责任人、原因等保存校验

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>