feat: 表单回调函数支持直接传入函数，增加一个扩展参数可以直接操控全表单字段的状态
This commit is contained in:
gaoyunqi
@ -1,29 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<Form
|
||||
ref="formRef"
|
||||
:model="formModel"
|
||||
:layout="getProps?.layout"
|
||||
:label-col="getProps?.labelCol"
|
||||
:wrapper-col="getProps?.wrapperCol"
|
||||
:labelAlign="getProps?.labelAlign"
|
||||
@keypress.enter="handleEnterPress"
|
||||
>
|
||||
<Form ref="formRef" :label-col="getProps?.labelCol" :labelAlign="getProps?.labelAlign" :layout="getProps?.layout" :model="formModel" :wrapper-col="getProps?.wrapperCol" @keypress.enter="handleEnterPress">
|
||||
<Row v-bind="getRow">
|
||||
<template v-for="schema in getSchemas" :key="schema.field">
|
||||
<Col
|
||||
:span="schema.colProps?.span"
|
||||
v-show="getIsShow(schema, formModel[schema.field])"
|
||||
v-if="getIfShow(schema, formModel[schema.field])"
|
||||
>
|
||||
<Col v-if="getIfShow(schema, formModel[schema.field])" v-show="getIsShow(schema, formModel[schema.field])" :span="schema.colProps?.span">
|
||||
<template v-if="showComponent(schema)">
|
||||
<SimpleFormItem
|
||||
:refreshFieldObj="refreshFieldObj"
|
||||
:schema="schema"
|
||||
:form-api="formApi"
|
||||
:isWorkFlow="isWorkFlow"
|
||||
v-model:value="formModel[schema.field]"
|
||||
/>
|
||||
<SimpleFormItem v-model:value="formModel[schema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schema" />
|
||||
</template>
|
||||
</Col>
|
||||
</template>
|
||||
@ -32,10 +14,10 @@
|
||||
<div :style="{ textAlign: getProps.buttonLocation }">
|
||||
<slot name="buttonBefore"></slot>
|
||||
|
||||
<a-button type="primary" v-if="getProps.showSubmitButton" @click="handleSubmit">
|
||||
<a-button v-if="getProps.showSubmitButton" type="primary" @click="handleSubmit">
|
||||
{{ t('提交') }}
|
||||
</a-button>
|
||||
<a-button style="margin-left: 10px" v-if="getProps.showResetButton" @click="handleReset">
|
||||
<a-button v-if="getProps.showResetButton" style="margin-left: 10px" @click="handleReset">
|
||||
{{ t('重置') }}
|
||||
</a-button>
|
||||
<slot name="buttonAfter"></slot>
|
||||
@ -45,49 +27,12 @@
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { Form, FormInstance, Row, Col, Modal, message } from 'ant-design-vue';
|
||||
import {
|
||||
cloneDeep,
|
||||
isArray,
|
||||
isBoolean,
|
||||
isFunction,
|
||||
isObject,
|
||||
isString,
|
||||
uniqBy,
|
||||
isNil,
|
||||
} from 'lodash-es';
|
||||
import {
|
||||
computed,
|
||||
reactive,
|
||||
ref,
|
||||
provide,
|
||||
unref,
|
||||
nextTick,
|
||||
toRaw,
|
||||
createVNode,
|
||||
inject,
|
||||
onMounted,
|
||||
} from 'vue';
|
||||
import {
|
||||
CardComponentProps,
|
||||
FormActionType,
|
||||
FormProps,
|
||||
FormSchema,
|
||||
GridComponentProps,
|
||||
TabComponentProps,
|
||||
regTestProps,
|
||||
requestProps,
|
||||
} from '../../Form/src/types/form';
|
||||
import { cloneDeep, isArray, isBoolean, isFunction, isObject, isString, uniqBy, isNil } from 'lodash-es';
|
||||
import { computed, reactive, ref, provide, unref, nextTick, toRaw, createVNode, inject, onMounted } from 'vue';
|
||||
import { CardComponentProps, FormActionType, FormProps, FormSchema, GridComponentProps, TabComponentProps, regTestProps, requestProps } from '../../Form/src/types/form';
|
||||
import SimpleFormItem from './components/SimpleFormItem.vue';
|
||||
import { NamePath, ValidateOptions } from 'ant-design-vue/lib/form/interface';
|
||||
import {
|
||||
arrayValueComponents,
|
||||
defaultValueComponents,
|
||||
staticDataComponents,
|
||||
noFieldComponent,
|
||||
noDefaultValueComponents,
|
||||
noShowWorkFlowComponents,
|
||||
noShowGenerateComponents,
|
||||
} from '../../Form/src/helper';
|
||||
import { arrayValueComponents, defaultValueComponents, staticDataComponents, noFieldComponent, noDefaultValueComponents, noShowWorkFlowComponents, noShowGenerateComponents } from '../../Form/src/helper';
|
||||
import { deepMerge } from '/@/utils';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { ModalFuncProps } from 'ant-design-vue/lib/modal/Modal';
|
||||
@ -96,6 +41,7 @@
|
||||
import { needDicDefaultValue } from '../../Designer/src/types';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { camelCaseString } from '/@/utils/event/design';
|
||||
|
||||
const { t } = useI18n();
|
||||
const { notification } = useMessage();
|
||||
const formRef = ref<FormInstance>();
|
||||
@ -109,23 +55,27 @@
|
||||
const props = defineProps({
|
||||
// 表单配置规则
|
||||
formProps: {
|
||||
type: Object as PropType<FormProps>,
|
||||
type: Object as PropType<FormProps>
|
||||
},
|
||||
//表单数据
|
||||
formModel: {
|
||||
type: Object as PropType<Recordable>,
|
||||
default: () => {},
|
||||
default: () => {}
|
||||
},
|
||||
//是否是工作流
|
||||
isWorkFlow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
//是否系统表单需要转驼峰，兼容旧系统表单
|
||||
isCamelCase: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
// 自定义监听 用于以编码开发的形式替代json配置中的change事件
|
||||
watches: {
|
||||
type: Array
|
||||
}
|
||||
});
|
||||
|
||||
const getSchemas = computed<FormSchema[]>(() => {
|
||||
@ -143,7 +93,7 @@
|
||||
|
||||
return {
|
||||
style: baseRowStyle,
|
||||
...rowProps,
|
||||
...rowProps
|
||||
};
|
||||
});
|
||||
|
||||
@ -159,19 +109,13 @@
|
||||
});
|
||||
|
||||
function showComponent(schema) {
|
||||
return props.isWorkFlow
|
||||
? !noShowWorkFlowComponents.includes(schema.type)
|
||||
: !noShowGenerateComponents.includes(schema.type);
|
||||
return props.isWorkFlow ? !noShowWorkFlowComponents.includes(schema.type) : !noShowGenerateComponents.includes(schema.type);
|
||||
}
|
||||
|
||||
function getIsShow(schema: FormSchema, itemValue: any): boolean {
|
||||
const { show } = schema;
|
||||
const { showAdvancedButton } = getProps.value;
|
||||
const itemIsAdvanced = showAdvancedButton
|
||||
? isBoolean(schema.isAdvanced)
|
||||
? schema.isAdvanced
|
||||
: true
|
||||
: true;
|
||||
const itemIsAdvanced = showAdvancedButton ? (isBoolean(schema.isAdvanced) ? schema.isAdvanced : true) : true;
|
||||
|
||||
let isShow = true;
|
||||
|
||||
@ -183,7 +127,7 @@
|
||||
values: itemValue,
|
||||
model: formModel!,
|
||||
schema: schema,
|
||||
field: schema.field,
|
||||
field: schema.field
|
||||
});
|
||||
}
|
||||
|
||||
@ -204,7 +148,7 @@
|
||||
values: itemValue,
|
||||
model: formModel!,
|
||||
schema: schema,
|
||||
field: schema.field,
|
||||
field: schema.field
|
||||
});
|
||||
}
|
||||
return isIfShow;
|
||||
@ -268,12 +212,7 @@
|
||||
}
|
||||
|
||||
function setComponentDefault(item) {
|
||||
if (
|
||||
(staticDataComponents.includes(item.component) &&
|
||||
(item.componentProps as any)?.datasourceType === 'staticData') ||
|
||||
(needDicDefaultValue.includes(item.type) &&
|
||||
(item.componentProps as any)?.datasourceType === 'dic')
|
||||
) {
|
||||
if ((staticDataComponents.includes(item.component) && (item.componentProps as any)?.datasourceType === 'staticData') || (needDicDefaultValue.includes(item.type) && (item.componentProps as any)?.datasourceType === 'dic')) {
|
||||
let { defaultSelect } = item.componentProps as any;
|
||||
formModel[item.field] = defaultSelect;
|
||||
return;
|
||||
@ -285,10 +224,8 @@
|
||||
const singleFormObj = {};
|
||||
item.componentProps.childSchemas.map((singleCom) => {
|
||||
if (
|
||||
(staticDataComponents.includes(singleCom.component) &&
|
||||
(singleCom.componentProps as any)?.datasourceType === 'staticData') ||
|
||||
(needDicDefaultValue.includes(singleCom.type) &&
|
||||
(singleCom.componentProps as any)?.datasourceType === 'dic')
|
||||
(staticDataComponents.includes(singleCom.component) && (singleCom.componentProps as any)?.datasourceType === 'staticData') ||
|
||||
(needDicDefaultValue.includes(singleCom.type) && (singleCom.componentProps as any)?.datasourceType === 'dic')
|
||||
) {
|
||||
let { defaultSelect } = singleCom.componentProps as any;
|
||||
singleFormObj[singleCom.field] = defaultSelect;
|
||||
@ -324,18 +261,13 @@
|
||||
const validate = async (nameList?: NamePath[]): Promise<any> => formRef.value?.validate(nameList);
|
||||
|
||||
//清除表单验证
|
||||
const clearValidate = async (name?: string | string[]): Promise<any> =>
|
||||
formRef.value?.clearValidate(name);
|
||||
const clearValidate = async (name?: string | string[]): Promise<any> => formRef.value?.clearValidate(name);
|
||||
|
||||
//跳到某个字段
|
||||
const scrollToField = async (name: NamePath, options?: ScrollOptions): Promise<any> =>
|
||||
formRef.value?.scrollToField(name, options);
|
||||
const scrollToField = async (name: NamePath, options?: ScrollOptions): Promise<any> => formRef.value?.scrollToField(name, options);
|
||||
|
||||
//验证某个字段
|
||||
const validateFields = async (
|
||||
nameList?: NamePath[] | string,
|
||||
options?: ValidateOptions,
|
||||
): Promise<any> => formRef.value?.validateFields(nameList, options);
|
||||
const validateFields = async (nameList?: NamePath[] | string, options?: ValidateOptions): Promise<any> => formRef.value?.validateFields(nameList, options);
|
||||
|
||||
const findSchema = (schemaArr, key) => {
|
||||
let schema;
|
||||
@ -381,14 +313,8 @@
|
||||
const isInput = schema?.component && defaultValueComponents.includes(schema.component);
|
||||
const isSubForm = schema?.component && arrayValueComponents.includes(schema.component);
|
||||
const isRange = schema?.component && schema?.component.includes('Range');
|
||||
const isStatic =
|
||||
schema?.component &&
|
||||
staticDataComponents.includes(schema.component) &&
|
||||
schema?.componentProps.datasourceType === 'staticData';
|
||||
const isDic =
|
||||
schema?.type &&
|
||||
needDicDefaultValue.includes(schema.type) &&
|
||||
schema?.componentProps.datasourceType === 'dic';
|
||||
const isStatic = schema?.component && staticDataComponents.includes(schema.component) && schema?.componentProps.datasourceType === 'staticData';
|
||||
const isDic = schema?.type && needDicDefaultValue.includes(schema.type) && schema?.componentProps.datasourceType === 'dic';
|
||||
|
||||
if (isSubForm) {
|
||||
if (schema.component === 'OneForOne') {
|
||||
@ -396,10 +322,8 @@
|
||||
const singleFormObj = {};
|
||||
schema.componentProps.childSchemas.map((singleCom) => {
|
||||
if (
|
||||
(staticDataComponents.includes(singleCom.component) &&
|
||||
singleCom?.componentProps.datasourceType === 'staticData') ||
|
||||
(needDicDefaultValue.includes(singleCom.type) &&
|
||||
singleCom?.componentProps.datasourceType === 'dic')
|
||||
(staticDataComponents.includes(singleCom.component) && singleCom?.componentProps.datasourceType === 'staticData') ||
|
||||
(needDicDefaultValue.includes(singleCom.type) && singleCom?.componentProps.datasourceType === 'dic')
|
||||
) {
|
||||
singleFormObj[singleCom.field] = singleCom?.componentProps.defaultSelect;
|
||||
} else {
|
||||
@ -417,15 +341,12 @@
|
||||
const startTimeKey = key.split(',')[0];
|
||||
const endTimeKey = key.split(',')[1];
|
||||
formModel[key] = schema?.defaultValue || [];
|
||||
formModel[startTimeKey] =
|
||||
schema?.defaultValue && schema?.defaultValue.length > 0 && schema?.defaultValue[0];
|
||||
formModel[endTimeKey] =
|
||||
schema?.defaultValue && schema?.defaultValue.length > 0 && schema?.defaultValue[1];
|
||||
formModel[startTimeKey] = schema?.defaultValue && schema?.defaultValue.length > 0 && schema?.defaultValue[0];
|
||||
formModel[endTimeKey] = schema?.defaultValue && schema?.defaultValue.length > 0 && schema?.defaultValue[1];
|
||||
} else if (isStatic || isDic) {
|
||||
formModel[key] = schema?.componentProps.defaultSelect;
|
||||
} else {
|
||||
formModel[key] =
|
||||
schema?.defaultValue || schema?.defaultValue === 0 ? schema?.defaultValue : '';
|
||||
formModel[key] = schema?.defaultValue || schema?.defaultValue === 0 ? schema?.defaultValue : '';
|
||||
}
|
||||
});
|
||||
nextTick(() => clearValidate());
|
||||
@ -478,18 +399,13 @@
|
||||
for (const eventKey in schema.componentProps['events']) {
|
||||
if (eventKey !== 'change') return;
|
||||
try {
|
||||
const event = new Function(
|
||||
'schema',
|
||||
'formModel',
|
||||
'formActionType',
|
||||
`${schema.componentProps['events'][eventKey]}`,
|
||||
);
|
||||
const event = new Function('schema', 'formModel', 'formActionType', `${schema.componentProps['events'][eventKey]}`);
|
||||
event(schema, formModel, formApi);
|
||||
} catch (error) {
|
||||
console.log('error', error);
|
||||
notification.error({
|
||||
message: 'Tip',
|
||||
description: '触发事件填写有误！',
|
||||
description: '触发事件填写有误！'
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -534,14 +450,9 @@
|
||||
if (isArray(data)) {
|
||||
updateData = [...data];
|
||||
}
|
||||
const hasField = updateData.every(
|
||||
(item) =>
|
||||
noFieldComponent.includes(item.component!) || (Reflect.has(item, 'field') && item.field),
|
||||
);
|
||||
const hasField = updateData.every((item) => noFieldComponent.includes(item.component!) || (Reflect.has(item, 'field') && item.field));
|
||||
if (!hasField) {
|
||||
throw new Error(
|
||||
'All children of the form Schema array that need to be updated must contain the `field` field',
|
||||
);
|
||||
throw new Error('All children of the form Schema array that need to be updated must contain the `field` field');
|
||||
}
|
||||
const schema: FormSchema[] = [];
|
||||
updateData.forEach((item: FormSchema) => {
|
||||
@ -565,10 +476,7 @@
|
||||
|
||||
schemaRef.value = uniqBy(schema, 'field');
|
||||
};
|
||||
const deepEachChild = (
|
||||
childs: GridComponentProps[] | TabComponentProps[] | CardComponentProps[],
|
||||
thisItem: FormSchema,
|
||||
) => {
|
||||
const deepEachChild = (childs: GridComponentProps[] | TabComponentProps[] | CardComponentProps[], thisItem: FormSchema) => {
|
||||
childs?.forEach((child: GridComponentProps | CardComponentProps | TabComponentProps) => {
|
||||
child.list.forEach((it: FormSchema) => {
|
||||
if (['Card', 'Tab', 'Grid'].includes(it.component)) {
|
||||
@ -594,14 +502,9 @@
|
||||
updateData = [...data];
|
||||
}
|
||||
|
||||
const hasField = updateData.every(
|
||||
(item) =>
|
||||
noFieldComponent.includes(item.component!) || (Reflect.has(item, 'field') && item.field),
|
||||
);
|
||||
const hasField = updateData.every((item) => noFieldComponent.includes(item.component!) || (Reflect.has(item, 'field') && item.field));
|
||||
if (!hasField) {
|
||||
throw new Error(
|
||||
'All children of the form Schema array that need to be updated must contain the `field` field',
|
||||
);
|
||||
throw new Error('All children of the form Schema array that need to be updated must contain the `field` field');
|
||||
return;
|
||||
}
|
||||
|
||||
@ -630,11 +533,7 @@
|
||||
schemaRef.value = schemaList;
|
||||
};
|
||||
//追加schema
|
||||
const appendSchemaByField = async (
|
||||
schema: FormSchema,
|
||||
prefixField: string | undefined,
|
||||
first?: boolean | undefined,
|
||||
): Promise<void> => {
|
||||
const appendSchemaByField = async (schema: FormSchema, prefixField: string | undefined, first?: boolean | undefined): Promise<void> => {
|
||||
const schemaList: FormSchema[] = cloneDeep(unref(getSchemas));
|
||||
|
||||
const index = schemaList.findIndex((schema) => schema.field === prefixField);
|
||||
@ -675,7 +574,7 @@
|
||||
content: createVNode('div', { style: 'color:red;' }, modal.content),
|
||||
onOk: modal.onOk,
|
||||
onCancel: modal.onCancel,
|
||||
...modal,
|
||||
...modal
|
||||
});
|
||||
};
|
||||
|
||||
@ -690,21 +589,21 @@
|
||||
return defHttp[request.requestType](
|
||||
{
|
||||
url: request.requestUrl,
|
||||
params: request.params,
|
||||
params: request.params
|
||||
},
|
||||
{
|
||||
errorMessageMode: request.errorMessageMode || 'none',
|
||||
},
|
||||
errorMessageMode: request.errorMessageMode || 'none'
|
||||
}
|
||||
);
|
||||
} else {
|
||||
return defHttp[request.requestType](
|
||||
{
|
||||
url: request.requestUrl,
|
||||
data: request.params,
|
||||
data: request.params
|
||||
},
|
||||
{
|
||||
errorMessageMode: request.errorMessageMode || 'none',
|
||||
},
|
||||
errorMessageMode: request.errorMessageMode || 'none'
|
||||
}
|
||||
);
|
||||
}
|
||||
};
|
||||
@ -750,7 +649,7 @@
|
||||
httpRequest,
|
||||
refreshAPI,
|
||||
changeStyle,
|
||||
setDefaultValue,
|
||||
setDefaultValue
|
||||
};
|
||||
|
||||
//将表单方法 导出 给父组件使用。
|
||||
|
||||
@ -2,52 +2,20 @@
|
||||
<div>
|
||||
<!--如果是grid 组件 需要新增grid布局包裹-->
|
||||
<template v-if="schema.component.includes('Grid')">
|
||||
<Row
|
||||
v-show="getIsShow(schema)"
|
||||
:align="(schema.componentProps as any ).align"
|
||||
:gutter="(schema.componentProps as any ).gutter ?? 0"
|
||||
:justify="(schema.componentProps as any ).justify"
|
||||
type="flex"
|
||||
>
|
||||
<Row v-show="getIsShow(schema)" :align="(schema.componentProps as any ).align" :gutter="(schema.componentProps as any ).gutter ?? 0" :justify="(schema.componentProps as any ).justify" type="flex">
|
||||
<Col v-for="(col, colIndex) in schema.children" :key="colIndex" :span="col.span">
|
||||
<template v-for="childSchema in col.list" :key="childSchema.field">
|
||||
<SimpleFormItem
|
||||
v-if="showComponent(childSchema)"
|
||||
v-model:value="formModel![childSchema.field]"
|
||||
:form-api="formApi"
|
||||
:isWorkFlow="isWorkFlow"
|
||||
:label-col="labelCol"
|
||||
:refreshFieldObj="refreshFieldObj"
|
||||
:schema="childSchema"
|
||||
/>
|
||||
<SimpleFormItem v-if="showComponent(childSchema)" v-model:value="formModel![childSchema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :label-col="labelCol" :refreshFieldObj="refreshFieldObj" :schema="childSchema" />
|
||||
</template>
|
||||
</Col>
|
||||
</Row>
|
||||
</template>
|
||||
<!--如果是tab 组件 需要新增tab组件包裹-->
|
||||
<template v-else-if="schema.component === 'Tab'">
|
||||
<Tabs
|
||||
v-show="getIsShow(schema)"
|
||||
v-model:activeKey="activeKey"
|
||||
:size="(schema.componentProps as any ).tabSize"
|
||||
:tabPosition="(schema.componentProps as any ).tabPosition"
|
||||
:type="(schema.componentProps as any ).type"
|
||||
>
|
||||
<TabPane
|
||||
v-for="(tab, tabIndex) in schema.children"
|
||||
:key="tabIndex"
|
||||
:forceRender="true"
|
||||
:tab="tab.name"
|
||||
>
|
||||
<Tabs v-show="getIsShow(schema)" v-model:activeKey="activeKey" :size="(schema.componentProps as any ).tabSize" :tabPosition="(schema.componentProps as any ).tabPosition" :type="(schema.componentProps as any ).type">
|
||||
<TabPane v-for="(tab, tabIndex) in schema.children" :key="tabIndex" :forceRender="true" :tab="tab.name">
|
||||
<template v-for="childSchema in tab.list" :key="childSchema.field">
|
||||
<SimpleFormItem
|
||||
v-if="showComponent(childSchema)"
|
||||
v-model:value="formModel![childSchema.field]"
|
||||
:form-api="formApi"
|
||||
:isWorkFlow="isWorkFlow"
|
||||
:refreshFieldObj="refreshFieldObj"
|
||||
:schema="childSchema"
|
||||
/>
|
||||
<SimpleFormItem v-if="showComponent(childSchema)" v-model:value="formModel![childSchema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="childSchema" />
|
||||
</template>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
@ -64,13 +32,7 @@
|
||||
:name="schema.field"
|
||||
:wrapperCol="itemLabelWidthProp.wrapperCol"
|
||||
>
|
||||
<component
|
||||
:is="formComponent(schema)"
|
||||
v-model:value="formModel![schema.field]"
|
||||
:disabled="getDisable"
|
||||
:size="formProps?.size"
|
||||
v-bind="schema.componentProps"
|
||||
/>
|
||||
<component :is="formComponent(schema)" v-model:value="formModel![schema.field]" :disabled="getDisable" :size="formProps?.size" v-bind="schema.componentProps" />
|
||||
</FormItem>
|
||||
</template>
|
||||
<!--如果是子表单 组件 需要v-model:value="表单对象[字段名]"-->
|
||||
@ -85,14 +47,7 @@
|
||||
:name="schema.field"
|
||||
:wrapperCol="itemLabelWidthProp.wrapperCol"
|
||||
>
|
||||
<component
|
||||
:is="componentMap.get(schema.component)"
|
||||
v-model:value="formModel![schema.field]"
|
||||
:disabled="getDisable"
|
||||
:refreshFieldObj="refreshFieldObj"
|
||||
:size="formProps?.size"
|
||||
v-bind="schema.componentProps"
|
||||
/>
|
||||
<component :is="componentMap.get(schema.component)" v-model:value="formModel![schema.field]" :disabled="getDisable" :refreshFieldObj="refreshFieldObj" :size="formProps?.size" v-bind="schema.componentProps" />
|
||||
</FormItem>
|
||||
</template>
|
||||
<template v-else-if="schema.component === 'TableLayout'">
|
||||
@ -104,21 +59,11 @@
|
||||
height: tdElement.height ? tdElement.height + 'px' : '',
|
||||
minHeight: (tdElement.height || '42') + 'px',
|
||||
overflow: 'hidden',
|
||||
padding: '10px',
|
||||
padding: '10px'
|
||||
}"
|
||||
>
|
||||
<template
|
||||
v-for="childSchema in tdElement.children"
|
||||
:key="childSchema.field"
|
||||
>
|
||||
<SimpleFormItem
|
||||
v-if="showComponent(childSchema)"
|
||||
v-model:value="formModel![childSchema.field]"
|
||||
:form-api="formApi"
|
||||
:isWorkFlow="isWorkFlow"
|
||||
:refreshFieldObj="refreshFieldObj"
|
||||
:schema="childSchema"
|
||||
/>
|
||||
<template v-for="childSchema in tdElement.children" :key="childSchema.field">
|
||||
<SimpleFormItem v-if="showComponent(childSchema)" v-model:value="formModel![childSchema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="childSchema" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
@ -149,62 +94,24 @@
|
||||
/>
|
||||
</FormItem>
|
||||
<!-- 因为Range会变为 开始时间 和 结束时间 2个属性给与表单数据 所以需要2个隐藏框绑定 starTime 和 endTime -->
|
||||
<FormItem
|
||||
v-show="false"
|
||||
:key="schema.key"
|
||||
:label="getComponentsProps.showLabel ? schema.label : ''"
|
||||
:name="schema.field.split(',')[0]"
|
||||
>
|
||||
<FormItem v-show="false" :key="schema.key" :label="getComponentsProps.showLabel ? schema.label : ''" :name="schema.field.split(',')[0]">
|
||||
<input type="hidden" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
v-show="false"
|
||||
:key="schema.key"
|
||||
:label="getComponentsProps.showLabel ? schema.label : ''"
|
||||
:name="schema.field.split(',')[1]"
|
||||
>
|
||||
<FormItem v-show="false" :key="schema.key" :label="getComponentsProps.showLabel ? schema.label : ''" :name="schema.field.split(',')[1]">
|
||||
<input type="hidden" />
|
||||
</FormItem>
|
||||
</template>
|
||||
<!--如果checked 或者 switch组件 需要v-model:checked="表单对象[字段名]" "-->
|
||||
<template v-else-if="checkedValueComponents.includes(schema.component)">
|
||||
<FormItem
|
||||
v-if="getShow(schema)"
|
||||
v-show="getIsShow(schema)"
|
||||
:key="schema.key"
|
||||
:label="getComponentsProps.showLabel ? schema.label : ''"
|
||||
:label-col="labelCol"
|
||||
:name="schema.field"
|
||||
:rules="rules"
|
||||
:wrapperCol="itemLabelWidthProp.wrapperCol"
|
||||
>
|
||||
<component
|
||||
:is="componentMap.get(schema.component)"
|
||||
:key="refreshFieldObj[schema.field]"
|
||||
v-model:checked="formModel![schema.field]"
|
||||
:disabled="getDisable"
|
||||
:size="formProps?.size"
|
||||
v-bind="getComponentsProps"
|
||||
/>
|
||||
<FormItem v-if="getShow(schema)" v-show="getIsShow(schema)" :key="schema.key" :label="getComponentsProps.showLabel ? schema.label : ''" :label-col="labelCol" :name="schema.field" :rules="rules" :wrapperCol="itemLabelWidthProp.wrapperCol">
|
||||
<component :is="componentMap.get(schema.component)" :key="refreshFieldObj[schema.field]" v-model:checked="formModel![schema.field]" :disabled="getDisable" :size="formProps?.size" v-bind="getComponentsProps" />
|
||||
</FormItem>
|
||||
</template>
|
||||
<!--如果是card 组件 需要新增card组件包裹-->
|
||||
<template v-else-if="schema.component.includes('Card')">
|
||||
<CollapseContainer
|
||||
v-show="getIsShow(schema)"
|
||||
:bordered="false"
|
||||
:hasLeftBorder="true"
|
||||
:title="(schema.componentProps as any ).title"
|
||||
>
|
||||
<CollapseContainer v-show="getIsShow(schema)" :bordered="false" :hasLeftBorder="true" :title="(schema.componentProps as any ).title">
|
||||
<template v-for="childSchema in schema.children![0].list" :key="childSchema.field">
|
||||
<SimpleFormItem
|
||||
v-if="showComponent(childSchema)"
|
||||
v-model:value="formModel![childSchema.field]"
|
||||
:form-api="formApi"
|
||||
:isWorkFlow="isWorkFlow"
|
||||
:refreshFieldObj="refreshFieldObj"
|
||||
:schema="childSchema"
|
||||
/>
|
||||
<SimpleFormItem v-if="showComponent(childSchema)" v-model:value="formModel![childSchema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="childSchema" />
|
||||
</template>
|
||||
</CollapseContainer>
|
||||
</template>
|
||||
@ -227,14 +134,7 @@
|
||||
:validateTrigger="['blur', 'change']"
|
||||
:wrapperCol="itemLabelWidthProp.wrapperCol"
|
||||
>
|
||||
<component
|
||||
:is="componentMap.get(schema.component)"
|
||||
:key="refreshFieldObj[schema.field]"
|
||||
:disabled="getDisable"
|
||||
:size="formProps?.size"
|
||||
:value="schema.defaultValue"
|
||||
v-bind="getComponentsProps"
|
||||
/>
|
||||
<component :is="componentMap.get(schema.component)" :key="refreshFieldObj[schema.field]" :disabled="getDisable" :size="formProps?.size" :value="schema.defaultValue" v-bind="getComponentsProps" />
|
||||
</FormItem>
|
||||
</template>
|
||||
<template v-else>
|
||||
@ -249,20 +149,11 @@
|
||||
:validateTrigger="['blur', 'change']"
|
||||
:wrapperCol="itemLabelWidthProp.wrapperCol"
|
||||
>
|
||||
<template
|
||||
v-if="getDisable && /Input|AutoCodeRule|DatePicker/.test(schema.component)"
|
||||
>
|
||||
<template v-if="getDisable && /Input|AutoCodeRule|DatePicker/.test(schema.component)">
|
||||
<readonly :schema="schema" :value="formModel![schema.field]" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<component
|
||||
:is="defaultComponent(schema)"
|
||||
:key="refreshFieldObj[schema.field]"
|
||||
v-model:value="formModel![schema.field]"
|
||||
:disabled="getDisable"
|
||||
:size="formProps?.size"
|
||||
v-bind="getComponentsProps"
|
||||
/>
|
||||
<component :is="defaultComponent(schema)" :key="refreshFieldObj[schema.field]" v-model:value="formModel![schema.field]" :disabled="getDisable" :size="formProps?.size" v-bind="getComponentsProps" />
|
||||
</template>
|
||||
</FormItem>
|
||||
</template>
|
||||
@ -277,10 +168,7 @@
|
||||
import { useItemLabelWidth } from '/@/components/Form/src/hooks/useLabelWidth';
|
||||
import { FormActionType, FormProps, FormSchema } from '/@/components/Form/src/types/form';
|
||||
import { CollapseContainer } from '/@/components/Container';
|
||||
import {
|
||||
noShowWorkFlowComponents,
|
||||
noShowGenerateComponents,
|
||||
} from '/@/components/Form/src/helper';
|
||||
import { noShowWorkFlowComponents, noShowGenerateComponents } from '/@/components/Form/src/helper';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import TableLayoutPreview from '/@/components/Form/src/components/TableLayoutPreview.vue';
|
||||
import { camelCaseString } from '/@/utils/event/design';
|
||||
@ -292,22 +180,22 @@
|
||||
// 表单配置规则
|
||||
schema: {
|
||||
type: Object as PropType<FormSchema>,
|
||||
default: () => {},
|
||||
default: () => {}
|
||||
},
|
||||
value: [Object, String, Number, Boolean, Array],
|
||||
formApi: {
|
||||
type: Object as PropType<FormActionType>,
|
||||
type: Object as PropType<FormActionType>
|
||||
},
|
||||
//刷新api使用
|
||||
refreshFieldObj: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
default: () => {}
|
||||
},
|
||||
//是否是工作流
|
||||
isWorkFlow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
const formModel = inject<Recordable>('formModel');
|
||||
@ -315,14 +203,16 @@
|
||||
const tabActiveKey = inject<Ref<number>>('tabActiveKey', ref(0));
|
||||
const activeKey = ref<number>(0);
|
||||
const isCamelCase = inject<boolean>('isCamelCase', false);
|
||||
// 注入整个表单的配置，formProps是个计算属性，不能修改，formData则来自每个业务的表单页面。
|
||||
const formData = inject('formData', { noInject: true });
|
||||
watch(
|
||||
() => tabActiveKey?.value,
|
||||
(val) => {
|
||||
if (props.isWorkFlow) activeKey.value = val!;
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => activeKey?.value,
|
||||
@ -330,8 +220,8 @@
|
||||
if (props.isWorkFlow) tabActiveKey.value = val!;
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
|
||||
// watch(
|
||||
@ -381,7 +271,7 @@
|
||||
values: formModel![getSchema.value.field],
|
||||
model: formModel!,
|
||||
schema: unref(getSchema),
|
||||
field: unref(getSchema).field,
|
||||
field: unref(getSchema).field
|
||||
});
|
||||
}
|
||||
return disabled;
|
||||
@ -395,38 +285,31 @@
|
||||
componentProps({
|
||||
schema: props.schema,
|
||||
formModel,
|
||||
formActionType: props.formApi,
|
||||
formActionType: props.formApi
|
||||
}) ?? {};
|
||||
} else {
|
||||
if (componentProps['events']) {
|
||||
for (const eventKey in componentProps['events']) {
|
||||
try {
|
||||
const event = new Function(
|
||||
'schema',
|
||||
'formModel',
|
||||
'formActionType',
|
||||
`${componentProps['events'][eventKey]}`,
|
||||
);
|
||||
const fun = componentProps['events'][eventKey];
|
||||
let event;
|
||||
if (typeof fun === 'string') {
|
||||
event = new Function('schema', 'formModel', 'formActionType', 'extParams', `${fun}`);
|
||||
} else if (typeof fun === 'function') {
|
||||
event = fun;
|
||||
}
|
||||
componentProps['on' + upperFirst(eventKey)] = function () {
|
||||
let cloneFormModel = cloneDeep(formModel);
|
||||
for (let item in cloneFormModel) {
|
||||
let field = camelCaseString(item);
|
||||
if (field) cloneFormModel[field] = cloneFormModel[item];
|
||||
}
|
||||
event(
|
||||
props.schema,
|
||||
isCamelCase ? cloneFormModel : formModel,
|
||||
props.formApi,
|
||||
);
|
||||
event(props.schema, isCamelCase ? cloneFormModel : formModel, props.formApi, { formData });
|
||||
|
||||
if (isCamelCase) {
|
||||
for (let item in formModel) {
|
||||
let field = camelCaseString(item);
|
||||
if (
|
||||
cloneFormModel &&
|
||||
field &&
|
||||
cloneFormModel[field] !== undefined
|
||||
) {
|
||||
if (cloneFormModel && field && cloneFormModel[field] !== undefined) {
|
||||
formModel[item] = cloneFormModel[field];
|
||||
}
|
||||
}
|
||||
@ -436,7 +319,7 @@
|
||||
console.log('error', error);
|
||||
notification.error({
|
||||
message: 'Tip',
|
||||
description: '触发事件填写有误！',
|
||||
description: '触发事件填写有误！'
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -453,15 +336,13 @@
|
||||
});
|
||||
|
||||
const labelCol = computed(() => {
|
||||
return unref(getComponentsProps).span
|
||||
? { span: unref(getComponentsProps).span }
|
||||
: unref(itemLabelWidthProp).labelCol;
|
||||
return unref(getComponentsProps).span ? { span: unref(getComponentsProps).span } : unref(itemLabelWidthProp).labelCol;
|
||||
});
|
||||
|
||||
const rules = computed(() => {
|
||||
const requiredRule = {
|
||||
required: unref(getComponentsProps).required || false,
|
||||
message: `${props.schema.label}是必填项`,
|
||||
message: `${props.schema.label}是必填项`
|
||||
};
|
||||
const rulesList = cloneDeep(unref(getComponentsProps).rules);
|
||||
if (!rulesList) return [requiredRule];
|
||||
@ -477,10 +358,7 @@
|
||||
// console.log('formitem watch!!!!!!!!');
|
||||
//填值以后需要手动校验的组件
|
||||
const validateComponents = ['User', 'RichTextEditor', 'Upload', 'SelectMap'];
|
||||
if (
|
||||
validateComponents.includes(props.schema.component) &&
|
||||
formModel![props.schema.field]
|
||||
) {
|
||||
if (validateComponents.includes(props.schema.component) && formModel![props.schema.field]) {
|
||||
setTimeout(() => {
|
||||
props.formApi?.validateFields([props.schema.field]);
|
||||
}, 100);
|
||||
@ -488,8 +366,8 @@
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
onMounted(() => {
|
||||
// console.log('onMounted');
|
||||
@ -510,31 +388,15 @@
|
||||
});
|
||||
|
||||
const formComponent = (schema) => {
|
||||
return componentMap.get(
|
||||
[
|
||||
'caseErpApplyDetailList',
|
||||
'case_erp_apply_detailList',
|
||||
'CASE_ERP_APPLY_DETAILList',
|
||||
].includes(schema.field)
|
||||
? 'ErpApply'
|
||||
: schema.component,
|
||||
);
|
||||
return componentMap.get(['caseErpApplyDetailList', 'case_erp_apply_detailList', 'CASE_ERP_APPLY_DETAILList'].includes(schema.field) ? 'ErpApply' : schema.component);
|
||||
};
|
||||
|
||||
const defaultComponent = (schema) => {
|
||||
return componentMap.get(
|
||||
schema.key === 'ac18952da41b45c9a66ffba3e42b7f3d'
|
||||
? 'ErpUpload'
|
||||
: schema.key === 'b3ba87573cf0466d951bc63fd4df1c78'
|
||||
? 'ErpCheck'
|
||||
: schema.component,
|
||||
);
|
||||
return componentMap.get(schema.key === 'ac18952da41b45c9a66ffba3e42b7f3d' ? 'ErpUpload' : schema.key === 'b3ba87573cf0466d951bc63fd4df1c78' ? 'ErpCheck' : schema.component);
|
||||
};
|
||||
|
||||
function showComponent(schema) {
|
||||
return props.isWorkFlow
|
||||
? !noShowWorkFlowComponents.includes(schema.type)
|
||||
: !noShowGenerateComponents.includes(schema.type);
|
||||
return props.isWorkFlow ? !noShowWorkFlowComponents.includes(schema.type) : !noShowGenerateComponents.includes(schema.type);
|
||||
}
|
||||
|
||||
function getShow(schema: FormSchema): boolean {
|
||||
|
||||
Reference in New Issue
Block a user