FastapiAdmin/fastapp/src/components/cu-picker/index.vue

<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>