leromro-mini/components/picker/index.vue

<template>
  <up-picker :show="show" :defaultIndex="pickValue.indexs" ref="uPickerRef" valueKey="id" @cancel="cancel" :columns="columns" @confirm="confirm" @change="changeHandler"></up-picker>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';


const props = defineProps({
  columnData: {
    type: Array,
    default: []
  }
});

const emit = defineEmits(['submit']);


const show = ref(false);

const pickValue = ref({
  indexs: [0, 0, 0],
});


/**
 * 
 * 根据下标获取显示数据
 */
function getDataByKeys(array, keys) {
  const result = [];
  let currentLevel = array;

  for (let i = 0; i < keys.length; i++) {
    const key = keys[i];
    const currentItems = currentLevel.map(item => item.businessName);
    result.push(currentItems);

    if (currentLevel[key] && currentLevel[key].children) {
      currentLevel = currentLevel[key].children;
    } else {
      // 如果没有 children，则在结果中添加一个空数组
      result.push([]);
      break;
    }
  }

  if (result.length > keys.length) {
    result.pop();
  }
  return result;
}



const columns = computed(() => {
  const data = props.columnData;
  const { indexs } = pickValue.value
  const result = getDataByKeys(data, indexs);
  console.log('=====>', result);
  console.log('data', data);
  return result;
});


const uPickerRef = ref(null)
const changeHandler = (e) => {
  console.log('e', e);
  pickValue.value = e;
};

/**
 * 
 * 根据下标获取id
 */
function getid(keys) {
  let currentLevel = props.columnData;

  for (let i = 0; i < keys.length; i++) {
    const key = keys[i];
    if (currentLevel[key] && currentLevel[key].children) {
      currentLevel = currentLevel[key].children;
    } else {
      if (currentLevel[key]) {
        return currentLevel[key].id;
      }
      break;
    }
  }

  return null; // 如果没有找到对应的项，返回 null
}


const confirm = (e) => {
  console.log(e);
  
  const id = getid(e.indexs);
  emit('submit', {key:  e.value.join('/'),value: id });
  show.value = false;
};

//根据id获取下标
function idToIndexs(array, targetId, path = []) {
    for (let i = 0; i < array.length; i++) {
        const item = array[i];
        const currentPath = path.concat(i);

        if (item.id === targetId) {
            return currentPath
        }

        if (item.children) {
            const result = idToIndexs(item.children, targetId, currentPath);
            if (result) {
                return result;
            }
        }
    }

    return null; // 如果没有找到对应的项，返回 null
}

function indexsToNames(indexs){
            let currentLevel = props.columnData;
    const names = [];

    for (let i = 0; i < indexs.length; i++) {
        const key = indexs[i];

        if (currentLevel[key]) {
            names.push(currentLevel[key].businessName);
            if (currentLevel[key].children) {
                currentLevel = currentLevel[key].children;
            }
        } else {
            break;
        }
    }

    return names;
        }
const piceInit = (id) => {
  try {
    console.log('piceInit-id',props.columnData,id);
  const indexs =  idToIndexs(props.columnData,id)
  console.log('piceInit-indexs',indexs);
  const names = indexsToNames(indexs)
  pickValue.value.indexs = indexs;

  return names.join('/')
  } catch (error) {
      console.log('piceInit-error',error);
      
  }
}

const cancel = () => {
  show.value = false;
};
defineExpose({
  show() {
    show.value = true;
  },
  piceInit
});
</script>