jnpf_app/pages/apply/dynamicModel/components/list/list.vue

<template>
	<view class="list u-p-b-20 u-p-l-20 u-p-r-20" ref="tableRef">
		<view class="list-box">
			<SwipeItem :list="list" :buttons="options" @action="actionClick" ref="swipeItem" :marginB="20">
				<template v-slot="{ item }">
					<view class="item" @tap.stop="goDetail(item)">
						<view class="item-content">
							<!-- 左侧信息区 -->
							<view class="item-left">
								<!-- 单号 + 普通标签（核心修改区域） -->
								<view class="item-row item-header">
									<!-- 新增：普通标签 -->
									<view class="flow-tag">单号</view>
									<text class="content unit-name">{{ item.billNo }}</text>
								</view>
								<view class="item-row">
									<text class="label">申请单位:</text>
									<text class="content unit-name">{{ item.applyDepName  }}</text>
								</view>
								<view class="item-row">
									<text class="label">申请人员:</text>
									<text class="content">{{ item.applyUser}}</text>
								</view>
								<view class="item-row">
									<text class="label">创建时间:</text>
									<text class="content">{{ formatTime(item.create_time) }}</text>
								</view>
							</view>

							<!-- 右侧状态图 -->
							<view class="item-right">
								<image 
									v-if="item.approveStatusName == '未审核'"
									src="../../img/UNAPPROVED.png" 
									mode="widthFix" 
									class="status-img" />
								<image 
									v-if="item.approveStatusName == '审批中'"
									src="../../img/APPROVING.png" 
									mode="widthFix" 
									class="status-img" />
								<image 
									v-if="item.approveStatusName == '已审批'"
									src="../../img/APPROVED.png" 
									mode="widthFix" 
									class="status-img" />
								<image 
									v-if="item.approveStatusName == '已驳回'"
									src="../../img/REJECTED.png" 
									mode="widthFix" 
									class="status-img" />
								<image 
									v-if="item.approveStatusName == '已作废'"
									src="../../img/INVALID.png" 
									mode="widthFix" 
									class="status-img" />
							</view>
						</view>
					</view>
				</template>
			</SwipeItem>
		</view>
	</view>
</template>

<script>
	// 脚本部分无需修改，保持原逻辑
	import { useDefineSetting } from '@/utils/useDefineSetting';
	import tableCell from '../tableCell.vue'
	import SwipeItem from "@/components/SwipeItem/index"
	export default {
		emits: ['selectCheckbox', 'handleClick', 'handleMoreClick', 'goDetail', 'relationFormClick', 'update:modelValue'],
		components: {
			tableCell,
			SwipeItem
		},
		props: [
			'config', 
			'list',  
			'actionOptions', 
			'showSelect', 
			'checkedAll', 
			'modelValue', 
			'isMoreBtn',
			'customBtnsList'
		],
		data() {
			return {
				selectData: [],
				useDefine: useDefineSetting()
			}
		},
		watch: {
			checkedAll: {
				handler(val) {
					this.handleCheckAll()
				},
				immediate: true
			}
		},
		computed: {
			options() {
				if (!this.customBtnsList?.length) return this.actionOptions;
				return [{
						text: this.$t('common.moreText'),
						value: 'more',
						style: {
							backgroundColor: '#007aff'
						}
					},
					...this.actionOptions,
				];
			},
			showCheckbox() {
				return this.showSelect
			}
		},
		methods: {
			formatTime(timestamp) {
				if (!timestamp) return '-';
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			getStatusClass(statusName) {
				switch (statusName) {
					case '已审批':
						return 'status-approved'; 
					case '未审核':
						return 'status-unchecked'; 
					default:
						return 'status-other'; 
				}
			},
			relationFormClick(item, column) {
				this.$emit('relationFormClick', item, column)
			},
			goDetail(item) {
				this.$emit('goDetail', item)
			},
			actionClick(data) {
				const { index, value } = data
				if (value === 'remove') return this.$emit('handleClick', index)
				if (value === 'more') return this.$emit('handleMoreClick', index)
			},
			checkboxChange(e, item) {
				const isSelected = e.value;
				const selectedItemsSet = new Set(this.selectData.map(selectedItem => selectedItem.id));
				if (isSelected) {
					selectedItemsSet.add(item.id);
				} else {
					selectedItemsSet.delete(item.id);
				}
				this.selectData = [...selectedItemsSet.values()].map(id => {
					return this.list.find(listItem => listItem.id === id);
				});
				this.$emit('selectCheckbox', this.selectData);
			},
			handleCheckAll() {
				this.selectData = []
				if (this.checkedAll) this.selectData = this.list.filter(o => o.checked)
				this.$emit('selectCheckbox', this.selectData);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		background-color: #f0f2f6;
		.list-box {
			.item {
				background: #fff;
				border-radius: 12rpx;
				margin-bottom: 20rpx;
				padding: 20rpx;
				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
				position: relative;

				.item-content {
					display: flex;
					align-items: flex-start; /* 改为顶部对齐，避免标签错位 */
					justify-content: space-between;
				}

				.item-left {
					flex: 1;
				}

				.item-row {
					display: flex;
					align-items: center;
					margin-bottom: 8rpx; /* 调整行间距 */
					&:last-child {
						margin-bottom: 0;
					}
					.label {
						font-size: 26rpx;
						color: #909399;
						min-width: 140rpx;
						margin-right: 8rpx;
					}
					.content {
						font-size: 28rpx;
						color: #303133;
					}
				}

				// 单号+标签的布局样式（核心新增）
				.item-header {
					align-items: center;
					gap: 10rpx; // 标签、单号、单号值之间的间距
					// 普通标签样式
					.flow-tag {
						font-size: 22rpx;
						color: #1677ff;
						background: #e8f3ff;
						padding: 2rpx 8rpx;
						border-radius: 4rpx;
						font-weight: 500;
					}
					// 单号文本样式
					.bill-label {
						font-size: 26rpx;
						color: #303133;
					}
				}

				// 流程名称样式（对应图中的“管理员的动火审批流程”）
				.flow-name {
					font-size: 28rpx;
					color: #1E293B;
					font-weight: 500;
				}

				.status-tag {
					padding: 4rpx 16rpx;
					border-radius: 20rpx;
					font-size: 26rpx;
					color: #fff;
					&.status-approved {
						background-color: #67c23a;
					}
					&.status-unchecked {
						background-color: #e6a23c;
					}
					&.status-other {
						background-color: #909399;
					}
				}

				// 右侧状态图样式
				.item-right {
					width: 100rpx;
					height: 160rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					.status-img {
						width: 100%; 
						height: auto;
						object-fit: contain;
					}
				}
			}
		}
	}
</style>