WZC2/fe/PC/src/views/padManage/padKittingPack.vue

<template>
  <div class="page-box" v-loading="loading">
    <div class="padKittingPackPage">
      <!-- 左侧按钮 -->
      <div class="leftBtns">
        <div 
          v-for="(item,index) of leftButtons" 
          :key="index"
          class="left-button"
          @click="letButtonClick(item)"
          :style="{
            background:(currentKittingInfo && (item.code==currentKittingInfo.code)?'#ff9000':'#409EFF'),
          }"
        >
          <p class="code">{{ item.code }}</p>
          <p class="name">{{ item.name }}</p>
        </div>
      </div>
      <!-- 中间底盘号 -->
      <div class="centerChassisContain">
        <div class="title">底盘号</div>
        <ul class="chassisList" v-if="centerChassisList.length > 0">
          <li
            v-for="(item,index) of centerChassisList" 
            :style="{
              color:(item.canSelect?'#000':'#aaa'),
              cursor:(item.canSelect?'pointer':'no-drop'),
              background:(item.isSelect?'#bdddfd':'#fff'),
            }"
            :key="index"
            @click="selectCenterChassis(item,index)"
          >{{ item.chassisNumber }}</li>
        </ul>
        <div class="noDataTipper" v-if="centerChassisList.length <= 0">暂无数据</div>
        <div class="footer-button"><el-button type="primary" @click="createChassisHandle()">创建底盘组</el-button></div>
      </div>
      <!-- 右侧底盘组 -->
      <div class="rightChassisGroup">
        <!-- 右上组 -->
        <div class="rightTopTable">
          <el-table
            :border="true"
            :data="rightTopChassisGroup"
            :height="'100%'"
            :header-cell-style="{ background: '#e3f0ff',color:'#333'}"
            style="width: 100%">
            <el-table-column
              prop="chassisNumber"
              label="底盘组"
            ></el-table-column>
            <el-table-column
              prop="creationTime"
              label="时间"
            >
              <template slot-scope="scope">
                {{ formatDate(scope.row.creationTime) }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 右下bom -->
        <div class="rightBottomBomData">
          <el-table
            :border="true"
            :data="rightBottomBomData"
            :header-cell-style="{ background: '#e3f0ff',color:'#333'}"
            style="width: 100%">
            <el-table-column
              prop="itemCode"
              label="Kitting组别Bom"
            ></el-table-column>
            <el-table-column
              prop="qty"
              label="底盘组物品数量"
            ></el-table-column>
            <!-- todo: Kiting组数量字段确定-->
            <el-table-column
              prop="qty1"
              label="Kiting组数量"
            ></el-table-column>
          </el-table>
        </div>
        <div class="footer-button"><el-button type="success">完成该组底盘</el-button></div>
      </div>
    </div>
  </div>
</template>
<script>
import { getPageList } from '@/api/wms-api'
import { ChassisGetListWithNextCount } from '@/api/wms-pad'
import { formatTimeStrToStr } from "@/utils/formatTime"
export default {
  name: "padKittingPack",
  data() {
    return {
      loading:false,
      // 循环数据定时器
      intervalId:false,
      // 当前左侧按钮选择信息
      currentKittingInfo:null,
      // 左侧按钮
      leftButtons:[],
      // 中间底盘号
      centerChassisList:[],
      // 右上方组数据
      rightTopChassisGroup:[],
      // 右下方组bom数据
      rightBottomBomData:[],
    };
  },
  mounted(){
    this.initData()
    clearInterval(this.intervalId)
    //刷新数据
    this.intervalId = setInterval(() => {
      this.initData()
    }, localStorage.getItem('padKittingPackUpdate') || 180000)
  },
  destroyed() {
      clearInterval(this.intervalId)
  },
  methods:{
    initData(){
      this.getKittingList()
      if(this.currentKittingInfo){
        this.letButtonClick(this.currentKittingInfo)
      }
    },
    // 格式化时间
    formatDate (time) {
      if (time == null) {
        return '-'
      }
      return formatTimeStrToStr(time)
    },
    // 获取kitting
    getKittingList(){
      let _data = {
        condition: {
          filters: []
        },
        Sorting: "code ASC",
        SkipCount: 0,
        MaxResultCount: 9999,
      }
      this.loading = true
      getPageList(_data, 'basedata/kitting',true).then(res => {
        this.leftButtons = res.items
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
    },
    // 左侧按钮点击事件
    letButtonClick(selectItem){
      this.currentKittingInfo = selectItem;
      let _data = {
        count:30,
        kittingCode:selectItem.code
      }
      this.loading = true
      // 获取中间数据
      ChassisGetListWithNextCount(_data).then(res => {
        this.centerChassisList = []
        this.rightTopChassisGroup = []
        // 初始化中间和右侧数据数据：
        // 如果不够chassisQty条，则不分开
        if(res.items.length<Number(selectItem.chassisQty)){
          this.centerChassisList = res.items
        }
        // 如果够chassisQty条:前三条数据，放到右上方，第四条数据开始显示在中间位置
        else{
          res.items.forEach((item,index)=>{
            if(index < Number(selectItem.chassisQty)){
              this.rightTopChassisGroup.push(item)
            }else{
              item.isSelect = false
              item.canSelect = false
              this.centerChassisList.push(item)
            }
          })
        }
        this.centerChassisList[0].canSelect = true
        this.rightBottomBomData = selectItem.details
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
    },
    // 点击选中中间数据
    selectCenterChassis(selectItem,selectIndex){
      for(let i=0;i<this.centerChassisList.length;i++){
        // 选中
        if(selectItem.isSelect == false){
          if(selectIndex == 0 || this.centerChassisList[selectIndex - 1].isSelect){
            this.centerChassisList[selectIndex].isSelect = true
            this.centerChassisList[selectIndex].canSelect = true
            if(this.centerChassisList[selectIndex+1])this.centerChassisList[selectIndex+1].canSelect = true
          }
          return
        }
        // 取消选中
        else{
          this.centerChassisList.forEach((item,index)=>{
            if(Number(index) >= Number(selectIndex)){
              item.canSelect = false
              item.isSelect = false
            }
          })
          this.centerChassisList[selectIndex].canSelect = true
          return
        }
      }
    },
    // 创建底盘组操作
    createChassisHandle(){
      let _selectItems = this.centerChassisList.filter(item=>{return item.isSelect})
      if(!_selectItems || _selectItems.length <= 0){
        this.$warningMsg("请选择至少一项")
        return
      }
      let _selectChassisNumber = []
      _selectItems.forEach(item=>{ if(item.isSelect)_selectChassisNumber.push(item.chassisNumber)})
      let _msg = `是否确定将底盘号 (${_selectChassisNumber.join(",")}) 移入底盘组`
      this.$confirm(_msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 中间数据移除已选项
        this.centerChassisList = this.centerChassisList.filter(item => !_selectChassisNumber.includes(item.chassisNumber))
        // 右侧数据添加已选
        this.rightTopChassisGroup = [
          ...this.rightTopChassisGroup,
          ..._selectItems
        ]
      }).catch(() => {

      });
    }
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/mainbasicData.scss";
$boxPadding:15px;
$boxBorder:#ddd solid 1px;
$footerBtn_height:60px;
.page-box{
  overflow:auto;
  background:#f8f8f8;
  padding:10px
}
.padKittingPackPage{
  min-width:1000px;
  height:100%;
  display:flex;
  .leftBtns{
    width:15%;
    min-width:150px;
    border:$boxBorder;
    padding:$boxPadding;
    flex-shrink:0;
    height:100%;
    overflow:auto;
    background:#fff;

    .left-button{
      flex-wrap: wrap;
      display:flex;
      width:100%;
      height:90px;
      background:#409EFF;
      color:#fff;
      margin:15px 0;
      border-radius:12px;
      text-align:center;
      cursor:pointer;
      align-content: center;

      &:hover{
        opacity:0.8
      }

      p{
        width:100%;
        flex-shrink:0;
        margin:0;
        padding:0;
        font-size:14px;

        &.code{
          font-size:20px
        }
      }
    }
  }
  .centerChassisContain{
    position:relative;
    width:calc(30% - 20px);
    min-width:260px;
    border:$boxBorder;
    padding:$boxPadding;
    height:100%;
    overflow:auto;
    margin:0 10px;
    background:#fff;

    $title_height:40px;
    .title{
      position:absolute;
      top:0;
      left:0;
      right:0;
      text-align:center;
      line-height:$title_height;
      height:$title_height;
      overflow:hidden
    }

    .chassisList,.noDataTipper{
      position:absolute;
      top:$title_height;
      left:0;
      right:0;
      bottom:$footerBtn_height;
      overflow:auto;
      padding:0;
      margin:0;

      li{
        margin:10px;
        padding:5px 15px;
        list-style:none;
      }
    }
    .noDataTipper{
      color:#909399;
      line-height:60px;
      text-align:center;
      font-size:14px;
    }
  }
  .rightChassisGroup{
    position:relative;
    width:55%;
    min-width:600px;
    border:$boxBorder;
    padding:$boxPadding;
    height:100%;
    overflow:auto;
    background:#fff;

    .rightTopTable{
      position:absolute;
      top:0;
      left:0;
      right:0;
      height:30%;
      overflow:auto;
    }

    .rightBottomBomData{
      position:absolute;
      top:calc(30% + 30px);
      left:0;
      right:0;
      bottom:$footerBtn_height;
      overflow:auto;
      border-top:$boxBorder;
    }
  }
  .footer-button{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    text-align:center;
    border-top:$boxBorder;
    height:$footerBtn_height;

    .el-button{
      width:180px;
      margin-top:10px
    }
  }
}
</style>