baoshi-swms-app-web/src/views/outbound/components/BigPicking.vue

<template>
  <van-dialog v-model:show="orderBigTrueFalseBy"
              :title="props.ownerMap[props.model.owner]?props.ownerMap[props.model.owner]+'-大件任务列表':props.model.owner+'-大件任务列表'"
              close-on-click-overlay
              :show-cancel-button="false"
              :show-confirm-button="false"
  >
    <div class="big-task-list" @click.stop>
      <div class="big-task-item" v-for="(item,index) in props.taskDetailList" :key="index" >
        <div class="big-task-content"  >
          <div class="big-content">{{item.orderNo}}</div>
          <div class="big-carrier"><van-notice-bar :background="'none'" :speed="10" :text="item.carrierName" /></div>
          <div class="big-content" :style="item.hours>=2?'color:#ee0a24;font-weight: 500':''">{{item.totalItemNum}}<span style="font-size: 12px">件</span></div>
        </div>
        <div class="big-task-button">
          <div class="big-button" @click="onTypeOrder(item,'LOCATION_PICK')"  >按库位查看</div>
          <div class="big-button" @click="onTypeOrder(item,'AISLE_PICK')">按巷道查看</div>
          <div class="big-button" @click="onTypeOrder(item,'ITEM_PICK')" >按商品查看</div>
        </div>
      </div>
    </div>
  </van-dialog>
  <van-dialog v-model:show="subBigOrderTrueFalseBy"
              :title="typeMap[taskType]+'拣货任务'+'-'+subModel.orderNo"
              show-cancel-button
              confirm-button-text="生成任务"
              close-on-click-overlay
              :beforeClose="onBuildTask"
  >
    <div class="sub-task-list" >
      <div style="display: flex;justify-content: space-between;">
        <div><van-checkbox  class="sub-task-checkbox" v-model="isCheckAll"  :indeterminate="isIndeterminate"  @change="checkAllChange">全选</van-checkbox></div>
        <div  v-if="taskType==='ITEM_PICK'" >
          <van-tag type="primary" :plain="sortType==='number'"   @click="onSort('sql')">按排序规则</van-tag>
          <van-tag type="primary" :plain="sortType==='sql'"  @click="onSort('number')">按库位数量</van-tag>
        </div>
      </div>
      <van-checkbox-group  v-model="checkedResult" @change="checkedChange">
        <van-checkbox class="sub-task-checkbox" v-for="(item,index) in typeTaskList" :key="index" :name="item"  :disabled="(item.allowPick===false && taskType==='AISLE_PICK') || item.status!==40" >
          <div class="sub-task-item" v-if="taskType==='LOCATION_PICK'">
            <div  style="font-size: 13px;font-weight: bold" >{{item.location}}</div>
            <div class="sub-task-item-content" >
              <van-notice-bar :background="'none'" style="font-size:12px" :speed="20" :text="item.barcode" />
            </div>
            <div class="">{{item.totalItemNum}}<span style="font-size: 12px">件</span></div>
          </div>
          <div class="sub-task-item" v-if="taskType==='AISLE_PICK'">
            <div class="sub-task-item-content">{{item.aisleNo || '未绑定'}}</div>
            <div class="sub-task-item-content"><span style="font-size: 12px">库位:</span>{{item.locationNum}}<span style="font-size: 12px">个</span></div>
            <div class="sub-task-item-number">{{item.totalItemNum}}<span style="font-size: 12px">件</span></div>
          </div>
          <div style="display: flex;flex-direction: column;flex: 1" v-if="taskType==='ITEM_PICK'">
            <div class="sub-task-item" >
              <div class="sub-task-item-content" >{{item.barcode}}</div>
              <div class="sub-task-item-number"><span style="font-size: 12px">库位:</span>{{item.locationNum}}<span style="font-size: 12px">个</span></div>
              <div class="sub-task-item-number">{{item.totalItemNum}}<span style="font-size: 12px">件</span></div>
            </div>
            <div class="sub-task-item-tips"  >
              <div ><van-notice-bar :background="'none'" :speed="10" color="#999" style="font-size: 12px" :text="item.skuName" /></div>
              <div >排序:{{item.spu}}</div>
            </div>
          </div>

        </van-checkbox>
      </van-checkbox-group>
    </div>
  </van-dialog>
