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

<template>
  <div>
    <div class="pda-container">
      <div class="status-bar">
        <div class="goBack" @click="goBack"><i class="el-icon-arrow-left"></i>上一页</div>
        <div class="goBack">{{ functionTitle }}</div>
        <div class="network" style="color: #fff" @click="$router.push({ path: '/' })">🏠首页</div>
      </div>
      <div style="overflow-y: auto">
        <!-- 功能选择 -->
        <div class="function-selector" v-if="!selectedFunction">
          <div class="function-card" @click="selectFunction('direct')">
            <div class="function-icon">📦</div>
            <div class="function-title">直接发料</div>
            <div class="function-desc">输入工单/PO号，扫描物料标签直接发料</div>
          </div>
          <div class="function-card" @click="selectFunction('picking')">
            <div class="function-icon">🏗️</div>
            <div class="function-title">拣选装托盘</div>
            <div class="function-desc">基于申请单创建托盘，扫描箱卷绑定</div>
          </div>
          <div class="function-card" @click="selectFunction('move')">
            <div class="function-icon">🚚</div>
            <div class="function-title">移库发料</div>
            <div class="function-desc">输入申请单/PO号，选择库位，生成移库记录</div>
          </div>
          <div class="function-card" @click="selectFunction('return')">
            <div class="function-icon">↩️</div>
            <div class="function-title">退料</div>
            <div class="function-desc">选择退料类型，录入退料数量，生成退料记录</div>
          </div>
        </div>
        <!-- 直接发料骨架 -->
        <div v-if="selectedFunction === 'direct'">
          <direct-issue @back="resetAll" />
        </div>
        <!-- 拣选装托盘骨架 -->
        <div v-if="selectedFunction === 'picking'">
          <picking-issue @back="resetAll" />
        </div>
        <!-- 移库发料骨架 -->
        <div v-if="selectedFunction === 'move'">
          <move-issue @back="resetAll" />
        </div>
        <!-- 退料骨架 -->
        <div v-if="selectedFunction === 'return'">
          <return-issue @back="resetAll" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DirectIssue from './DirectIssue.vue'
import PickingIssue from './PickingIssue.vue'
import MoveIssue from './MoveIssue.vue'
import ReturnIssue from './ReturnIssue.vue'

export default {
  name: 'OutsourcingIssuePDA',
  components: {
    DirectIssue,
    PickingIssue,
    MoveIssue,
    ReturnIssue
  },
  data() {
    return {
      selectedFunction: null
    }
  },
  computed: {
    functionTitle() {
      if (!this.selectedFunction) return '委外发料';
      if (this.selectedFunction === 'direct') return '直接发料';
      if (this.selectedFunction === 'picking') return '拣选装托盘';
      if (this.selectedFunction === 'move') return '移库发料';
      if (this.selectedFunction === 'return') return '退料';
      return '委外发料';
    }
  },
  methods: {
    selectFunction(func) {
      this.selectedFunction = func
    },
    resetAll() {
      this.selectedFunction = null
    },
    goBack() {
      if (!this.selectedFunction) {
        this.$router.push('/')
      } else {
        this.selectedFunction = null
      }
    }
  }
}
</script>

<style scoped>
.outsourcing-issue {
  padding: 10px;
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  min-height: 100vh;
}
.function-selector {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px 0;
}
.function-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
}
.function-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.function-icon {
  font-size: 48px;
  margin-bottom: 10px;
}
.function-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
}
.function-desc {
  font-size: 14px;
  color: #666;
}
</style>