diff --git a/src/components/Form/src/components/FormItem.vue b/src/components/Form/src/components/FormItem.vue index ca124cf..2cab354 100644 --- a/src/components/Form/src/components/FormItem.vue +++ b/src/components/Form/src/components/FormItem.vue @@ -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 ? ( {label} {subLabel} + ) : labelLength ? ( + ) : ( - labelLength ? ( - - ) : ( - 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); diff --git a/src/components/Form/src/types/form.ts b/src/components/Form/src/types/form.ts index 32fdac1..0a30576 100644 --- a/src/components/Form/src/types/form.ts +++ b/src/components/Form/src/types/form.ts @@ -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; diff --git a/src/views/demo/jeecg/JeecgComponents.vue b/src/views/demo/jeecg/JeecgComponents.vue index b12f70f..09cc480 100644 --- a/src/views/demo/jeecg/JeecgComponents.vue +++ b/src/views/demo/jeecg/JeecgComponents.vue @@ -2,8 +2,8 @@ { + 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 }, + }, ];