diff --git a/apps/web-antd/src/components/form-create/components/use-api-select.tsx b/apps/web-antd/src/components/form-create/components/use-api-select.tsx index 74f33fe0f..6d728715e 100644 --- a/apps/web-antd/src/components/form-create/components/use-api-select.tsx +++ b/apps/web-antd/src/components/form-create/components/use-api-select.tsx @@ -15,7 +15,7 @@ import { import { requestClient } from '#/api/request'; -export const useApiSelect = (option: ApiSelectProps) => { +export function useApiSelect(option: ApiSelectProps) { return defineComponent({ name: option.name, props: { @@ -317,4 +317,4 @@ export const useApiSelect = (option: ApiSelectProps) => { ); }, }); -}; +} diff --git a/apps/web-antd/src/components/form-create/components/use-images-upload.tsx b/apps/web-antd/src/components/form-create/components/use-images-upload.tsx index 4e821c6c6..5082283ef 100644 --- a/apps/web-antd/src/components/form-create/components/use-images-upload.tsx +++ b/apps/web-antd/src/components/form-create/components/use-images-upload.tsx @@ -2,7 +2,7 @@ import { defineComponent } from 'vue'; import ImageUpload from '#/components/upload/image-upload.vue'; -export const useImagesUpload = () => { +export function useImagesUpload() { return defineComponent({ name: 'ImagesUpload', props: { @@ -22,4 +22,4 @@ export const useImagesUpload = () => { ); }, }); -}; +} diff --git a/apps/web-antd/src/components/form-create/helpers.ts b/apps/web-antd/src/components/form-create/helpers.ts index c647711c4..902efd665 100644 --- a/apps/web-antd/src/components/form-create/helpers.ts +++ b/apps/web-antd/src/components/form-create/helpers.ts @@ -2,7 +2,9 @@ import type { Ref } from 'vue'; import type { Menu } from '#/components/form-create/typing'; -import { nextTick, onMounted } from 'vue'; +import { isRef, nextTick, onMounted } from 'vue'; + +import formCreate from '@form-create/ant-design-vue'; import { apiSelectRule } from '#/components/form-create/rules/data'; @@ -15,6 +17,59 @@ import { useUploadImagesRule, } from './rules'; +// 编码表单 Conf +export function encodeConf(designerRef: any) { + return JSON.stringify(designerRef.value.getOption()); +} + +// 编码表单 Fields +export function encodeFields(designerRef: any) { + const rule = JSON.parse(designerRef.value.getJson()); + const fields: string[] = []; + rule.forEach((item: unknown) => { + fields.push(JSON.stringify(item)); + }); + return fields; +} + +// 解码表单 Fields +export function decodeFields(fields: string[]) { + const rule: object[] = []; + fields.forEach((item) => { + rule.push(formCreate.parseJson(item)); + }); + return rule; +} + +// 设置表单的 Conf 和 Fields,适用 FcDesigner 场景 +export function setConfAndFields( + designerRef: any, + conf: string, + fields: string | string[], +) { + designerRef.value.setOption(formCreate.parseJson(conf)); + // 处理 fields 参数类型,确保传入 decodeFields 的是 string[] 类型 + const fieldsArray = Array.isArray(fields) ? fields : [fields]; + designerRef.value.setRule(decodeFields(fieldsArray)); +} + +// 设置表单的 Conf 和 Fields,适用 form-create 场景 +export function setConfAndFields2( + detailPreview: any, + conf: string, + fields: string[], + value?: any, +) { + if (isRef(detailPreview)) { + detailPreview = detailPreview.value; + } + detailPreview.option = formCreate.parseJson(conf); + detailPreview.rule = decodeFields(fields); + if (value) { + detailPreview.value = value; + } +} + export function makeRequiredRule() { return { type: 'Required', @@ -23,11 +78,11 @@ export function makeRequiredRule() { }; } -export const localeProps = ( +export function localeProps( t: (msg: string) => any, prefix: string, rules: any[], -) => { +) { return rules.map((rule: { field: string; title: any }) => { if (rule.field === 'formCreate$required') { rule.title = t('props.required') || rule.title; @@ -36,7 +91,7 @@ export const localeProps = ( } return rule; }); -}; +} /** * 解析表单组件的 field, title 等字段(递归,如果组件包含子组件) @@ -45,11 +100,11 @@ export const localeProps = ( * @param fields 解析后表单组件字段 * @param parentTitle 如果是子表单,子表单的标题,默认为空 */ -export const parseFormFields = ( +export function parseFormFields( rule: Record, fields: Array> = [], parentTitle: string = '', -) => { +) { const { type, field, $required, title: tempTitle, children } = rule; if (field && tempTitle) { let title = tempTitle; @@ -79,7 +134,7 @@ export const parseFormFields = ( parseFormFields(rule, fields); }); } -}; +} /** * 表单设计器增强 hook @@ -92,7 +147,7 @@ export const parseFormFields = ( * - 部门选择器 * - 富文本 */ -export const useFormCreateDesigner = async (designer: Ref) => { +export async function useFormCreateDesigner(designer: Ref) { const editorRule = useEditorRule(); const uploadFileRule = useUploadFileRule(); const uploadImageRule = useUploadImageRule(); @@ -101,7 +156,7 @@ export const useFormCreateDesigner = async (designer: Ref) => { /** * 构建表单组件 */ - const buildFormComponents = () => { + function buildFormComponents() { // 移除自带的上传组件规则,使用 uploadFileRule、uploadImgRule、uploadImgsRule 替代 designer.value?.removeMenuItem('upload'); // 移除自带的富文本组件规则,使用 editorRule 替代 @@ -122,7 +177,7 @@ export const useFormCreateDesigner = async (designer: Ref) => { label: component.label, }); }); - }; + } const userSelectRule = useSelectRule({ name: 'UserSelect', @@ -146,7 +201,7 @@ export const useFormCreateDesigner = async (designer: Ref) => { /** * 构建系统字段菜单 */ - const buildSystemMenu = () => { + function buildSystemMenu() { // 移除自带的下拉选择器组件,使用 currencySelectRule 替代 // designer.value?.removeMenuItem('select') // designer.value?.removeMenuItem('radio') @@ -172,11 +227,11 @@ export const useFormCreateDesigner = async (designer: Ref) => { }), }; designer.value?.addMenu(menu); - }; + } onMounted(async () => { await nextTick(); buildFormComponents(); buildSystemMenu(); }); -}; +} diff --git a/apps/web-antd/src/components/form-create/index.ts b/apps/web-antd/src/components/form-create/index.ts index b311e79e6..2c512158d 100644 --- a/apps/web-antd/src/components/form-create/index.ts +++ b/apps/web-antd/src/components/form-create/index.ts @@ -1,3 +1,3 @@ export { useApiSelect } from './components/use-api-select'; -export { useFormCreateDesigner } from './helpers'; +export * from './helpers'; diff --git a/apps/web-antd/src/components/form-create/rules/use-dict-select.ts b/apps/web-antd/src/components/form-create/rules/use-dict-select.ts index 5f4271f13..0054cd41e 100644 --- a/apps/web-antd/src/components/form-create/rules/use-dict-select.ts +++ b/apps/web-antd/src/components/form-create/rules/use-dict-select.ts @@ -12,7 +12,7 @@ import { selectRule } from '#/components/form-create/rules/data'; /** * 字典选择器规则,如果规则使用到动态数据则需要单独配置不能使用 useSelectRule */ -export const useDictSelectRule = () => { +export function useDictSelectRule() { const label = '字典选择器'; const name = 'DictSelect'; const rules = cloneDeep(selectRule); @@ -67,4 +67,4 @@ export const useDictSelectRule = () => { ]); }, }; -}; +} diff --git a/apps/web-antd/src/components/form-create/rules/use-editor-rule.ts b/apps/web-antd/src/components/form-create/rules/use-editor-rule.ts index 556baf0a1..dcde682cb 100644 --- a/apps/web-antd/src/components/form-create/rules/use-editor-rule.ts +++ b/apps/web-antd/src/components/form-create/rules/use-editor-rule.ts @@ -5,7 +5,7 @@ import { makeRequiredRule, } from '#/components/form-create/helpers'; -export const useEditorRule = () => { +export function useEditorRule() { const label = '富文本'; const name = 'Tinymce'; return { @@ -33,4 +33,4 @@ export const useEditorRule = () => { ]); }, }; -}; +} diff --git a/apps/web-antd/src/components/form-create/rules/use-select-rule.ts b/apps/web-antd/src/components/form-create/rules/use-select-rule.ts index fd4213783..3efd8c9d5 100644 --- a/apps/web-antd/src/components/form-create/rules/use-select-rule.ts +++ b/apps/web-antd/src/components/form-create/rules/use-select-rule.ts @@ -13,7 +13,7 @@ import { selectRule } from '#/components/form-create/rules/data'; * * @param option 规则配置 */ -export const useSelectRule = (option: SelectRuleOption) => { +export function useSelectRule(option: SelectRuleOption) { const label = option.label; const name = option.name; const rules = cloneDeep(selectRule); @@ -42,4 +42,4 @@ export const useSelectRule = (option: SelectRuleOption) => { ]); }, }; -}; +} diff --git a/apps/web-antd/src/components/form-create/rules/use-upload-file-rule.ts b/apps/web-antd/src/components/form-create/rules/use-upload-file-rule.ts index 55f5bea33..add6c23bd 100644 --- a/apps/web-antd/src/components/form-create/rules/use-upload-file-rule.ts +++ b/apps/web-antd/src/components/form-create/rules/use-upload-file-rule.ts @@ -5,7 +5,7 @@ import { makeRequiredRule, } from '#/components/form-create/helpers'; -export const useUploadFileRule = () => { +export function useUploadFileRule() { const label = '文件上传'; const name = 'FileUpload'; return { @@ -81,4 +81,4 @@ export const useUploadFileRule = () => { ]); }, }; -}; +} diff --git a/apps/web-antd/src/components/form-create/rules/use-upload-image-rule.ts b/apps/web-antd/src/components/form-create/rules/use-upload-image-rule.ts index 70760b061..a62d74f82 100644 --- a/apps/web-antd/src/components/form-create/rules/use-upload-image-rule.ts +++ b/apps/web-antd/src/components/form-create/rules/use-upload-image-rule.ts @@ -5,7 +5,7 @@ import { makeRequiredRule, } from '#/components/form-create/helpers'; -export const useUploadImageRule = () => { +export function useUploadImageRule() { const label = '单图上传'; const name = 'ImageUpload'; return { @@ -90,4 +90,4 @@ export const useUploadImageRule = () => { ]); }, }; -}; +} diff --git a/apps/web-antd/src/components/form-create/rules/use-upload-images-rule.ts b/apps/web-antd/src/components/form-create/rules/use-upload-images-rule.ts index c18a7b49d..5d0a6fd0a 100644 --- a/apps/web-antd/src/components/form-create/rules/use-upload-images-rule.ts +++ b/apps/web-antd/src/components/form-create/rules/use-upload-images-rule.ts @@ -5,7 +5,7 @@ import { makeRequiredRule, } from '#/components/form-create/helpers'; -export const useUploadImagesRule = () => { +export function useUploadImagesRule() { const label = '多图上传'; const name = 'ImagesUpload'; return { @@ -86,4 +86,4 @@ export const useUploadImagesRule = () => { ]); }, }; -}; +} diff --git a/apps/web-antd/src/utils/formCreate.ts b/apps/web-antd/src/utils/formCreate.ts deleted file mode 100644 index 6192fa958..000000000 --- a/apps/web-antd/src/utils/formCreate.ts +++ /dev/null @@ -1,59 +0,0 @@ -/** - * 针对 https://github.com/xaboy/form-create-designer 封装的工具类 - */ -// TODO @芋艿:后续这些 form-create 的优化;另外需要使用 form-create-helper 会好点 -import { isRef } from 'vue'; - -import formCreate from '@form-create/ant-design-vue'; -// 编码表单 Conf -export function encodeConf(designerRef: any) { - return JSON.stringify(designerRef.value.getOption()); -} - -// 编码表单 Fields -export function encodeFields(designerRef: any) { - const rule = JSON.parse(designerRef.value.getJson()); - const fields: string[] = []; - rule.forEach((item: unknown) => { - fields.push(JSON.stringify(item)); - }); - return fields; -} - -// 解码表单 Fields -export function decodeFields(fields: string[]) { - const rule: object[] = []; - fields.forEach((item) => { - rule.push(formCreate.parseJson(item)); - }); - return rule; -} - -// 设置表单的 Conf 和 Fields,适用 FcDesigner 场景 -export function setConfAndFields( - designerRef: any, - conf: string, - fields: string | string[], -) { - designerRef.value.setOption(formCreate.parseJson(conf)); - // 处理 fields 参数类型,确保传入 decodeFields 的是 string[] 类型 - const fieldsArray = Array.isArray(fields) ? fields : [fields]; - designerRef.value.setRule(decodeFields(fieldsArray)); -} - -// 设置表单的 Conf 和 Fields,适用 form-create 场景 -export function setConfAndFields2( - detailPreview: any, - conf: string, - fields: string[], - value?: any, -) { - if (isRef(detailPreview)) { - detailPreview = detailPreview.value; - } - detailPreview.option = formCreate.parseJson(conf); - detailPreview.rule = decodeFields(fields); - if (value) { - detailPreview.value = value; - } -} diff --git a/apps/web-antd/src/utils/index.ts b/apps/web-antd/src/utils/index.ts index b1d2a146e..3a066fd4a 100644 --- a/apps/web-antd/src/utils/index.ts +++ b/apps/web-antd/src/utils/index.ts @@ -1,3 +1,2 @@ -export * from './formCreate'; export * from './rangePickerProps'; export * from './routerHelper'; diff --git a/apps/web-antd/src/views/bpm/form/modules/form.vue b/apps/web-antd/src/views/bpm/form/modules/form.vue index c46dff46d..5ff14b201 100644 --- a/apps/web-antd/src/views/bpm/form/modules/form.vue +++ b/apps/web-antd/src/views/bpm/form/modules/form.vue @@ -11,8 +11,8 @@ import { message } from 'ant-design-vue'; import { useVbenForm } from '#/adapter/form'; import { createForm, updateForm } from '#/api/bpm/form'; +import { encodeConf, encodeFields } from '#/components/form-create'; import { $t } from '#/locales'; -import { encodeConf, encodeFields } from '#/utils'; import { useFormSchema } from '../data';