CameraMachine/frontend/src/views/Photography/shot.vue

<template>
  <headerBar
      title="拍摄商品"
      showUser
      :menu="menu"
  />

  <hardware-check/>

  <div class="photography-page flex-col">
    <div class="main-container">
      <div class="content-wrapper flex-col">
        <div class="step-section">
          <div class="step-number flex-col"><span class="text_22">1</span></div>
          <div class="step-one flex-col">
            <div class="step-header flex-row">
              <span class="step-title">第一步：获取商品货号</span>
            </div>
            <div class="step-content">
              <div class="input-container flex-row">
                <el-input class="input-item" ref="goodsArtNo" clearable v-model="goods_art_no" placeholder="请输入货号"> </el-input>
              </div>
              <div class="auto-method flex-row justify-between">
                <img class="step-icon" referrerpolicy="no-referrer" src="@/assets/images/Photography/step1-icon.png" />
                <div class="text-method-tag flex-col mar-left-10"><span class="text_4">自动获取</span></div>
                <span class="method-description mar-left-10">用遥控器扫描商品资料二维码</span>
              </div>
            </div>
          </div>

        </div>

        <div class="step-section">
          <div class="step-number flex-col"><span class="text_22">2</span></div>
          <div class="step-two flex-col justify-between">
            <span class="step-title">第二步：启动拍摄（根据按遥控器左右键启动）</span>
            <div class="shooting-container flex-col">
              <div class="shooting-tips flex-row justify-between">
                <img class="info-icon" referrerpolicy="no-referrer" src="@/assets/images/Photography/info-icon.png" />
                <span class="tips-text">遥控左右按键可启动拍摄，中间按钮可在拍摄5张主图后解锁，用于拍摄自定义图</span>
              </div>
              <div class="wifi mar-top-20">
                <img  referrerpolicy="no-referrer"
                     src="@/assets/images/Photography/wifi.png" style="width: 60px" />
              </div>

              <div class="remote-control-wrap">
                <RemoteControl
                    @onRemoteControl="onRemoteControl"
                    :canStop="runLoading || takePictureLoading"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="last-photo" v-show="showlastPhoto && (lastPhoto as any)?.file_path" v-key="(lastPhoto as any)?.file_path">
        <el-button
          class="close-btn"
          type="danger"
          icon="Close"
          circle
          @click="closeLastPhoto"
        />
        <el-image  :src="getFilePath((lastPhoto as any)?.file_path || '')"  fit="contain" ></el-image>
      </div>

      <div class="history-section flex-col koutu-section">
          <div class="history-warp" ref="containerRef">
            <div v-if="!goodsList.length" class="fs-14 c-666 mar-top-50">
              {{ loading ? '数据正在加载中，请稍候...' : '暂无数据，请先进行拍摄'}}
            </div>
            <div v-else class="history-item"  v-for="item in goodsList" :key="item.goods_art_no"   >
              <div class="history-item-header">
                <div class="history-item-left">
                  <el-checkbox
                      :model-value="selectedGoods.has(item.goods_art_no)"
                      @change="toggleGoods(item.goods_art_no)"
                      class="goods-checkbox"
                  />
                  <span class="goods-art-no">{{ item.goods_art_no }}</span>

                  <div class="history-item-meta ">
                    <span class="action-time flex left">
                       <img src="@/assets/images/processImage.vue/riq.png" />
                      {{ getTime(item.action_time) }}</span>
                    <span class="image-count mar-left-10 flex left">
                       <img src="@/assets/images/processImage.vue/tup.png" />
                      {{ item.items?.length || 0 }}张图片</span>
                    <span v-if="!item.syncConfig" class="mar-left-10">无法读取到该商品拍摄配置，如需重新生成请删除该商品并重新拍摄</span>
                  </div>
                </div>
                <div class="history-item-right">
                  <el-dropdown :disabled="runLoading || takePictureLoading" trigger="click">
                    <el-button :disabled="runLoading || takePictureLoading" size="small" plain>高级生成</el-button>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item
                            v-for="menu in generate.children"
                            @click.native="onGenerateCLick(menu,item)">{{ menu.name }}</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>

                  <el-button size="small" v-if="item.syncConfig"  class="mar-left-10"  :disabled="runLoading || takePictureLoading"  type="primary"  @click="reTakePictureNos(item.goods_art_no,item)" plain v-log="{ describe: { action: '重拍货号', goods_art_no: item.goods_art_no } }">重拍</el-button>
                  <el-button style="color: #FF4C00"  size="small" class="mar-left-10" :disabled="runLoading || takePictureLoading" @click="delGoods({goods_art_nos:[item.goods_art_no]})" v-log="{ describe: { action: '删除货号', goods_art_no: item.goods_art_no } }">删除</el-button>
                </div>
              </div>
              <div class="history-item-images" >
                <div
                  v-for="(image, index) in item.items"
                  :key="image.action_id || image.action_name"
                  class="history-item_image"
                  v-loading="!image.PhotoRecord.image_path && runAction.goods_art_no == item.goods_art_no"
                >
