v-nuxt-ui 0.1.32 → 0.1.33

package/dist/module.json

@@ -7,7 +7,7 @@
   "dependencies": [
     "@nuxt/ui"
   ],
-  "version": "0.1.32",
+  "version": "0.1.33",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/form/create-modal-template/index.d.vue.ts

@@ -5,7 +5,9 @@ declare const __VLS_export: <T extends BaseModel>(__VLS_props: NonNullable<Await
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: {};
+    slots: {
+        'after-form'?: (props: {}) => any;
+    };
     emit: {};
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

package/dist/runtime/components/form/create-modal-template/index.vue

@@ -53,6 +53,7 @@ async function onSubmitWithValidation(e) {
         @trigger-submit="onSubmitWithValidation"
         @update-model-value="onUpdateModelValue"
       />
+      <slot name="after-form" />
     </template>
     <template #footer>
       <UButton

package/dist/runtime/components/form/create-modal-template/index.vue.d.ts

@@ -5,7 +5,9 @@ declare const __VLS_export: <T extends BaseModel>(__VLS_props: NonNullable<Await
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: {};
+    slots: {
+        'after-form'?: (props: {}) => any;
+    };
     emit: {};
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

package/dist/runtime/components/sys/role/CreateModal.vue

@@ -1,6 +1,7 @@
 <script setup>
 import * as z from "zod";
 import FormCreateModalTemplate from "#v/components/form/create-modal-template/index.vue";
+import TablePermissionTab from "#v/components/table/permission/TablePermissionTab.vue";
 import { useFormSubmission, useFormValues, useMenuApi, useRoleApi } from "#v/composables";
 import { computed, onMounted, ref, toRef } from "vue";
 import { treeifyOptions } from "#v/utils";
@@ -15,7 +16,10 @@ const { onSubmit } = useFormSubmission(
   (close) => emit("close", close),
   (model) => emit("save", model),
   useRoleApi,
-  ["menus"]
+  ["menus"],
+  "id",
+  "version",
+  () => ({ tablePermissions: tablePermissions.value })
 );
 const menus = ref([]);
 const onFetchMenus = async () => {
@@ -56,6 +60,7 @@ const targetTreeItems = computed({
 function updateTargetTreeItems(newVal) {
   targetTreeItems.value = newVal;
 }
+const tablePermissions = ref(props.model.tablePermissions || []);
 const fields = computed(() => [
   { name: "name", type: "input", label: "\u89D2\u8272\u540D\u79F0", colSpan: "12", zodType: z.string().min(2, "\u540D\u79F0\u5B57\u6570\u4E0D\u8DB3") },
   { name: "isAdmin", type: "button-switch", label: "\u662F\u5426\u662F\u7CFB\u7EDF\u89D2\u8272", colSpan: "12", zodType: z.boolean() },
@@ -88,5 +93,12 @@ onMounted(async () => {
     :model-value="newValues"
     @update-model-value="updateModelValue"
     @submit="onSubmit"
-  />
+  >
+    <template #after-form>
+      <div class="border-t pt-4 mt-4">
+        <div class="font-semibold mb-2">Table 权限</div>
+        <TablePermissionTab v-model="tablePermissions" />
+      </div>
+    </template>
+  </FormCreateModalTemplate>
 </template>

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

@@ -0,0 +1,13 @@
+import type { Table } from '#v/types';
+type __VLS_Props = {
+    model: Table;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (args_0: boolean) => any;
+    save: (args_0: Table) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((args_0: boolean) => any) | undefined;
+    onSave?: ((args_0: Table) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,239 @@
+<script setup>
+import * as z from "zod";
+import { useOverlay } from "@nuxt/ui/composables";
+import FormCreateModalTemplate from "#v/components/form/create-modal-template/index.vue";
+import ProSimpleTable from "#v/components/simple-table/index.vue";
+import TableColumnModal from "./TableColumnModal.vue";
+import { useFormSubmission, useFormValues, useTableApi, useTableColumnApi } from "#v/composables";
+import { computed, ref, toRef, onMounted } from "vue";
+const props = defineProps({
+  model: { type: Object, required: true }
+});
+const emit = defineEmits(["close", "save"]);
+const overlay = useOverlay();
+const columnModal = overlay.create(TableColumnModal);
+const { oldValues, newValues } = useFormValues(toRef(props.model), { id: 0 });
+const tableColumnApi = useTableColumnApi();
+const columns = ref([]);
+const deletedColumnIds = ref([]);
+const loading = ref(false);
+async function fetchColumns() {
+  if (props.model.id === 0) return;
+  loading.value = true;
+  const { data } = await tableColumnApi.list({
+    pagination: { pageNum: 0, pageSize: 0 },
+    orderQuery: [{ field: "order", order: "asc" }],
+    whereQuery: {
+      items: [{ field: "tableId", value: props.model.id, opr: "eq" }]
+    }
+  });
+  if (data.value.data) {
+    columns.value = data.value.data.list.map((col) => ({
+      id: col.id,
+      columnKey: col.columnKey,
+      label: col.label,
+      order: col.order,
+      width: col.width,
+      fixed: col.fixed,
+      visible: col.visible
+    }));
+  }
+  loading.value = false;
+}
+onMounted(fetchColumns);
+function addColumn() {
+  const maxOrder = columns.value.reduce((max, col) => Math.max(max, col.order ?? 0), 0);
+  columns.value.push({
+    id: 0,
+    columnKey: "",
+    label: "",
+    order: maxOrder + 1,
+    width: 100,
+    fixed: "",
+    visible: true,
+    _isDirty: true
+  });
+}
+function removeColumn(index) {
+  const col = columns.value[index];
+  if (col.id !== 0) {
+    deletedColumnIds.value.push(col.id);
+  }
+  columns.value.splice(index, 1);
+}
+async function editColumn(index) {
+  const col = columns.value[index];
+  const isNew = col.id === 0;
+  if (isNew) {
+    return;
+  }
+  const result = await columnModal.open({ table: props.model, column: col }).result;
+  if (result) {
+    const updatedCol = result;
+    columns.value[index] = { ...updatedCol, _isDirty: true };
+  }
+}
+const tableColumns = [
+  {
+    accessorKey: "columnKey",
+    header: "\u5217\u6807\u8BC6",
+    size: 120
+  },
+  {
+    accessorKey: "label",
+    header: "\u663E\u793A\u540D",
+    size: 120
+  },
+  {
+    accessorKey: "order",
+    header: "\u987A\u5E8F",
+    size: 80
+  },
+  {
+    accessorKey: "width",
+    header: "\u5BBD\u5EA6",
+    size: 80
+  },
+  {
+    accessorKey: "fixed",
+    header: "\u56FA\u5B9A",
+    size: 80,
+    cell: ({ row }) => {
+      const fixedMap = { "": "\u5426", left: "\u5DE6", right: "\u53F3" };
+      return fixedMap[row.fixed] ?? "\u5426";
+    }
+  },
+  {
+    accessorKey: "visible",
+    header: "\u663E\u793A",
+    size: 60,
+    cell: ({ row }) => row.visible ? "\u662F" : "\u5426"
+  },
+  {
+    accessorKey: "actions",
+    header: "\u64CD\u4F5C",
+    size: 100,
+    cell: ({ row, index }) => {
+      return {
+        type: "div",
+        class: "flex gap-1",
+        children: [
+          {
+            type: "button",
+            label: "\u7F16\u8F91",
+            icon: "i-lucide-edit",
+            variant: "ghost",
+            size: "xs",
+            onClick: () => editColumn(index)
+          },
+          {
+            type: "button",
+            label: "\u5220\u9664",
+            icon: "i-lucide-trash-2",
+            color: "error",
+            variant: "ghost",
+            size: "xs",
+            onClick: () => removeColumn(index)
+          }
+        ]
+      };
+    }
+  }
+];
+const { onSubmit } = useFormSubmission(
+  toRef(oldValues),
+  toRef(newValues),
+  (close) => emit("close", close),
+  async (model) => {
+    const tableApi = useTableApi();
+    if (model.id === 0) {
+      const { data } = await tableApi.create(model);
+      const newTable = data.value?.data;
+      if (newTable && columns.value.length > 0) {
+        for (const col of columns.value) {
+          await tableColumnApi.create({
+            ...col,
+            tableId: newTable.id
+          });
+        }
+      }
+      emit("save", newTable);
+    } else {
+      for (const col of columns.value) {
+        if (col._isDirty) {
+          const colData = {
+            id: col.id,
+            tableId: props.model.id,
+            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);
+      }
+      emit("save", model);
+    }
+  },
+  useTableApi
+);
+const fields = computed(() => [
+  { name: "tblName", type: "input", label: "\u8868\u540D", colSpan: "12", zodType: z.string().min(1, "\u8868\u540D\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: "labelI18nKey", type: "input", label: "i18n Key", colSpan: "24", zodType: z.string().optional().nullable() }
+]);
+function updateModelValue(newVal) {
+  newValues.value = { id: 0, ...newVal };
+}
+</script>
+
+<template>
+  <FormCreateModalTemplate
+    title="Table"
+    :on-close="(ok) => emit('close', ok)"
+    :fields="fields"
+    :model-value="newValues"
+    @update-model-value="updateModelValue"
+    @submit="onSubmit"
+  >
+    <template #after-form>
+      <div class="border-t pt-4 mt-4">
+        <div class="flex items-center justify-between mb-2">
+          <div>
+            <div class="font-semibold">列配置</div>
+            <div class="text-sm text-dimmed">配置 Table 的列信息</div>
+          </div>
+          <UButton
+            label="添加列"
+            icon="i-lucide-plus"
+            variant="soft"
+            size="sm"
+            @click="addColumn"
+          />
+        </div>
+
+        <div v-if="loading" class="py-8 text-center text-dimmed">
+          加载中...
+        </div>
+        <div v-else-if="columns.length === 0" class="py-8 text-center text-dimmed">
+          暂无列配置，点击"添加列"创建
+        </div>
+        <ProSimpleTable
+          v-else
+          :data="columns"
+          :biz-columns="tableColumns"
+          class="max-h-64 overflow-y-auto"
+        />
+      </div>
+    </template>
+  </FormCreateModalTemplate>
+</template>

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

@@ -0,0 +1,13 @@
+import type { Table } from '#v/types';
+type __VLS_Props = {
+    model: Table;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (args_0: boolean) => any;
+    save: (args_0: Table) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((args_0: boolean) => any) | undefined;
+    onSave?: ((args_0: Table) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,116 @@
+<script setup>
+import { useOverlay } from "@nuxt/ui/composables";
+import { useTableApi, useTableColumnApi, useTablePermissionApi } from "#v/composables/api";
+import { getOprColumns } from "#v/constants";
+import TablePage from "#v/components/table/Page.vue";
+import CreateModal from "./CreateModal.vue";
+import { h, ref, watch } from "vue";
+const overlay = useOverlay();
+const createModal = overlay.create(CreateModal);
+const tableMeta = ref({});
+const columns = [
+  {
+    accessorKey: "tblName",
+    header: "\u8868\u540D",
+    sortOption: true,
+    filterOption: {
+      type: "input",
+      initHide: false
+    }
+  },
+  {
+    accessorKey: "label",
+    header: "\u663E\u793A\u540D",
+    sortOption: true,
+    filterOption: {
+      type: "input",
+      initHide: false
+    }
+  },
+  {
+    accessorKey: "meta",
+    header: "\u5217\u6570",
+    cell: ({ row }) => tableMeta.value[row.original.id]?.columnCount ?? "-"
+  },
+  {
+    accessorKey: "permissionCount",
+    header: "\u6743\u9650\u6570",
+    cell: ({ row }) => tableMeta.value[row.original.id]?.permissionCount ?? "-"
+  },
+  ...getOprColumns()
+];
+const tablePageRef = ref(null);
+async function fetchTableMeta(tables) {
+  const tableColumnApi = useTableColumnApi();
+  const tablePermissionApi = useTablePermissionApi();
+  const newMeta = {};
+  await Promise.all(
+    tables.map(async (table) => {
+      const [columnResult, permissionResult] = await Promise.all([
+        tableColumnApi.count({
+          whereQuery: {
+            items: [{ field: "tableId", value: table.id, opr: "eq" }]
+          }
+        }),
+        tablePermissionApi.count({
+          whereQuery: {
+            items: [{ field: "tableId", value: table.id, opr: "eq" }]
+          }
+        })
+      ]);
+      newMeta[table.id] = {
+        columnCount: columnResult.data.value?.data ?? 0,
+        permissionCount: permissionResult.data.value?.data ?? 0
+      };
+    })
+  );
+  tableMeta.value = { ...tableMeta.value, ...newMeta };
+}
+function getExpandVNode(row) {
+  const meta = tableMeta.value[row.id];
+  return h("div", { class: "p-4 text-sm text-dimmed" }, [
+    h("div", { class: "font-medium mb-2" }, `Table: ${row.tblName}`),
+    h("div", {}, `\u663E\u793A\u540D: ${row.label}`),
+    h("div", {}, `\u5217\u6570: ${meta?.columnCount ?? "-"}`),
+    h("div", {}, `\u6743\u9650\u914D\u7F6E\u6570: ${meta?.permissionCount ?? "-"}`),
+    h("div", {}, `\u521B\u5EFA\u65F6\u95F4: ${row.createdAt ? new Date(row.createdAt).toLocaleString() : "-"}`),
+    h("div", {}, `\u66F4\u65B0\u65F6\u95F4: ${row.updatedAt ? new Date(row.updatedAt).toLocaleString() : "-"}`)
+  ]);
+}
+const extraRowActions = [
+  {
+    label: "\u7F16\u8F91",
+    icon: "i-lucide-edit",
+    fnWithModal: async (row) => {
+      const result = await createModal.open({ model: { ...row } }).result;
+      return result;
+    }
+  }
+];
+watch(
+  () => tablePageRef.value?.data,
+  async (newData) => {
+    if (newData && newData.length > 0) {
+      await fetchTableMeta(newData);
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <TablePage
+    ref="tablePageRef"
+    name="sys-table"
+    cn-name="Table 配置"
+    :use-api-group="useTableApi"
+    :biz-columns="columns"
+    :expandable="true"
+    :expand-v-node="getExpandVNode"
+    :extra-row-actions="extraRowActions"
+    @edit-row-from-modal="async (row) => {
+  const result = await createModal.open({ model: { ...row } }).result;
+  return result === true;
+}"
+  />
+</template>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,22 @@
+import type { TableColumn, Table } from '#v/types';
+type __VLS_Props = {
+    table: Table;
+    column?: {
+        id: number;
+        columnKey: string;
+        label: string;
+        order: number;
+        width: number;
+        fixed: 'left' | 'right' | '';
+        visible: boolean;
+    };
+};
+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

@@ -0,0 +1,107 @@
+<script setup>
+import { useTableColumnApi } from "#v/composables/api";
+import { ref } from "vue";
+import { useToast } from "@nuxt/ui/composables";
+const props = defineProps({
+  table: { type: Object, required: true },
+  column: { type: Object, required: false }
+});
+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;
+  }
+}
+</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>
+</template>

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

@@ -0,0 +1,22 @@
+import type { TableColumn, Table } from '#v/types';
+type __VLS_Props = {
+    table: Table;
+    column?: {
+        id: number;
+        columnKey: string;
+        label: string;
+        order: number;
+        width: number;
+        fixed: 'left' | 'right' | '';
+        visible: boolean;
+    };
+};
+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/CreateModal.vue

@@ -3,6 +3,7 @@ import { useFormValues, useFormSubmission, useUserApi, useRoleApi, useMenuApi, u
 import { treeifyOptions } from "#v/utils";
 import { toRef, ref, computed, onMounted } from "vue";
 import FormCreateModalTemplate from "#v/components/form/create-modal-template/index.vue";
+import TablePermissionTab from "#v/components/table/permission/TablePermissionTab.vue";
 import { loginTypeOptions, genderOptions, Gender } from "#v/constants";
 import * as z from "zod";
 const props = defineProps({
@@ -16,7 +17,10 @@ const { onSubmit } = useFormSubmission(
   (close) => emit("close", close),
   (model) => emit("save", model),
   useUserApi,
-  ["roles", "menus"]
+  ["roles", "menus"],
+  "id",
+  "version",
+  () => ({ tablePermissions: tablePermissions.value })
 );
 const roles = ref([]);
 const onFetchRoles = async () => {
@@ -103,6 +107,7 @@ const menuTargetTreeItems = computed({
 function updateMenuTargetTreeItems(newVal) {
   menuTargetTreeItems.value = newVal;
 }
+const tablePermissions = ref(props.model.tablePermissions || []);
 function updateDepartment(newInitModelValues) {
   newValues.value.department = newInitModelValues;
 }
@@ -193,5 +198,12 @@ onMounted(async () => {
     :model-value="newValues"
     @update-model-value="updateModelValue"
     @submit="onSubmit"
-  />
+  >
+    <template #after-form>
+      <div class="border-t pt-4 mt-4">
+        <div class="font-semibold mb-2">Table 权限</div>
+        <TablePermissionTab v-model="tablePermissions" />
+      </div>
+    </template>
+  </FormCreateModalTemplate>
 </template>