tmagic-editor/packages/editor/src/fields/CondOpSelect.vue

<template>
  <TMagicSelect
    :model-value="model[name]"
    clearable
    filterable
    :size="size"
    :disabled="disabled"
    @change="fieldChangeHandler"
  >
    <component
      v-for="option in options"
      class="tmagic-design-option"
      :key="option.value"
      :is="optionComponent?.component || 'el-option'"
      v-bind="
        optionComponent?.props({
          label: option.text,
          value: option.value,
        }) || {
          label: option.text,
          value: option.value,
        }
      "
    >
    </component>
  </TMagicSelect>
</template>

<script setup lang="ts">
import { computed } from 'vue';

import { getDesignConfig, TMagicSelect } from '@tmagic/design';
import type { CondOpSelectConfig, FieldProps } from '@tmagic/form';

import { useServices } from '@editor/hooks/use-services';
import { getCondOpOptionsByFieldType, getFieldType } from '@editor/utils';

defineOptions({
  name: 'MFieldsCondOpSelect',
});

const emit = defineEmits<{
  change: [value: string];
}>();

const { dataSourceService } = useServices();

const props = defineProps<FieldProps<CondOpSelectConfig>>();

const optionComponent = getDesignConfig('components')?.option;

const options = computed(() => {
  const [id, ...fieldNames] = [...(props.config.parentFields || []), ...props.model.field];
  const ds = dataSourceService.getDataSourceById(id);
  const type = getFieldType(ds, fieldNames);
  return getCondOpOptionsByFieldType(type);
});

const fieldChangeHandler = (v: string) => {
  emit('change', v);
};
</script>