v-nuxt-ui 0.1.36 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) hide show
  1. package/dist/module.json +1 -1
  2. package/dist/module.mjs +1 -0
  3. package/dist/runtime/components/Watermark.d.vue.ts +3 -3
  4. package/dist/runtime/components/Watermark.vue.d.ts +3 -3
  5. package/dist/runtime/components/button/CircleColor.d.vue.ts +17 -0
  6. package/dist/runtime/components/button/CircleColor.vue +37 -0
  7. package/dist/runtime/components/button/CircleColor.vue.d.ts +17 -0
  8. package/dist/runtime/components/flow/FlowEdge.client.vue +170 -41
  9. package/dist/runtime/components/flow/FlowEditor.client.d.vue.ts +51 -0
  10. package/dist/runtime/components/flow/FlowEditor.client.vue +294 -0
  11. package/dist/runtime/components/flow/FlowEditor.client.vue.d.ts +51 -0
  12. package/dist/runtime/components/flow/FlowNode.client.d.vue.ts +13 -2
  13. package/dist/runtime/components/flow/FlowNode.client.vue +44 -48
  14. package/dist/runtime/components/flow/FlowNode.client.vue.d.ts +13 -2
  15. package/dist/runtime/components/flow/FlowToolbar.d.vue.ts +41 -5
  16. package/dist/runtime/components/flow/FlowToolbar.vue +554 -88
  17. package/dist/runtime/components/flow/FlowToolbar.vue.d.ts +41 -5
  18. package/dist/runtime/components/flow/FlowToolbarItemWrapper.d.vue.ts +17 -0
  19. package/dist/runtime/components/flow/FlowToolbarItemWrapper.vue +16 -0
  20. package/dist/runtime/components/flow/FlowToolbarItemWrapper.vue.d.ts +17 -0
  21. package/dist/runtime/components/sys/flow/CreateModal.d.vue.ts +13 -0
  22. package/dist/runtime/components/sys/flow/CreateModal.vue +32 -0
  23. package/dist/runtime/components/sys/flow/CreateModal.vue.d.ts +13 -0
  24. package/dist/runtime/components/sys/flow/EditNodeModal.d.vue.ts +13 -0
  25. package/dist/runtime/components/sys/flow/EditNodeModal.vue +30 -0
  26. package/dist/runtime/components/sys/flow/EditNodeModal.vue.d.ts +13 -0
  27. package/dist/runtime/components/sys/flow/Table.d.vue.ts +3 -0
  28. package/dist/runtime/components/sys/flow/Table.vue +98 -0
  29. package/dist/runtime/components/sys/flow/Table.vue.d.ts +3 -0
  30. package/dist/runtime/components/sys/table/CreateModal.vue +9 -191
  31. package/dist/runtime/components/sys/table/Table.vue +0 -11
  32. package/dist/runtime/components/sys/table/TableColumnList.d.vue.ts +54 -0
  33. package/dist/runtime/components/sys/table/TableColumnList.vue +196 -0
  34. package/dist/runtime/components/sys/table/TableColumnList.vue.d.ts +54 -0
  35. package/dist/runtime/components/sys/table/TableColumnModal.d.vue.ts +3 -13
  36. package/dist/runtime/components/sys/table/TableColumnModal.vue +32 -100
  37. package/dist/runtime/components/sys/table/TableColumnModal.vue.d.ts +3 -13
  38. package/dist/runtime/components/table/query/order/Item.d.vue.ts +2 -2
  39. package/dist/runtime/components/table/query/order/Item.vue.d.ts +2 -2
  40. package/dist/runtime/composables/api/sys/index.d.ts +3 -0
  41. package/dist/runtime/composables/api/sys/index.js +3 -0
  42. package/dist/runtime/composables/api/sys/useFlowApi.d.ts +2 -0
  43. package/dist/runtime/composables/api/sys/useFlowApi.js +5 -0
  44. package/dist/runtime/composables/api/sys/useFlowEdgeApi.d.ts +2 -0
  45. package/dist/runtime/composables/api/sys/useFlowEdgeApi.js +3 -0
  46. package/dist/runtime/composables/api/sys/useFlowNodeApi.d.ts +2 -0
  47. package/dist/runtime/composables/api/sys/useFlowNodeApi.js +3 -0
  48. package/dist/runtime/composables/flow/index.d.ts +3 -0
  49. package/dist/runtime/composables/flow/index.js +3 -0
  50. package/dist/runtime/composables/flow/useFlow.d.ts +33 -0
  51. package/dist/runtime/composables/flow/useFlow.js +401 -0
  52. package/dist/runtime/composables/flow/useFlowNode.d.ts +17 -0
  53. package/dist/runtime/composables/flow/useFlowNode.js +106 -0
  54. package/dist/runtime/composables/flow/useFlowResize.d.ts +21 -0
  55. package/dist/runtime/composables/flow/useFlowResize.js +84 -0
  56. package/dist/runtime/composables/flow/useFlowStyles.d.ts +62 -9
  57. package/dist/runtime/composables/flow/useFlowStyles.js +127 -23
  58. package/dist/runtime/composables/table/useTableColumnPermission.d.ts +36 -0
  59. package/dist/runtime/composables/useSidebarMenu.js +0 -2
  60. package/dist/runtime/composables/useTheme.d.ts +1 -1
  61. package/dist/runtime/composables/useTheme.js +0 -1
  62. package/dist/runtime/constants/flow.d.ts +166 -0
  63. package/dist/runtime/constants/flow.js +171 -0
  64. package/dist/runtime/index.css +1 -1
  65. package/dist/runtime/types/models/flow.d.ts +61 -0
  66. package/dist/runtime/types/models/flow.js +0 -0
  67. package/dist/runtime/types/models/index.d.ts +1 -0
  68. package/dist/runtime/types/models/index.js +1 -0
  69. package/dist/runtime/types/models/table.d.ts +1 -0
  70. package/dist/runtime/types/storage.d.ts +3 -4
  71. package/dist/runtime/types/storage.js +3 -4
  72. package/package.json +3 -2
