From ce5a34e3b0e426c360341457973607e32a0c3676 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?cls=5F=E5=AE=81=E6=B3=A2=E6=9C=AC=E6=9C=BA?=
 <908705107@qq.com>
Date: Tue, 9 Jun 2026 23:41:12 +0800
Subject: [PATCH] Restore lightweight form data selectors

---
 .gitignore                                    |   2 -
 .../zq-form/form-selector/form-selector.vue   | 497 +++++++++++++++-
 .../components/zq-form/form-selector/types.ts |  20 +-
 .../zq-form/table-selector/table-selector.vue | 530 +++++++++++++++++-
 .../zq-form/table-selector/types.ts           |  37 ++
 5 files changed, 1055 insertions(+), 31 deletions(-)
 create mode 100644 web/apps/web-ele/src/components/zq-form/table-selector/types.ts

diff --git a/.gitignore b/.gitignore
index f777bb6..ffaaba6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -269,8 +269,6 @@ web/apps/web-ele/src/views/ai-platform/workflow/editor/panels/SystemSummaryPanel
 !web/apps/web-ele/src/views/ai-platform/workflow/editor/nodes/SystemSummaryNode.vue
 !web/apps/web-ele/src/views/ai-platform/workflow/editor/panels/SystemSummaryPanel.vue
 web/apps/web-ele/src/views/wiki/
