wms-pda/src/views/modules/haianAutoWarehouse/haianCallOut.vue

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

      <div class="table-body" style="max-height: 500px; overflow-y: auto;">
        <div class="main-content form-section">
          <!-- 查询条件区域：保持与海安立库取货一致 - rqrq -->
          <div class="input-group">
            <label class="input-label">物料编码</label>
            <el-input
              v-model="formData.partNo"
              placeholder="请输入物料编码"
              class="form-input"
              ref="partNoInput"
              clearable
            />
          </div>
          <div class="input-group">
            <label class="input-label">栈板编码</label>
            <el-input
              v-model="formData.palletId"
              placeholder="请输入栈板编码"
              class="form-input"
              clearable
            />
          </div>
          <div class="input-group">
            <label class="input-label">批号</label>
            <el-input
              v-model="formData.batchNo"
              class="form-input"
              clearable
            />
          </div>

          <!-- 固定整托出库口提示：此页面下达目标固定，不允许页面改写 - rqrq -->
          <div class="input-group">
            <label class="input-label">固定目标</label>
            <el-input
              :value="fixedTargetArea"
              class="form-input"
              readonly
            />
          </div>

          <div class="bottom-actions" style="display: flex; gap: 10px; flex-wrap: nowrap;">
            <button class="action-btn secondary" @click="confirmDo" style="flex: 1;" :disabled="dispatchLoading">
              查询
            </button>
            <button class="action-btn secondary" @click="cleanData" style="flex: 1;" :disabled="dispatchLoading">
              清空
            </button>
            <button
              class="action-btn secondary"
              @click="handleDispatch"
              :disabled="dispatchLoading || !selectedPallet"
              style="flex: 1;"
            >
              {{ dispatchLoading ? '下达中...' : '下达' }}
            </button>
          </div>
        </div>

        <!-- 单选栈板列表：保持海安立库取货交互一致 - rqrq -->
        <div v-if="palletList.length > 0" class="rma-list">
          <div class="list-title" style="flex: 0.75">可用栈板列表（单选）</div>

          <el-form>
            <el-row v-for="(pallet, index) in palletList" :key="index" class="rma-row">
              <el-col :span="24">
                <div class="rma-item" @click="selectPallet(pallet)" :class="{ 'selected': isSelected(pallet) }">
                  <div class="item-info">
                    <span class="part-no">栈板号: {{ pallet.palletId }}</span>
                    <span class="batch-qty" v-if="pallet.partNo">
                      物料: {{ pallet.partNo }} | 数量: {{ pallet.qty }}
                    </span>
                    <span class="batch-qty" v-if="pallet.partNo && pallet.batchNo">
                      | 批号: {{ pallet.batchNo }}
                    </span>
                    <span class="batch-qty" v-if="pallet.partNo && pallet.receiveDate">
                      | 接收日期: {{ pallet.receiveDate }}
                    </span>
                  </div>
                  <div class="item-status">
                    <i class="el-icon-check" v-if="isSelected(pallet)"></i>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getPalletList,
  callOutToOutboundPort
} from '../../../api/haianAutoWarehouse/callOut'