@@ -1,13 +1,49 @@
1
+ import type { FlowEdgeStrokeType, FlowEdgePathType, FlowArrowType } from '#v/constants';
2
+ import type { FlowColorMode } from '#v/composables/flow/useFlowStyles';
1
3
  type __VLS_Props = {
2
4
  onAddNode?: () => void;
5
+ /** 是否有 API 操作正在进行,用于禁用交互 */
6
+ loading?: boolean;
3
7
  edgeStrokeWidth?: number;
4
- edgeMarkerStart?: boolean;
5
- edgeMarkerEnd?: boolean;
8
+ edgeStrokeType?: FlowEdgeStrokeType;
9
+ edgePathType?: FlowEdgePathType;
10
+ edgeMarkerStart?: FlowArrowType;
11
+ edgeMarkerEnd?: FlowArrowType;
12
+ edgeAnimated?: boolean;
13
+ edgeColor?: string;
14
+ edgeLabelColor?: string;
6
15
  nodeBorderWidth?: number;
7
- onEdgeStrokeWidthChange?: (width: number) => void;
8
- onToggleEdgeMarkerStart?: () => void;
9
- onToggleEdgeMarkerEnd?: () => void;
16
+ nodeBorderRadius?: number;
17
+ nodeBorderColor?: string;
18
+ nodeBgColor?: string;
19
+ nodeFontColor?: string;
20
+ nodeFontSize?: number;
21
+ nodeHandleSize?: number;
22
+ nodeHandleColor?: string;
23
+ /** 颜色模式 */
24
+ colorMode?: FlowColorMode;
25
+ /** 统一颜色名称 */
26
+ unifiedColor?: string;
27
+ /** 是否统一模式 */
28
+ isUnifiedMode?: boolean;
29
+ onEdgeStrokeWidthChange: (width: number) => void;
30
+ onEdgeStrokeTypeChange?: (type: FlowEdgeStrokeType) => void;
31
+ onEdgePathTypeChange?: (type: FlowEdgePathType) => void;
32
+ onEdgeMarkerStartChange?: (type: FlowArrowType) => void;
33
+ onEdgeMarkerEndChange?: (type: FlowArrowType) => void;
34
+ onToggleEdgeAnimated?: () => void;
35
+ onEdgeColorChange?: (color: string) => void;
36
+ onEdgeLabelColorChange?: (color: string) => void;
10
37
  onNodeBorderWidthChange?: (width: number) => void;
38
+ onNodeBorderRadiusChange?: (radius: number) => void;
39
+ onNodeBorderColorChange?: (color: string) => void;
40
+ onNodeBgColorChange?: (color: string) => void;
41
+ onNodeFontColorChange?: (color: string) => void;
42
+ onNodeFontSizeChange?: (size: number) => void;
43
+ onNodeHandleSizeChange?: (size: number) => void;
44
+ onNodeHandleColorChange?: (color: string) => void;
45
+ onColorModeChange?: (mode: FlowColorMode) => void;
46
+ onUnifiedColorChange?: (name: string) => void;
11
47
  };
