v-nuxt-ui 0.1.35 → 0.2.0

package/dist/runtime/components/sys/table/TableColumnList.d.vue.ts

@@ -0,0 +1,54 @@
+import type { TableColumn } from '#v/types';
+type __VLS_Props = {
+    initialColumns?: TableColumn[];
+};
+interface ColumnRow extends TableColumn {
+    _isDirty?: boolean;
+}
+/** 供父组件在提交时调用：创建新表后批量创建列 */
+declare function createAllColumns(tableId: number): Promise<void>;
+/** 供父组件在提交时调用：保存已有表的列变更 */
+declare function saveDirtyColumns(tableId: number): Promise<void>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    columns: import("vue").Ref<{
+        _isDirty?: boolean | undefined;
+        tableId?: number | undefined;
+        columnKey?: string | undefined;
+        label?: string | undefined;
+        labelI18nKey?: string | undefined;
+        order?: number | undefined;
+        width?: number | undefined;
+        fixed?: "left" | "right" | "" | undefined;
+        visible?: boolean | undefined;
+        id: number;
+        createdAt?: string | undefined;
+        updatedAt?: string | undefined;
+        version?: number | undefined;
+        createdBy?: number | undefined;
+        creator?: any;
+        updatedBy?: number | undefined;
+        updater?: any;
+    }[], ColumnRow[] | {
+        _isDirty?: boolean | undefined;
+        tableId?: number | undefined;
+        columnKey?: string | undefined;
+        label?: string | undefined;
+        labelI18nKey?: string | undefined;
+        order?: number | undefined;
+        width?: number | undefined;
+        fixed?: "left" | "right" | "" | undefined;
+        visible?: boolean | undefined;
+        id: number;
+        createdAt?: string | undefined;
+        updatedAt?: string | undefined;
+        version?: number | undefined;
+        createdBy?: number | undefined;
+        creator?: any;
+        updatedBy?: number | undefined;
+        updater?: any;
+    }[]>;
+    createAllColumns: typeof createAllColumns;
+    saveDirtyColumns: typeof saveDirtyColumns;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/sys/table/TableColumnList.vue

