pms 瑞都日报 施工设备

src/views/pms/iotrddailyreport/FillDailyReportForm.vue

@@ -158,6 +158,51 @@
           </el-col>
         </el-row>
 
+        <!-- 施工设备字段 -->
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="施工设备" prop="deviceIds">
+              <!-- 编辑模式：显示选择按钮 -->
+              <template v-if="isEditMode">
+                <el-button
+                  @click="openDeviceDialog"
+                  type="primary"
+                  size="small"
+                  :disabled="formLoading"
+                >
+                  选择设备
+                </el-button>
+                <el-tooltip
+                  v-if="formData.deviceIds && formData.deviceIds.length > 0"
+                  :content="getAllDeviceNamesForDisplay"
+                  placement="top"
+                >
+          <span style="margin-left: 10px;">
+            {{ formatDevicesForDisplay }}
+          </span>
+                </el-tooltip>
+                <span v-else style="margin-left: 10px; color: #909399;">
+          未选择设备
+        </span>
+              </template>
+
+              <!-- 只读模式：只显示设备信息 -->
+              <template v-else>
+                <el-tooltip
+                  v-if="formData.deviceIds && formData.deviceIds.length > 0"
+                  :content="getAllDeviceNamesForDisplay"
+                  placement="top"
+                >
+          <span class="device-display-readonly">
+            {{ formatDevicesForDisplay }}
+          </span>
+                </el-tooltip>
+                <span v-else class="no-device">-</span>
+              </template>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
         <!-- 第二行：施工工艺 -->
         <el-row>
           <el-col :span="24">
@@ -392,6 +437,48 @@
     </ContentWrap>
 
   </ContentWrap>
+
+  <!-- 设备选择对话框 -->
+  <el-dialog
+    v-model="deviceDialogVisible"
+    title="选择施工设备"
+    width="1000px"
+    :before-close="handleDeviceDialogClose"
+    class="device-select-dialog"
+  >
+    <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 }">
+          <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>
+    </div>
+    <template #footer>
+    <span class="dialog-footer">
+      <el-button @click="handleDeviceDialogClose">取消</el-button>
+      <el-button type="primary" @click="confirmDeviceSelection">确定</el-button>
+    </span>
+    </template>
+  </el-dialog>
+
 </template>
 
 <script setup lang="ts">