</template>
<script setup>
import { ref } from 'vue'
import {
  getBigPickingAisleNo,
  getBigPickingGoods,
  getBigPickingList,
  getBigPickingLocation,
} from '@/api/picking/index'
import { closeLoading, showLoading } from '@/utils/loading'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({
  taskDetailList: Array,
  ownerMap:Object,
  model:Object,
  warehouse:String
});
const typeMap={
  'LOCATION_PICK':'库位',
  'AISLE_PICK':'巷道',
  'ITEM_PICK':'商品'
}
const isIndeterminate=ref(false)
//大件任务列表弹框
const orderBigTrueFalseBy=ref(false)
const show=()=>{
  orderBigTrueFalseBy.value=true
}
// 子任务列表
const typeTaskList=ref([])
//任务类型
const taskType=ref('LOCATION_PICK')
//大件任务子订单
const subBigOrderTrueFalseBy=ref(false)
//子任务订单row
const subModel=ref({})
const sortType=ref('sql')
const onTypeOrder=(row,type)=>{
  taskType.value=type
  subModel.value=row
  const params={
    warehouse:props.warehouse,
    orderNo:row.orderNo,
    type,
    status:40,
    page:1,
    size:2000,
  }
  showLoading()
  getBigPickingList(params).then(res=>{
    res.data.records.forEach((item,index)=>{
      item.sqlIndex=index
    })
    typeTaskList.value=res.data.records
    onSort('sql')
    subBigOrderTrueFalseBy.value=true
    isIndeterminate.value = false
    isCheckAll.value=false
  }).catch(err=>{
    typeTaskList.value=[]
    subBigOrderTrueFalseBy.value=false
    isIndeterminate.value = false
    isCheckAll.value=false
  }).finally(e=>{
    closeLoading()
  })
}
//是否全选
const isCheckAll = ref(false)
//选中数据
const checkedResult = ref([])
const checkAllChange = (val) => {
  let filteredList=typeTaskList.value
  if(taskType.value==='AISLE_PICK'){
   filteredList = typeTaskList.value.filter(item => item.allowPick !== false )
  }else{
    typeTaskList.value.filter(item => item.status!==40 )
  }
  checkedResult.value = val ? filteredList : []
  isIndeterminate.value = false
}
const checkedChange = (value) => {
  const checkedCount = value.length
  isCheckAll.value = checkedCount === typeTaskList.value.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < typeTaskList.value.length
}
const onBuildTask=(action)=>
  new Promise((resolve) => {
    if (action === 'confirm') {
      if (checkedResult.value.length === 0) {
        showToast('请先选择订单')
        return resolve(false)
      }
      orderBigTrueFalseBy.value=false
      const fieldMap = {
        'ITEM_PICK': 'lotNum',
        'AISLE_PICK': 'aisleNo',
        'LOCATION_PICK': 'location'
      };
      const field = fieldMap[taskType.value];
      createPicking(checkedResult.value,field)
    }
    resolve(true)
  })
  const createPicking=(checkedResult,field)=>{
    let list = []
    checkedResult.forEach(item => {
      list.push(item[field])
    });
    const params = {
      warehouse: props.warehouse,
      orderNo: subModel.value.orderNo,
      list
    }
    // 根据不同的拣货类型选择不同的接口
    let api;
    if (field === 'aisleNo') {
      api = getBigPickingAisleNo;
    } else if (field === 'lotNum') {
      api = getBigPickingGoods;
    } else if (field === 'location') {
      api = getBigPickingLocation;
    }
    showLoading()
    api(params).then(res => {
      console.log(res,"data")
      closeLoading()
      showToast({duration:5000,message:'大件任务创建成功！正在跳转'})
      router.push({name:'PickingList',query: { code:res.data }})
    }).finally(e=>{
      closeLoading()
    })
  }

const onSort = (val) => {
  sortType.value = val;
  // 提取排序条件的字段
  const sortField = val === 'sql' ? 'sqlIndex' : 'locationNum';
  // 过滤出 status 为 40 的任务并排序
  const sorted = typeTaskList.value
    .filter(item => item.status === 40)
    .sort((a, b) => b[sortField] - a[sortField]);
  // 合并排序后的数组和 status 不等于 40 的任务
  typeTaskList.value = [
    ...sorted,
    ...typeTaskList.value.filter(item => item.status !== 40)
  ]
}

defineExpose({show})
</script>
<style lang="sass" scoped>
//大件拣货
.big-task-list
  max-height: 70vh
  min-height: 20vh
  overflow: scroll
  padding: 0 10px
  .big-task-item
    margin-bottom: 10px
    //box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4)
    border-radius: 8px
    border: 1px solid #d3d3d3
    .big-task-content
      display: flex
      align-items: center
      padding: 5px 10px
      font-size: 14px
      font-weight: bold
      .big-carrier
        width: 30%
      .big-content
        flex: 1
    .big-task-button
      font-size: 14px
      font-weight: bold
      display: flex
      align-items: center
      color: #0077ff
      border-top: 1px solid #dfdfdf
      .big-button
        height: 38px
        line-height: 38px
        flex: 1
        border-right: 1px solid #dfdfdf
      .big-button:last-child
        border-right: 0
      .big-button:active
        background-color: #d9d9d9
//子任务
.sub-task-list
  padding: 5px 10px
  max-height: 60vh
  overflow: scroll
  .sub-task-checkbox
    padding: 4px 0
    :deep(.van-checkbox__label)
      display: flex
      flex: 1
    .sub-task-item
      display: flex
      flex: 1
      align-items: center
      justify-content: space-between
      .sub-task-item-content
        font-size: 13px
        font-weight: bold
        flex: 1
        text-align: left
      .sub-task-item-number
        width: 60px
    .sub-task-item-tips
      font-size: 12px
      color: #999
      display: flex
      justify-content: space-between
      div
        flex: 1
        text-align: right
</style>