@@ -0,0 +1,196 @@
+<script setup>
+import { useOverlay } from "@nuxt/ui/composables";
+import TableColumnModal from "./TableColumnModal.vue";
+import { useTableColumnApi } from "#v/composables";
+import { ref, watch } from "vue";
+import ScrollArea from "#v/components/ScrollArea.vue";
+const props = defineProps({
+  initialColumns: { type: Array, required: false }
+});
+const overlay = useOverlay();
+const columnModal = overlay.create(TableColumnModal);
+const tableColumnApi = useTableColumnApi();
+const columns = ref([]);
+const deletedColumnIds = ref([]);
+watch(() => props.initialColumns, (val) => {
+  if (val && val.length && columns.value.length === 0) {
+    columns.value = val.map((col) => ({
+      ...col,
+      columnKey: col.columnKey ?? "",
+      label: col.label ?? "",
+      order: col.order ?? 0,
+      width: col.width ?? 100,
+      fixed: col.fixed ?? "",
+      visible: col.visible ?? true
+    }));
+  }
+}, { immediate: true });
+function addColumn() {
+  const maxOrder = columns.value.reduce((max, col) => Math.max(max, col.order ?? 0), 0);
+  const defaultCol = {
+    id: 0,
+    columnKey: "",
+    label: "",
+    order: maxOrder + 1,
+    width: 100,
+    fixed: "",
+    visible: true
+  };
+  columnModal.open({
+    column: defaultCol,
+    onSaveColumn: (col) => {
+      columns.value.push({ ...col, id: 0, _isDirty: true });
+    }
+  });
+}
+function removeColumn(index) {
+  const col = columns.value[index];
+  if (!col) return;
+  if (col.id !== 0) {
+    deletedColumnIds.value.push(col.id);
+  }
+  columns.value.splice(index, 1);
+}
+function editColumn(index) {
+  const col = columns.value[index];
+  if (!col) return;
+  columnModal.open({
+    column: col,
+    onSaveColumn: (updated) => {
+      columns.value[index] = { ...updated, id: col.id, _isDirty: true };
+    }
+  });
+}
+function fixedLabel(fixed) {
+  const map = { left: "\u56FA\u5B9A\u5DE6", right: "\u56FA\u5B9A\u53F3" };
+  return map[fixed] ?? "";
+}
+async function createAllColumns(tableId) {
+  for (const col of columns.value) {
+    await tableColumnApi.create(tableColumnApi.prune({
+      ...col,
+      tableId
+    }));
+  }
+}
+async function saveDirtyColumns(tableId) {
+  for (const col of columns.value) {
+    if (col._isDirty) {
+      const colData = {
+        id: col.id,
+        tableId,
+        columnKey: col.columnKey,
+        label: col.label,
+        order: col.order,
+        width: col.width,
+        fixed: col.fixed,
+        visible: col.visible
+      };
+      if (col.id === 0) {
+        await tableColumnApi.create(tableColumnApi.prune(colData));
+      } else {
+        await tableColumnApi.update(tableColumnApi.prune(colData));
+      }
+    }
+  }
+  for (const id of deletedColumnIds.value) {
+    await tableColumnApi.deleteById(id);
+  }
+}
+defineExpose({
+  columns,
+  createAllColumns,
+  saveDirtyColumns
+});
+</script>
+
+<template>
+  <div class="pt-6">
+    <div class="flex items-center justify-between mb-3">
+      <div>
+        <div class="font-semibold text-sm">
+          列配置
+        </div>
+        <div class="text-sm text-dimmed text-xs">
+          配置 Table 的列信息
+        </div>
+      </div>
+      <UButton
+        label="添加列"
+        icon="i-lucide-plus"
+        variant="soft"
+        size="sm"
+        @click="addColumn"
+      />
+    </div>
+
+    <div v-if="columns.length === 0" class="py-8 text-center text-dimmed text-xs">
+      暂无列配置，点击"添加列"创建
+    </div>
+    <ScrollArea v-else class="max-h-72 rounded-md border border-default">
+      <div class="flex flex-col divide-y divide-default">
+        <div
+          v-for="(col, index) in columns"
+          :key="col.id + '-' + index"
+          class="group flex items-center gap-3 px-3 py-2.5 transition-colors hover:bg-muted"
+        >
+          <!-- index box -->
+          <div class="flex size-8 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary text-xs font-semibold">
+            {{ col.order }}
+          </div>
+
+          <div class="min-w-0 flex-1">
+            <div class="flex items-center gap-2">
+              <span class="font-medium text-sm truncate">{{ col.label || "\u672A\u547D\u540D" }}</span>
+              <span class="text-xs text-dimmed font-mono truncate">{{ col.columnKey || "-" }}</span>
+            </div>
+            <div class="flex items-center gap-2 mt-0.5">
+              <span class="text-xs text-dimmed">宽 {{ col.width }}px</span>
+              <UBadge
+                v-if="col.fixed"
+                size="xs"
+                variant="subtle"
+                color="info"
+              >
+                {{ fixedLabel(col.fixed) }}
+              </UBadge>
+              <UBadge
+                v-if="!col.visible"
+                size="xs"
+                variant="subtle"
+                color="warning"
+              >
+                已隐藏
+              </UBadge>
+              <UBadge
+                v-if="col.id === 0"
+                size="xs"
+                variant="subtle"
+                color="success"
+              >
+                新增
+              </UBadge>
+            </div>
+          </div>
+
+          <div class="flex shrink-0 items-center opacity-0 group-hover:opacity-100 transition-opacity">
+            <UButton
+              icon="i-lucide-pencil"
+              variant="ghost"
+              size="xs"
+              color="neutral"
+              @click="editColumn(index)"
+            />
+            <UButton
+              icon="i-lucide-trash-2"
+              variant="ghost"
+              size="xs"
+              color="error"
+              @click="removeColumn(index)"
+            />
+          </div>
+        </div>
+      </div>
+    </ScrollArea>
+  </div>
+</template>