<!--                  <span class="tag" v-if="!image.PhotoRecord.image_path">{{ image.action_name }}</span>-->
                  <div class="el-image_view" >
                    <el-image
                      :src="thumbnailMap[image.PhotoRecord.image_path] || getFilePath(image.PhotoRecord.image_path)"
                      :preview-src-list="getPreviewImageList(item)"
                      hide-on-click-modal
                      :initial-index="getPreviewIndex(item, index)"
                      class="preview-image"
                      fit="contain"
                      :preview-teleported="true"
                      lazy
                    >
                      <template #placeholder>
                        <span class="tag">{{ image.action_name }}</span>
                      </template>
                      <template #error>
                        <div class="image-slot">
                          <span class="tag">{{ image.action_name }}</span>
                        </div>
                      </template>
                    </el-image>
                    <el-button v-if="image.action_name && !runLoading && !takePictureLoading" :disabled="runLoading || takePictureLoading" class="reset-button" @click="reTakePicture(image.PhotoRecord)" v-log="{ describe: { action: '重拍单张图片', goods_art_no: image.PhotoRecord.goods_art_no, action_name: image.action_name } }">重拍</el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="footer-controls">
            <div class="footer-left">
              <el-checkbox
                :model-value="isSelectAll"
                :indeterminate="isIndeterminate"
                @change="toggleSelectAll"
                class="select-all-checkbox"
              >
                全选
              </el-checkbox>
              <span class="image-count-text">
                已选择 <span style="color: #2957FF">{{ selectedImageCount }}</span> 张图片 共 <span style="color: #2957FF">{{ totalImageCount }}</span> 张图片
              </span>
            </div>
            <div class="footer-right">

              <div class="pagination-container" style="padding: 10px 0; text-align: center;">
                <el-pagination
                    :page-count="totalPages"
                    :current-page="currentPage"
                    @current-change="(page) => getPhotoRecords({ page })"
                    layout="prev, pager, next"
                    :page-size="pageSize"
                />
              </div>
              <el-button
                :disabled="selectedGoods.size === 0 || runLoading || takePictureLoading"
                @click="deleteSelected"
                v-log="{ describe: { action: '删除选中货号' } }"
              >
                删除
              </el-button>
              <el-button
                type="primary"
                :disabled="!goodsList.length || runLoading || takePictureLoading"
                @click="openPhotographyDetail()"
                v-log="{ describe: { action: '点击开始生成' } }"
              >
                <img src="@/assets/images/processImage.vue/sc.png" />
                开始生成
                <img src="@/assets/images/processImage.vue/go.png"  class="go"/>
              </el-button>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import headerBar from '@/components/header-bar/index.vue'
import { onMounted, onBeforeUnmount, ref, computed, watch, nextTick } from 'vue'
import HardwareCheck from '@/components/check/index.vue'
// @ts-ignore
import RemoteControl from '@/views/RemoteControl/index.vue'
import usePhotography from './mixin/usePhotography'
import { useThumbnails } from './composables/useThumbnails'
import generate from '@/utils/menus/generate'
import { ElMessageBox } from 'element-plus'

const {
  loading,
  runLoading,
  takePictureLoading,
  goodsList,
  goods_art_no,
  runAction,
  lastPhoto,
  showlastPhoto,
  goodsArtNo,
  menu,
  getTime,
  getFilePath,
  getPhotoRecords,
  delGoods,
  del,
  reTakePicture,
  reTakePictureNos,
  onRemoteControl,
  openPhotographyDetail,
  onGenerateCLick,
  initEventListeners,
  cleanupEventListeners,
  pageSize,
  currentPage,
  totalPages,
} = usePhotography()

