wms-pda/src/views/modules/outsourcing-issue/outsourcingDirectIssueList.vue

<template>
  <div class="pda-container">
    <!-- 头部栏 -->
    <div class="header-bar">
      <div class="header-left" @click="handleBack">
        <i class="el-icon-arrow-left"></i>
        <span>委外直接发料 - 物料</span>
      </div>
      <div class="header-right" @click="$router.push({ path: '/' })">首页</div>
    </div>

    <!-- 订单信息展示 -->
    <div class="search-container">
      <div class="card-title">
        <label class="title-label">委外订单号:{{ outsourcingNo }}</label>
      </div>
      <div class="card-title">
        <label class="title-label">物料编码:{{ partNo }}</label>
      </div>
      <div class="card-title">
        <label class="title-label">需求数量:{{ requiredQty }}</label>
      </div>
    </div>

    <div class="content-area">
      <div class="work-order-list" v-if="issueList.length > 0">
        <div
          v-for="(item, index) in issueList"
          :key="index"
          class="material-card"
          @click="goDetail(item)"
        >
          <div class="card-title">
            <span class="title-label">
              需求日期：{{ item.dateRequired }} &nbsp;&nbsp; 行号：{{ item.lineNo }}
            </span>
          </div>
          <div class="part-desc-row">
            <span class="desc-text">料号：{{ item.componentPartNo }}</span>
          </div>
          <div class="part-desc-row">
            <span class="desc-text">{{ item.componentPartDescription }}</span>
          </div>
          <div class="card-details">
            <div class="detail-item">
              <div class="detail-label">需求数量</div>
              <div class="detail-value">{{ item.qtyRequired }}</div>
            </div>
            <div class="detail-item">
              <div class="detail-label">已发数量</div>
              <div class="detail-value">{{ item.qtyIssued || 0 }}</div>
            </div>
            <div class="detail-item">
              <div class="detail-label">单位</div>
              <div class="detail-value">{{ item.uom || '个' }}</div>
            </div>
          </div>
        </div>
      </div>

      <div v-if="!loading && issueList.length === 0" class="empty-state">
        <i class="el-icon-box"></i>
        <p>暂无物料记录</p>
      </div>

      <div v-if="loading" class="loading-state">
        <i class="el-icon-loading"></i>
        <p>加载中...</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getOutsourcingMaterials } from '@/api/outsourcing/outsourcing-issue.js'

export default {
  data() {
    return {
      outsourcingNo: '',
      partNo: '',
      requiredQty: 0,
      loading: false,
      issueList: [],
      lineNo:'',
      releaseNo:'',
      site: '',
    }
  },
  methods: {
    normalizeValue(value) {
      return value == null ? '' : String(value).trim()
    },
    handleBack() {
      sessionStorage.setItem('outsourcingDirectIssue_shouldRestore', 'true')
      this.$router.back()
    },
    // 保存页面状态到sessionStorage（用于从详情页返回时恢复）
    savePageStateForDetail() {
      const state = {
        outsourcingNo: this.outsourcingNo,
        partNo: this.partNo,
        requiredQty: this.requiredQty,
        lineNo: this.lineNo,
        releaseNo: this.releaseNo,
        site: this.site,
        issueList: this.issueList,
      }
      sessionStorage.setItem('outsourcingDirectIssueList_state_fromDetail', JSON.stringify(state))
    },
    // 从sessionStorage恢复页面状态（仅当从详情页返回时）
    restorePageStateFromDetail() {
      try {
        const shouldRestore = sessionStorage.getItem('outsourcingDirectIssueList_shouldRestore')
        const savedState = sessionStorage.getItem('outsourcingDirectIssueList_state_fromDetail')
        if (shouldRestore === 'true' && savedState) {
          const state = JSON.parse(savedState)
          this.outsourcingNo = state.outsourcingNo || ''
          this.partNo = state.partNo || ''
          this.requiredQty = state.requiredQty || 0
          this.lineNo = state.lineNo || ''
          this.releaseNo = state.releaseNo || ''
          this.site = state.site || ''
          this.issueList = state.issueList || []
          // 清除标记
          sessionStorage.removeItem('outsourcingDirectIssueList_shouldRestore')
          sessionStorage.removeItem('outsourcingDirectIssueList_state_fromDetail')
        }
      } catch (error) {
        sessionStorage.removeItem('outsourcingDirectIssueList_shouldRestore')
        sessionStorage.removeItem('outsourcingDirectIssueList_state_fromDetail')
      }
    },
    async loadIssueList() {
      if (!this.outsourcingNo || !this.partNo) {
        return
      }
      this.loading = true
      const params = {
        outsourcingNo: this.outsourcingNo,
        site: this.site,
        partNo: this.partNo,
      }

      getOutsourcingMaterials(params).then(({data})=>{
          this.loading = false
        if (data && data.code === 0) {
          const materials = data.materials || []
          const site = this.normalizeValue(this.site)
          const releaseNo = this.normalizeValue(this.releaseNo)
          const lineNo = this.normalizeValue(this.lineNo)
          this.issueList = materials.filter((item) => {
            return (
              this.normalizeValue(item.contract) === site &&
              this.normalizeValue(item.releaseNo) === releaseNo &&
              this.normalizeValue(item.lineNo) === lineNo
            )
          })
        } else {
          this.$message.error(data.msg || '获取发料记录失败')
          this.issueList = []
        }
        })
    },
    goDetail(item) {
      // 跳转前保存当前页面状态（用于从详情页返回时恢复）
      this.savePageStateForDetail()
      this.$router.push({
        name: 'outsourcingDirectIssueDetail',
        query: {
          outsourcingNo: this.outsourcingNo,
          partNo: this.partNo,
          partDesc: item.partDesc || '',
          requiredQty: this.requiredQty,
          issuedQty:item.qtyIssued,
          site: this.site,
          issueRecord: {
            orderType: 'outsourcing',
            transactionId: item.transactionId,
            quantity: item.quantity,
            batchNo: item.batchNo,
            issuedQty: item.qtyIssued || 0,
            accountingId: item.accountingId,
            componentPartNo: item.componentPartNo,
            componentPartDescription: item.componentPartDescription,
            lineNo: this.lineNo,
            releaseNo: this.releaseNo,
            lineItemNo:item.lineItemNo
          }
        },
      })
    },
  },
  mounted() {
    // 如果是从详情页返回，则恢复页面状态
    this.restorePageStateFromDetail()
    
    // 如果没有恢复状态，则从路由参数获取
    if (!this.outsourcingNo) {
      this.outsourcingNo = this.$route.query.outsourcingNo
      this.partNo = this.$route.query.partNo
      this.site = this.$route.query.site || ''
      this.requiredQty = this.$route.query.outsourcingInfo.requiredQty
      this.lineNo = this.$route.query.outsourcingInfo.lineNo
      this.releaseNo = this.$route.query.outsourcingInfo.releaseNo
    }
    
    this.loadIssueList()
  },
}
</script>

