202501-Wms-Kate-Wuxi/dev_wms_client/src/layout/goodsOut.vue

<template>
  <el-config-provider :locale="zhCn">
    <el-container class="content">
      <div class="work-area">
        <fieldset class="search-area">
          <el-form ref="outTaskRef" :model="outTaskEntity" :label-position="labelPosition" label-width="158px"
                   style="max-width: 100%" :rules="requestRules" status-icon>
            <div style="display: flex; justify-content: space-between;">
              <el-row>
                <el-form-item label="出库类型" prop="outType">
                  <el-select-v2 style="width: 196px" v-model="outTaskEntity.outType" placeholder="请选择入库类型"
                                :options="outTypeOptions"></el-select-v2>
                </el-form-item>
                <el-form-item label="料号" prop="goodsId">
                  <el-input v-model="outTaskEntity.goodsId" @blur="getLackQty()" clearable/>
                </el-form-item>
                <el-form-item label="箱号" prop="vehicleId" v-if="outTaskEntity.outType !== 9">
                  <el-input v-model="outTaskEntity.vehicleId" clearable/>
                </el-form-item>
                <el-form-item label="数量" prop="needNum">
                  <el-input-number style="width: 196px" v-model.number="outTaskEntity.needNum"
                                   controls-position="right" :min="1" clearable/>
                </el-form-item>
                <el-form-item label="原因" prop="reason" v-if="outTaskEntity.outType === 9">
                  <el-select-v2 style="width: 196px" v-model="outTaskEntity.reason" placeholder="请选择紧急出库原因"
                                :options="reasonOptions"></el-select-v2>
                </el-form-item>
                <el-form-item label="工单" prop="workOrder" v-if="outTaskEntity.reason === '缺料'">
                  <el-input v-model="outTaskEntity.workOrder" @blur="getLackQty()" clearable/>
                </el-form-item>
              </el-row>
              <el-row>
                <el-button type="primary"
                           style="height: 50px; width: 100px; margin: auto 5px auto 5px; font-size: large; color: black;"
                           @click="confirmOut()">确认出库
                </el-button>
                <el-button type="warning"
                           style="height: 50px; width: 100px; margin: auto 5px auto 5px; font-size: large; color: black;"
                           @click="clearInput()">清除输入
                </el-button>
              </el-row>
            </div>
          </el-form>
        </fieldset>
        <fieldset class="confirm-area">
          <el-form ref="confirmRef" :model="confirmEntity" :label-position="labelPosition" label-width="158px"
                   style="max-width: 100%" :rules="confirmRules" status-icon>
            <div style="display: flex; justify-content: space-between;">
              <el-row>
                <el-row style="border-bottom: dashed 1px black;">
                  <el-form-item label="出库类型" prop="outType">
                    <el-select-v2 style="width: 196px" v-model="confirmEntity.outType" placeholder=" "
                                  :options="outTypeOptions" disabled></el-select-v2>
                  </el-form-item>
                  <el-form-item label="物料号" prop="goodsId">
                    <el-input v-model="confirmEntity.goodsId" disabled/>
                  </el-form-item>
                  <el-form-item label="总需求" prop="totalNeed">
                    <el-input v-model="confirmEntity.totalNeed" disabled/>
                  </el-form-item>
                  <el-form-item label="剩余需求" prop="remainNeed">
                    <el-input v-model="confirmEntity.remainNeed" disabled/>
                  </el-form-item>
                  <el-form-item label="本次计划拣选" prop="planPickQty">
                    <el-input v-model="confirmEntity.planPickQty" disabled/>
                  </el-form-item>
                  <el-form-item label="本次实际拣选" prop="realPickQty">
                    <el-input-number style="width: 196px" v-model.number="confirmEntity.realPickQty"
                                     controls-position="right" :min="0" clearable @change="changePlanQty()"/>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="箱号" prop="vehicleId">
                    <el-input v-model="confirmEntity.vehicleId" disabled/>
                  </el-form-item>
                  <el-form-item label="计划剩余数量" prop="planRemainQty">
                    <el-input v-model="confirmEntity.planRemainQty" disabled/>
                  </el-form-item>
                  <el-form-item label="实际剩余数量" prop="realRemainQty">
                    <el-input-number style="width: 196px" v-model.number="confirmEntity.realRemainQty"
                                     controls-position="right" :min="0" clearable/>
                  </el-form-item>
                </el-row>
              </el-row>
              <el-row>
                <el-button type="success"
                           style="height: 50px; width: 100px; margin: auto 5px auto 5px; font-size: large; color: black;"
                           @click="confirmOrRelease()">确认/放行
                </el-button>
              </el-row>
            </div>
          </el-form>
        </fieldset>
      </div>
    </el-container>
  </el-config-provider>
</template>

<script setup>
import store from '@/store'
import {requireStockOut, getCurrentTask, confirmCurrentTask, getGoodsLackQty} from '@/api/task.js'
import {errorBox, warningBox} from '@/utils/myMessageBox.js'
import {ElMessage} from 'element-plus'
import {nextTick, onBeforeUnmount, onMounted, reactive, ref, watch} from 'vue'
import {loading} from '@/utils/loading'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import {useRoute} from "vue-router";
import {labelPosition} from '@/constant/form'