// 关闭最后拍摄的照片预览
const closeLastPhoto = () => {
  showlastPhoto.value = false
}

// 选中的货号列表
const selectedGoods = ref<Set<string>>(new Set())

// thumbnails
const containerRef = ref<HTMLElement | null>(null)
const { thumbnailMap, observe, stop } = useThumbnails(getFilePath)

// 全选状态
const isSelectAll = computed(() => {
  return goodsList.value.length > 0 && selectedGoods.value.size === goodsList.value.length
})

// 是否半选状态
const isIndeterminate = computed(() => {
  return selectedGoods.value.size > 0 && selectedGoods.value.size < goodsList.value.length
})

// 切换单个货号的选中状态
const toggleGoods = (goodsArtNo: string) => {
  if (selectedGoods.value.has(goodsArtNo)) {
    selectedGoods.value.delete(goodsArtNo)
  } else {
    selectedGoods.value.add(goodsArtNo)
  }
}

// 全选/取消全选
const toggleSelectAll = () => {
  if (isSelectAll.value) {
    selectedGoods.value.clear()
  } else {
    goodsList.value.forEach((item: any) => {
      selectedGoods.value.add(item.goods_art_no)
    })
  }
}

// 计算已选择的图片数量
const selectedImageCount = computed(() => {
  let count = 0
  goodsList.value.forEach((item: any) => {
    if (selectedGoods.value.has(item.goods_art_no)) {
      count += item.items?.length || 0
    }
  })
  return count
})

// 计算总图片数量
const totalImageCount = computed(() => {
  let count = 0
  goodsList.value.forEach((item: any) => {
    count += item.items?.length || 0
  })
  return count
})

// 删除选中的货号
const deleteSelected = async () => {
  if (selectedGoods.value.size === 0) {
    return
  }

  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedGoods.value.size} 个货号的拍摄数据吗？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }
    )

    const goodsArtNos = Array.from(selectedGoods.value)
    await del({ goods_art_nos: goodsArtNos })
    // 删除成功后清空选中状态
    selectedGoods.value.clear()
  } catch (e) {
    // 用户取消
  }
}

// 获取预览图片列表（只包含有图片路径的，保持原始顺序）
const getPreviewImageList = (item: any) => {
  if (!item || !item.items) return []
  return item.items
    .filter((img: any) => img.PhotoRecord?.image_path)
    .map((img: any) => getFilePath(img.PhotoRecord.image_path))
}

// 获取当前图片在预览列表中的索引
const getPreviewIndex = (item: any, currentIndex: number) => {
  if (!item || !item.items) return 0
  // 计算当前图片在过滤后的预览列表中的索引
  let previewIndex = 0
  for (let i = 0; i <= currentIndex; i++) {
    if (item.items[i]?.PhotoRecord?.image_path) {
      if (i === currentIndex) break
      previewIndex++
    }
  }
  return previewIndex
}

onMounted(async () => {
  await getPhotoRecords()
  initEventListeners()
  nextTick(() => {
    observe(containerRef, goodsList)
  })
})

onBeforeUnmount(() => {
  cleanupEventListeners()
  stop()
})

watch(goodsList, () => {
  nextTick(() => observe(containerRef, goodsList))
})
</script>

<style lang="scss">
.koutu-image-popper {
  width: calc(100vw - 470px) !important;
  right: 70px !important;
  top: 100px !important;
  height: calc(100vh - 170px) !important;
  transform: translate(0px, 0px) !important;

  .el-image {
    width: 100%;
    height:100%;
    display: block;

    .el-image__inner {
      width: 100%;
      height:100%;
      display: block;

    }
  }
}
</style>

