w-ui-v1 1.1.19 → 1.1.21

package/w-card/w-card.vue

@@ -1,498 +1,509 @@
-
 <script setup lang="ts">
-import WFormMessageBox from '../w-form-message-box/w-form-message-box.vue'
-import {
-  computed,
-  defineProps,
-  ref,
-  defineEmits,
-} from 'vue'
-import { hasY, getValue, downloadFile,getEnumColor } from './utils/utils'
-import { deletePageData } from '../utils/apis/pageConfig'
-import { useMessage, useToast } from 'wot-design-uni'
-import WAudio from '../w-audio/w-audio.vue'
-const emits = defineEmits(['refresh', 'delet', 'edit'])
-const toast = useToast()
-const message = useMessage()
-const props = defineProps({
-  page: {
-    type: Object,
-    required: true,
-  },
-  itemData: {
-    type: Object,
-    required: true,
-  },
-  carIndex: {
-    type: Number,
-    required: true,
-  },
-  sourceId: {
-    type: String,
-    required: true,
-  },
-  applicationType: {
-    type: String,
-    default: ''
-  },
-  actionType: {
-    type: String,
-    default: ''
-  },
-  enumMap:{
-	  type:Object,
-	  default:{}
-  },
-  visible:{
-	  type:Number,
-	  default:null
-  },
-	  
-  editButtonConfig:{
-	  type:Object,
-	  default:{
-		  label:null,
-		  show:null,
-		  clickAction:null
-	  }
-  }
-})
-console.log(props.enumMap)
-//更多按钮
-const moreBtns = computed(() => {
-  let data = []
-  props.page.rowActions?.forEach((element: any) => {
-    if (element.preposes[0]) {
-      if (element.preposes[0].transDefaultValue.includes(props.itemData.fieldMap[element.preposes[0].id])) {
-        data.push({
-          actionType: "submit",
-          name: element.title,
-          color: '#4D81F1',
-          ...element
-        })
-      }
-    } else {
-      data.push({
-        actionType: "submit",
-        name: element.title,
-        color: '#4D81F1',
-        ...element
-      })
-    }
-  });
-
-  props.page.ractions?.forEach((item: any) => {
-    data.push({
-      actionType: "openPage",
-      name: item.title,
-      color: '#4D81F1',
-      ...item
-    })
-  })
-
-  return data
-})
-
-// 处理单项数据、配置
-const items = computed(() => {
-  return props.page.columns?.filter((item: any) => {
-    // 过滤掉操作列
-    return item.title !== '操作'
-  }).filter((item: any) => {
-    // 过滤掉title 中有 'y'字符的列
-    return !hasY(item.title)
-  }).map((item: any) => {
-	  
-    return {
-	  css:getEnumColor(props.enumMap[item.mstrucId],props.itemData?.fieldMap[item.id]),
-      title: item.title,
-      controlType: item.controlType,
-      content: getValue(props.itemData?.fieldMap[item.id], item.title),//格式化数据
-      data: props.itemData?.fieldMap[item.id],
-      id: item.id,
-      mstrucId: item.mstrucId,
-      sourceId: item.sourceId,
-      buttons: item.buttons || []
-    }
-  }) || []
-})
-
-const wFormMessageBoxRef = ref()
-const showMoreButns = ref(false)
-const isExpanded = ref(false)
-const defaultVisible =props.visible|| 4 // 默认显示行数量
-
-const visibleItems = computed(() => {
-  return isExpanded.value ? items.value : items.value.slice(0, defaultVisible)
-})
-
-const showMore = computed(() => {
-  return items.value.length > defaultVisible
-})
-
-function toggleExpand() {
-  isExpanded.value = !isExpanded.value
-}
-
-// 跳转页页面
-function goto(type: string, item: any = {}, subItem: any = {}) {
-
-  switch (type) {
-    case 'detail':
-      uni.navigateTo({
-        url: `/pages/detail/detail?sourceId=${props.sourceId}&code=${props.itemData.code}`,
-      })
-      break
-    case 'link':
-      let code = subItem.value
-
-
-      uni.navigateTo({
-        url: `/pages/detail/detail?sourceId=${item.sourceId}&code=${code}`,
-      })
-      break
-    case 'edit':
-	  
-	  if(props.editButtonConfig.clickAction){
-		  props.editButtonConfig.clickAction(props.itemData)
-		  return
-	  }
-	  
-	
-      if (props.actionType === 'relation') {
-        emits('edit')
-		
-      }
-	  if(props.page.classEditConfigs?.length>0){
-		 let con= props.page.classEditConfigs[0].preposes.find((item:any)=>{
-			  return item.defaultValue.includes(props.itemData.fieldMap[item.id])
-		  })
-		  if(con){
-			  uni.navigateTo({
-			    url: `/pages/edit/edit?sourceId=${props.page.classEditConfigs[0].id}&code=${props.itemData.code}`,
-			  })
-		  }else{
-			  uni.navigateTo({
-			    url: `/pages/edit/edit?sourceId=${props.sourceId}&code=${props.itemData.code}`,
-			  })
-		  }
-		  
-	  }else{
-		  uni.navigateTo({
-		    url: `/pages/edit/edit?sourceId=${props.sourceId}&code=${props.itemData.code}`,
-		  })
-	  }
-      
-      break
-    case 'openPage':
-      uni.navigateTo({
-        url: `/pages/table/table?sourceId=${item.id}&pageTitle=${item.title}&mainCode=${props.itemData.code}`,
-      })
-      break
-  }
-
-}
-
-//删除勾选项
-const delerelation = () => {
-  if (props.actionType === 'relation') {
-    emits('delet')
-  }
-}
-
-//删除
-const dele = () => {
-  message
-    .confirm({
-      msg: '确定删除吗?',
-      title: '删除'
-    })
-    .then(() => {
-      toast.loading('删除中...')
-      deletePageData(props.sourceId, props.itemData.code).then((res: any) => {
-        toast.success('删除成功')
-        emits('refresh')
-      })
-    })
-    .catch(() => {
-      toast.close()
-      console.log('点击了取消按钮')
-    })
-
-}
-
-//更多按钮点击事件
-const moreBtnsSelect = (item: any) => {
-	
-  switch (item.item.actionType) {
-    case 'submit':
-      actionBtn(item.item)
-      break
-    case 'openPage':
-      goto(item.item.actionType, item.item)
-      break
-  }
-}
-
-// 更多按钮操作
-const actionBtn = (item: any) => {
-  wFormMessageBoxRef.value.openFormMessageBox(item)
-}
-
-//格式化title
-const getTitleValue = (value: any, title: string) => {
-  let data=getValue(value, title)?.content
-  if(!data) return ''
-  // 是否为数组
-  if(Array.isArray(data)){
-    return getValue(value, title).content.map((item:any)=>{
-      return item.label
-    }).join(',')
-  }
-  //是否为对象
-  if(typeof data === 'object'){
-    return data?.label?data.label:''
-
-  }
-  return data
-}
-
-//判断编辑按钮是否显示
-function isShowEditButton(){
-	if(props.editButtonConfig.show){
-	  return props.editButtonConfig.show({
-		  data:items.value,
-		  sourceId:props.sourceId
-	  })
-	}else{
-	  return props.page.buttons.includes('dtmplEdit')
+	import WFormMessageBox from '../w-form-message-box/w-form-message-box.vue'
+	import {
+		computed,
+		defineProps,
+		ref,
+		defineEmits,
+	} from 'vue'
+	import { hasY, getValue, downloadFile, getEnumColor } from './utils/utils'
+	import { deletePageData } from '../utils/apis/pageConfig'
+	import { useMessage, useToast } from 'wot-design-uni'
+	import WAudio from '../w-audio/w-audio.vue'
+	const emits = defineEmits(['refresh', 'delet', 'edit'])
+	const toast = useToast()
+	const message = useMessage()
+	const props = defineProps({
+		page: {
+			type: Object,
+			required: true,
+		},
+		itemData: {
+			type: Object,
+			required: true,
+		},
+		carIndex: {
+			type: Number,
+			required: true,
+		},
+		sourceId: {
+			type: String,
+			required: true,
+		},
+		applicationType: {
+			type: String,
+			default: ''
+		},
+		actionType: {
+			type: String,
+			default: ''
+		},
+		enumMap: {
+			type: Object,
+			default: {}
+		},
+		visible: {
+			type: Number,
+			default: null
+		},
+
+		editButtonConfig: {
+			type: Object,
+			default: {
+				label: null,
+				show: null,
+				clickAction: null
+			}
+		}
+	})
+	console.log(props.enumMap)
+	//更多按钮
+	const moreBtns = computed(() => {
+		let data = []
+		props.page.rowActions?.forEach((element : any) => {
+			if (element.preposes[0]) {
+				if (element.preposes[0].transDefaultValue.includes(props.itemData.fieldMap[element.preposes[0].id])) {
+					data.push({
+						actionType: "submit",
+						name: element.title,
+						color: '#4D81F1',
+						...element
+					})
+				}
+			} else {
+				data.push({
+					actionType: "submit",
+					name: element.title,
+					color: '#4D81F1',
+					...element
+				})
+			}
+		});
+
+		props.page.ractions?.forEach((item : any) => {
+			data.push({
+				actionType: "openPage",
+				name: item.title,
+				color: '#4D81F1',
+				...item
+			})
+		})
+
+		return data
+	})
+
+	// 处理单项数据、配置
+	const items = computed(() => {
+		return props.page.columns?.filter((item : any) => {
+			// 过滤掉操作列
+			return item.title !== '操作'
+		}).filter((item : any) => {
+			// 过滤掉title 中有 'y'字符的列
+			return !hasY(item.title)
+		}).map((item : any) => {
+
+			return {
+				css: getEnumColor(props.enumMap[item.mstrucId], props.itemData?.fieldMap[item.id]),
+				title: item.title,
+				controlType: item.controlType,
+				content: getValue(props.itemData?.fieldMap[item.id], item.title),//格式化数据
+				data: props.itemData?.fieldMap[item.id],
+				id: item.id,
+				mstrucId: item.mstrucId,
+				sourceId: item.sourceId,
+				buttons: item.buttons || []
+			}
+		}) || []
+	})
+
+	const wFormMessageBoxRef = ref()
+	const showMoreButns = ref(false)
+	const isExpanded = ref(false)
+	const defaultVisible = props.visible || 4 // 默认显示行数量
+
+	const visibleItems = computed(() => {
+		return isExpanded.value ? items.value : items.value.slice(0, defaultVisible)
+	})
+
+	const showMore = computed(() => {
+		return items.value.length > defaultVisible
+	})
+
+	function toggleExpand() {
+		isExpanded.value = !isExpanded.value
 	}
-   
-}
-
-//编辑按钮文字
-function EditButtonLabel(){
-	if(props.editButtonConfig.label){
-	  return props.editButtonConfig.label({
-		  sourceId:props.sourceId
-	  })
-	}else{
-	  return "编辑"
+
+	// 跳转页页面
+	function goto(type : string, item : any = {}, subItem : any = {}) {
+
+		switch (type) {
+			case 'detail':
+				uni.navigateTo({
+					url: `/pages/detail/detail?sourceId=${props.sourceId}&code=${props.itemData.code}`,
+				})
+				break
+			case 'link':
+				let code = subItem.value
+
+
+				uni.navigateTo({
+					url: `/pages/detail/detail?sourceId=${item.sourceId}&code=${code}`,
+				})
+				break
+			case 'edit':
+
+				if (props.editButtonConfig.clickAction) {
+					props.editButtonConfig.clickAction(props.itemData)
+					return
+				}
+
+
+				if (props.actionType === 'relation') {
+					emits('edit')
+
+				}
+				if (props.page.classEditConfigs?.length > 0) {
+					let con = props.page.classEditConfigs[0].preposes.find((item : any) => {
+						return item.defaultValue.includes(props.itemData.fieldMap[item.id])
+					})
+					if (con) {
+						uni.navigateTo({
+							url: `/pages/edit/edit?sourceId=${props.page.classEditConfigs[0].id}&code=${props.itemData.code}`,
+						})
+					} else {
+						uni.navigateTo({
+							url: `/pages/edit/edit?sourceId=${props.sourceId}&code=${props.itemData.code}`,
+						})
+					}
+
+				} else {
+					uni.navigateTo({
+						url: `/pages/edit/edit?sourceId=${props.sourceId}&code=${props.itemData.code}`,
+					})
+				}
+
+				break
+			case 'openPage':
+				uni.navigateTo({
+					url: `/pages/table/table?sourceId=${item.id}&pageTitle=${item.title}&mainCode=${props.itemData.code}`,
+				})
+				break
+		}
+
+	}
+
+	//删除勾选项
+	const delerelation = () => {
+		if (props.actionType === 'relation') {
+			emits('delet')
+		}
+	}
+
+	//删除
+	const dele = () => {
+		message
+			.confirm({
+				msg: '确定删除吗?',
+				title: '删除'
+			})
+			.then(() => {
+				toast.loading('删除中...')
+				deletePageData(props.sourceId, props.itemData.code).then((res : any) => {
+					toast.success('删除成功')
+					emits('refresh')
+				})
+			})
+			.catch(() => {
+				toast.close()
+				console.log('点击了取消按钮')
+			})
+
+	}
+
+	//更多按钮点击事件
+	const moreBtnsSelect = (item : any) => {
+
+		switch (item.item.actionType) {
+			case 'submit':
+				actionBtn(item.item)
+				break
+			case 'openPage':
+				goto(item.item.actionType, item.item)
+				break
+		}
+	}
+
+	// 更多按钮操作
+	const actionBtn = (item : any) => {
+		wFormMessageBoxRef.value.openFormMessageBox(item)
+	}
+
+	//格式化title
+	const getTitleValue = (value : any, title : string) => {
+		let data = getValue(value, title)?.content
+		if (!data) return ''
+		// 是否为数组
+		if (Array.isArray(data)) {
+			return getValue(value, title).content.map((item : any) => {
+				return item.label
+			}).join(',')
+		}
+		//是否为对象
+		if (typeof data === 'object') {
+			return data?.label ? data.label : ''
+
+		}
+		return data
+	}
+
+	//判断编辑按钮是否显示
+	function isShowEditButton() {
+		if (props.editButtonConfig.show) {
+			return props.editButtonConfig.show({
+				data: items.value,
+				sourceId: props.sourceId
+			})
+		} else {
+			return props.page.buttons.includes('dtmplEdit')
+		}
+
+	}
+
+	//编辑按钮文字
+	function EditButtonLabel() {
+		if (props.editButtonConfig.label) {
+			return props.editButtonConfig.label({
+				sourceId: props.sourceId
+			})
+		} else {
+			return "编辑"
+		}
+
 	}
-   
-}
 </script>
 
 <template>
-  <wd-card >
-	<template #title>
-		<view >
-			<view class="card-title-class">
-			   <view class="title-icon"></view>
-			   <view style="flex: 1; word-break:break-all">
-			   	{{getTitleValue(visibleItems.find((item) => item.id === page.primaryColumn?.id), page.primaryColumn?.title) || ' '}}
-			   </view>
-			   <!-- <view class="status-icon">
+	<wd-card>
+		<template #title>
+			<view>
+				<view class="card-title-class">
+					<view class="title-icon"></view>
+					<view style="flex: 1; word-break:break-all">
+						{{getTitleValue(visibleItems.find((item) => item.id === page.primaryColumn?.id), page.primaryColumn?.title) ||getTitleValue(visibleItems[0], '')}}
+					</view>
+					<!-- <view class="status-icon">
 			   	已完成成成
 			   </view> -->
-			   <wd-tag style="font-size: 15px;padding:0 4px;" :bg-color="getEnumColor(enumMap[page.labelColumn.mstrucId],itemData.fieldMap[page.labelColumn.id]).color" v-if="page.labelColumn?.id">
-			   {{
-				   itemData.fieldMap[page.labelColumn.id]
-			   }}
-			   </wd-tag>
-			</view>
-			<view style="font-size: 12px;margin-top: 8px;color: #ffaa00;">
-				{{getTitleValue(visibleItems.find((item) => item.id === page.secondColumn?.id), page.secondColumn?.title)}}
+					<wd-tag style="font-size: 15px;padding:0 4px;"
+						:bg-color="getEnumColor(enumMap[page.labelColumn.mstrucId],itemData.fieldMap[page.labelColumn.id]).color"
+						v-if="page.labelColumn?.id">
+						{{
+				           itemData.fieldMap[page.labelColumn.id]
+			            }}
+					</wd-tag>
+				</view>
+				<view style="font-size: 12px;margin-top: 8px;color: #ffaa00;">
+					{{getTitleValue(visibleItems.find((item) => item.id === page.secondColumn?.id), page.secondColumn?.title)}}
+				</view>
 			</view>
-		</view>
-	    
-	  </template>
-	
-    <view class="table_collapse">
-      <view v-for="(item, index) in visibleItems" :key="index" class="cloum">
-
-        <!-- // 标题 -->
-        <view class="lable">
-          <text class="lable">{{ item.title }}:</text>
-        </view>
-
-        <!-- // 图片 -->
-        <wd-img v-if="item.content?.type === '图片'" width="100rpx" height="100rpx" :src="item.content.url"
-          :enable-preview="true" />
-        <view v-else-if="item.title === '序号'">
-          {{
+
+		</template>
+
+		<view class="table_collapse">
+			<view v-for="(item, index) in visibleItems" :key="index" class="cloum">
+
+				<!-- // 标题 -->
+				<view class="lable">
+					<text class="lable">{{ item.title }}:</text>
+				</view>
+
+				<!-- // 图片 -->
+				<wd-img v-if="item.content?.type === '图片'" width="100rpx" height="100rpx" :src="item.content.url"
+					:enable-preview="true" />
+				<view v-else-if="item.title === '序号'">
+					{{
             carIndex + 1
           }}
-        </view>
-
-        <!-- //文件 -->
-        <view v-else-if="item.content?.type === '文件'" class="value">
-          <wd-text type="primary" @click="downloadFile(item.content.url)" :text="item.content?.name" />
-        </view>
-
-        <!-- // 音频 -->
-        <WAudio v-else-if="item.content?.type === '音频'" :src="item.content?.url" />
-        <!-- // 链接 -->
-        <view v-else-if="item.buttons.includes('detail')" class="link">
-          <view v-if="Array.isArray(item.content)" @click="goto('link', item, subItem)"
-            v-for="(subItem, subIndex) in item.content" :key="subIndex">
-            <text> {{ subItem.label }}</text>
-          </view>
-          <view v-else @click="goto('link', item, item.content)">{{ item.content?.label ? item.content?.label :
+				</view>
+
+				<!-- //文件 -->
+				<view v-else-if="item.content?.type === '文件'" class="value">
+					<wd-text type="primary" @click="downloadFile(item.content.url)" :text="item.content?.name" />
+				</view>
+
+				<!-- // 音频 -->
+				<WAudio v-else-if="item.content?.type === '音频'" :src="item.content?.url" />
+				<!-- // 链接 -->
+				<view v-else-if="item.buttons.includes('detail')" class="link">
+					<view v-if="Array.isArray(item.content)" @click="goto('link', item, subItem)"
+						v-for="(subItem, subIndex) in item.content" :key="subIndex">
+						<text> {{ subItem.label }}</text>
+					</view>
+					<view v-else @click="goto('link', item, item.content)">{{ item.content?.label ? item.content?.label :
             item.content }}</view>
-        </view>
-
-        <view v-else-if="Array.isArray(item.content)" class="value">
-          <view v-for="(subItem, subIndex) in item.content" :key="subIndex">
-            <text> {{ subItem.label }}</text>
-          </view>
-        </view>
-
-      <view v-else class="value" :style="item.css"  v-html="item.content?.label ? item.content?.label : item.content">
-          
-        </view>
-		
-        
-      </view>
-      <view class="expand-btn-container">
-        <wd-button v-if="showMore" type="icon" :icon="isExpanded ? 'arrow-up' : 'arrow-down'" size="small"
-          @click="toggleExpand" />
-      </view>
-
-    </view>
-    <template #footer>
-      <view class="btns-box">
-        <wd-button :round="false" size="small" class="btn"  v-if="props.page.buttons.includes('detail')" @click="goto('detail')">
-          详情
-        </wd-button>
-		<!-- //编辑按钮 -->
-        <wd-button :round="false" type="warning" size="small" class="btn"  v-if="isShowEditButton()"
-          @click="goto('edit')">
-          {{EditButtonLabel()}}
-        </wd-button>
-        <!-- //假删除按钮，在新增、编辑页面才会出现 -->
-        <wd-button :round="false" size="small" class="btn"  type="error" @click="delerelation"
-          v-if="props.actionType === 'relation'&&props.page.buttons.includes('singleDelete')">
-          删除
-        </wd-button>
-        <wd-button :round="false" size="small" class="btn"  type="error" @click="dele"
-          v-else-if="props.page.buttons.includes('singleDelete')">
-          删除
-        </wd-button>
-        <view :round="false" v-if="moreBtns.length > 0">
-          <wd-button :round="false" type='info' size="small"  @click="showMoreButns = true">
-            更多
-          </wd-button>
-        </view>
-      </view>
-    </template>
-  </wd-card>
-  <wd-toast />
-  <wd-message-box />
-  <WFormMessageBox ref="wFormMessageBoxRef" :itemData="props.itemData" @refresh="emits('refresh')" />
-  <!-- 更多按钮 -->
-  <wd-action-sheet v-model="showMoreButns" :actions="moreBtns" @select="moreBtnsSelect" />
+				</view>
+
+				<!-- 数组 -->
+				<view v-else-if="Array.isArray(item.content)" class="value">
+					<text v-for="(subItem, subIndex) in item.content" :key="subIndex">
+						<text v-if="subIndex>0">，</text>
+						{{ subItem.label }}
+					</text>
+				</view>
+
+				<view v-else class="value" :style="item.css"
+					v-html="item.content?.label ? item.content?.label : item.content">
+
+				</view>
+
+
+			</view>
+			<view class="expand-btn-container">
+				<wd-button v-if="showMore" type="icon" :icon="isExpanded ? 'arrow-up' : 'arrow-down'" size="small"
+					@click="toggleExpand" />
+			</view>
+
+		</view>
+		<template #footer>
+			<view class="btns-box">
+				<wd-button :round="false" size="small" class="btn" v-if="props.page.buttons.includes('detail')"
+					@click="goto('detail')">
+					详情
+				</wd-button>
+				<!-- //编辑按钮 -->
+				<wd-button :round="false" type="warning" size="small" class="btn" v-if="isShowEditButton()"
+					@click="goto('edit')">
+					{{EditButtonLabel()}}
+				</wd-button>
+				<!-- //假删除按钮，在新增、编辑页面才会出现 -->
+				<wd-button :round="false" size="small" class="btn" type="error" @click="delerelation"
+					v-if="props.actionType === 'relation'&&props.page.buttons.includes('singleDelete')">
+					删除
+				</wd-button>
+				<wd-button :round="false" size="small" class="btn" type="error" @click="dele"
+					v-else-if="props.page.buttons.includes('singleDelete')">
+					删除
+				</wd-button>
+				<view :round="false" v-if="moreBtns.length > 0">
+					<wd-button :round="false" type='info' size="small" @click="showMoreButns = true">
+						更多
+					</wd-button>
+				</view>
+			</view>
+		</template>
+	</wd-card>
+	<wd-toast />
+	<wd-message-box />
+	<WFormMessageBox ref="wFormMessageBoxRef" :itemData="props.itemData" @refresh="emits('refresh')" />
+	<!-- 更多按钮 -->
+	<wd-action-sheet v-model="showMoreButns" :actions="moreBtns" @select="moreBtnsSelect" />
 </template>
 
 <style lang="scss" scoped>
-.table_collapse {
-
-  color: #000;
-  // background-color: #F8F8F8;
-  padding:0 0 20rpx 0;
-
-  /* 添加过渡动画 */
-  .cloum {
-    display: flex;
-    transition: all 0.3s ease;
-    overflow: hidden;
-    max-height: 100px;
-    color: #A6A6A6;
-    // border-bottom: 1px solid #e8e5e5;
-    padding: 8rpx 10rpx;
-
-    .lable {
-      white-space: nowrap !important;
-      // font-weight: 600;
-      text-align: left;
-      margin-right: 20rpx;
-    }
-
-    .value {
-      color: #000;
-      // text-align: justify;  /* 文字两端对齐 */
-      // word-break: break-all; /* 强制英文/数字换行时断词 */
-      word-break: break-all;
-      /* 所有字符（包括中文）强制换行 */
-      white-space: normal;
-      /* 确保不保留空白符 */
-    }
-
-  }
-
-  position: relative; // 添加定位上下文
-  padding-bottom: 20rpx; // 为按钮预留空间
-
-  .expand-btn-container {
-    /* 尺寸调整 */
-    padding: 8rpx 20rpx;
-    font-size: 24rpx;
-    line-height: 1.2;
-
-    /* 定位调整 */
-    position: absolute;
-    right: 50%;
-    transform: translateX(50%);
-    bottom: -23px;
-    width: auto !important;
-    margin-top: 0;
-
-    /* 视觉样式 */
-    // background: #ffffff;
-    // border: 1px solid #ebedf0;
-    // border-radius: 16rpx;
-    // box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
-  }
-
-  .link {
-    color: #4d80f0;
-  }
- 
-
-}
-.card-title-class{
-	display: flex;
-	align-items: center;
-    font-weight: 700 ;
-	gap: 4px;
-	
-  }
-  .title-icon{
-	  width: 8px;
-	  height: 8px;
-	  border-radius: 100%;
-	  background-color: #4d80f0;
-  }
-  .status-icon{
-	  box-sizing: border-box;
-	  padding: 4px 15px;
-	  transform: rotate(45deg) translate(15px,-15px);
-	  text-align: center;
-	  color: #fff;
-	  font-size: 12px;
-	  // width: 85px;
-	  // height: 15px;
-	  background-color: #4d80f0;
-	  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
-  }
-.btn {
-  margin-left: 10rpx;
-}
-
-.btns-box {
-  display: flex;
-  justify-content: flex-end;
-  flex-wrap: wrap;
-  gap: 5px;
-}
-</style>
+	.table_collapse {
+
+		color: #000;
+		// background-color: #F8F8F8;
+		padding: 0 0 20rpx 0;
+
+		/* 添加过渡动画 */
+		.cloum {
+			// display: flex;
+			transition: all 0.3s ease;
+			overflow: hidden;
+			max-height: 100px;
+			color: #919191;
+			// border-bottom: 1px solid #e8e5e5;
+			padding: 8rpx 10rpx;
+
+			.lable {
+				min-width: 50px;
+				// white-space: nowrap !important;
+				// font-weight: 600;
+				text-align: left;
+				margin-right: 20rpx;
+			}
+
+			.value {
+				color: #000;
+				font-weight: 600;
+				// text-align: justify;  /* 文字两端对齐 */
+				// word-break: break-all; /* 强制英文/数字换行时断词 */
+				word-break: break-all;
+				/* 所有字符（包括中文）强制换行 */
+				white-space: normal;
+				/* 确保不保留空白符 */
+			}
+
+		}
+
+		position: relative; // 添加定位上下文
+		padding-bottom: 20rpx; // 为按钮预留空间
+
+		.expand-btn-container {
+			/* 尺寸调整 */
+			padding: 8rpx 20rpx;
+			font-size: 24rpx;
+			line-height: 1.2;
+
+			/* 定位调整 */
+			position: absolute;
+			right: 50%;
+			transform: translateX(50%);
+			bottom: -23px;
+			width: auto !important;
+			margin-top: 0;
+
+			/* 视觉样式 */
+			// background: #ffffff;
+			// border: 1px solid #ebedf0;
+			// border-radius: 16rpx;
+			// box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+		}
+
+		.link {
+			color: #4d80f0;
+		}
+
+
+	}
+
+	.card-title-class {
+		display: flex;
+		align-items: center;
+		font-weight: 700;
+		gap: 4px;
+
+	}
+
+	.title-icon {
+		width: 8px;
+		height: 8px;
+		border-radius: 100%;
+		background-color: #4d80f0;
+	}
+
+	.status-icon {
+		box-sizing: border-box;
+		padding: 4px 15px;
+		transform: rotate(45deg) translate(15px, -15px);
+		text-align: center;
+		color: #fff;
+		font-size: 12px;
+		// width: 85px;
+		// height: 15px;
+		background-color: #4d80f0;
+		clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
+	}
+
+	.btn {
+		margin-left: 10rpx;
+	}
+
+	.btns-box {
+		display: flex;
+		justify-content: flex-end;
+		flex-wrap: wrap;
+		gap: 5px;
+	}
+</style>