diff --git a/src/components/SimpleForm/src/SimpleForm.vue b/src/components/SimpleForm/src/SimpleForm.vue
index 1633dbb..5f10a61 100644
--- a/src/components/SimpleForm/src/SimpleForm.vue
+++ b/src/components/SimpleForm/src/SimpleForm.vue
@@ -1,758 +1,657 @@
-
diff --git a/src/components/SimpleForm/src/components/SimpleFormItem.vue b/src/components/SimpleForm/src/components/SimpleFormItem.vue
index 13eb402..806a547 100644
--- a/src/components/SimpleForm/src/components/SimpleFormItem.vue
+++ b/src/components/SimpleForm/src/components/SimpleFormItem.vue
@@ -2,52 +2,20 @@
-
+
-
+
-
-
+
+
-
+
@@ -64,13 +32,7 @@
:name="schema.field"
:wrapperCol="itemLabelWidthProp.wrapperCol"
>
-
+
@@ -85,14 +47,7 @@
:name="schema.field"
:wrapperCol="itemLabelWidthProp.wrapperCol"
>
-
+
@@ -104,21 +59,11 @@
height: tdElement.height ? tdElement.height + 'px' : '',
minHeight: (tdElement.height || '42') + 'px',
overflow: 'hidden',
- padding: '10px',
+ padding: '10px'
}"
>
-
-
+
+
@@ -149,62 +94,24 @@
/>
-
+
-
+
-
-
+
+
-
+
-
+
@@ -227,14 +134,7 @@
:validateTrigger="['blur', 'change']"
:wrapperCol="itemLabelWidthProp.wrapperCol"
>
-
+
@@ -249,20 +149,11 @@
:validateTrigger="['blur', 'change']"
:wrapperCol="itemLabelWidthProp.wrapperCol"
>
-
+
-
+
@@ -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,
- default: () => {},
+ default: () => {}
},
value: [Object, String, Number, Boolean, Array],
formApi: {
- type: Object as PropType,
+ type: Object as PropType
},
//刷新api使用
refreshFieldObj: {
type: Object,
- default: () => {},
+ default: () => {}
},
//是否是工作流
isWorkFlow: {
type: Boolean,
- default: false,
- },
+ default: false
+ }
});
const formModel = inject('formModel');
@@ -315,14 +203,16 @@
const tabActiveKey = inject[>('tabActiveKey', ref(0));
const activeKey = ref(0);
const isCamelCase = inject('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 {
]