成套完成

src/api/pms/device/index.ts

@@ -184,5 +184,10 @@ export const IotDeviceApi = {
   // 删除成套
   deleteIotDeviceSet: async (id: number) => {
     return await request.delete({ url: `/rq/iot-device-group/delete?id=` + id })
+  },
+
+  // 获取关联设备
+  getIotDeviceSetRelation: async (params) => {
+    return await request.get({ url: `/rq/iot-device-group/device/group`, params })
   }
 }

src/views/pms/device/DeviceInfo.vue

@@ -1,7 +1,6 @@
 <template>
   <ContentWrap>
     <div style="display: flex; flex-direction: row; height: 12em; margin-top: 2px">
-
       <div style="flex: 1; height: 12em; margin-left: 20px">
         <el-image
           :key="index"
@@ -147,20 +146,46 @@
         </el-form>
       </el-tab-pane>
       <el-tab-pane :label="t('deviceInfo.fileLibrary')" name="file">
-<!--        <DeviceUpload ref="fileRef" v-if="loadedTabs.includes('1')" />-->
-        <DeviceFile ref="fileRef" :deviceId="id" :deviceName="formData.deviceName"  v-if="loadedTabs.includes('1')" />
+        <!--        <DeviceUpload ref="fileRef" v-if="loadedTabs.includes('1')" />-->
+        <DeviceFile
+          ref="fileRef"
+          :deviceId="id"
+          :deviceName="formData.deviceName"
+          v-if="loadedTabs.includes('1')"
+        />
       </el-tab-pane>
       <el-tab-pane :label="t('deviceInfo.deviceBOM')" name="bom">
-        <BomList ref="bomRef" v-model:activeName="activeName" :deviceId="id" :deviceCategoryName="formData.assetClassName" v-if="loadedTabs.includes('2')" />
+        <BomList
+          ref="bomRef"
+          v-model:activeName="activeName"
+          :deviceId="id"
+          :deviceCategoryName="formData.assetClassName"
+          v-if="loadedTabs.includes('2')"
+        />
       </el-tab-pane>
       <el-tab-pane :label="t('deviceInfo.operationRecords')" name="record">
-        <RecordList ref="recordRef" v-model:activeName="activeName" :deviceId="id" v-if="loadedTabs.includes('3')" />
+        <RecordList
+          ref="recordRef"
+          v-model:activeName="activeName"
+          :deviceId="id"
+          v-if="loadedTabs.includes('3')"
+        />
       </el-tab-pane>
       <el-tab-pane :label="t('deviceInfo.faultRecords')" name="failure">
-        <FailureList ref="failureRef" v-model:activeName="activeName" :deviceId="id" v-if="loadedTabs.includes('4')" />
+        <FailureList
+          ref="failureRef"
+          v-model:activeName="activeName"
+          :deviceId="id"
+          v-if="loadedTabs.includes('4')"
+        />
       </el-tab-pane>
       <el-tab-pane :label="t('deviceInfo.repairRecords')" name="maintain">
-        <MaintainList ref="maintainRef" v-model:activeName="activeName" :deviceId="id" v-if="loadedTabs.includes('5')" />
+        <MaintainList
+          ref="maintainRef"
+          v-model:activeName="activeName"
+          :deviceId="id"
+          v-if="loadedTabs.includes('5')"
+        />
       </el-tab-pane>
       <el-tab-pane :label="t('deviceInfo.maintenanceRecords')" name="maintenance">
         <MaintenanceList
@@ -202,6 +227,16 @@
           v-if="loadedTabs.includes('10')"
         />
       </el-tab-pane>
+
+      <!-- 关联设备 -->
+      <el-tab-pane :label="t('deviceInfo.associationDevice')" name="association">
+        <AssociationDevices
+          ref="personRef"
+          v-model:activeName="activeName"
+          :deviceId="id"
+          v-if="loadedTabs.includes('11')"
+        />
+      </el-tab-pane>
     </el-tabs>
   </ContentWrap>
 </template>
@@ -218,11 +253,12 @@ import MaintainList from '@/views/pms/device/MaintainList.vue'
 import InspectList from '@/views/pms/device/InspectList.vue'
 import MaintenanceList from '@/views/pms/device/maintenance/MaintenanceList.vue'
 import AllotLogList from '@/views/pms/device/allotlog/AllotLogList.vue'
-import DeviceStatusLogList from "@/views/pms/device/statuslog/DeviceStatusLogList.vue";
+import DeviceStatusLogList from '@/views/pms/device/statuslog/DeviceStatusLogList.vue'
 import PersonList from '@/views/pms/device/personlog/PersonList.vue'
 import RecordList from '@/views/pms/device/record/RecordList.vue'
