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

<template>
  <el-config-provider :locale="zhCn">
    <el-container class="content">
      <div class="work-area">
        <fieldset class="main-area">
          <el-form ref="workFormRef" :model="workFormEntity" :label-position="labelPosition"
                   label-width="158px" style="max-width: 100%" :rules="rules" status-icon>
            <div style="display: flex; justify-content: space-between;">
              <el-row>
                <el-form-item label="计划开工日期" prop="planStartDate">
                  <el-date-picker v-model="workFormEntity.planStartDate" type="date"
                                  placeholder="选择开工日期" :shortcuts="shortcuts" style="width: 196px;" clearable/>
                </el-form-item>
                <el-form-item label="工单号" prop="workOrder">
                  <el-select v-model="workFormEntity.workOrder" filterable default-first-option
                             placeholder="请选择工单号" style="width: 196px" :loading="optionLoading" remote
                             :remote-method="(query) => {
                                            workFormQuery.workOrder = query
                                            initWorkOptions()
                                        }" remote-show-suffix reserve-keyword clearable>
                    <el-option v-for="item in workOptions.workOrder" :key="item" :label="item"
                               :value="item"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="K料备注" prop="kittingRemark"
                              v-if="workFormEntity.kittingRemark !== '' && workFormEntity.kittingRemark !== null && workFormEntity.kittingRemark !== undefined">
                  <el-input v-model="workFormEntity.kittingRemark" placeholder="K料备注"
                            :input-style="{'color':'red'}" readonly/>
                </el-form-item>
                <el-form-item label="原始成品号" prop="productIdOrigin">
                  <el-input v-model="workFormEntity.productIdOrigin" placeholder="原始成品号" disabled/>
                </el-form-item>
                <el-form-item label="过滤成品号" prop="productId">
                  <el-input v-model="workFormEntity.productId" placeholder="过滤成品号" disabled/>
                </el-form-item>
                <el-form-item label="单片号" prop="singleProductId">
                  <el-select v-model="workFormEntity.singleProductId" filterable default-first-option
                             placeholder="请选择单片号" style="width: 196px" :loading="optionLoading" remote
                             :remote-method="(query) => {
                                            workFormQuery.singleProductId = query
                                            initWorkOptions()
                                        }" remote-show-suffix reserve-keyword clearable>
                    <el-option v-for="item in workOptions.singleProductId" :key="item" :label="item"
                               :value="item"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="料盒号" prop="boxNo">
                  <el-select v-model="workFormEntity.boxNo" filterable default-first-option
                             placeholder="请选择料盒号" style="width: 196px" :loading="optionLoading" remote
                             :remote-method="(query) => {
                                            workFormQuery.boxNo = query
                                            initWorkOptions()
                                        }" remote-show-suffix reserve-keyword clearable>
                    <el-option v-for="item in workOptions.boxNo" :key="item" :label="item"
                               :value="item"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="原材料号" prop="goodsId">
                  <el-select v-model="workFormEntity.goodsId" filterable default-first-option
                             placeholder="请选择原材料号" style="width: 196px" :loading="optionLoading" remote
                             :remote-method="(query) => {
                                            workFormQuery.goodsId = query
                                            initWorkOptions()
                                        }" remote-show-suffix reserve-keyword clearable>
                    <el-option v-for="item in workOptions.goodsId" :key="item" :label="item"
                               :value="item"/>
                  </el-select>
                </el-form-item>
              </el-row>
              <el-row>
                <el-button type="success"
                           style="height: 50px; width: 100px; margin: auto 5px auto 5px; font-size: large; color: black;"
                           @click="confirmStart()">确认配料
                </el-button>
                <el-button type="warning"
                           style="height: 50px; width: 100px; margin: auto 5px auto 5px; font-size: large; color: black;"
                           @click="resetWorkFormQuery()">清除选择
                </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="workOrder">
                    <el-input v-model="confirmEntity.workOrder" disabled/>
                  </el-form-item>
                  <el-form-item label="成品号" prop="productId">
                    <el-input v-model="confirmEntity.productId" disabled/>
                  </el-form-item>
                  <el-form-item label="单片号" prop="singleProductId">
                    <el-input v-model="confirmEntity.singleProductId" disabled/>
                  </el-form-item>
                  <el-form-item label="物料号" prop="goodsId">
                    <el-input v-model="confirmEntity.goodsId" disabled/>
                  </el-form-item>
                  <el-form-item label="料盒号" prop="boxNo">
                    <el-input v-model="confirmEntity.boxNo" disabled/>
                  </el-form-item>
                  <el-form-item label="K料备注" prop="kittingRemark">
                    <el-input v-model="confirmEntity.kittingRemark"
                              :input-style="{'color': 'red'}" readonly/>
                  </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="putArea">
                    <el-input v-model="confirmEntity.putArea" disabled/>
                  </el-form-item>
                  <el-form-item label="计划剩余数量" prop="planRemainQty" v-if="confirmEntity.isOut !== 1">
                    <el-input v-model="confirmEntity.planRemainQty" disabled/>
                  </el-form-item>
                  <el-form-item label="实际剩余数量" prop="realRemainQty" v-if="confirmEntity.isOut !== 1">
                    <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="primary"
                           style="height: 50px; width: 100px; margin: auto 5px auto 5px; font-size: large; color: black;"
                           @click="showBoxSummary()">显示料盒
                </el-button>
                <el-button type="success" ref="confirmReleaseBtn"
                           style="height: 50px; width: 100px; margin: auto 5px auto 5px; font-size: large; color: black;"
                           @click="confirmOrRelease()">确认/放行
                </el-button>
                <el-button type="warning"
                           style="height: 50px; width: 100px; margin: auto 5px auto 5px; font-size: large; color: black;"
                           @click="requestPrint()">打印标签
                </el-button>
              </el-row>
            </div>
          </el-form>
        </fieldset>
        <div class="table-area">
          <el-table :data="currentBoxGoodsList" stripe border class="table-class" max-height="350px"
                    highlight-current-row :header-cell-style="{ 'text-align': 'center' }"
                    :cell-style="{ 'text-align': 'center' }" @sort-change="handleSortChange">
            <el-table-column prop="goodsId" label="料号" min-width="120px" sortable="custom"
                             show-overflow-tooltip/>
            <el-table-column prop="needNum" label="需求数量" min-width="120px" sortable="custom"
                             show-overflow-tooltip/>
            <el-table-column prop="finishNum" label="已完成数量" min-width="120px" sortable="custom"
                             show-overflow-tooltip/>
          </el-table>
          <br/>
          <el-pagination v-model:current-page="baseTableQuery.currentPage"
                         v-model:page-size="baseTableQuery.pageSize" :page-sizes="[5, 10, 15]" :small="false"
                         :disabled="false" :background="false" :default-page-size="5" @size-change="searchKittingGoods"
                         @current-change="searchKittingGoods" layout="total, sizes, prev, pager, next, jumper"
                         :total="baseTableQuery.total"/>
        </div>
        <el-dialog v-model="boxShowFlag" title="料盒总览" width="50%" center :close="closeBoxSummary">
          <span>料盒信息</span>
          <el-table :data="boxSummary" stripe border class="table-class" max-height="200px"
                    :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="workOrder" label="工单号" fixed="left"/>
            <el-table-column prop="taoQty" label="套数"/>
            <el-table-column prop="productId" label="总成号"/>
            <el-table-column prop="singleProductId" label="成品/单片"/>
            <el-table-column prop="boxNo" label="料盒号"/>
            <el-table-column prop="boxQty" label="料盒数量"/>
          </el-table>
          <span>缺料信息</span>
          <el-table :data="goodsLackSummary" stripe border class="table-class" max-height="450px"
                    :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="goodsId" label="料号" fixed="left"/>
            <el-table-column prop="needNum" label="需求数量"/>
            <el-table-column prop="stockNum" label="库存数量"/>
            <el-table-column prop="lackNum" label="缺料数量"/>
            <el-table-column prop="remark" label="备注"/>
          </el-table>
        </el-dialog>
        <div style="width: 0;height: 0;overflow: hidden">
          <button ref="printBtn" style="display: none;" v-print="printObj"></button>
          <div id="printArea" class="objectDialogFlowPrint">
            <div class="pageWarp" v-for="item in printTabs">
              <div class="print-tab-text">
                <div class="print-row-normal">工单：{{ item.workOrder }}</div>
                <div class="print-row-normal">总成：{{ item.productId }}</div>
                <div class="print-row-normal">单片：{{ item.singleProductId }}</div>
                <div class="print-row-normal">配料：{{ item.kittingDate }}</div>
              </div>
              <div class="print-tab-text">
                <div class="print-row-normal">测试台：{{ item.testNo }}</div>
                <div class="print-row-normal">产量：{{ item.productionQty }}</div>
                <div class="print-row-normal">料盒号：{{ item.boxNo }}</div>
                <div class="print-row-normal">生产：{{ item.produceDate }}</div>
              </div>
              <div class="print-tab-image">
                <qrcode-vue
                    :value="item.imageId"
                    :size="size" :foreground="color" level="H"/>
              </div>
            </div>
          </div>
        </div>
        <div style="width: 0;height: 0;overflow: hidden">
          <button ref="printLackGoodsBtn" style="display: none;"
                  v-print="getPrintObj('printLackGoodsArea')"></button>
          <div id="printLackGoodsArea" class="objectDialogFlowPrint">
            <div class="pageWarp" v-for="item in lackGoodsForPrint">
              <div class="print-tab-full" style="margin-left: 30px">
                <div class="print-row-big">料盒：{{ item.boxNo }}</div>
                <div class="print-row-big">料号：{{ item.goodsId }}</div>
                <div class="print-row-big">需求：{{ item.needNum }}</div>
                <div class="print-row-big">缺料：{{ item.needNum - item.finishNum }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-container>
  </el-config-provider>
</template>

<script setup>
import store from '@/store'
import QrcodeVue from 'qrcode.vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import {
  queryKateWorks,
  initWorks,
  getCurrentWorks,
  confirmCurrentWork,
  getBoxesAndLacks,
  queryWorkingGoodsByPage,
  getLackGoods
} from '@/api/kateWork.js'
import {errorBox, successBox, warningBox} from '@/utils/myMessageBox.js'
import {ElMessage} from 'element-plus'
import {dateFormatter} from '@/utils/formatter.js'
import {nextTick, onBeforeUnmount, onMounted, reactive, ref, watch} from 'vue'
import {printObj, labelPosition, shortcuts, getPrintObj} from '@/constant/form'
import {loading} from '@/utils/loading'
import {genTableRequest} from '@/utils/generator.js'
import {useRoute} from 'vue-router'

