cnhis-design-vue 3.1.15-beta.6 → 3.1.15-beta.9
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/es/packages/form-config/index.d.ts +12105 -0
- package/es/packages/form-config/index.js +10 -0
- package/es/packages/form-config/src/FormConfig.js +113 -0
- package/es/packages/form-config/src/FormConfig.vue.d.ts +12107 -0
- package/es/packages/form-config/src/components/FormConfigCreator.js +97 -0
- package/es/packages/form-config/src/components/FormConfigCreator.vue.d.ts +5094 -0
- package/es/packages/form-config/src/components/FormConfigEdit.js +81 -0
- package/es/packages/form-config/src/components/FormConfigEdit.vue.d.ts +3589 -0
- package/es/packages/form-config/src/constants/index.d.ts +28 -0
- package/es/packages/form-config/src/constants/index.js +28 -0
- package/es/packages/form-config/src/hooks/index.d.ts +2 -0
- package/es/packages/form-config/src/hooks/index.js +2 -0
- package/es/packages/form-config/src/hooks/useConfigurationField.d.ts +6 -0
- package/es/packages/form-config/src/hooks/useConfigurationField.js +103 -0
- package/es/packages/form-config/src/hooks/usePresetRenderer.d.ts +5 -0
- package/es/packages/form-config/src/hooks/usePresetRenderer.js +117 -0
- package/es/packages/form-config/src/hooks/useSortable.d.ts +11 -0
- package/es/packages/form-config/src/hooks/useSortable.js +31 -0
- package/es/packages/form-config/src/types/index.d.ts +18 -0
- package/es/packages/form-config/src/types/index.js +1 -0
- package/es/packages/form-config/style/index.css +108 -0
- package/es/packages/form-render/index.d.ts +6 -6
- package/es/packages/form-render/src/FormRender.vue.d.ts +6 -6
- package/es/packages/form-render/src/components/renderer/formItem.js +2 -1
- package/es/packages/form-render/src/components/renderer/select.js +16 -9
- package/es/packages/form-render/src/hooks/useAsyncQueue.d.ts +2 -2
- package/es/packages/form-render/src/hooks/useAsyncQueue.js +6 -10
- package/es/packages/form-render/src/hooks/useFieldListAdaptor.js +2 -1
- package/es/packages/form-render/src/hooks/useFormContext.js +12 -6
- package/es/packages/form-render/src/hooks/useFormRenderLifeCycle.d.ts +4 -4
- package/es/packages/form-render/src/types/index.d.ts +8 -4
- package/es/packages/form-render/src/utils/index.d.ts +2 -2
- package/es/packages/form-render/src/utils/index.js +22 -6
- package/es/packages/index.css +108 -0
- package/es/packages/index.d.ts +3 -1
- package/es/packages/index.js +4 -1
- package/es/packages/shortcut-setter/index.d.ts +8 -8
- package/es/packages/shortcut-setter/src/ShortcutSetter.vue.d.ts +8 -8
- package/es/packages/shortcut-setter/src/ShortcutSetterItem.js +1 -1
- package/es/packages/shortcut-setter/src/ShortcutSetterItem.vue.d.ts +2 -2
- package/es/src/utils/state.d.ts +29 -0
- package/es/src/utils/state.js +44 -0
- package/package.json +2 -1
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { WithUndefined } from '../../../../../es/src/types';
|
|
2
|
+
import { InjectionKey, Ref } from 'vue';
|
|
3
|
+
import { FieldItem } from '../../../../../es/packages/form-render';
|
|
4
|
+
export declare const WidgetTextMap: {
|
|
5
|
+
INPUT: string;
|
|
6
|
+
SELECT: string;
|
|
7
|
+
TEXTAREA: string;
|
|
8
|
+
CASCADER: string;
|
|
9
|
+
SWITCH: string;
|
|
10
|
+
RADIO: string;
|
|
11
|
+
TEXT: string;
|
|
12
|
+
BUTTON: string;
|
|
13
|
+
CHECKBOX: string;
|
|
14
|
+
LINEBAR: string;
|
|
15
|
+
LINE_BREAKS: string;
|
|
16
|
+
};
|
|
17
|
+
export declare enum EditAbleField {
|
|
18
|
+
ALIAS = "alias",
|
|
19
|
+
TIP = "tip",
|
|
20
|
+
DEFAULT_VAL = "default_val",
|
|
21
|
+
ELEM_WIDTH = "elem_width",
|
|
22
|
+
PLACEHOLDER = "placeholder",
|
|
23
|
+
IS_SHOW = "is_show",
|
|
24
|
+
IS_NOT_FOLD = "is_not_fold",
|
|
25
|
+
IS_NULL = "is_null",
|
|
26
|
+
IS_EDIT = "is_edit"
|
|
27
|
+
}
|
|
28
|
+
export declare const InjectionActiveFieldItem: InjectionKey<Ref<WithUndefined<FieldItem>>>;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
const WidgetTextMap = {
|
|
2
|
+
INPUT: "\u8F93\u5165\u6846",
|
|
3
|
+
SELECT: "\u4E0B\u62C9\u6846",
|
|
4
|
+
TEXTAREA: "\u6587\u672C\u57DF",
|
|
5
|
+
CASCADER: "\u7EA7\u8054\u4E0B\u62C9\u6846",
|
|
6
|
+
SWITCH: "\u5F00\u5173",
|
|
7
|
+
RADIO: "\u5355\u9009",
|
|
8
|
+
TEXT: "\u6587\u672C",
|
|
9
|
+
BUTTON: "\u6309\u94AE",
|
|
10
|
+
CHECKBOX: "\u591A\u9009",
|
|
11
|
+
LINEBAR: "\u5206\u884C\u7B26",
|
|
12
|
+
LINE_BREAKS: "\u5206\u7EBF\u680F"
|
|
13
|
+
};
|
|
14
|
+
var EditAbleField = /* @__PURE__ */ ((EditAbleField2) => {
|
|
15
|
+
EditAbleField2["ALIAS"] = "alias";
|
|
16
|
+
EditAbleField2["TIP"] = "tip";
|
|
17
|
+
EditAbleField2["DEFAULT_VAL"] = "default_val";
|
|
18
|
+
EditAbleField2["ELEM_WIDTH"] = "elem_width";
|
|
19
|
+
EditAbleField2["PLACEHOLDER"] = "placeholder";
|
|
20
|
+
EditAbleField2["IS_SHOW"] = "is_show";
|
|
21
|
+
EditAbleField2["IS_NOT_FOLD"] = "is_not_fold";
|
|
22
|
+
EditAbleField2["IS_NULL"] = "is_null";
|
|
23
|
+
EditAbleField2["IS_EDIT"] = "is_edit";
|
|
24
|
+
return EditAbleField2;
|
|
25
|
+
})(EditAbleField || {});
|
|
26
|
+
const InjectionActiveFieldItem = Symbol("InjectionActiveFieldItem");
|
|
27
|
+
|
|
28
|
+
export { EditAbleField, InjectionActiveFieldItem, WidgetTextMap };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { EditAbleField } from '../../../../../es/packages/form-config/src/constants';
|
|
2
|
+
import { FieldItem } from '../../../../../es/packages/form-render';
|
|
3
|
+
export declare function useConfigurationField(): {
|
|
4
|
+
generateFieldListByKeys: (keyList: EditAbleField[]) => FieldItem[];
|
|
5
|
+
generateFieldListByFieldItem: (fieldItem: FieldItem) => FieldItem[];
|
|
6
|
+
};
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import { EditAbleField } from '../../../../packages/form-config/src/constants';
|
|
2
|
+
|
|
3
|
+
function useConfigurationField() {
|
|
4
|
+
const fieldMap = /* @__PURE__ */ new Map([
|
|
5
|
+
[EditAbleField.ALIAS, { alias: "\u540D\u79F0", elem_width: 12, is_null: "0", val_key: "alias", html_type: "INPUT" }],
|
|
6
|
+
[EditAbleField.TIP, { alias: "\u95EE\u53F7\u63D0\u793A", elem_width: 12, val_key: "tip", html_type: "INPUT" }],
|
|
7
|
+
[
|
|
8
|
+
EditAbleField.DEFAULT_VAL,
|
|
9
|
+
{ alias: "\u9ED8\u8BA4\u503C", val_key: "default_val", elem_width: 12, html_type: "INPUT", validate: { max_length: 20 } }
|
|
10
|
+
],
|
|
11
|
+
[
|
|
12
|
+
EditAbleField.ELEM_WIDTH,
|
|
13
|
+
{
|
|
14
|
+
alias: "\u5BBD\u5EA6",
|
|
15
|
+
fieldType: "number",
|
|
16
|
+
val_key: "elem_width",
|
|
17
|
+
html_type: "SELECT",
|
|
18
|
+
elem_width: 12,
|
|
19
|
+
option: [
|
|
20
|
+
{ text: "\u6574\u884C", value: 12 },
|
|
21
|
+
{ text: "\u534A\u884C", value: 6 },
|
|
22
|
+
{ text: "5/6", value: 10 },
|
|
23
|
+
{ text: "2/3", value: 8 },
|
|
24
|
+
{ text: "1/3", value: 4 },
|
|
25
|
+
{ text: "3/4", value: 9 },
|
|
26
|
+
{ text: "1/4", value: 3 },
|
|
27
|
+
{ text: "1/6", value: 2 }
|
|
28
|
+
]
|
|
29
|
+
}
|
|
30
|
+
],
|
|
31
|
+
[
|
|
32
|
+
EditAbleField.PLACEHOLDER,
|
|
33
|
+
{ alias: "\u8BF4\u660E\u6587\u672C", elem_width: 12, val_key: "placeholder", html_type: "INPUT", validate: { max_length: 30 } }
|
|
34
|
+
],
|
|
35
|
+
[
|
|
36
|
+
EditAbleField.IS_SHOW,
|
|
37
|
+
{
|
|
38
|
+
val_key: "is_show",
|
|
39
|
+
alias: "\u662F\u5426\u9ED8\u8BA4\u5C55\u5F00",
|
|
40
|
+
html_type: "SWITCH",
|
|
41
|
+
elem_width: 12,
|
|
42
|
+
open: { describe: "\u9ED8\u8BA4\u5C55\u5F00", value: "1" },
|
|
43
|
+
close: { describe: "\u9ED8\u8BA4\u6536\u8D77", value: "0" }
|
|
44
|
+
}
|
|
45
|
+
],
|
|
46
|
+
[
|
|
47
|
+
EditAbleField.IS_NOT_FOLD,
|
|
48
|
+
{
|
|
49
|
+
val_key: "is_not_fold",
|
|
50
|
+
alias: "\u662F\u5426\u53EF\u6298\u53E0",
|
|
51
|
+
html_type: "SWITCH",
|
|
52
|
+
elem_width: 12,
|
|
53
|
+
open: { describe: "\u53EF\u6298\u53E0", value: "0" },
|
|
54
|
+
close: { describe: "\u4E0D\u53EF\u6298\u53E0", value: "1" }
|
|
55
|
+
}
|
|
56
|
+
],
|
|
57
|
+
[
|
|
58
|
+
EditAbleField.IS_EDIT,
|
|
59
|
+
{
|
|
60
|
+
val_key: "is_edit",
|
|
61
|
+
alias: "\u662F\u5426\u53EF\u7F16\u8F91",
|
|
62
|
+
html_type: "SWITCH",
|
|
63
|
+
elem_width: 12,
|
|
64
|
+
open: { describe: "\u53EF\u7F16\u8F91", value: "1" },
|
|
65
|
+
close: { describe: "\u4E0D\u53EF\u7F16\u8F91", value: "0" }
|
|
66
|
+
}
|
|
67
|
+
],
|
|
68
|
+
[
|
|
69
|
+
EditAbleField.IS_NULL,
|
|
70
|
+
{
|
|
71
|
+
val_key: "is_null",
|
|
72
|
+
alias: "\u662F\u5426\u5FC5\u586B",
|
|
73
|
+
html_type: "SWITCH",
|
|
74
|
+
elem_width: 12,
|
|
75
|
+
open: { describe: "\u5FC5\u586B", value: "0" },
|
|
76
|
+
close: { describe: "\u4E0D\u5FC5\u586B", value: "1" }
|
|
77
|
+
}
|
|
78
|
+
]
|
|
79
|
+
]);
|
|
80
|
+
function generateFieldListByKeys(keyList) {
|
|
81
|
+
return keyList.map((key) => fieldMap.get(key));
|
|
82
|
+
}
|
|
83
|
+
function generateFieldListByFieldItem(fieldItem) {
|
|
84
|
+
const htmlMap = new Map([
|
|
85
|
+
["LINEBAR", [EditAbleField.ALIAS, EditAbleField.ELEM_WIDTH, EditAbleField.IS_SHOW, EditAbleField.IS_NOT_FOLD]],
|
|
86
|
+
...["LINE_BREAKS", "COMPLEX", "COMBINATION"].map((key) => [key, [EditAbleField.ALIAS, EditAbleField.ELEM_WIDTH]])
|
|
87
|
+
]);
|
|
88
|
+
const defaultItems = [
|
|
89
|
+
EditAbleField.ALIAS,
|
|
90
|
+
EditAbleField.DEFAULT_VAL,
|
|
91
|
+
EditAbleField.ELEM_WIDTH,
|
|
92
|
+
EditAbleField.PLACEHOLDER,
|
|
93
|
+
EditAbleField.TIP,
|
|
94
|
+
EditAbleField.IS_EDIT,
|
|
95
|
+
EditAbleField.IS_NULL
|
|
96
|
+
];
|
|
97
|
+
const keys = htmlMap.get(fieldItem.html_type) || defaultItems;
|
|
98
|
+
return generateFieldListByKeys(keys);
|
|
99
|
+
}
|
|
100
|
+
return { generateFieldListByKeys, generateFieldListByFieldItem };
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
export { useConfigurationField };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { FieldItem } from '../../../../../es/packages/form-render';
|
|
2
|
+
import { FormConfigTextFormatter } from '../types';
|
|
3
|
+
export declare function usePresetRenderer(textFormatter: FormConfigTextFormatter): {
|
|
4
|
+
getRenderer: (fieldItem: FieldItem) => import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | import("vue").FunctionalComponent<{}, {}>;
|
|
5
|
+
};
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import { defineComponent, computed, createVNode, mergeProps, inject } from 'vue';
|
|
2
|
+
import { isString, isArray, isFunction } from 'lodash-es';
|
|
3
|
+
import Draggable from 'vuedraggable';
|
|
4
|
+
import { InjectionActiveFieldItem, WidgetTextMap } from '../../../../packages/form-config/src/constants';
|
|
5
|
+
import { useSortable } from '../../../../packages/form-config/src/hooks';
|
|
6
|
+
import { NEllipsis } from 'naive-ui';
|
|
7
|
+
|
|
8
|
+
function usePresetRenderer(textFormatter) {
|
|
9
|
+
const renderDefaultNode = {
|
|
10
|
+
matcher: () => true,
|
|
11
|
+
renderer({
|
|
12
|
+
fieldItem
|
|
13
|
+
}) {
|
|
14
|
+
const currentActiveEditField = inject(InjectionActiveFieldItem);
|
|
15
|
+
return createVNode("section", {
|
|
16
|
+
"onClick": () => currentActiveEditField.value = fieldItem,
|
|
17
|
+
"class": {
|
|
18
|
+
"is-active": currentActiveEditField.value === fieldItem
|
|
19
|
+
}
|
|
20
|
+
}, [createVNode(NEllipsis, {
|
|
21
|
+
"class": ["form-config__renderer--default", {
|
|
22
|
+
"is-required": fieldItem.is_null === "0",
|
|
23
|
+
"is-disabled": fieldItem.is_edit === "0"
|
|
24
|
+
}]
|
|
25
|
+
}, {
|
|
26
|
+
default: () => getDisplayText()
|
|
27
|
+
})]);
|
|
28
|
+
function getDisplayText() {
|
|
29
|
+
return textFormatter(fieldItem, `${fieldItem.alias}(${WidgetTextMap[fieldItem.html_type] || "\u63A7\u4EF6"})`);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
const renderComplexNode = {
|
|
34
|
+
matcher: ["COMPLEX", "COMBINATION"],
|
|
35
|
+
renderer: defineComponent({
|
|
36
|
+
props: {
|
|
37
|
+
fieldItem: {
|
|
38
|
+
type: Object,
|
|
39
|
+
required: true
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
setup(props) {
|
|
43
|
+
function fieldFor(key) {
|
|
44
|
+
return props.fieldItem[key];
|
|
45
|
+
}
|
|
46
|
+
const classList = computed(() => {
|
|
47
|
+
return `form-config__renderer--complex form-config__renderer--complex--${fieldFor("display") || "grid"}`;
|
|
48
|
+
});
|
|
49
|
+
const style = computed(() => {
|
|
50
|
+
return {
|
|
51
|
+
"--item-column": fieldFor("elem_width"),
|
|
52
|
+
...fieldFor("wrapperStyle")
|
|
53
|
+
};
|
|
54
|
+
});
|
|
55
|
+
function renderField(fieldItem) {
|
|
56
|
+
const Renderer = getRenderer(fieldItem);
|
|
57
|
+
return createVNode("div", {
|
|
58
|
+
"class": "form-config__displayContentItem",
|
|
59
|
+
"style": {
|
|
60
|
+
"--item-column": fieldItem.elem_width
|
|
61
|
+
}
|
|
62
|
+
}, [createVNode(Renderer, {
|
|
63
|
+
"fieldItem": fieldItem
|
|
64
|
+
}, null)]);
|
|
65
|
+
}
|
|
66
|
+
const childrenList = computed({
|
|
67
|
+
get() {
|
|
68
|
+
return fieldFor("html_type") === "COMBINATION" ? fieldFor("children") : fieldFor("properties");
|
|
69
|
+
},
|
|
70
|
+
set(v) {
|
|
71
|
+
if (fieldFor("html_type") === "COMBINATION") {
|
|
72
|
+
props.fieldItem.children = v;
|
|
73
|
+
} else {
|
|
74
|
+
props.fieldItem.properties = v;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
const {
|
|
79
|
+
commonConfig
|
|
80
|
+
} = useSortable();
|
|
81
|
+
const DraggableComponent = Draggable;
|
|
82
|
+
return () => createVNode(DraggableComponent, mergeProps(commonConfig, {
|
|
83
|
+
"class": classList.value,
|
|
84
|
+
"style": style.value,
|
|
85
|
+
"group": fieldFor("val_key"),
|
|
86
|
+
"modelValue": childrenList.value,
|
|
87
|
+
"onUpdate:modelValue": ($event) => childrenList.value = $event
|
|
88
|
+
}), {
|
|
89
|
+
item: ({
|
|
90
|
+
element
|
|
91
|
+
}) => renderField(element)
|
|
92
|
+
});
|
|
93
|
+
}
|
|
94
|
+
})
|
|
95
|
+
};
|
|
96
|
+
const rendererWithPreset = computed(() => {
|
|
97
|
+
return [renderComplexNode, renderDefaultNode];
|
|
98
|
+
});
|
|
99
|
+
function getRenderer(fieldItem) {
|
|
100
|
+
return rendererWithPreset.value.find(({
|
|
101
|
+
matcher
|
|
102
|
+
}) => {
|
|
103
|
+
if (isString(matcher))
|
|
104
|
+
return matcher === fieldItem.html_type;
|
|
105
|
+
if (isArray(matcher))
|
|
106
|
+
return matcher.includes(fieldItem.html_type);
|
|
107
|
+
if (isFunction(matcher))
|
|
108
|
+
return matcher(fieldItem.html_type);
|
|
109
|
+
return matcher.test(fieldItem.html_type);
|
|
110
|
+
}).renderer;
|
|
111
|
+
}
|
|
112
|
+
return {
|
|
113
|
+
getRenderer
|
|
114
|
+
};
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
export { usePresetRenderer };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import Sortable from 'sortablejs';
|
|
2
|
+
export declare function useSortable(): {
|
|
3
|
+
commonConfig: {
|
|
4
|
+
onMove: ({ to, from }: Sortable.SortableEvent) => void;
|
|
5
|
+
onChoose: ({ target, item }: Sortable.SortableEvent) => void;
|
|
6
|
+
onUnchoose: ({ from, to, target, item }: Sortable.SortableEvent) => void;
|
|
7
|
+
tag: string;
|
|
8
|
+
animation: string;
|
|
9
|
+
'item-key': string;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
function useSortable() {
|
|
2
|
+
let timer = null;
|
|
3
|
+
function onChoose({ target, item }) {
|
|
4
|
+
timer = setTimeout(() => {
|
|
5
|
+
target.classList.add("is-choosing-area");
|
|
6
|
+
item.classList.add("is-choosing");
|
|
7
|
+
}, 200);
|
|
8
|
+
}
|
|
9
|
+
function onUnchoose({ from, to, target, item }) {
|
|
10
|
+
clearTimeout(timer);
|
|
11
|
+
[from, to, target].forEach((ele) => {
|
|
12
|
+
ele.classList.remove("is-choosing-area");
|
|
13
|
+
});
|
|
14
|
+
item.classList.remove("is-choosing");
|
|
15
|
+
}
|
|
16
|
+
let prevTo;
|
|
17
|
+
function onMove({ to, from }) {
|
|
18
|
+
if (to === from) {
|
|
19
|
+
prevTo == null ? void 0 : prevTo.classList.remove("is-choosing-area");
|
|
20
|
+
prevTo = null;
|
|
21
|
+
} else {
|
|
22
|
+
from.classList.remove("is-choosing-area");
|
|
23
|
+
prevTo = to;
|
|
24
|
+
}
|
|
25
|
+
to.classList.add("is-choosing-area");
|
|
26
|
+
}
|
|
27
|
+
const commonConfig = { onMove, onChoose, onUnchoose, tag: "section", animation: "150", "item-key": "val_key" };
|
|
28
|
+
return { commonConfig };
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export { useSortable };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { Component, FunctionalComponent } from 'vue';
|
|
2
|
+
import { ArrayAble } from '../../../../../es/src/types';
|
|
3
|
+
import { FieldItem } from '../../../../../es/packages/form-render';
|
|
4
|
+
interface Matcher {
|
|
5
|
+
(type: string): boolean;
|
|
6
|
+
}
|
|
7
|
+
export declare type FormConfigRenderer = {
|
|
8
|
+
matcher: ArrayAble<string> | RegExp | Matcher;
|
|
9
|
+
renderer: Component | FunctionalComponent;
|
|
10
|
+
};
|
|
11
|
+
export interface FormConfigTextFormatter {
|
|
12
|
+
(fieldItem: FieldItem, parsedText: string): string;
|
|
13
|
+
}
|
|
14
|
+
export interface FormConfigExpose {
|
|
15
|
+
loadData(payload: Record<'fieldList' | 'materialList', FieldItem[]>): void;
|
|
16
|
+
getData(): Record<'fieldList' | 'materialList', FieldItem[]>;
|
|
17
|
+
}
|
|
18
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
.form-config {
|
|
2
|
+
display: flex;
|
|
3
|
+
justify-content: space-between;
|
|
4
|
+
}
|
|
5
|
+
.form-config__material {
|
|
6
|
+
padding: 16px;
|
|
7
|
+
box-sizing: border-box;
|
|
8
|
+
width: 200px;
|
|
9
|
+
min-height: 400px;
|
|
10
|
+
background: white;
|
|
11
|
+
}
|
|
12
|
+
.form-config__materialHeader {
|
|
13
|
+
display: flex;
|
|
14
|
+
align-items: center;
|
|
15
|
+
justify-content: space-between;
|
|
16
|
+
height: 40px;
|
|
17
|
+
}
|
|
18
|
+
.form-config__materialContent {
|
|
19
|
+
padding: 8px;
|
|
20
|
+
display: flex;
|
|
21
|
+
flex-direction: column;
|
|
22
|
+
gap: 8px;
|
|
23
|
+
}
|
|
24
|
+
.form-config__materialContentItem {
|
|
25
|
+
display: flex;
|
|
26
|
+
align-items: center;
|
|
27
|
+
padding: 8px;
|
|
28
|
+
border: 1px dashed #d9d9d9;
|
|
29
|
+
box-sizing: border-box;
|
|
30
|
+
background-color: #fafafa;
|
|
31
|
+
grid-column: span var(--item-column) / span var(--item-column);
|
|
32
|
+
}
|
|
33
|
+
.form-config__displayWrapper {
|
|
34
|
+
padding: 16px;
|
|
35
|
+
box-sizing: border-box;
|
|
36
|
+
flex: 1;
|
|
37
|
+
padding: 16px 0;
|
|
38
|
+
}
|
|
39
|
+
.form-config__displayHeader {
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: center;
|
|
42
|
+
justify-content: space-between;
|
|
43
|
+
height: 40px;
|
|
44
|
+
}
|
|
45
|
+
.form-config__displayContent {
|
|
46
|
+
padding: 16px;
|
|
47
|
+
box-sizing: border-box;
|
|
48
|
+
height: fit-content;
|
|
49
|
+
background: #eeeeee;
|
|
50
|
+
display: grid !important;
|
|
51
|
+
grid-template-columns: repeat(12, minmax(0px, 1fr));
|
|
52
|
+
gap: 8px 16px;
|
|
53
|
+
}
|
|
54
|
+
.form-config__displayContentItem {
|
|
55
|
+
grid-column: span var(--item-column) / span var(--item-column);
|
|
56
|
+
position: relative;
|
|
57
|
+
}
|
|
58
|
+
.form-config__config {
|
|
59
|
+
padding: 16px;
|
|
60
|
+
box-sizing: border-box;
|
|
61
|
+
width: 220px;
|
|
62
|
+
background: white;
|
|
63
|
+
}
|
|
64
|
+
.form-config__renderer--default {
|
|
65
|
+
display: flex;
|
|
66
|
+
align-items: center;
|
|
67
|
+
padding: 8px;
|
|
68
|
+
border: 1px dashed #d9d9d9;
|
|
69
|
+
box-sizing: border-box;
|
|
70
|
+
background-color: #fafafa;
|
|
71
|
+
user-select: none;
|
|
72
|
+
position: relative;
|
|
73
|
+
width: 100%;
|
|
74
|
+
}
|
|
75
|
+
.form-config__renderer--complex {
|
|
76
|
+
border: 1px dashed lightblue;
|
|
77
|
+
padding: 8px;
|
|
78
|
+
}
|
|
79
|
+
.form-config__renderer--complex--grid {
|
|
80
|
+
display: grid !important;
|
|
81
|
+
grid-template-columns: repeat(12, minmax(0px, 1fr));
|
|
82
|
+
gap: 8px 16px;
|
|
83
|
+
grid-column: span var(--item-column) / span var(--item-column);
|
|
84
|
+
}
|
|
85
|
+
.form-config__renderer--complex--flex {
|
|
86
|
+
display: flex;
|
|
87
|
+
}
|
|
88
|
+
.form-config .is-disabled {
|
|
89
|
+
background: #e5e5e5;
|
|
90
|
+
}
|
|
91
|
+
.form-config .is-required {
|
|
92
|
+
padding-left: 16px !important;
|
|
93
|
+
}
|
|
94
|
+
.form-config .is-required::before {
|
|
95
|
+
position: absolute;
|
|
96
|
+
content: '*';
|
|
97
|
+
left: 8px;
|
|
98
|
+
color: red;
|
|
99
|
+
}
|
|
100
|
+
.form-config .is-active {
|
|
101
|
+
color: #5585f5;
|
|
102
|
+
}
|
|
103
|
+
.form-config .is-choosing {
|
|
104
|
+
box-shadow: #5585f5 0 0 0 2px !important;
|
|
105
|
+
}
|
|
106
|
+
.form-config .is-choosing-area {
|
|
107
|
+
background: #f0f7ff;
|
|
108
|
+
}
|
|
@@ -112,8 +112,8 @@ declare const FormRender: SFCWithInstall<import("vue").DefineComponent<{
|
|
|
112
112
|
lifeCycle: {
|
|
113
113
|
type: import("vue").PropType<Partial<{
|
|
114
114
|
onSetup(): void;
|
|
115
|
-
beforeRequest(params?: import("../../../es/src/types").AnyObject | undefined): void | import("../../../es/src/types").WithUndefined<import("../../../es/src/types").AnyObject>;
|
|
116
|
-
afterRequest(payload?:
|
|
115
|
+
beforeRequest(fieldKey: string, params?: import("../../../es/src/types").AnyObject | undefined): void | import("../../../es/src/types").WithUndefined<import("../../../es/src/types").AnyObject>;
|
|
116
|
+
afterRequest(fieldKey: string, payload?: any): import("../../../es/src/types").AnyObject[];
|
|
117
117
|
}>>;
|
|
118
118
|
};
|
|
119
119
|
}, {
|
|
@@ -227,8 +227,8 @@ declare const FormRender: SFCWithInstall<import("vue").DefineComponent<{
|
|
|
227
227
|
lifeCycle: {
|
|
228
228
|
type: import("vue").PropType<Partial<{
|
|
229
229
|
onSetup(): void;
|
|
230
|
-
beforeRequest(params?: import("../../../es/src/types").AnyObject | undefined): void | import("../../../es/src/types").WithUndefined<import("../../../es/src/types").AnyObject>;
|
|
231
|
-
afterRequest(payload?:
|
|
230
|
+
beforeRequest(fieldKey: string, params?: import("../../../es/src/types").AnyObject | undefined): void | import("../../../es/src/types").WithUndefined<import("../../../es/src/types").AnyObject>;
|
|
231
|
+
afterRequest(fieldKey: string, payload?: any): import("../../../es/src/types").AnyObject[];
|
|
232
232
|
}>>;
|
|
233
233
|
};
|
|
234
234
|
}>> & {
|
|
@@ -1729,8 +1729,8 @@ declare const FormRender: SFCWithInstall<import("vue").DefineComponent<{
|
|
|
1729
1729
|
lifeCycle: {
|
|
1730
1730
|
type: import("vue").PropType<Partial<{
|
|
1731
1731
|
onSetup(): void;
|
|
1732
|
-
beforeRequest(params?: import("../../../es/src/types").AnyObject | undefined): void | import("../../../es/src/types").WithUndefined<import("../../../es/src/types").AnyObject>;
|
|
1733
|
-
afterRequest(payload?:
|
|
1732
|
+
beforeRequest(fieldKey: string, params?: import("../../../es/src/types").AnyObject | undefined): void | import("../../../es/src/types").WithUndefined<import("../../../es/src/types").AnyObject>;
|
|
1733
|
+
afterRequest(fieldKey: string, payload?: any): import("../../../es/src/types").AnyObject[];
|
|
1734
1734
|
}>>;
|
|
1735
1735
|
};
|
|
1736
1736
|
}>> & {
|
|
@@ -112,8 +112,8 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
112
112
|
lifeCycle: {
|
|
113
113
|
type: PropType<Partial<{
|
|
114
114
|
onSetup(): void;
|
|
115
|
-
beforeRequest(params?: AnyObject | undefined): void | import("../../../../es/src/types").WithUndefined<AnyObject>;
|
|
116
|
-
afterRequest(payload?:
|
|
115
|
+
beforeRequest(fieldKey: string, params?: AnyObject | undefined): void | import("../../../../es/src/types").WithUndefined<AnyObject>;
|
|
116
|
+
afterRequest(fieldKey: string, payload?: any): AnyObject[];
|
|
117
117
|
}>>;
|
|
118
118
|
};
|
|
119
119
|
}, {
|
|
@@ -227,8 +227,8 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
227
227
|
lifeCycle: {
|
|
228
228
|
type: PropType<Partial<{
|
|
229
229
|
onSetup(): void;
|
|
230
|
-
beforeRequest(params?: AnyObject | undefined): void | import("../../../../es/src/types").WithUndefined<AnyObject>;
|
|
231
|
-
afterRequest(payload?:
|
|
230
|
+
beforeRequest(fieldKey: string, params?: AnyObject | undefined): void | import("../../../../es/src/types").WithUndefined<AnyObject>;
|
|
231
|
+
afterRequest(fieldKey: string, payload?: any): AnyObject[];
|
|
232
232
|
}>>;
|
|
233
233
|
};
|
|
234
234
|
}>> & {
|
|
@@ -1729,8 +1729,8 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
1729
1729
|
lifeCycle: {
|
|
1730
1730
|
type: PropType<Partial<{
|
|
1731
1731
|
onSetup(): void;
|
|
1732
|
-
beforeRequest(params?: AnyObject | undefined): void | import("../../../../es/src/types").WithUndefined<AnyObject>;
|
|
1733
|
-
afterRequest(payload?:
|
|
1732
|
+
beforeRequest(fieldKey: string, params?: AnyObject | undefined): void | import("../../../../es/src/types").WithUndefined<AnyObject>;
|
|
1733
|
+
afterRequest(fieldKey: string, payload?: any): AnyObject[];
|
|
1734
1734
|
}>>;
|
|
1735
1735
|
};
|
|
1736
1736
|
}>> & {
|
|
@@ -18,7 +18,8 @@ const script = defineComponent({
|
|
|
18
18
|
const annotation = inject(InjectionAnnotation);
|
|
19
19
|
const annotationContent = computed({
|
|
20
20
|
get() {
|
|
21
|
-
|
|
21
|
+
var _a, _b;
|
|
22
|
+
return (_b = (_a = annotation.value) == null ? void 0 : _a[props.propertyKey]) != null ? _b : "";
|
|
22
23
|
},
|
|
23
24
|
set(value) {
|
|
24
25
|
annotation.value = {
|
|
@@ -51,7 +51,6 @@ const script = defineComponent({
|
|
|
51
51
|
emit("update:value", v);
|
|
52
52
|
}
|
|
53
53
|
const {
|
|
54
|
-
title,
|
|
55
54
|
field,
|
|
56
55
|
fieldKey
|
|
57
56
|
} = useFormField();
|
|
@@ -64,16 +63,23 @@ const script = defineComponent({
|
|
|
64
63
|
if (remoteOptions.value)
|
|
65
64
|
return;
|
|
66
65
|
remoteOptions.value = await asyncQueue.addAsync({
|
|
67
|
-
...createParams(configFor(props), field.value,
|
|
66
|
+
...await createParams(configFor(props), field.value, fieldKey.value)
|
|
68
67
|
});
|
|
69
|
-
function createParams(config, field2, key) {
|
|
68
|
+
async function createParams(config, field2, key) {
|
|
70
69
|
const _params = {};
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
70
|
+
try {
|
|
71
|
+
traverseDependKey(config.dependKey, (dependKey, valueKey2, required) => {
|
|
72
|
+
const _field = field2.query(dependKey).take();
|
|
73
|
+
if (isField(_field)) {
|
|
74
|
+
if (required && _field.value == null) {
|
|
75
|
+
throw `\u7F3A\u5C11\u5FC5\u987B\u7684\u53C2\u6570=>${dependKey}`;
|
|
76
|
+
}
|
|
77
|
+
_params[valueKey2] = _field.value;
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
} catch (e) {
|
|
81
|
+
return Promise.reject(e);
|
|
82
|
+
}
|
|
77
83
|
return {
|
|
78
84
|
...config,
|
|
79
85
|
params: Object.assign({}, config.params, _params),
|
|
@@ -106,6 +112,7 @@ const script = defineComponent({
|
|
|
106
112
|
formItemDepsCollector.setDeps(fieldKey.value, config.dependKey || [], async () => {
|
|
107
113
|
remoteOptions.value = null;
|
|
108
114
|
emit("update:value", null);
|
|
115
|
+
!props.lazyRequest && await fetchData();
|
|
109
116
|
});
|
|
110
117
|
(props.value || !props.lazyRequest) && fetchData();
|
|
111
118
|
}, {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { AnyObject, WithUndefined } from '../../../../../es/src/types';
|
|
2
2
|
import { FormAsyncQueueItem } from '../types';
|
|
3
3
|
declare type ProcessorOption = Partial<{
|
|
4
|
-
afterRequest(payload?:
|
|
5
|
-
beforeRequest(params?:
|
|
4
|
+
afterRequest(key: string, payload?: unknown): AnyObject[];
|
|
5
|
+
beforeRequest(key: string, params?: unknown): WithUndefined<AnyObject> | void;
|
|
6
6
|
}>;
|
|
7
7
|
interface EntryCallback {
|
|
8
8
|
(err?: any, result?: any): void;
|
|
@@ -108,8 +108,8 @@ function useAsyncQueue() {
|
|
|
108
108
|
return new AsyncQueue({
|
|
109
109
|
name: "FormRenderAsyncQueue",
|
|
110
110
|
parallelism,
|
|
111
|
-
async processor({ method = "post", params, url }, cb, removeCache) {
|
|
112
|
-
var _a
|
|
111
|
+
async processor({ key, method = "post", params, url }, cb, removeCache) {
|
|
112
|
+
var _a;
|
|
113
113
|
const http = getHttpInstance();
|
|
114
114
|
if (!http) {
|
|
115
115
|
useCommonLog().invalidHttpInstanceLog();
|
|
@@ -119,17 +119,13 @@ function useAsyncQueue() {
|
|
|
119
119
|
}
|
|
120
120
|
try {
|
|
121
121
|
if (option && isFunction(option.beforeRequest)) {
|
|
122
|
-
params = (_a = option.beforeRequest(params)) != null ? _a : {};
|
|
122
|
+
params = (_a = option.beforeRequest(key, params)) != null ? _a : {};
|
|
123
123
|
}
|
|
124
|
-
|
|
125
|
-
const { data, success } = res;
|
|
126
|
-
if (!success)
|
|
127
|
-
throw res;
|
|
128
|
-
let payload = Array.isArray(data) ? data : [];
|
|
124
|
+
let res = await http[method](url, params);
|
|
129
125
|
if (option && isFunction(option.afterRequest)) {
|
|
130
|
-
|
|
126
|
+
res = option.afterRequest(key, res);
|
|
131
127
|
}
|
|
132
|
-
cb(void 0,
|
|
128
|
+
cb(void 0, Array.isArray(res) ? res : []);
|
|
133
129
|
} catch (e) {
|
|
134
130
|
cb(new Error(`Request error => ${e}`));
|
|
135
131
|
removeCache();
|
|
@@ -51,7 +51,8 @@ function useFieldListAdaptor(collector, uuid) {
|
|
|
51
51
|
const createSelectSchema = (item) => {
|
|
52
52
|
const schema = createStandardSchema(item);
|
|
53
53
|
Object.assign(schema["x-component-props"], {
|
|
54
|
-
...pick(item, ["lazyRequest", "urlConfig"
|
|
54
|
+
...pick(item, ["lazyRequest", "urlConfig"]),
|
|
55
|
+
options: item.option,
|
|
55
56
|
multiple: item.multi_select === "0",
|
|
56
57
|
maxTagCount: +item.multi_select_value
|
|
57
58
|
});
|