feat: form-create

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) => {
       );
     },
   });
-};
+}

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 = () => {
       );
     },
   });
-};
+}

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<string, any>,
   fields: Array<Record<string, any>> = [],
   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();
   });
-};
+}

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';

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 = () => {
       ]);
     },
   };
-};
+}

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 = () => {
       ]);
     },
   };
-};
+}

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) => {
       ]);
     },
   };
-};
+}

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 = () => {
       ]);
     },
   };
-};
+}

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 = () => {
       ]);
     },
   };
-};
+}

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 = () => {
       ]);
     },
   };
-};
+}

apps/web-antd/src/utils/formCreate.ts

@@ -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;
-  }
-}

apps/web-antd/src/utils/index.ts

@@ -1,3 +1,2 @@
-export * from './formCreate';
 export * from './rangePickerProps';
 export * from './routerHelper';

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';