pms 任务 选择设备 功能优化

src/views/pms/iotprojecttask/IotProjectTaskForm.vue

@@ -180,9 +180,15 @@
           </el-table-column>
           <el-table-column prop="deviceIds" label="施工设备" >
             <template #default="{ row }">
-              <span v-if="!row.editing">
-                {{ getDeviceNames(row.deviceIds) }}
-              </span>
+              <el-tooltip
+                :content="getAllDeviceNames(row.deviceIds)"
+                placement="top"
+                :disabled="row.deviceIds && row.deviceIds.length <= 2"
+              >
+                <span v-if="!row.editing" class="device-names">
+                  {{ getDeviceNames(row.deviceIds) }}
+                </span>
+
               <div v-else>
                 <el-button
                   @click="openDeviceDialog(row)"
@@ -191,10 +197,12 @@
                 >
                   选择设备
                 </el-button>
+                <!--
                 <span v-if="row.editData.deviceCodes" style="margin-left: 8px;">
                   {{ row.editData.deviceCodes }}
-                </span>
+                </span> -->
               </div>
+              </el-tooltip>
             </template>
           </el-table-column>
           <el-table-column prop="remark" label="备注">
@@ -237,20 +245,36 @@
     title="选择施工设备"
     width="800px"
     :before-close="handleDeviceDialogClose"
+    class="device-select-dialog"
   >
-    <el-transfer
-      v-model="selectedDeviceIds"
-      :data="filteredDeviceList"
-      :titles="['可选设备', '已选设备']"
-      :props="{ key: 'id', label: 'deviceCode' }"
-      filterable
-      style="text-align: left; display: inline-block"
+    <!-- 父容器加text-center确保穿梭框居中，移除原text-align:left -->
+    <!-- 移除text-align:left，保留inline-block让父容器text-center生效 -->
+    <div class="transfer-container">
+      <el-transfer
+        v-model="selectedDeviceIds"
+        :data="filteredDeviceList"
+        :titles="['可选设备', '已选设备']"
+        :props="{ key: 'id', label: 'deviceCode' }"
+        filterable
+        class="transfer-component"
       @change="handleTransferChange"
-    >
+      >
       <template #default="{ option }">
-        <span>{{ option.deviceCode }} - {{ option.deviceName }}</span>
+        <!-- 无内容时禁用tooltip -->
+        <el-tooltip
+          effect="dark"
+          placement="top"
+          :content="`${option.deviceCode || ''} - ${option.deviceName || ''}`"
+          :disabled="!option.deviceCode && !option.deviceName"
+        transition="fade-in-linear"
+        >
+        <span class="transfer-option-text">
+              {{ option.deviceCode }} - {{ option.deviceName }}
+        </span>
+        </el-tooltip>
       </template>
-    </el-transfer>
+      </el-transfer>
+    </div>
     <template #footer>
       <span class="dialog-footer">
         <el-button @click="handleDeviceDialogClose">取消</el-button>
@@ -378,28 +402,23 @@ const getDeptNames = (deptIds) => {
   return names.join(', ');
 };
 
-// 根据设备ID集合获取设备名称
-/* const getDeviceNames = (deviceIds) => {
-  if (!deviceIds || deviceIds.length === 0) return '';
-
-  const names = [];
-  deviceIds.forEach(id => {
-    const device = deviceList.value.find(d => d.id === id);
-    if (device) {
-      names.push(device.deviceCode);
-    }
-  });
-  return names.join(', ');
-}; */
-
 const getDeviceNames = (deviceIds: number[]) => {
   if (!deviceIds || deviceIds.length === 0) return '';
-  return deviceIds.map(id => deviceMap.value[id]?.deviceCode || '未知设备')
-    .filter(name => name !== '未知设备')
-    .join(', ');
 
+  // 获取所有有效设备名称
+  const deviceNames = deviceIds
+    .map(id => deviceMap.value[id]?.deviceCode)
+    .filter(name => name !== undefined && name !== '');
 
+  if (deviceNames.length === 0) return '';
+
+  // 如果设备数量超过2个，显示前两个加省略号
+  if (deviceNames.length > 2) {
+    return `${deviceNames[0]}, ${deviceNames[1]}...`;
+  }
 
+  // 设备数量不超过2个，正常显示所有
+  return deviceNames.join(', ');
 };
 
 const tableData = ref([
@@ -731,6 +750,17 @@ const validateRow = (row) => {
   return valid;
 };
 
+// 获取所有设备名称（用于tooltip提示）
+const getAllDeviceNames = (deviceIds: number[]) => {
+  if (!deviceIds || deviceIds.length === 0) return '无设备';
+
+  const deviceNames = deviceIds
+    .map(id => deviceMap.value[id]?.deviceCode || '未知设备')
+    .filter(name => name !== '未知设备');
+
+  return deviceNames.join(', ') || '无有效设备';
+};
+
 // 保存行
 const saveRow = (row) => {
   if (!validateRow(row)) return;
@@ -845,4 +875,39 @@ const deleteRow = (index) => {
   display: flex;
   gap: 8px;
 }
+
+/* 1. 穿梭框父容器：居中 + 内边距 */
+.transfer-container {
+  text-align: center;
+  padding: 0px 0; /* 上下内边距，避免紧贴对话框边缘 */
+}
+
+/* 2. 穿梭框组件：控制宽度，避免过窄或过宽 */
+.transfer-component {
+  width: 100%; /* 占对话框90%宽度，兼顾美观和内容显示 */
+}
+
+/* 3. 深度选择器：修改el-transfer选项样式（解决内容省略问题） */
+:deep(.el-transfer-panel__item) {
+  white-space: nowrap; /* 文本不换行，保证一行显示 */
+  overflow: hidden; /* 超出部分隐藏 */
+  text-overflow: ellipsis; /* 超出显示省略号 */
+  max-width: 100%; /* 确保文本不超出选项容器宽度 */
+  padding: 6px 6px; /* 适当增加内边距，优化点击体验 */
+}
+
+/* 4. 选项文本：确保继承父容器宽度，省略号正常生效 */
+.transfer-option-text {
+  display: inline-block;
+  max-width: 100%;
+}
+
+/* 设备名称显示区域样式 */
+.device-names {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px; /* 根据实际列宽调整 */
+}
+
 </style>