Skip to content

Commit 5ca3358

Browse files
YunaiVgitee-org
YunaiV
authored and
gitee-org
committed
!412 使用项目组件对 form-create-designer 进行增强
Merge pull request !412 from puhui999/dev-crm
2 parents 6764f86 + a489d21 commit 5ca3358

File tree

15 files changed

+371
-75
lines changed

15 files changed

+371
-75
lines changed

‎src/components/FormCreate/index.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1-
import MyFormCreate from './src/MyFormCreate.vue'
1+
import MyFormCreateDesigner from './src/MyFormCreateDesigner.vue'
2+
import { useFormCreateDesigner } from './src/useFormCreateDesigner'
23

3-
export { MyFormCreate }
4+
export { MyFormCreateDesigner, useFormCreateDesigner }

‎src/components/FormCreate/src/MyFormCreate.vue

Lines changed: 0 additions & 54 deletions
This file was deleted.

‎src/components/FormCreate/src/MyFormCreateDesigner.vue

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!-- TODO puhui999: 没啥问题的话准备移除 -->
2+
<template>
3+
<FcDesigner ref="designer" height="780px" />
4+
</template>
5+
6+
<script lang="ts" setup>
7+
import { useUploadFileRule, useUploadImgRule, useUploadImgsRule } from './config'
8+
9+
defineOptions({ name: 'MyFormCreateDesigner' })
10+
11+
const designer = ref() // 表单设计器
12+
const uploadFileRule = useUploadFileRule()
13+
const uploadImgRule = useUploadImgRule()
14+
const uploadImgsRule = useUploadImgsRule()
15+
16+
onMounted(() => {
17+
// 移除自带的上传组件规则
18+
designer.value?.removeMenuItem('upload')
19+
const components = [uploadFileRule, uploadImgRule, uploadImgsRule]
20+
components.forEach((component) => {
21+
//插入组件规则
22+
designer.value?.addComponent(component)
23+
//插入拖拽按钮到`main`分类下
24+
designer.value?.appendMenuItem('main', {
25+
icon: component.icon,
26+
name: component.name,
27+
label: component.label
28+
})
29+
})
30+
})
31+
</script>
32+
33+
<style lang="scss" scoped></style>

‎src/components/FormCreate/src/config/index.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { useUploadFileRule } from './useUploadFileRule'
2+
import { useUploadImgRule } from './useUploadImgRule'
3+
import { useUploadImgsRule } from './useUploadImgsRule'
4+
5+
export { useUploadFileRule, useUploadImgRule, useUploadImgsRule }

‎src/components/FormCreate/src/config/useUploadFileRule.ts

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { generateUUID } from '@/utils'
2+
import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
3+
4+
export const useUploadFileRule = () => {
5+
const label = '文件上传'
6+
const name = 'UploadFile'
7+
return {
8+
icon: 'icon-upload',
9+
label,
10+
name,
11+
rule() {
12+
return {
13+
type: name,
14+
field: generateUUID(),
15+
title: label,
16+
info: '',
17+
$required: false
18+
}
19+
},
20+
props(_, { t }) {
21+
return localeProps(t, name + '.props', [
22+
makeRequiredRule(),
23+
{
24+
type: 'select',
25+
field: 'fileType',
26+
title: '文件类型',
27+
value: ['doc', 'xls', 'ppt', 'txt', 'pdf'],
28+
options: [
29+
{ label: 'doc', value: 'doc' },
30+
{ label: 'xls', value: 'xls' },
31+
{ label: 'ppt', value: 'ppt' },
32+
{ label: 'txt', value: 'txt' },
33+
{ label: 'pdf', value: 'pdf' }
34+
],
35+
props: {
36+
multiple: true
37+
}
38+
},
39+
{
40+
type: 'switch',
41+
field: 'autoUpload',
42+
title: '是否在选取文件后立即进行上传',
43+
value: true
44+
},
45+
{
46+
type: 'switch',
47+
field: 'drag',
48+
title: '拖拽上传',
49+
value: false
50+
},
51+
{
52+
type: 'switch',
53+
field: 'isShowTip',
54+
title: '是否显示提示',
55+
value: true
56+
},
57+
{
58+
type: 'inputNumber',
59+
field: 'fileSize',
60+
title: '大小限制(MB)',
61+
value: 5,
62+
props: { min: 0 }
63+
},
64+
{
65+
type: 'inputNumber',
66+
field: 'limit',
67+
title: '数量限制',
68+
value: 5,
69+
props: { min: 0 }
70+
},
71+
{
72+
type: 'switch',
73+
field: 'disabled',
74+
title: '是否禁用',
75+
value: false
76+
}
77+
])
78+
}
79+
}
80+
}

