From 611cbaf4c10b23f7428836b95335ce953270485e Mon Sep 17 00:00:00 2001
From: herenshan112 <herenshan112@163.com>
Date: Thu, 18 Jul 2024 15:20:06 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=A1=E7=89=87=E8=A7=86=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DesignForm/app/cardPage.vue    | 195 ++++++++++++++++--
 .../DesignForm/public/form/formGroup.vue      |   2 +-
 src/types/components.d.ts                     |   3 +
 3 files changed, 180 insertions(+), 20 deletions(-)

diff --git a/src/components/DesignForm/app/cardPage.vue b/src/components/DesignForm/app/cardPage.vue
index 32a2b3db4..fdbba7178 100644
--- a/src/components/DesignForm/app/cardPage.vue
+++ b/src/components/DesignForm/app/cardPage.vue
@@ -4,6 +4,7 @@
 @ 备注: 卡片视图
 -->
 <script lang='ts' setup>
+import type { ComponentSize } from 'element-plus'
 const props = defineProps({
 	searchSend:{
 		type:Object,
@@ -22,42 +23,198 @@ const props = defineProps({
 		default:0
 	}
 });
-
+const size = ref<ComponentSize>('default')
 const lineRanks = ref(1)
+const imgBox = computed(() => {
+	let cssStyle:any = {}
+	if(props.viewSetup.form.imgWidth != 0){
+		cssStyle['width'] = props.viewSetup.form.imgWidth + "px";
+	}else{
+		cssStyle['width'] = "50px";
+	}
+	if(props.viewSetup.form.imgHeight != 0){
+		cssStyle['height'] = props.viewSetup.form.imgHeight + "px";
+	}else{
+		cssStyle['height'] = "50px";
+	}
+	
+	return  cssStyle
+})
+/**
+@ 作者: 秦东
+@ 时间: 2024-07-18 14:26:46
+@ 功能: 图像设定Css
+*/
+const imgStyle = computed(() => {
+	let cssStyle:any = {}
+	cssStyle['border'] = "1px solid #ccc";
+	cssStyle['border-radius'] = props.viewSetup.form.imgBorderRadius + "px";
+	cssStyle['padding'] = props.viewSetup.form.imgPadding + "px";
+	if(props.viewSetup.form.imgWidth != 0){
+		cssStyle['width'] = props.viewSetup.form.imgWidth + "px";
+	}else{
+		cssStyle['width'] = "50px";
+	}
+	if(props.viewSetup.form.imgHeight != 0){
+		cssStyle['height'] = props.viewSetup.form.imgHeight + "px";
+	}else{
+		cssStyle['height'] = "50px";
+	}
+	console.log("自定义样式",cssStyle)
+	return  cssStyle
+})
 
+/**
+@ 作者: 秦东
+@ 时间: 2024-07-18 14:26:57
+@ 功能: 内容设定css
+*/
+const cardInfoBox = computed(() => {
+	let cssStyle:any = {}
+	
+	cssStyle['width'] = (Math.round(24/props.viewSetup.form.ranks) - props.viewSetup.form.imgWidth) + "px";
+	return  cssStyle
+})
 onMounted(()=>{
 	lineRanks.value = Math.round(24/props.viewSetup.form.ranks)
 })
+// const url = ref()
+// const srcList = ref([])
+const handleSizeChange = (val: number) => {
+  console.log(`${val} items per page`)
+}
+const handleCurrentChange = (val: number) => {
+  console.log(`current page: ${val}`)
+}
 
+const url =
+  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
+const srcList = (url:string) =>{
+	return [url]
+	return [
+		'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+		'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+		'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+		'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+		'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+		'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+		'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
+	]
+} 
 </script>
 <template>
 	<div>
-	{{lineRanks}}--
 
 		<el-row :gutter="20">
-			<el-col :span="lineRanks">
+			
+			<el-col :span="lineRanks"  class="cardBox">
+				
 				<el-card >
-					<table>
-						<tr>
-							<td rowspan="2">1</td>
-							<td>2</td>
-						</tr>
-						<tr>
-							<td>4</td>
-						</tr>
-					</table>
+					<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-col :span="lineRanks">1</el-col>
-			<el-col :span="lineRanks">2</el-col>
-			<el-col :span="lineRanks">3</el-col>
-			<el-col :span="lineRanks">4</el-col>
-			<el-col :span="lineRanks">5</el-col>
-			<el-col :span="lineRanks">6</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>
+		<div class="pageBox">
+			<el-pagination
+				v-model:current-page="props.searchSend.page"
+				v-model:page-size="props.searchSend.pagesize"
+				:page-sizes="[100, 200, 300, 400]"
+				:size="size"
+				:background="true"
+				layout="total, sizes, prev, pager, next, jumper"
+				:total="400"
+				@size-change="handleSizeChange"
+				@current-change="handleCurrentChange"
+				class="page"
+			/>
+		</div>
+
 	</div>
 	
 </template>
 <style  lang='scss' scoped>
-
+.demo-image__error .image-slot {
+  font-size: 30px;
+}
+.demo-image__error .image-slot .el-icon {
+  font-size: 30px;
+}
+.demo-image__error .el-image {
+  width: 100%;
+  height: 200px;
+}
+.cardBox{
+	padding: 10px 0 5px 0;
+	:deep .el-card__body{
+		padding:10px;
+	}
+	.title{
+		font-size:14px;
+		font-weight:bold;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.content{
+		color: #909399;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.cardContBox{
+		display: flex;
+		width: 100%;
+		justify-content: flex-start;
+	}
+	.cardInfo{
+		padding-left: 5px;
+	}
+	
+}
+.pageBox{
+	display:flex;
+	justify-content: center;
+	width: 100%;
+	text-align: center;
+	margin-top: 10px;
+}
 </style>
diff --git a/src/components/DesignForm/public/form/formGroup.vue b/src/components/DesignForm/public/form/formGroup.vue
index 982290b29..acdc3350c 100644
--- a/src/components/DesignForm/public/form/formGroup.vue
+++ b/src/components/DesignForm/public/form/formGroup.vue
@@ -374,7 +374,7 @@ onMounted(()=>{
 })
 
 const getFormItemLableStyle = (ele: any) => {
-    if(ele?.labelStyle){
+    if(ele?.labelStyle){ 
     //   console.log("返回栅格宽度3",AnalysisCss(ele?.labelStyle))
       return AnalysisCss(ele?.labelStyle)
     }
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index b8dbee5e1..a8a381a44 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -124,9 +124,12 @@ declare module '@vue/runtime-core' {
     HeadToolsNew: typeof import('./../components/DesignForm/public/headToolsNew.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
     IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
+    IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
     IEpClose: typeof import('~icons/ep/close')['default']
+    IEpDelete: typeof import('~icons/ep/delete')['default']
     IEpEdit: typeof import('~icons/ep/edit')['default']
     IEpMessageBox: typeof import('~icons/ep/message-box')['default']
+    IEpPlus: typeof import('~icons/ep/plus')['default']
     IEpRefresh: typeof import('~icons/ep/refresh')['default']
     IEpSearch: typeof import('~icons/ep/search')['default']
     IEpSetting: typeof import('~icons/ep/setting')['default']