const STAND_ID = store.getters.getStandId
const USER_NAME = store.getters.getUserName
let timer = ref()
let outTaskRef = ref()
let outTaskEntity = reactive({
  outType: 9,
  goodsId: '',
  vehicleId: '',
  reason: '',
  workOrder: '',
  needNum: null
})
const requestRules = reactive({
  outType: [
    {required: true, message: '请选择入库类型'}
  ],
  needNum: [
    {required: true, message: '请输入数量'},
    {type: 'number', message: '请输入数字值'}
  ],
})
const outTypeOptions = [
  {
    label: '空箱出库',
    value: 1
  },
  {
    label: '紧急出库',
    value: 9
  }
]
const reasonOptions = [
  {
    label: '补料',
    value: '补料'
  },
  {
    label: '少K',
    value: '少K'
  },
  {
    label: '缺料',
    value: '缺料'
  },
  {
    label: '返工工单',
    value: '返工工单'
  }
]
let confirmRef = ref()
let confirmEntity = reactive({
  taskId: '',
  outType: null,
  goodsId: '',
  totalNeed: null,
  remainNeed: null,
  planPickQty: null,
  realPickQty: null,
  stockId: '',
  vehicleId: '',
  planRemainQty: null,
  realRemainQty: null,
  isOut: null,
  putArea: '',
  warningQty: null
})
const confirmRules = reactive({})
let pauseGetPickFlag = ref(false)
const route = useRoute()// 路由
// 系统
onMounted(() => {
  nextTick(() => {
    timer.value = setInterval(() => {
      timerTask_1()
    }, 1000)
  })
})
onBeforeUnmount(() => {
  clearInterval(timer.value)
})
// 监视路由
watch(() => route.path, (newVal, oldVal) => {
  if (newVal === '/goodsOut') {
    timer.value = setInterval(() => {
      timerTask_1()
    }, 1000)
  } else {
    clearInterval(timer.value)
  }
})
// 定时器任务1
const timerTask_1 = () => {
  getTask()
}
// 获取拣选信息
const getTask = () => {
  if (pauseGetPickFlag.value) {
    return
  }
  const request = {
    standId: STAND_ID,
    userName: USER_NAME
  }
  // 获取当前拣选信息
  getCurrentTask(request).then(res => {
    const response = res.data
    if (response.code === 0) {
      const confirmVo = response.data
      // 设置form
      confirmEntity.taskId = confirmVo.taskConfirm.taskId
      confirmEntity.outType = confirmVo.taskConfirm.outType
      confirmEntity.goodsId = confirmVo.taskConfirm.goodsId
      confirmEntity.totalNeed = confirmVo.taskConfirm.totalNeed
      confirmEntity.remainNeed = confirmVo.taskConfirm.remainNeed
      confirmEntity.planPickQty = confirmVo.taskConfirm.planPickQty
      confirmEntity.realPickQty = confirmVo.taskConfirm.realPickQty
      confirmEntity.stockId = confirmVo.stockConfirm.stockId
      confirmEntity.vehicleId = confirmVo.stockConfirm.vehicleId
      confirmEntity.planRemainQty = confirmVo.stockConfirm.planRemainQty
      confirmEntity.realRemainQty = confirmVo.stockConfirm.realRemainQty
      confirmEntity.isOut = confirmVo.stockConfirm.isOut
      confirmEntity.putArea = confirmVo.stockConfirm.putArea
      confirmEntity.warningQty = confirmVo.stockConfirm.warningQty
      pauseGetPickFlag.value = true
      // 如果剩余数量低于预警值，弹框报警
      if (confirmEntity.isOut === 0 && confirmEntity.planRemainQty <= confirmEntity.warningQty) {
        warningBox('剩余数量低于预警值，请清点库存数量。')
      }
    } else if (response.code === 400) {
      // 警告，弹框
      pauseGetPickFlag.value = true
      warningBox(response.message)
    }
  }).catch(err => {
    console.log(err)
    pauseGetPickFlag.value = true
    errorBox('请求错误，请检查完原因后刷新界面。')
  })
}
// 清除输入
const clearInput = () => {
  outTaskEntity.outType = 9
  outTaskEntity.goodsId = ''
  outTaskEntity.vehicleId = ''
  outTaskEntity.needNum = null
}
// 确认出库
const confirmOut = () => {
  if (outTaskEntity.needNum == null) {
    errorBox('请输入正确的数量。')
    return
  }
  if (outTaskEntity.outType !== 1) {
    if (outTaskEntity.goodsId === '') {
      errorBox('非空箱出库时，请输入料号。')
      return
    }
  }
  if (outTaskEntity.outType === 9) {
    if (outTaskEntity.reason === '') {
      errorBox('紧急出库请选择原因。')
      return
    }
    if (outTaskEntity.reason === '缺料' && outTaskEntity.workOrder === '') {
      errorBox('缺料时必须输入工单号。')
      return
    }
  }
  const request = {
    outType: outTaskEntity.outType,
    goodsId: outTaskEntity.goodsId.toUpperCase().trim(),
    vehicleId: outTaskEntity.vehicleId.toUpperCase().trim(),
    needNum: outTaskEntity.needNum,
    reason: outTaskEntity.reason,
    workOrder: outTaskEntity.workOrder.trim(),
    destination: STAND_ID,
    userName: USER_NAME,
    standId: STAND_ID
  }
  loading.open('请求中，请稍等...')
  requireStockOut(request).then(res => {
    const response = res.data
    if (response.code === 0) {
      // 成功
      ElMessage.success(response.message)
      clearInput()
    } else {
      errorBox(response.message)
    }
  }).catch(err => {
    console.log(err)
    errorBox('请求错误。')
  }).finally(() => {
    loading.close()
  })
}
// 确认/放行
const confirmOrRelease = () => {
  // 确认放行---与配料工作区分开来
  const request = {
    taskConfirm: {
      taskId: confirmEntity.taskId,
      outType: confirmEntity.outType,
      goodsId: confirmEntity.goodsId,
      totalNeed: confirmEntity.totalNeed,
      remainNeed: confirmEntity.remainNeed,
      planPickQty: confirmEntity.planPickQty,
      realPickQty: confirmEntity.realPickQty,
    },
    stockConfirm: {
      stockId: confirmEntity.stockId,
      vehicleId: confirmEntity.vehicleId,
      goodsId: confirmEntity.goodsId,
      planRemainQty: confirmEntity.planRemainQty,
      realRemainQty: confirmEntity.realRemainQty,
      isOut: confirmEntity.isOut,
      putArea: confirmEntity.putArea,
    },
    standId: STAND_ID,
    userName: USER_NAME
  }
  confirmCurrentTask(request).then(res => {
    const response = res.data
    if (response.code === 0) {
      // 设置form
      clearConfirmEntity()
      pauseGetPickFlag.value = false
      ElMessage.success(response.message)
    } else if (response.code === 400) {
      pauseGetPickFlag.value = false
      warningBox(response.message)
    } else {
      // 错误，弹框
      errorBox(response.message)
    }
  }).catch(err => {
    console.log(err)
    errorBox('请求错误，请检查完原因后刷新界面。')
  })
}
// 当拣选数量修改时，要对应的修改
const changePlanQty = () => {
  if (confirmEntity.isOut === 0 && confirmEntity.realPickQty !== confirmEntity.planPickQty) {
    // 修正实际剩余数量
    confirmEntity.realRemainQty = confirmEntity.planRemainQty - confirmEntity.realPickQty + confirmEntity.planPickQty
  }
}
// 清楚confirmEntity
const clearConfirmEntity = () => {
  confirmEntity.taskId = ''
  confirmEntity.outType = null
  confirmEntity.goodsId = ''
  confirmEntity.totalNeed = null
  confirmEntity.remainNeed = null
  confirmEntity.planPickQty = null
  confirmEntity.realPickQty = null
  confirmEntity.stockId = ''
  confirmEntity.vehicleId = ''
  confirmEntity.planRemainQty = null
  confirmEntity.realRemainQty = null
  confirmEntity.isOut = null
  confirmEntity.putArea = ''
  confirmEntity.warningQty = null
}
// 获取对应工单对应物料号的缺料数量
const getLackQty = () => {
  if (outTaskEntity.outType !== 9 || outTaskEntity.reason !== '缺料') {
    // 非紧急出库且非缺料，则不处理
    return;
  }
  if (outTaskEntity.workOrder === '' || outTaskEntity.goodsId === '') {
    // 缺少工单号或者料号
    return
  }
  // 设置请求参数
  const request = {
    workOrder: outTaskEntity.workOrder.trim(),
    goodsId: outTaskEntity.goodsId.toUpperCase().trim()
  }
  loading.open('查询缺料缺料数量中...')
  getGoodsLackQty(request).then(res => {
    outTaskEntity.needNum = res.data
  }).catch(err => {
    // 异常，清空数量
    outTaskEntity.needNum = null
    console.log('获取缺料数量异常：' + err)
  }).finally(() => {
    loading.close()
  })
}
</script>

<style scoped>
.content {
  display: flex;
  width: 100%;
}

.work-area {
  width: 100%;
  /* padding: 5px; */
}

.search-area {
  margin: auto;
  min-height: fit-content;
  max-height: 90%;
  margin-bottom: 10px;
  min-width: inherit;
  border: solid 1px;
  border-radius: 10px;
  box-shadow: 0px 15px 10px -15px #000;
  overflow: auto;
  padding: 10px;
}

.confirm-area {
  margin: auto;
  min-height: fit-content;
  max-height: 90%;
  margin-bottom: 10px;
  min-width: inherit;
  border: solid 1px;
  border-radius: 10px;
  box-shadow: 0px 15px 10px -15px #000;
  overflow: auto;
  padding: 10px;
}

.el-form-item {
  margin: 10px 5px 10px 5px;
}

.el-form-item .el-input {
  width: 196px;
}

.table-class {
  margin: 5px 5px 5px 5px;
  width: inherit;
}
</style>