From 90feec2d617c14b1acffccfc3daec8fbf66f74bb Mon Sep 17 00:00:00 2001
From: ray <1490493387@qq.com>
Date: Mon, 18 Nov 2024 20:24:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20:sparkles:=20=E5=B0=81=E8=A3=85=20picke?=
 =?UTF-8?q?r=20=E4=B8=BB=E9=94=AE=E9=80=82=E9=85=8D=E5=90=8E=E7=AB=AF?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/VutPicker.vue | 174 +++++++++++++++++++++++++++++++++++
 1 file changed, 174 insertions(+)
 create mode 100644 src/components/VutPicker.vue

diff --git a/src/components/VutPicker.vue b/src/components/VutPicker.vue
new file mode 100644
index 0000000..55b703b
--- /dev/null
+++ b/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>