1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
| import { reactive, ref, watch } from "vue";
| import { useConfig } from "../../../hooks";
| import { cloneDeep } from "lodash-es";
|
| export function useForm() {
| const { dict } = useConfig();
|
| // 表单配置
| const config = reactive<ClForm.Config>({
| title: "-",
| height: undefined,
| width: "50%",
| props: {
| labelWidth: 100
| },
| on: {},
| op: {
| hidden: false,
| saveButtonText: dict.label.save,
| closeButtonText: dict.label.close,
| buttons: ["close", "save"]
| },
| dialog: {
| closeOnClickModal: false,
| appendToBody: true
| },
| items: [],
| form: {},
| _data: {}
| });
|
| const Form = ref();
|
| // 表单数据
| const form = reactive<obj>({});
|
| // 表单数据备份
| const oldForm = ref<obj>({});
|
| // 表单是否可见
| const visible = ref(false);
|
| // 表单提交保存状态
| const saving = ref(false);
|
| // 表单加载状态
| const loading = ref(false);
|
| // 表单禁用状态
| const disabled = ref(false);
|
| // 监听表单变化
| watch(
| () => form,
| (val) => {
| if (config.on?.change) {
| for (const i in val) {
| if (form[i] !== oldForm.value[i]) {
| config.on?.change(val, i);
| }
| }
| }
|
| oldForm.value = cloneDeep(val);
| },
| {
| deep: true
| }
| );
|
| return {
| Form,
| config,
| form,
| visible,
| saving,
| loading,
| disabled
| };
| }
|
| export * from "./action";
| export * from "./api";
| export * from "./plugins";
| export * from "./tabs";
|
|
