eam-uniapp/src/components/item/slectItemList.vue

<template>
  <!-- 选择备件 -->
  <u-popup v-model="props.isShowSelectItem" mode="center" border-radius="14">
    <view class="popup-title">选择备件</view>
    <view class="popup">
      <u-search placeholder="搜索" v-model="form1.searchName" @change="searchItem" clearabled=false></u-search>
      <view class="list" :style="{ overflowY: 'auto', maxHeight: '500px' }">
        <view class="item" v-for="(item, index) in singleColumnList" :key="index" @click="chooseItem(item)">
          <u-checkbox v-model="item.checked" shape="circle" style="margin-top: 8rpx;"></u-checkbox>
          <view class="right">
            <view class="item-name">
              名称: <span>{{ item.name }}</span>
            </view>
            <view class="item-dec">
              型号: <span>{{ item.specifications }}</span>
            </view>
            <view class="item-dec">
              编码: <span>{{ item.number }}</span>
            </view>
            <view class="item-dec" style="display: flex;">
              <span style="white-space: nowrap; align-self: flex-start;">图片:</span>
              <div style="display: flex; flex-direction: column; margin-left: 10px;">
                <span
                  v-for="(pic, picIndex) in item.picture"
                  :key="picIndex"
                  @click.stop="showImage(pic.path)"
                  @longpress.stop="showFullText(pic.name)" 
                  class="image-link"
                >
                  {{ pic.name }}
                </span>
              </div>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="popup-footer">
      <view @click="chooseItem1(0)">取消</view>
      <view class="sure" @click="chooseItem1(1)">确认</view>
    </view>
  </u-popup>

  <!-- 全屏图片弹窗 -->
  <u-popup v-model="isImagePopupVisible" mode="center" border-radius="0">
    <view class="image-popup">
      <view class="close-btn" @click="closeImagePopup">X</view>
      <img :src="currentImagePath" class="full-image" />
    </view>
  </u-popup>

  <!-- 长按显示完整内容的浮窗 -->
  <div v-if="showTooltip" class="tooltip" :style="{ top: tooltipPosition.top, left: tooltipPosition.left }">
    {{ tooltipContent }}
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, getCurrentInstance, watch } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import * as repairOrderApi from "@/api/repairOrder";

const props = defineProps({
  isShowSelectItem: {
    type: Boolean,
    default: () => { return false },
    require: true
  },
  singleColumnList: {
    type: Array,
    default: () => { return [] },
    require: false
  },
});

// 监测isShowSelectItem的变化
watch(() => props.isShowSelectItem, (newValue, oldValue) => {
  if (newValue) {
    console.log('props.isShowSelectItem', props.isShowSelectItem);
    form1.value.searchName = null;
    form1.value.temporarilyNumber = null;
    form1.value.temporarilyName = null;
  }
});

const { proxy } = getCurrentInstance();
const repairOrderList = ref([]);
const itemList = ref([]);
const type = ref('');
const isShowSelectItem = ref(false);
const selectVal = ref(null);
const emits = defineEmits(['searchItem', 'chooseItem1']);
const form1 = ref({
  number: "",
  name: "",
  specifications: "",
  qty: 0,
  temporarilyNumber: "",
  temporarilyName: "",
  temporarilySpecifications: "",
  searchName: "",
});

// 管理全屏图片弹窗的状态
const isImagePopupVisible = ref(false);
const currentImagePath = ref('');

// 管理浮窗的状态
const showTooltip = ref(false);
const tooltipContent = ref('');
const tooltipPosition = ref({ top: '0px', left: '0px' });

// 打开全屏图片弹窗
function showImage(path) {
  currentImagePath.value = path;
  isImagePopupVisible.value = true;
}

// 关闭全屏图片弹窗
function closeImagePopup() {
  uni.hideLoading()
  isImagePopupVisible.value = false;
}

// 显示完整内容的浮窗
function showFullText(text) {
  tooltipContent.value = text;
  showTooltip.value = true;
  // 设置浮窗位置（这里可以根据需求设置具体位置）
  tooltipPosition.value = { top: '50px', left: '50px' };
}

onLoad((option) => {
  if (option.type) type.value = option.type;
  if (option.type) isShowSelectItem.value = option.isShowSelectItem;
  if (option.selectVal) selectVal.value = option.selectVal;
});

