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="props.searchPlaceholder" v-model="form1.searchName" @change="searchItem" clearabled="false"></u-search>
      <scroll-view class="list" scroll-y="true" style="max-height: 800rpx" @scrolltolower="scrolltolower">
        <view class="item" v-for="(item, index) in tableData" :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>
      </scroll-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
  },
  searchPlaceholder: {
    type: String,
    default: () => {
      return '请输入备件名称'
    },
    require: true
  },
  singleColumnList: {
    type: Array,
    default: () => {
      return []
    },
    require: false
  }
})
const pageSize = ref(10)
const currentPage = ref(1)
const tableData = ref([])
// 展示的数据
const showTableData = () => {
  if (props.singleColumnList.length > pageSize.value) {
    tableData.value = [...tableData.value, ...props.singleColumnList.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)]
  } else {
    tableData.value = props.singleColumnList
  }
}
const scrolltolower = () => {
  currentPage.value += 1
  showTableData()
}
// 监测isShowSelectItem的变化
watch(
  () => props.isShowSelectItem,
  (newValue, oldValue) => {
    if (newValue) {
      form1.value.searchName = null
      form1.value.temporarilyNumber = null
      form1.value.temporarilyName = null
      showTableData()
    }
  }
)

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) {
  const arr = props.singleColumnList.filter((cur) => cur.number != item.number)
  arr.forEach((item) => {
    item.checked = false
  })
  item.checked = !item.checked
  const 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>