<style scoped>
.pda-container { 
  width: 100vw; 
  height: 100vh; 
  display: flex; 
  flex-direction: column; 
  background: #f5f5f5; 
}

.header-bar { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 8px 16px; 
  background: #17B3A3; 
  color: white; 
  height: 40px; 
  min-height: 40px; 
}

.header-left { 
  display: flex; 
  align-items: center; 
  cursor: pointer; 
  font-size: 16px; 
  font-weight: 500; 
}

.header-left i { 
  margin-right: 8px; 
  font-size: 18px; 
}

.header-right { 
  cursor: pointer; 
  font-size: 16px; 
  font-weight: 500; 
}

.search-container {
  padding: 12px 16px;
  background: white;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-title {
  margin-bottom: 8px;
}

.title-label {
  font-size: 12px;
  color: #666;
  display: block;
  margin-bottom: 4px;
}

.content-area { 
  flex: 1; 
  overflow-y: auto; 
}

.work-order-list { 
  overflow-y: auto; 
}

.material-card { 
  background: white; 
  border-radius: 8px; 
  margin-bottom: 12px; 
  padding: 16px; 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
  cursor: pointer; 
  transition: all 0.2s ease; 
  border: 2px solid transparent; 
}

.material-card:hover { 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); 
  transform: translateY(-1px); 
}

.material-card:active { 
  transform: translateY(0); 
}

.part-desc-row { 
  margin-bottom: 12px; 
  padding: 0 4px; 
}

.desc-text { 
  font-size: 12px; 
  color: #666; 
  line-height: 1.3; 
  word-break: break-all; 
}

.card-details { 
  display: flex; 
  justify-content: space-between; 
  align-items: flex-start; 
  gap: 4px; 
}

.detail-item { 
  flex: 1; 
  text-align: center; 
  min-width: 50px; 
  max-width: 70px; 
}

.detail-label { 
  font-size: 11px; 
  color: #666; 
  margin-bottom: 4px; 
  line-height: 1.2; 
  margin-left: -12px; 
}

.detail-value { 
  font-size: 13px; 
  color: #333; 
  line-height: 1.2; 
  margin-left: -12px; 
}

.empty-state { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  padding: 60px 20px; 
  color: #999; 
}

.empty-state i { 
  font-size: 48px; 
  margin-bottom: 16px; 
}

.empty-state p { 
  font-size: 14px; 
  margin: 0; 
}

.loading-state { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  padding: 60px 20px; 
  color: #17B3A3; 
}

.loading-state i { 
  font-size: 24px; 
  margin-bottom: 12px; 
  animation: spin 1s linear infinite; 
}

@keyframes spin { 
  from { transform: rotate(0deg); } 
  to { transform: rotate(360deg); } 
}

.loading-state p { 
  font-size: 14px; 
  margin: 0; 
}

@media (max-width: 360px) {
  .header-bar {
    padding: 8px 12px;
  }
  .search-container {
    padding: 8px 12px;
  }
  .material-card {
    padding: 12px;
  }
  .card-details {
    flex-wrap: wrap;
    gap: 6px;
  }
  .detail-item {
    flex: 0 0 48%;
    margin-bottom: 6px;
    min-width: 50px;
  }
}
</style>