-web/apps/web-ele/src/components/zq-form/table-selector/types.ts
-
 # keep only lightweight form-editor barrel
 web/apps/web-ele/src/components/form-editor/*
 !web/apps/web-ele/src/components/form-editor/index.ts
diff --git a/web/apps/web-ele/src/components/zq-form/form-selector/form-selector.vue b/web/apps/web-ele/src/components/zq-form/form-selector/form-selector.vue
index f84ecd3..e368e62 100644
--- a/web/apps/web-ele/src/components/zq-form/form-selector/form-selector.vue
+++ b/web/apps/web-ele/src/components/zq-form/form-selector/form-selector.vue
@@ -1,23 +1,492 @@
 <script lang="ts" setup>
-defineOptions({ name: 'FormSelector' });
+import type { FormSelectorEmits, FormSelectorProps } from './types';
 
-defineProps<{
-  disabled?: boolean;
-  modelValue?: unknown;
-  placeholder?: string;
-}>();
+import { computed, ref, watch } from 'vue';
 
-const emit = defineEmits<{
-  'update:modelValue': [value: unknown];
-}>();
+import { Table2 } from '@vben/icons';
+import { $t } from '@vben/locales';
 
-function clearValue() {
-  emit('update:modelValue', undefined);
+import {
+  ElButton,
+  ElCheckbox,
+  ElEmpty,
+  ElInput,
+  ElOption,
+  ElPagination,
+  ElRadio,
+  ElSelect,
+  ElTable,
+  ElTableColumn,
+} from 'element-plus';
+
+import { requestClient } from '#/api/request';
+import { ZqDialog } from '#/components/zq-dialog';
+
+defineOptions({
+  name: 'FormSelector',
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<FormSelectorProps>(), {
+  multiple: false,
+  collapseTags: false,
+  maxCollapseTags: 1,
+  placeholder: () => $t('form-design.attribute.clickToSelect'),
+  disabled: false,
+  clearable: true,
+  dialogTitle: () => $t('form-design.attribute.selectData'),
+  dialogWidth: '1200px',
+  valueField: 'id',
+  labelField: 'name',
+  expandMultipleToRows: false,
+  externalSelectedValues: () => [],
+  initialFilters: undefined,
+});
+
+const emit = defineEmits<FormSelectorEmits>();
+
+const dialogVisible = ref(false);
+const loading = ref(false);
+const labelsLoading = ref(false);
+const tableData = ref<Array<Record<string, any>>>([]);
+const total = ref(0);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const searchKeyword = ref('');
+const selectedValues = ref<Set<string>>(new Set());
+const selectedItemsMap = ref<Map<string, Record<string, any>>>(new Map());
+
+function normalizeValues(value: null | string | string[] | undefined) {
+  if (!value) return [];
+  return Array.isArray(value) ? value.map(String) : [String(value)];
+}
+
+function toStringArray(value: unknown) {
+  if (!value) return [];
+  return Array.isArray(value) ? value.map(String) : [String(value)];
+}
+
+function getItemLabel(item: undefined | Record<string, any>, value: string) {
+  if (!item) return value;
+  return (
+    item[props.labelField] ??
+    item.name ??
+    item.title ??
+    item.label ??
+    item.text ??
+    value
+  );
+}
+
+function pickList(response: any) {
+  return Array.isArray(response)
+    ? response
+    : response?.items || response?.list || response?.data || [];
+}
+
+function normalizeFilters() {
+  const params: Record<string, any> = {};
+  for (const [field, filter] of Object.entries(props.initialFilters || {})) {
+    if (filter?.value === undefined || filter.value === null || filter.value === '') {
+      continue;
+    }
+    const op = filter.type || 'eq';
+    params[op === 'eq' ? field : `${field}__${op}`] = filter.value;
+  }
+  return params;
+}
+
+async function loadInitialLabels(values: string[]) {
+  if (!props.formCode || values.length === 0) return;
+
+  try {
+    const response = await requestClient.get(
+      `/api/online_dev/form-data/${props.formCode}/list`,
+      {
+        params: {
+          ...normalizeFilters(),
+          [`${props.valueField}__in`]: values.join(','),
+          pageSize: values.length,
+        },
+      },
+    );
+    for (const item of pickList(response)) {
+      selectedItemsMap.value.set(String(item[props.valueField]), item);
+    }
+  } catch (error) {
+    console.error('load form selector labels failed:', error);
+  }
+}
+
+function emitSelectItem() {
+  const items = [...selectedValues.value]
+    .map((value) => selectedItemsMap.value.get(value))
+    .filter(Boolean);
+  emit('select-item', props.multiple ? items : items[0]);
+}
+
+watch(
+  () => props.modelValue,
+  async (value) => {
+    const values = normalizeValues(value);
+    selectedValues.value = new Set(values);
+    const missingValues = values.filter((v) => !selectedItemsMap.value.has(v));
+    if (missingValues.length > 0) {
+      labelsLoading.value = true;
+      await loadInitialLabels(missingValues);
+      labelsLoading.value = false;
+      if (!props.expandMultipleToRows) emitSelectItem();
+    }
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.formCode,
+  async () => {
+    const values = normalizeValues(props.modelValue);
+    const missingValues = values.filter((v) => !selectedItemsMap.value.has(v));
+    if (missingValues.length > 0) {
+      labelsLoading.value = true;
+      await loadInitialLabels(missingValues);
+      labelsLoading.value = false;
+      if (!props.expandMultipleToRows) emitSelectItem();
+    }
+  },
+);
+
+const selectValue = computed(() => {
+  if (labelsLoading.value) return props.multiple ? [] : '';
+
+  if (props.expandMultipleToRows) {
+    const values = normalizeValues(props.modelValue);
+    return props.multiple ? values : values[0] || '';
+  }
+
+  const values = [...selectedValues.value];
+  return props.multiple ? values : values[0] || '';
+});
+
+const selectOptions = computed(() => {
+  const values = props.expandMultipleToRows
+    ? normalizeValues(props.modelValue)
+    : [...selectedValues.value];
+  return values.map((value) => ({
+    value,
+    label: getItemLabel(selectedItemsMap.value.get(value), value),
+  }));
+});
+
+async function loadData() {
+  if (!props.formCode) {
+    tableData.value = [];
+    total.value = 0;
+    return;
+  }
+
+  loading.value = true;
+  try {
+    const params: Record<string, any> = {
+      ...normalizeFilters(),
+      page: currentPage.value,
+      pageSize: pageSize.value,
+    };
+    if (searchKeyword.value) {
+      params[`${props.labelField}__like`] = searchKeyword.value;
+    }
+    const response = await requestClient.get(
+      `/api/online_dev/form-data/${props.formCode}/list`,
+      { params },
+    );
+    const rows = pickList(response);
+    tableData.value = rows;
+    total.value = Number(response?.total ?? rows.length);
+
+    for (const row of rows) {
+      const value = String(row[props.valueField]);
+      if (selectedValues.value.has(value)) selectedItemsMap.value.set(value, row);
+    }
+  } catch (error) {
+    console.error('load form selector data failed:', error);
+    tableData.value = [];
+    total.value = 0;
+  } finally {
+    loading.value = false;
+  }
+}
+
+function openDialog() {
+  if (props.disabled) return;
+
+  if (props.expandMultipleToRows) {
+    for (const value of toStringArray(props.externalSelectedValues)) {
+      selectedValues.value.add(value);
+    }
+    selectedValues.value = new Set(selectedValues.value);
+  }
+
+  dialogVisible.value = true;
+  loadData();
+}
+
+function handleSearch() {
+  currentPage.value = 1;
+  loadData();
+}
+
+function handlePageChange(page: number) {
+  currentPage.value = page;
+  loadData();
+}
+
+function handleSizeChange(size: number) {
+  pageSize.value = size;
+  currentPage.value = 1;
+  loadData();
+}
+
+function getRowValue(row: Record<string, any>) {
+  return String(row[props.valueField]);
+}
+
+function isRowSelected(row: Record<string, any>) {
+  return selectedValues.value.has(getRowValue(row));
+}
+
+function toggleRow(row: Record<string, any>, checked?: boolean | number | string) {
+  const value = getRowValue(row);
+  if (props.multiple) {
+    const nextChecked = checked ?? !selectedValues.value.has(value);
+    if (nextChecked) {
+      selectedValues.value.add(value);
+      selectedItemsMap.value.set(value, row);
+    } else {
+      selectedValues.value.delete(value);
+      selectedItemsMap.value.delete(value);
+    }
+    selectedValues.value = new Set(selectedValues.value);
+    return;
+  }
+
+  selectedValues.value = new Set([value]);
+  selectedItemsMap.value.clear();
+  selectedItemsMap.value.set(value, row);
+}
+
+const isAllSelected = computed(
+  () =>
+    tableData.value.length > 0 &&
+    tableData.value.every((row) => isRowSelected(row)),
+);
+
+const isIndeterminate = computed(() => {
+  const selectedCount = tableData.value.filter((row) => isRowSelected(row)).length;
+  return selectedCount > 0 && selectedCount < tableData.value.length;
+});
+
+function handleSelectAll(checked: boolean | number | string) {
+  for (const row of tableData.value) toggleRow(row, checked);
+}
+
+function handleConfirm() {
+  const values = [...selectedValues.value];
+  const result = props.multiple ? values : values[0] || null;
+
+  emit('update:modelValue', result);
+  emit('change', result);
+  emitSelectItem();
+  dialogVisible.value = false;
+}
+
+function handleClear() {
+  selectedValues.value = new Set();
+  selectedItemsMap.value.clear();
+  emit('update:modelValue', props.multiple ? [] : null);
+  emit('change', props.multiple ? [] : null);
+  emit('select-item', undefined);
+}
+
+function handleRemoveTag(value: string) {
+  selectedValues.value.delete(value);
+  selectedItemsMap.value.delete(value);
+  selectedValues.value = new Set(selectedValues.value);
+
+  const values = [...selectedValues.value];
+  const result = props.multiple ? values : values[0] || null;
+  emit('update:modelValue', result);
+  emit('change', result);
+  emitSelectItem();
 }
 </script>
 
 <template>
-  <ElButton :disabled="disabled" plain @click="clearValue">
-    {{ placeholder || 'Form selector unavailable' }}
-  </ElButton>
+  <div class="form-selector">
+    <ElSelect
+      :model-value="selectValue"
+      :multiple="multiple"
+      :placeholder="labelsLoading ? $t('common.loading') : placeholder"
+      :disabled="disabled"
+      :clearable="clearable"
+      :loading="labelsLoading"
+      :collapse-tags="collapseTags"
+      :collapse-tags-tooltip="collapseTags"
+      :max-collapse-tags="maxCollapseTags"
+      :suffix-icon="Table2"
+      class="w-full"
+      popper-class="form-selector-popper-hidden"
+      @click="openDialog"
+      @clear="handleClear"
+      @remove-tag="handleRemoveTag"
+    >
+      <ElOption
+        v-for="item in selectOptions"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </ElSelect>
+
+    <ZqDialog
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      :width="dialogWidth"
+      append-to-body
+      destroy-on-close
+      :show-fullscreen-button="false"
+      class="form-selector-dialog h-[90%]"
+    >
+      <div v-if="formCode" class="form-selector-content flex h-[650px] flex-col">
+        <div class="mb-4 flex shrink-0 items-center gap-2">
+          <ElInput
+            v-model="searchKeyword"
+            :placeholder="$t('form-design.search')"
+            clearable
+            class="w-64"
+            @change="handleSearch"
+            @keyup.enter="handleSearch"
+          />
+          <ElButton type="primary" @click="handleSearch">
+            {{ $t('common.search') }}
+          </ElButton>
+        </div>
+
+        <div class="min-h-0 flex-1">
+          <ElTable
+            v-loading="loading"
+            :data="tableData"
+            border
+            stripe
+            height="100%"
+            :row-class-name="
+              ({ row }: any) => (isRowSelected(row) ? 'selected-row' : '')
+            "
+            style="width: 100%"
+            @row-click="toggleRow"
+          >
+            <ElTableColumn v-if="!multiple" width="55" align="center">
+              <template #default="{ row }">
+                <ElRadio
+                  :model-value="isRowSelected(row) ? getRowValue(row) : ''"
+                  :value="getRowValue(row)"
+                  @click.stop
+                  @change="toggleRow(row)"
+                >
+                  <span></span>
+                </ElRadio>
+              </template>
+            </ElTableColumn>
+            <ElTableColumn v-else width="55" align="center">
+              <template #header>
+                <ElCheckbox
+                  :model-value="isAllSelected"
+                  :indeterminate="isIndeterminate"
+                  @change="handleSelectAll"
+                />
+              </template>
+              <template #default="{ row }">
+                <ElCheckbox
+                  :model-value="isRowSelected(row)"
+                  @click.stop
+                  @change="toggleRow(row, $event)"
+                />
+              </template>
+            </ElTableColumn>
+            <ElTableColumn :prop="labelField" :label="$t('form-design.attribute.nodeLabel')" />
+            <ElTableColumn :prop="valueField" :label="$t('form-design.attribute.nodeValue')" width="180" />
+            <template #empty>
+              <ElEmpty :description="$t('common.noData')" />
+            </template>
+          </ElTable>
+        </div>
+      </div>
+      <div v-else class="no-form-code">
+        {{ $t('form-design.attribute.selectFormFirst') }}
+      </div>
+
+      <template #footer>
+        <div class="flex w-full items-center">
+          <div class="flex-shrink-0">
+            <ElPagination
+              v-if="formCode"
+              v-model:current-page="currentPage"
+              v-model:page-size="pageSize"
+              :total="total"
+              :page-sizes="[10, 20, 50, 100]"
+              layout="total, sizes, prev, pager, next"
+              small
+              @current-change="handlePageChange"
+              @size-change="handleSizeChange"
+            />
+          </div>
+          <div class="flex flex-1 justify-center text-sm text-[var(--el-text-color-secondary)]">
+            {{
+              $t('form-design.attribute.selectedCount', {
+                count: selectedValues.size,
+              })
+            }}
+          </div>
+          <div class="flex flex-shrink-0 gap-2">
+            <ElButton @click="dialogVisible = false">
+              {{ $t('common.cancel') }}
+            </ElButton>
+            <ElButton type="primary" @click="handleConfirm">
+              {{ $t('common.ok') }}
+            </ElButton>
+          </div>
+        </div>
+      </template>
+    </ZqDialog>
+  </div>
 </template>
+
+<style scoped>
+.form-selector {
+  width: 100%;
+}
+
+.form-selector-content :deep(.selected-row) {
+  background-color: var(--el-color-primary-light-9) !important;
+}
+
+.form-selector-content :deep(.el-table__row) {
+  cursor: pointer;
+}
+
+.no-form-code {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  color: var(--el-text-color-secondary);
+}
+</style>
+
+<style>
+.form-selector-popper-hidden {
+  display: none !important;
+}
+
+.form-selector-dialog .el-dialog__body {
+  padding: 16px;
+}
+</style>
diff --git a/web/apps/web-ele/src/components/zq-form/form-selector/types.ts b/web/apps/web-ele/src/components/zq-form/form-selector/types.ts
index 3bed226..5173886 100644
--- a/web/apps/web-ele/src/components/zq-form/form-selector/types.ts
+++ b/web/apps/web-ele/src/components/zq-form/form-selector/types.ts
@@ -1,5 +1,23 @@
 export interface FormSelectorProps {
-  disabled?: boolean;
+  modelValue?: null | string | string[];
+  formCode?: string;
+  valueField?: string;
+  labelField?: string;
   multiple?: boolean;
+  collapseTags?: boolean;
+  maxCollapseTags?: number;
   placeholder?: string;
+  disabled?: boolean;
+  clearable?: boolean;
+  dialogTitle?: string;
+  dialogWidth?: string;
+  expandMultipleToRows?: boolean;
+  externalSelectedValues?: string[];
+  initialFilters?: Record<string, { type: string; value: any }>;
+}
+
+export interface FormSelectorEmits {
+  (e: 'update:modelValue', value: null | string | string[]): void;
+  (e: 'change', value: null | string | string[]): void;
+  (e: 'select-item', item: any): void;
 }
diff --git a/web/apps/web-ele/src/components/zq-form/table-selector/table-selector.vue b/web/apps/web-ele/src/components/zq-form/table-selector/table-selector.vue
index c43e4da..7912e9a 100644
--- a/web/apps/web-ele/src/components/zq-form/table-selector/table-selector.vue
+++ b/web/apps/web-ele/src/components/zq-form/table-selector/table-selector.vue
@@ -1,23 +1,525 @@
 <script lang="ts" setup>
-defineOptions({ name: 'TableSelector' });
+import type {
+  TableSelectorColumn,
+  TableSelectorEmits,
+  TableSelectorProps,
+} from './types';
 
-defineProps<{
-  disabled?: boolean;
-  modelValue?: unknown;
-  placeholder?: string;
-}>();
+import { computed, ref, watch } from 'vue';
 
-const emit = defineEmits<{
-  'update:modelValue': [value: unknown];
-}>();
+import { Table2 } from '@vben/icons';
+import { $t } from '@vben/locales';
 
-function clearValue() {
-  emit('update:modelValue', undefined);
+import {
+  ElButton,
+  ElCheckbox,
+  ElEmpty,
+  ElInput,
+  ElOption,
+  ElPagination,
+  ElRadio,
+  ElSelect,
+  ElTable,
+  ElTableColumn,
+} from 'element-plus';
+
+import { requestClient } from '#/api/request';
+import { ZqDialog } from '#/components/zq-dialog';
+
+defineOptions({
+  name: 'TableSelector',
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<TableSelectorProps>(), {
+  multiple: false,
+  placeholder: () => $t('form-design.attribute.clickToSelect'),
+  disabled: false,
+  clearable: true,
+  dialogTitle: () => $t('form-design.attribute.selectData'),
+  dialogWidth: '800px',
+  columns: () => [],
+  labelField: 'label',
+  valueField: 'value',
+  dataSourceType: 'static',
+  apiMethod: 'GET',
+  searchFields: () => [],
+  collapseTags: false,
+  options: () => [],
+});
+
+const emit = defineEmits<TableSelectorEmits>();
+
+const dialogVisible = ref(false);
+const loading = ref(false);
+const tableData = ref<Array<Record<string, any>>>([]);
+const total = ref(0);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const searchKeyword = ref('');
+const selectedValues = ref<Set<string>>(new Set());
+const selectedItemsMap = ref<Map<string, Record<string, any>>>(new Map());
+const labelsLoading = ref(false);
+
+function normalizeValues(value: undefined | string | string[]) {
+  if (!value) return [];
+  return Array.isArray(value) ? value.map(String) : [String(value)];
+}
+
+function pickList(response: any) {
+  return Array.isArray(response)
+    ? response
+    : response?.items || response?.list || response?.data || [];
+}
+
+function pickTotal(response: any, fallback: number) {
+  return Number(response?.total ?? response?.count ?? fallback);
+}
+
+function getItemLabel(item: undefined | Record<string, any>, value: string) {
+  if (!item) return value;
+  return (
+    item[props.labelField] ??
+    item.name ??
+    item.title ??
+    item.label ??
+    item.text ??
+    value
+  );
+}
+
+async function loadInitialLabels(values: string[]) {
+  if (values.length === 0) return;
+
+  try {
+    if (
+      props.dataSourceType === 'static' ||
+      (!props.dataSourceType && props.options.length > 0)
+    ) {
+      for (const item of props.options) {
+        const value = String(item[props.valueField]);
+        if (values.includes(value)) selectedItemsMap.value.set(value, item);
+      }
+      return;
+    }
+
+    if (props.dataSourceType === 'formData' && props.formCode) {
+      const response = await requestClient.get(
+        `/api/online_dev/form-data/${props.formCode}/list`,
+        {
+          params: {
+            [`${props.valueField}__in`]: values.join(','),
+            pageSize: values.length,
+          },
+        },
+      );
+      for (const item of pickList(response)) {
+        selectedItemsMap.value.set(String(item[props.valueField]), item);
+      }
+      return;
+    }
+
+    if (props.dataSourceType === 'dict' && props.dictCode) {
+      const response = await requestClient.get(
+        `/api/core/dict_item/by/dict_code/${props.dictCode}`,
+      );
+      for (const item of pickList(response)) {
+        const value = String(item[props.valueField]);
+        if (values.includes(value)) selectedItemsMap.value.set(value, item);
+      }
+      return;
+    }
+
+    if (props.dataSourceType === 'dataSource' && props.dataSourceCode) {
+      const response = await requestClient.get(
+        `/api/core/data-source/execute/${props.dataSourceCode}`,
+      );
+      for (const item of pickList(response)) {
+        const value = String(item[props.valueField]);
+        if (values.includes(value)) selectedItemsMap.value.set(value, item);
+      }
+    }
+  } catch (error) {
+    console.error('load selector labels failed:', error);
+  }
+}
+
+function emitSelectItem() {
+  const selectedItems = [...selectedValues.value]
+    .map((value) => selectedItemsMap.value.get(value))
+    .filter(Boolean);
+  emit('select-item', props.multiple ? selectedItems : selectedItems[0]);
+}
+
+watch(
+  () => props.modelValue,
+  async (value) => {
+    const values = normalizeValues(value);
+    selectedValues.value = new Set(values);
+    const missingValues = values.filter((v) => !selectedItemsMap.value.has(v));
+    if (missingValues.length > 0) {
+      labelsLoading.value = true;
+      await loadInitialLabels(missingValues);
+      labelsLoading.value = false;
+      emitSelectItem();
+    }
+  },
+  { immediate: true },
+);
+
+const displayTags = computed(() =>
+  [...selectedValues.value].map((value) => ({
+    value,
+    label: getItemLabel(selectedItemsMap.value.get(value), value),
+  })),
+);
+
+const selectDisplayValue = computed(() => {
+  const values = [...selectedValues.value];
+  return props.multiple ? values : values[0];
+});
+
+const showPagination = computed(
+  () =>
+    props.dataSourceType === 'formData' ||
+    props.dataSourceType === 'api' ||
+    total.value > pageSize.value,
+);
+
+const displayColumns = computed<TableSelectorColumn[]>(() => {
+  if (props.columns.length > 0) return props.columns;
+  return [
+    { field: props.labelField, label: $t('form-design.attribute.nodeLabel') },
+    { field: props.valueField, label: $t('form-design.attribute.nodeValue') },
+  ];
+});
+
+async function loadData() {
+  loading.value = true;
+  try {
+    let data: Array<Record<string, any>> = [];
+    let totalCount = 0;
+
+    if (
+      props.dataSourceType === 'static' ||
+      (!props.dataSourceType && props.options.length > 0)
+    ) {
+      const keyword = searchKeyword.value.trim().toLowerCase();
+      data = keyword
+        ? props.options.filter((item) =>
+            [props.labelField, props.valueField].some((field) =>
+              String(item[field] ?? '')
+                .toLowerCase()
+                .includes(keyword),
+            ),
+          )
+        : props.options;
+      totalCount = data.length;
+    } else if (props.dataSourceType === 'formData' && props.formCode) {
+      const params: Record<string, any> = {
+        page: currentPage.value,
+        pageSize: pageSize.value,
+      };
+      if (searchKeyword.value) {
+        const searchField = props.searchFields[0] || props.labelField;
+        params[`${searchField}__like`] = searchKeyword.value;
+      }
+      const response = await requestClient.get(
+        `/api/online_dev/form-data/${props.formCode}/list`,
+        { params },
+      );
+      data = pickList(response);
+      totalCount = pickTotal(response, data.length);
+    } else if (props.dataSourceType === 'dict' && props.dictCode) {
+      const response = await requestClient.get(
+        `/api/core/dict_item/by/dict_code/${props.dictCode}`,
+      );
+      data = pickList(response);
+      totalCount = data.length;
+    } else if (props.dataSourceType === 'dataSource' && props.dataSourceCode) {
+      const response = await requestClient.get(
+        `/api/core/data-source/execute/${props.dataSourceCode}`,
+      );
+      data = pickList(response);
+      totalCount = data.length;
+    } else if (props.dataSourceType === 'api' && props.apiUrl) {
+      const query = {
+        page: currentPage.value,
+        pageSize: pageSize.value,
+        keyword: searchKeyword.value,
+      };
+      const response =
+        props.apiMethod === 'POST'
+          ? await requestClient.post(props.apiUrl, query)
+          : await requestClient.get(props.apiUrl, { params: query });
+      data = pickList(response);
+      totalCount = pickTotal(response, data.length);
+    }
+
+    tableData.value = data;
+    total.value = totalCount;
+    for (const item of data) {
+      const value = String(item[props.valueField]);
+      if (selectedValues.value.has(value)) selectedItemsMap.value.set(value, item);
+    }
+  } catch (error) {
+    console.error('load selector data failed:', error);
+    tableData.value = [];
+    total.value = 0;
+  } finally {
+    loading.value = false;
+  }
+}
+
+function openDialog() {
+  if (props.disabled) return;
+  dialogVisible.value = true;
+  loadData();
+}
+
+function handleSearch() {
+  currentPage.value = 1;
+  loadData();
+}
+
+function handlePageChange(page: number) {
+  currentPage.value = page;
+  loadData();
+}
+
+function handleSizeChange(size: number) {
+  pageSize.value = size;
+  currentPage.value = 1;
+  loadData();
+}
+
+function isRowSelected(row: Record<string, any>) {
+  return selectedValues.value.has(String(row[props.valueField]));
+}
+
+function getRowValue(row: Record<string, any>) {
+  return String(row[props.valueField]);
+}
+
+function toggleRow(row: Record<string, any>, checked?: boolean | number | string) {
+  const value = getRowValue(row);
+  if (props.multiple) {
+    const nextChecked = checked ?? !selectedValues.value.has(value);
+    if (nextChecked) {
+      selectedValues.value.add(value);
+      selectedItemsMap.value.set(value, row);
+    } else {
+      selectedValues.value.delete(value);
+      selectedItemsMap.value.delete(value);
+    }
+    selectedValues.value = new Set(selectedValues.value);
+    return;
+  }
+
+  selectedValues.value = new Set([value]);
+  selectedItemsMap.value.clear();
+  selectedItemsMap.value.set(value, row);
+}
+
+const isAllSelected = computed(
+  () =>
+    tableData.value.length > 0 &&
+    tableData.value.every((row) => isRowSelected(row)),
+);
+
+const isIndeterminate = computed(() => {
+  const selectedCount = tableData.value.filter((row) => isRowSelected(row)).length;
+  return selectedCount > 0 && selectedCount < tableData.value.length;
+});
+
+function handleSelectAll(checked: boolean | number | string) {
+  for (const row of tableData.value) toggleRow(row, checked);
+}
+
+function handleConfirm() {
+  const values = [...selectedValues.value];
+  const result = props.multiple ? values : values[0];
+  emit('update:modelValue', result);
+  emit('change', result);
+  emit('blur');
+  emitSelectItem();
+  dialogVisible.value = false;
+}
+
+function handleClear() {
+  selectedValues.value = new Set();
+  selectedItemsMap.value.clear();
+  emit('update:modelValue', props.multiple ? [] : undefined);
+  emit('change', props.multiple ? [] : undefined);
+  emit('select-item', undefined);
+}
+
+function handleRemoveTag(value: string) {
+  selectedValues.value.delete(value);
+  selectedItemsMap.value.delete(value);
+  selectedValues.value = new Set(selectedValues.value);
+  const values = [...selectedValues.value];
+  const result = props.multiple ? values : values[0];
+  emit('update:modelValue', result);
+  emit('change', result);
+  emitSelectItem();
 }
 </script>
 
 <template>
-  <ElButton :disabled="disabled" plain @click="clearValue">
-    {{ placeholder || 'Table selector unavailable' }}
-  </ElButton>
+  <div class="table-selector">
+    <ElSelect
+      :model-value="labelsLoading ? undefined : selectDisplayValue"
+      :placeholder="labelsLoading ? $t('common.loading') : placeholder"
+      :disabled="disabled"
+      :clearable="clearable"
+      :multiple="multiple"
+      :collapse-tags="multiple && collapseTags"
+      :collapse-tags-tooltip="multiple && collapseTags"
+      :loading="labelsLoading"
+      :suffix-icon="Table2"
+      class="w-full"
+      popper-class="table-selector-popper-hidden"
+      @click="openDialog"
+      @clear="handleClear"
+      @remove-tag="handleRemoveTag"
+    >
+      <ElOption
+        v-for="tag in displayTags"
+        :key="tag.value"
+        :label="tag.label"
+        :value="tag.value"
+      />
+    </ElSelect>
+
+    <ZqDialog v-model="dialogVisible" :title="dialogTitle" :width="dialogWidth">
+      <div class="table-selector-content flex h-[600px] flex-col">
+        <div class="mb-4 flex shrink-0 items-center gap-2">
+          <ElInput
+            v-model="searchKeyword"
+            :placeholder="$t('form-design.search')"
+            clearable
+            class="w-64"
+            @change="handleSearch"
+            @keyup.enter="handleSearch"
+          />
+          <ElButton type="primary" @click="handleSearch">
+            {{ $t('common.search') }}
+          </ElButton>
+        </div>
+
+        <div class="min-h-0 flex-1">
+          <ElTable
+            v-loading="loading"
+            :data="tableData"
+            border
+            stripe
+            height="100%"
+            :row-class-name="
+              ({ row }: any) => (isRowSelected(row) ? 'selected-row' : '')
+            "
+            style="width: 100%"
+            @row-click="toggleRow"
+          >
+            <ElTableColumn v-if="!multiple" width="55" align="center">
+              <template #default="{ row }">
+                <ElRadio
+                  :model-value="isRowSelected(row) ? getRowValue(row) : ''"
+                  :value="getRowValue(row)"
+                  @click.stop
+                  @change="toggleRow(row)"
+                >
+                  <span></span>
+                </ElRadio>
+              </template>
+            </ElTableColumn>
+            <ElTableColumn v-else width="55" align="center">
+              <template #header>
+                <ElCheckbox
+                  :model-value="isAllSelected"
+                  :indeterminate="isIndeterminate"
+                  @change="handleSelectAll"
+                />
+              </template>
+              <template #default="{ row }">
+                <ElCheckbox
+                  :model-value="isRowSelected(row)"
+                  @click.stop
+                  @change="toggleRow(row, $event)"
+                />
+              </template>
+            </ElTableColumn>
+            <ElTableColumn
+              v-for="col in displayColumns"
+              :key="col.field"
+              :prop="col.field"
+              :label="col.label"
+              :width="col.width"
+            />
+            <template #empty>
+              <ElEmpty :description="$t('common.noData')" />
+            </template>
+          </ElTable>
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="flex w-full items-center">
+          <div class="flex-shrink-0">
+            <ElPagination
+              v-if="showPagination"
+              v-model:current-page="currentPage"
+              v-model:page-size="pageSize"
+              :total="total"
+              :page-sizes="[10, 20, 50, 100]"
+              layout="total, sizes, prev, pager, next"
+              small
+              @current-change="handlePageChange"
+              @size-change="handleSizeChange"
+            />
+          </div>
+          <div class="flex flex-1 justify-center">
+            <span
+              v-if="selectedValues.size > 0"
+              class="text-sm text-[var(--el-text-color-secondary)]"
+            >
+              {{
+                $t('form-design.attribute.selectedCount', {
+                  count: selectedValues.size,
+                })
+              }}
+            </span>
+          </div>
+          <div class="flex flex-shrink-0 gap-2">
+            <ElButton @click="dialogVisible = false">
+              {{ $t('common.cancel') }}
+            </ElButton>
+            <ElButton type="primary" @click="handleConfirm">
+              {{ $t('common.confirm') }}
+            </ElButton>
+          </div>
+        </div>
+      </template>
+    </ZqDialog>
+  </div>
 </template>
+
+<style scoped>
+.table-selector {
+  width: 100%;
+}
+
+.table-selector-content :deep(.selected-row) {
+  background-color: var(--el-color-primary-light-9) !important;
+}
+
+.table-selector-content :deep(.el-table__row) {
+  cursor: pointer;
+}
+</style>
+
+<style>
+.table-selector-popper-hidden {
+  display: none !important;
+}
+</style>
diff --git a/web/apps/web-ele/src/components/zq-form/table-selector/types.ts b/web/apps/web-ele/src/components/zq-form/table-selector/types.ts
new file mode 100644
index 0000000..17e50e8
--- /dev/null
+++ b/web/apps/web-ele/src/components/zq-form/table-selector/types.ts
@@ -0,0 +1,37 @@
+export interface TableSelectorColumn {
+  field: string;
+  label: string;
+  width?: number | string;
+}
+
+export interface TableSelectorProps {
+  modelValue?: string | string[];
+  multiple?: boolean;
+  placeholder?: string;
+  disabled?: boolean;
+  clearable?: boolean;
+  dialogTitle?: string;
+  dialogWidth?: string;
+  columns?: TableSelectorColumn[];
+  labelField?: string;
+  valueField?: string;
+  dataSourceType?: 'api' | 'dataSource' | 'dict' | 'formData' | 'static';
+  dictCode?: string;
+  dataSourceCode?: string;
+  formCode?: string;
+  apiUrl?: string;
+  apiMethod?: 'GET' | 'POST';
+  searchFields?: string[];
+  collapseTags?: boolean;
+  options?: Array<Record<string, any>>;
+}
+
+export interface TableSelectorEmits {
+  (e: 'update:modelValue', value: string | string[] | undefined): void;
+  (e: 'change', value: string | string[] | undefined): void;
+  (e: 'blur'): void;
+  (
+    e: 'select-item',
+    item: Record<string, any> | Record<string, any>[] | undefined,
+  ): void;
+}