移动端关联表单进阶效果

src/components/lowCode/assistant/associatedForms.vue

@@ -3,10 +3,12 @@
 
     
         <!-- <span style="font-size: 14px; margin-right: 12px;padding-top: 4px;" class="small-span" >{{ props.data.item?props.data.item.label:"关联表单" }}</span> -->
-        <el-select v-if="!tableFlag" v-model="value1" placeholder="请选择" class="big-span" @change="asfValueChanged" :style="getFormItemInputStyle(configStyle,2)" >
+        <!-- <div style="margin-right: 12px;"></div> -->
+        <!-- <span style="width: 7px;"></span> -->
+        <el-select v-if="!tableFlag" v-model="value1" placeholder="请选择"  @change="asfValueChanged" :style="getFormItemInputStyle(configStyle,2)" >
             <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
-        <el-select v-if="tableFlag" v-model="value2" placeholder="请选择" class="big-span" @change="asfValueChangedTable" :style="getFormItemInputStyle(configStyle,2)">
+        <el-select v-if="tableFlag" v-model="value2" placeholder="请选择"  @change="asfValueChangedTable" :style="getFormItemInputStyle(configStyle,2)">
             <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
     
@@ -32,7 +34,7 @@ const configStyle = computed(() => {
 })
 const getFormItemInputStyle = (ele: any,sty:number) => {
     if(ele?.inputStyle){
-      console.log("返回栅格宽度4",AnalysisInputCss(ele?.inputStyle,sty))
+      //console.log("返回栅格宽度4",AnalysisInputCss(ele?.inputStyle,sty))
       return AnalysisInputCss(ele?.inputStyle,sty)
     }
 }

src/views/formTable/page/cardPage.vue

@@ -4,7 +4,8 @@
 @ 备注: 卡片视图
 -->
 <script lang='ts' setup>
-import { gainAppPageInfo,judgeSubmitCancel,gainFormPageListCont } from '@/api/lowCode/form/index'
+import request from '@/utils/axios/index'
+import { gainAppPageInfo,judgeSubmitCancel,gainFormPageListCont,getFieldRecord } from '@/api/lowCode/form/index'
 import{ json2string,string2json } from '@/utils/lowCode/form'
 import { softDeletion,retractRunWorkFlow } from '@/api/lowCode/taskapi/management'
 
@@ -57,6 +58,13 @@ const props = defineProps({
 		default:"",
     }
 });
