feat: ✨ 封装 picker 主键适配后端接口数据

src/components/VutPicker.vue

@@ -0,0 +1,174 @@
+<template>
+  <wd-picker
+    v-model="selectedValues"
+    :columns="pickerColumns"
+    :display-format="displayFormat"
+    :column-change="handleColumnChange"
+    :label="label"
+    :placeholder="pickerColumns.length ? '请选择' : '加载中...'"
+    :required="required"
+  />
+</template>
+
+<script setup lang="ts">
+import { PickerViewInstance } from "wot-design-uni/components/wd-picker-view/types";
+
+const props = defineProps({
+  modelValue: {
+    type: [Number, String],
+  },
+  data: {
+    required: true,
+    type: Array as () => OptionType[],
+  },
+  label: {
+    type: String,
+    default: "",
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emits = defineEmits(["update:modelValue"]);
+
+// 定义响应式变量
+const selectedValues = ref<number[] | string[]>([]);
+const pickerColumns = ref<Array<Array<{ label: string; value: string | number }>>>([]);
+
+// 监听 modelValue 的变化，更新 selectedValues
+watch(
+  () => props.modelValue,
+  (val) => {
+    selectedValues.value = val ? findTreePath(val) : [];
+  }
+);
+
+/**
+ * 根据节点值查找路径
+ * 示例数据： [{"value":"1","label":"公司","children":[{"value":"2","label":"研发部"}]}]
+ * 查找部门ID为2的路径，返回结果：[1, 2]
+ */
+const findTreePath = (value: number | string): number[] | string[] => {
+  const numberPath: number[] = [];
+  const stringPath: string[] = [];
+  const list = props.data;
+
+  const find = (value: number | string, list: OptionType[]): boolean => {
+    for (const item of list) {
+      if (item.value === value) {
+        typeof value === "number" ? numberPath.push(value) : stringPath.push(value);
+        return true;
+      }
+      if (item.children?.length) {
+        typeof item.value === "number" ? numberPath.push(item.value) : stringPath.push(item.value);
+        if (find(value, item.children)) return true;
+        typeof item.value === "number" ? numberPath.pop() : stringPath.pop();
+      }
+    }
+    return false;
+  };
+
+  find(value, list);
+  return typeof value === "number" ? numberPath : stringPath;
+};
+
+/**
+ * 将树形数据转换为 Picker 所需的 columns 格式
+ *
+ * @param treeData 树形数据
+ * @returns Picker 所需的 columns 格式
+ */
+const transformTreeToColumns = (
+  treeData: OptionType[]
+): Array<Array<{ label: string; value: string | number }>> => {
+  const columns: Array<Array<{ label: string; value: string | number }>> = [];
+
+  for (let depth = 0; depth <= selectedValues.value.length; depth++) {
+    const currentColumn = treeData.map((node) => ({ label: node.label, value: node.value }));
+    if (!currentColumn.length) break;
+
+    const selectedId = selectedValues.value[depth];
+    if (!currentColumn.some((item) => item.value === selectedId)) {
+      selectedValues.value[depth] = currentColumn[0]?.value;
+    }
+
+    columns.push(currentColumn);
+    const selectedNode = treeData.find((node) => node.value == selectedValues.value[depth]);
+    treeData = selectedNode?.children || [];
+  }
+
+  return columns;
+};
+
+// 监听 data 的变化，更新 pickerColumns
+watch(
+  () => props.data,
+  (val) => {
+    console.log("监听 data 的变化", val);
+    pickerColumns.value = transformTreeToColumns(val);
+  },
+  {
+    immediate: true,
+  }
+);
+
+/**
+ * 处理列的变化，动态更新后续列的数据
+ */
+function handleColumnChange(
+  pickerView: PickerViewInstance,
+  value: Record<string, any> | Record<string, any>[],
+  columnIndex: number,
+  resolve: () => void
+) {
+  const selectedValue = selectedValues.value[selectedValues.value.length - 1] || undefined;
+  emits("update:modelValue", selectedValue);
+
+  const item = Array.isArray(value) ? value[columnIndex] : value.value;
+  updatePickerColumns(pickerView, item.value, columnIndex);
+  resolve();
+}
+
+/**
+ * 动态更新所有后续列的数据
+ */
+function updatePickerColumns(
+  pickerView: PickerViewInstance,
+  parentId: string | number,
+  columnIndex: number
+) {
+  const nextColumnIndex = columnIndex + 1;
+  const children = findChildren(parentId, props.data);
+
+  if (children.length > 0 && nextColumnIndex < 3) {
+    pickerView.setColumnData(nextColumnIndex, children);
+    updatePickerColumns(pickerView, children[0].value, nextColumnIndex);
+  }
+}
+
+/**
+ * 根据节点value查找其子节点数据
+ */
+function findChildren(
+  parentId: string | number,
+  list: Record<string, any>[]
+): Record<string, any>[] {
+  for (const item of list) {
+    if (item.value === parentId && item.children) {
+      return item.children;
+    }
+    if (item.children) {
+      const children = findChildren(parentId, item.children);
+      if (children.length) return children;
+    }
+  }
+  return [];
+}
+
+// 格式化显示选中项（显示最后一个子节点的 label）
+const displayFormat = (items: any) => {
+  return items.length > 0 ? items[items.length - 1].label : "";
+};
+</script>