package/dist/runtime/components/sys/table/TableColumnList.vue.d.ts

@@ -0,0 +1,54 @@
+import type { TableColumn } from '#v/types';
+type __VLS_Props = {
+    initialColumns?: TableColumn[];
+};
+interface ColumnRow extends TableColumn {
+    _isDirty?: boolean;
+}
+/** 供父组件在提交时调用：创建新表后批量创建列 */
+declare function createAllColumns(tableId: number): Promise<void>;
+/** 供父组件在提交时调用：保存已有表的列变更 */
+declare function saveDirtyColumns(tableId: number): Promise<void>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    columns: import("vue").Ref<{
+        _isDirty?: boolean | undefined;
+        tableId?: number | undefined;
+        columnKey?: string | undefined;
+        label?: string | undefined;
+        labelI18nKey?: string | undefined;
+        order?: number | undefined;
+        width?: number | undefined;
+        fixed?: "left" | "right" | "" | undefined;
+        visible?: boolean | undefined;
+        id: number;
+        createdAt?: string | undefined;
+        updatedAt?: string | undefined;
+        version?: number | undefined;
+        createdBy?: number | undefined;
+        creator?: any;
+        updatedBy?: number | undefined;
+        updater?: any;
+    }[], ColumnRow[] | {
+        _isDirty?: boolean | undefined;
+        tableId?: number | undefined;
+        columnKey?: string | undefined;
+        label?: string | undefined;
+        labelI18nKey?: string | undefined;
+        order?: number | undefined;
+        width?: number | undefined;
+        fixed?: "left" | "right" | "" | undefined;
+        visible?: boolean | undefined;
+        id: number;
+        createdAt?: string | undefined;
+        updatedAt?: string | undefined;
+        version?: number | undefined;
+        createdBy?: number | undefined;
+        creator?: any;
+        updatedBy?: number | undefined;
+        updater?: any;
+    }[]>;
+    createAllColumns: typeof createAllColumns;
+    saveDirtyColumns: typeof saveDirtyColumns;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/sys/table/TableColumnModal.d.vue.ts

