OfficeSystem/components/customer/followup-form/FollowupPickers.vue

<template>
  <!-- 客户状态选择器 - uv-picker -->
  <uv-picker
    ref="statusPickerRef"
    :columns="statusColumns"
    keyName="dictLabel"
    :closeOnClickOverlay="false"
    @confirm="onStatusConfirm"
    @cancel="closeStatusPicker"
  ></uv-picker>

  <!-- 意向强度选择器 - uv-picker -->
  <uv-picker
    ref="intentLevelPickerRef"
    :columns="intentLevelColumns"
    keyName="dictLabel"
    :closeOnClickOverlay="false"
    @confirm="onIntentLevelConfirm"
    @cancel="closeIntentLevelPicker"
  ></uv-picker>

  <!-- 跟进方式选择器 - uv-picker -->
  <uv-picker
    ref="followTypePickerRef"
    :columns="followTypeColumns"
    keyName="dictLabel"
    :closeOnClickOverlay="false"
    @confirm="onFollowTypeConfirm"
    @cancel="closeFollowTypePicker"
  ></uv-picker>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue';

const props = defineProps({
  showStatusPicker: Boolean,
  showIntentLevelPicker: Boolean,
  showFollowTypePicker: Boolean,
  statusOptions: Array,
  intentLevelOptions: Array,
  followTypeOptions: Array,
  formData: Object
});

const emit = defineEmits(['update:formData', 'close-picker']);

// ref 引用
const statusPickerRef = ref(null);
const intentLevelPickerRef = ref(null);
const followTypePickerRef = ref(null);

// 使用 ref 存储 columns 数据，确保响应式
const statusColumns = ref([[]]);
const intentLevelColumns = ref([[]]);
const followTypeColumns = ref([[]]);

// 监听外部 prop 变化，打开对应的选择器并设置默认选中项
watch(() => props.showStatusPicker, async (val) => {
  if (val && statusPickerRef.value) {
    // 检查数据是否已加载
    if (!props.statusOptions || props.statusOptions.length === 0) {
      console.warn('客户状态数据未加载');
      return;
    }
    await nextTick();
    // 设置默认选中项
    if (props.formData?.customerStatus) {
      const index = props.statusOptions.findIndex(item => item.dictValue === props.formData.customerStatus);
      if (index >= 0 && statusPickerRef.value.setIndexs) {
        statusPickerRef.value.setIndexs([index], true);
      }
    }
    statusPickerRef.value.open();
  }
});
watch(() => props.showIntentLevelPicker, async (val) => {
  if (val && intentLevelPickerRef.value) {
    // 检查数据是否已加载
    if (!props.intentLevelOptions || props.intentLevelOptions.length === 0) {
      console.warn('意向强度数据未加载');
      return;
    }
    await nextTick();
    // 设置默认选中项
    if (props.formData?.customerIntentLevel) {
      const index = props.intentLevelOptions.findIndex(item => item.dictValue === props.formData.customerIntentLevel);
      if (index >= 0 && intentLevelPickerRef.value.setIndexs) {
        intentLevelPickerRef.value.setIndexs([index], true);
      }
    }
    intentLevelPickerRef.value.open();
  }
});
watch(() => props.showFollowTypePicker, async (val) => {
  if (val && followTypePickerRef.value) {
    // 检查数据是否已加载
    if (!props.followTypeOptions || props.followTypeOptions.length === 0) {
      console.warn('跟进方式数据未加载');
      return;
    }
    await nextTick();
    // 设置默认选中项
    if (props.formData?.type) {
      const index = props.followTypeOptions.findIndex(item => item.dictValue === props.formData.type);
      if (index >= 0 && followTypePickerRef.value.setIndexs) {
        followTypePickerRef.value.setIndexs([index], true);
      }
    }
    followTypePickerRef.value.open();
  }
});

// 监听数据变化，更新 columns
watch(() => props.statusOptions, (newOptions) => {
  if (newOptions && newOptions.length > 0) {
    statusColumns.value = [newOptions];
    console.log('客户状态 columns 已更新:', statusColumns.value, '数据长度:', newOptions.length);
  } else {
    statusColumns.value = [[]];
  }
}, { immediate: true, deep: true });

watch(() => props.intentLevelOptions, (newOptions) => {
  if (newOptions && newOptions.length > 0) {
    intentLevelColumns.value = [newOptions];
    console.log('意向强度 columns 已更新:', intentLevelColumns.value, '数据长度:', newOptions.length);
  } else {
    intentLevelColumns.value = [[]];
  }
}, { immediate: true, deep: true });

watch(() => props.followTypeOptions, (newOptions) => {
  if (newOptions && newOptions.length > 0) {
    followTypeColumns.value = [newOptions];
    console.log('跟进方式 columns 已更新:', followTypeColumns.value, '数据长度:', newOptions.length);
  } else {
    followTypeColumns.value = [[]];
  }
}, { immediate: true, deep: true });

// 关闭选择器
const closeStatusPicker = () => {
  emit('close-picker', 'status');
};

const closeIntentLevelPicker = () => {
  emit('close-picker', 'intentLevel');
};

const closeFollowTypePicker = () => {
  emit('close-picker', 'followType');
};

// 客户状态选择确认
const onStatusConfirm = (e) => {
  const selectedItems = e.value;
  if (selectedItems && selectedItems.length > 0) {
    const selectedItem = selectedItems[0];
    if (selectedItem && selectedItem.dictValue) {
      emit('update:formData', {
        ...props.formData,
        customerStatus: selectedItem.dictValue
      });
    }
  }
  closeStatusPicker();
};

// 意向强度选择确认
const onIntentLevelConfirm = (e) => {
  const selectedItems = e.value;
  if (selectedItems && selectedItems.length > 0) {
    const selectedItem = selectedItems[0];
    if (selectedItem && selectedItem.dictValue) {
      emit('update:formData', {
        ...props.formData,
        customerIntentLevel: selectedItem.dictValue
      });
    }
  }
  closeIntentLevelPicker();
};

// 跟进方式选择确认
const onFollowTypeConfirm = (e) => {
  const selectedItems = e.value;
  if (selectedItems && selectedItems.length > 0) {
    const selectedItem = selectedItems[0];
    if (selectedItem && selectedItem.dictValue) {
      emit('update:formData', {
        ...props.formData,
        type: selectedItem.dictValue
      });
    }
  }
  closeFollowTypePicker();
};
</script>

<style lang="scss" scoped>
// uv-picker 组件自带样式，不需要额外样式
</style>