formSchema props支持动态修改
parent
41490b3dc8
commit
7ff461a677
|
@ -105,6 +105,22 @@
|
|||
return disabled;
|
||||
});
|
||||
|
||||
// update-begin--author:liaozhiyang---date:20240308---for:【QQYUN-8377】formSchema 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---for:【QQYUN-8377】formSchema 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---for:【QQYUN-8377】formSchema props支持动态修改
|
||||
const dynamicPropskey = props.schema.dynamicPropskey;
|
||||
if (dynamicPropskey) {
|
||||
propsData[dynamicPropskey] = unref(getDynamicPropsValue);
|
||||
}
|
||||
// update-end--author:liaozhiyang---date:20240308---for:【QQYUN-8377】formSchema props支持动态修改
|
||||
|
||||
const isCreatePlaceholder = !propsData.disabled && autoSetPlaceHolder;
|
||||
// RangePicker place是一个数组
|
||||
|
@ -315,21 +337,19 @@
|
|||
//update-begin-author:taoyan date:2022-9-7 for: VUEN-2061【样式】online表单超出4个 .. 省略显示
|
||||
//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-2061【样式】online表单超出4个 .. 省略显示
|
||||
const getHelpMessage = isFunction(helpMessage) ? helpMessage(unref(getValues)) : helpMessage;
|
||||
|
@ -391,14 +411,14 @@
|
|||
}
|
||||
|
||||
const { baseColProps = {} } = props.formProps;
|
||||
// update-begin--author:liaozhiyang---date:20230803---for:【issues-641】调整表格搜索表单的span配置无效
|
||||
// update-begin--author:liaozhiyang---date:20230803---for:【issues-641】调整表格搜索表单的span配置无效
|
||||
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---for:【issues-641】调整表格搜索表单的span配置无效
|
||||
// update-end--author:liaozhiyang---date:20230803---for:【issues-641】调整表格搜索表单的span配置无效
|
||||
const { isIfShow, isShow } = getShow();
|
||||
const values = unref(getValues);
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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 },
|
||||
},
|
||||
];
|
||||
|
|
Loading…
Reference in New Issue