‎src/components/FormCreate/src/config/useUploadImgRule.ts

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import { generateUUID } from '@/utils'
2+
import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
3+
4+
export const useUploadImgRule = () => {
5+
const label = '单图上传'
6+
const name = 'UploadImg'
7+
return {
8+
icon: 'icon-upload',
9+
label,
10+
name,
11+
rule() {
12+
return {
13+
type: name,
14+
field: generateUUID(),
15+
title: label,
16+
info: '',
17+
$required: false
18+
}
19+
},
20+
props(_, { t }) {
21+
return localeProps(t, name + '.props', [
22+
makeRequiredRule(),
23+
{
24+
type: 'switch',
25+
field: 'drag',
26+
title: '拖拽上传',
27+
value: false
28+
},
29+
{
30+
type: 'select',
31+
field: 'fileType',
32+
title: '图片类型限制',
33+
value: ['image/jpeg', 'image/png', 'image/gif'],
34+
options: [
35+
{ label: 'image/apng', value: 'image/apng' },
36+
{ label: 'image/bmp', value: 'image/bmp' },
37+
{ label: 'image/gif', value: 'image/gif' },
38+
{ label: 'image/jpeg', value: 'image/jpeg' },
39+
{ label: 'image/pjpeg', value: 'image/pjpeg' },
40+
{ label: 'image/svg+xml', value: 'image/svg+xml' },
41+
{ label: 'image/tiff', value: 'image/tiff' },
42+
{ label: 'image/webp', value: 'image/webp' },
43+
{ label: 'image/x-icon', value: 'image/x-icon' }
44+
],
45+
props: {
46+
multiple: true
47+
}
48+
},
49+
{
50+
type: 'inputNumber',
51+
field: 'fileSize',
52+
title: '大小限制(MB)',
53+
value: 5,
54+
props: { min: 0 }
55+
},
56+
{
57+
type: 'input',
58+
field: 'height',
59+
title: '组件高度',
60+
value: '150px'
61+
},
62+
{
63+
type: 'input',
64+
field: 'width',
65+
title: '组件宽度',
66+
value: '150px'
67+
},
68+
{
69+
type: 'input',
70+
field: 'borderradius',
71+
title: '组件边框圆角',
72+
value: '8px'
73+
},
74+
{
75+
type: 'switch',
76+
field: 'disabled',
77+
title: '是否显示删除按钮',
78+
value: true
79+
},
80+
{
81+
type: 'switch',
82+
field: 'showBtnText',
83+
title: '是否显示按钮文字',
84+
value: true
85+
}
86+
])
87+
}
88+
}
89+
}

‎src/components/FormCreate/src/config/useUploadImgsRule.ts

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { generateUUID } from '@/utils'
2+
import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
3+
4+
export const useUploadImgsRule = () => {
5+
const label = '多图上传'
6+
const name = 'UploadImgs'
7+
return {
8+
icon: 'icon-upload',
9+
label,
10+
name,
11+
rule() {
12+
return {
13+
type: name,
14+
field: generateUUID(),
15+
title: label,
16+
info: '',
17+
$required: false
18+
}
19+
},
20+
props(_, { t }) {
21+
return localeProps(t, name + '.props', [
22+
makeRequiredRule(),
23+
{
24+
type: 'switch',
25+
field: 'drag',
26+
title: '拖拽上传',
27+
value: false
28+
},
29+
{
30+
type: 'select',
31+
field: 'fileType',
32+
title: '图片类型限制',
33+
value: ['image/jpeg', 'image/png', 'image/gif'],
34+
options: [
35+
{ label: 'image/apng', value: 'image/apng' },
36+
{ label: 'image/bmp', value: 'image/bmp' },
37+
{ label: 'image/gif', value: 'image/gif' },
38+
{ label: 'image/jpeg', value: 'image/jpeg' },
39+
{ label: 'image/pjpeg', value: 'image/pjpeg' },
40+
{ label: 'image/svg+xml', value: 'image/svg+xml' },
41+
{ label: 'image/tiff', value: 'image/tiff' },
42+
{ label: 'image/webp', value: 'image/webp' },
43+
{ label: 'image/x-icon', value: 'image/x-icon' }
44+
],
45+
props: {
46+
multiple: true
47+
}
48+
},
49+
{
50+
type: 'inputNumber',
51+
field: 'fileSize',
52+
title: '大小限制(MB)',
53+
value: 5,
54+
props: { min: 0 }
55+
},
56+
{
57+
type: 'inputNumber',
58+
field: 'limit',
59+
title: '数量限制',
60+
value: 5,
61+
props: { min: 0 }
62+
},
63+
{
64+
type: 'input',
65+
field: 'height',
66+
title: '组件高度',
67+
value: '150px'
68+
},
69+
{
70+
type: 'input',
71+
field: 'width',
72+
title: '组件宽度',
73+
value: '150px'
74+
},
75+
{
76+
type: 'input',
77+
field: 'borderradius',
78+
title: '组件边框圆角',
79+
value: '8px'
80+
}
81+
])
82+
}
83+
}
84+
}

‎src/components/FormCreate/src/useFormCreateDesigner.ts

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { useUploadFileRule, useUploadImgRule, useUploadImgsRule } from './config'
2+
import { Ref } from 'vue'
3+
4+
/**
5+
* 表单设计器增强 hook
6+
* 新增
7+
* - 文件上传
8+
* - 单图上传
9+
* - 多图上传
10+
*/
11+
export const useFormCreateDesigner = (designer: Ref) => {
12+
const uploadFileRule = useUploadFileRule()
13+
const uploadImgRule = useUploadImgRule()
14+
const uploadImgsRule = useUploadImgsRule()
15+
16+
onMounted(() => {
17+
// 移除自带的上传组件规则
18+
designer.value?.removeMenuItem('upload')
19+
const components = [uploadFileRule, uploadImgRule, uploadImgsRule]
20+
components.forEach((component) => {
21+
//插入组件规则
22+
designer.value?.addComponent(component)
23+
//插入拖拽按钮到`main`分类下
24+
designer.value?.appendMenuItem('main', {
25+
icon: component.icon,
26+
name: component.name,
27+
label: component.label
28+
})
29+
})
30+
})
31+
}

0 commit comments

Comments
 (0)