docs: 增加明细表二开的文档
This commit is contained in:
gaoyunqi
261
src/components/SimpleForm/src/components/SimpleFormItemSetup.vue
Normal file
261
src/components/SimpleForm/src/components/SimpleFormItemSetup.vue
Normal file
@ -0,0 +1,261 @@
|
||||
<script lang="ts">
|
||||
import { Form, Col, Row, Tabs, TabPane, Divider } from 'ant-design-vue';
|
||||
import { isBoolean, isFunction, upperFirst, cloneDeep } from 'lodash-es';
|
||||
import { computed, unref, inject, Ref, watch, ref } from 'vue';
|
||||
import { componentMap } from '/@/components/Form/src/componentMap';
|
||||
import { checkedValueComponents } from '/@/components/Form/src/helper';
|
||||
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 { useMessage } from '/@/hooks/web/useMessage';
|
||||
import TableLayoutPreview from '/@/components/Form/src/components/TableLayoutPreview.vue';
|
||||
import { camelCaseString } from '/@/utils/event/design';
|
||||
import Readonly from '/@/components/Form/src/components/Readonly.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Form,
|
||||
Col,
|
||||
Row,
|
||||
Tabs,
|
||||
TabPane,
|
||||
Divider,
|
||||
checkedValueComponents,
|
||||
CollapseContainer,
|
||||
TableLayoutPreview,
|
||||
Readonly
|
||||
},
|
||||
props: {
|
||||
schema: {
|
||||
type: Object as PropType<FormSchema>,
|
||||
default: () => {}
|
||||
},
|
||||
value: [Object, String, Number, Boolean, Array],
|
||||
formApi: {
|
||||
type: Object as PropType<FormActionType>
|
||||
},
|
||||
//刷新api使用
|
||||
refreshFieldObj: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
//是否是工作流
|
||||
isWorkFlow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
setup(props, ctx) {
|
||||
const formModel = inject<Recordable>('formModel');
|
||||
const formProps = inject<Ref<FormProps>>('formProps');
|
||||
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
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => activeKey?.value,
|
||||
(val) => {
|
||||
if (props.isWorkFlow) tabActiveKey.value = val!;
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
const { notification } = useMessage();
|
||||
const getSchema = computed(() => {
|
||||
return props.schema as FormSchema;
|
||||
});
|
||||
|
||||
const getDisable = computed(() => {
|
||||
const { disabled: globDisabled } = formProps!.value;
|
||||
const { dynamicDisabled } = getSchema.value;
|
||||
const { disabled: itemDisabled = false } = unref(getComponentsProps);
|
||||
let disabled = !!globDisabled || itemDisabled;
|
||||
if (isBoolean(dynamicDisabled)) {
|
||||
disabled = dynamicDisabled;
|
||||
}
|
||||
if (isFunction(dynamicDisabled)) {
|
||||
disabled = dynamicDisabled({
|
||||
values: formModel![getSchema.value.field],
|
||||
model: formModel!,
|
||||
schema: unref(getSchema),
|
||||
field: unref(getSchema).field
|
||||
});
|
||||
}
|
||||
return disabled;
|
||||
});
|
||||
|
||||
const getComponentsProps = computed(() => {
|
||||
let { componentProps = {} } = props.schema;
|
||||
|
||||
if (isFunction(componentProps)) {
|
||||
componentProps =
|
||||
componentProps({
|
||||
schema: props.schema,
|
||||
formModel,
|
||||
formActionType: props.formApi
|
||||
}) ?? {};
|
||||
} else {
|
||||
if (componentProps['events']) {
|
||||
for (const eventKey in componentProps['events']) {
|
||||
try {
|
||||
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, { formData });
|
||||
|
||||
if (isCamelCase) {
|
||||
for (let item in formModel) {
|
||||
let field = camelCaseString(item);
|
||||
if (cloneFormModel && field && cloneFormModel[field] !== undefined) {
|
||||
formModel[item] = cloneFormModel[field];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
} catch (error) {
|
||||
console.log('error', error);
|
||||
notification.error({
|
||||
message: 'Tip',
|
||||
description: '触发事件填写有误！'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (isBoolean(props.schema.dynamicDisabled)) {
|
||||
componentProps['disabled'] = props.schema.dynamicDisabled;
|
||||
}
|
||||
if (isBoolean(props.schema.required)) {
|
||||
componentProps['required'] = props.schema.required;
|
||||
}
|
||||
|
||||
return componentProps as Recordable;
|
||||
});
|
||||
|
||||
const labelCol = computed(() => {
|
||||
// 列宽支持两种模式 labelWidthMode = flex为百分比宽度 fix 为定宽
|
||||
const commonLabelCol = unref(itemLabelWidthProp).labelCol;
|
||||
const itemLabelCol = unref(getComponentsProps).labelCol;
|
||||
const { labelWidthMode, labelFixWidth, span } = props.schema.componentProps as any;
|
||||
let labelCol: any = {};
|
||||
if (labelWidthMode !== 'fix') {
|
||||
labelCol.span = span || itemLabelCol?.span || commonLabelCol?.span;
|
||||
} else {
|
||||
labelCol.style = {
|
||||
width: `${labelFixWidth || 120}px`
|
||||
};
|
||||
}
|
||||
return labelCol;
|
||||
});
|
||||
|
||||
const rules = computed(() => {
|
||||
const requiredRule = {
|
||||
required: unref(getComponentsProps).required || false,
|
||||
message: `${props.schema.label}是必填项`
|
||||
};
|
||||
const rulesList = cloneDeep(unref(getComponentsProps).rules);
|
||||
if (!rulesList) return [requiredRule];
|
||||
rulesList?.map((item) => (item.pattern = eval(item.pattern)));
|
||||
return [...rulesList, requiredRule];
|
||||
});
|
||||
|
||||
//根据labelwidth 生成labelCol
|
||||
const itemLabelWidthProp = useItemLabelWidth(getSchema, formProps!);
|
||||
watch(
|
||||
() => formModel,
|
||||
() => {
|
||||
// console.log('formitem watch!!!!!!!!');
|
||||
//填值以后需要手动校验的组件
|
||||
const validateComponents = ['User', 'RichTextEditor', 'Upload', 'SelectMap'];
|
||||
if (validateComponents.includes(props.schema.component) && formModel![props.schema.field]) {
|
||||
setTimeout(() => {
|
||||
props.formApi?.validateFields([props.schema.field]);
|
||||
}, 100);
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
|
||||
const formComponent = (schema) => {
|
||||
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);
|
||||
};
|
||||
|
||||
function showComponent(schema) {
|
||||
return props.isWorkFlow ? !noShowWorkFlowComponents.includes(schema.type) : !noShowGenerateComponents.includes(schema.type);
|
||||
}
|
||||
|
||||
function readonlySupport(name) {
|
||||
return /^(Input|AutoCodeRule|DatePicker|Text|TimePicker|Range|RichTextEditor|TimeRangePicker|RangePicker|InputTextArea)$/.test(name);
|
||||
}
|
||||
|
||||
function getShow(schema: FormSchema): boolean {
|
||||
const { show } = schema;
|
||||
let isIfShow = true;
|
||||
|
||||
if (isBoolean(show)) {
|
||||
isIfShow = show;
|
||||
}
|
||||
return isIfShow;
|
||||
}
|
||||
|
||||
function getIsShow(schema: FormSchema): boolean {
|
||||
const { componentProps, show } = schema as any;
|
||||
let isShow = true;
|
||||
if (isBoolean(componentProps?.isShow)) {
|
||||
isShow = componentProps?.isShow;
|
||||
}
|
||||
if (isBoolean(show)) {
|
||||
isShow = show;
|
||||
}
|
||||
return isShow;
|
||||
}
|
||||
|
||||
return {
|
||||
getIsShow,
|
||||
getShow,
|
||||
formModel,
|
||||
formProps,
|
||||
showComponent,
|
||||
activeKey,
|
||||
getComponentsProps,
|
||||
componentMap,
|
||||
readonlySupport,
|
||||
getDisable,
|
||||
formComponent,
|
||||
defaultComponent,
|
||||
rules,
|
||||
itemLabelWidthProp
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user