yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

form-create: 封装通用选择器 hook

pull/435/head
puhui999 2024-05-01 20:42:53 +08:00
parent 1434d7ddad
commit c77526e8c5
2 changed files with 52 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/FormCreate/src/components/useCurrencySelect.tsx
View File

@ -37,6 +37,11 @@ export const useCurrencySelect = (option: CurrencySelectProps) => {
type: String,
default: 'select'
}
// // 是否多选
// multiple: {
// type: Boolean,
// default: false
// }
},
setup(props) {
const attrs = useAttrs()
@ -79,15 +84,14 @@ export const useCurrencySelect = (option: CurrencySelectProps) => {
onMounted(async () => {
await getOptions()
})
// TODO puhui999: 单下拉多选的时候页面会卡住报错，下次解决
const buildSelect = () => {
return (
<>
<el-select class="w-1/1" {...attrs}>
{options.value.map((item, index) => (
<el-option key={index} label={item.label} value={item.value} />
))}
</el-select>
</>
<el-select class="w-1/1" {...attrs}>
{options.value.map((item, index) => (
<el-option key={index} label={item.label} value={item.value} />
))}
</el-select>
)
}
const buildCheckbox = () => {
@ -98,13 +102,11 @@ export const useCurrencySelect = (option: CurrencySelectProps) => {
]
}
return (
<>
<el-checkbox-group class="w-1/1" {...attrs}>
{options.value.map((item, index) => (
<el-checkbox key={index} label={item.label} value={item.value} />
))}
</el-checkbox-group>
</>
<el-checkbox-group class="w-1/1" {...attrs}>
{options.value.map((item, index) => (
<el-checkbox key={index} label={item.label} value={item.value} />
))}
</el-checkbox-group>
)
}
const buildRadio = () => {
@ -115,15 +117,13 @@ export const useCurrencySelect = (option: CurrencySelectProps) => {
]
}
return (
<>
<el-radio-group class="w-1/1" {...attrs}>
{options.value.map((item, index) => (
<el-radio key={index} value={item.value}>
{item.label}
</el-radio>
))}
</el-radio-group>
</>
<el-radio-group class="w-1/1" {...attrs}>
{options.value.map((item, index) => (
<el-radio key={index} value={item.value}>
{item.label}
</el-radio>
))}
</el-radio-group>
)
}
return () => (

65
src/components/FormCreate/src/useFormCreateDesigner.ts
View File

@ -25,6 +25,30 @@ export const useFormCreateDesigner = async (designer: Ref) => {
const uploadFileRule = useUploadFileRule()
const uploadImgRule = useUploadImgRule()
const uploadImgsRule = useUploadImgsRule()
/**
* 构建表单组件
*/
const buildFormComponents = () => {
// 移除自带的上传组件规则，使用 uploadFileRule、uploadImgRule、uploadImgsRule 替代
designer.value?.removeMenuItem('upload')
// 移除自带的富文本组件规则，使用 editorRule 替代
designer.value?.removeMenuItem('fc-editor')
const components = [editorRule, uploadFileRule, uploadImgRule, uploadImgsRule]
components.forEach((component) => {
// 插入组件规则
designer.value?.addComponent(component)
// 插入拖拽按钮到 `main` 分类下
designer.value?.appendMenuItem('main', {
icon: component.icon,
name: component.name,
label: component.label
})
})
}
const userSelectRule = useSelectRule({ name: 'UserSelect', label: '用户选择器' })
const deptSelectRule = useSelectRule({ name: 'DeptSelect', label: '部门选择器' })
const dictSelectRule = useDictSelectRule()
const restfulSelectRule = useSelectRule({
name: 'RestfulSelect',
@ -56,46 +80,15 @@ export const useFormCreateDesigner = async (designer: Ref) => {
}
]
})
/**
* 构建表单组件
*/
const buildFormComponents = () => {
// 移除自带的上传组件规则，使用 uploadFileRule、uploadImgRule、uploadImgsRule 替代
designer.value?.removeMenuItem('upload')
// 移除自带的富文本组件规则，使用 editorRule 替代
designer.value?.removeMenuItem('fc-editor')
// 移除自带的下拉选择器组件，使用 currencySelectRule 替代
designer.value?.removeMenuItem('select')
designer.value?.removeMenuItem('radio')
designer.value?.removeMenuItem('checkbox')
const components = [
editorRule,
uploadFileRule,
uploadImgRule,
uploadImgsRule,
dictSelectRule,
restfulSelectRule
]
components.forEach((component) => {
// 插入组件规则
designer.value?.addComponent(component)
// 插入拖拽按钮到 `main` 分类下
designer.value?.appendMenuItem('main', {
icon: component.icon,
name: component.name,
label: component.label
})
})
}
const userSelectRule = useSelectRule({ name: 'UserSelect', label: '用户选择器' })
const deptSelectRule = useSelectRule({ name: 'DeptSelect', label: '部门选择器' })
/**
* 构建系统字段菜单
*/
const buildSystemMenu = () => {
const components = [userSelectRule, deptSelectRule]
// 移除自带的下拉选择器组件，使用 currencySelectRule 替代
designer.value?.removeMenuItem('select')
designer.value?.removeMenuItem('radio')
designer.value?.removeMenuItem('checkbox')
const components = [userSelectRule, deptSelectRule, dictSelectRule, restfulSelectRule]
const menu: Menu = {
name: 'system',
title: '系统字段',