+const asfAppContent = reactive<any>({
+    appKey:props.appKey,
+	appId:props.appId,
+	taskTitle:props.taskTitle,
+	taskId:props.taskId,
+	taskKey:props.taskKey,
+})
 const appContent = reactive<any>({
     appKey:props.appKey,
 	appId:props.appId,
@@ -80,6 +88,162 @@ const isOne = ref(props.stateListInfo.isOne)
 const pageTotal = ref<number>(0) //数据总量
 const openAppPage = ref(false)
 
+//liwenxuan 关联表单 start
+let asfDetails = [];
+let asfQueryParams: any[] = [];
+const currentAsfTableDataList = ref([])//当前点击的关联表单数据
+const asflookPageInfoIsShow = ref(false)
+
+function getAsfDataTitlesByIds(asfQueryParams: any[]) {
+    return request({
+        url: "/javasys/lowCode/AssociatedForms/getAsfDataTitlesByIds",
+        method: "post",
+        data: asfQueryParams,
+    });
+}
+
+
+const showAsfDetailDialog = (item: any, itval: any, asfQueryParams: any) => {
+    let val = itval
+    /* console.log("item----------------->",item)
+    console.log("val----------------->",val)
+    console.log("asfQueryParams----------------->",asfQueryParams) */
+    let asfFormId = item.control.formid//关联表单在customer_form中的id
+	//alert("asfFormId:"+asfFormId)
+	//let scopeColumnProperty = scope.column.property//exp:associatedForms1720570283525
+    let scopeColumnProperty = item.id
+    //console.log(item.label)
+    asfAppContent.taskTitle = item.label
+    
+	let asfQueryParamsNAsfToSelectIdsNAsfMasterId = val.id
+	//alert(asfQueryParamsNAsfToSelectIdsNAsfMasterId)
+	let asfToSelectMastersKey = ""
+	for(let i = 0;i<asfQueryParams.length;i++){
+		if(asfQueryParams[i].field == scopeColumnProperty){
+			
+			for(let j = 0;j<asfQueryParams[i].asfToSelectIds.length;j++){
+				
+				if(asfQueryParams[i].asfToSelectIds[j].asfMasterId==asfQueryParamsNAsfToSelectIdsNAsfMasterId){
+					asfToSelectMastersKey = asfQueryParams[i].asfToSelectIds[j].asfId
+					
+				}
+			}
+		}
+	}
+    
+    asfGetPageData(asfFormId,asfToSelectMastersKey)
+
+    
+}
+
+
+
+const asfGetPageData = (asfFormId: any,asfToSelectMastersKey: any) => {
+	let searchData = [{"id":"id","label":"Id","field":"id","type":"bigint(20)","attribute":"","pattern":"bigint","fieldClass":"id","activeValue":"","inactiveValue":"","config":{"optionsType":0},"control":{"optionsValue3Formid":"","optionsValue3Field":""},"options":[],"isSearch":true,"value":asfToSelectMastersKey}]
+	//state.loading = true;
+	let sendData = {
+		formId:asfFormId,
+		page:1,
+		pagesize:1,
+		searchData:json2string(searchData)
+	}
+	//console.log("asf获取列表详细信息",sendData)
+	gainFormPageListCont(sendData)
+		.then((data)=>{
+			
+			//console.log("获取列表详细信息----------------->",data)
+			//liwenxuan 关联表单数据获取 start
+			
+			let dataList = data
+			//console.log(dataList)
+			asfDetails = props.stateListInfo.tableData.columns.filter((item: any) => {
+				return item.fieldClass=="associatedForms"
+			})
+			
+			
+			if(asfDetails.length>0){
+				//console.log(data.data.list)
+				//拼装参数,asf值对象数组
+				let asfAsfQueryParams = []
+				for(let j = 0;j< asfDetails.length;j++){
+					let asfQueryParamsItem :any = {}
+					//console.log(asfDetails[j])
+					asfQueryParamsItem.formId = asfDetails[j].control.formid
+					asfQueryParamsItem.field = asfDetails[j].field
+					
+					let asfToSelectIds = []
+					for(let i = 0;i<data.data.list.length;i++){
+						let asfMasterAndAsfId:any = {}
+						asfMasterAndAsfId.asfId = data.data.list[i][asfDetails[j].field]
+						asfMasterAndAsfId.asfMasterId = data.data.list[i].id
+						
+						asfToSelectIds.push(asfMasterAndAsfId)
+					}
+					asfQueryParamsItem.asfToSelectIds = asfToSelectIds
+					asfAsfQueryParams.push(asfQueryParamsItem)
+				}
+				let queryCount = 0
+				for(let i = 0;i<asfAsfQueryParams[0].asfToSelectIds.length;i++){
+					if(asfAsfQueryParams[0].asfToSelectIds[i].asfId!=undefined&&asfAsfQueryParams[0].asfToSelectIds[i].asfId!=""){
+						queryCount++
+					}
+				}
+				
+				//console.log(asfAsfQueryParams)
+				if(queryCount>0){
+					getAsfDataTitlesByIds(asfAsfQueryParams).then(({ data }) => {   
+						//console.log(data)
+						for(let i = 0;i<dataList.data.list.length; i++){
+							//console.log(dataList.data.list[i])
+							for(let j = 0;j<data.length;j++){
+								//console.log(data[j])
+								for(let n = 0;n<data[j].list.length;n++){
+									if(dataList.data.list[i].id==data[j].list[n].asfMasterId){
+										dataList.data.list[i][data[j].field] = data[j].list[n].label
+									}
+									//console.log(data[j].list[n])
+								}
+								
+								
+							}
+						}
+						currentAsfTableDataList.value = dataList.data.list
+
+					});
+				}else{
+					currentAsfTableDataList.value = data.data.list
+
+					
+				}
+				
+			}else{
+				currentAsfTableDataList.value = data.data.list
+
+				
+				
+			}
+			/* //liwenxuan 关联表单数据获取 end
+			state.total = data.data.total
+			state.loading = false; */
+		})
+		.finally(()=>{
+			/* state.loading = false; */
+
+			//显示关联表单本条详情
+			/* tablePageClass.value = 4;	
+			drawerWith.value = container.value?.clientWidth
+			 */
+            props.stateForm.type=3
+            //lookInfo.value = itval
+            asflookPageInfoIsShow.value = true;
+						
+
+		})
+		
+}
+
+//liwenxuan 关联表单 end
+
 
 
 /**
@@ -203,9 +367,77 @@ const getPageData = () => {
     state.loading = true;
     gainFormPageListCont(sendData)
         .then((data) => {
-            // console.log("获取列表详细信息----------ee------->",data.data) 
+            console.log("获取列表详细信息----------ee------->",data.data) 
             // tableDataList.value = data.data.list;
             if(Array.isArray(data.data.list)){
+
+                //liwenxuan 关联表单 start
+                
+                //liwenxuan 关联表单数据获取 start
+                let dataList = data;
+                //console.log(dataList)
+                asfDetails = props.stateListInfo.tableData.columns.filter((item: any) => {
+                    return item.fieldClass == "associatedForms";
+                });
+
+                if (asfDetails.length > 0 && data.data.list != null) {
+                    //console.log(data.data.list)
+                    //拼装参数,asf值对象数组
+                    asfQueryParams = [];
+                    for (let j = 0; j < asfDetails.length; j++) {
+                    let asfQueryParamsItem: any = {};
+                    //console.log(asfDetails[j])
+                    asfQueryParamsItem.formId = asfDetails[j].control.formid;
+                    asfQueryParamsItem.field = asfDetails[j].field;
+
+                    let asfToSelectIds = [];
+                    // console.log(data.data.list)
+                    for (let i = 0; i < data.data.list.length; i++) {
+                        let asfMasterAndAsfId: any = {};
+                        asfMasterAndAsfId.asfId = data.data.list[i][asfDetails[j].field];
+                        asfMasterAndAsfId.asfMasterId = data.data.list[i].id;
+
+                        asfToSelectIds.push(asfMasterAndAsfId);
+                    }
+                    asfQueryParamsItem.asfToSelectIds = asfToSelectIds;
+                    asfQueryParams.push(asfQueryParamsItem);
+                    }
+                    let queryCount = 0;
+                    for (let i = 0; i < asfQueryParams[0].asfToSelectIds.length; i++) {
+                    if (asfQueryParams[0].asfToSelectIds[i].asfId != "") {
+                        queryCount++;
+                    }
+                    }
+                    //console.log(asfQueryParams)
+                    if (queryCount > 0) {
+                    getAsfDataTitlesByIds(asfQueryParams).then(({ data }) => {
+                        //console.log(data)
+                        for (let i = 0; i < dataList.data.list.length; i++) {
+                        //console.log(dataList.data.list[i])
+                        for (let j = 0; j < data.length; j++) {
+                            //console.log(data[j])
+                            for (let n = 0; n < data[j].list.length; n++) {
+                            if (dataList.data.list[i].id == data[j].list[n].asfMasterId) {
+                                dataList.data.list[i][data[j].field] = data[j].list[n].label;
+                            }
+                            //console.log(data[j].list[n])
+                            }
+                        }
+                        }
+                        tableDataList.value = dataList.data.list;
+                    });
+                    } else {
+                    tableDataList.value = data.data.list;
+                    }
+                } else {
+                    tableDataList.value = data.data.list;
+                }
+
+                //tableDataList.value = data.data.list
+                //liwenxuan 关联表单数据获取 end
+
+                //liwenxuan 关联表单 end
+
                 tableDataList.value.push(...data.data.list)
             }
             
@@ -433,6 +665,7 @@ const reapplyApproval = (val:any) => {
     lookInfo.value = val
     openAppPage.value = true
 }
+
 /**
 @ 作者: 秦东
 @ 时间: 2024-11-22 08:42:48
@@ -486,7 +719,8 @@ defineExpose({
                                 </tr> 
                                 <tr v-else-if="item.attribute!='-'&&item.attribute!='checkBut'&&item.attribute!='check'&&item.attribute!='but'"   @click="openLook(itval)">
                                     <td class="cardInfoTitle leftTdWat">{{item.label}}：</td>
-                                    <td class="cardInfoTitle">{{itval[item.field]}}</td>
+                                    <td v-if="item.fieldClass==='associatedForms'" class="cardInfoTitleAsf" @click="showAsfDetailDialog(item, itval, asfQueryParams); $event.stopPropagation();">{{itval[item.field]}}</td>
+                                    <td v-else class="cardInfoTitle">{{itval[item.field]}}</td><!-- liwenxuan {{itval[item.field]}}-->
                                 </tr> 
                                 <tr v-else-if="item.attribute=='checkBut'&&item.field=='-'">
                                     <td class="cardInfoTitle">
@@ -551,6 +785,7 @@ defineExpose({
             </el-checkbox-group>
             <div v-if="loadingList" class="loading">{{loadText}}</div>
             <AppPageInfo v-model:is-show="openAppPage" :app-info="appContent" :app-page-info="lookInfo" :state-form="stateForm" :app-flow-info="appFlowInfo" :form-table-str="props.formTableStr" @searchData="requeryList" />
+            <AppPageInfo v-model:is-show="asflookPageInfoIsShow" :app-info="asfAppContent" :app-page-info="currentAsfTableDataList[0]" :state-form="stateForm" :app-flow-info="appFlowInfo" :form-table-str="props.formTableStr" @searchData="requeryList" />
         </el-scrollbar> 
 </template>
 <style  lang='scss' scoped>
@@ -583,6 +818,11 @@ defineExpose({
     line-height:20px;
     color: #999999;
 }
+.cardInfoTitleAsf{
+    font-size:14px;
+    line-height:20px;
+    color: #1E61FF
+}
 .loading{
     width:100%;
     text-align: center;

src/views/formTable/taskListPage.vue

@@ -5,6 +5,7 @@
 -->
 <script lang='ts' setup>
 import { useRoute,useRouter } from 'vue-router'
+import request from '@/utils/axios/index'
 import { appPageDataInit } from '@/api/common/type'
 import { tableFormStruct } from '@/api/lowCode/form/type'
 import { gainAppPageInfo,judgeSubmitCancel,gainFormPageListCont } from '@/api/lowCode/form/index'