baoshi-swms-app-web/src/views/robot/merge/components/MergeTaskDetailsDialog.vue

<template>
  <van-popup
    v-model:show="show"
    position="bottom"
    round
    :style="{ maxHeight: '70%' }"
    @close="onClose"
  >
    <div class="dialog-container">
      <div class="dialog-header">
        <span class="dialog-title">并库任务详情</span>
        <van-icon name="cross" @click="onClose" />
      </div>

      <div class="dialog-content">
        <div v-if="loading" class="loading-container">
          <van-loading size="24px">加载中...</van-loading>
        </div>
        <div v-else-if="taskList.length === 0" class="empty-container">
          <van-empty description="暂无并库任务" />
        </div>
        <div v-else class="task-list">
          <div
            v-for="(task, index) in taskList"
            :key="task.id"
            class="task-item"
          >
            <div class="task-header">
              <span class="task-index">#{{ index + 1 }}</span>
              <span class="task-sku">SKU: {{ task.sku }}</span>
            </div>
            <div class="task-details">
              <div class="detail-row">
                <span class="detail-label">推荐清空库位:</span>
                <span class="detail-value">{{ task.sourceLocation }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">目标库位:</span>
                <span class="detail-value">{{ task.targetLocation }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">推荐数量:</span>
                <span class="detail-value">{{ task.moveQty }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">涉及料箱:</span>
                <span class="detail-value">{{ task.involveBox ? task.involveBox.join(', ') : '-' }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { LocationMergeDetails } from '@/api/location/merge'
import { getWorkingMergeTasks } from '@/api/location/merge'
import { showToast } from 'vant'

const taskList = ref<LocationMergeDetails[]>([])
const loading = ref(false)
const show = ref(false)

// 显示弹窗并加载数据
const showDialog = async (warehouse: string) => {
  show.value = true
  loading.value = true

  try {
    const res = await getWorkingMergeTasks(warehouse)
    taskList.value = res.data || []
  } catch (error: any) {
    showToast(error.message || '获取并库任务详情失败')
    show.value = false
  } finally {
    loading.value = false
  }
}

// 关闭弹窗
const onClose = () => {
  show.value = false
}

// 暴露方法给父组件使用
defineExpose({
  showDialog
})
</script>

<style scoped lang="scss">
.dialog-container {
  padding: 16px;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;

  .dialog-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }

  .van-icon {
    cursor: pointer;
    color: #999;
  }
}

.dialog-content {
  padding: 12px 0;
  max-height: 400px;
  overflow-y: auto;
}

.loading-container,
.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-item {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 12px;
  border: 1px solid #e5e5e5;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;

  .task-index {
    font-size: 12px;
    color: #1989fa;
    font-weight: 500;
  }

  .task-sku {
    font-size: 14px;
    font-weight: 500;
    color: #333;
  }
}

.task-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .detail-label {
    font-size: 12px;
    color: #666;
    min-width: 80px;
  }

  .detail-value {
    font-size: 12px;
    color: #333;
    text-align: right;
    flex: 1;
  }
}
</style>