完成卡片视图

src/components/DesignForm/app/cardPage.vue

@@ -5,6 +5,9 @@
 -->
 <script lang='ts' setup>
 import type { ComponentSize } from 'element-plus'
+import { gainFormPageListCont } from '@/api/DesignForm/requestapi'
+import FormPageCont from '@/components/DesignForm/tableListPage/formPageCont.vue'
+
 const props = defineProps({
 	searchSend:{
 		type:Object,
@@ -18,6 +21,12 @@ const props = defineProps({
 			return {}
 		}
 	},
+	columnsFilter:{
+		type:Object,
+		default(){
+			return {}
+		}
+	},
 	drawerWith:{
 		type:Number,
 		default:0
@@ -77,14 +86,23 @@ const cardInfoBox = computed(() => {
 })
 onMounted(()=>{
 	lineRanks.value = Math.round(24/props.viewSetup.form.ranks)
+	nextTick(()=>{
+		getCardList(props.searchSend)
+	})
 })
 // const url = ref()
 // const srcList = ref([])
 const handleSizeChange = (val: number) => {
-  console.log(`${val} items per page`)
+//   console.log(`${val} items per page`)\
+	props.searchSend.page = 1
+  	props.searchSend.pagesize = val
+//   console.log(props.searchSend.pagesize)
+	getCardList(props.searchSend)
 }
 const handleCurrentChange = (val: number) => {
-  console.log(`current page: ${val}`)
+//   console.log(`current page: ${val}`)
+  props.searchSend.page = val
+  getCardList(props.searchSend)
 }
 
 const url =
@@ -101,56 +119,114 @@ const srcList = (url:string) =>{
 		'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
 	]
 } 
+const cardDataList = ref([]) // 表格行数据
+const totalNum = ref(0)
+/**
+@ 作者: 秦东
+@ 时间: 2024-07-19 09:32:11
+@ 功能: 获取数据
+*/
+const getCardList = (val:any) => {
+	val.viewClass = {
+		class:"card"
+	}
+	gainFormPageListCont(val)
+		.then(({data})=>{
+			totalNum.value = data.total
+			console.log("卡片获取数据--》",data)
+			cardDataList.value = data.list
+		})
+}
+defineExpose({
+	getCardList
+})
+
+/**
+@ 作者: 秦东
+@ 时间: 2024-07-19 10:03:53
+@ 功能: 获取图片显示
+*/
+const imgSrcPath = (val:any) => {
+	console.log("获取图片显示", val[props.viewSetup.form.imgWork])
+	if(val[props.viewSetup.form.imgWork]){
+		return val[props.viewSetup.form.imgWork]
+	}
+	return ""
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-07-19 10:03:53
+@ 功能: 获取图片数组显示
+*/
+const imgSrcAry = (val:any) => {
+	if(val[props.viewSetup.form.imgWork]){
+		if (val[props.viewSetup.form.imgWork] != ""){
+			return [val[props.viewSetup.form.imgWork]]
+		}else{
+			return []
+		}
+		
+	}
+	return []
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-07-19 10:24:33
+@ 功能: 获取内容
+*/
+const cardInfo = (val:any,cla:string) => {
+	if(cla=="title"){
+		if(val[props.viewSetup.form.titleWork]){
+			return val[props.viewSetup.form.titleWork]
+		}
+	}else if(cla=="content"){
+		if(val[props.viewSetup.form.describe]){
+			return val[props.viewSetup.form.describe]
+		}
+	}
+	return ""
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-03 13:24:06
+@ 功能: 查看详细内容
+*/
+const tablePageClass = ref(1)
+const lookPageInfoIsShow = ref(false)
+const pageInfoCont = ref<any>()
+const lookPageInfo = (val:any) => {
+	tablePageClass.value = 4;
+	pageInfoCont.value = val
+	lookPageInfoIsShow.value = true;	
+}
 </script>
 <template>
 	<div>
-
 		<el-row :gutter="20">
 			
-			<el-col :span="lineRanks"  class="cardBox">
+			<el-col  v-for="item in cardDataList" :key="item.id" :span="lineRanks"  class="cardBox">
 				
-				<el-card >
+				<el-card @click="lookPageInfo(item)">
 					<div class="cardContBox">
 						<el-image
 							:style="imgStyle"
-							:src="url"
+							:src="imgSrcPath(item)"
 							:zoom-rate="1.2"
 							:max-scale="7"
 							:min-scale="0.2"
-							:preview-src-list="srcList(url)"
+							:preview-src-list="imgSrcAry(item)"
 							:initial-index="4"
 							fit="cover"
 						/>
 						<div class="cardInfo" :style="'width: calc(100% - '+props.viewSetup.form.imgWidth+'px); height:'+props.viewSetup.form.imgHeight+'px; overflow: hidden;' ">
-							<div class="title">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</div>
-							<div class="content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
+							<div class="title">{{ cardInfo(item,"title") }}</div>
+							<div class="content">{{ cardInfo(item,"content") }}</div>
 						</div>
 					</div>
 				</el-card>
 			
 			</el-col>
-			<el-col :span="lineRanks"  class="cardBox">
-				
-				<el-card >
-					<div class="cardContBox">
-						<el-image
-							:style="imgStyle"
-							:src="url"
-							:zoom-rate="1.2"
-							:max-scale="7"
-							:min-scale="0.2"
-							:preview-src-list="srcList(url)"
-							:initial-index="4"
-							fit="cover"
-						/>
-						<div class="cardInfo" :style="'width: calc(100% - '+props.viewSetup.form.imgWidth+'px); height:'+props.viewSetup.form.imgHeight+'px; overflow: hidden;' ">
-							<div class="title">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</div>
-							<div class="content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
-						</div>
-					</div>
-				</el-card>
 			
-			</el-col>
 			
 			
 		</el-row>
@@ -158,17 +234,17 @@ const srcList = (url:string) =>{
 			<el-pagination
 				v-model:current-page="props.searchSend.page"
 				v-model:page-size="props.searchSend.pagesize"
-				:page-sizes="[100, 200, 300, 400]"
+				:page-sizes="[3, 9, 12, 30, 50, 100]"
 				:size="size"
 				:background="true"
 				layout="total, sizes, prev, pager, next, jumper"
-				:total="400"
+				:total="totalNum"
 				@size-change="handleSizeChange"
 				@current-change="handleCurrentChange"
 				class="page"
 			/>
 		</div>
-
+		<FormPageCont v-model:is-show="lookPageInfoIsShow" :drawer-with="props.drawerWith" :page-info="pageInfoCont" :table-page-class="tablePageClass" :oper-state="operState" @getPageData="getPageData" />
 	</div>
 	
 </template>

src/components/DesignForm/app/index.vue

@@ -302,6 +302,7 @@ watch(()=>props.formId,(val:any)=>{
 
 const timeAxisRef = ref(null)
 const calendarPageRef = ref(null)
+const cardPageRef = ref(null)
 const searchSend = reactive({
 	formId:props.formId,
 	page:state.currentPage,
@@ -346,6 +347,11 @@ const getPageData = () => {
 			break;
 		case 5:
 			break;
+		case 6:
+			nextTick(()=>{
+				cardPageRef.value.getCardList(sendData)
+			})
+			break;
 		default:
 			state.loading = true;
 			gainFormPageListCont(sendData)
@@ -1123,7 +1129,7 @@ const tabsView = (val:any,types:number) => {
 				</div>
 			</el-col>
 			<el-col  v-if="viewType==2" :span="24">
-				<CalendarPage  ref="calendarPageRef"  :search-send="searchSend" :body-hight="265" :drawer-with="drawerWith"  />
+				<CalendarPage  ref="calendarPageRef"  :search-send="searchSend" :body-hight="265" :drawer-with="drawerWith" :view-setup="viewPage.card"  />
 			</el-col>
 			<el-col  v-if="viewType==3" :span="24">
 				<TimeAxisPage  ref="timeAxisRef" :data="tableDataList" :view-layout="viewLayout" :columns-filter="columnsFilter" :search-send="searchSend" :drawer-with="drawerWith" />
@@ -1135,7 +1141,7 @@ const tabsView = (val:any,types:number) => {
 				<MapPage ref="mapPageRef" :search-send="searchSend" :drawer-with="drawerWith" :view-setup="viewPage.map" />
 			</el-col>
 			<el-col  v-if="viewType==6" :span="24">
-				<CardPage ref="cardPageRef" :search-send="searchSend" :drawer-with="drawerWith" :view-setup="viewPage.card" />
+				<CardPage ref="cardPageRef" :search-send="searchSend" :drawer-with="drawerWith" :view-setup="viewPage.card"  :columns-filter="columnsFilter"  />
 			</el-col>
 			<el-col :span="24" style="display:none">
 				<el-button-group>

src/components/DesignForm/tableListPage/index.vue

@@ -292,6 +292,7 @@ watch(()=>props.lookPageIsShow,(val:boolean)=>{
 
 const timeAxisRef = ref(null)
 const calendarPageRef = ref(null)
+const cardPageRef = ref(null)
 const searchSend = reactive({
 	formId:props.formId,
 	page:state.currentPage,
@@ -317,82 +318,111 @@ const getPageData = () => {
 		//searchData:"id:1"
 	}
 	console.log("获取列表详细信息",sendData)
-	gainFormPageListCont(sendData)
-		.then((data)=>{
 
-			//console.log("获取列表详细信息----------------->",data)
-			//liwenxuan 关联表单数据获取 start
+	switch(viewType.value){
+		case 2:
+			nextTick(()=>{
+				// console.log("获取列表详细信息-------555---------->",calendarPageRef.value)
+				calendarPageRef.value.calendarSearchData(sendData)
+			})
+			// calendarPageRef.value.calendarSearchData()
+			break;
+		case 3:
+			nextTick(()=>{
+				// console.log("获取列表详细信息-------222---------->",timeAxisRef.value)
+				timeAxisRef.value.searchTimeList(sendData,1)
+			})
 			
-			let dataList = data
-			//console.log(dataList)
-			asfDetails = props.data.columns.filter((item: any) => {
-				return item.fieldClass=="associatedForms"
+			break;
+		case 4:
+			break;
+		case 5:
+			break;
+		case 6:
+			nextTick(()=>{
+				cardPageRef.value.getCardList(sendData)
 			})
+			break;
+		default:
 
+			gainFormPageListCont(sendData)
+				.then((data)=>{
 					
-			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
+					//console.log("获取列表详细信息----------------->",data)
+					//liwenxuan 关联表单数据获取 start
 					
-					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
+					let dataList = data
+					//console.log(dataList)
+					asfDetails = props.data.columns.filter((item: any) => {
+						return item.fieldClass=="associatedForms"
+					})
 					
-						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])
-								}
 					
+					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 = []
+							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)
 						}
-						tableDataList.value = dataList.data.list
+						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])
+										}
 										
-					});
-				}else{
-					tableDataList.value = data.data.list
-				}
 										
-			}else{
-				tableDataList.value = data.data.list
+									}
+								}
+								tableDataList.value = dataList.data.list
 								
-			}
-			//liwenxuan 关联表单数据获取 end
-			state.total = data.data.total
-			state.loading = false;
-		})
-		.finally(()=>{
-			state.loading = false;
-		})
+							});
+						}else{
+							tableDataList.value = data.data.list
+						}
+						
+					}else{
+						tableDataList.value = data.data.list
+						
+					}
+					//liwenxuan 关联表单数据获取 end
+					state.total = data.data.total
+					state.loading = false;
+				})
+				.finally(()=>{
+					state.loading = false;
+				})
+
+	}
 }
 
 
@@ -1099,7 +1129,7 @@ const tabsView = (val:any,types:number) => {
 				<MapPage ref="mapPageRef" :search-send="searchSend" :drawer-with="drawerWith" :view-setup="viewPage" />
 			</el-col>
 			<el-col  v-if="viewType==6" :span="24">
-				<CardPage ref="cardPageRef" :search-send="searchSend" :drawer-with="drawerWith" :view-setup="viewPage" />
+				<CardPage ref="cardPageRef" :search-send="searchSend" :drawer-with="drawerWith" :view-setup="viewPage"  :columns-filter="columnsFilter"  />
 			</el-col>
 			<el-col :span="24"  style="display:none">