<style scoped lang="scss">
.photography-page {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  .main-container {
    position: relative;
    display: flex;
    .content-wrapper {
      flex-grow: 1 ;
      position: relative;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 510px;
      padding: 0 50px;
      height: calc(100vh - 30px);
      margin:  auto;
      justify-content: flex-start;
      flex-direction: column;
      overflow: hidden;
      border-right:1px solid rgba(0,0,0,.1);

      .step-section {
        display: flex;
        margin-bottom: 20px;

        &:last-child {
          margin-bottom: 0;
        }
      }

      .step-number {
        background-color: rgba(22, 119, 255, 1);
        border-radius: 50%;
        height: 32px;
        margin-top: 51px;
        width: 32px;

        .text_22 {
          width: 6px;
          height: 22px;
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 14px;
          font-weight: NaN;
          text-align: right;
          white-space: nowrap;
          line-height: 22px;
          margin: 5px 0 0 13px;
        }
      }

      .step-one {
        width: 350px;
        height: auto;
        margin: 55px 0 0 5px;

        .step-header {
          width: 391px;
          height: 24px;
          margin-left: 3px;

          .step-title {
            width: 160px;
            height: 24px;
            overflow-wrap: break-word;
            color: rgba(0, 0, 0, 0.85);
            font-size: 16px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            text-align: left;
            white-space: nowrap;
            line-height: 24px;
          }

          .step-icon {
            width: 32px;
            height: 20px;
            margin-top: 4px;
          }

          .step-divider {
            width: 191px;
            height: 1px;
            margin: 13px 0 0 8px;
          }
        }

        .step-content {
          width: 350px;

          .input-container {
            width: calc(100% - 20px );
            height: 36px;
            margin: 10px 10px 0;

            .input-item {
              :deep(.el-input__inner){
                  height: 36px;
                  line-height: 36px;
                }
            }
          }

          .auto-method {
            width: 253px;
            height: 24px;
            margin: 28px 0 0 14px;

            .text-method-tag {
              background-color: rgba(0, 174, 30, 1);
              height: 24px;
              width: 65px;

              .text_4 {
                width: 56px;
                height: 20px;
                overflow-wrap: break-word;
                color: rgba(255, 255, 255, 1);
                font-size: 14px;
                font-family: PingFangSC-Semibold;
                font-weight: 600;
                text-align: left;
                white-space: nowrap;
                line-height: 20px;
                margin: 2px 0 0 4px;
              }
            }

            .method-description {
              width: 182px;
              height: 20px;
              overflow-wrap: break-word;
              color: rgba(71, 71, 71, 1);
              font-size: 14px;
              font-family: PingFangSC-Semibold;
              font-weight: 600;
              text-align: left;
              white-space: nowrap;
              line-height: 20px;
              margin-top: 2px;
            }
          }
        }
      }

      .step-two {
        width: 350px;
        height: auto;
        margin: 55px 0 0 5px;

        .step-title {
          width: 350px;
          height: 24px;
          overflow-wrap: break-word;
          color: rgba(0, 0, 0, 0.85);
          font-size: 16px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          text-align: left;
          white-space: nowrap;
          line-height: 24px;
        }

        .shooting-container {
          width: 353px;
          height: auto;


          .remote-control-wrap {
            width: 353px;
            height: 300px;
          }

          .shooting-tips {
            width: 325px;
            height: 40px;
            margin: 12px 0 0 15px;

            .info-icon {
              width: 16px;
              height: 16px;
              margin-top: 2px;
            }

            .tips-text {
              width: 302px;
              height: 40px;
              overflow-wrap: break-word;
              color: rgba(255, 76, 0, 1);
              font-size: 14px;
              font-weight: NaN;
              text-align: left;
              line-height: 20px;
            }
          }
        }
      }
    }
  }
}