@@ -463,6 +550,12 @@ const modeNotice = computed(() => {
 // 动态属性相关变量
 const dynamicAttrs = ref<any[]>([]) // 存储动态属性列表
 
+// 添加设备选择相关变量
+const deviceDialogVisible = ref(false)
+const filteredDeviceList = ref<any[]>([])
+const selectedDeviceIds = ref<number[]>([])
+const deviceMap = ref<Record<number, any>>({})
+
 // 添加审批表单相关变量
 const approvalFormRef = ref()
 const approvalForm = reactive({
@@ -499,6 +592,7 @@ const formData = ref({
   startTime: undefined, // 开始时间
   endTime: undefined, // 结束时间
   rdStatus: '', // 施工状态
+  deviceIds: [] as number[], // 设备ID数组
   techniqueIds: [], // 施工工艺
   productionStatus: '', // 当日生产动态
   nextPlan: '', // 下步工作计划
@@ -625,6 +719,113 @@ const formatFileSize = (bytes: number) => {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
 }
 
+// 计算属性：格式化设备显示
+const formatDevicesForDisplay = computed(() => {
+  const deviceIds = formData.value.deviceIds
+  if (!deviceIds || deviceIds.length === 0) {
+    return '无设备'
+  }
+
+  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]}...`
+  }
+
+  return deviceNames.join(', ')
+})
+
+// 计算属性：获取所有设备名称（用于tooltip）
+const getAllDeviceNamesForDisplay = computed(() => {
+  const deviceIds = formData.value.deviceIds
+  if (!deviceIds || deviceIds.length === 0) {
+    return '无设备'
+  }
+
+  const deviceNames = deviceIds
+    .map(id => deviceMap.value[id]?.deviceCode || '未知设备')
+    .filter(name => name !== '未知设备')
+
+  return deviceNames.join(', ') || '无有效设备'
+})
+
+// 打开设备选择对话框
+const openDeviceDialog = async () => {
+  if (!dailyReportData.value.deptId) {
+    message.error('请先加载项目信息')
+    return
+  }
+
+  try {
+    formLoading.value = true
+    selectedDeviceIds.value = [...(formData.value.deviceIds || [])]
+
+    // 直接从日报数据的 selectedDevices 中获取设备列表
+    const selectedDevices = dailyReportData.value.selectedDevices || []
+
+    // 更新设备映射表
+    const newDeviceMap = { ...deviceMap.value }
+    selectedDevices.forEach((device: any) => {
+      if (device.id) {
+        newDeviceMap[device.id] = device
+      }
+    })
+    deviceMap.value = newDeviceMap
+
+    filteredDeviceList.value = selectedDevices
+    deviceDialogVisible.value = true
+
+  } catch (error) {
+    console.error('获取设备列表失败:', error)
+    message.error('获取设备列表失败')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+// 处理穿梭框变化
+const handleTransferChange = (value: number[], direction: string, movedKeys: number[]) => {
+  // 可以添加额外的处理逻辑
+}
+
+// 确认设备选择
+const confirmDeviceSelection = () => {
+  formData.value.deviceIds = [...selectedDeviceIds.value]
+  deviceDialogVisible.value = false
+  message.success(`已选择 ${selectedDeviceIds.value.length} 台设备`)
+}
+
+// 关闭设备选择对话框
+const handleDeviceDialogClose = () => {
+  deviceDialogVisible.value = false
+}
+
+// 初始化设备数据
+const initDeviceData = (reportData: any) => {
+  // 初始化设备ID
+  if (reportData.deviceIds && Array.isArray(reportData.deviceIds)) {
+    formData.value.deviceIds = [...reportData.deviceIds]
+  } else {
+    formData.value.deviceIds = []
+  }
+
+  // 初始化设备映射表（用于显示设备名称）
+  if (reportData.selectedDevices && Array.isArray(reportData.selectedDevices)) {
+    const newDeviceMap = { ...deviceMap.value }
+    reportData.selectedDevices.forEach((device: any) => {
+      if (device.id) {
+        newDeviceMap[device.id] = device
+      }
+    })
+    deviceMap.value = newDeviceMap
+  }
+}
+
 // 表单验证规则
 const formRules = reactive({
   timeRange: [{ required: true, message: '时间节点不能为空', trigger: 'change' }],
@@ -724,7 +925,8 @@ const submitForm = async () => {
   const submitData = {
     ...formData.value,
     // 将动态字段组装成 extProperty 数组
-    extProperty: extProperties
+    extProperty: extProperties,
+    deviceIds: formData.value.deviceIds, // 设备ID集合
   }
 
   // 提交请求
@@ -938,6 +1140,9 @@ const initFormData = (reportData: any) => {
   }
   // 初始化动态属性
   initDynamicAttrs(reportData)
+
+  // 初始化设备数据
+  initDeviceData(reportData)
 }
 
 onMounted(async () => {
@@ -1278,4 +1483,58 @@ const handleApprove = async (action: 'pass' | 'reject') => {
 .attachment-name:hover {
   color: #66b1ff;
 }
+
+/* 只读模式下的设备显示样式 */
+.device-display-readonly {
+  color: #606266;
+  font-size: 14px;
+  line-height: 1.5;
+  background-color: #f5f7fa;
+  padding: 8px 12px;
+  border-radius: 4px;
+  border: 1px solid #e4e7ed;
+  display: inline-block;
+  min-width: 200px;
+}
+
+.no-device {
+  color: #909399;
+  font-style: italic;
+}
+
+/* 设备选择对话框样式 */
+.transfer-container {
+  text-align: center;
+  padding: 0px;
+}
+
+.transfer-component {
+  width: 100%;
+  min-width: 600px;
+}
+
+:deep(.el-transfer-panel) {
+  width: 40% !important;
+}
+
+:deep(.el-transfer-panel__item) {
+  display: flex !important;
+  align-items: center !important;
+  height: 32px !important;
+  line-height: 32px !important;
+  padding: 0 8px !important;
+  margin: 0 !important;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.transfer-option-text {
+  display: inline-block;
+  max-width: 100%;
+}
+
+:deep(.el-transfer-panel__list) {
+  width: 100% !important;
+}
 </style>