style：设备台账-关键件/备件改成级联下拉框

src/views/mes/deviceledger/DeviceLedgerForm.vue

@@ -150,41 +150,35 @@
         </el-col>
         <el-col :span="24">
           <el-form-item :label="t('EquipmentManagement.EquipmentLedger.criticalComponent')" prop="componentIds">
-            <el-select
+            <el-cascader
-              v-model="formData.componentIds"
+              v-model="criticalComponentCascaderValue"
-              multiple
+              :options="criticalComponentPagedOptions"
+              :props="cascaderProps"
               filterable
               clearable
+              collapse-tags
+              :show-all-levels="false"
               :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderComponentIds')"
               class="!w-full"
-            >
+              @change="handleCriticalComponentChange"
-              <el-option
+            />
-                v-for="item in criticalComponentOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
           </el-form-item>
         </el-col>
 
         <el-col :span="24">
           <el-form-item :label="t('EquipmentManagement.EquipmentLedger.sparePart')" prop="beijianIds">
-            <el-select
+            <el-cascader
-              v-model="formData.beijianIds"
+              v-model="beijianCascaderValue"
-              multiple
+              :options="beijianPagedOptions"
+              :props="cascaderProps"
               filterable
               clearable
+              collapse-tags
+              :show-all-levels="false"
               :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderBeijianIds')"
               class="!w-full"
-            >
+              @change="handleBeijianChange"
-              <el-option
+            />
-                v-for="item in beijianOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
           </el-form-item>
         </el-col>
 
@@ -294,6 +288,31 @@ const deviceTypeTree = ref<DeviceTypeTreeVO[]>([])
 const users = ref<UserVO[]>([])
 const criticalComponentOptions = ref<{ label: string; value: number }[]>([])
 const beijianOptions = ref<{ label: string; value: number }[]>([])
+const PAGE_SIZE = 10
+
+const buildPagedOptions = (options: { label: string; value: number }[]) => {
+  const result: { label: string; value: string; children: { label: string; value: number }[] }[] = []
+  for (let i = 0; i < options.length; i += PAGE_SIZE) {
+    const pageIndex = result.length + 1
+    result.push({
+      label: String(pageIndex),
+      value: `page-${pageIndex}`,
+      children: options.slice(i, i + PAGE_SIZE).map((item) => ({
+        label: item.label,
+        value: item.value
+      }))
+    })
+  }
+  return result
+}
+
+const cascaderProps = { multiple: true, emitPath: false, checkStrictly: false }
+
+const criticalComponentCascaderValue = ref<(number | string)[]>([])
+const beijianCascaderValue = ref<(number | string)[]>([])
+
+const criticalComponentPagedOptions = computed(() => buildPagedOptions(criticalComponentOptions.value))
+const beijianPagedOptions = computed(() => buildPagedOptions(beijianOptions.value))
 
 const ensureOptionsLoaded = async () => {
   const [deviceTypeRes, userRes, criticalRes, beijianRes] = await Promise.all([
@@ -318,6 +337,48 @@ const ensureOptionsLoaded = async () => {
   })
 }
 
+watch(
+  () => formData.value.componentIds,
+  (ids) => {
+    criticalComponentCascaderValue.value = Array.isArray(ids) ? [...ids] : []
+  },
+  { immediate: true }
+)
+
+watch(
+  () => formData.value.beijianIds,
+  (ids) => {
+    beijianCascaderValue.value = Array.isArray(ids) ? [...ids] : []
+  },
+  { immediate: true }
+)
+
+const handleCriticalComponentChange = (values: (number | string)[]) => {
+  const validIds = new Set<number>()
+  const validMap = new Set(criticalComponentOptions.value.map((item) => item.value))
+  for (const v of values) {
+    const num = Number(v)
+    if (!Number.isNaN(num) && validMap.has(num)) {
+      validIds.add(num)
+    }
+  }
+  formData.value.componentIds = Array.from(validIds)
+  criticalComponentCascaderValue.value = Array.from(validIds)
+}
+
+const handleBeijianChange = (values: (number | string)[]) => {
+  const validIds = new Set<number>()
+  const validMap = new Set(beijianOptions.value.map((item) => item.value))
+  for (const v of values) {
+    const num = Number(v)
+    if (!Number.isNaN(num) && validMap.has(num)) {
+      validIds.add(num)
+    }
+  }
+  formData.value.beijianIds = Array.from(validIds)
+  beijianCascaderValue.value = Array.from(validIds)
+}
+
 /** 打开弹窗 */
 const open = async (type: string, id?: number, defaultDeviceTypeId?: number) => {
   dialogVisible.value = true