smart-flow/yudao-ui-admin-vben
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: form create

Browse Source
This commit is contained in:
xingyu4j
2025-10-17 16:23:43 +08:00
parent 7704aef4c8
commit 1629003cdc
10 changed files with 74 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>({});

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

@@ -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: {

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

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

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

@@ -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,

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

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

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

@@ -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',

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

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

2
apps/web-ele/src/components/form-create/index.ts
View File

@@ -1,3 +1,3 @@
export { useApiSelect } from './components/use-api-select';
export { useFormCreateDesigner } from './helpers';
export * from './helpers';

64
apps/web-ele/src/utils/formCreate.ts
View File

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

1
apps/web-ele/src/utils/index.ts
View File

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