+import AssociationDevices from '@/views/pms/device/completeSet/AssociationDevices.vue'
 import { createImageViewer } from '@/components/ImageViewer'
-import { ref, onMounted } from 'vue';
+import { ref, onMounted } from 'vue'
 
 const defaultPicUrl = ref(
   import.meta.env.VITE_BASE_URL + '/admin-api/infra/file/29/get/IntegratedSolution.png'
@@ -261,7 +297,7 @@ const formData = ref({
 })
 const pics = ref([])
 const imgSrc = ref('')
-const loadedTabs = ref(['info']); // 记录已加载的标签
+const loadedTabs = ref(['info']) // 记录已加载的标签
 
 /** 获得详情 */
 const getDetail = async () => {
@@ -294,7 +330,7 @@ const imagePreview = (imgUrl: string) => {
 const handleTabClick = (tab) => {
   if (!loadedTabs.value.includes(tab.index)) {
     // 这里可以添加每个标签对应的加载逻辑，如果有的话
-    loadedTabs.value.push(tab.index);
+    loadedTabs.value.push(tab.index)
   }
 }
 

src/views/pms/device/completeSet/AssociationDevices.vue

@@ -0,0 +1,68 @@
+<template>
+  <div v-loading="loading" style="height: 100%">
+    <el-table :data="deviceList" style="width: 100%">
+      <!-- 序号 -->
+      <el-table-column :label="t('monitor.serial')" width="70" align="center">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="deviceName" :label="t('iotDevice.name')" />
+      <el-table-column prop="deviceCode" :label="t('iotDevice.code')" />
+      <el-table-column prop="ifMaster" label="是否主设备">
+        <template #default="scope">
+          <span v-if="scope.row.ifMaster">是</span>
+          <span v-else>否</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getDeviceList(props.deviceId)"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { IotDeviceApi } from '@/api/pms/device'
+const { t } = useI18n() // 国际化
+defineOptions({
+  name: 'AssociationDevices'
+})
+
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  deviceId: ''
+})
+const loading = ref(false)
+const total = ref(0) // 列表的总页数
+const deviceList = ref([])
+
+const props = defineProps({
+  deviceId: Number
+})
+
+const getDeviceList = async (id) => {
+  loading.value = true
+  try {
+    queryParams.deviceId = id
+    const res = await IotDeviceApi.getIotDeviceSetRelation(queryParams)
+    deviceList.value = res
+    total.value = res.data.total
+  } catch (error) {
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  getDeviceList(props.deviceId)
+})
+</script>
+
+<style lang="scss" scoped></style>

src/views/pms/device/completeSet/DeviceCompleteSet.vue

@@ -67,16 +67,16 @@
           </el-table-column>
           <el-table-column label="主设备" align="center" prop="mainDeviceName">
             <template #default="scope">
-              {{ scope.row.details.filter((item) => item.ifMaster)[0].deviceName || '无' }}
+              {{ scope.row.details.filter((item) => item.ifMaster)[0]?.deviceName || '无' }}
             </template>
           </el-table-column>
-          <el-table-column label="设备详情" align="center" prop="deviceDetails">
+          <!-- <el-table-column label="设备详情" align="center" prop="deviceDetails">
             <template #default="scope">
               <el-button link type="primary" @click="handleDeviceDetail(scope.row)">
                 查看
               </el-button>
             </template>
-          </el-table-column>
+          </el-table-column> -->
           <el-table-column :label="t('devicePerson.operation')" align="center" min-width="120px">
             <template #default="scope">
               <el-button link type="primary" @click="handleEdit(scope.row)"> 编辑 </el-button>
@@ -137,10 +137,10 @@
             @change="rightDeviceChange"
           >
             <template #left-empty>
-              <el-empty :image-size="60" description="暂无数据" />
+              <el-empty :image-size="60" :description="isEdit ? '加载中...' : '请选择设备'" />
             </template>
             <template #right-empty>
-              <el-empty :image-size="60" description="暂未选择设备" />
+              <el-empty :image-size="60" :description="isEdit ? '加载中...' : '请选择设备'" />
             </template>
           </el-transfer>
         </div>
@@ -176,7 +176,7 @@
   <!-- 设备详情对话框 -->
   <el-dialog v-model="dialogDetailVisible" title="设备详情" width="800">
     <el-table :data="deviceList">
-      <el-table-column property="date" label="设备名称" width="150" />
+      <el-table-column property="name" label="设备名称" width="150" />
       <el-table-column property="name" label="Name" width="200" />
       <el-table-column property="address" label="Address" />
     </el-table>
@@ -189,7 +189,7 @@ import DeptTree from '@/views/system/user/DeptTree.vue'
 import { defaultProps, handleTree } from '@/utils/tree'
 import * as DeptApi from '@/api/system/dept'
 import { ElMessageBox } from 'element-plus'
-import { get } from 'axios'
+import { is } from 'bpmn-js/lib/util/ModelUtil'
 const deptList = ref<Tree[]>([]) // 树形结构
 
 defineOptions({ name: 'IotDeviceComplete' })
@@ -320,13 +320,25 @@ const updateSelectedDevices = () => {
     selectedDeviceIds.value.includes(item.id)
   )
 
-  formData.value.details = selectedDevices.value.map((item) => ({
-    deviceId: item.id,
-    deviceName: item.deviceName,
-    deviceCode: item.deviceCode,
-    deptId: item.deptId,
-    ifMaster: item.id === mainDeviceId.value ? true : false
-  }))
+  console.log('selectedDevices>>>>>>>>>>>>>>>>', selectedDevices.value)
+
+  if (isEdit.value) {
+    formData.value.details = selectedDevices.value.map((item) => ({
+      deviceId: item.deviceId,
+      deviceName: item.deviceName,
+      deviceCode: item.deviceCode,
+      deptId: item.deptId,
+      ifMaster: item.id === mainDeviceId.value ? true : false
+    }))
+  } else {
+    formData.value.details = selectedDevices.value.map((item) => ({
+      deviceId: item.id,
+      deviceName: item.deviceName,
+      deviceCode: item.deviceCode,
+      deptId: item.deptId,
+      ifMaster: item.id === mainDeviceId.value ? true : false
+    }))
+  }
 
   // 如果主设备不在当前选择中，则清空主设备
   if (mainDeviceId.value && !selectedDeviceIds.value.includes(mainDeviceId.value)) {
@@ -338,13 +350,16 @@ const updateSelectedDevices = () => {
 const setMainDevice = (val) => {
   mainDeviceId.value = val
   // 更新 details 中的 ifMaster 字段
+  console.log('selectedDevices.value>>>>>>>>>>>>>>>>', selectedDevices.value)
   formData.value.details = selectedDevices.value.map((item) => ({
-    deviceId: item.id,
+    deviceId: item.deviceId,
     deviceName: item.deviceName,
     deviceCode: item.deviceCode,
     deptId: item.deptId,
     ifMaster: item.id === mainDeviceId.value ? true : false
   }))
+
+  console.log('formData.value.details>>>>>>>>>>>>>>>>', formData.value.details)
 }
 
 // 显示新增对话框
@@ -358,28 +373,28 @@ const handleAdd = () => {
 // 显示编辑对话框
 const handleEdit = (row) => {
   isEdit.value = true
+
   dialogTitle.value = '编辑成套设备'
 
   formData.value = {
     ...row
   }
 
-  console.log('row>>>>>>>>>>>>>>>>>>>>>>', row)
-
-  // deviceOptions.value = row.details.map((item) => ({
-  //   key: item.deviceId,
-  //   label: `${item.deviceName} (${item.deviceCode})`,
-  //   ...item
-  // }))
-
   getDeviceList(row.deptId)
 
   selectedDeviceIds.value = row.details.map((item) => item.deviceId)
   mainDeviceId.value = row.details.find((item) => item.ifMaster)?.deviceId || ''
-  selectedDevices.value = deviceOptions.value.filter((item) =>
-    selectedDeviceIds.value.includes(item.id)
-  )
-  // updateSelectedDevices()
+  selectedDevices.value = row.details.map((item) => ({
+    id: item.deviceId,
+    deviceId: item.deviceId,
+    deviceName: item.deviceName,
+    deviceCode: item.deviceCode,
+    deptId: item.deptId,
+    ifMaster: item.ifMaster,
+    label: item.deviceName + ' (' + item.deviceCode + ')',
+    ...item
+  }))
+
   dialogVisible.value = true
 }
 //删除成套
@@ -403,14 +418,6 @@ const handleDelete = async (id: number) => {
     })
 }
 
-//  查看设备详情
-const handleDeviceDetail = (row) => {
-  console.log('查看设备详情', row)
-  // 这里可以打开一个对话框或者路由跳转来显示设备详情
-  dialogDetailVisible.value = true
-  deviceList.value = row.details || []
-}
-
 // 重置表单
 const resetForm = () => {
   formData.value = {