geg-gas/geg-gas-web
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 表单回调函数支持直接传入函数，增加一个扩展参数可以直接操控全表单字段的状态

Browse Source
This commit is contained in:
gaoyunqi
2024-02-18 16:57:55 +08:00
parent b61380ee1d
commit 53b5209c30
2 changed files with 666 additions and 905 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1331
src/components/SimpleForm/src/SimpleForm.vue
View File

File diff suppressed because it is too large Load Diff

240
src/components/SimpleForm/src/components/SimpleFormItem.vue
View File

@ -2,52 +2,20 @@
<div> <div>
<!--如果是grid 组件 需要新增grid布局包裹--> <!--如果是grid 组件 需要新增grid布局包裹-->
<template v-if="schema.component.includes('Grid')"> <template v-if="schema.component.includes('Grid')">
<Row <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">
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"> <Col v-for="(col, colIndex) in schema.children" :key="colIndex" :span="col.span">
<template v-for="childSchema in col.list" :key="childSchema.field"> <template v-for="childSchema in col.list" :key="childSchema.field">
<SimpleFormItem <SimpleFormItem v-if="showComponent(childSchema)" v-model:value="formModel![childSchema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :label-col="labelCol" :refreshFieldObj="refreshFieldObj" :schema="childSchema" />
v-if="showComponent(childSchema)"
v-model:value="formModel![childSchema.field]"
:form-api="formApi"
:isWorkFlow="isWorkFlow"
:label-col="labelCol"
:refreshFieldObj="refreshFieldObj"
:schema="childSchema"
/>
</template> </template>
</Col> </Col>
</Row> </Row>
</template> </template>
<!--如果是tab 组件 需要新增tab组件包裹--> <!--如果是tab 组件 需要新增tab组件包裹-->
<template v-else-if="schema.component === 'Tab'"> <template v-else-if="schema.component === 'Tab'">
<Tabs <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">
v-show="getIsShow(schema)" <TabPane v-for="(tab, tabIndex) in schema.children" :key="tabIndex" :forceRender="true" :tab="tab.name">
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"> <template v-for="childSchema in tab.list" :key="childSchema.field">
<SimpleFormItem <SimpleFormItem v-if="showComponent(childSchema)" v-model:value="formModel![childSchema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="childSchema" />
v-if="showComponent(childSchema)"
v-model:value="formModel![childSchema.field]"
:form-api="formApi"
:isWorkFlow="isWorkFlow"
:refreshFieldObj="refreshFieldObj"
:schema="childSchema"
/>
</template> </template>
</TabPane> </TabPane>
</Tabs> </Tabs>
@ -64,13 +32,7 @@
:name="schema.field" :name="schema.field"
:wrapperCol="itemLabelWidthProp.wrapperCol" :wrapperCol="itemLabelWidthProp.wrapperCol"
> >
<component <component :is="formComponent(schema)" v-model:value="formModel![schema.field]" :disabled="getDisable" :size="formProps?.size" v-bind="schema.componentProps" />
:is="formComponent(schema)"
v-model:value="formModel![schema.field]"
:disabled="getDisable"
:size="formProps?.size"
v-bind="schema.componentProps"
/>
</FormItem> </FormItem>
</template> </template>
<!--如果是子表单 组件 需要v-model:value="表单对象[字段名]"--> <!--如果是子表单 组件 需要v-model:value="表单对象[字段名]"-->
@ -85,14 +47,7 @@
:name="schema.field" :name="schema.field"
:wrapperCol="itemLabelWidthProp.wrapperCol" :wrapperCol="itemLabelWidthProp.wrapperCol"
> >
<component <component :is="componentMap.get(schema.component)" v-model:value="formModel![schema.field]" :disabled="getDisable" :refreshFieldObj="refreshFieldObj" :size="formProps?.size" v-bind="schema.componentProps" />
:is="componentMap.get(schema.component)"
v-model:value="formModel![schema.field]"
:disabled="getDisable"
:refreshFieldObj="refreshFieldObj"
:size="formProps?.size"
v-bind="schema.componentProps"
/>
</FormItem> </FormItem>
</template> </template>
<template v-else-if="schema.component === 'TableLayout'"> <template v-else-if="schema.component === 'TableLayout'">
@ -104,21 +59,11 @@
height: tdElement.height ? tdElement.height + 'px' : '', height: tdElement.height ? tdElement.height + 'px' : '',
minHeight: (tdElement.height || '42') + 'px', minHeight: (tdElement.height || '42') + 'px',
overflow: 'hidden', overflow: 'hidden',
padding: '10px', padding: '10px'
}" }"
> >
<template <template v-for="childSchema in tdElement.children" :key="childSchema.field">
v-for="childSchema in tdElement.children" <SimpleFormItem v-if="showComponent(childSchema)" v-model:value="formModel![childSchema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="childSchema" />
:key="childSchema.field"
>
<SimpleFormItem
v-if="showComponent(childSchema)"
v-model:value="formModel![childSchema.field]"
:form-api="formApi"
:isWorkFlow="isWorkFlow"
:refreshFieldObj="refreshFieldObj"
:schema="childSchema"
/>
</template> </template>
</div> </div>
</div> </div>
@ -149,62 +94,24 @@
/> />
</FormItem> </FormItem>
<!-- 因为Range会变为 开始时间 和 结束时间 2个属性给与表单数据 所以需要2个隐藏框绑定 starTime 和 endTime --> <!-- 因为Range会变为 开始时间 和 结束时间 2个属性给与表单数据 所以需要2个隐藏框绑定 starTime 和 endTime -->
<FormItem <FormItem v-show="false" :key="schema.key" :label="getComponentsProps.showLabel ? schema.label : ''" :name="schema.field.split(',')[0]">
v-show="false"
:key="schema.key"
:label="getComponentsProps.showLabel ? schema.label : ''"
:name="schema.field.split(',')[0]"
>
<input type="hidden" /> <input type="hidden" />
</FormItem> </FormItem>
<FormItem <FormItem v-show="false" :key="schema.key" :label="getComponentsProps.showLabel ? schema.label : ''" :name="schema.field.split(',')[1]">
v-show="false"
:key="schema.key"
:label="getComponentsProps.showLabel ? schema.label : ''"
:name="schema.field.split(',')[1]"
>
<input type="hidden" /> <input type="hidden" />
</FormItem> </FormItem>
</template> </template>
<!--如果checked 或者 switch组件 需要v-model:checked="表单对象[字段名]" "--> <!--如果checked 或者 switch组件 需要v-model:checked="表单对象[字段名]" "-->
<template v-else-if="checkedValueComponents.includes(schema.component)"> <template v-else-if="checkedValueComponents.includes(schema.component)">
<FormItem <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">
v-if="getShow(schema)" <component :is="componentMap.get(schema.component)" :key="refreshFieldObj[schema.field]" v-model:checked="formModel![schema.field]" :disabled="getDisable" :size="formProps?.size" v-bind="getComponentsProps" />
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> </FormItem>
</template> </template>
<!--如果是card 组件 需要新增card组件包裹--> <!--如果是card 组件 需要新增card组件包裹-->
<template v-else-if="schema.component.includes('Card')"> <template v-else-if="schema.component.includes('Card')">
<CollapseContainer <CollapseContainer v-show="getIsShow(schema)" :bordered="false" :hasLeftBorder="true" :title="(schema.componentProps as any ).title">
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"> <template v-for="childSchema in schema.children![0].list" :key="childSchema.field">
<SimpleFormItem <SimpleFormItem v-if="showComponent(childSchema)" v-model:value="formModel![childSchema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="childSchema" />
v-if="showComponent(childSchema)"
v-model:value="formModel![childSchema.field]"
:form-api="formApi"
:isWorkFlow="isWorkFlow"
:refreshFieldObj="refreshFieldObj"
:schema="childSchema"
/>
</template> </template>
</CollapseContainer> </CollapseContainer>
</template> </template>
@ -227,14 +134,7 @@
:validateTrigger="['blur', 'change']" :validateTrigger="['blur', 'change']"
:wrapperCol="itemLabelWidthProp.wrapperCol" :wrapperCol="itemLabelWidthProp.wrapperCol"
> >
<component <component :is="componentMap.get(schema.component)" :key="refreshFieldObj[schema.field]" :disabled="getDisable" :size="formProps?.size" :value="schema.defaultValue" v-bind="getComponentsProps" />
:is="componentMap.get(schema.component)"
:key="refreshFieldObj[schema.field]"
:disabled="getDisable"
:size="formProps?.size"
:value="schema.defaultValue"
v-bind="getComponentsProps"
/>
</FormItem> </FormItem>
</template> </template>
<template v-else> <template v-else>
@ -249,20 +149,11 @@
:validateTrigger="['blur', 'change']" :validateTrigger="['blur', 'change']"
:wrapperCol="itemLabelWidthProp.wrapperCol" :wrapperCol="itemLabelWidthProp.wrapperCol"
> >
<template <template v-if="getDisable && /Input|AutoCodeRule|DatePicker/.test(schema.component)">
v-if="getDisable && /Input|AutoCodeRule|DatePicker/.test(schema.component)"
>
<readonly :schema="schema" :value="formModel![schema.field]" /> <readonly :schema="schema" :value="formModel![schema.field]" />
</template> </template>
<template v-else> <template v-else>
<component <component :is="defaultComponent(schema)" :key="refreshFieldObj[schema.field]" v-model:value="formModel![schema.field]" :disabled="getDisable" :size="formProps?.size" v-bind="getComponentsProps" />
:is="defaultComponent(schema)"
:key="refreshFieldObj[schema.field]"
v-model:value="formModel![schema.field]"
:disabled="getDisable"
:size="formProps?.size"
v-bind="getComponentsProps"
/>
</template> </template>
</FormItem> </FormItem>
</template> </template>
@ -277,10 +168,7 @@
import { useItemLabelWidth } from '/@/components/Form/src/hooks/useLabelWidth'; import { useItemLabelWidth } from '/@/components/Form/src/hooks/useLabelWidth';
import { FormActionType, FormProps, FormSchema } from '/@/components/Form/src/types/form'; import { FormActionType, FormProps, FormSchema } from '/@/components/Form/src/types/form';
import { CollapseContainer } from '/@/components/Container'; import { CollapseContainer } from '/@/components/Container';
import { import { noShowWorkFlowComponents, noShowGenerateComponents } from '/@/components/Form/src/helper';
noShowWorkFlowComponents,
noShowGenerateComponents,
} from '/@/components/Form/src/helper';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
import TableLayoutPreview from '/@/components/Form/src/components/TableLayoutPreview.vue'; import TableLayoutPreview from '/@/components/Form/src/components/TableLayoutPreview.vue';
import { camelCaseString } from '/@/utils/event/design'; import { camelCaseString } from '/@/utils/event/design';
@ -292,22 +180,22 @@
// 表单配置规则 // 表单配置规则
schema: { schema: {
type: Object as PropType<FormSchema>, type: Object as PropType<FormSchema>,
default: () => {}, default: () => {}
}, },
value: [Object, String, Number, Boolean, Array], value: [Object, String, Number, Boolean, Array],
formApi: { formApi: {
type: Object as PropType<FormActionType>, type: Object as PropType<FormActionType>
}, },
//刷新api使用 //刷新api使用
refreshFieldObj: { refreshFieldObj: {
type: Object, type: Object,
default: () => {}, default: () => {}
}, },
//是否是工作流 //是否是工作流
isWorkFlow: { isWorkFlow: {
type: Boolean, type: Boolean,
default: false, default: false
}, }
}); });
const formModel = inject<Recordable>('formModel'); const formModel = inject<Recordable>('formModel');
@ -315,14 +203,16 @@
const tabActiveKey = inject<Ref<number>>('tabActiveKey', ref(0)); const tabActiveKey = inject<Ref<number>>('tabActiveKey', ref(0));
const activeKey = ref<number>(0); const activeKey = ref<number>(0);
const isCamelCase = inject<boolean>('isCamelCase', false); const isCamelCase = inject<boolean>('isCamelCase', false);
// 注入整个表单的配置，formProps是个计算属性，不能修改，formData则来自每个业务的表单页面。
const formData = inject('formData', { noInject: true });
watch( watch(
() => tabActiveKey?.value, () => tabActiveKey?.value,
(val) => { (val) => {
if (props.isWorkFlow) activeKey.value = val!; if (props.isWorkFlow) activeKey.value = val!;
}, },
{ {
immediate: true, immediate: true
}, }
); );
watch( watch(
() => activeKey?.value, () => activeKey?.value,
@ -330,8 +220,8 @@
if (props.isWorkFlow) tabActiveKey.value = val!; if (props.isWorkFlow) tabActiveKey.value = val!;
}, },
{ {
immediate: true, immediate: true
}, }
); );
// watch( // watch(
@ -381,7 +271,7 @@
values: formModel![getSchema.value.field], values: formModel![getSchema.value.field],
model: formModel!, model: formModel!,
schema: unref(getSchema), schema: unref(getSchema),
field: unref(getSchema).field, field: unref(getSchema).field
}); });
} }
return disabled; return disabled;
@ -395,38 +285,31 @@
componentProps({ componentProps({
schema: props.schema, schema: props.schema,
formModel, formModel,
formActionType: props.formApi, formActionType: props.formApi
}) ?? {}; }) ?? {};
} else { } else {
if (componentProps['events']) { if (componentProps['events']) {
for (const eventKey in componentProps['events']) { for (const eventKey in componentProps['events']) {
try { try {
const event = new Function( const fun = componentProps['events'][eventKey];
'schema', let event;
'formModel', if (typeof fun === 'string') {
'formActionType', event = new Function('schema', 'formModel', 'formActionType', 'extParams', `${fun}`);
`${componentProps['events'][eventKey]}`, } else if (typeof fun === 'function') {
); event = fun;
}
componentProps['on' + upperFirst(eventKey)] = function () { componentProps['on' + upperFirst(eventKey)] = function () {
let cloneFormModel = cloneDeep(formModel); let cloneFormModel = cloneDeep(formModel);
for (let item in cloneFormModel) { for (let item in cloneFormModel) {
let field = camelCaseString(item); let field = camelCaseString(item);
if (field) cloneFormModel[field] = cloneFormModel[item]; if (field) cloneFormModel[field] = cloneFormModel[item];
} }
event( event(props.schema, isCamelCase ? cloneFormModel : formModel, props.formApi, { formData });
props.schema,
isCamelCase ? cloneFormModel : formModel,
props.formApi,
);
if (isCamelCase) { if (isCamelCase) {
for (let item in formModel) { for (let item in formModel) {
let field = camelCaseString(item); let field = camelCaseString(item);
if ( if (cloneFormModel && field && cloneFormModel[field] !== undefined) {
cloneFormModel &&
field &&
cloneFormModel[field] !== undefined
) {
formModel[item] = cloneFormModel[field]; formModel[item] = cloneFormModel[field];
} }
} }
@ -436,7 +319,7 @@
console.log('error', error); console.log('error', error);
notification.error({ notification.error({
message: 'Tip', message: 'Tip',
description: '触发事件填写有误！', description: '触发事件填写有误！'
}); });
} }
} }
@ -453,15 +336,13 @@
}); });
const labelCol = computed(() => { const labelCol = computed(() => {
return unref(getComponentsProps).span return unref(getComponentsProps).span ? { span: unref(getComponentsProps).span } : unref(itemLabelWidthProp).labelCol;
? { span: unref(getComponentsProps).span }
: unref(itemLabelWidthProp).labelCol;
}); });
const rules = computed(() => { const rules = computed(() => {
const requiredRule = { const requiredRule = {
required: unref(getComponentsProps).required || false, required: unref(getComponentsProps).required || false,
message: `${props.schema.label}是必填项`, message: `${props.schema.label}是必填项`
}; };
const rulesList = cloneDeep(unref(getComponentsProps).rules); const rulesList = cloneDeep(unref(getComponentsProps).rules);
if (!rulesList) return [requiredRule]; if (!rulesList) return [requiredRule];
@ -477,10 +358,7 @@
// console.log('formitem watch!!!!!!!!'); // console.log('formitem watch!!!!!!!!');
//填值以后需要手动校验的组件 //填值以后需要手动校验的组件
const validateComponents = ['User', 'RichTextEditor', 'Upload', 'SelectMap']; const validateComponents = ['User', 'RichTextEditor', 'Upload', 'SelectMap'];
if ( if (validateComponents.includes(props.schema.component) && formModel![props.schema.field]) {
validateComponents.includes(props.schema.component) &&
formModel![props.schema.field]
) {
setTimeout(() => { setTimeout(() => {
props.formApi?.validateFields([props.schema.field]); props.formApi?.validateFields([props.schema.field]);
}, 100); }, 100);
@ -488,8 +366,8 @@
}, },
{ {
deep: true, deep: true,
immediate: true, immediate: true
}, }
); );
onMounted(() => { onMounted(() => {
// console.log('onMounted'); // console.log('onMounted');
@ -510,31 +388,15 @@
}); });
const formComponent = (schema) => { const formComponent = (schema) => {
return componentMap.get( return componentMap.get(['caseErpApplyDetailList', 'case_erp_apply_detailList', 'CASE_ERP_APPLY_DETAILList'].includes(schema.field) ? 'ErpApply' : schema.component);
[
'caseErpApplyDetailList',
'case_erp_apply_detailList',
'CASE_ERP_APPLY_DETAILList',
].includes(schema.field)
? 'ErpApply'
: schema.component,
);
}; };
const defaultComponent = (schema) => { const defaultComponent = (schema) => {
return componentMap.get( return componentMap.get(schema.key === 'ac18952da41b45c9a66ffba3e42b7f3d' ? 'ErpUpload' : schema.key === 'b3ba87573cf0466d951bc63fd4df1c78' ? 'ErpCheck' : schema.component);
schema.key === 'ac18952da41b45c9a66ffba3e42b7f3d'
? 'ErpUpload'
: schema.key === 'b3ba87573cf0466d951bc63fd4df1c78'
? 'ErpCheck'
: schema.component,
);
}; };
function showComponent(schema) { function showComponent(schema) {
return props.isWorkFlow return props.isWorkFlow ? !noShowWorkFlowComponents.includes(schema.type) : !noShowGenerateComponents.includes(schema.type);
? !noShowWorkFlowComponents.includes(schema.type)
: !noShowGenerateComponents.includes(schema.type);
} }
function getShow(schema: FormSchema): boolean { function getShow(schema: FormSchema): boolean {