diff --git a/src/components/FormCreate/index.ts b/src/components/FormCreate/index.ts index 66fc7e6f..9da34889 100644 --- a/src/components/FormCreate/index.ts +++ b/src/components/FormCreate/index.ts @@ -1,4 +1,4 @@ import { useFormCreateDesigner } from './src/useFormCreateDesigner' -import CurrencySelect from './src/CurrencySelect/index.vue' +import { useCurrencySelect } from './src/components/useCurrencySelect' -export { useFormCreateDesigner, CurrencySelect } +export { useFormCreateDesigner, useCurrencySelect } diff --git a/src/components/FormCreate/src/CurrencySelect/index.vue b/src/components/FormCreate/src/CurrencySelect/index.vue deleted file mode 100644 index 3591a935..00000000 --- a/src/components/FormCreate/src/CurrencySelect/index.vue +++ /dev/null @@ -1,53 +0,0 @@ - - - diff --git a/src/components/FormCreate/src/components/useCurrencySelect.tsx b/src/components/FormCreate/src/components/useCurrencySelect.tsx new file mode 100644 index 00000000..ae9636a3 --- /dev/null +++ b/src/components/FormCreate/src/components/useCurrencySelect.tsx @@ -0,0 +1,59 @@ +import request from '@/config/axios' +import { isEmpty } from '@/utils/is' +import { CurrencySelectProps } from '@/components/FormCreate/src/type' + +export const useCurrencySelect = (option: CurrencySelectProps) => { + return defineComponent({ + name: option.name, + props: { + // 字典类型 + labelField: { + type: String, + default: () => option.labelField ?? '' + }, + // 字典值类型 + valueField: { + type: String, + default: () => option.valueField ?? '' + }, + // api 接口 + restful: { + type: String, + default: () => option.restful ?? '' + } + }, + setup(props) { + const attrs = useAttrs() + const options = ref([]) // 下拉数据 + const getOptions = async () => { + options.value = [] + if (isEmpty(props.restful)) { + return + } + // TODO 只支持 GET 查询，复杂下拉构建条件请使用业务表单 + const data = await request.get({ url: props.restful }) + if (Array.isArray(data)) { + options.value = data.map((item: any) => ({ + label: item[props.labelField], + value: item[props.valueField] + })) + return + } + console.log(`接口[${props.restful}] 返回结果不是一个数组`) + } + + onMounted(async () => { + await getOptions() + }) + return () => ( + <> + + {options.value.map((item, index) => ( + + ))} + + + ) + } + }) +} diff --git a/src/components/FormCreate/src/config/index.ts b/src/components/FormCreate/src/config/index.ts index 078bc803..c34d831a 100644 --- a/src/components/FormCreate/src/config/index.ts +++ b/src/components/FormCreate/src/config/index.ts @@ -4,6 +4,8 @@ import { useUploadImgsRule } from './useUploadImgsRule' import { useDictSelectRule } from './useDictSelectRule' import { useCurrencySelectRule } from './useCurrencySelectRule' import { useEditorRule } from './useEditorRule' +import { useUserSelectRule } from './useUserSelectRule' +import { useDeptSelectRule } from './useDeptSelectRule' export { useUploadFileRule, @@ -11,5 +13,7 @@ export { useUploadImgsRule, useDictSelectRule, useCurrencySelectRule, - useEditorRule + useEditorRule, + useUserSelectRule, + useDeptSelectRule } diff --git a/src/components/FormCreate/src/config/useCurrencySelectRule.ts b/src/components/FormCreate/src/config/useCurrencySelectRule.ts index 7a7b2031..3ac65a66 100644 --- a/src/components/FormCreate/src/config/useCurrencySelectRule.ts +++ b/src/components/FormCreate/src/config/useCurrencySelectRule.ts @@ -1,8 +1,9 @@ import { generateUUID } from '@/utils' import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils' import selectRule from '@/components/FormCreate/src/config/selectRule' +import { DragRule } from '@/components/FormCreate/src/type' -export const useCurrencySelectRule = () => { +export const useCurrencySelectRule = (): DragRule => { const label = '通用选择器' const name = 'CurrencySelect' return { diff --git a/src/components/FormCreate/src/config/useDeptSelectRule.ts b/src/components/FormCreate/src/config/useDeptSelectRule.ts new file mode 100644 index 00000000..e46165c1 --- /dev/null +++ b/src/components/FormCreate/src/config/useDeptSelectRule.ts @@ -0,0 +1,26 @@ +import { generateUUID } from '@/utils' +import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils' +import selectRule from '@/components/FormCreate/src/config/selectRule' +import { DragRule } from '@/components/FormCreate/src/type' + +export const useDeptSelectRule = (): DragRule => { + const label = '部门选择器' + const name = 'DeptSelect' + return { + icon: 'icon-select', + label, + name, + rule() { + return { + type: name, + field: generateUUID(), + title: label, + info: '', + $required: false + } + }, + props(_, { t }) { + return localeProps(t, name + '.props', [makeRequiredRule(), ...selectRule]) + } + } +} diff --git a/src/components/FormCreate/src/config/useUserSelectRule.ts b/src/components/FormCreate/src/config/useUserSelectRule.ts new file mode 100644 index 00000000..ff5bc869 --- /dev/null +++ b/src/components/FormCreate/src/config/useUserSelectRule.ts @@ -0,0 +1,26 @@ +import { generateUUID } from '@/utils' +import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils' +import selectRule from '@/components/FormCreate/src/config/selectRule' +import { DragRule } from '@/components/FormCreate/src/type' + +export const useUserSelectRule = (): DragRule => { + const label = '用户选择器' + const name = 'UserSelect' + return { + icon: 'icon-select', + label, + name, + rule() { + return { + type: name, + field: generateUUID(), + title: label, + info: '', + $required: false + } + }, + props(_, { t }) { + return localeProps(t, name + '.props', [makeRequiredRule(), ...selectRule]) + } + } +} diff --git a/src/components/FormCreate/src/type/index.ts b/src/components/FormCreate/src/type/index.ts new file mode 100644 index 00000000..38205073 --- /dev/null +++ b/src/components/FormCreate/src/type/index.ts @@ -0,0 +1,41 @@ +import { Rule } from '@form-create/element-ui' //左侧拖拽按钮 + +//左侧拖拽按钮 +export interface MenuItem { + label: string + name: string + icon: string +} + +//左侧拖拽按钮分类 +export interface Menu { + title: string + name: string + list: MenuItem[] +} + +export interface MenuList extends Array {} + +//拖拽组件的规则 +export interface DragRule { + icon: string + name: string + label: string + children?: string + inside?: true + drag?: true | String + dragBtn?: false + mask?: false + + rule(): Rule + + props(v: any, v1: any): Rule[] +} + +// 通用下拉组件 Props 类型 +export interface CurrencySelectProps { + name: string // 组件名称 + labelField?: string // 字典类型 + valueField?: string // 字典值类型 + restful?: string // api 接口 +} diff --git a/src/components/FormCreate/src/useFormCreateDesigner.ts b/src/components/FormCreate/src/useFormCreateDesigner.ts index 81a595cc..1601b1c4 100644 --- a/src/components/FormCreate/src/useFormCreateDesigner.ts +++ b/src/components/FormCreate/src/useFormCreateDesigner.ts @@ -1,12 +1,15 @@ import { useCurrencySelectRule, + useDeptSelectRule, useDictSelectRule, useEditorRule, useUploadFileRule, useUploadImgRule, - useUploadImgsRule + useUploadImgsRule, + useUserSelectRule } from './config' import { Ref } from 'vue' +import { Menu } from '@/components/FormCreate/src/type' /** * 表单设计器增强 hook @@ -26,7 +29,10 @@ export const useFormCreateDesigner = (designer: Ref) => { const dictSelectRule = useDictSelectRule() const currencySelectRule = useCurrencySelectRule() - onMounted(() => { + /** + * 构建表单组件 + */ + const buildFormComponents = () => { // 移除自带的上传组件规则，使用 uploadFileRule、uploadImgRule、uploadImgsRule 替代 designer.value?.removeMenuItem('upload') // 移除自带的富文本组件规则，使用 editorRule 替代 @@ -51,5 +57,35 @@ export const useFormCreateDesigner = (designer: Ref) => { label: component.label }) }) + } + + const userSelectRule = useUserSelectRule() + const deptSelectRule = useDeptSelectRule() + /** + * 构建系统字段菜单 + */ + const buildSystemMenu = () => { + const components = [userSelectRule, deptSelectRule] + const menu: Menu = { + name: 'system', + title: '系统字段', + list: components.map((component) => { + // 插入组件规则 + designer.value?.addComponent(component) + // 插入拖拽按钮到 `system` 分类下 + return { + icon: component.icon, + name: component.name, + label: component.label + } + }) + } + designer.value?.addMenu(menu) + } + + onMounted(async () => { + await nextTick() + buildFormComponents() + buildSystemMenu() }) } diff --git a/src/plugins/formCreate/index.ts b/src/plugins/formCreate/index.ts index 39be7946..da74a7bf 100644 --- a/src/plugins/formCreate/index.ts +++ b/src/plugins/formCreate/index.ts @@ -20,9 +20,22 @@ import install from '@form-create/element-ui/auto-import' //======================= 自定义组件 ======================= import { UploadFile, UploadImg, UploadImgs } from '@/components/UploadFile' import { DictSelect } from '@/components/DictSelect' -import { CurrencySelect } from '@/components/FormCreate' +import { useCurrencySelect } from '@/components/FormCreate' import { Editor } from '@/components/Editor' +const UserSelect = useCurrencySelect({ + name: 'UserSelect', + labelField: 'nickname', + valueField: 'id', + restful: '/system/user/simple-list' +}) +const DeptSelect = useCurrencySelect({ + name: 'DeptSelect', + labelField: 'name', + valueField: 'id', + restful: '/system/dept/simple-list' +}) + const components = [ ElAside, ElPopconfirm, @@ -40,7 +53,8 @@ const components = [ UploadImgs, UploadFile, DictSelect, - CurrencySelect, + UserSelect, + DeptSelect, Editor ] diff --git a/src/views/infra/build/index.vue b/src/views/infra/build/index.vue index 9cee56f0..571acffe 100644 --- a/src/views/infra/build/index.vue +++ b/src/views/infra/build/index.vue @@ -8,11 +8,9 @@ 生成组件 - - - - + +