@dt-frames/ui 2.0.10 → 2.0.12

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 (64) hide show
  1. package/es/components/container/index.d.ts +2 -93
  2. package/es/components/curd/index.js +7 -2966
  3. package/es/components/curd/src/components/Curd.d.ts +19 -891
  4. package/es/components/curd/src/hooks/useCurd.d.ts +2 -2
  5. package/es/components/curd/src/props.d.ts +6 -4
  6. package/es/components/curd/src/types/curd.type.d.ts +2 -2
  7. package/es/components/drawer/index.d.ts +10 -167
  8. package/es/components/drawer/index.js +24 -462
  9. package/es/components/drawer/src/components/DrawerFooter.d.ts +1 -84
  10. package/es/components/drawer/src/index.d.ts +10 -167
  11. package/es/components/drawer/src/types/index.type.d.ts +2 -2
  12. package/es/components/form/index.d.ts +5 -1
  13. package/es/components/form/index.js +81 -485
  14. package/es/components/form/src/components/FormItem.d.ts +3 -1
  15. package/es/components/form/src/components/formIcon.d.ts +3 -11
  16. package/es/components/form/src/components/formInputUseDialog.d.ts +2 -2
  17. package/es/components/form/src/props.d.ts +7 -5
  18. package/es/components/form/src/types/form.type.d.ts +3 -0
  19. package/es/components/form/src/types/items.type.d.ts +6 -4
  20. package/es/components/icons/index.d.ts +497 -497
  21. package/es/components/iframe/index.d.ts +2 -0
  22. package/es/components/iframe/index.js +72 -0
  23. package/es/components/iframe/index.less +29 -0
  24. package/es/components/iframe/src/index.d.ts +38 -0
  25. package/es/components/modal/index.d.ts +2 -1
  26. package/es/components/modal/index.js +23 -475
  27. package/es/components/modal/src/components/Modal.d.ts +1 -1
  28. package/es/components/modal/src/components/ModalFooter.d.ts +2 -95
  29. package/es/components/modal/src/components/ModalWrap.d.ts +1 -75
  30. package/es/components/modal/src/index.d.ts +14 -179
  31. package/es/components/table/index.js +328 -2030
  32. package/es/components/table/src/components/TableAction.d.ts +1 -1
  33. package/es/components/table/src/components/editTable/EditTableCell.d.ts +1 -1
  34. package/es/components/table/src/components/tableSetting/DownloadCtrl.d.ts +1 -877
  35. package/es/components/table/src/index.d.ts +10 -10
  36. package/es/components/tree/src/components/TreeHeader.d.ts +1 -1
  37. package/es/components/tree/src/index.d.ts +2 -2
  38. package/es/components/upload/index.d.ts +2 -0
  39. package/es/components/upload/index.js +419 -0
  40. package/es/components/upload/index.less +37 -0
  41. package/es/components/upload/src/basicProps.d.ts +89 -0
  42. package/es/components/upload/src/components/PdfView.d.ts +9 -0
  43. package/es/components/upload/src/hooks/useFile.d.ts +15 -0
  44. package/es/components/upload/src/index.d.ts +236 -0
  45. package/es/components/upload/src/type/file.d.ts +10 -0
  46. package/es/components/upload/src/utils/upload.d.ts +2 -0
  47. package/es/theme/index.d.ts +2 -1
  48. package/es/theme/index.js +98 -145
  49. package/es/theme/index.less +5 -1
  50. package/es/theme/src/components/content/index.d.ts +2 -0
  51. package/es/theme/src/components/header/index.d.ts +809 -809
  52. package/es/theme/src/components/header/multiple-header.d.ts +918 -918
  53. package/es/theme/src/hooks/useMenu.d.ts +1 -1
  54. package/es/theme/src/index.d.ts +2059 -2057
  55. package/index.d.ts +3 -1
  56. package/index.js +24 -2
  57. package/manualContentPath.js +124 -0
  58. package/package.json +8 -3
  59. package/vite.config.ts +19 -4
  60. package/es/components/curd/index.less +0 -2
  61. package/es/components/form/src/index.d.ts +0 -2922
  62. package/es/components/table/src/components/TableHeader.d.ts +0 -1136
  63. package/es/components/table/src/components/tableSetting/Download.d.ts +0 -922
  64. package/es/components/table/src/components/tableSetting/index.d.ts +0 -1030