.history-section {
        width:  calc(100vw - 510px);
        height: calc(100vh - 30px);
        display: flex;
        flex-direction: column;
        padding: 20px;
        overflow-y: auto;
         background:#F5F6F7;

        ::v-deep {
          .el-checkbox__input {
            transform: scale(1.4);
          }
        }
        .history-warp {
          flex: 1;

          .history-item {
            background: #FFFFFF;
            box-shadow: 0px 2px 4px 0px rgba(23,33,71,0.1);
            border-radius: 10px;
            border: 1px solid #D9DEE6;
            margin-bottom: 20px;

            .history-item-header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 40px;
              padding: 0 10px;

              background: linear-gradient( 90deg, #F4ECFF 0%, #DFEDFF 100%);
              border-radius: 10px 10px 0px 0px;

              .history-item-left {
                display: flex;
                align-items: center;
                gap: 10px;

                .goods-checkbox {
                  margin-right: 0;
                }

                .goods-art-no {
                  font-size: 16px;
                  font-weight: 500;
                  color: #333;
                }
              }

              .history-item-right {
                display: flex;
                align-items: center;
                ::v-deep {
                  .el-button { height: 30px; line-height: 30px;}
                }
              }
            }

            .history-item-meta {
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 12px;
              color: #666;

              img {
                height: 14px;
                margin-right: 2px;
              }

              .action-time {
                color: #666;
              }

              .image-count {
                color: #666;
              }
            }

            .history-item-images {
              display: grid;
              grid-template-columns: repeat(5, 1fr);
              gap: 10px;
              padding: 15px;
              border-top: 1px solid #f0f0f0;
              overflow-x: auto;

              // 如果图片数量超过5个，允许横向滚动
              @media (min-width: 1200px) {
                grid-template-columns: repeat(5, 1fr);
              }

              // 响应式：小屏幕时每行3个
              @media (max-width: 768px) {
                grid-template-columns: repeat(3, 1fr);
              }
            }

            .history-item_image_wrap {
              padding-bottom: 0;
              border-bottom: none;
            }
            .history-item_image {
              position: relative;
              width: 100%;
              aspect-ratio: 1;
              background: #F7F7F7;
              border-radius: 10px;
              overflow: hidden;
              cursor: pointer;
              border: 1px solid #D9DEE6;
              transition: all 0.3s;


              .tag {
                color: #bbb;
                position: absolute;
                left: 0;
                right: 0;
                top: 50%;
                margin-top: -10px;
                line-height: 20px;
                text-align: center;
                font-size: 12px;
                z-index: 1;
                pointer-events: none;
              }

              .preview-image {
                width: 100%;
                height: 100%;

                :deep(.el-image__inner) {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
              }

              .image-placeholder {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #F7F7F7;
              }

              .image-slot {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #F7F7F7;
              }

              &:hover {
                border-color: #409eff;
                transform: scale(1.02);
                box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
              }

              &.el-loading-parent--relative{
                ::v-deep {
                  .el-loading-mask { display: none}
                }
              }
            }


            .el-image_view {
              display: flex;
              width: 100%;
              height: 100%;

              .reset-button {
                width: 40px;
                text-align: center;
                height: 20px;
                position: absolute;
                left:50%;
                top:50%;
                padding: 0px;
                margin-left:-20px;
                margin-top:-10px;
                color: #ffffff;
                font-size: 14px;
                background: rgba(0,0,0,0.6);
                border-radius: 12px;
                display: none;
                cursor: pointer;
              }
              &:hover {
                .reset-button {
                  display: block;
                }
              }
            }
            p:first-of-type {
              ::v-deep {
                .el-loading-mask { display: block !important;}
              }
            }


          }
        }

        .footer-controls {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0px 20px;
          border-top: 1px solid #D9DEE6;
          background-color: #fff;
          min-height: 50px;
          flex-shrink: 0;
          position: fixed;
          bottom:0;
          left: 510px;
          right: 0;
          font-size: 14px;
          z-index: 100;
          img {
            height: 12px;
            margin: 0 5px;
          }
          .go {
            height: 12px;
            opacity: .8;
          }
          ::v-deep {
            .el-button {
              border-radius: 10px;
              height: 40px;
              line-height: 40px;
            }
          }

          .footer-left {
            display: flex;
            align-items: center;
            gap: 10px;

            .select-all-checkbox {
              margin-right: 0;
              ::v-deep {
                .el-checkbox__label {

                  font-size: 14px;
                  color: #666;
                }
              }
            }

            .image-count-text {
              font-size: 14px;
              color: #333;
              margin-left: 0;
            }
          }

          .footer-right {
            display: flex;
            align-items: center;
            gap: 10px;
          }
        }

      }

.last-photo{
  position: fixed;
  padding: 10px;
  box-shadow: 0 0 5px rgb(0 0 0 / 50%);
  left: 510px;
  top: 30px;
  bottom: 0px;
  right: 10px;
  z-index: 1000;
  background-color: rgba(0,0,0,.5);

  .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1001;
    width: 32px;
    height: 32px;

    ::v-deep(.el-icon) {
      font-size: 16px;
    }
  }

  .el-image {
    width: 100%;
    height:100%;
    display: block;

    .el-image__inner {
      width: 100%;
      height:100%;
      display: block;
    }
  }
}
</style>