20260721173401

code/fms/fms-vue/src/components/FmsSelect.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { computed } from "vue";
+import { useLookupOptions } from "./select/useLookupOptions";
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps({
+  modelValue: { type: null, default: "" },
+  label: { type: String, default: "" },
+  labelKey: { type: String, default: "b_name" },
+  valueKey: { type: String, default: "b_id" },
+  viewName: { type: String, required: true },
+  searchCondition: { type: String, default: "" },
+  searchColumns: { type: Array, default: () => [] },
+  orderBy: { type: String, default: "" },
+  pageSize: { type: Number, default: 20 },
+  searchDelay: { type: Number, default: 300 },
+  allowClear: { type: Boolean, default: true },
+});
+
+const emit = defineEmits(["update:modelValue", "update:label", "change"]);
+const lookup = useLookupOptions(props);
+
+const options = computed(() => {
+  const items = lookup.rows.value.map((row) => ({
+    value: row[props.valueKey],
+    label: String(row[props.labelKey] ?? ""),
+    record: row,
+  }));
+
+  if (
+    props.modelValue !== "" &&
+    props.modelValue != null &&
+    props.label &&
+    !items.some((item) => item.value === props.modelValue)
+  ) {
+    items.unshift({ value: props.modelValue, label: props.label, record: null });
+  }
+
+  return items;
+});
+
+function onOpenChange(open) {
+  if (open) lookup.open();
+  else lookup.resetAfterClose();
+}
+
+function onSelect(value, option) {
+  emit("update:modelValue", value);
+  emit("update:label", String(option.label ?? ""));
+  emit("change", option.record ?? null);
+}
+
+function onChange(value) {
+  if (value !== undefined && value !== null) return;
+  emit("update:modelValue", "");
+  emit("update:label", "");
+  emit("change", null);
+}
+</script>
+
+<template>
+  <a-select
+    v-bind="$attrs"
+    class="fms-select"
+    :value="modelValue === '' ? undefined : modelValue"
+    :options="options"
+    :loading="lookup.loading.value"
+    :filter-option="false"
+    :allow-clear="allowClear"
+    show-search
+    @search="lookup.search"
+    @open-change="onOpenChange"
+    @popup-scroll="lookup.onPopupScroll"
+    @select="onSelect"
+    @change="onChange"
+  />
+</template>
+
+<style scoped>
+.fms-select {
+  width: 100%;
+}
+</style>