feat: form create

apps/web-antd/src/views/bpm/form/modules/detail.vue

@@ -6,7 +6,7 @@ import { useVbenModal } from '@vben/common-ui';
 import FormCreate from '@form-create/ant-design-vue';
 
 import { getFormDetail } from '#/api/bpm/form';
-import { setConfAndFields2 } from '#/utils';
+import { setConfAndFields2 } from '#/components/form-create';
 
 /** 详情 */
 const formConfig = ref<any>({});

apps/web-antd/src/views/bpm/model/form/modules/form-design.vue

@@ -22,7 +22,7 @@ import {
 } from 'ant-design-vue';
 
 import { getFormDetail } from '#/api/bpm/form';
-import { setConfAndFields2 } from '#/utils';
+import { setConfAndFields2 } from '#/components/form-create';
 
 const props = defineProps({
   formList: {

apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue

@@ -22,8 +22,8 @@ import {
   createProcessInstance,
   getApprovalDetail as getApprovalDetailApi,
 } from '#/api/bpm/processInstance';
+import { decodeFields, setConfAndFields2 } from '#/components/form-create';
 import { router } from '#/router';
-import { decodeFields, setConfAndFields2 } from '#/utils';
 import ProcessInstanceSimpleViewer from '#/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue';
 import ProcessInstanceTimeline from '#/views/bpm/processInstance/detail/modules/time-line.vue';
 

apps/web-antd/src/views/bpm/processInstance/detail/index.vue

@@ -21,7 +21,8 @@ import {
 } from '#/api/bpm/processInstance';
 import { getSimpleUserList } from '#/api/system/user';
 import DictTag from '#/components/dict-tag/dict-tag.vue';
-import { registerComponent, setConfAndFields2 } from '#/utils';
+import { setConfAndFields2 } from '#/components/form-create';
+import { registerComponent } from '#/utils';
 import {
   SvgBpmApproveIcon,
   SvgBpmCancelIcon,

apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue

@@ -43,7 +43,7 @@ import {
 } from '#/api/bpm/processInstance';
 import * as TaskApi from '#/api/bpm/task';
 import * as UserApi from '#/api/system/user';
-import { setConfAndFields2 } from '#/utils';
+import { setConfAndFields2 } from '#/components/form-create';
 
 import Signature from './signature.vue';
 import ProcessInstanceTimeline from './time-line.vue';

apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue

@@ -14,7 +14,7 @@ import { Button } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getTaskListByProcessInstanceId } from '#/api/bpm/task';
-import { setConfAndFields2 } from '#/utils';
+import { setConfAndFields2 } from '#/components/form-create';
 
 defineOptions({
   name: 'BpmProcessInstanceTaskList',

apps/web-ele/src/components/form-create/helpers.ts

@@ -2,7 +2,7 @@ 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 { apiSelectRule } from '#/components/form-create/rules/data';
 
@@ -15,6 +15,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(JSON.parse(item));
+  });
+  return rule;
+}
+
+// 设置表单的 Conf 和 Fields，适用 FcDesigner 场景
+export function setConfAndFields(
+  designerRef: any,
+  conf: string,
+  fields: string | string[],
+) {
+  designerRef.value.setOption(JSON.parse(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 = JSON.parse(conf);
+  detailPreview.rule = decodeFields(fields);
+  if (value) {
+    detailPreview.value = value;
+  }
+}
+
 export function makeRequiredRule() {
   return {
     type: 'Required',
@@ -23,11 +76,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 +89,7 @@ export const localeProps = (
     }
     return rule;
   });
-};
+}
 
 /**
  * 解析表单组件的  field, title 等字段（递归，如果组件包含子组件）
@@ -45,11 +98,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 +132,7 @@ export const parseFormFields = (
       parseFormFields(rule, fields);
     });
   }
-};
+}
 
 /**
  * 表单设计器增强 hook
@@ -92,7 +145,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 +154,7 @@ export const useFormCreateDesigner = async (designer: Ref) => {
   /**
    * 构建表单组件
    */
-  const buildFormComponents = () => {
+  function buildFormComponents() {
     // 移除自带的上传组件规则，使用 uploadFileRule、uploadImgRule、uploadImgsRule 替代
     designer.value?.removeMenuItem('upload');
     // 移除自带的富文本组件规则，使用 editorRule 替代
@@ -122,7 +175,7 @@ export const useFormCreateDesigner = async (designer: Ref) => {
         label: component.label,
       });
     });
-  };
+  }
 
   const userSelectRule = useSelectRule({
     name: 'UserSelect',
@@ -146,7 +199,7 @@ export const useFormCreateDesigner = async (designer: Ref) => {
   /**
    * 构建系统字段菜单
    */
-  const buildSystemMenu = () => {
+  function buildSystemMenu() {
     // 移除自带的下拉选择器组件，使用 currencySelectRule 替代
     // designer.value?.removeMenuItem('select')
     // designer.value?.removeMenuItem('radio')
@@ -172,11 +225,11 @@ export const useFormCreateDesigner = async (designer: Ref) => {
       }),
     };
     designer.value?.addMenu(menu);
-  };
+  }
 
   onMounted(async () => {
     await nextTick();
     buildFormComponents();
     buildSystemMenu();
   });
-};
+}

apps/web-ele/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-ele/src/utils/formCreate.ts

@@ -1,64 +0,0 @@
-/**
- * 针对 https://github.com/xaboy/form-create-designer 封装的工具类
- */
-
-import { isRef } from 'vue';
-
-// 编码表单 Conf
-export function encodeConf(designerRef: object) {
-  // @ts-ignore designerRef.value is dynamically added by form-create-designer
-  return JSON.stringify(designerRef.value.getOption());
-}
-
-// 编码表单 Fields
-export function encodeFields(designerRef: object) {
-  // @ts-ignore designerRef.value is dynamically added by form-create-designer
-  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(JSON.parse(item));
-  });
-  return rule;
-}
-
-// 设置表单的 Conf 和 Fields，适用 FcDesigner 场景
-export function setConfAndFields(
-  designerRef: object,
-  conf: string,
-  fields: string,
-) {
-  // @ts-ignore designerRef.value is dynamically added by form-create-designer
-  designerRef.value.setOption(JSON.parse(conf));
-  // @ts-ignore designerRef.value is dynamically added by form-create-designer
-  designerRef.value.setRule(decodeFields(fields));
-}
-
-// 设置表单的 Conf 和 Fields，适用 form-create 场景
-export function setConfAndFields2(
-  detailPreview: object,
-  conf: string,
-  fields: string[],
-  value?: object,
-) {
-  if (isRef(detailPreview)) {
-    // @ts-ignore detailPreview.value is dynamically added by form-create-designer
-    detailPreview = detailPreview.value;
-  }
-  // @ts-ignore detailPreview properties are dynamically added by form-create-designer
-  detailPreview.option = JSON.parse(conf);
-  // @ts-ignore detailPreview properties are dynamically added by form-create-designer
-  detailPreview.rule = decodeFields(fields);
-  if (value) {
-    // @ts-ignore detailPreview properties are dynamically added by form-create-designer
-    detailPreview.value = value;
-  }
-}

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

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