@@ -1,2967 +1,8 @@
1
- import { toRaw, unref, computed, getCurrentInstance, reactive, readonly, watchEffect, nextTick, defineComponent, useAttrs, openBlock, createBlock, mergeProps, isRef, withCtx, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString, toRefs, createVNode, isVNode, ref, watch, resolveDirective, normalizeProps, normalizeStyle, withDirectives, normalizeClass, createCommentVNode, createElementVNode, onMounted, withKeys, createSlots, renderSlot, guardReactiveProps, onUnmounted, inject, h, provide, onBeforeUnmount, resolveDynamicComponent } from "vue";
2
- import { RadioButton, RadioGroup, Button, FormItem as FormItem$1, Col as Col$1, Row, Form as Form$1, Tooltip as Tooltip$1, Spin } from "ant-design-vue/es";
3
- import "ant-design-vue/es/form/style";
4
- import "ant-design-vue/es/row/style";
5
- import { DtCache, CacheKey, deepMerge, Pages, useGo, useRedo, Language, useAppStore, isNumber, useI18n, isString, useSlots, isArray, isFunction, error, isBoolean, isNull, dispatchResize, isObject, isNullAndUnDef, isEmpty, useTimeoutFn, useApp, off, on, windowResizeFn, useMessage } from "@dt-frames/core";
6
- import { cloneDeep, merge, isEqual, upperFirst, uniqBy, set, omit } from "lodash-es";
7
- import { Input, Select, TreeSelect, Radio, Checkbox, AutoComplete, Cascader, DatePicker, InputNumber, Switch, TimePicker, Slider, Rate, Divider, Col, Tooltip, Form, FormItem, Modal } from "ant-design-vue";
8
- import { defineStore } from "pinia";
9
- import "ant-design-vue/es/radio/style";
10
- import "ant-design-vue/es/cascader/style";
11
- import "ant-design-vue/es/input-number/style";
12
- import "ant-design-vue/es/switch/style";
13
- import "ant-design-vue/es/tree-select/style";
14
- import "ant-design-vue/es/slider/style";
15
- import "ant-design-vue/es/rate/style";
16
- import "ant-design-vue/es/date-picker/style";
17
- import "ant-design-vue/es/col/style";
18
- import "ant-design-vue/es/button/style";
19
- import dayjs from "dayjs";
20
- import "ant-design-vue/es/spin/style";
21
- import "ant-design-vue/es/modal/style";
22
- import "ant-design-vue/es/tooltip/style";
23
- var Theme = /* @__PURE__ */ ((Theme2) => {
24
- Theme2["DARK"] = "dark";
25
- Theme2["LIGHT"] = "light";
26
- return Theme2;
27
- })(Theme || {});
28
- var MenuType = /* @__PURE__ */ ((MenuType2) => {
29
- MenuType2["SIDE"] = "sidebar";
30
- MenuType2["TOP_MENU"] = "top-menu";
31
- MenuType2["MIX"] = "mix";
32
- MenuType2["MIX_SIDEBAR"] = "mix-sidebar";
33
- return MenuType2;
34
- })(MenuType || {});
35
- var MenuMode = /* @__PURE__ */ ((MenuMode2) => {
36
- MenuMode2["INLINE"] = "inline";
37
- MenuMode2["HORIZONTAL"] = "horizontal";
38
- MenuMode2["VERTICAL"] = "vertical";
39
- return MenuMode2;
40
- })(MenuMode || {});
41
- var ContentMode = /* @__PURE__ */ ((ContentMode2) => {
42
- ContentMode2["FULL"] = "full";
43
- ContentMode2["FIXED"] = "fixed";
44
- return ContentMode2;
45
- })(ContentMode || {});
46
- var UiSize = /* @__PURE__ */ ((UiSize2) => {
47
- UiSize2["LARGE"] = "large";
48
- UiSize2["MIDDLE"] = "middle";
49
- UiSize2["SMALL"] = "small";
50
- return UiSize2;
51
- })(UiSize || {});
52
- const defaultThemeConf = {
53
- content: {
54
- contentMode: ContentMode.FULL
55
- },
56
- headOptions: {
57
- fixed: true,
58
- theme: Theme.LIGHT,
59
- showLogo: true,
60
- showBackToTop: true,
61
- useLockPage: true,
62
- size: UiSize.SMALL,
63
- showSize: true,
64
- showBreadCrumb: true,
65
- showFullScreen: true,
66
- showSearch: true,
67
- showNotice: true,
68
- showLocaleSwitch: true,
69
- showSettingTheme: true,
70
- showLoginOut: true
71
- },
72
- menuOptions: {
73
- fixed: true,
74
- theme: Theme.DARK,
75
- collapsed: false,
76
- collapsedShowTitle: false,
77
- canDrag: true,
78
- show: true,
79
- hidden: false,
80
- split: false,
81
- menuWidth: 240,
82
- trigger: true,
83
- type: MenuType.SIDE,
84
- mode: MenuMode.INLINE,
85
- mixSideTrigger: "hover"
86
- },
87
- footerOptions: {
88
- show: false,
89
- height: 48,
90
- title: "Copyright(C) 2021 by www.ithinkdt.com. All rights reserved.",
91
- subTitle: "Privacy Statement"
92
- },
93
- routeReuse: {
94
- show: true,
95
- cache: false,
96
- canDrag: true,
97
- showQuick: true,
98
- showRedo: true,
99
- showFold: true
100
- }
101
- };
102
- const useThemeStore = defineStore({
103
- id: "dt-theme",
104
- state: () => ({
105
- themeConf: DtCache.getLocal(CacheKey.THEME) ?? cloneDeep(defaultThemeConf),
106
- pageLoading: false,
107
- mixSiderHasSubMenu: false
108
- }),
109
- getters: {
110
- getThemeConf() {
111
- return this.themeConf;
112
- },
113
- getHeaderConf() {
114
- return this.themeConf.headOptions;
115
- },
116
- getMenuConf() {
117
- return this.themeConf.menuOptions;
118
- },
119
- getFooterConf() {
120
- return this.themeConf.footerOptions;
121
- },
122
- getRouteReuseConf() {
123
- return this.themeConf.routeReuse;
124
- },
125
- getPageLoading() {
126
- return this.pageLoading;
127
- },
128
- getMixSiderIsHasMenu() {
129
- return this.mixSiderHasSubMenu;
130
- }
131
- },
132
- actions: {
133
- setThemeConf(options = {}) {
134
- let newThemeConf = deepMerge(this.themeConf, options);
135
- this.themeConf = deepMerge(defaultThemeConf, newThemeConf);
136
- DtCache.setLocal(CacheKey.THEME, this.themeConf);
137
- },
138
- setMixSiderIsHasMenu(val) {
139
- this.mixSiderHasSubMenu = val;
140
- },
141
- resetState() {
142
- DtCache.removeLocal(CacheKey.THEME);
143
- this.themeConf = cloneDeep(defaultThemeConf);
144
- }
145
- }
146
- });
147
- function handleGotoPage(router) {
148
- const go = useGo(router);
149
- go(unref(router.currentRoute).path, true);
150
- }
151
- defineStore({
152
- id: "route-reuse",
153
- state: () => ({
154
- cacheTabList: /* @__PURE__ */ new Set(),
155
- tabList: DtCache.getLocal(CacheKey.ROUTE_REUSE) || [],
156
- lastDragEndIndex: 0
157
- }),
158
- getters: {
159
- getTabList() {
160
- return this.tabList;
161
- },
162
- getCachedTabList() {
163
- return Array.from(this.cacheTabList);
164
- },
165
- getLastDragEndIndex() {
166
- return this.lastDragEndIndex;
167
- }
168
- },
169
- actions: {
170
- async addTab(route) {
171
- const { path, name, fullPath, params, query, meta } = route;
172
- if (path === Pages.NOT_FOUND || path === Pages.LOGIN || path === Pages.BASE_PAGE) {
173
- return;
174
- }
175
- let updateIndex = -1;
176
- const tabHasExits = this.tabList.some((tab, index) => {
177
- updateIndex = index;
178
- return (tab.fullPath || tab.path) === (fullPath || path);
179
- });
180
- if (tabHasExits) {
181
- const curTab = toRaw(this.tabList)[updateIndex];
182
- curTab.params = params || curTab.params;
183
- curTab.query = query || curTab.query;
184
- curTab.fullPath = fullPath || curTab.fullPath;
185
- this.tabList.splice(updateIndex, 1, curTab);
186
- } else {
187
- this.tabList.push(JSON.parse(JSON.stringify(route)));
188
- }
189
- this.updateCacheTab();
190
- },
191
- closeTab(route, router) {
192
- const go = useGo(router);
193
- const index = this.tabList.findIndex((item) => item.path === route.path);
194
- let page;
195
- if (index === 0) {
196
- if (this.tabList.length !== 1) {
197
- page = this.tabList[index + 1];
198
- }
199
- } else {
200
- page = this.tabList[index - 1];
201
- }
202
- this.bulkCloseTabs([route.path]);
203
- this.updateCacheTab();
204
- route.path === router.currentRoute.value.path && go(page.path);
205
- },
206
- closeAllTab(currentRoute, router) {
207
- const go = useGo(router);
208
- let filterTabList = this.tabList.filter((item) => item?.meta?.affix ?? false);
209
- const route = filterTabList.length > 0 ? filterTabList[filterTabList.length - 1] : unref(currentRoute);
210
- this.tabList = [route];
211
- this.updateCacheTab();
212
- go(route.path);
213
- },
214
- closeLeftTabs(route, router) {
215
- const index = this.tabList.findIndex((item) => item.path === route.path);
216
- if (index > 0) {
217
- const leftTabs = this.tabList.slice(0, index);
218
- const pathList = [];
219
- for (const item of leftTabs) {
220
- const affix = item?.meta?.affix ?? false;
221
- if (!affix) {
222
- pathList.push(item.fullPath);
223
- }
224
- }
225
- this.bulkCloseTabs(pathList);
226
- }
227
- this.updateCacheTab();
228
- handleGotoPage(router);
229
- },
230
- closeRightTabs(route, router) {
231
- const index = this.tabList.findIndex((item) => item.path === route.path);
232
- if (index >= 0 && index < this.tabList.length - 1) {
233
- const rightTabs = this.tabList.slice(index + 1, this.tabList.length);
234
- const pathList = [];
235
- for (const item of rightTabs) {
236
- const affix = item?.meta?.affix ?? false;
237
- if (!affix) {
238
- pathList.push(item.fullPath);
239
- }
240
- }
241
- this.bulkCloseTabs(pathList);
242
- }
243
- this.updateCacheTab();
244
- handleGotoPage(router);
245
- },
246
- closeOtherTabs(route, router) {
247
- const pathList = [];
248
- for (let item of this.tabList) {
249
- const affix = item?.meta?.affix ?? false;
250
- if (item.path !== route.path && !affix) {
251
- pathList.push(item.path);
252
- }
253
- }
254
- this.bulkCloseTabs(pathList);
255
- this.updateCacheTab();
256
- handleGotoPage(router);
257
- },
258
- closeTabByKey(path, router) {
259
- const go = useGo(router);
260
- const index = this.tabList.findIndex((item) => item.path === path);
261
- let page;
262
- if (index === 0) {
263
- if (this.tabList.length !== 1) {
264
- page = this.tabList[index + 1];
265
- }
266
- } else {
267
- page = this.tabList[index - 1];
268
- }
269
- this.bulkCloseTabs([path]);
270
- this.updateCacheTab();
271
- path === router.currentRoute.value.path && go(page.path);
272
- },
273
- bulkCloseTabs(pathList) {
274
- this.tabList = this.tabList.filter((item) => !pathList.includes(item.fullPath));
275
- },
276
- updateCacheTab() {
277
- DtCache.setLocal(CacheKey.ROUTE_REUSE, this.tabList);
278
- const cacheMap = /* @__PURE__ */ new Set();
279
- for (const tab of this.tabList) {
280
- if (tab.meta?.hideTab) {
281
- continue;
282
- }
283
- const name = tab.name;
284
- cacheMap.add(name);
285
- }
286
- this.cacheTabList = cacheMap;
287
- },
288
- async refreshPage(router) {
289
- const findTab = this.getCachedTabList.find((item) => item === unref(router.currentRoute).name);
290
- if (findTab) {
291
- this.cacheTabList.delete(findTab.toString());
292
- }
293
- const redo = useRedo(router);
294
- await redo();
295
- },
296
- sortTabs(oldIndex, newIndex) {
297
- const currentTab = this.tabList[oldIndex];
298
- this.tabList.splice(oldIndex, 1);
299
- this.tabList.splice(newIndex, 0, currentTab);
300
- this.lastDragEndIndex = this.lastDragEndIndex + 1;
301
- },
302
- resetState() {
303
- this.tabList = [];
304
- this.updateCacheTab();
305
- }
306
- }
307
- });
308
- function useMenu() {
309
- const { setThemeConf } = useThemeStore();
310
- const getCollapsedShowTitle = computed(() => useThemeStore().getMenuConf.collapsedShowTitle);
311
- const getIsSidebarType = computed(() => useThemeStore().getMenuConf.type === MenuType.SIDE);
312
- const getMenuFixed = computed(() => useThemeStore().getMenuConf.fixed);
313
- const getShowMenu = computed(() => useThemeStore().getMenuConf.show);
314
- const getShowSidebar = computed(() => {
315
- return unref(getSplit) || unref(getShowMenu) && unref(getMenuMode) !== MenuMode.HORIZONTAL;
316
- });
317
- const getMenuHidden = computed(() => useThemeStore().getMenuConf.hidden);
318
- const getMenuTheme = computed(() => useThemeStore().getMenuConf.theme);
319
- const getTrigger = computed(() => useThemeStore().getMenuConf.trigger);
320
- const getCanDrag = computed(() => useThemeStore().getMenuConf.canDrag);
321
- const getIsMixMode = computed(() => {
322
- return unref(getMenuMode) === MenuMode.INLINE && unref(getMenuType) === MenuType.MIX;
323
- });
324
- const getIsMixSidebar = computed(() => unref(getMenuType) === MenuType.MIX_SIDEBAR);
325
- const getMenuWidth = computed(() => {
326
- if (unref(getIsMixMode)) {
327
- return Number(useThemeStore().getMenuConf.menuWidth) - 40;
328
- } else if (unref(getIsMixSidebar)) {
329
- return Number(useThemeStore().getMenuConf.menuWidth) - 10;
330
- } else {
331
- return Number(useThemeStore().getMenuConf.menuWidth);
332
- }
333
- });
334
- const getMixSideTrigger = computed(() => useThemeStore().getMenuConf.mixSideTrigger);
335
- const getLogoWidth = computed(() => unref(getIsMixSidebar) ? "80px" : useThemeStore().getMenuConf.menuWidth);
336
- const getMenuType = computed(() => useThemeStore().getMenuConf.type);
337
- const getIsTopMenu = computed(() => unref(getMenuType) === MenuType.TOP_MENU);
338
- const getMenuMode = computed(() => useThemeStore().getMenuConf.mode);
339
- const getSplit = computed(() => useThemeStore().getMenuConf.split);
340
- const getCollapsed = computed(() => useThemeStore().getMenuConf.collapsed);
341
- const getIsHorizontal = computed(() => unref(getMenuMode) === MenuMode.HORIZONTAL);
342
- const setThemeStore = (conf = {}) => setThemeConf(conf);
343
- const toggleCollapsed = () => setThemeStore({
344
- menuOptions: {
345
- collapsed: !unref(getCollapsed)
346
- }
347
- });
348
- const getMiniWidthNumber = computed(() => useThemeStore().getMenuConf.collapsedShowTitle ? 80 : 48);
349
- const getRealWidth = computed(() => {
350
- return unref(getCollapsed) ? unref(getMiniWidthNumber) : unref(getMenuWidth);
351
- });
352
- const getCalcContentWidth = computed(() => {
353
- const width = unref(getIsTopMenu) || !unref(getShowMenu) || unref(getSplit) && unref(getMenuHidden) ? 0 : unref(getRealWidth);
354
- return `calc(100% - ${unref(width)}px)`;
355
- });
356
- return {
357
- getCollapsedShowTitle,
358
- getIsSidebarType,
359
- getMenuFixed,
360
- getShowMenu,
361
- getShowSidebar,
362
- getMenuHidden,
363
- getMenuTheme,
364
- getTrigger,
365
- getMenuWidth,
366
- getLogoWidth,
367
- getMenuType,
368
- getIsTopMenu,
369
- getMenuMode,
370
- getSplit,
371
- getCollapsed,
372
- getIsHorizontal,
373
- getMiniWidthNumber,
374
- getRealWidth,
375
- getCalcContentWidth,
376
- getIsMixMode,
377
- getIsMixSidebar,
378
- getCanDrag,
379
- getMixSideTrigger,
380
- toggleCollapsed,
381
- setThemeStore
382
- };
383
- }
384
- function useMultipleTab() {
385
- const { getRouteReuseConf } = useThemeStore();
386
- const getShowMultipleTab = computed(() => getRouteReuseConf.show);
387
- const getShowQuick = computed(() => getRouteReuseConf.showQuick);
388
- const getMultipleTabPosIsTop = computed(() => getRouteReuseConf.position === "top");
389
- const getShowRedo = computed(() => getRouteReuseConf.showRedo);
390
- const getCanCache = computed(() => getRouteReuseConf.cache);
391
- const getCanDrag = computed(() => getRouteReuseConf.canDrag);
392
- return {
393
- getShowMultipleTab,
394
- getShowQuick,
395
- getMultipleTabPosIsTop,
396
- getShowRedo,
397
- getCanCache,
398
- getCanDrag
399
- };
400
- }
401
- function useHeader() {
402
- const HEADER_HEIGHT = 48;
403
- const TABS_HEIGHT = 33;
404
- const { getHeaderConf = {} } = useThemeStore();
405
- const {
406
- getIsSidebarType,
407
- getMenuType,
408
- getShowMenu,
409
- getMenuHidden,
410
- getTrigger,
411
- getMenuMode,
412
- getSplit,
413
- getIsTopMenu,
414
- getIsMixSidebar
415
- } = useMenu();
416
- const { getShowMultipleTab, getMultipleTabPosIsTop } = useMultipleTab();
417
- const getHeaderTheme = computed(() => getHeaderConf.theme);
418
- const getFixed = computed(() => getHeaderConf.fixed);
419
- const getShowHeaderLogo = computed(() => unref(getShowLogo) && !unref(getIsSidebarType) && !unref(getIsMixSidebar));
420
- const getShowSearch = computed(() => getHeaderConf.showSearch);
421
- const getShowHeaderTrigger = computed(() => {
422
- if (unref(getMenuType) === MenuType.TOP_MENU || !unref(getShowMenu) || unref(getMenuHidden)) {
423
- return false;
424
- }
425
- return unref(getTrigger);
426
- });
427
- const getShowBreadCrumb = computed(() => getHeaderConf.showBreadCrumb);
428
- const getShowBread = computed(
429
- () => unref(getMenuMode) !== MenuMode.HORIZONTAL && !unref(getSplit) && unref(getShowBreadCrumb)
430
- );
431
- const getShowTopMenu = computed(() => unref(getMenuMode) === MenuMode.HORIZONTAL || unref(getSplit));
432
- const getShowNotice = computed(() => getHeaderConf.showNotice);
433
- const getShowFullScreen = computed(() => getHeaderConf.showFullScreen);
434
- const getShowLocale = computed(() => getHeaderConf.showLocaleSwitch);
435
- const getShowSettingTheme = computed(() => getHeaderConf.showSettingTheme);
436
- const getShowFullHeaderRef = computed(() => {
437
- return !unref(getIsSidebarType) && !unref(getIsMixSidebar) && !unref(getIsTopMenu);
438
- });
439
- const getHeaderHeight = computed(() => {
440
- let height = 0;
441
- height += HEADER_HEIGHT;
442
- if (unref(getShowMultipleTab) && !unref(getSplit) && !unref(getMultipleTabPosIsTop)) {
443
- height += TABS_HEIGHT;
444
- }
445
- return height;
446
- });
447
- const getTabsHeight = computed(() => TABS_HEIGHT);
448
- const getShowInsetHeaderRef = computed(() => {
449
- return unref(getIsSidebarType) || unref(getIsTopMenu) || unref(getIsMixSidebar);
450
- });
451
- const getShowBackToTop = computed(() => getHeaderConf.showBackToTop);
452
- const getIsZH = computed(() => {
453
- let local = DtCache.getLocal(CacheKey.LOCALE);
454
- if (!local)
455
- return true;
456
- return local === Language.ZH;
457
- });
458
- const getUiSize = computed(() => getHeaderConf?.size ?? UiSize.SMALL);
459
- const getShowUiSize = computed(() => getHeaderConf?.showSize);
460
- const getShowLogo = computed(() => getHeaderConf.showLogo);
461
- const getShowLoginOut = computed(() => getHeaderConf.showLoginOut);
462
- const loginOutClick = getHeaderConf.logoutClick;
463
- return {
464
- getHeaderTheme,
465
- getFixed,
466
- getShowSearch,
467
- getShowHeaderLogo,
468
- getShowHeaderTrigger,
469
- getShowBread,
470
- getShowTopMenu,
471
- getShowFullScreen,
472
- getShowLocale,
473
- getShowSettingTheme,
474
- getShowNotice,
475
- getShowFullHeaderRef,
476
- getHeaderHeight,
477
- getTabsHeight,
478
- getShowInsetHeaderRef,
479
- getShowBackToTop,
480
- getIsZH,
481
- getUiSize,
482
- getShowLogo,
483
- getShowLoginOut,
484
- getShowUiSize,
485
- loginOutClick
486
- };
487
- }
488
- function useLabelWidth(schemaItemRef, propsRef) {
489
- const { getIsZH } = useHeader();
490
- const { appConf } = useAppStore();
491
- return computed(() => {
492
- const { labelWidth, enLabelWidth, labelCol = {}, wrapperCol = {} } = unref(schemaItemRef);
493
- const {
494
- labelWidth: gLabelWidth,
495
- enLabelWidth: gEnLabelWidth,
496
- labelCol: glabelCol = {},
497
- wrapperCol: gwrapperCol = {},
498
- layout = appConf.ui.form.layout
499
- } = unref(propsRef);
500
- let width = (unref(getIsZH) ? labelWidth ?? gLabelWidth : enLabelWidth ?? gEnLabelWidth) ?? labelWidth ?? gLabelWidth ?? 0;
501
- const labelcol = merge({}, glabelCol, labelCol);
502
- const wrapcol = merge({}, gwrapperCol, wrapperCol);
503
- width = isNumber(width) ? `${width}px` : width;
504
- return {
505
- labelCol: merge(
506
- {},
507
- { style: { width } },
508
- labelcol
509
- ),
510
- wrapperCol: merge(
511
- {},
512
- { style: { width: layout === "vertical" ? "100%" : `calc(100% - ${width})` } },
513
- wrapcol
514
- )
515
- };
516
- });
517
- }
518
- const SINGLE_DATA_TYPE = ["DatePicker", "MonthPicker", "WeekPicker", "TimePicker"];
519
- const MULTIFY_DATA_TYPE = ["RangePicker"];
520
- const DATE_PICKER_TYPES = [...SINGLE_DATA_TYPE, ...MULTIFY_DATA_TYPE];
521
- function createPlaceholder(component) {
522
- const { t } = useI18n("UI");
523
- if (component.includes("Input") || component.includes("Complete")) {
524
- return t("PLEASE_INPUT");
525
- }
526
- if (component.includes("Picker") || component.includes("Select") || component.includes("Cascader") || component.includes("Checkbox") || component.includes("Radio") || component.includes("Switch")) {
527
- return t("PLEASE_SELECT");
528
- }
529
- if (component.includes("Icon")) {
530
- return t("PLEASE_SET_ICON");
531
- }
532
- return "";
533
- }
534
- function setComponentRuleType(rule, component, valueFormat) {
535
- if (SINGLE_DATA_TYPE.includes(component)) {
536
- rule.type = valueFormat ? "string" : "object";
537
- } else if (["RangePicker", "Upload", "CheckboxGroup", "TimePicker"].includes(component)) {
538
- rule.type = "array";
539
- } else if (["InputNumber"].includes(component)) {
540
- rule.type = "number";
541
- }
542
- }
543
- function handleInputNumberValue(component, val) {
544
- if (!component)
545
- return val;
546
- if ([
547
- "Input",
548
- "InputPassword",
549
- "InputSearch",
550
- "InputTextArea"
551
- ].includes(component)) {
552
- return val && isNumber(val) ? `${val}` : val;
553
- }
554
- return val;
555
- }
556
- function useFormValue(props, key = "value", changeEvent = "change", emitData) {
557
- const instance = getCurrentInstance();
558
- const emit = instance?.emit;
559
- const innerState = reactive({
560
- value: props[key]
561
- });
562
- const defaultState = readonly(innerState);
563
- const setState = (val) => {
564
- innerState.value = val;
565
- nextTick(() => {
566
- emit?.(changeEvent, val, ...toRaw(unref(emitData)) || []);
567
- });
568
- };
569
- watchEffect(() => {
570
- innerState.value = props[key];
571
- });
572
- const state = computed({
573
- get() {
574
- return innerState.value;
575
- },
576
- set(value) {
577
- if (isEqual(value, defaultState.value))
578
- return;
579
- innerState.value = value;
580
- nextTick(() => {
581
- emit?.(changeEvent, value, ...toRaw(unref(emitData)) || []);
582
- });
583
- }
584
- });
585
- return [state, setState, defaultState];
586
- }
587
- const _sfc_main$c = /* @__PURE__ */ defineComponent({
588
- __name: "radioButton",
589
- props: {
590
- value: {
591
- type: [String, Number, Boolean]
592
- },
593
- options: {
594
- type: Array,
595
- default: () => []
596
- }
597
- },
598
- setup(__props) {
599
- const props = __props;
600
- const attrs = useAttrs();
601
- const [state] = useFormValue(props);
602
- const getOptions = computed(() => {
603
- const { options } = props;
604
- if (!options || options?.length === 0)
605
- return [];
606
- const isStringArr = options.some((item) => isString(item));
607
- if (!isStringArr)
608
- return options;
609
- return options.map((item) => ({ label: item, value: item }));
610
- });
611
- return (_ctx, _cache) => {
612
- const _component_ARadioButton = RadioButton;
613
- const _component_ARadioGroup = RadioGroup;
614
- return openBlock(), createBlock(_component_ARadioGroup, mergeProps(unref(attrs), {
615
- value: unref(state),
616
- "onUpdate:value": _cache[0] || (_cache[0] = ($event) => isRef(state) ? state.value = $event : null),
617
- "button-style": "solid"
618
- }), {
619
- default: withCtx(() => [
620
- (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getOptions), (item) => {
621
- return openBlock(), createBlock(_component_ARadioButton, {
622
- key: `${item.value}`,
623
- value: item.value,
624
- disabled: item.disabled
625
- }, {
626
- default: withCtx(() => [
627
- createTextVNode(toDisplayString(item.label), 1)
628
- ]),
629
- _: 2
630
- }, 1032, ["value", "disabled"]);
631
- }), 128))
632
- ]),
633
- _: 1
634
- }, 16, ["value"]);
635
- };
636
- }
637
- });
638
- const components = {
639
- Input,
640
- InputTextArea: Input.TextArea,
641
- InputSearch: Input.Search,
642
- InputGroup: Input.Group,
643
- InputPassword: Input.Password,
644
- Select,
645
- TreeSelect,
646
- Radio,
647
- RadioGroup: Radio.Group,
648
- RadioButtonGroup: _sfc_main$c,
649
- Checkbox,
650
- CheckboxGroup: Checkbox.Group,
651
- AutoComplete,
652
- Cascader,
653
- DatePicker,
654
- MonthPicker: DatePicker.MonthPicker,
655
- WeekPicker: DatePicker.WeekPicker,
656
- RangePicker: DatePicker.RangePicker,
657
- InputNumber,
658
- Switch,
659
- TimePicker,
660
- Slider,
661
- Rate,
662
- Divider
663
- };
664
- const componentMap = /* @__PURE__ */ new Map();
665
- for (let item in components) {
666
- componentMap.set(item, components[item]);
667
- }
668
- function _isSlot$1(s) {
669
- return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
670
- }
671
- const _sfc_main$b = {
672
- name: "FormItem",
673
- inheritAttrs: false,
674
- props: {
675
- schema: {
676
- type: Object,
677
- default: () => ({})
678
- },
679
- formProps: {
680
- type: Object,
681
- default: () => ({})
682
- },
683
- defaultValues: {
684
- type: Object,
685
- default: () => ({})
686
- },
687
- formModel: {
688
- type: Object,
689
- default: () => ({})
690
- },
691
- setFormModel: {
692
- type: Function
693
- },
694
- formActionType: {
695
- type: Object
696
- }
697
- },
698
- setup(props, {
699
- emit,
700
- slots
701
- }) {
702
- const {
703
- getSlot
704
- } = useSlots();
705
- const {
706
- t
707
- } = useI18n("UI");
708
- const {
709
- getUiSize
710
- } = useHeader();
711
- const {
712
- appConf
713
- } = useAppStore();
714
- const {
715
- schema,
716
- formProps
717
- } = toRefs(props);
718
- const getValues = computed(() => {
719
- const {
720
- defaultValues,
721
- formModel,
722
- schema: schema2
723
- } = props;
724
- let name = schema2.name;
725
- return {
726
- name: isArray(name) ? name.join("-") : name,
727
- model: formModel,
728
- schema: schema2,
729
- values: {
730
- ...defaultValues,
731
- ...formModel
732
- }
733
- };
734
- });
735
- const getShow = computed(() => {
736
- const {
737
- show = true,
738
- isAdvanced = true
739
- } = props.schema;
740
- if (!isAdvanced) {
741
- return false;
742
- }
743
- if (isFunction(show)) {
744
- return show(unref(getValues).model);
745
- }
746
- return show;
747
- });
748
- const getComponentProps = computed(() => {
749
- const {
750
- schema: schema2
751
- } = props;
752
- let {
753
- props: cProps = {}
754
- } = schema2;
755
- if (isFunction(cProps)) {
756
- cProps = cProps(unref(getValues).model) ?? {};
757
- }
758
- if (schema2.component === "Divider") {
759
- cProps = Object.assign({
760
- type: "horizontal"
761
- }, cProps, {
762
- orientation: "left"
763
- });
764
- }
765
- return cProps;
766
- });
767
- function renderItem() {
768
- const {
769
- component,
770
- slot,
771
- render,
772
- name,
773
- colon = appConf.ui.form.colon,
774
- suffix,
775
- prefix
776
- } = props.schema;
777
- const {
778
- labelCol,
779
- wrapperCol
780
- } = unref(useLabelWidth(schema, formProps));
781
- const getContent = () => {
782
- const value = unref(getValues);
783
- let _con = slot ? getSlot(slots, slot, value.model) : render ? render(value.model) : renderFormItem();
784
- return component === "InputGroup" ? createVNode(FormItem, {
785
- "class": "m-0"
786
- }, _isSlot$1(_con) ? _con : {
787
- default: () => [_con]
788
- }) : _con;
789
- };
790
- const getSuffix = () => {
791
- return isFunction(suffix) ? suffix(unref(getValues).model) : suffix;
792
- };
793
- const getPrefix = () => {
794
- return isFunction(prefix) ? prefix(unref(getValues).model) : prefix;
795
- };
796
- return createVNode(Form.Item, {
797
- "name": isArray(name) ? name.join("-") : name,
798
- "colon": colon,
799
- "class": [unref(getUiSize), {
800
- "suffix-item": !!suffix
801
- }],
802
- "label": renderLabel(),
803
- "rules": handleRules(),
804
- "labelCol": labelCol,
805
- "wrapperCol": wrapperCol
806
- }, {
807
- default: () => [createVNode("div", {
808
- "style": "display:flex"
809
- }, [!!prefix && createVNode("span", {
810
- "class": "prefix px-2"
811
- }, [getPrefix()]), createVNode("div", {
812
- "style": "flex:1; width: 100%;"
813
- }, [getContent()]), !!suffix && createVNode("span", {
814
- "class": "suffix px-2"
815
- }, [getSuffix()])])]
816
- });
817
- }
818
- function renderLabel() {
819
- const {
820
- label,
821
- toolTip,
822
- subLabel,
823
- toolTipProps = {}
824
- } = props.schema;
825
- const renderLabel2 = subLabel ? createVNode("span", null, [createTextVNode(" "), label, createTextVNode(" "), createVNode("span", {
826
- "class": "text-secondary opacity-50"
827
- }, [createTextVNode("("), subLabel, createTextVNode(")")])]) : label;
828
- const _toolTip = isFunction(toolTip) ? toolTip(unref(getValues).model) : toolTip;
829
- const _toolTipProps = {
830
- title: renderLabel2,
831
- autoAdjustOverflow: true,
832
- placement: "top",
833
- ...toolTipProps
834
- };
835
- return _toolTip ? createVNode("span", null, [createVNode(Tooltip, _toolTipProps, _isSlot$1(renderLabel2) ? renderLabel2 : {
836
- default: () => [renderLabel2]
837
- })]) : renderLabel2;
838
- }
839
- function renderFormItem() {
840
- const {
841
- schema: schema2,
842
- formModel,
843
- formActionType
844
- } = props;
845
- const {
846
- component,
847
- name,
848
- changeEvent = "change",
849
- valueField,
850
- renderComponent,
851
- props: sProps
852
- } = props.schema;
853
- const isCheck = component && ["Switch", "Checkbox"].includes(component);
854
- const eventKey = `on${upperFirst(changeEvent)}`;
855
- const _sProps = isFunction(sProps) ? sProps(formModel) : sProps;
856
- const on2 = {
857
- [eventKey]: (...args) => {
858
- const [e] = args;
859
- const target = e ? e.target : null;
860
- const value = target ? isCheck ? target.checked : target.value : e;
861
- if (isString(name)) {
862
- props.setFormModel(name, value);
863
- } else if (isArray(name)) {
864
- name.map((key) => props.setFormModel(key, value));
865
- }
866
- if (_sProps && _sProps[eventKey])
867
- _sProps[eventKey](...args, formModel);
868
- }
869
- };
870
- for (let it in _sProps) {
871
- if (it.startsWith("on") && it !== eventKey) {
872
- on2[it] = (...args) => {
873
- _sProps[it](...args, formModel);
874
- };
875
- }
876
- }
877
- const getDisable = computed(() => {
878
- const {
879
- disabled: gDisabled
880
- } = props.formProps;
881
- const {
882
- disabled
883
- } = props.schema;
884
- const {
885
- disabled: itemDisabled = false
886
- } = unref(getComponentProps);
887
- let _disabled = !!gDisabled || itemDisabled;
888
- if (isBoolean(disabled))
889
- _disabled = disabled;
890
- if (isFunction(disabled))
891
- _disabled = disabled(unref(getValues).model);
892
- return _disabled;
893
- });
894
- const getSize = () => {
895
- const {
896
- size = unref(getUiSize)
897
- } = props.formProps;
898
- if (component === "Switch" && size === UiSize.LARGE) {
899
- return "default";
900
- }
901
- return size === UiSize.MIDDLE ? "default" : size;
902
- };
903
- const itemProps = {
904
- allowClear: _sProps?.allowClear ?? appConf.ui.form.allowClear,
905
- size: getSize(),
906
- ...unref(getComponentProps),
907
- disabled: unref(getDisable)
908
- };
909
- if (component === "Select") {
910
- {
911
- itemProps.showSearch = true;
912
- itemProps.optionFilterProp = "label";
913
- }
914
- }
915
- if (!itemProps.disabled && component !== "RangePicker") {
916
- itemProps.placeholder = unref(getComponentProps)?.placeholder || createPlaceholder(component);
917
- }
918
- if (["DatePicker", "MonthPicker", "RangePicker"].includes(component)) {
919
- itemProps.defaultValue = props.formModel[name];
920
- }
921
- itemProps.codeName = name;
922
- itemProps.formValues = unref(getValues);
923
- if (["Select", "DatePicker", "MonthPicker", "WeekPicker", "RangePicker"].includes(component)) {
924
- itemProps.dropdownClassName += ` ${unref(getUiSize)}`;
925
- }
926
- const bindValue = {
927
- [valueField || (isCheck ? "checked" : "value")]: props.formModel[name]
928
- };
929
- let compAttr = {
930
- ...itemProps,
931
- ...bindValue,
932
- ...on2
933
- };
934
- const Comp = componentMap.get(component);
935
- if (!renderComponent) {
936
- return createVNode(Comp, compAttr, null);
937
- }
938
- const compSlot = isFunction(renderComponent) ? {
939
- ...renderComponent(unref(getValues))
940
- } : {
941
- default: () => renderComponent
942
- };
943
- return createVNode(Comp, compAttr, _isSlot$1(compSlot) ? compSlot : {
944
- default: () => [compSlot]
945
- });
946
- }
947
- function handleRules() {
948
- const {
949
- rules: defaultRules = [],
950
- component,
951
- label,
952
- dynamicRules,
953
- required
954
- } = props.schema;
955
- if (!component)
956
- return [];
957
- if (isFunction(dynamicRules)) {
958
- return dynamicRules(unref(getValues).model);
959
- }
960
- const defaultMsg = createPlaceholder(component) + label;
961
- let rules = cloneDeep(defaultRules);
962
- const getRequired = isFunction(required) ? required(unref(getValues).model) : required;
963
- function validator(rule, value) {
964
- const msg = rule.message || defaultMsg;
965
- if (value === void 0 || isNull(value) || Array.isArray(value) && value.length === 0 || typeof value === "string" && value.trim() === "" || typeof value === "object" && Reflect.has(value, "checked") && Reflect.has(value, "halfChecked") && Array.isArray(value.checked) && Array.isArray(value.halfChecked) && value.checked.length === 0 && value.halfChecked.length === 0) {
966
- return Promise.reject(msg);
967
- }
968
- return Promise.resolve();
969
- }
970
- if (!rules || !rules.length) {
971
- let _required = isBoolean(getRequired) ? getRequired : unref(getRequired);
972
- rules = _required ? [{
973
- required: _required,
974
- validator
975
- }] : [];
976
- }
977
- const requiredIndex = rules.findIndex((rule) => Reflect.has(rule, "required") && !Reflect.has(rule, "validator"));
978
- if (requiredIndex !== -1) {
979
- const rule = rules[requiredIndex];
980
- if (!unref(getShow)) {
981
- rule.required = false;
982
- }
983
- if (!Reflect.has(rule, "type")) {
984
- rule.type = component === "InputNumber" ? "number" : "string";
985
- }
986
- rule.message = rule.message || defaultMsg;
987
- if (component.includes("Input") || component.includes("Textarea")) {
988
- rule.whitespace = true;
989
- }
990
- const valueFormat = unref(getComponentProps)?.valueFormat;
991
- setComponentRuleType(rule, component, valueFormat);
992
- }
993
- const maxIndex = rules.findIndex((val) => val.max);
994
- if (maxIndex !== -1 && !rules[maxIndex].validator) {
995
- rules[maxIndex].message = rules[maxIndex].message || `\u6700\u5927\u503C\u4E3A${rules[maxIndex].max}`;
996
- }
997
- return rules;
998
- }
999
- return () => {
1000
- let _slot2;
1001
- const {
1002
- colSlot,
1003
- renderCol,
1004
- colProps,
1005
- component,
1006
- render,
1007
- slot
1008
- } = props.schema;
1009
- const {
1010
- colProps: gColProps,
1011
- mode
1012
- } = props.formProps;
1013
- let _colProps = colProps || gColProps || (mode === "search" ? appConf.ui.form.searchColspan : appConf.ui.form.dialogColspan);
1014
- const values = unref(getValues);
1015
- if (!component) {
1016
- if (!render && !renderCol && !slot && !colSlot) {
1017
- error(t("NEED_RENDER"));
1018
- return;
1019
- }
1020
- }
1021
- if (component === "Divider") {
1022
- let _slot;
1023
- let cprops = unref(getComponentProps);
1024
- const span = cprops?.span ?? 24;
1025
- return createVNode(Col, {
1026
- "span": span
1027
- }, {
1028
- default: () => [createVNode(Divider, cprops, _isSlot$1(_slot = renderLabel()) ? _slot : {
1029
- default: () => [_slot]
1030
- })]
1031
- });
1032
- }
1033
- const getContent = () => {
1034
- return colSlot ? getSlot(slots, colSlot, values) : renderCol ? renderCol(values) : renderItem();
1035
- };
1036
- return unref(getShow) && createVNode(Col, _colProps, _isSlot$1(_slot2 = getContent()) ? _slot2 : {
1037
- default: () => [_slot2]
1038
- });
1039
- };
1040
- }
1041
- };
1042
- const _hoisted_1$1 = {
1043
- key: 0,
1044
- className: "preIcon pr-1"
1045
- };
1046
- const _hoisted_2 = {
1047
- key: 0,
1048
- className: "preIcon pl-1"
1049
- };
1050
- const _hoisted_3 = { class: "text" };
1051
- const _hoisted_4 = /* @__PURE__ */ createElementVNode("i", { class: "text-2xl i ic:baseline-arrow-drop-down" }, null, -1);
1052
- const _hoisted_5 = [
1053
- _hoisted_4
1054
- ];
1055
- const _sfc_main$a = /* @__PURE__ */ defineComponent({
1056
- __name: "FormButtons",
1057
- props: {
1058
- mode: {
1059
- type: String,
1060
- default: "search"
1061
- },
1062
- show: {
1063
- type: Boolean,
1064
- default: true
1065
- },
1066
- showAdvancedButton: {
1067
- type: Boolean,
1068
- default: true
1069
- },
1070
- minShowColumn: {
1071
- type: Number,
1072
- default: 2
1073
- },
1074
- buttonList: {
1075
- type: [Array],
1076
- default: []
1077
- },
1078
- isAdvanced: {
1079
- type: Boolean,
1080
- default: true
1081
- },
1082
- colspan: {
1083
- type: Object
1084
- }
1085
- },
1086
- emits: ["handle-method"],
1087
- setup(__props, { emit: emits }) {
1088
- const props = __props;
1089
- const { t } = useI18n();
1090
- const advancedRef = ref(props.isAdvanced);
1091
- let key = 0;
1092
- const showAdvanceRef = computed(() => {
1093
- return props.mode === "search" ? props.showAdvancedButton : false;
1094
- });
1095
- const colOpt = computed(() => {
1096
- let style = {
1097
- textAlign: "right"
1098
- };
1099
- if (props.mode === "dialog") {
1100
- Object.assign(style, {
1101
- display: "inline-block"
1102
- });
1103
- return { style };
1104
- } else if (props.mode === null) {
1105
- Object.assign(style, {
1106
- display: "flex",
1107
- justifyContent: "center",
1108
- marginBottom: "20px"
1109
- });
1110
- return {
1111
- style,
1112
- span: 24
1113
- };
1114
- }
1115
- return { style };
1116
- });
1117
- const getAdvanceClass = computed(() => {
1118
- return [
1119
- "basic-arrow",
1120
- { "basic-arrow--active": !advancedRef.value }
1121
- ];
1122
- });
1123
- const toggleAdvanced = () => {
1124
- advancedRef.value = !advancedRef.value;
1125
- dispatchResize();
1126
- emits("handle-method", advancedRef.value);
1127
- };
1128
- function handleBtnClick(button) {
1129
- if (button.onClick && isFunction(button.onClick)) {
1130
- button.onClick();
1131
- } else {
1132
- emits("handle-method", button);
1133
- }
1134
- }
1135
- watch(() => props.isAdvanced, (v) => {
1136
- if (v || props.mode !== "search") {
1137
- nextTick(() => toggleAdvanced());
1138
- }
1139
- }, {
1140
- immediate: true
1141
- });
1142
- watch(
1143
- () => props.buttonList,
1144
- (v) => key = new Date().getTime(),
1145
- {
1146
- immediate: true,
1147
- deep: true
1148
- }
1149
- );
1150
- return (_ctx, _cache) => {
1151
- const _component_AButton = Button;
1152
- const _component_AFormItem = FormItem$1;
1153
- const _component_ACol = Col$1;
1154
- const _directive_icon = resolveDirective("icon");
1155
- const _directive_auth = resolveDirective("auth");
1156
- return __props.show ? (openBlock(), createBlock(_component_ACol, normalizeProps(mergeProps({ key: 0 }, unref(colOpt))), {
1157
- default: withCtx(() => [
1158
- createVNode(_component_AFormItem, {
1159
- class: "dt-form-btns",
1160
- style: normalizeStyle({
1161
- "margin-bottom": __props.mode === "search" ? "16px" : "0px"
1162
- })
1163
- }, {
1164
- default: withCtx(() => [
1165
- (openBlock(true), createElementBlock(Fragment, null, renderList(__props.buttonList, (button) => {
1166
- return openBlock(), createElementBlock(Fragment, null, [
1167
- (button.show === void 0 ? true : button.show) ? withDirectives((openBlock(), createBlock(_component_AButton, {
1168
- class: normalizeClass(["items-center", button.class]),
1169
- type: button.type,
1170
- loading: button.loading,
1171
- disabled: button.disabled,
1172
- key: unref(key),
1173
- onClick: ($event) => handleBtnClick(button)
1174
- }, {
1175
- icon: withCtx(() => [
1176
- button.preIcon ? withDirectives((openBlock(), createElementBlock("span", _hoisted_1$1, null, 512)), [
1177
- [_directive_icon, button.preIcon]
1178
- ]) : createCommentVNode("", true)
1179
- ]),
1180
- default: withCtx(() => [
1181
- createTextVNode(" " + toDisplayString(unref(t)(button.label)) + " ", 1),
1182
- button.postIcon ? withDirectives((openBlock(), createElementBlock("span", _hoisted_2, null, 512)), [
1183
- [_directive_icon, button.postIcon]
1184
- ]) : createCommentVNode("", true)
1185
- ]),
1186
- _: 2
1187
- }, 1032, ["type", "class", "loading", "disabled", "onClick"])), [
1188
- [_directive_auth, button.auth]
1189
- ]) : createCommentVNode("", true)
1190
- ], 64);
1191
- }), 256)),
1192
- unref(showAdvanceRef) ? (openBlock(), createBlock(_component_AButton, {
1193
- key: 0,
1194
- type: "link",
1195
- class: "advanced",
1196
- onClick: toggleAdvanced
1197
- }, {
1198
- default: withCtx(() => [
1199
- createElementVNode("span", _hoisted_3, toDisplayString(advancedRef.value ? unref(t)("UI.ADVANCED") : unref(t)("UI.EXPAND")), 1),
1200
- createElementVNode("span", {
1201
- class: normalizeClass(unref(getAdvanceClass))
1202
- }, _hoisted_5, 2)
1203
- ]),
1204
- _: 1
1205
- })) : createCommentVNode("", true)
1206
- ]),
1207
- _: 1
1208
- }, 8, ["style"])
1209
- ]),
1210
- _: 1
1211
- }, 16)) : createCommentVNode("", true);
1212
- };
1213
- }
1214
- });
1215
- const SEARCH_BTN_NAME = "UI.SEARCH";
1216
- const RESET_BTN_NAME = "UI.RESET";
1217
- const SEARCH_BTNS = [
1218
- { label: SEARCH_BTN_NAME, preIcon: "mdi:magnify", type: "primary" },
1219
- { label: RESET_BTN_NAME, preIcon: "mdi:refresh", type: "default" }
1220
- ];
1221
- function useFormEvents({
1222
- emits,
1223
- getSchema,
1224
- formModel,
1225
- defaultValue,
1226
- formElRef,
1227
- schemaRef,
1228
- getProps,
1229
- handleFormValues
1230
- }) {
1231
- function getFormValues() {
1232
- const formEl = unref(formElRef);
1233
- if (!formEl)
1234
- return {};
1235
- return handleFormValues(toRaw(unref(formModel)));
1236
- }
1237
- function updateSchema(data) {
1238
- let updateItems = [];
1239
- updateItems = isObject(data) ? [data] : [...data];
1240
- if (updateItems?.length && !updateItems.every((it) => it.component !== "Divider" && it.name)) {
1241
- console.error("\u6240\u6709\u7684\u5143\u7D20\u90FD\u5FC5\u987B\u8BBE\u7F6Ename\u5C5E\u6027");
1242
- return;
1243
- }
1244
- const schema = [];
1245
- updateItems.forEach((it) => {
1246
- unref(getSchema).forEach((val) => {
1247
- if (val.name === it.name) {
1248
- const newSchema = deepMerge(val, it);
1249
- schema.push(newSchema);
1250
- } else {
1251
- schema.push(val);
1252
- }
1253
- });
1254
- });
1255
- let shcemas = uniqBy(schema, "name");
1256
- _setValue(shcemas);
1257
- schemaRef.value = shcemas;
1258
- }
1259
- function resetSchema(data) {
1260
- let updateItems = [];
1261
- updateItems = isObject(data) ? [data] : [...data];
1262
- _setValue(updateItems, true);
1263
- schemaRef.value = updateItems;
1264
- }
1265
- function _setValue(data, isReset = false) {
1266
- data = isArray(data) ? data : [data];
1267
- let obj = {};
1268
- data.map((it) => {
1269
- let name = isArray(it.name) ? it.name[0] : it.name;
1270
- obj[name] = null;
1271
- if (!isNullAndUnDef(it.defaultValue))
1272
- return obj[name] = it.defaultValue;
1273
- let props = isFunction(it.props) ? it.props(toRaw(unref(formModel))) : it.props;
1274
- if (!isNullAndUnDef(props?.defaultValue))
1275
- obj[name] = props.defaultValue;
1276
- });
1277
- if (isReset) {
1278
- let oldValues = getFormValues();
1279
- let oldObj = {};
1280
- Object.keys(oldValues).map((key) => oldObj[key] = null);
1281
- obj = {
1282
- ...oldObj,
1283
- ...obj
1284
- };
1285
- }
1286
- setFormValues(obj);
1287
- }
1288
- async function clearValidate(name) {
1289
- await unref(formElRef)?.clearValidate(name);
1290
- }
1291
- function resetForms() {
1292
- const { resetFunc } = unref(getProps);
1293
- resetFunc && isFunction(resetFunc) && resetFunc();
1294
- if (!unref(formElRef))
1295
- return;
1296
- Object.keys(formModel).forEach((key) => {
1297
- const schema = unref(getSchema).find((item) => item.name === key);
1298
- const isInput = schema?.component && ["Input", "InputPassword", "InputSearch", "InputTextArea"].includes(schema.component);
1299
- formModel[key] = isInput ? defaultValue.value[key] || "" : defaultValue.value[key];
1300
- });
1301
- nextTick(() => clearValidate());
1302
- emits("reset", toRaw(formModel));
1303
- }
1304
- function removeFormByName(names) {
1305
- if (!names)
1306
- return;
1307
- const schemaList = cloneDeep(unref(getSchema));
1308
- const nameList = isString(names) ? [names] : names;
1309
- for (const name of nameList) {
1310
- _removeSchemaByName(name, schemaList);
1311
- }
1312
- schemaRef.value = schemaList;
1313
- }
1314
- function _removeSchemaByName(name, schemaList) {
1315
- const index = schemaList.findIndex((schema) => schema.name === name);
1316
- if (index !== -1) {
1317
- delete formModel[name];
1318
- schemaList.splice(index, 1);
1319
- }
1320
- }
1321
- function appendFormItems(schema, prefixName, first = false) {
1322
- const schemaList = cloneDeep(unref(getSchema));
1323
- const index = schemaList.findIndex((schema2) => schema2.name === prefixName);
1324
- if (!prefixName || index === -1 || first) {
1325
- first ? schemaList.unshift(...schema) : schemaList.push(...schema);
1326
- schemaRef.value = schemaList;
1327
- return;
1328
- }
1329
- if (index !== -1) {
1330
- schemaList.splice(index + 1, 0, ...schema);
1331
- }
1332
- schemaRef.value = schemaList;
1333
- }
1334
- function itemIsDateType(key) {
1335
- return unref(getSchema).some((item) => {
1336
- return item.name === key ? ["DatePicker", "MonthPicker", "WeekPicker", "TimePicker", "RangePicker"].includes(item.component) : false;
1337
- });
1338
- }
1339
- async function validateFields(nameList) {
1340
- return unref(formElRef)?.validateFields(nameList);
1341
- }
1342
- function setFormValues(values) {
1343
- if (!values || !Object.keys(values).length) {
1344
- for (let it in formModel)
1345
- formModel[it] = Array.isArray(formModel[it]) ? [] : null;
1346
- return;
1347
- }
1348
- const names = unref(getSchema).map((item) => item.name).filter(Boolean);
1349
- const validKeys = [];
1350
- Object.keys(values).forEach((key) => {
1351
- const schema = unref(getSchema).find((item) => item.name === key);
1352
- let value = values[key];
1353
- const hasKey = Reflect.has(values, key);
1354
- value = handleInputNumberValue(schema?.component, value);
1355
- if (hasKey && names.includes(key)) {
1356
- if (itemIsDateType(key)) {
1357
- if (Array.isArray(value)) {
1358
- const arr = [];
1359
- for (const ele of value) {
1360
- arr.push(ele ? dayjs(ele) : null);
1361
- }
1362
- formModel[key] = arr;
1363
- } else {
1364
- const { props } = schema || {};
1365
- let _props = props;
1366
- if (typeof props === "function") {
1367
- _props = props({ formModel });
1368
- }
1369
- formModel[key] = value ? _props?.valueFormat ? value : dayjs(value) : null;
1370
- }
1371
- } else {
1372
- formModel[key] = value;
1373
- }
1374
- validKeys.push(key);
1375
- } else {
1376
- formModel[key] = value;
1377
- }
1378
- });
1379
- return validateFields(validKeys);
1380
- }
1381
- async function validate(nameList) {
1382
- return await unref(formElRef)?.validate(nameList);
1383
- }
1384
- return {
1385
- getFormValues,
1386
- updateSchema,
1387
- resetSchema,
1388
- clearValidate,
1389
- resetForms,
1390
- removeFormByName,
1391
- validateFields,
1392
- setFormValues,
1393
- validate,
1394
- appendFormItems
1395
- };
1396
- }
1397
- function useFormValues({
1398
- defaultValue,
1399
- getSchema,
1400
- formModel
1401
- }) {
1402
- const getComMap = () => {
1403
- let comMap = /* @__PURE__ */ new Map();
1404
- unref(getSchema).map((it) => {
1405
- if (it.component && it.name) {
1406
- comMap.set(it.name, it);
1407
- }
1408
- });
1409
- return comMap;
1410
- };
1411
- function handleFormValues(model) {
1412
- if (!isObject(model))
1413
- return {};
1414
- const vals = {};
1415
- let comMap = getComMap();
1416
- for (let [key, val] of Object.entries(model)) {
1417
- let component = comMap.get(key)?.component;
1418
- if (!key || Array.isArray(val) && val.length === 0 || isFunction(val)) {
1419
- continue;
1420
- }
1421
- if (component) {
1422
- if (SINGLE_DATA_TYPE.includes(component)) {
1423
- val = dayjs(val).valueOf();
1424
- } else if (MULTIFY_DATA_TYPE.includes(component)) {
1425
- val = (val || []).map((it) => dayjs(it).valueOf());
1426
- if (comMap.get(key).extraName?.length) {
1427
- comMap.get(key).extraName.map((it, i) => {
1428
- set(vals, it, val.length > 0 ? val[i] : null);
1429
- });
1430
- }
1431
- }
1432
- }
1433
- if (isString(val)) {
1434
- val = val.trim();
1435
- }
1436
- set(vals, key, val);
1437
- }
1438
- return vals;
1439
- }
1440
- function initDefault() {
1441
- const schema = unref(getSchema), obj = {};
1442
- schema.forEach((item) => {
1443
- const { props = {}, name, component, defaultValue: gDefaultValue } = item;
1444
- const { defaultValue: itemDefaultValue, mode, format, treeCheckable } = isFunction(props) ? props(formModel) : props;
1445
- if (!name)
1446
- return;
1447
- let names = [];
1448
- if (isArray(name)) {
1449
- names = name;
1450
- } else {
1451
- names = [name];
1452
- }
1453
- const defaultValue2 = itemDefaultValue ?? gDefaultValue;
1454
- if (!isNullAndUnDef(defaultValue2)) {
1455
- if (DATE_PICKER_TYPES.includes(component)) {
1456
- if (isArray(defaultValue2)) {
1457
- let vals = defaultValue2.map((it) => format ? dayjs(it, format) : dayjs(it));
1458
- if (names.length > 1) {
1459
- names.map((key, index) => obj[key] = vals[index] ?? null);
1460
- } else {
1461
- obj[names[0]] = vals;
1462
- }
1463
- } else {
1464
- obj[names[0]] = format ? dayjs(defaultValue2, format) : dayjs(defaultValue2);
1465
- }
1466
- } else {
1467
- if (names.length > 1) {
1468
- names.forEach((key, index) => {
1469
- if (!defaultValue2 || defaultValue2.length - 1 < index) {
1470
- obj[key] = null;
1471
- } else {
1472
- obj[key] = defaultValue2[index];
1473
- }
1474
- });
1475
- } else {
1476
- obj[names[0]] = defaultValue2;
1477
- }
1478
- }
1479
- } else {
1480
- names.map((it) => {
1481
- if (component === "TreeSelect" || (mode === "multiple" || treeCheckable) || component === "Select" && mode === "multiple") {
1482
- obj[it] = [];
1483
- } else {
1484
- obj[it] = null;
1485
- }
1486
- });
1487
- }
1488
- });
1489
- defaultValue.value = { ...obj };
1490
- for (let key in obj) {
1491
- formModel[key] = obj[key];
1492
- }
1493
- }
1494
- return {
1495
- initDefault,
1496
- handleFormValues
1497
- };
1498
- }
1499
- function useFormActions(opt) {
1500
- const { getProps, defaultValue, updateSchema, getFormValues, setFormValues } = opt;
1501
- const { appConf } = useAppStore();
1502
- function handleAdvanced(isAdvanced) {
1503
- const {
1504
- schemas,
1505
- minShowColumn = appConf.ui.form?.minShowColumn || 2,
1506
- showAdvancedButton = true
1507
- } = unref(getProps);
1508
- let schema = [...schemas];
1509
- if (showAdvancedButton) {
1510
- schema = schemas.reduce((t, it, index) => {
1511
- if (index > minShowColumn - 1)
1512
- it.isAdvanced = isAdvanced;
1513
- t.push(it);
1514
- return t;
1515
- }, []);
1516
- }
1517
- updateSchema(schema);
1518
- }
1519
- function handleMethod(params) {
1520
- const { onSearch, onReset } = unref(getProps);
1521
- if (isBoolean(params)) {
1522
- handleAdvanced(params);
1523
- } else if (params.label === SEARCH_BTN_NAME) {
1524
- onSearch(getFormValues());
1525
- } else if (params.label === RESET_BTN_NAME) {
1526
- setFormValues(toRaw(defaultValue.value));
1527
- onReset(getFormValues());
1528
- } else {
1529
- params.onClick();
1530
- }
1531
- }
1532
- return [handleMethod];
1533
- }
1534
- const BasicProps = {
1535
- mode: {
1536
- type: String,
1537
- default: "search"
1538
- },
1539
- autoFetch: {
1540
- type: Boolean,
1541
- default: true
1542
- },
1543
- model: {
1544
- type: Object,
1545
- default: () => ({})
1546
- },
1547
- layout: {
1548
- type: String,
1549
- default: "horizontal"
1550
- },
1551
- labelWidth: {
1552
- type: [Number, String],
1553
- default: 100
1554
- },
1555
- enLabelWidth: {
1556
- type: [Number, String],
1557
- default: 100
1558
- },
1559
- labelAlign: {
1560
- type: String,
1561
- default: "right"
1562
- },
1563
- labelCol: {
1564
- type: Object,
1565
- default: () => ({})
1566
- },
1567
- wrapperCol: {
1568
- type: Object,
1569
- default: () => ({})
1570
- },
1571
- rowProps: {
1572
- type: Object,
1573
- default: () => ({})
1574
- },
1575
- colProps: {
1576
- type: Object,
1577
- default: () => ({})
1578
- },
1579
- size: {
1580
- type: String
1581
- },
1582
- disabled: {
1583
- type: Boolean,
1584
- default: false
1585
- },
1586
- compact: {
1587
- type: Boolean,
1588
- default: null
1589
- },
1590
- schemas: {
1591
- type: Array,
1592
- default: () => []
1593
- },
1594
- autoSearchOnEnter: {
1595
- type: Boolean,
1596
- default: true
1597
- },
1598
- minShowColumn: {
1599
- type: Number,
1600
- default: 2
1601
- },
1602
- showAdvancedButton: {
1603
- type: Boolean,
1604
- default: true
1605
- },
1606
- allowClear: {
1607
- type: Boolean,
1608
- default: true
1609
- },
1610
- scrollToFirstError: {
1611
- type: Boolean,
1612
- default: true
1613
- },
1614
- colon: {
1615
- type: Boolean,
1616
- default: true
1617
- },
1618
- loading: {
1619
- type: Object,
1620
- default: () => {
1621
- return {};
1622
- }
1623
- },
1624
- onSearch: {
1625
- type: Function,
1626
- default: (params) => {
1627
- }
1628
- },
1629
- onReset: {
1630
- type: Function,
1631
- default: (params) => {
1632
- }
1633
- },
1634
- buttons: {
1635
- type: [Array, null, Boolean],
1636
- default: false
1637
- },
1638
- resetFunc: {
1639
- type: Function
1640
- },
1641
- registerInstance: {
1642
- type: Function
1643
- }
1644
- };
1645
- const _sfc_main$9 = /* @__PURE__ */ defineComponent({
1646
- __name: "index",
1647
- props: BasicProps,
1648
- emits: ["register"],
1649
- setup(__props, { emit: emits }) {
1650
- const props = __props;
1651
- const { getAppConf } = useAppStore();
1652
- const attrs = useAttrs();
1653
- const formElRef = ref(null);
1654
- const formModel = reactive({});
1655
- const defaultValue = ref({});
1656
- const propsRef = ref();
1657
- const schemaRef = ref(null);
1658
- const getProps = computed(() => {
1659
- let colProps = props.colProps;
1660
- if (isEmpty(props.colProps)) {
1661
- colProps = props.mode === "search" ? getAppConf.ui.form.searchColspan || { span: 8 } : getAppConf.ui.form.dialogColspan || { span: 12 };
1662
- }
1663
- return {
1664
- ...props,
1665
- ...getAppConf.ui.form,
1666
- colProps,
1667
- ...unref(propsRef)
1668
- };
1669
- });
1670
- const getBindValue = computed(() => {
1671
- return {
1672
- ...attrs,
1673
- ...unref(getProps)
1674
- };
1675
- });
1676
- const getSchema = computed(() => {
1677
- return unref(schemaRef) || unref(getProps).schemas;
1678
- });
1679
- const getFormClass = computed(() => {
1680
- const { compact, mode } = unref(getProps);
1681
- const getCompact = compact === null ? mode === "dialog" ? false : true : compact;
1682
- return [
1683
- "basic-form",
1684
- `basic-form__${mode}`,
1685
- {
1686
- "basic-form__compact": getCompact
1687
- }
1688
- ];
1689
- });
1690
- function setProps(formProps) {
1691
- propsRef.value = deepMerge(unref(propsRef) || {}, formProps);
1692
- return null;
1693
- }
1694
- function setFormModel(key, value) {
1695
- formModel[key] = value;
1696
- const { validateTrigger } = unref(getBindValue);
1697
- if (!validateTrigger || validateTrigger === "change") {
1698
- validateFields([key]).catch((err) => {
1699
- });
1700
- }
1701
- }
1702
- function handleEnterPress() {
1703
- }
1704
- const { initDefault, handleFormValues } = useFormValues({
1705
- defaultValue,
1706
- getSchema,
1707
- formModel
1708
- });
1709
- const {
1710
- updateSchema,
1711
- resetSchema,
1712
- clearValidate,
1713
- resetForms,
1714
- removeFormByName,
1715
- setFormValues,
1716
- appendFormItems,
1717
- validate,
1718
- validateFields,
1719
- getFormValues
1720
- } = useFormEvents({
1721
- emits,
1722
- getSchema,
1723
- formModel,
1724
- formElRef,
1725
- defaultValue,
1726
- schemaRef,
1727
- getProps,
1728
- handleFormValues
1729
- });
1730
- const formActionMethods = {
1731
- setProps,
1732
- updateSchema,
1733
- resetSchema,
1734
- clearValidate,
1735
- resetForms,
1736
- removeFormByName,
1737
- setFormValues,
1738
- appendFormItems,
1739
- validate,
1740
- validateFields,
1741
- getFormValues
1742
- };
1743
- const getActionsProps = computed(() => {
1744
- const {
1745
- mode,
1746
- minShowColumn = getAppConf.ui.form.minShowColumn || 2,
1747
- schemas = [],
1748
- showAdvancedButton: advanced,
1749
- loading,
1750
- buttons
1751
- } = unref(getProps);
1752
- let showAdvancedButton = mode === "search" ? true : false;
1753
- if (advanced !== void 0) {
1754
- showAdvancedButton = advanced;
1755
- }
1756
- if (schemas.length <= minShowColumn) {
1757
- showAdvancedButton = false;
1758
- }
1759
- let buttonList = [];
1760
- if (isArray(buttons)) {
1761
- buttonList = [...buttons];
1762
- } else if (mode === "search" && !buttons) {
1763
- SEARCH_BTNS.forEach((it) => {
1764
- it.loading = it.name === SEARCH_BTN_NAME ? loading?.onSearch : loading?.onReset;
1765
- buttonList.push(it);
1766
- });
1767
- }
1768
- let colspan = mode === "search" ? getAppConf.ui.form.searchColspan : getAppConf.ui.form.dialogColspan;
1769
- if (mode !== "search") {
1770
- return {
1771
- colspan,
1772
- ...{
1773
- mode,
1774
- showAdvancedButton: false,
1775
- isAdvanced: false,
1776
- buttonList
1777
- }
1778
- };
1779
- }
1780
- return {
1781
- colspan,
1782
- ...{
1783
- showAdvancedButton,
1784
- buttonList
1785
- }
1786
- };
1787
- });
1788
- const [handleMethod] = useFormActions({
1789
- getProps,
1790
- defaultValue,
1791
- updateSchema,
1792
- getFormValues,
1793
- setFormValues
1794
- });
1795
- onMounted(() => {
1796
- setFormValues(null);
1797
- emits("register", formActionMethods);
1798
- initDefault();
1799
- if (unref(getProps)?.registerInstance) {
1800
- unref(getProps)?.registerInstance(formActionMethods);
1801
- }
1802
- });
1803
- watch(
1804
- () => unref(getProps).onSearch,
1805
- () => {
1806
- useTimeoutFn(() => {
1807
- const { onSearch, autoFetch } = unref(getProps);
1808
- if (autoFetch && onSearch && isFunction(onSearch)) {
1809
- onSearch(toRaw(defaultValue.value));
1810
- }
1811
- }, 1);
1812
- }
1813
- );
1814
- watch(
1815
- () => unref(getProps).model,
1816
- (v) => {
1817
- const { model } = unref(getProps);
1818
- if (!model || !Object.keys(model).length)
1819
- return;
1820
- setFormValues(model);
1821
- },
1822
- {
1823
- immediate: true,
1824
- deep: true
1825
- }
1826
- );
1827
- return (_ctx, _cache) => {
1828
- const _component_ARow = Row;
1829
- const _component_AForm = Form$1;
1830
- return openBlock(), createBlock(_component_AForm, mergeProps(unref(getBindValue), {
1831
- ref_key: "formElRef",
1832
- ref: formElRef,
1833
- class: unref(getFormClass),
1834
- model: formModel,
1835
- layout: unref(getProps).layout,
1836
- onKeypress: withKeys(handleEnterPress, ["enter"])
1837
- }), {
1838
- default: withCtx(() => [
1839
- createVNode(_component_ARow, mergeProps(unref(getProps).rowProps, { style: {
1840
- margin: 0
1841
- } }), {
1842
- default: withCtx(() => [
1843
- (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getSchema), (schema) => {
1844
- return openBlock(), createBlock(unref(_sfc_main$b), {
1845
- key: schema.name,
1846
- schema,
1847
- formProps: unref(getProps),
1848
- formModel,
1849
- defaultValues: defaultValue.value,
1850
- setFormModel,
1851
- formActionType: formActionMethods
1852
- }, createSlots({ _: 2 }, [
1853
- renderList(Object.keys(_ctx.$slots), (item) => {
1854
- return {
1855
- name: item,
1856
- fn: withCtx((data) => [
1857
- renderSlot(_ctx.$slots, item, normalizeProps(guardReactiveProps(data || {})))
1858
- ])
1859
- };
1860
- })
1861
- ]), 1032, ["schema", "formProps", "formModel", "defaultValues"]);
1862
- }), 128)),
1863
- unref(getActionsProps).buttonList?.length ? (openBlock(), createBlock(unref(_sfc_main$a), mergeProps({ key: 0 }, unref(getActionsProps), { onHandleMethod: unref(handleMethod) }), null, 16, ["onHandleMethod"])) : createCommentVNode("", true)
1864
- ]),
1865
- _: 3
1866
- }, 16)
1867
- ]),
1868
- _: 3
1869
- }, 16, ["class", "model", "layout", "onKeypress"]);
1870
- };
1871
- }
1872
- });
1873
- function useForm(props) {
1874
- const formRef = ref(null);
1875
- const loadedRef = ref(false);
1876
- function register(instance) {
1877
- if (unref(loadedRef) && instance === unref(formRef))
1878
- return;
1879
- formRef.value = instance;
1880
- loadedRef.value = true;
1881
- watch(
1882
- () => props,
1883
- () => props && instance.setProps(props),
1884
- {
1885
- immediate: true,
1886
- deep: true
1887
- }
1888
- );
1889
- }
1890
- async function getForm() {
1891
- const form = unref(formRef);
1892
- if (!form)
1893
- console.error("\u8868\u5355\u672A\u7533\u660E!");
1894
- await nextTick();
1895
- return form;
1896
- }
1897
- const methods = {
1898
- setProps: async (props2) => {
1899
- const form = await getForm();
1900
- form.setProps(props2);
1901
- },
1902
- updateSchema: async (data) => {
1903
- const form = await getForm();
1904
- form.updateSchema(data);
1905
- },
1906
- resetSchema: async (data) => {
1907
- const form = await getForm();
1908
- form.resetSchema(data);
1909
- },
1910
- clearValidate: async (name) => {
1911
- const form = await getForm();
1912
- form.clearValidate(name);
1913
- },
1914
- resetForms: async () => {
1915
- const form = await getForm();
1916
- form.resetForms();
1917
- },
1918
- removeFormByName: async (name) => {
1919
- unref(formRef)?.removeFormByName(name);
1920
- },
1921
- setFormValues: async (values) => {
1922
- const form = await getForm();
1923
- form.setFormValues(values);
1924
- },
1925
- appendFormItems: async (schema, prefixName, first) => {
1926
- const form = await getForm();
1927
- form.appendFormItems(schema, prefixName, first);
1928
- },
1929
- validate: async (nameList) => {
1930
- const form = await getForm();
1931
- return form.validate(nameList);
1932
- },
1933
- validateFields: async (nameList) => {
1934
- const form = await getForm();
1935
- return form.validateFields(nameList);
1936
- },
1937
- getFormValues: () => {
1938
- return unref(formRef)?.getFormValues();
1939
- }
1940
- };
1941
- return [register, methods];
1942
- }
1943
- const orgDialogProp = reactive({});
1944
- const cbTransfer = reactive({});
1945
- const dataTransfer = reactive({});
1946
- function useModalOut() {
1947
- const modal = ref(null);
1948
- const loaded = ref(true);
1949
- const uid = ref(null);
1950
- const { isProd } = useApp();
1951
- function register(modalMethod, uuid) {
1952
- if (!getCurrentInstance()) {
1953
- throw new Error("useModal\u53EA\u80FD\u5728setup()\u6216\u8005\u51FD\u6570\u4E2D\u4F7F\u7528");
1954
- }
1955
- uid.value = uuid;
1956
- onUnmounted(() => {
1957
- if (unref(isProd)) {
1958
- modal.value = null;
1959
- loaded.value = false;
1960
- dataTransfer[unref(uid)] = null;
1961
- orgDialogProp[unref(uid)] = null;
1962
- cbTransfer[unref(uid)] = (res) => {
1963
- };
1964
- }
1965
- });
1966
- if (unref(loaded) && modalMethod === unref(modal))
1967
- return;
1968
- modal.value = modalMethod;
1969
- loaded.value = true;
1970
- }
1971
- const getInstance = () => {
1972
- const instance = unref(modal);
1973
- if (!instance) {
1974
- error("useModalOut \u5B9E\u4F8B\u672A\u5B9A\u4E49");
1975
- }
1976
- return instance;
1977
- };
1978
- const methods = {
1979
- setModalProps: (props) => {
1980
- getInstance()?.setModalProps(props);
1981
- },
1982
- redoModalHeight: () => {
1983
- getInstance()?.redoModalHeight?.();
1984
- },
1985
- openModal: (params, afterClose) => {
1986
- const id = unref(uid);
1987
- dataTransfer[id] = isObject(params) ? { ...toRaw(params) } : params;
1988
- getInstance()?.setModalProps({
1989
- footer: [],
1990
- defaultFullscreen: false,
1991
- ...orgDialogProp[id],
1992
- visible: true
1993
- });
1994
- cbTransfer[id] = (res) => {
1995
- if (afterClose && isFunction(afterClose)) {
1996
- afterClose(res);
1997
- }
1998
- };
1999
- },
2000
- closeModal: () => {
2001
- getInstance()?.setModalProps({ visible: false });
2002
- }
2003
- };
2004
- return [register, methods];
2005
- }
2006
- function useModal(props, setModalData) {
2007
- const modalInstanceRef = ref(null);
2008
- const currentInstance = getCurrentInstance();
2009
- const uidRef = ref(null);
2010
- const { isProd } = useApp();
2011
- const getInstance = () => {
2012
- const instance = unref(modalInstanceRef);
2013
- if (!instance) {
2014
- error("useModal \u5B9E\u4F8B\u672A\u5B9A\u4E49");
2015
- }
2016
- return instance;
2017
- };
2018
- const register = (modalInstance, uuid) => {
2019
- if (unref(isProd)) {
2020
- modalInstanceRef.value = null;
2021
- }
2022
- uidRef.value = uuid;
2023
- modalInstanceRef.value = modalInstance;
2024
- currentInstance?.emit("register", modalInstance, uuid);
2025
- orgDialogProp[uuid] = toRaw(props);
2026
- modalInstance.setModalProps(props);
2027
- };
2028
- watchEffect(() => {
2029
- const data = dataTransfer[unref(uidRef)];
2030
- if (!setModalData || !isFunction(setModalData))
2031
- return;
2032
- nextTick(() => {
2033
- setModalData(data);
2034
- if (!data)
2035
- return;
2036
- if (props?.title && isFunction(props?.title)) {
2037
- let title = props.title(data);
2038
- methods.setModalProps({ title });
2039
- }
2040
- });
2041
- });
2042
- const methods = {
2043
- setLoading: (loading = true) => {
2044
- getInstance()?.setModalProps({ loading });
2045
- },
2046
- closeModal: (rsp) => {
2047
- if (cbTransfer[unref(uidRef)])
2048
- cbTransfer[unref(uidRef)](rsp);
2049
- getInstance()?.setModalProps({ visible: false });
2050
- },
2051
- setModalProps: (props2) => {
2052
- getInstance()?.setModalProps(props2);
2053
- },
2054
- redoModalHeight: () => {
2055
- const callRedo = getInstance()?.redoModalHeight;
2056
- callRedo && callRedo();
2057
- }
2058
- };
2059
- return [register, methods];
2060
- }
2061
- const basicProps$1 = {
2062
- t: {
2063
- type: String
2064
- },
2065
- visible: {
2066
- type: Boolean
2067
- },
2068
- closable: {
2069
- type: Boolean,
2070
- default: true
2071
- },
2072
- destroyOnClose: {
2073
- type: Boolean
2074
- },
2075
- scrollTop: {
2076
- type: Boolean,
2077
- default: true
2078
- },
2079
- height: { type: Number },
2080
- minHeight: { type: Number },
2081
- width: { type: [String, Number] },
2082
- draggable: {
2083
- type: Boolean,
2084
- default: true
2085
- },
2086
- defaultFullscreen: {
2087
- type: Boolean
2088
- },
2089
- canFullscreen: {
2090
- type: Boolean,
2091
- default: true
2092
- },
2093
- title: {
2094
- type: String
2095
- },
2096
- loading: { type: Boolean, default: false },
2097
- loadingTip: { type: String, default: "\u52A0\u8F7D\u4E2D..." },
2098
- useWrapper: {
2099
- type: Boolean,
2100
- default: true
2101
- },
2102
- wrapClassName: { type: String },
2103
- zIndex: { type: Number },
2104
- centered: { type: Boolean },
2105
- showOkBtn: {
2106
- type: Boolean,
2107
- default: true
2108
- },
2109
- showCancelBtn: {
2110
- type: Boolean,
2111
- default: true
2112
- },
2113
- okText: {
2114
- type: String
2115
- },
2116
- cancelText: {
2117
- type: String
2118
- },
2119
- mask: { type: Boolean, default: true },
2120
- maskClosable: { type: Boolean, default: true },
2121
- keyboard: { type: Boolean, default: true },
2122
- maskStyle: Object,
2123
- footer: {
2124
- type: Object
2125
- },
2126
- bodyStyle: Object,
2127
- wrapperProps: Object,
2128
- getContainer: Function,
2129
- closeFunc: Function,
2130
- afterClose: Function
2131
- };
2132
- function useDragMove(context) {
2133
- const getStyle = (dom, attr) => {
2134
- return getComputedStyle(dom)[attr];
2135
- };
2136
- const drag = (wrap) => {
2137
- if (!wrap)
2138
- return;
2139
- wrap.setAttribute("data-drag", unref(context.draggable));
2140
- const dialogHeaderEl = wrap.querySelector(".ant-modal-header");
2141
- const dragDom = wrap.querySelector(".ant-modal");
2142
- if (!dialogHeaderEl || !dragDom || !unref(context.draggable))
2143
- return;
2144
- dialogHeaderEl.style.cursor = "move";
2145
- dialogHeaderEl.onmousedown = (e) => {
2146
- if (!e)
2147
- return;
2148
- const disX = e.clientX;
2149
- const disY = e.clientY;
2150
- const screenWidth = document.body.clientWidth;
2151
- const screenHeight = document.documentElement.clientHeight;
2152
- const dragDomWidth = dragDom.offsetWidth;
2153
- const dragDomheight = dragDom.offsetHeight;
2154
- const minDragDomLeft = dragDom.offsetLeft;
2155
- const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
2156
- const minDragDomTop = dragDom.offsetTop;
2157
- const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
2158
- const domLeft = getStyle(dragDom, "left");
2159
- const domTop = getStyle(dragDom, "top");
2160
- let styL = +domLeft;
2161
- let styT = +domTop;
2162
- if (domLeft.includes("%")) {
2163
- styL = +document.body.clientWidth * (+domLeft.replace(/%/g, "") / 100);
2164
- styT = +document.body.clientHeight * (+domTop.replace(/%/g, "") / 100);
2165
- } else {
2166
- styL = +domLeft.replace(/px/g, "");
2167
- styT = +domTop.replace(/px/g, "");
2168
- }
2169
- document.onmousemove = function(e2) {
2170
- let left = e2.clientX - disX;
2171
- let top = e2.clientY - disY;
2172
- if (-left > minDragDomLeft) {
2173
- left = -minDragDomLeft;
2174
- } else if (left > maxDragDomLeft) {
2175
- left = maxDragDomLeft;
2176
- }
2177
- if (-top > minDragDomTop) {
2178
- top = -minDragDomTop;
2179
- } else if (top > maxDragDomTop) {
2180
- top = maxDragDomTop;
2181
- }
2182
- dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
2183
- };
2184
- document.onmouseup = () => {
2185
- document.onmousemove = null;
2186
- document.onmouseup = null;
2187
- };
2188
- };
2189
- };
2190
- const handleDrag = () => {
2191
- const dragWraps = document.querySelectorAll(".ant-modal-wrap");
2192
- for (const wrap of Array.from(dragWraps)) {
2193
- if (!wrap)
2194
- continue;
2195
- const display = getStyle(wrap, "display");
2196
- const draggable = wrap.getAttribute("data-drag");
2197
- if (display !== "none") {
2198
- if (draggable === null || unref(context.destroyOnClose)) {
2199
- drag(wrap);
2200
- }
2201
- }
2202
- }
2203
- };
2204
- watchEffect(() => {
2205
- if (!unref(context.visible) || !unref(context.draggable)) {
2206
- return;
2207
- }
2208
- useTimeoutFn(() => {
2209
- handleDrag();
2210
- }, 30);
2211
- });
2212
- }
2213
- function _isSlot(s) {
2214
- return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
2215
- }
2216
- const _sfc_main$8 = {
2217
- name: "Modal",
2218
- inheritAttrs: false,
2219
- props: basicProps$1,
2220
- emits: ["cancel"],
2221
- setup(props, {
2222
- slots,
2223
- emit
2224
- }) {
2225
- const {
2226
- visible,
2227
- draggable,
2228
- destroyOnClose
2229
- } = toRefs(props);
2230
- const attrs = useAttrs();
2231
- useDragMove({
2232
- visible,
2233
- destroyOnClose,
2234
- draggable
2235
- });
2236
- const {
2237
- extendSlots
2238
- } = useSlots();
2239
- const onCancel = (e) => emit("cancel", e);
2240
- return () => {
2241
- let _slot;
2242
- const propsData = {
2243
- ...unref(attrs),
2244
- ...props,
2245
- destroyOnClose: true,
2246
- onCancel
2247
- };
2248
- if (!propsData?.visible)
2249
- return null;
2250
- return createVNode(Modal, propsData, _isSlot(_slot = extendSlots(slots)) ? _slot : {
2251
- default: () => [_slot]
2252
- });
2253
- };
2254
- }
2255
- };
2256
- const _sfc_main$7 = /* @__PURE__ */ defineComponent({
2257
- __name: "CloseIcon",
2258
- props: {
2259
- canFullscreen: { type: Boolean, default: true },
2260
- fullScreen: { type: Boolean }
2261
- },
2262
- emits: ["cancel", "fullscreen"],
2263
- setup(__props, { emit }) {
2264
- const props = __props;
2265
- const { t } = useI18n("UI");
2266
- const getClass = computed(() => {
2267
- return [
2268
- "dt-basic-modal-close",
2269
- `dt-basic-modal-close--custom`,
2270
- {
2271
- [`dt-basic-modal-close--can-full`]: props.canFullscreen
2272
- }
2273
- ];
2274
- });
2275
- function handleCancel(e) {
2276
- emit("cancel", e);
2277
- }
2278
- function handleFullScreen(e) {
2279
- e?.stopPropagation();
2280
- e?.preventDefault();
2281
- emit("fullscreen");
2282
- }
2283
- return (_ctx, _cache) => {
2284
- const _component_ATooltip = Tooltip$1;
2285
- return openBlock(), createElementBlock("div", {
2286
- class: normalizeClass(["flex h-14 items-center justify-center", unref(getClass)])
2287
- }, [
2288
- __props.canFullscreen ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
2289
- __props.fullScreen ? (openBlock(), createBlock(_component_ATooltip, {
2290
- key: 0,
2291
- title: unref(t)("EXIT_FULLSCREEN"),
2292
- placement: "bottom"
2293
- }, {
2294
- default: withCtx(() => [
2295
- createElementVNode("i", {
2296
- class: "i ic:baseline-fullscreen-exit hover:font-bold inline-block w-10 h-14 pr-4",
2297
- onClick: handleFullScreen
2298
- })
2299
- ]),
2300
- _: 1
2301
- }, 8, ["title"])) : (openBlock(), createBlock(_component_ATooltip, {
2302
- key: 1,
2303
- title: unref(t)("FULLSCREEN"),
2304
- placement: "bottom"
2305
- }, {
2306
- default: withCtx(() => [
2307
- createElementVNode("i", {
2308
- class: "i ic:baseline-fullscreen hover:font-bold inline-block h-14 w-10 pr-4",
2309
- onClick: handleFullScreen
2310
- })
2311
- ]),
2312
- _: 1
2313
- }, 8, ["title"]))
2314
- ], 64)) : createCommentVNode("", true),
2315
- createElementVNode("i", {
2316
- class: "i mdi:close h-14 w-10 pr-4",
2317
- onClick: handleCancel
2318
- })
2319
- ], 2);
2320
- };
2321
- }
2322
- });
2323
- const isServer = typeof window === "undefined";
2324
- const BAR_MAP = {
2325
- vertical: {
2326
- offset: "offsetHeight",
2327
- scroll: "scrollTop",
2328
- scrollSize: "scrollHeight",
2329
- size: "height",
2330
- key: "vertical",
2331
- axis: "Y",
2332
- client: "clientY",
2333
- direction: "top"
2334
- },
2335
- horizontal: {
2336
- offset: "offsetWidth",
2337
- scroll: "scrollLeft",
2338
- scrollSize: "scrollWidth",
2339
- size: "width",
2340
- key: "horizontal",
2341
- axis: "X",
2342
- client: "clientX",
2343
- direction: "left"
2344
- }
2345
- };
2346
- function renderThumbStyle({ move, size, bar }) {
2347
- const style = {};
2348
- const translate = `translate${bar.axis}(${move}%)`;
2349
- style[bar.size] = size;
2350
- style.transform = translate;
2351
- style.msTransform = translate;
2352
- style.webkitTransform = translate;
2353
- return style;
2354
- }
2355
- function resizeHandler(entries) {
2356
- for (const entry of entries) {
2357
- const listeners = entry.target.__resizeListeners__ || [];
2358
- if (listeners.length) {
2359
- listeners.forEach((fn) => {
2360
- fn();
2361
- });
2362
- }
2363
- }
2364
- }
2365
- function addResizeListener(element, fn) {
2366
- if (isServer)
2367
- return;
2368
- if (!element.__resizeListeners__) {
2369
- element.__resizeListeners__ = [];
2370
- element.__ro__ = new ResizeObserver(resizeHandler);
2371
- element.__ro__.observe(element);
2372
- }
2373
- element.__resizeListeners__.push(fn);
2374
- }
2375
- function removeResizeListener(element, fn) {
2376
- if (!element || !element.__resizeListeners__)
2377
- return;
2378
- element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
2379
- if (!element.__resizeListeners__.length) {
2380
- element.__ro__.disconnect();
2381
- }
2382
- }
2383
- const Bar = defineComponent({
2384
- name: "Bar",
2385
- props: {
2386
- vertical: Boolean,
2387
- size: String,
2388
- move: Number
2389
- },
2390
- setup(props) {
2391
- const instance = getCurrentInstance();
2392
- const thumb = ref();
2393
- const wrap = inject("scroll-bar-wrap", {});
2394
- const bar = computed(() => {
2395
- return BAR_MAP[props.vertical ? "vertical" : "horizontal"];
2396
- });
2397
- const barStore = ref({});
2398
- const cursorDown = ref();
2399
- const clickThumbHandler = (e) => {
2400
- if (e.ctrlKey || e.button === 2) {
2401
- return;
2402
- }
2403
- window.getSelection()?.removeAllRanges();
2404
- startDrag(e);
2405
- barStore.value[bar.value.axis] = e.currentTarget[bar.value.offset] - (e[bar.value.client] - e.currentTarget.getBoundingClientRect()[bar.value.direction]);
2406
- };
2407
- const clickTrackHandler = (e) => {
2408
- const offset = Math.abs(
2409
- e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]
2410
- );
2411
- const thumbHalf = thumb.value[bar.value.offset] / 2;
2412
- const thumbPositionPercentage = (offset - thumbHalf) * 100 / instance?.vnode.el?.[bar.value.offset];
2413
- wrap.value[bar.value.scroll] = thumbPositionPercentage * wrap.value[bar.value.scrollSize] / 100;
2414
- };
2415
- const startDrag = (e) => {
2416
- e.stopImmediatePropagation();
2417
- cursorDown.value = true;
2418
- on(document, "mousemove", mouseMoveDocumentHandler);
2419
- on(document, "mouseup", mouseUpDocumentHandler);
2420
- document.onselectstart = () => false;
2421
- };
2422
- const mouseMoveDocumentHandler = (e) => {
2423
- if (cursorDown.value === false)
2424
- return;
2425
- const prevPage = barStore.value[bar.value.axis];
2426
- if (!prevPage)
2427
- return;
2428
- const offset = (instance?.vnode.el?.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
2429
- const thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
2430
- const thumbPositionPercentage = (offset - thumbClickPosition) * 100 / instance?.vnode.el?.[bar.value.offset];
2431
- wrap.value[bar.value.scroll] = thumbPositionPercentage * wrap.value[bar.value.scrollSize] / 100;
2432
- };
2433
- function mouseUpDocumentHandler() {
2434
- cursorDown.value = false;
2435
- barStore.value[bar.value.axis] = 0;
2436
- off(document, "mousemove", mouseMoveDocumentHandler);
2437
- document.onselectstart = null;
2438
- }
2439
- onUnmounted(() => {
2440
- off(document, "mouseup", mouseUpDocumentHandler);
2441
- });
2442
- return () => h(
2443
- "div",
2444
- {
2445
- class: ["scrollbar__bar", "is-" + bar.value.key],
2446
- onMousedown: clickTrackHandler
2447
- },
2448
- h("div", {
2449
- ref: thumb,
2450
- class: "scrollbar__thumb",
2451
- onMousedown: clickThumbHandler,
2452
- style: renderThumbStyle({
2453
- size: props.size,
2454
- move: props.move,
2455
- bar: bar.value
2456
- })
2457
- })
2458
- );
2459
- }
2460
- });
2461
- const _hoisted_1 = { class: "scrollbar relative h-full overflow-hidden" };
2462
- const _sfc_main$6 = /* @__PURE__ */ defineComponent({
2463
- __name: "scroll-bar",
2464
- props: {
2465
- wrapClass: {
2466
- type: [String, Array],
2467
- default: ""
2468
- },
2469
- wrapStyle: Array,
2470
- viewClass: {
2471
- type: [String, Array],
2472
- default: ""
2473
- },
2474
- viewStyle: {
2475
- type: [String, Array],
2476
- default: ""
2477
- },
2478
- noresize: Boolean,
2479
- tag: {
2480
- type: String,
2481
- default: "div"
2482
- }
2483
- },
2484
- setup(__props) {
2485
- const props = __props;
2486
- const sizeWidth = ref("0");
2487
- const sizeHeight = ref("0");
2488
- const moveX = ref(0);
2489
- const moveY = ref(0);
2490
- const wrap = ref();
2491
- const resize = ref();
2492
- provide("scroll-bar-wrap", wrap);
2493
- const style = computed(() => {
2494
- let rsStyle = {};
2495
- if (Array.isArray(props.wrapStyle)) {
2496
- props.wrapStyle.forEach((it) => {
2497
- if (it)
2498
- rsStyle = Object.assign({}, rsStyle, it);
2499
- });
2500
- }
2501
- return rsStyle;
2502
- });
2503
- const handleScroll = () => {
2504
- moveY.value = unref(wrap).scrollTop * 100 / unref(wrap).clientHeight;
2505
- moveX.value = unref(wrap).scrollLeft * 100 / unref(wrap).clientWidth;
2506
- };
2507
- const update = () => {
2508
- if (!unref(wrap))
2509
- return;
2510
- const heightPercentage = unref(wrap).clientHeight * 100 / unref(wrap).scrollHeight;
2511
- const widthPercentage = unref(wrap).clientWidth * 100 / unref(wrap).scrollWidth;
2512
- sizeHeight.value = heightPercentage < 100 ? heightPercentage + "%" : "";
2513
- sizeWidth.value = widthPercentage < 100 ? widthPercentage + "%" : "";
2514
- };
2515
- onMounted(() => {
2516
- nextTick(update);
2517
- if (!props.noresize) {
2518
- addResizeListener(unref(resize), update);
2519
- addResizeListener(unref(wrap), update);
2520
- addEventListener("resize", update);
2521
- }
2522
- });
2523
- onBeforeUnmount(() => {
2524
- if (!props.noresize) {
2525
- removeResizeListener(unref(resize), update);
2526
- removeResizeListener(unref(wrap), update);
2527
- removeEventListener("resize", update);
2528
- }
2529
- });
2530
- return (_ctx, _cache) => {
2531
- return openBlock(), createElementBlock("div", _hoisted_1, [
2532
- createElementVNode("div", {
2533
- ref_key: "wrap",
2534
- ref: wrap,
2535
- class: normalizeClass([[__props.wrapClass, "scrollbar__wrap--hidden-default"], "h-full overflow-auto"]),
2536
- style: normalizeStyle(unref(style)),
2537
- onScroll: handleScroll
2538
- }, [
2539
- (openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
2540
- class: normalizeClass(["box-border", __props.viewClass]),
2541
- ref_key: "resize",
2542
- ref: resize,
2543
- style: normalizeStyle(__props.viewStyle)
2544
- }, {
2545
- default: withCtx(() => [
2546
- renderSlot(_ctx.$slots, "default")
2547
- ]),
2548
- _: 3
2549
- }, 8, ["class", "style"]))
2550
- ], 38),
2551
- createVNode(unref(Bar), {
2552
- move: moveX.value,
2553
- size: sizeWidth.value
2554
- }, null, 8, ["move", "size"]),
2555
- createVNode(unref(Bar), {
2556
- vertical: "",
2557
- move: moveY.value,
2558
- size: sizeHeight.value
2559
- }, null, 8, ["move", "size"])
2560
- ]);
2561
- };
2562
- }
2563
- });
2564
- const _sfc_main$5 = /* @__PURE__ */ defineComponent({
2565
- __name: "scroll-container",
2566
- setup(__props) {
2567
- const scrollbarRef = ref(null);
2568
- return (_ctx, _cache) => {
2569
- return openBlock(), createBlock(_sfc_main$6, mergeProps({
2570
- ref_key: "scrollbarRef",
2571
- ref: scrollbarRef
2572
- }, _ctx.$attrs, { class: "w-full h-full" }), {
2573
- default: withCtx(() => [
2574
- renderSlot(_ctx.$slots, "default")
2575
- ]),
2576
- _: 3
2577
- }, 16);
2578
- };
2579
- }
2580
- });
2581
- const _sfc_main$4 = /* @__PURE__ */ defineComponent({
2582
- __name: "slot-container",
2583
- props: {
2584
- template: {
2585
- type: Function
2586
- },
2587
- data: {
2588
- type: Object
2589
- }
2590
- },
2591
- setup(__props) {
2592
- const props = __props;
2593
- const Container = h("div", [props.template(props.data)]);
2594
- return (_ctx, _cache) => {
2595
- return openBlock(), createBlock(unref(Container));
2596
- };
2597
- }
2598
- });
2599
- const withInstall = (comp) => {
2600
- comp.install = (app) => {
2601
- app.component(comp.name, comp);
2602
- };
2603
- return comp;
2604
- };
2605
- const DtScrollContainer = withInstall(_sfc_main$5);
2606
- withInstall(_sfc_main$4);
2607
- const _sfc_main$3 = /* @__PURE__ */ defineComponent({
2608
- __name: "ModalWrap",
2609
- props: {
2610
- useWrapper: { type: Boolean, default: true },
2611
- modalHeaderHeight: { type: Number, default: 55 },
2612
- modalFooterHeight: { type: Number, default: 58 },
2613
- minHeight: { type: Number, default: 200 },
2614
- height: { type: Number },
2615
- visible: { type: Boolean },
2616
- fullScreen: { type: Boolean }
2617
- },
2618
- emits: ["ext-height", "height-change"],
2619
- setup(__props, { emit: emits }) {
2620
- const props = __props;
2621
- const wrapperRef = ref(null);
2622
- const wrapRef = ref(null);
2623
- const realHeightRef = ref(0);
2624
- const minRealHeightRef = ref(0);
2625
- let realHeight = 0;
2626
- const wrapStyle = computed(() => {
2627
- return {
2628
- minHeight: `${props.minHeight}px`,
2629
- [props.fullScreen ? "height" : "maxHeight"]: `${unref(realHeightRef)}px`
2630
- };
2631
- });
2632
- onMounted(() => {
2633
- const { modalHeaderHeight, modalFooterHeight } = props;
2634
- emits("ext-height", modalHeaderHeight + modalFooterHeight);
2635
- });
2636
- async function getModalDom() {
2637
- const wrapperRefDom = unref(wrapperRef);
2638
- if (!wrapperRefDom)
2639
- return;
2640
- const bodyDom = wrapperRefDom.$el.parentElement.parentElement.parentElement;
2641
- if (!bodyDom)
2642
- return;
2643
- bodyDom.style.padding = props.useWrapper ? "24px" : "0";
2644
- await nextTick();
2645
- const modalDom = bodyDom.parentElement && bodyDom.parentElement.parentElement;
2646
- return modalDom;
2647
- }
2648
- async function setModalHeight() {
2649
- if (!props.visible)
2650
- return;
2651
- try {
2652
- const modalDom = await getModalDom();
2653
- if (!modalDom)
2654
- return;
2655
- const modalRect = getComputedStyle(modalDom).top;
2656
- const modalTop = Number.parseInt(modalRect);
2657
- let maxHeight = window.innerHeight - props.modalFooterHeight - props.modalHeaderHeight - 100;
2658
- if (modalTop < 40) {
2659
- maxHeight -= 26;
2660
- }
2661
- await nextTick();
2662
- const warpEl = unref(wrapRef);
2663
- if (!warpEl)
2664
- return;
2665
- await nextTick();
2666
- realHeight = warpEl.scrollHeight;
2667
- if (props.fullScreen) {
2668
- realHeightRef.value = window.innerHeight - props.modalFooterHeight - props.modalHeaderHeight;
2669
- } else {
2670
- realHeightRef.value = props.height ? props.height : realHeight > maxHeight ? maxHeight : realHeight;
2671
- }
2672
- emits("height-change", unref(realHeightRef));
2673
- const _modalDom = await getModalDom();
2674
- _modalDom.style.top = (window.innerHeight - _modalDom.offsetHeight) / 2 + "px";
2675
- } catch (error2) {
2676
- console.log(error2);
2677
- }
2678
- }
2679
- windowResizeFn(setModalHeight.bind(null, false));
2680
- watchEffect(() => {
2681
- props.useWrapper && setModalHeight();
2682
- });
2683
- watch(
2684
- () => props.fullScreen,
2685
- (v) => {
2686
- setModalHeight();
2687
- if (!v) {
2688
- realHeightRef.value = minRealHeightRef.value;
2689
- } else {
2690
- minRealHeightRef.value = realHeightRef.value;
2691
- }
2692
- }
2693
- );
2694
- return (_ctx, _cache) => {
2695
- return openBlock(), createBlock(unref(DtScrollContainer), {
2696
- ref_key: "wrapperRef",
2697
- ref: wrapperRef
2698
- }, {
2699
- default: withCtx(() => [
2700
- createElementVNode("div", {
2701
- ref_key: "wrapRef",
2702
- ref: wrapRef,
2703
- style: normalizeStyle(unref(wrapStyle))
2704
- }, [
2705
- renderSlot(_ctx.$slots, "default")
2706
- ], 4)
2707
- ]),
2708
- _: 3
2709
- }, 512);
2710
- };
2711
- }
2712
- });
2713
- const _sfc_main$2 = /* @__PURE__ */ defineComponent({
2714
- __name: "ModalFooter",
2715
- props: {
2716
- buttons: Object,
2717
- showSave: { type: Boolean, default: true },
2718
- showCancel: { type: Boolean, default: true },
2719
- okText: { type: String },
2720
- cancelText: { type: String }
2721
- },
2722
- emits: [
2723
- "handleSave",
2724
- "handleCancel"
2725
- ],
2726
- setup(__props, { emit: emits }) {
2727
- const props = __props;
2728
- const { t } = useI18n("UI");
2729
- const buttonList = computed(() => {
2730
- if (props.buttons && props.buttons.length)
2731
- return props.buttons;
2732
- let buttonActions = [
2733
- { t: "\u5173\u95ED", label: props.cancelText || t("CLOSE"), preIcon: "mdi:close", flag: "CANCEL" },
2734
- { t: "\u4FDD\u5B58", label: props.okText || t("SAVE"), preIcon: "mdi:content-save", type: "primary", flag: "OK" }
2735
- ];
2736
- if (!props.showSave)
2737
- buttonActions = buttonActions.filter((btn) => btn.flag !== "OK");
2738
- if (!props.showCancel)
2739
- buttonActions = buttonActions.filter((btn) => btn.flag !== "CANCEL");
2740
- return buttonActions;
2741
- });
2742
- function handleMethod(item) {
2743
- switch (item.flag) {
2744
- case "OK":
2745
- emits("handleSave");
2746
- break;
2747
- case "CANCEL":
2748
- emits("handleCancel");
2749
- break;
2750
- }
2751
- }
2752
- return (_ctx, _cache) => {
2753
- return openBlock(), createElementBlock(Fragment, null, [
2754
- renderSlot(_ctx.$slots, "appendFooter"),
2755
- createVNode(_sfc_main$a, {
2756
- mode: "dialog",
2757
- buttonList: unref(buttonList),
2758
- onHandleMethod: _cache[0] || (_cache[0] = ($event) => handleMethod($event))
2759
- }, null, 8, ["buttonList"])
2760
- ], 64);
2761
- };
2762
- }
2763
- });
2764
- function useFullScreen(wrapClassName) {
2765
- const fullScreenRef = ref(false);
2766
- const getWrapClassName = computed(() => {
2767
- const clsName = unref(wrapClassName) || "";
2768
- const cls = unref(fullScreenRef) ? `fullscreen-modal ${clsName} ` : unref(clsName);
2769
- return `dt-modal ${cls}`;
2770
- });
2771
- function toggleFullScreen(e) {
2772
- e && e.stopPropagation();
2773
- fullScreenRef.value = !unref(fullScreenRef);
2774
- dispatchResize();
2775
- }
2776
- return {
2777
- fullScreenRef,
2778
- getWrapClassName,
2779
- toggleFullScreen
2780
- };
2781
- }
2782
- const _sfc_main$1 = /* @__PURE__ */ defineComponent({
2783
- __name: "index",
2784
- props: basicProps$1,
2785
- emits: ["visible-change", "height-change", "cancel", "save", "register", "update:visible"],
2786
- setup(__props, { emit: emits }) {
2787
- const props = __props;
2788
- const visibleRef = ref(false);
2789
- const propsRef = ref();
2790
- const modalWrapperRef = ref(null);
2791
- const { getWrapClassName, toggleFullScreen, fullScreenRef } = useFullScreen(computed(() => unref(propsRef)?.wrapClassName));
2792
- const getMergeProps = computed(() => {
2793
- return {
2794
- ...props,
2795
- ...unref(propsRef)
2796
- };
2797
- });
2798
- const getBindValue = computed(() => {
2799
- const bindValue = {
2800
- ...unref(getMergeProps),
2801
- ...unref(propsRef),
2802
- visible: unref(visibleRef),
2803
- wrapClassName: unref(getWrapClassName)
2804
- };
2805
- let omitArr = unref(fullScreenRef) ? ["height", "title"] : ["title"];
2806
- if (isArray(unref(propsRef)?.footer)) {
2807
- omitArr.push("footer");
2808
- }
2809
- return omit(bindValue, omitArr);
2810
- });
2811
- const getWrapperHeight = computed(() => {
2812
- if (unref(fullScreenRef))
2813
- return void 0;
2814
- return unref(getBindValue).height;
2815
- });
2816
- const modalFooterHeight = computed(() => {
2817
- if (isArray(props.footer)) {
2818
- return (unref(propsRef)?.footer).length ? 0 : void 0;
2819
- }
2820
- return props?.footer !== void 0 && !props.footer ? 0 : void 0;
2821
- });
2822
- const modalMethods = {
2823
- setModalProps,
2824
- redoModalHeight: () => {
2825
- nextTick(() => {
2826
- if (unref(modalWrapperRef)) {
2827
- unref(modalWrapperRef).setModalHeight();
2828
- }
2829
- });
2830
- }
2831
- };
2832
- const instance = getCurrentInstance();
2833
- if (instance) {
2834
- emits("register", modalMethods, instance.uid);
2835
- }
2836
- function handleHeightChange(height) {
2837
- emits("height-change", height);
2838
- }
2839
- function setModalProps(props2) {
2840
- propsRef.value = deepMerge(unref(propsRef) || {}, props2);
2841
- if (Reflect.has(props2, "visible")) {
2842
- visibleRef.value = !!props2.visible;
2843
- }
2844
- if (Reflect.has(props2, "defaultFullscreen")) {
2845
- fullScreenRef.value = !!props2.defaultFullscreen;
2846
- }
2847
- }
2848
- function handleSave() {
2849
- emits("save");
2850
- }
2851
- async function handleCancel(e = null) {
2852
- if (e) {
2853
- e?.stopPropagation();
2854
- if (e.target?.classList?.contains("dt-basic-modal-close--custom"))
2855
- return;
2856
- if (props.closeFunc && isFunction(props.closeFunc)) {
2857
- const isClose = await props.closeFunc();
2858
- visibleRef.value = !isClose;
2859
- return;
2860
- }
2861
- }
2862
- const { afterClose } = unref(getBindValue);
2863
- if (afterClose && isFunction(afterClose)) {
2864
- afterClose();
2865
- }
2866
- visibleRef.value = false;
2867
- emits("cancel", e);
2868
- }
2869
- watch(() => unref(visibleRef), (v) => {
2870
- emits("visible-change", v);
2871
- emits("update:visible", v);
2872
- nextTick(() => {
2873
- if (props.scrollTop && v && unref(modalWrapperRef)) {
2874
- unref(modalWrapperRef).$el.scrollTop = 0;
2875
- }
2876
- });
2877
- }, {
2878
- immediate: false
2879
- });
2880
- return (_ctx, _cache) => {
2881
- const _component_ASpin = Spin;
2882
- return openBlock(), createBlock(_sfc_main$8, mergeProps(unref(getBindValue), { onCancel: handleCancel }), createSlots({
2883
- default: withCtx(() => [
2884
- createVNode(_component_ASpin, {
2885
- spinning: unref(getBindValue).loading,
2886
- tip: unref(getBindValue).loadingTip
2887
- }, {
2888
- default: withCtx(() => [
2889
- createVNode(_sfc_main$3, mergeProps({
2890
- useWrapper: unref(getBindValue).useWrapper,
2891
- fullScreen: unref(fullScreenRef),
2892
- ref_key: "modalWrapperRef",
2893
- ref: modalWrapperRef,
2894
- minHeight: unref(getBindValue).minHeight,
2895
- height: unref(getWrapperHeight),
2896
- visible: visibleRef.value,
2897
- modalFooterHeight: unref(modalFooterHeight)
2898
- }, unref(omit)(unref(getBindValue).wrapperProps, "visible", "height", "modalFooterHeight"), { onHeightChange: handleHeightChange }), {
2899
- default: withCtx(() => [
2900
- renderSlot(_ctx.$slots, "default")
2901
- ]),
2902
- _: 3
2903
- }, 16, ["useWrapper", "fullScreen", "minHeight", "height", "visible", "modalFooterHeight"])
2904
- ]),
2905
- _: 3
2906
- }, 8, ["spinning", "tip"])
2907
- ]),
2908
- _: 2
2909
- }, [
2910
- !_ctx.$slots.closeIcon ? {
2911
- name: "closeIcon",
2912
- fn: withCtx(() => [
2913
- createVNode(_sfc_main$7, {
2914
- canFullscreen: unref(getBindValue).canFullscreen,
2915
- fullScreen: unref(fullScreenRef),
2916
- onCancel: handleCancel,
2917
- onFullscreen: unref(toggleFullScreen)
2918
- }, null, 8, ["canFullscreen", "fullScreen", "onFullscreen"])
2919
- ]),
2920
- key: "0"
2921
- } : void 0,
2922
- !_ctx.$slots.title ? {
2923
- name: "title",
2924
- fn: withCtx(() => [
2925
- createTextVNode(toDisplayString(unref(getMergeProps).title), 1)
2926
- ]),
2927
- key: "1"
2928
- } : void 0,
2929
- !_ctx.$slots.footer ? {
2930
- name: "footer",
2931
- fn: withCtx(() => [
2932
- createVNode(_sfc_main$2, {
2933
- buttons: propsRef.value?.footer,
2934
- showSave: unref(getBindValue).showOkBtn,
2935
- showCancel: unref(getBindValue).showCancelBtn,
2936
- okText: unref(getBindValue).okText,
2937
- cancelText: unref(getBindValue).cancelText,
2938
- onHandleSave: handleSave,
2939
- onHandleCancel: handleCancel
2940
- }, createSlots({ _: 2 }, [
2941
- renderList(Object.keys(_ctx.$slots), (item) => {
2942
- return {
2943
- name: item,
2944
- fn: withCtx((data) => [
2945
- renderSlot(_ctx.$slots, item, normalizeProps(guardReactiveProps(data || {})))
2946
- ])
2947
- };
2948
- })
2949
- ]), 1032, ["buttons", "showSave", "showCancel", "okText", "cancelText"])
2950
- ]),
2951
- key: "2"
2952
- } : void 0,
2953
- renderList(Object.keys(unref(omit)(_ctx.$slots, "default")), (item) => {
2954
- return {
2955
- name: item,
2956
- fn: withCtx((data) => [
2957
- renderSlot(_ctx.$slots, item, normalizeProps(guardReactiveProps(data || {})))
2958
- ])
2959
- };
2960
- })
2961
- ]), 1040);
2962
- };
2963
- }
2964
- });
1
+ import { defineComponent, toRaw, openBlock, createBlock, unref, withCtx, renderSlot, ref, h, createVNode, mergeProps, nextTick } from "vue";
2
+ import { useForm, DtForm } from "../form";
3
+ import { useModal, DtModal, useModalOut } from "../modal";
4
+ import { omit } from "lodash-es";
5
+ import { useMessage, useI18n, isFunction, dispatchResize, error } from "@dt-frames/core";
2965
6
  const basicProps = {
2966
7
  title: {
2967
8
  type: Object
@@ -3034,7 +75,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
3034
75
  props?.onSave();
3035
76
  }
3036
77
  return (_ctx, _cache) => {
3037
- return openBlock(), createBlock(unref(_sfc_main$1), {
78
+ return openBlock(), createBlock(unref(DtModal), {
3038
79
  onRegister: unref(registerDialog),
3039
80
  onSave: _cache[0] || (_cache[0] = ($event) => handleSave())
3040
81
  }, {
@@ -3077,7 +118,7 @@ function useCurd(curdOpt) {
3077
118
  "title": title,
3078
119
  "onRegister": register
3079
120
  }), {
3080
- default: () => [createVNode(_sfc_main$9, {
121
+ default: () => [createVNode(DtForm, {
3081
122
  "onRegister": registerForm
3082
123
  }, null)]
3083
124
  })]));