xiangyuan-gov-app/src/components/form/CascadePickerField.vue

<template>
  <Popup
    :show="popupShow"
    @close="onCancel"
    :closeIcon="false"
    position="bottom"
    closeable
  >
    <ActionSheetTitle 
      v-bind="titleProps"
      :title="title"
      @cancel="onCancel"
      @confirm="onConfirm"
    />
    <CascadePicker 
      v-bind="props"
      v-model:value="tempValue" 
      @selectTextChange="onSelectTextChange"
    />
  </Popup>
  <Text
    v-if="showSelectText"
    :size="30"
    :color="selectText ? 'text.content' : 'text.second'"
    :text="selectText || placeholder" 
    :maxWidth="300"
    v-bind="textProps"
  />
</template>

<script setup lang="ts">
import { ref, toRef } from 'vue';
import { useFieldChildValueInjector } from './FormContext';
import type { CascadePickerProps } from './CascadePicker.vue';
import Popup from '../dialog/Popup.vue';
import ActionSheetTitle, { type ActionSheetTitleProps } from '../dialog/ActionSheetTitle.vue';
import CascadePicker from './CascadePicker.vue';
import { usePickerFieldTempStorageData } from './PickerUtils';
import Text, { type TextProps } from '../basic/Text.vue';

export interface CascadePickerFieldProps extends Omit<CascadePickerProps, 'value'> {
  /**
   * 绑定值
   */
  modelValue?: (number|string)[];
  /**
   * 标题
   */
  title?: string,
  /**
   * 标题属性
   */
  titleProps?: Omit<ActionSheetTitleProps, 'title'>,
  /**
   * 是否显示选择的文本
   * @default true
   */
  showSelectText?: boolean,
  /**
   * 占位符
   * @default '请选择选项'
   */
  placeholder?: string,
  /**
   * 初始值
   */
  initalValue?: (number|string)[];
  /**
   * 是否立即更新绑定值
   * @default false
   */
  shouldUpdateValueImmediately?: boolean,
  /**
   * 显示的文本属性
   */
  textProps?: TextProps,
}

const emit = defineEmits([ 'update:modelValue', 'cancel', 'confirm', 'selectTextChange', 'tempValueChange' ]);
const props = withDefaults(defineProps<CascadePickerFieldProps>(), {
  modelValue: () => [],
  title: '请选择选项',
  placeholder: '请选择选项',
  titleProps: () => ({
    cancelText: '取消',
    confirmText: '确定',
  }),
  showSelectText: true,
});

const popupShow = ref(false);

const {
  value,
  updateValue,
} = useFieldChildValueInjector(
  toRef(props, 'modelValue'), 
  (v) => emit('update:modelValue', v),
  undefined,
  () => {
    popupShow.value = true;
  },
  props.initalValue,
);

const {
  onSelectTextChange,
  onCancel,
  onConfirm,
  selectText,
  tempValue,
} = usePickerFieldTempStorageData(
  value,
  updateValue,
  () => popupShow.value = false,
  emit as any,
  [],
  props.shouldUpdateValueImmediately,
);

defineOptions({
  options: {
    styleIsolation: "shared",
    virtualHost: true,
  }
})
</script>