export default {
  name: 'haianCallOut',
  data() {
    return {
      // 固定目标展示：后端实际下发整托出库口，页面只读不允许改 - rqrq
      fixedTargetArea: '整托出库口',
      formData: {
        palletId: '',
        partNo: '',
        batchNo: ''
      },
      palletList: [],
      selectedPallet: null,
      dispatchLoading: false
    }
  },
  computed: {
    // 海安业务site必须从store读取，缺失时前端直接阻断并提示 - rqrq
    site() {
      return this.$store.state.user.site
    }
  },
  methods: {
    handleBack() {
      this.resetPage(false)
      this.$router.back()
    },
    // 页面统一重置：适配keep-alive重进清理规范 - rqrq
    resetPage(needFocus = true) {
      this.formData = {
        palletId: '',
        partNo: '',
        batchNo: ''
      }
      this.palletList = []
      this.selectedPallet = null
      this.dispatchLoading = false
      if (needFocus) {
        this.$nextTick(() => {
          if (this.$refs.partNoInput) {
            this.$refs.partNoInput.focus()
          }
        })
      }
    },
    confirmDo() {
      if ((!this.formData.partNo || this.formData.partNo === '') &&
        (!this.formData.palletId || this.formData.palletId === '')) {
        this.$alert('请输入物料编码或栈板编码', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      if (!this.site) {
        this.$alert('当前用户缺少site，无法查询', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      const queryParams = {
        site: this.site
      }
      if (this.formData.palletId && this.formData.palletId.trim()) {
        queryParams.palletId = this.formData.palletId.trim()
      }
      if (this.formData.partNo && this.formData.partNo.trim()) {
        queryParams.partNo = this.formData.partNo.trim()
      }
      if (this.formData.batchNo && this.formData.batchNo.trim()) {
        queryParams.batchNo = this.formData.batchNo.trim()
      }
      getPalletList(queryParams).then(({ data }) => {
        if (data && data.code === 0) {
          this.palletList = data.rows || []
          this.selectedPallet = null
          if (this.palletList.length === 0) {
            this.$message.warning('未找到满足条件的栈板')
          } else {
            this.$message.success(`找到 ${this.palletList.length} 个栈板`)
          }
        } else {
          this.$alert(data.msg || '查询失败', '错误', { confirmButtonText: '确定' })
          this.palletList = []
          this.selectedPallet = null
        }
      }).catch(error => {
        this.$alert(error.message || '查询失败', '错误', { confirmButtonText: '确定' })
        this.palletList = []
        this.selectedPallet = null
      })
    },
    selectPallet(pallet) {
      if (this.selectedPallet && this.selectedPallet.palletId === pallet.palletId) {
        this.selectedPallet = null
        this.$message.success('已取消选择')
      } else {
        this.selectedPallet = {
          palletId: pallet.palletId,
          partNo: pallet.partNo || '',
          qty: pallet.qty || 0,
          batchNo: pallet.batchNo || this.formData.batchNo || ''
        }
        this.$message.success(`已选择栈板: ${pallet.palletId}`)
      }
    },
    isSelected(pallet) {
      return this.selectedPallet && this.selectedPallet.palletId === pallet.palletId
    },
    // 下达动作：固定目标整托出库口，其余参数沿用海安立库取货流程 - rqrq
    handleDispatch() {
      if (!this.selectedPallet) {
        this.$alert('请选择一个栈板', '提示', { confirmButtonText: '确定' })
        return
      }
      this.$confirm('确定下达Call料任务到整托出库口？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dispatchLoading = true
        callOutToOutboundPort({
          site: this.site,
          palletId: this.selectedPallet.palletId,
          partNo: this.selectedPallet.partNo,
          qty: this.selectedPallet.qty,
          batchNo: this.selectedPallet.batchNo,
          targetArea: this.fixedTargetArea
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message.success('任务下达成功')
            this.resetPage(true)
          } else {
            this.$alert(data.msg || '任务下达失败', '错误', { confirmButtonText: '确定' })
          }
        }).catch(error => {
          this.$alert(error.message || '任务下达失败', '错误', { confirmButtonText: '确定' })
        }).finally(() => {
          this.dispatchLoading = false
        })
      }).catch(() => {
        // 用户取消确认时保持当前选中状态，便于继续操作 - rqrq
      })
    },
    cleanData() {
      this.resetPage(true)
    }
  },
  activated() {
    this.resetPage(true)
  },
  beforeRouteLeave(to, from, next) {
    this.resetPage(false)
    next()
  },
  mounted() {
    this.resetPage(true)
  }
}
</script>

<style scoped>
.action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #ccc !important;
  border-color: #ccc !important;
}
</style>