formSchema props支持动态修改

pull/1164/head
JEECG 2024-03-18 11:22:25 +08:00
parent 41490b3dc8
commit 7ff461a677
4 changed files with 93 additions and 12 deletions

View File

@ -105,6 +105,22 @@
return disabled;
});
// update-begin--author:liaozhiyang---date:20240308---forQQYUN-8377formSchema props
const getDynamicPropsValue = computed(() => {
const { dynamicPropsVal, dynamicPropskey } = props.schema;
if (dynamicPropskey == null) {
return null;
} else {
const { [dynamicPropskey]: itemValue } = unref(getComponentsProps);
let value = itemValue;
if (isFunction(dynamicPropsVal)) {
value = dynamicPropsVal(unref(getValues));
return value;
}
}
});
// update-end--author:liaozhiyang---date:20240308---forQQYUN-8377formSchema props
function getShow(): { isShow: boolean; isIfShow: boolean } {
const { show, ifShow } = props.schema;
const { showAdvancedButton } = props.formProps;
@ -276,6 +292,12 @@
...unref(getComponentsProps),
disabled: unref(getDisable),
};
// update-begin--author:liaozhiyang---date:20240308---forQQYUN-8377formSchema props
const dynamicPropskey = props.schema.dynamicPropskey;
if (dynamicPropskey) {
propsData[dynamicPropskey] = unref(getDynamicPropsValue);
}
// update-end--author:liaozhiyang---date:20240308---forQQYUN-8377formSchema props
const isCreatePlaceholder = !propsData.disabled && autoSetPlaceHolder;
// RangePicker place
@ -315,21 +337,19 @@
//update-begin-author:taoyan date:2022-9-7 for: VUEN-2061online4 ..
//label
const { label, helpMessage, helpComponentProps, subLabel, labelLength } = props.schema;
let showLabel:string = (label+'')
if(labelLength && showLabel.length>4){
let showLabel: string = label + '';
if (labelLength && showLabel.length > 4) {
showLabel = showLabel.substr(0, labelLength);
}
const titleObj = {title: label}
const titleObj = { title: label };
const renderLabel = subLabel ? (
<span>
{label} <span class="text-secondary">{subLabel}</span>
</span>
) : labelLength ? (
<label {...titleObj}>{showLabel}</label>
) : (
labelLength ? (
<label {...titleObj}>{showLabel}</label>
) : (
label
)
label
);
//update-end-author:taoyan date:2022-9-7 for: VUEN-2061online4 ..
const getHelpMessage = isFunction(helpMessage) ? helpMessage(unref(getValues)) : helpMessage;
@ -391,14 +411,14 @@
}
const { baseColProps = {} } = props.formProps;
// update-begin--author:liaozhiyang---date:20230803---forissues-641span
// update-begin--author:liaozhiyang---date:20230803---forissues-641span
const { getIsMobile } = useAppInject();
let realColProps;
realColProps = { ...baseColProps, ...colProps };
if (colProps['span'] && !unref(getIsMobile)) {
['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach((name) => delete realColProps[name]);
}
// update-end--author:liaozhiyang---date:20230803---forissues-641span
// update-end--author:liaozhiyang---date:20230803---forissues-641span
const { isIfShow, isShow } = getShow();
const values = unref(getValues);

View File

@ -192,6 +192,11 @@ export interface FormSchema {
dynamicDisabled?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean);
dynamicRules?: (renderCallbackParams: RenderCallbackParams) => Rule[];
// update-begin--author:liaozhiyang---date:20240308---for【QQYUN-8377】formSchema props支持动态修改
// 设置组件props的key
dynamicPropskey?: string;
dynamicPropsVal?: ((renderCallbackParams: RenderCallbackParams) => any);
// update-end--author:liaozhiyang---date:20240308---for【QQYUN-8377】formSchema props支持动态修改
// 这个属性自定义的 用于自定义的业务 比如在表单打开的时候修改表单的禁用状态但是又不能重写componentProps因为他的内容太多了所以使用dynamicDisabled和buss实现
buss?: any;

View File

@ -2,8 +2,8 @@
<BasicForm
ref="formElRef"
:class="'jee-select-demo-form'"
:labelCol="{ span: 5 }"
:wrapperCol="{ span: 15 }"
:labelCol="{ span: 6 }"
:wrapperCol="{ span: 14 }"
:showResetButton="false"
:showSubmitButton="false"
:schemas="schemas"

View File

@ -710,4 +710,60 @@ export const schemas: FormSchema[] = [
span: 12,
},
},
{
field: 'sex',
component: 'JDictSelectTag',
label: '性别(控制下方课程options)',
helpMessage: ['component模式','性别不同,下方课程展示选项不同'],
componentProps: {
dictCode: 'sex',
type: 'radioButton',
onChange: (value) => {
console.log(value);
},
},
colProps: {
span: 12,
},
},
{
field: 'sex',
component: 'JEllipsis',
label: '选中值',
colProps: { span: 12 },
},
{
field: 'course',
component: 'Select',
label: '课程',
dynamicPropskey: 'options',
dynamicPropsVal: ({ model }) => {
let options;
if (model.sex == 1) {
return [
{ value: '0', label: 'java - 男' },
{ value: '1', label: 'vue - 男' },
];
} else if (model.sex == 2) {
return [
{ value: '2', label: '瑜伽 - 女' },
{ value: '3', label: '美甲 - 女' },
];
} else {
return [];
}
},
componentProps: {
disabled: false,
},
colProps: {
span: 12,
},
},
{
field: 'course',
component: 'JEllipsis',
label: '选中值',
colProps: { span: 12 },
},
];