// 取消和确认方法
function chooseItem1(type) {
  if (type == 1) {
    form1.value.number = form1.value.temporarilyNumber;
    form1.value.name = form1.value.temporarilyName;
    form1.value.specifications = form1.value.temporarilySpecifications;
  }
  emits('chooseItem1', type, form1);
}

function searchItem() {
  emits('searchItem', form1.value.searchName);
}

function chooseItem(item) {
  console.log('props.isShowSelectItem', props.isShowSelectItem);
  console.log('props.singleColumnList', props.singleColumnList);
  let arr = props.singleColumnList.filter(cur => cur.number != item.number);
  arr.forEach(item => {
    item.checked = false;
  });
  item.checked = !item.checked;
  let arr1 = props.singleColumnList.filter(cur => cur.number == item.number);
  form1.value.temporarilyNumber = arr1[0].number;
  form1.value.temporarilyName = arr1[0].name;
  form1.value.temporarilySpecifications = arr1[0].specifications;
}
</script>

<style lang="scss" scoped>
.add-form-container {
	min-height: calc(100vh - 140rpx);
	background: white;
	padding: 0px 30rpx 140rpx;
}

.footer {
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	z-index: 22;
}

.btns {
	display: flex;
	button {
		flex: 1;
	}
	.sure {
		background: #409eff;
		color: white;
		border-radius: 0px;
		&::after {
			border: 1px solid #409eff;
			border-radius: 0px;
		}
	}
	.reset {
		background: #F5F5F5;
		border-radius: 0px;
		&::after {
			border-radius: 0px;
		}
	}
}

.right-button {
	background: #409eff;
	color: white;
	padding: 0rpx 30rpx;
	border-radius: 16rpx;
	text-align: center;
	font-size: 28rpx;
}

.select {
	display: flex;
	align-items: center;
	height: 72rpx;
	width: 100%;
	.input {
		flex: 1;
		font-size: 28rpx;
		color: #000000;
	}
	.placeholder {
		flex: 1;
		font-size: 28rpx;
		color: rgb(192, 196, 204);
	}
}

.title {
	padding: 32rpx 0px;
	position: relative;
	span {
		position: absolute;
		left: -16rpx;
		color: #fa3534;
		padding-top: 6rpx;
	}
}

.list {
	overflow-y: auto; /* 启用垂直滚动条 */
	max-height: 500px; /* 设置最大高度 */
	.item {
		display: flex;
		margin-bottom: 20rpx;
		.item-box {
			background: #F5F5F5;
			border-radius: 12rpx;
			flex: 1;
			width: 0rpx;
		}
		.spare-title {
			padding: 20rpx 30rpx;
			border-bottom: 1px solid #e4e4e4;
			.title-txt {
				color: #409eff;
				font-size: 30rpx;
				font-weight: bold;
			}
		}
		.dec {
			color: #9c9c9c;
			padding: 20rpx 30rpx 20rpx;
		}
	}
}

.add-btn {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.popup-title {
	text-align: center;
	font-size: 32rpx;
	font-weight: bold;
	color: #409eff;
	padding: 30rpx 30rpx 0px;
}

.popup {
	width: 600rpx;
	padding: 30rpx 60rpx 30rpx;
}

.popup-footer {
	display: flex;
	border-top: 1px solid #e4e4e4;
	view {
		line-height: 100rpx;
		flex: 1;
		text-align: center;
		&.sure {
			color: #409eff;
		}
	}
}

::v-deep .u-checkbox-group {
	display: grid !important;
}

.image-popup {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.8);
}

.close-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	color: white;
	font-size: 24px;
	cursor: pointer;
}

.full-image {
	max-width: 100%;
	max-height: 100%;
}

.item-dec {
  display: flex;
  align-items: flex-start;
}

.image-link {
  cursor: pointer;
  color: blue;
  text-decoration: underline;
  margin-bottom: 5px;
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
  white-space: nowrap; /* 不换行 */
  max-width: 150px; /* 根据需要设置最大宽度 */
}

.image-popup {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  color: white;
  font-size: 24px;
  cursor: pointer;
}

.full-image {
  max-width: 100%;
  max-height: 100%;
}
.tooltip {
  position: absolute;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  white-space: normal;
}
</style>