12
48
  declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
13
49
  declare const _default: typeof __VLS_export;
@@ -0,0 +1,17 @@
1
+ type __VLS_Props = {
2
+ label: string;
3
+ description?: string;
4
+ };
5
+ declare var __VLS_1: {};
6
+ type __VLS_Slots = {} & {
7
+ default?: (props: typeof __VLS_1) => any;
8
+ };
9
+ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
10
+ declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
11
+ declare const _default: typeof __VLS_export;
12
+ export default _default;
13
+ type __VLS_WithSlots<T, S> = T & {
14
+ new (): {
15
+ $slots: S;
16
+ };
17
+ };
@@ -0,0 +1,16 @@
1
+ <script setup>
2
+ defineProps({
3
+ label: { type: String, required: true },
4
+ description: { type: String, required: false }
5
+ });
6
+ </script>
7
+
8
+ <template>
9
+ <div class="flex items-center gap-12 justify-between min-h-4">
10
+ <div class="flex flex-col flex-1">
11
+ <span class="font-bold text-sm">{{ label }}</span>
12
+ <span v-if="description" class="text-xs text-muted">{{ description }}</span>
13
+ </div>
14
+ <slot name="default" />
15
+ </div>
16
+ </template>
@@ -0,0 +1,17 @@
1
+ type __VLS_Props = {
2
+ label: string;
3
+ description?: string;
4
+ };
5
+ declare var __VLS_1: {};
6
+ type __VLS_Slots = {} & {
7
+ default?: (props: typeof __VLS_1) => any;
8
+ };
9
+ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
10
+ declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
11
+ declare const _default: typeof __VLS_export;
12
+ export default _default;
13
+ type __VLS_WithSlots<T, S> = T & {
14
+ new (): {
15
+ $slots: S;
16
+ };
17
+ };
@@ -0,0 +1,13 @@
1
+ import type { Flow } from '#v/types';
2
+ type __VLS_Props = {
3
+ model: Flow;
4
+ };
5
+ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
6
+ close: (args_0: boolean) => any;
7
+ save: (args_0: Flow) => any;
8
+ }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
9
+ onClose?: ((args_0: boolean) => any) | undefined;
10
+ onSave?: ((args_0: Flow) => any) | undefined;
11
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
12
+ declare const _default: typeof __VLS_export;
13
+ export default _default;
@@ -0,0 +1,32 @@
1
+ <script setup>
2
+ import * as z from "zod";
3
+ import FormCreateModalTemplate from "#v/components/form/create-modal-template/index.vue";
4
+ import { useFlowApi, useFormSubmission, useFormValues } from "#v/composables";
5
+ import { toRef } from "vue";
6
+ const props = defineProps({
7
+ model: { type: Object, required: true }
8
+ });
9
+ const emit = defineEmits(["close", "save"]);
10
+ const { oldValues, newValues } = useFormValues(toRef(props.model), { id: 0 });
11
+ const { onSubmit } = useFormSubmission(
12
+ toRef(oldValues),
13
+ toRef(newValues),
14
+ (close) => emit("close", close),
15
+ (model) => emit("save", model),
16
+ useFlowApi
17
+ );
18
+ </script>
19
+
20
+ <template>
21
+ <FormCreateModalTemplate
22
+ title="流程信息"
23
+ :on-close="(ok) => emit('close', ok)"
24
+ :fields="[
25
+ { name: 'name', type: 'input', label: '\u6D41\u7A0B\u540D\u79F0', colSpan: '24', zodType: z.string().min(2, '\u540D\u79F0\u5B57\u6570\u4E0D\u8DB3') },
26
+ { name: 'description', type: 'textarea', label: '\u6D41\u7A0B\u63CF\u8FF0', colSpan: '24' }
27
+ ]"
28
+ :model-value="newValues"
29
+ @update-model-value="(newVal) => newValues = { ...newValues, ...newVal }"
30
+ @submit="onSubmit"
31
+ />
32
+ </template>
@@ -0,0 +1,13 @@
1
+ import type { Flow } from '#v/types';
2
+ type __VLS_Props = {
3
+ model: Flow;
4
+ };
5
+ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
6
+ close: (args_0: boolean) => any;
7
+ save: (args_0: Flow) => any;
8
+ }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
9
+ onClose?: ((args_0: boolean) => any) | undefined;
10
+ onSave?: ((args_0: Flow) => any) | undefined;
11
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
12
+ declare const _default: typeof __VLS_export;
13
+ export default _default;
@@ -0,0 +1,13 @@
1
+ import type { FlowNode } from '#v/types';
2
+ type __VLS_Props = {
3
+ model: FlowNode;
4
+ };
5
+ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
6
+ close: (args_0: boolean) => any;
7
+ save: (args_0: FlowNode) => any;
8
+ }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
9
+ onClose?: ((args_0: boolean) => any) | undefined;
10
+ onSave?: ((args_0: FlowNode) => any) | undefined;
11
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
12
+ declare const _default: typeof __VLS_export;
13
+ export default _default;
@@ -0,0 +1,30 @@
1
+ <script setup>
2
+ import * as z from "zod";
3
+ import FormCreateModalTemplate from "#v/components/form/create-modal-template/index.vue";
4
+ import { useFormValues } from "#v/composables";
5
+ import { toRef } from "vue";
6
+ const props = defineProps({
7
+ model: { type: Object, required: true }
8
+ });
9
+ const emit = defineEmits(["close", "save"]);
10
+ const { newValues } = useFormValues(toRef(props.model), {
11
+ id: 0,
12
+ name: ""
13
+ });
14
+ </script>
15
+
16
+ <template>
17
+ <FormCreateModalTemplate
18
+ title="编辑节点"
19
+ :on-close="(ok) => emit('close', ok)"
20
+ :fields="[
21
+ { name: 'name', type: 'input', label: '\u8282\u70B9\u540D\u79F0', colSpan: '24', zodType: z.string().min(1, '\u8BF7\u8F93\u5165\u8282\u70B9\u540D\u79F0') }
22
+ ]"
23
+ :model-value="newValues"
24
+ @update-model-value="(newVal) => newValues = { ...props.model, ...newVal }"
25
+ @submit="async () => {
26
+ emit('save', newValues);
27
+ emit('close', true);
28
+ }"
29
+ />
30
+ </template>
@@ -0,0 +1,13 @@
1
+ import type { FlowNode } from '#v/types';
2
+ type __VLS_Props = {
3
+ model: FlowNode;
4
+ };
5
+ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
6
+ close: (args_0: boolean) => any;
7
+ save: (args_0: FlowNode) => any;
8
+ }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
9
+ onClose?: ((args_0: boolean) => any) | undefined;
10
+ onSave?: ((args_0: FlowNode) => any) | undefined;
11
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
12
+ declare const _default: typeof __VLS_export;
13
+ export default _default;
@@ -0,0 +1,3 @@
1
+ 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>;
2
+ declare const _default: typeof __VLS_export;
3
+ export default _default;
@@ -0,0 +1,98 @@
1
+ <script setup>
2
+ import { h, ref } from "vue";
3
+ import { useOverlay } from "@nuxt/ui/composables";
4
+ import { getCreateAtColumn } from "#v/constants";
5
+ import { useFlowApi, useFlowNodeApi, useFlowEdgeApi } from "#v/composables";
6
+ import TablePage from "#v/components/table/Page.vue";
7
+ import FlowEditor from "#v/components/flow/FlowEditor.client.vue";
8
+ import CreateModal from "./CreateModal.vue";
9
+ import EditNodeModal from "./EditNodeModal.vue";
10
+ const overlay = useOverlay();
11
+ const createModal = overlay.create(CreateModal);
12
+ const editNodeModal = overlay.create(EditNodeModal);
13
+ const tablePageRef = ref(null);
14
+ const columns = [
15
+ {
16
+ accessorKey: "name",
17
+ header: "\u6D41\u7A0B\u540D\u79F0",
18
+ sortOption: true,
19
+ filterOption: {
20
+ type: "input",
21
+ initHide: false
22
+ }
23
+ },
24
+ {
25
+ accessorKey: "description",
26
+ header: "\u6D41\u7A0B\u63CF\u8FF0",
27
+ cell: ({ row }) => row.original.description || "\u2014"
28
+ },
29
+ {
30
+ accessorKey: "nodes",
31
+ header: "\u8282\u70B9\u6570",
32
+ cell: ({ row }) => `${row.original.nodes?.length ?? 0}\u4E2A`
33
+ },
34
+ {
35
+ accessorKey: "edges",
36
+ header: "\u8FDE\u63A5\u6570",
37
+ cell: ({ row }) => `${row.original.edges?.length ?? 0}\u4E2A`
38
+ },
39
+ getCreateAtColumn()
40
+ ];
41
+ const flowNodeApi = useFlowNodeApi();
42
+ const flowEdgeApi = useFlowEdgeApi();
43
+ const flowEditorApi = {
44
+ createNode: flowNodeApi.create,
45
+ updateNode: flowNodeApi.update,
46
+ deleteNode: flowNodeApi.deleteById,
47
+ createEdge: flowEdgeApi.create,
48
+ updateEdge: flowEdgeApi.update,
49
+ deleteEdge: flowEdgeApi.deleteById
50
+ };
51
+ function updateExpandedFlow(row, updatedFlow) {
52
+ tablePageRef.value?.updateRow(updatedFlow);
53
+ Object.assign(row, updatedFlow);
54
+ }
55
+ function updateNodeInFlow(row, updatedNode) {
56
+ const currentNodes = row.nodes ?? [];
57
+ const nodes = currentNodes.map((node) => node.id === updatedNode.id ? { ...node, ...updatedNode } : node);
58
+ const updatedFlow = { ...row, nodes };
59
+ updateExpandedFlow(row, updatedFlow);
60
+ }
61
+ async function handleEditNode(row, node) {
62
+ await editNodeModal.open({
63
+ model: node,
64
+ onSave: async (newNode) => {
65
+ const { data } = await flowNodeApi.update(newNode);
66
+ if (data.value.data) {
67
+ updateNodeInFlow(row, data.value.data);
68
+ }
69
+ }
70
+ }).result;
71
+ }
72
+ function getExpandVNode(row) {
73
+ return h("div", {
74
+ class: "w-full h-150 border border-default rounded bg-default"
75
+ }, [
76
+ h(FlowEditor, {
77
+ "modelValue": row,
78
+ "api": flowEditorApi,
79
+ "showStats": false,
80
+ "onUpdate:modelValue": (updatedModel) => updateExpandedFlow(row, updatedModel),
81
+ "onEditNode": (node) => handleEditNode(row, node)
82
+ })
83
+ ]);
84
+ }
85
+ </script>
86
+
87
+ <template>
88
+ <TablePage
89
+ ref="tablePageRef"
90
+ name="sys-flow"
91
+ cn-name="流程列表"
92
+ :use-api-group="useFlowApi"
93
+ :biz-columns="columns"
94
+ expandable
95
+ :expand-v-node="getExpandVNode"
96
+ @edit-row-from-modal="async (row) => Boolean(await createModal.open({ model: { ...row } }).result)"
97
+ />
98
+ </template>
@@ -0,0 +1,3 @@
1
+ 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>;
2
+ declare const _default: typeof __VLS_export;
3
+ export default _default;
@@ -1,143 +1,15 @@
1
1
  <script setup>
