crm-app-vue3/components/person-picker/index.vue

<template>
  <view>
    <u-picker :show="show" :title="title" :columns="columns" keyName="label" ref="uPicker"
                @confirm="recyclePersonConfirm" @change="recyclePersonChange" @cancel='close'></u-picker>
  </view>
</template>

<script>
export default {
  name: 'personPicker',
  data() {
    return {
        show: false,
        columns: [],
    }
  },
  props: {
    title: {
      type: String,
      default: '请选择',
    },
  },
  emits: ['selectPerson'],
  methods: {
    open() {
        this.show = true;
        this.recyclePersonClick();
    },
    close() {
        this.columns = [];
        this.show = false;
    },
    recyclePersonConfirm({ columnIndex, value, values,index }) {
        this.$emit('selectPerson', value[value.length - 1] ? value[value.length - 1] : value[value.length - 2]);
        this.close();
    },
    recyclePersonChange(e) {
        const {
              columnIndex,
              value,
              values,
              picker = this.$refs.uPicker
          } = e
          
          // 清除当前层级之后的所有层级
          if (this.columns.length > columnIndex + 1) {
              this.columns = this.columns.slice(0, columnIndex + 1);
          }
          
          // 自动展开后续所有层级
          let currentItem = value[columnIndex];
          let currentLevel = columnIndex;
          
          // 循环检查并添加后续层级，直到遇到用户或没有子级
          while (currentItem && !currentItem.isUser && currentItem.children && currentItem.children.length > 0) {
              // 添加下一层级
              picker.setColumnValues(currentLevel + 1, currentItem.children);
              if (this.columns.length <= currentLevel + 1) {
                  this.columns.push(currentItem.children);
              } else {
                  this.columns[currentLevel + 1] = currentItem.children;
              }
              
              // 检查下一层级的第一个元素是否可以继续展开
              // 只自动展开第一个元素的层级，模拟常见的组织架构展开逻辑
              if (currentItem.children[0] && !currentItem.children[0].isUser && currentItem.children[0].children && currentItem.children[0].children.length > 0) {
                  currentItem = currentItem.children[0];
                  currentLevel++;
              } else {
                  break;
              }
          }
          
          // 如果当前是用户或没有子级，确保后续层级为空
          if (currentItem && (currentItem.isUser || !currentItem.children || currentItem.children.length === 0)) {
              if (this.columns.length > currentLevel + 1) {
                  this.columns = this.columns.slice(0, currentLevel + 1);
              }
          }
        },
    recyclePersonClick() {
        uni.$u.api.getCustomerManagerAllList().then(res => {
            this.columns = [res.data] || [];
            if (res.data && res.data.length > 0) {
                // 如果当前项不是用户且有子级，添加下一层
                if (!res.data[0].isUser && res.data[0].children && res.data[0].children.length > 0) {
                    this.columns.push(res.data[0].children);
                }
            }
        })
    },
  }
}
</script>

<style lang="scss" scoped>
</style>