@@ -1,22 +1,12 @@
-import type { TableColumn, Table } from '#v/types';
+import type { TableColumn } from '#v/types';
 type __VLS_Props = {
-    table: Table;
-    column?: {
-        id: number;
-        columnKey: string;
-        label: string;
-        order: number;
-        width: number;
-        fixed: 'left' | 'right' | '';
-        visible: boolean;
-    };
+    column: TableColumn;
+    onSaveColumn: (col: TableColumn) => void;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (args_0: boolean) => any;
-    save: (args_0: Partial<TableColumn>) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClose?: ((args_0: boolean) => any) | undefined;
-    onSave?: ((args_0: Partial<TableColumn>) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/sys/table/TableColumnModal.vue

@@ -1,107 +1,39 @@
 <script setup>
-import { useTableColumnApi } from "#v/composables/api";
-import { ref } from "vue";
-import { useToast } from "@nuxt/ui/composables";
+import * as z from "zod";
+import FormCreateModalTemplate from "#v/components/form/create-modal-template/index.vue";
+import { useFormValues } from "#v/composables";
+import { computed, toRef } from "vue";
 const props = defineProps({
-  table: { type: Object, required: true },
-  column: { type: Object, required: false }
+  column: { type: Object, required: true },
+  onSaveColumn: { type: Function, required: true }
 });
-const emit = defineEmits(["close", "save"]);
-const tableColumnApi = useTableColumnApi();
-const saving = ref(false);
-const formData = ref({
-  columnKey: props.column?.columnKey ?? "",
-  label: props.column?.label ?? "",
-  order: props.column?.order ?? 0,
-  width: props.column?.width ?? 100,
-  fixed: props.column?.fixed ?? "",
-  visible: props.column?.visible ?? true
-});
-async function handleSave() {
-  saving.value = true;
-  try {
-    emit("save", {
-      id: props.column?.id,
-      columnKey: formData.value.columnKey,
-      label: formData.value.label,
-      order: formData.value.order,
-      width: formData.value.width,
-      fixed: formData.value.fixed,
-      visible: formData.value.visible
-    });
-    emit("close", true);
-  } catch (error) {
-    useToast().add({
-      title: "\u4FDD\u5B58\u5931\u8D25",
-      description: String(error),
-      color: "error",
-      icon: "i-lucide-x-circle"
-    });
-    emit("close", false);
-  } finally {
-    saving.value = false;
-  }
-}
+const emit = defineEmits(["close"]);
+const { newValues } = useFormValues(toRef(props.column), { id: 0 });
+const fixedItems = [
+  { label: "\u4E0D\u56FA\u5B9A", value: "" },
+  { label: "\u5DE6\u4FA7\u56FA\u5B9A", value: "left" },
+  { label: "\u53F3\u4FA7\u56FA\u5B9A", value: "right" }
+];
+const fields = computed(() => [
+  { name: "columnKey", type: "input", label: "\u5217\u6807\u8BC6", colSpan: "12", zodType: z.string().min(1, "\u5217\u6807\u8BC6\u4E0D\u80FD\u4E3A\u7A7A") },
+  { name: "label", type: "input", label: "\u663E\u793A\u540D", colSpan: "12", zodType: z.string().min(1, "\u663E\u793A\u540D\u4E0D\u80FD\u4E3A\u7A7A") },
+  { name: "order", type: "input-number", label: "\u987A\u5E8F", colSpan: "8", zodType: z.number() },
+  { name: "width", type: "input-number", label: "\u5BBD\u5EA6", colSpan: "8", zodType: z.number() },
+  { name: "fixed", type: "select", label: "\u56FA\u5B9A", colSpan: "8", items: fixedItems, enableEmptyOption: false, zodType: z.string().optional() },
+  { name: "visible", type: "switch", label: "\u662F\u5426\u663E\u793A", colSpan: "24", zodType: z.boolean().optional() }
+]);
 </script>
 
 <template>
-  <UModal
-    :title="`\u7F16\u8F91\u5217 - ${column?.columnKey ?? ''}`"
-    size="md"
-    :close="{ onClick: () => emit('close', false) }"
-  >
-    <div class="p-4 space-y-4">
-      <div class="grid grid-cols-2 gap-4">
-        <div>
-          <label class="text-sm font-medium mb-1 block">列标识</label>
-          <UInput v-model="formData.columnKey" placeholder="columnKey" />
-        </div>
-        <div>
-          <label class="text-sm font-medium mb-1 block">显示名</label>
-          <UInput v-model="formData.label" placeholder="显示名" />
-        </div>
-      </div>
-      <div class="grid grid-cols-3 gap-4">
-        <div>
-          <label class="text-sm font-medium mb-1 block">顺序</label>
-          <UInputNumber v-model="formData.order" :min="0" class="w-full" />
-        </div>
-        <div>
-          <label class="text-sm font-medium mb-1 block">宽度</label>
-          <UInputNumber v-model="formData.width" :min="0" class="w-full" />
-        </div>
-        <div>
-          <label class="text-sm font-medium mb-1 block">固定</label>
-          <USelect
-            v-model="formData.fixed"
-            :items="[
-  { label: '\u4E0D\u56FA\u5B9A', value: '' },
-  { label: '\u5DE6\u4FA7', value: 'left' },
-  { label: '\u53F3\u4FA7', value: 'right' }
-]"
-            class="w-full"
-          />
-        </div>
-      </div>
-      <div class="flex items-center gap-2">
-        <USwitch v-model="formData.visible" />
-        <span class="text-sm">{{ formData.visible ? "\u663E\u793A" : "\u9690\u85CF" }}</span>
-      </div>
-    </div>
-    <template #footer>
-      <UButton
-        label="取消"
-        color="neutral"
-        variant="subtle"
-        @click="emit('close', false)"
-      />
-      <UButton
-        label="保存"
-        color="primary"
-        variant="solid"
-        :loading="saving"
-        @click="handleSave"
-      />
-    </template>
-  </UModal>
+  <FormCreateModalTemplate
+    title="列配置"
+    :on-close="(ok) => emit('close', ok)"
+    :fields="fields"
+    :model-value="newValues"
+    @update-model-value="(newVal) => newValues = { id: 0, ...newVal }"
+    @submit="async () => {
+  props.onSaveColumn(newValues);
+  emit('close', true);
+}"
+  />
 </template>

