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.
- package/dist/module.json +1 -1
- package/dist/module.mjs +1 -0
- package/dist/runtime/components/Watermark.d.vue.ts +3 -3
- package/dist/runtime/components/Watermark.vue.d.ts +3 -3
- package/dist/runtime/components/button/CircleColor.d.vue.ts +17 -0
- package/dist/runtime/components/button/CircleColor.vue +37 -0
- package/dist/runtime/components/button/CircleColor.vue.d.ts +17 -0
- package/dist/runtime/components/flow/FlowEdge.client.vue +170 -41
- package/dist/runtime/components/flow/FlowEditor.client.d.vue.ts +51 -0
- package/dist/runtime/components/flow/FlowEditor.client.vue +294 -0
- package/dist/runtime/components/flow/FlowEditor.client.vue.d.ts +51 -0
- package/dist/runtime/components/flow/FlowNode.client.d.vue.ts +13 -2
- package/dist/runtime/components/flow/FlowNode.client.vue +44 -48
- package/dist/runtime/components/flow/FlowNode.client.vue.d.ts +13 -2
- package/dist/runtime/components/flow/FlowToolbar.d.vue.ts +41 -5
- package/dist/runtime/components/flow/FlowToolbar.vue +554 -88
- package/dist/runtime/components/flow/FlowToolbar.vue.d.ts +41 -5
- package/dist/runtime/components/flow/FlowToolbarItemWrapper.d.vue.ts +17 -0
- package/dist/runtime/components/flow/FlowToolbarItemWrapper.vue +16 -0
- package/dist/runtime/components/flow/FlowToolbarItemWrapper.vue.d.ts +17 -0
- package/dist/runtime/components/sys/flow/CreateModal.d.vue.ts +13 -0
- package/dist/runtime/components/sys/flow/CreateModal.vue +32 -0
- package/dist/runtime/components/sys/flow/CreateModal.vue.d.ts +13 -0
- package/dist/runtime/components/sys/flow/EditNodeModal.d.vue.ts +13 -0
- package/dist/runtime/components/sys/flow/EditNodeModal.vue +30 -0
- package/dist/runtime/components/sys/flow/EditNodeModal.vue.d.ts +13 -0
- package/dist/runtime/components/sys/flow/Table.d.vue.ts +3 -0
- package/dist/runtime/components/sys/flow/Table.vue +98 -0
- package/dist/runtime/components/sys/flow/Table.vue.d.ts +3 -0
- package/dist/runtime/components/sys/table/CreateModal.vue +9 -191
- package/dist/runtime/components/sys/table/Table.vue +0 -11
- package/dist/runtime/components/sys/table/TableColumnList.d.vue.ts +54 -0
- package/dist/runtime/components/sys/table/TableColumnList.vue +196 -0
- package/dist/runtime/components/sys/table/TableColumnList.vue.d.ts +54 -0
- package/dist/runtime/components/sys/table/TableColumnModal.d.vue.ts +3 -13
- package/dist/runtime/components/sys/table/TableColumnModal.vue +32 -100
- package/dist/runtime/components/sys/table/TableColumnModal.vue.d.ts +3 -13
- package/dist/runtime/components/table/query/order/Item.d.vue.ts +2 -2
- package/dist/runtime/components/table/query/order/Item.vue.d.ts +2 -2
- package/dist/runtime/composables/api/sys/index.d.ts +3 -0
- package/dist/runtime/composables/api/sys/index.js +3 -0
- package/dist/runtime/composables/api/sys/useFlowApi.d.ts +2 -0
- package/dist/runtime/composables/api/sys/useFlowApi.js +5 -0
- package/dist/runtime/composables/api/sys/useFlowEdgeApi.d.ts +2 -0
- package/dist/runtime/composables/api/sys/useFlowEdgeApi.js +3 -0
- package/dist/runtime/composables/api/sys/useFlowNodeApi.d.ts +2 -0
- package/dist/runtime/composables/api/sys/useFlowNodeApi.js +3 -0
- package/dist/runtime/composables/flow/index.d.ts +3 -0
- package/dist/runtime/composables/flow/index.js +3 -0
- package/dist/runtime/composables/flow/useFlow.d.ts +33 -0
- package/dist/runtime/composables/flow/useFlow.js +401 -0
- package/dist/runtime/composables/flow/useFlowNode.d.ts +17 -0
- package/dist/runtime/composables/flow/useFlowNode.js +106 -0
- package/dist/runtime/composables/flow/useFlowResize.d.ts +21 -0
- package/dist/runtime/composables/flow/useFlowResize.js +84 -0
- package/dist/runtime/composables/flow/useFlowStyles.d.ts +62 -9
- package/dist/runtime/composables/flow/useFlowStyles.js +127 -23
- package/dist/runtime/composables/table/useTableColumnPermission.d.ts +36 -0
- package/dist/runtime/composables/useSidebarMenu.js +0 -2
- package/dist/runtime/composables/useTheme.d.ts +1 -1
- package/dist/runtime/composables/useTheme.js +0 -1
- package/dist/runtime/constants/flow.d.ts +166 -0
- package/dist/runtime/constants/flow.js +171 -0
- package/dist/runtime/index.css +1 -1
- package/dist/runtime/types/models/flow.d.ts +61 -0
- package/dist/runtime/types/models/flow.js +0 -0
- package/dist/runtime/types/models/index.d.ts +1 -0
- package/dist/runtime/types/models/index.js +1 -0
- package/dist/runtime/types/models/table.d.ts +1 -0
- package/dist/runtime/types/storage.d.ts +3 -4
- package/dist/runtime/types/storage.js +3 -4
- 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
|
-
|
|
5
|
-
|
|
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
|
-
|
|
8
|
-
|
|
9
|
-
|
|
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
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
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
|
|
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 &&
|
|
151
|
-
|
|
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
|
-
|
|
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
|
-
<
|
|
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;
|