1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
| import type { App } from 'vue'
| // 👇使用 form-create 需额外全局引入 element plus 组件
| import {
| // ElAutocomplete,
| // ElButton,
| // ElCascader,
| // ElCheckbox,
| // ElCheckboxButton,
| // ElCheckboxGroup,
| // ElCol,
| // ElColorPicker,
| // ElDatePicker,
| // ElDialog,
| // ElForm,
| // ElInput,
| // ElInputNumber,
| // ElPopover,
| // ElRadio,
| // ElRadioButton,
| // ElRadioGroup,
| // ElRate,
| // ElRow,
| // ElSelect,
| // ElSlider,
| // ElSwitch,
| // ElTimePicker,
| // ElTooltip,
| // ElTree,
| // ElUpload,
| // ElIcon,
| // ElProgress,
| // 以上会由 @form-create/element-ui/auto-import 自动引入
| ElAlert,
| ElTransfer,
| ElAside,
| ElContainer,
| ElDivider,
| ElHeader,
| ElMain,
| ElPopconfirm,
| ElTable,
| ElTableColumn,
| ElTabPane,
| ElTabs,
| ElDropdown,
| ElDropdownMenu,
| ElDropdownItem,
| ElBadge,
| ElTag,
| ElText,
| ElMenu,
| ElMenuItem,
| ElFooter,
| ElMessage
| // ElFormItem,
| // ElOption
| } from 'element-plus'
| import FcDesigner from '@form-create/designer'
| import formCreate from '@form-create/element-ui'
| import install from '@form-create/element-ui/auto-import'
|
| //======================= 自定义组件 =======================
| import { UploadFile, UploadImg, UploadImgs } from '@/components/UploadFile'
| import { useApiSelect } from '@/components/FormCreate'
| import { Editor } from '@/components/Editor'
| import DictSelect from '@/components/FormCreate/src/components/DictSelect.vue'
|
| const UserSelect = useApiSelect({
| name: 'UserSelect',
| labelField: 'nickname',
| valueField: 'id',
| url: '/system/user/simple-list'
| })
| const DeptSelect = useApiSelect({
| name: 'DeptSelect',
| labelField: 'name',
| valueField: 'id',
| url: '/system/dept/simple-list'
| })
| const ApiSelect = useApiSelect({
| name: 'ApiSelect'
| })
|
| const components = [
| ElAlert,
| ElTransfer,
| ElAside,
| ElContainer,
| ElDivider,
| ElHeader,
| ElMain,
| ElPopconfirm,
| ElTable,
| ElTableColumn,
| ElTabPane,
| ElTabs,
| ElDropdown,
| ElDropdownMenu,
| ElDropdownItem,
| ElBadge,
| ElTag,
| ElText,
| ElMenu,
| ElMenuItem,
| ElFooter,
| ElMessage,
| // ElFormItem,
| // ElOption,
| UploadImg,
| UploadImgs,
| UploadFile,
| DictSelect,
| UserSelect,
| DeptSelect,
| ApiSelect,
| Editor
| ]
|
| // 参考 http://www.form-create.com/v3/element-ui/auto-import.html 文档
| export const setupFormCreate = (app: App<Element>) => {
| components.forEach((component) => {
| app.component(component.name, component)
| })
| formCreate.use(install)
| app.use(formCreate)
| app.use(FcDesigner)
| }
|
|