diff --git a/src/components/DesignForm/assembly/index.ts b/src/components/DesignForm/assembly/index.ts index 76d13c258..7d739262f 100644 --- a/src/components/DesignForm/assembly/index.ts +++ b/src/components/DesignForm/assembly/index.ts @@ -1,3 +1,4 @@ +import { v4 as uuidv4 } from "uuid"; const selectOption: any = [ /*{ label: '标签1', @@ -80,7 +81,8 @@ const selectOption: any = [ icon: 'radio', iconFont: 'fa-dot-circle-o', control: { - modelValue: '' + modelValue: '', + glxxsz:[], }, options: selectOption, // 下拉选项数据集合 config: config, @@ -96,7 +98,8 @@ const selectOption: any = [ icon: 'checkbox', iconFont: 'fa-check-square-o', control: { - modelValue: [] + modelValue: [], + glxxszForCheckBox:[], }, options: selectOption, config: config, @@ -113,7 +116,8 @@ const selectOption: any = [ iconFont: 'fa-toggle-down', control: { modelValue: '', - appendToBody: true + appendToBody: true, + glxxsz:[], }, options: selectOption, config: config, diff --git a/src/components/DesignForm/formControlAttr.vue b/src/components/DesignForm/formControlAttr.vue index 730b20f9c..d7e815205 100644 --- a/src/components/DesignForm/formControlAttr.vue +++ b/src/components/DesignForm/formControlAttr.vue @@ -56,6 +56,7 @@ (e: 'openDialog', data: any): void (e: 'update:formOtherData', data: any): void (e: 'videoMsgChange', data: VideoMsg): void + (e: 'formNameChange', data: any): void //(e: 'update:formData', data: any): void //(e: 'update:formConfig', data: any): void }>() @@ -993,6 +994,7 @@ const fileSignAry = reactive([]) const controlChange = (obj: any, val: any) => { + // console.log("字段编辑--1--》",obj) // console.log("字段编辑--2--》",obj.eventName) // console.log("字段编辑--3--》",val) @@ -1088,7 +1090,15 @@ const newVal = obj.isNum ? formatNumber(val) : val // 类型为数字时转整数 obj.path && getPropByPath(controlData.value, obj.path, newVal) } + + + //liwenxuan 关联选项设置 修复bug:当字段标识改变时，关联选项设置的字段标识未同步更改 start + + emits('formNameChange',val); + //liwenxuan 关联选项设置 修复bug:当字段标识改变时，关联选项设置的字段标识未同步更改 end + } + /** * 获取非负整数随机数 * @param Min 最小整数 @@ -1134,11 +1144,54 @@ // 属性设置相关结束 // 多选固定选项删除 const delSelectOption = (index: number, type?: string) => { - if (type === 'tabs') { - controlData.value.columns.splice(index, 1) - } else { - controlData.value.options.splice(index, 1) + //liwenxuan 20240508 checkbox 删除选项时提醒 start + let delflag = true + let breakFlag = 0 + if(controlData.value.type === 'checkbox'){ + for(var i = 0;i < controlData.value.control.glxxszForCheckBox.length;i ++){ + if(breakFlag>0){ + break + } + for(var j = 0; j < controlData.value.control.glxxszForCheckBox[i].selectedOptions.length; j++){ + if(controlData.value.control.glxxszForCheckBox[i].selectedOptions[j] === controlData.value.options[index].value){ + let del =confirm("您本次删除的选项已在关联选项设置中有所配置，相关关联选项设置将被删除，是否确定删除？"); + if (del==true){ + breakFlag++ + break + }else{ + delflag = false + breakFlag++ + break + } + } + } + + + } } + if(delflag === true){ + //删除相关关联选项设置 + if(controlData.value.type === 'checkbox'){ + const todelArr:any = [] + for(var i = 0;i < controlData.value.control.glxxszForCheckBox.length;i ++){ + for(var j = 0; j < controlData.value.control.glxxszForCheckBox[i].selectedOptions.length; j++){ + if(controlData.value.control.glxxszForCheckBox[i].selectedOptions[j] === controlData.value.options[index].value){ + todelArr.push(controlData.value.control.glxxszForCheckBox[i].id) + } + } + } + for(var i = 0;i < todelArr.length;i++){ + controlData.value.control.glxxszForCheckBox = controlData.value.control.glxxszForCheckBox.filter((item: { id: any }) => item.id != todelArr[i]) + } + } + //liwenxuan 20240508 checkbox 删除选项时提醒 end + if (type === 'tabs' ) { + controlData.value.columns.splice(index, 1) + } else { + controlData.value.options.splice(index, 1) + } + } + } // 多选固定选项增加 const addSelectOption = (type: any) => { @@ -1850,6 +1903,7 @@ function formidChanged(){ } const associatedFormsCurrentFormFieldTree = ref() +const associatedFormsCurrentFormFieldTreeForGlxxsz = ref() getAssociatedFormsCurrentFieldTree().then(({ data }) => { if(data.id==="cfid为空"){ @@ -1859,10 +1913,22 @@ getAssociatedFormsCurrentFieldTree().then(({ data }) => { //let rootid_ = data.value.label associatedFormsCurrentFormFieldTree.value = [{ id: 'rootid_'+data.label, - label: '当前表单', + //label: '当前表单', + label: '当前表单-'+data.treeAttrs.show, children: [...resData.value], treeAttrs: data.treeAttrs, }] + + let resDataForGlxxsz = ref(data.children.slice(8)) + + + associatedFormsCurrentFormFieldTreeForGlxxsz.value = [{ + id: 'rootid_'+data.label, + //label: '当前表单', + label: '当前表单-'+data.treeAttrs.show, + children: [...resDataForGlxxsz.value], + treeAttrs: data.treeAttrs, + }] } }); @@ -2152,6 +2218,87 @@ function delRole(id:String){ //liwenxuan20240403 associatedForms end +//liwenxuan20240426 单选多选下拉 关联选项设置 start + +const glxxszDialogFlag = ref(false) +const glxxszDialogFlagCheckBox = ref(false) +function handelGlxxszDialog(){ + if(controlData.value.options.length===0){ + alert("无可配置选项，请先添加。") + }else{ + glxxszDialogFlag.value = true + } +} + +function handelGlxxszDialogCheckbox(){ + glxxszDialogFlagCheckBox.value = true +} + +function handleDetermineGlxxszDialog(){ + glxxszDialogFlag.value = false +} +function handleDetermineGlxxszDialogCheckBox(){ + glxxszDialogFlagCheckBox.value = false +} + + + + +//radio,select添加选项时同步配置选项 +watch(()=>controlData.value.options, (changedOptions:any) => { + if(controlData.value.type === "radio" || controlData.value.type === "select"){ + if(changedOptions.length===0){ + //删没了option + controlData.value.control.glxxsz = [] + }else{ + if(changedOptions.length < controlData.value.control.glxxsz.length){ + //删除了某个option + controlData.value.control.glxxsz = controlData.value.control.glxxsz.filter((item: { optionValue: any }) => changedOptions.find((bItem: { value: any }) => item.optionValue == bItem.value)) + }else{ + for(var i = 0; i < changedOptions.length; i++){ + if(controlData.value.control.glxxsz[i]===undefined){ + //新增了某个option + controlData.value.control.glxxsz.push( + { + conditionField: controlData.value.name, + optionLabel: changedOptions[i].label, + optionValue: changedOptions[i].value, + tableIndex: i, + id: uuidv4().replaceAll('-','').toString(), + } + ) + }else{ + //修改了某个option + controlData.value.control.glxxsz[i].optionLabel = changedOptions[i].label + controlData.value.control.glxxsz[i].optionValue = changedOptions[i].value + } + } + } + } + }else if(controlData.value.type === "checkbox"){ + + } +},{ deep: true }) + + +function createRowForGlxxsz(){ + controlData.value.control.glxxszForCheckBox.push( + { + conditionField: controlData.value.name, + selectedOptions:[], + showFields:[], + id: uuidv4().replaceAll('-','').toString(), + } + ) +} + +function deleteRowForGlxxsz(row: { id: any }){ + controlData.value.control.glxxszForCheckBox = controlData.value.control.glxxszForCheckBox.filter((item: { id: any }) => item.id!=row.id) +} + +//修复bug:当字段标识改变时，关联选项设置的字段标识未同步更改 + +//liwenxuan20240426 单选多选下拉 关联选项设置 end @@ -2773,6 +2920,12 @@ const loadNextPage = () => { +
+ 关联选项设置 +
+
+ 关联选项设置 +
{ { {
@@ -3593,10 +3747,95 @@ const loadNextPage = () => { + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/DesignForm/public/form/form.vue b/src/components/DesignForm/public/form/form.vue index 6536dde2a..8774d306e 100644 --- a/src/components/DesignForm/public/form/form.vue +++ b/src/components/DesignForm/public/form/form.vue @@ -7,6 +7,7 @@ import '@/assets/scss/element-var.scss' import '@/assets/scss/index.scss' import FormGroup from './formGroup.vue' + import { FormData,FormList,FormDataStyle } from '@/api/DesignForm/types' import { getRequest } from '@/api/DesignForm' import { useRoute, useRouter } from 'vue-router' @@ -75,12 +76,14 @@ const props = withDefaults( type:Boolean, default:true }, + key:1 } ) const emits = defineEmits<{ (e: 'btnClick', type: string): void (e: 'change', val: any): void // 表单组件值发生变化时 (e: 'update:issave', type: boolean): void + (e: 'refresh'): void }>() const route = useRoute() const router = useRouter() @@ -115,7 +118,7 @@ const setWindowEvent = (bool?: boolean) => { } watch( () => props.formData, - () => { + () => { emits('update:issave', false) }, { deep: true } @@ -170,6 +173,237 @@ const forEachGetFormModel = (list: FormList[], obj: any) => { }) } +function arrayEqual(a: string[], b: any[]) { + //alert("开始比较") + //先将数组排序 + let a_ = JSON.parse(JSON.stringify(a)); + for(let i = 0;i { + + + nextTick(() => { + /* console.log("以showFields的处理过冒号的每个元素为key,其对应的optionValue为value,新建的数组radioselectArr3 --- 内容为完整显示隐藏条件") + console.log(radioSelectArr3) + console.log("当前表单的值-------------------") + console.log(model.value) + console.log("默认隐藏的字段-----------------") + console.log(defaultHideFields) */ + let modelKeyArr = [];//所有字段 + for(let i= 0;i !hideFieldArr.includes(a)) + //当前所有处于显示状态的字段 + let nowShowingFieldArr = modelKeyArr.filter(a => !hideFieldArr.includes(a)) + + + + + + + + //以被默认隐藏的每个字段为key,显示该字段的所有条件的数组作为value,来作为该数组的每一项。 + const hideFieldConditionArr:hideFieldConditionArritem[] = [] + //保存应多选条件造成的应隐藏的字段 + let hideFieldsFromCheckbox: string[] = [] + for(let i = 0;i < hideFieldArr.length;i++){ + hideFieldConditionArr.push({ + toShow:hideFieldArr[i], + conditions:[], + }) + } + //console.log(hideFieldConditionArr) + //遍历所有配置条件数组radioSelectArr3，当radioSelectArr3 [ i ] . toshowFieldKey 【i】==hideFieldArr【i】时 + for(let i = 0;i < radioSelectArr3.length;i++){ + for(let j = 0;j < radioSelectArr3[i].toShowFieldKey.length;j++){ + for(let n = 0;n < hideFieldConditionArr.length;n++){ + /* console.log(i) + console.log(j) + console.log(n) */ + if(radioSelectArr3[i].toShowFieldKey[j]==hideFieldConditionArr[n].toShow){ + if(Array.isArray(radioSelectArr3[i].conditionFieldValue)){ + let valStr = ""; + for(let x = 0;x0&&arrayEqual(trueValue,conditionFieldValueArr)){ + //此时满足了条件,但是必须看一下conditionField有没有被隐藏.如果被隐藏了,则x不能增加. + //alert("多选条件成功触发") + /* console.log(conditionField) + console.log(toshow) */ + let flag = false//其依赖的选项的父字段是否被隐藏.默认没被隐藏, + //如果此时的conditionField有可能被隐藏且已被隐藏,x不能++ + for(let a = 0;a1说明时多选,=1说明是单选. + for(let b = 0;b item!=hideFieldsFromCheckbox[i]) + //emits('refresh') + } */ + } + } + } + } + }else{//来自单选下拉 + //console.log(conditionFieldValue) + for(let n = 0; n< modelKeyArr.length;n++){ + if(modelKeyArr[n]==conditionField){ + let count_1 = 0; + let trueValue = model.value[modelKeyArr[n]] + //console.log(modelKeyArr[n]) + //console.log(trueValue) + if(trueValue==conditionFieldValue){ + //此时满足了条件,但是必须看一下conditionField有没有被隐藏.如果被隐藏了,则x不能增加. + let flag = false//其依赖的选项的父字段是否被隐藏.默认没被隐藏, + //如果此时的conditionField有可能被隐藏且已被隐藏,x不能++ + /* for(let a = 0;a1说明时多选,=1说明是单选. + for(let b = 0;b0){ + hideFieldArr = hideFieldArr.filter((item: string) => item!=toshow) + } + } + //将隐藏的字段值重置 + for(let i = 0; i< hideFieldArr.length;i++){ + //console.log(i+"dsfafdasdfasfsda===="+hideFieldArr[i]+"=====jiuopfdsahokjuhuiofadshuiofadsjbknfdjisahuifhjken wij================"+model.value[hideFieldArr[i]]) + if(typeof model.value[hideFieldArr[i]] === "string" || typeof model.value[hideFieldArr[i]] === "number"){ + model.value[hideFieldArr[i]] = "" + }else if( model.value[hideFieldArr[i]] instanceof Array){ + model.value[hideFieldArr[i]] = [] + } + } + //默认隐藏的字段中目前被显示出来的 + nowShowingDefaultHideFieldArr = defaultHideFields.filter(a => !hideFieldArr.includes(a)) + /* console.log("(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((())))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))") + console.log(nowShowingDefaultHideFieldArr) */ + /* for(let i = 0;i< nowShowingDefaultHideFieldArr.length; i++){ + //当被显示出来的字段涉及到的conditionfield已经被隐藏了时,其x应-1,如果x-1后造成该field被隐藏,应递归重新敲定hideFieldArr + if() + } */ + + + + + + + //console.log("条件筛选过后最终要隐藏的字段-----"+hideFieldArr) + + +//编辑表单页不隐藏任何字段。 +if(formProps.value.type!=5){ + props.formData.config.hideField?.push(...hideFieldArr) +} + +}); + + + + + return hideFieldArr +} + + // 表单组件值改变事件 tProp为子表格相关 provide(constControlChange, ({ key, value, data, tProp, type, attribute }: any) => { @@ -239,16 +473,212 @@ provide(constControlChange, ({ key, value, data, tProp, type, attribute }: any) } // }) + //liwenxuan 关联选项设置效果实现 start + /* console.log("监听表单-1-constControlChange-->",props.formData) + console.log("监听表单-2-constControlChange-->",key) + console.log("监听表单-3-constControlChange-->", value) + console.log("监听表单-4-constControlChange-->",data) + console.log("监听表单-5-constControlChange-->",type) + console.log("监听表单-6-constControlChange-->",attribute) */ - // console.log("监听表单-1-constControlChange-->",props.formData) - // console.log("监听表单-2-constControlChange-->",key) - // console.log("监听表单-3-constControlChange-->", value) - // console.log("监听表单-4-constControlChange-->",data) - // console.log("监听表单-5-constControlChange-->",type) - // console.log("监听表单-6-constControlChange-->",attribute) - console.log("监听表单--constControlChange-->",key, value, data, tProp,type,attribute) + + //得到当前表单各选项的值 + //props.formData.config.hideField.push("nin2yuan4yi4wei4wo3menda3fen1ma101939") + + + + + + + //得到所有配置对象，包括radio,checkbox,select + const radioSelectShowConfigArr = [] + const checkboxShowConfigArr = [] + //以showFields的处理过冒号的每个元素为key,其对应的optionValue为value,新建一个数组radioselectArr2。----用于获取所有出现在配置中的字段。 + const radioSelectArr2:any[] = [] + for(let i = 0;i0){ + for(let i = 0;i0){ + for(let j = 0;j0){ + for(let n = 0;n0){ + for(let i = 0;i0){ + for(let j = 0;j0){ + for(let n = 0; n0){ + for(let i = 0;i0){ + for(let j = 0;j0){ + if(jArr.showFields.length>1){ + let arr1 = [] + for(let n = 0;n0){ + for(let i = 0;i0){ + for(let j = 0;j0){ + if(jArr.showFields.length>1){ + let arr1 = [] + for(let n = 0;n",key, value, data, tProp,type,attribute)//liwenxuan if (typeof props.changeKeyVal === 'function') { props.changeKeyVal(key, value,type,attribute) @@ -274,7 +704,10 @@ provide(constControlChange, ({ key, value, data, tProp, type, attribute }: any) emits('change', { key, value, model: model.value, data, tProp }) } - + + /* + + */ }) const dictForm = computed(() => { const storage = window.localStorage.getItem('akFormDict') @@ -295,6 +728,10 @@ const formProps = computed(() => { dict: dictForm.value } }) + + + + provide(constFormProps, formProps) // 提供一个方法，用于根据name从formData.list里查找数据 @@ -709,6 +1146,11 @@ watch( } ) // ------------------------数据处理结束------------------------ + + + + + // 重置表单方法 const resetFields = () => { ruleForm.value.resetFields() diff --git a/src/components/DesignForm/public/form/formGroup.vue b/src/components/DesignForm/public/form/formGroup.vue index 37a550f23..decf8634d 100644 --- a/src/components/DesignForm/public/form/formGroup.vue +++ b/src/components/DesignForm/public/form/formGroup.vue @@ -26,6 +26,7 @@ const props = withDefaults( data: FormList[] tableinfo:formTableInfo numrun?:number + }>(), { data: () => { @@ -34,6 +35,7 @@ const props = withDefaults( } ) + const store = useDesignFormStore() as any //自定义表单存储器 const formProps = inject(constFormProps, {}) as any const type = computed(() => { //动态计算属性 @@ -221,15 +223,24 @@ const getFormItemStyle = (ele: FormList) => { } // 根据关联条件显示隐藏当前项 const linksShow = (el: FormList, index: number) => { + + /* + + */ // 当前项设置了关联条件，当关联主体的值等于当前组件设定的值时 if (!el.config) { return true } const key = el.config.linkKey + //liwenxuan 关联选项设置效果实现 + //console.log("linksShow--------"+index+"--------"+JSON.stringify(el)) + //仅第一次加载会触发，须将出现在配置条件中的表单项隐藏。 + const value = el.config.linkValue const linkResult = el.config.linkResult if (key && value && type.value !== 5) { const Fn = new Function('$', `return (${value})`) + console.log(Fn) const pass = Fn(formProps.value.model) if (linkResult === 'disabled') { // 设置为disabled后返回显示状态 diff --git a/src/components/DesignForm/public/form/formItem.vue b/src/components/DesignForm/public/form/formItem.vue index 88c2c9022..07e13db1c 100644 --- a/src/components/DesignForm/public/form/formItem.vue +++ b/src/components/DesignForm/public/form/formItem.vue @@ -69,6 +69,7 @@ const control = computed(() => { // return props.data }) const options = ref(props.data.options) +//console.log("FormItem*********************************************************"+JSON.stringify(props.data)) const changeEvent = inject(constControlChange, '') as any const updateModel = (val: any) => { let controlAttribute = "" @@ -552,7 +553,7 @@ const imgUploadApiUrl = import.meta.env.VITE_APP_BASE_API+"/api/upordown" {{ item.label }} @@ -566,7 +567,7 @@ const imgUploadApiUrl = import.meta.env.VITE_APP_BASE_API+"/api/upordown" :style="getFormItemInputStyle(configStyle,4)" > @@ -580,7 +581,7 @@ const imgUploadApiUrl = import.meta.env.VITE_APP_BASE_API+"/api/upordown" :data="data" :disabled="editDisabled" v-model="value" - :options="options" + :options="props.data.options" :remote-method="getAxiosOptions" :transformOption="transformOption" /> diff --git a/src/types/components.d.ts b/src/types/components.d.ts index 09e535875..30718c4bd 100644 --- a/src/types/components.d.ts +++ b/src/types/components.d.ts @@ -137,10 +137,14 @@ declare module '@vue/runtime-core' { IEpRefreshLeft: typeof import('~icons/ep/refresh-left')['default'] IEpSearch: typeof import('~icons/ep/search')['default'] IEpSetting: typeof import('~icons/ep/setting')['default'] +<<<<<<< HEAD IEpTop: typeof import('~icons/ep/top')['default'] IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default'] IEpUser: typeof import('~icons/ep/user')['default'] IEpView: typeof import('~icons/ep/view')['default'] +======= + IEpUser: typeof import('~icons/ep/user')['default'] +>>>>>>> lwx_v8 LangSelect: typeof import('./../components/LangSelect/index.vue')['default'] LayoutPage: typeof import('./../components/DesignForm/layoutPage/index.vue')['default'] List: typeof import('./../components/DesignForm/public/form/components/list.vue')['default'] diff --git a/src/views/sysworkflow/lowcodepage/pageDesignes.vue b/src/views/sysworkflow/lowcodepage/pageDesignes.vue index a7ebe9c54..8c9c6582a 100644 --- a/src/views/sysworkflow/lowcodepage/pageDesignes.vue +++ b/src/views/sysworkflow/lowcodepage/pageDesignes.vue @@ -77,6 +77,11 @@ const formKeyVal = computed({ } }); + + + + + // 当前表单设计类型，供各子组件调用以展示不同页面，统一方式不需要每个组件都从路由中取 provide('formDesignType', state.value.designType) const vueFileEl = ref() @@ -566,6 +571,7 @@ onMounted(() => { //监听版本变化 // watch(() =>versionId.value ,(val:string)=>{ // emits('update:formVersion', val) +<<<<<<< HEAD // }) /** @ 作者: 秦东 @@ -578,6 +584,40 @@ const versionUpdateForm = (val:string) => { getInitData() } +======= +// }) + +//liwenxuan 关联选项设置 修复bug:当字段标识改变时，关联选项设置的字段标识未同步更改 start +const formNameChanged = (param1: any)=>{ + for(let i = 0; i < state.value.formData.list.length; i++){ + if(state.value.formData.list[i].type=="radio"||state.value.formData.list[i].type=="select"||state.value.formData.list[i].type=="checkbox"){ + if(state.value.formData.list[i].control.glxxsz!=undefined&&state.value.formData.list[i].control.glxxsz.length>0){ + state.value.formData.list[i].control.glxxsz = [] + state.value.formData.list[i].options.push({ + label: '', + value: '' + }) + state.value.formData.list[i].options.pop(); + } + if(state.value.formData.list[i].control.glxxszForCheckBox!=undefined&&state.value.formData.list[i].control.glxxszForCheckBox.length>0){ + state.value.formData.list[i].control.glxxszForCheckBox = [] + } + } + } + ElMessage({ + message: '因字段标识改变，本表单的所有单选、多选、下拉的关联选项设置已重置，请重新设置。', + type: 'warning', + }) +} +//liwenxuan 关联选项设置 修复bug:当字段标识改变时，关联选项设置的字段标识未同步更改 end + +let index = ref(0) + +function refreshFunc(){ + index.value = index.value+1 +} + +>>>>>>> lwx_v8