style：点检任务-添加设备筛选框

src/views/mes/taskManagement/index.vue

@@ -38,6 +38,25 @@
           <el-option v-for="item in planOptions" :key="String(item.id)" :label="item.planName" :value="String(item.id)" />
         </el-select>
       </el-form-item>
+      <el-form-item :label="t('EquipmentManagement.TaskManagement.deviceList')" prop="deviceIds">
+        <el-select
+          v-model="queryParams.deviceIds"
+          multiple
+          filterable
+          clearable
+          collapse-tags
+          collapse-tags-tooltip
+          :placeholder="t('EquipmentManagement.TaskManagement.placeholderDeviceList')"
+          class="!w-240px"
+        >
+          <el-option
+            v-for="item in deviceOptions"
+            :key="item.id"
+            :label="item.label"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
       <el-form-item>
         <el-button @click="handleQuery">
           <Icon icon="ep:search" class="mr-5px" />
@@ -86,6 +105,16 @@
         prop="name"
         min-width="200"
        sortable />
+      <el-table-column
+        :label="t('EquipmentManagement.TaskManagement.deviceList')"
+        align="center"
+        prop="deviceList"
+        min-width="180"
+      >
+        <template #default="scope">
+          <span>{{ getDeviceNames(scope.row.deviceList) }}</span>
+        </template>
+      </el-table-column>
       <el-table-column
         :label="t('EquipmentManagement.TaskManagement.taskType')"
         align="center"
@@ -209,6 +238,7 @@ import { DICT_TYPE } from '@/utils/dict'
 import { dateFormatter, dateFormatter2 } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { TaskManagementApi, TaskManagementVO } from '@/api/mes/taskManagement'
+import { DeviceLedgerApi, DeviceLedgerVO } from '@/api/mes/deviceledger'
 import { PlanMaintenanceApi } from '@/api/mes/planmaintenance'
 import TaskManagementForm from './TaskManagementForm.vue'
 
@@ -234,13 +264,15 @@ type PlanOption = {
 }
 
 const planOptions = ref<PlanOption[]>([])
+const deviceOptions = ref<{ id: number; label: string; raw?: DeviceLedgerVO }[]>([])
 
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   name: undefined as string | undefined,
   taskType: undefined as number | undefined,
-  projectForm: [] as string[]
+  projectForm: [] as string[],
+  deviceIds: [] as number[]
 })
 const queryFormRef = ref()
 
@@ -263,6 +295,30 @@ const ensurePlanOptionsLoaded = async () => {
   planOptions.value = (planRes?.list ?? []) as PlanOption[]
 }
 
+const ensureDeviceOptionsLoaded = async () => {
+  const deviceRes = await DeviceLedgerApi.getDeviceLedgerList()
+  const rows = (Array.isArray(deviceRes) ? deviceRes : deviceRes?.list ?? deviceRes?.data ?? []) as DeviceLedgerVO[]
+  deviceOptions.value = rows
+    .filter((item) => typeof item?.id === 'number')
+    .map((item) => ({
+      id: item.id,
+      label: `${item.deviceCode ?? ''} ${item.deviceName ?? ''}`.trim() || String(item.id),
+      raw: item
+    }))
+}
+
+const getDeviceNames = (value: any) => {
+  const ids = parseIdsValue(value)
+  if (!ids.length) return '-'
+  const names = ids
+    .map((id) => {
+      const option = deviceOptions.value.find((item) => String(item.id) === id)
+      return option?.raw?.deviceName ?? option?.label?.split(' ').slice(1).join(' ') ?? id
+    })
+    .filter(Boolean)
+  return names.length ? names.join('，') : '-'
+}
+
 const buildQueryParams = () => {
   return {
     ...queryParams,
@@ -370,6 +426,6 @@ const handleExport = async () => {
 }
 
 onMounted(() => {
-  Promise.all([ensurePlanOptionsLoaded(), getList()])
+  Promise.all([ensurePlanOptionsLoaded(), ensureDeviceOptionsLoaded(), getList()])
 })
 </script>