const standId = store.getters.getStandId
const userName = store.getters.getUserName
let storeKittingWork = store.getters.getKittingWork
let timer = ref()
let optionLoading = ref(false)
let workOptions = reactive({
  workOrder: [],
  singleProductId: [],
  boxNo: [],
  goodsId: []
})
let workFormRef = ref()
let workFormEntity = reactive({
  workOrder: '',
  productIdOrigin: '',
  productId: '',
  singleProductId: '',
  boxNo: '',
  goodsId: '',
  planStartDate: null,
  kittingRemark: ''
})
let workFormQuery = reactive({
  workOrder: '',
  singleProductId: '',
  boxNo: '',
  goodsId: '',
})
const rules = reactive({
  workOrder: [
    {required: true, message: '请选择工单号。'}
  ]
})
let confirmRef = ref()
let confirmEntity = reactive({
  workOrder: storeKittingWork.workOrder,
  productId: storeKittingWork.productId,
  singleProductId: storeKittingWork.singleProductId,
  boxNo: storeKittingWork.boxNo
})
let confirmRules = reactive({})
let boxShowFlag = ref(false)
let boxSummary = ref([])
let goodsLackSummary = ref([])
let pauseGetWorkFlag = ref(false)
let printTabs = ref([])
let currentBoxGoodsList = ref([])
let baseTableQuery = reactive({
  currentPage: 1,
  pageSize: 5,
  total: 0,
  sortBy: new Map([['goodsId', true]]),// 按照料号顺序排序
  standId: store.getters.getStandId,
  userName: store.getters.getUserName
})
let lackGoodsForPrint = ref([])
const printBtn = ref()
const printLackGoodsBtn = ref()
const confirmReleaseBtn = ref()
const size = ref(35)
const color = ref('#000000')
const route = useRoute()// 路由
// 系统
onMounted(() => {
  nextTick(() => {
    initWorkOptions()
    timer.value = setInterval(() => {
      timerTask_1()
    }, 1000)
    // 监听enter键
    window.addEventListener('keydown', solveEnterKey)
  })
})
onBeforeUnmount(() => {
  clearInterval(timer.value)
  window.removeEventListener('keydown', solveEnterKey)
})
// 监视路由
watch(() => route.path, (newVal, oldVal) => {
  if (newVal === '/kitting') {
    timer.value = setInterval(() => {
      timerTask_1()
    }, 1000)
    // 监听enter键
    window.addEventListener('keydown', solveEnterKey)
  } else {
    clearInterval(timer.value)
    window.removeEventListener('keydown', solveEnterKey)
  }
})
watch(() => workFormEntity.workOrder, (newVal, oldVal) => {
  if (newVal === '') {
    workFormEntity.productIdOrigin = ''
    workFormEntity.productId = ''
    workFormEntity.singleProductId = ''
    workFormEntity.boxNo = ''
    workFormEntity.goodsId = ''
    workFormEntity.kittingRemark = ''
  }
})
watch(() => workFormEntity.productId, (newVal, oldVal) => {
  if (newVal !== oldVal) {
    workFormEntity.singleProductId = ''
    workFormEntity.boxNo = ''
    workFormEntity.goodsId = ''
  }
})
watch(() => workFormEntity.singleProductId, (newVal, oldVal) => {
  if (newVal !== oldVal) {
    workFormEntity.boxNo = ''
    workFormEntity.goodsId = ''
  }
})
watch(() => workFormEntity.boxNo, (newVal, oldVal) => {
  if (newVal !== oldVal) {
    workFormEntity.goodsId = ''
  }
})
// 定时器任务1
const timerTask_1 = () => {
  // 查询工作
  getWork()
  // 判断是否需要显示料盒信息
  ifNeedShowBoxSummary()
  // 查询当前配料的物料信息
  searchKittingGoods()
}
// 自定义方法
const solveEnterKey = (e) => {
  if (e.key.toLowerCase() === 'enter') {
    confirmReleaseBtn.value.$el.click()
  }
}
// 初始化工单options
const initWorkOptions = () => {
  const request = {
    workOrder: workFormQuery.workOrder !== '' ? workFormQuery.workOrder : workFormEntity.workOrder,
    singleProductId: workFormQuery.singleProductId !== '' ? workFormQuery.singleProductId : workFormEntity.singleProductId,
    boxNo: workFormQuery.boxNo !== '' ? workFormQuery.boxNo : workFormEntity.boxNo,
    goodsId: workFormQuery.goodsId !== '' ? workFormQuery.goodsId : workFormEntity.goodsId,
    planStartDate: dateFormatter(workFormEntity.planStartDate)
  }
  optionLoading.value = true
  queryKateWorks(request).then(res => {
    const response = res.data
    if (response.code === 0) {
      workOptions.workOrder = response.data.workOrder
      // 设置成品号
      workFormEntity.productIdOrigin = response.data.productIdOrigin
      workFormEntity.productId = response.data.productId
      workFormEntity.kittingRemark = response.data.kittingRemark
      workOptions.singleProductId = response.data.singleProductId
      workOptions.boxNo = response.data.boxNo
      workOptions.goodsId = response.data.goodsId
    } else {
      workOptions.workOrder = []
      // 重置成品号
      workFormEntity.productIdOrigin = ''
      workFormEntity.productId = ''
      workFormEntity.kittingRemark = ''
      workOptions.singleProductId = []
      workOptions.boxNo = []
      workOptions.goodsId = []
    }
  }).catch(err => {
    console.log(err)
    errorBox('查询选项错误。')
  }).finally(() => {
    optionLoading.value = false
  })
}
// 重置参数
const resetWorkFormQuery = () => {
  workFormQuery.workOrder = ''
  workFormQuery.singleProductId = ''
  workFormQuery.boxNo = ''
  workFormQuery.goodsId = ''
  workFormEntity.workOrder = ''
  workFormEntity.productIdOrigin = ''
  workFormEntity.productId = ''
  workFormEntity.singleProductId = ''
  workFormEntity.boxNo = ''
  workFormEntity.goodsId = ''
  workFormEntity.kittingRemark = ''
}
// 确认配料
const confirmStart = () => {
  const request = {
    workOrder: workFormEntity.workOrder,
    singleProductId: workFormEntity.singleProductId,
    boxNo: workFormEntity.boxNo,
    goodsId: workFormEntity.goodsId,
    standId: standId,
    userName: userName
  }
  loading.open()
  initWorks(request).then(res => {
    const response = res.data
    if (response.code === 0) {
      ElMessage.success(response.message)
      setTimeout(() => {
        showBoxSummary()
      }, 2000)
    } else {
      errorBox(response.message)
    }
  }).catch(err => {
    console.log(err)
    errorBox('请求错误。')
  }).finally(() => {
    loading.close()
  })
}
// 显示料盒总览
const showBoxSummary = () => {
  if (boxShowFlag.value) {
    return
  }
  boxSummary.value = []
  goodsLackSummary.value = []
  // 请求
  const request = {
    standId: standId,
    userName: userName
  }
  getBoxesAndLacks(request).then(res => {
    const response = res.data
    if (response.code === 0) {
      const boxDetailVo = response.data
      // 获得打印标签数据
      getPrintTabs(boxDetailVo.boxSummary)
      // 料盒显示数据
      boxSummary.value = [boxDetailVo.boxSummary]
      goodsLackSummary.value = boxDetailVo.goodsLackSummary
      boxShowFlag.value = true
    } else {
      errorBox(response.message)
    }
  }).catch(error => {
    console.log(error)
    errorBox('发生异常：' + error)
  })
}
// 关闭弹窗
const closeBoxSummary = () => {
  boxSummary.value = []
  goodsLackSummary.value = []
  boxShowFlag.value = false
}
// 获取工作信息
const getWork = () => {
  if (pauseGetWorkFlag.value) {
    return
  }
  const request = {
    standId: standId,
    userName: userName
  }
  getCurrentWorks(request).then(res => {
    const response = res.data
    if (response.code === 0) {
      // 设置form
      confirmEntity.workIndex = response.data.orderConfirm.workIndex
      confirmEntity.workOrder = response.data.orderConfirm.workOrder
      confirmEntity.productId = response.data.orderConfirm.productId
      confirmEntity.singleProductId = response.data.orderConfirm.singleProductId
      confirmEntity.boxNo = response.data.orderConfirm.boxNo
      confirmEntity.goodsId = response.data.orderConfirm.goodsId
      confirmEntity.planPickQty = response.data.orderConfirm.planPickQty
      confirmEntity.realPickQty = response.data.orderConfirm.realPickQty
      confirmEntity.kittingRemark = response.data.orderConfirm.kittingRemark
      confirmEntity.stockId = response.data.stockConfirm.stockId
      confirmEntity.vehicleId = response.data.stockConfirm.vehicleId
      confirmEntity.planRemainQty = response.data.stockConfirm.planRemainQty
      confirmEntity.realRemainQty = response.data.stockConfirm.realRemainQty
      confirmEntity.isOut = response.data.stockConfirm.isOut
      confirmEntity.putArea = response.data.stockConfirm.putArea
      confirmEntity.warningQty = response.data.stockConfirm.warningQty
      pauseGetWorkFlag.value = true
      // 如果剩余数量低于预警值，弹框报警
      if (confirmEntity.isOut === 0 && confirmEntity.planRemainQty <= confirmEntity.warningQty) {
        warningBox('剩余数量低于预警值，请清点库存数量。')
      }
    } else if (response.code === 400) {
      // 警告，弹框
      pauseGetWorkFlag.value = true
      warningBox(response.message)
    } else {
      if (response.data != null && response.data.orderConfirm != null) {
        confirmEntity.workOrder = response.data.orderConfirm.workOrder
        confirmEntity.boxNo = response.data.orderConfirm.boxNo
        confirmEntity.productId = response.data.orderConfirm.productId
        confirmEntity.singleProductId = response.data.orderConfirm.singleProductId
        confirmEntity.kittingRemark = response.data.orderConfirm.kittingRemark
      } else {
        confirmEntity.workOrder = ''
        confirmEntity.boxNo = ''
        confirmEntity.productId = ''
        confirmEntity.singleProductId = ''
        confirmEntity.kittingRemark = ''
      }
    }
  }).catch(err => {
    console.log(err)
    pauseGetWorkFlag.value = true
    errorBox('请求错误，请检查完原因后刷新界面。')
  })
}
// 是否弹出料盒界面
const ifNeedShowBoxSummary = () => {
  if (storeKittingWork.workOrder !== '') {
    // 需要弹出上一个料盒的缺料打印信息
    if (confirmEntity.workOrder !== storeKittingWork.workOrder
        || confirmEntity.productId !== storeKittingWork.productId
        || confirmEntity.singleProductId !== storeKittingWork.singleProductId
        || confirmEntity.boxNo !== storeKittingWork.boxNo) {
      printLacks(storeKittingWork.workOrder, storeKittingWork.productId, storeKittingWork.singleProductId, storeKittingWork.boxNo)
      if (confirmEntity.workOrder === '') {
        // 打印这个工单剩余缺料标签---整个料盒都缺料的标签

        // 说明当前工单工作已完成，需要弹框提示工作已完成
        successBox('当前工单已完成。')
      } else if (confirmEntity.boxNo !== storeKittingWork.boxNo) {
        // 前一个料盒已完成，需要弹框提示料盒已完成
        showBoxSummary()
      }
      // 替换store
      storeKittingWork.workOrder = confirmEntity.workOrder
      storeKittingWork.productId = confirmEntity.productId
      storeKittingWork.singleProductId = confirmEntity.singleProductId
      storeKittingWork.boxNo = confirmEntity.boxNo
    }
  } else {
    // 替换store
    storeKittingWork.workOrder = confirmEntity.workOrder
    storeKittingWork.productId = confirmEntity.productId
    storeKittingWork.singleProductId = confirmEntity.singleProductId
    storeKittingWork.boxNo = confirmEntity.boxNo
  }
  store.commit('mutationKittingWork', storeKittingWork)
}
// 确认放行
const confirmOrRelease = () => {
  const request = {
    orderConfirm: {
      workIndex: confirmEntity.workIndex,
      workOrder: confirmEntity.workOrder,
      productId: confirmEntity.productId,
      singleProductId: confirmEntity.singleProductId,
      boxNo: confirmEntity.boxNo,
      goodsId: confirmEntity.goodsId,
      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: standId,
    userName: userName
  }
  confirmCurrentWork(request).then(res => {
    const response = res.data
    if (response.code === 0) {
      // 设置form
      resetConfirmEntity()
      ElMessage.success(response.message)
    } else if (response.code === 400) {
      // 设置form
      resetConfirmEntity()
      // 警告
      warningBox(response.message)
    } else {
      // 错误
      errorBox(response.message)
    }
    pauseGetWorkFlag.value = false
  }).catch(err => {
    console.log(err)
    errorBox('请求错误，请检查完原因后刷新界面。')
  })
}
const resetConfirmEntity = () => {
  confirmEntity.workIndex = ''
  confirmEntity.goodsId = ''
  confirmEntity.planPickQty = null
  confirmEntity.realPickQty = null
  confirmEntity.stockId = ''
  confirmEntity.kittingRemark = ''
  confirmEntity.vehicleId = ''
  confirmEntity.planRemainQty = null
  confirmEntity.realRemainQty = null
  confirmEntity.isOut = null
  confirmEntity.putArea = ''
  confirmEntity.warningQty = null
}
// 当拣选数量修改时，要对应的修改
const changePlanQty = () => {
  if (confirmEntity.isOut === 0 && confirmEntity.realPickQty !== confirmEntity.planPickQty) {
    // 修正量
    const changeQty = confirmEntity.realPickQty - confirmEntity.planPickQty
    // 修正实际剩余数量
    confirmEntity.realRemainQty = confirmEntity.planRemainQty - changeQty
  }
}
const requestPrint = () => {
  nextTick(() => {
    printBtn.value.click()
  });
}
// 获得打印数据
const getPrintTabs = (boxSummary) => {
  printTabs.value = []
  if (boxSummary !== undefined) {
    for (let i = 1; i <= boxSummary.boxQty; i++) {
      printTabs.value.push(
          {
            workOrder: boxSummary.workOrder,
            productId: boxSummary.productIdOrigin,
            singleProductId: boxSummary.singleProductId,
            boxNo: boxSummary.boxNo,
            kittingDate: boxSummary.kittingDate,
            produceDate: boxSummary.produceDate,
            testNo: boxSummary.testNo,
            productionQty: boxSummary.productionQty,
            imageId: boxSummary.imageId,
          }
      )
    }
  }
}
// 查询配料单
const searchKittingGoods = () => {
  let request = genTableRequest(baseTableQuery)
  request.workOrder = confirmEntity.workOrder
  request.productId = confirmEntity.productId
  request.singleProductId = confirmEntity.singleProductId
  request.boxNo = confirmEntity.boxNo
  queryWorkingGoodsByPage(request).then(res => {
    const response = res.data
    if (response.code === 0) {
      const data = response.data
      if (data != null) {
        currentBoxGoodsList.value = data.lists
        baseTableQuery.total = data.total
      } else {
        currentBoxGoodsList.value = []
        baseTableQuery.total = 0
      }
    }
  }).catch(err => {
    console.log(err)
  })

}
// 处理排序
const handleSortChange = (data) => {
  if (baseTableQuery.sortBy.has(data.prop)) {
    baseTableQuery.sortBy.delete(data.prop)
  }
  baseTableQuery.sortBy.set(data.prop, data.order.toLowerCase() === 'ascending')
  searchKittingGoods()
}
// 打印上一个料盒的缺料信息
const printLacks = (workOrder, productId, singleProductId, boxNo) => {
  const request = {
    workOrder: workOrder,
    productId: productId,
    singleProductId: singleProductId,
    boxNo: boxNo,
    standId: standId,
    userName: userName
  }
  getLackGoods(request).then(res => {
    const response = res.data
    if (response.code === 0) {
      lackGoodsForPrint.value = response.data
      nextTick(() => {
        printLackGoodsBtn.value.click()
      });
    }
  }).catch(err => {
    console.log(err)
  })
}
</script>
<style scoped>
.content {
  display: flex;
  width: 100%;
}

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

.main-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;
}