2
2
  import * as z from "zod";
3
- import { useOverlay } from "@nuxt/ui/composables";
4
3
  import FormCreateModalTemplate from "#v/components/form/create-modal-template/index.vue";
5
- import ProSimpleTable from "#v/components/simple-table/index.vue";
6
- import TableColumnModal from "./TableColumnModal.vue";
7
- import { useFormSubmission, useFormValues, useTableApi, useTableColumnApi } from "#v/composables";
8
- import { computed, ref, toRef, onMounted, h } from "vue";
9
- import UButton from "@nuxt/ui/components/Button.vue";
4
+ import TableColumnList from "./TableColumnList.vue";
5
+ import { useFormSubmission, useFormValues, useTableApi } from "#v/composables";
6
+ import { computed, ref, toRef } from "vue";
10
7
  const props = defineProps({
11
8
  model: { type: Object, required: true }
12
9
  });
13
10
  const emit = defineEmits(["close", "save"]);
14
- const overlay = useOverlay();
15
- const columnModal = overlay.create(TableColumnModal);
16
11
  const { oldValues, newValues } = useFormValues(toRef(props.model), { id: 0 });
17
- const tableColumnApi = useTableColumnApi();
18
- const columns = ref([]);
19
- const deletedColumnIds = ref([]);
20
- const loading = ref(false);
21
- async function fetchColumns() {
22
- if (props.model.id === 0) return;
23
- loading.value = true;
24
- const { data } = await tableColumnApi.list({
25
- pagination: { pageNum: 0, pageSize: 0 },
26
- orderQuery: [{ field: "order", order: "asc" }],
27
- whereQuery: {
28
- items: [{ field: "tableId", value: props.model.id, opr: "eq" }]
29
- }
30
- });
31
- if (data.value.data) {
32
- columns.value = data.value.data.list.map((col) => ({
33
- id: col.id,
34
- columnKey: col.columnKey ?? "",
35
- label: col.label ?? "",
36
- order: col.order ?? 0,
37
- width: col.width ?? 100,
38
- fixed: col.fixed ?? "",
39
- visible: col.visible ?? true
40
- }));
41
- }
42
- loading.value = false;
43
- }
44
- onMounted(fetchColumns);
45
- function addColumn() {
46
- const maxOrder = columns.value.reduce((max, col) => Math.max(max, col.order ?? 0), 0);
47
- columns.value.push({
48
- id: 0,
49
- columnKey: "",
50
- label: "",
51
- order: maxOrder + 1,
52
- width: 100,
53
- fixed: "",
54
- visible: true,
55
- _isDirty: true
56
- });
57
- }
58
- function removeColumn(index) {
59
- const col = columns.value[index];
60
- if (!col) return;
61
- if (col.id !== 0) {
62
- deletedColumnIds.value.push(col.id);
63
- }
64
- columns.value.splice(index, 1);
65
- }
66
- async function editColumn(index) {
67
- const col = columns.value[index];
68
- if (!col) return;
69
- const isNew = col.id === 0;
70
- if (isNew) {
71
- return;
72
- }
73
- const result = await columnModal.open({ table: props.model, column: col }).result;
74
- if (result) {
75
- const updatedCol = result;
76
- columns.value[index] = { ...updatedCol, _isDirty: true };
77
- }
78
- }
79
- const tableColumns = [
80
- {
81
- accessorKey: "columnKey",
82
- header: "\u5217\u6807\u8BC6",
83
- size: 120
84
- },
85
- {
86
- accessorKey: "label",
87
- header: "\u663E\u793A\u540D",
88
- size: 120
89
- },
90
- {
91
- accessorKey: "order",
92
- header: "\u987A\u5E8F",
93
- size: 80
94
- },
95
- {
96
- accessorKey: "width",
97
- header: "\u5BBD\u5EA6",
98
- size: 80
99
- },
100
- {
101
- accessorKey: "fixed",
102
- header: "\u56FA\u5B9A",
103
- size: 80,
104
- cell: ({ row }) => {
105
- const fixedMap = { "": "\u5426", left: "\u5DE6", right: "\u53F3" };
106
- return fixedMap[row.original.fixed] ?? "\u5426";
107
- }
108
- },
109
- {
110
- accessorKey: "visible",
111
- header: "\u663E\u793A",
112
- size: 60,
113
- cell: ({ row }) => row.original.visible ? "\u662F" : "\u5426"
114
- },
115
- {
116
- accessorKey: "actions",
117
- header: "\u64CD\u4F5C",
118
- size: 100,
119
- cell: ({ row }) => {
120
- const index = columns.value.findIndex((c) => c === row.original);
121
- return h("div", { class: "flex gap-1" }, [
122
- h(UButton, {
123
- label: "\u7F16\u8F91",
124
- icon: "i-lucide-edit",
125
- variant: "ghost",
126
- size: "xs",
127
- onClick: () => editColumn(index)
128
- }),
129
- h(UButton, {
130
- label: "\u5220\u9664",
131
- icon: "i-lucide-trash-2",
132
- color: "error",
133
- variant: "ghost",
134
- size: "xs",
135
- onClick: () => removeColumn(index)
136
- })
137
- ]);
138
- }
139
- }
140
- ];
12
+ const columnListRef = ref();
141
13
  const { onSubmit } = useFormSubmission(
142
14
  toRef(oldValues),
143
15
  toRef(newValues),
@@ -147,38 +19,12 @@ const { onSubmit } = useFormSubmission(
147
19
  if (model.id === 0) {
148
20
  const { data } = await tableApi.create(model);
149
21
  const newTable = data.value?.data;
150
- if (newTable && columns.value.length > 0) {
151
- for (const col of columns.value) {
152
- await tableColumnApi.create({
153
- ...col,
154
- tableId: newTable.id
155
- });
156
- }
22
+ if (newTable && columnListRef.value?.columns.length) {
23
+ await columnListRef.value.createAllColumns(newTable.id);
157
24
  }
158
25
  emit("save", newTable);
159
26
  } else {
160
- for (const col of columns.value) {
161
- if (col._isDirty) {
162
- const colData = {
163
- id: col.id,
164
- tableId: props.model.id,
165
- columnKey: col.columnKey,
166
- label: col.label,
167
- order: col.order,
168
- width: col.width,
169
- fixed: col.fixed,
170
- visible: col.visible
171
- };
172
- if (col.id === 0) {
173
- await tableColumnApi.create(tableColumnApi.prune(colData));
174
- } else {
175
- await tableColumnApi.update(tableColumnApi.prune(colData));
176
- }
177
- }
178
- }
179
- for (const id of deletedColumnIds.value) {
180
- await tableColumnApi.deleteById(id);
181
- }
27
+ await columnListRef.value?.saveDirtyColumns(props.model.id);
182
28
  emit("save", model);
183
29
  }
184
30
  },
@@ -186,8 +32,7 @@ const { onSubmit } = useFormSubmission(
186
32
  );
187
33
  const fields = computed(() => [
188
34
  { name: "tblName", type: "input", label: "\u8868\u540D", colSpan: "12", zodType: z.string().min(1, "\u8868\u540D\u4E0D\u80FD\u4E3A\u7A7A") },
189
- { name: "label", type: "input", label: "\u663E\u793A\u540D", colSpan: "12", zodType: z.string().min(1, "\u663E\u793A\u540D\u4E0D\u80FD\u4E3A\u7A7A") },
190
- { name: "labelI18nKey", type: "input", label: "i18n Key", colSpan: "24", zodType: z.string().optional().nullable() }
35
+ { name: "label", type: "input", label: "\u663E\u793A\u540D", colSpan: "12", zodType: z.string().min(1, "\u663E\u793A\u540D\u4E0D\u80FD\u4E3A\u7A7A") }
191
36
  ]);
192
37
  function updateModelValue(newVal) {
193
38
  newValues.value = { id: 0, ...newVal };
@@ -204,34 +49,7 @@ function updateModelValue(newVal) {
204
49
  @submit="onSubmit"
205
50
  >
206
51
  <template #after-form>
207
- <div class="border-t pt-4 mt-4">
208
- <div class="flex items-center justify-between mb-2">
209
- <div>
210
- <div class="font-semibold">列配置</div>
211
- <div class="text-sm text-dimmed">配置 Table 的列信息</div>
212
- </div>
213
- <UButton
214
- label="添加列"
215
- icon="i-lucide-plus"
216
- variant="soft"
217
- size="sm"
218
- @click="addColumn"
219
- />
220
- </div>
221
-
222
- <div v-if="loading" class="py-8 text-center text-dimmed">
223
- 加载中...
224
- </div>
225
- <div v-else-if="columns.length === 0" class="py-8 text-center text-dimmed">
226
- 暂无列配置,点击"添加列"创建
227
- </div>
228
- <ProSimpleTable
229
- v-else
230
- :data="columns"
231
- :biz-columns="tableColumns"
232
- class="max-h-64 overflow-y-auto"
233
- />
234
- </div>
52
+ <TableColumnList ref="columnListRef" :initial-columns="model.columns" />
235
53
  </template>
236
54
  </FormCreateModalTemplate>
237
55
  </template>
@@ -79,16 +79,6 @@ function getExpandVNode(row) {
79
79
  h("div", {}, `\u66F4\u65B0\u65F6\u95F4: ${row.updatedAt ? new Date(row.updatedAt).toLocaleString() : "-"}`)
80
80
  ]);
81
81
  }
82
- const extraRowActions = [
83
- {
84
- label: "\u7F16\u8F91",
85
- icon: "i-lucide-edit",
86
- fnWithModal: async (row) => {
87
- const result = await createModal.open({ model: { ...row } }).result;
88
- return result;
89
- }
90
- }
91
- ];
92
82
  watch(
93
83
  () => tablePageRef.value?.data,
94
84
  async (newData) => {
@@ -109,7 +99,6 @@ watch(
109
99
  :biz-columns="columns"
110
100
  :expandable="true"
111
101
  :expand-v-node="getExpandVNode"
112
- :extra-row-actions="extraRowActions"
113
102
  @edit-row-from-modal="async (row) => {
114
103
  const result = await createModal.open({ model: { ...row } }).result;
115
104
  return result === true;
@@ -0,0 +1,54 @@
1
+ import type { TableColumn } from '#v/types';
2
+ type __VLS_Props = {
3
+ initialColumns?: TableColumn[];
4
+ };
5
+ interface ColumnRow extends TableColumn {
6
+ _isDirty?: boolean;
7
+ }
8
+ /** 供父组件在提交时调用:创建新表后批量创建列 */
9
+ declare function createAllColumns(tableId: number): Promise<void>;
10
+ /** 供父组件在提交时调用:保存已有表的列变更 */
11
+ declare function saveDirtyColumns(tableId: number): Promise<void>;
12
+ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
13
+ columns: import("vue").Ref<{
14
+ _isDirty?: boolean | undefined;
15
+ tableId?: number | undefined;
16
+ columnKey?: string | undefined;
17
+ label?: string | undefined;
18
+ labelI18nKey?: string | undefined;
19
+ order?: number | undefined;
20
+ width?: number | undefined;
21
+ fixed?: "left" | "right" | "" | undefined;
22
+ visible?: boolean | undefined;
23
+ id: number;
24
+ createdAt?: string | undefined;
25
+ updatedAt?: string | undefined;
26
+ version?: number | undefined;
27
+ createdBy?: number | undefined;
28
+ creator?: any;
29
+ updatedBy?: number | undefined;
30
+ updater?: any;
31
+ }[], ColumnRow[] | {
32
+ _isDirty?: boolean | undefined;
33
+ tableId?: number | undefined;
34
+ columnKey?: string | undefined;
35
+ label?: string | undefined;
36
+ labelI18nKey?: string | undefined;
37
+ order?: number | undefined;
38
+ width?: number | undefined;
39
+ fixed?: "left" | "right" | "" | undefined;
40
+ visible?: boolean | undefined;
41
+ id: number;
42
+ createdAt?: string | undefined;
43
+ updatedAt?: string | undefined;
44
+ version?: number | undefined;
45
+ createdBy?: number | undefined;
46
+ creator?: any;
47
+ updatedBy?: number | undefined;
48
+ updater?: any;
49
+ }[]>;
50
+ createAllColumns: typeof createAllColumns;
51
+ saveDirtyColumns: typeof saveDirtyColumns;
52
+ }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
53
+ declare const _default: typeof __VLS_export;
54
+ export default _default;