package/dist/runtime/components/sys/table/TableColumnModal.vue.d.ts

@@ -1,22 +1,12 @@
-import type { TableColumn, Table } from '#v/types';
+import type { TableColumn } from '#v/types';
 type __VLS_Props = {
-    table: Table;
-    column?: {
-        id: number;
-        columnKey: string;
-        label: string;
-        order: number;
-        width: number;
-        fixed: 'left' | 'right' | '';
-        visible: boolean;
-    };
+    column: TableColumn;
+    onSaveColumn: (col: TableColumn) => void;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (args_0: boolean) => any;
-    save: (args_0: Partial<TableColumn>) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClose?: ((args_0: boolean) => any) | undefined;
-    onSave?: ((args_0: Partial<TableColumn>) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/sys/user/Table.vue

@@ -2,7 +2,7 @@
 import dayjs from "dayjs";
 import { useOverlay } from "@nuxt/ui/composables";
 import { isEmptyString } from "#v/utils";
-import { useDepartmentApi, useUserApi } from "#v/composables";
+import { useDepartmentApi, useRoleApi, useUserApi } from "#v/composables";
 import { booleanOptions, dateFormat, genderOptions, loginTypeOptions } from "#v/constants";
 import SysUsersCreateModal from "./CreateModal.vue";
 import UBadge from "@nuxt/ui/components/Badge.vue";
@@ -15,10 +15,6 @@ const columns = [
     accessorKey: "isResigned",
     header: "\u662F\u5426\u79BB\u804C",
     sortOption: true,
-    filterOption: {
-      type: "input",
-      initHide: false
-    },
     cell: ({ row }) => h(
       UBadge,
       {
@@ -56,16 +52,37 @@ const columns = [
     accessorKey: "supervisorId",
     header: "\u76F4\u5C5E\u4E0A\u7EA7",
     sortOption: true,
-    cell: ({ row }) => row.original.supervisor?.nickname
+    cell: ({ row }) => row.original.supervisor?.nickname,
+    filterOption: {
+      type: "async-select",
+      listApi: useUserApi().list,
+      searchFields: ["name"],
+      labelField: "name",
+      valueField: "id",
+      multiple: true,
+      defaultOpr: "in"
+    }
   },
   {
     accessorKey: "roles",
     header: "\u7CFB\u7EDF\u6743\u9650\u89D2\u8272",
-    cell: ({ row }) => row.original.roles?.map((role) => role.name).join(", ")
+    cell: ({ row }) => row.original.roles?.map((role) => role.name).join(", "),
+    filterOption: {
+      type: "async-select",
+      listApi: useRoleApi().list,
+      searchFields: ["name"],
+      labelField: "name",
+      valueField: "id",
+      multiple: true,
+      defaultOpr: "in"
+    }
   },
   {
     accessorKey: "username",
     header: "\u7528\u6237\u540D",
+    filterOption: {
+      type: "input"
+    },
     meta: {
       class: {
         td: "min-w-24"
@@ -75,23 +92,22 @@ const columns = [
   {
     accessorKey: "loginType",
     header: "\u767B\u5F55\u65B9\u5F0F",
+    filterOption: {
+      type: "select",
+      items: loginTypeOptions
+    },
     meta: {
       class: {
         td: "min-w-24"
       }
-    },
-    cell: ({ row }) => {
-      const loginTypes = row.original.loginType?.split(",");
-      return h(
-        "div",
-        { class: "flex flex-wrap items-center gap-1" },
-        [loginTypes?.map((loginType) => h(UBadge, { variant: "outline" }, () => loginTypeOptions.find((opt) => opt.value === loginType)?.label))]
-      );
     }
   },
   {
     accessorKey: "email",
-    header: "\u90AE\u7BB1"
+    header: "\u90AE\u7BB1",
+    filterOption: {
+      type: "input"
+    }
   },
   {
     accessorKey: "needFillWh",
@@ -128,17 +144,26 @@ const columns = [
     accessorKey: "entryDate",
     header: "\u5165\u804C\u65F6\u95F4",
     sortOption: true,
+    filterOption: {
+      type: "date-picker"
+    },
     cell: ({ row }) => dayjs(row.getValue("entryDate")).format(dateFormat)
   },
   {
     accessorKey: "resignDate",
     header: "\u79BB\u804C\u65F6\u95F4",
+    filterOption: {
+      type: "date-picker"
+    },
     sortOption: true,
     cell: ({ row }) => dayjs(row.getValue("resignDate")).format(dateFormat)
   },
   {
     accessorKey: "telNo",
     header: "\u7535\u8BDD",
+    filterOption: {
+      type: "input"
+    },
     meta: {
       class: {
         td: "min-w-24"
@@ -150,17 +175,9 @@ const columns = [
     header: "\u662F\u5426\u662F\u7CFB\u7EDF\u7BA1\u7406\u5458",
     sortOption: true,
     filterOption: {
-      type: "input",
-      initHide: false
-    },
-    cell: ({ row }) => h(
-      UBadge,
-      {
-        label: row.original.isAdmin ? "\u662F" : "\u5426",
-        variant: "soft",
-        color: row.original.isAdmin ? "primary" : "neutral"
-      }
-    )
+      type: "select",
+      items: booleanOptions
+    }
   }
 ];
 </script>

package/dist/runtime/components/table/permission/TablePermissionConfig.d.vue.ts

@@ -4,10 +4,10 @@ type __VLS_Props = {
     tableId?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: (args_0: boolean) => any;
+    close: (result: false | TablePermission) => any;
     save: (args_0: TablePermission) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClose?: ((args_0: boolean) => any) | undefined;
+    onClose?: ((result: false | TablePermission) => any) | undefined;
     onSave?: ((args_0: TablePermission) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/table/permission/TablePermissionConfig.vue

@@ -92,7 +92,7 @@ function onTableChange(tableId) {
   const table = tables.value.find((t) => t.id === tableId);
   if (table) {
     selectedTable.value = table;
-    fetchMergedColumns(table.tblName);
+    fetchMergedColumns(table.tblName ?? "");
   }
 }
 async function handleSave() {
@@ -114,7 +114,7 @@ async function handleSave() {
       columnPermissions: columnPermissions.value
     };
     emit("save", result);
-    emit("close", true);
+    emit("close", result);
   } catch (e) {
     useToast().add({
       title: "\u4FDD\u5B58\u5931\u8D25",
@@ -135,7 +135,7 @@ onMounted(async () => {
     const table = tables.value.find((t) => t.id === props.tableId);
     if (table) {
       selectedTable.value = table;
-      await fetchMergedColumns(table.tblName);
+      await fetchMergedColumns(table.tblName ?? "");
     }
   }
   if (props.permission) {