.title-area {
  display: flex;
  /* min-height: 10%; */
  max-height: max-content;
  margin-bottom: 10px;
  min-width: inherit;
  border: solid 1px;
  border-radius: 10px;
  box-shadow: 0px 15px 10px -15px #000;
  overflow: auto;
}

.table-area {
  margin: auto;
  min-height: fit-content;
  max-height: 60%;
  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;
}

@media print {
  @page {
    size: auto;
    margin: 0;
  }

  body,
  html {
    height: auto !important;
  }
}

.objectDialogFlowPrint {
  width: 100% !important;
  height: 100% !important;
}

.objectDialogFlowPrint .pageWarp {
  /*这句话很重要，控制时候强制分页 https://www.w3school.com.cn/cssref/pr_page-break-after.asp*/
  page-break-after: always;
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 0;
  display: flex;
  print-color-adjust: exact;
}

.print-tab-text {
  width: 40%;
  align-content: center;
}

.print-tab-image {
  width: 20%;
  align-content: center;
}

.print-row-normal {
  margin: 8px 3px 8px 3px;
  font-size: 13px;
  font-weight: bold;
  text-align: left;
}

.print-tab-full {
  width: 90%;
  align-content: center;
}

.print-row-big {
  margin: 8px 3px 8px 3px;
  font-size: 20px;
  font-weight: bold;
  text-align: left;
}
</style>