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

<template>
  <div class="page-box padKittingPackPage" v-loading="loading">
    <!-- 左侧按钮 -->
    <div class="leftBtns">
      <div 
        v-for="(item,index) of leftButtons" 
        :key="index"
        class="left-button"
      >{{ item.name }}</div>
    </div>
    <!-- 中间底盘号 -->
    <div class="centerChassisContain">
      <div class="title">底盘号</div>
      <ul class="chassisList">
        <li
          v-for="(item,index) of centerChassisList" 
          :style="{color:(item.canSelect?'#000':'#ddd'),cursor:(item.canSelect?'pointer':'no-drop'),background:(item.isSelect?'green':'#fff')}"
          :key="index"
          @click="selectCenterChassis(item,index)"
        >{{ item.number }}{{item.canSelect}}{{item.isSelect}}</li>
      </ul>
      <div class="footer-button">创建底盘组</div>
    </div>
    <!-- 右侧底盘组 -->
    <div class="rightChassisGroup">
      <!-- 右上组 -->
      <div class="rightTopTable">
        <el-table
          :data="rightTopChassisGroup"
          style="width: 100%">
          <el-table-column
            prop="number"
            label="组"
          ></el-table-column>
          <el-table-column
            prop="time"
            label="时间"
          ></el-table-column>
        </el-table>
      </div>
      <!-- 右下bom -->
      <div class="rightBottomBomData">
        <el-table
          :data="rightBottomBomData"
          style="width: 100%">
          <el-table-column
            prop="name"
            label="Kitting组别Bom"
          ></el-table-column>
          <el-table-column
            prop="qty"
            label="底盘组物品数量"
          ></el-table-column>
          <el-table-column
            prop="qty1"
            label="Kiting组数量"
          ></el-table-column>
        </el-table>
      </div>
      <div class="footer-button">完成该组底盘</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "padKittingPack",
  data() {
    return {
      loading:false,
      // 默认一次打包数量
      packGroupNumber:3,
      // 左侧按钮
      leftButtons:[
        {name:'K1',id:'1'},
        {name:'K2',id:'2'},
        {name:'K3',id:'3'},
        {name:'K4',id:'4'},
        {name:'K5',id:'5'},
      ],
      // 中间底盘号
      centerChassisList:[
        {number:'BC0000004',id:'4',time:'09:00:00',canSelect:true,isSelect:false},
        {number:'BC0000005',id:'5',time:'09:00:00',canSelect:false,isSelect:false},
        {number:'BC0000006',id:'6',time:'09:00:00',canSelect:false,isSelect:false},
        {number:'BC0000007',id:'7',time:'09:00:00',canSelect:false,isSelect:false},
      ],
      // 右上方组数据
      rightTopChassisGroup:[
        {number:'BC0000001',id:'1',time:'09:00:00'},
        {number:'BC0000002',id:'2',time:'09:00:00'},
        {number:'BC0000003',id:'3',time:'09:00:00'},
      ],
      // 右下方组bom数据
      rightBottomBomData:[
        {name:'SE370E01B01A',qty:'1',qty2:'1'},
        {name:'SE370Q41B10AG',qty:'2',qty2:'2'},
        {name:'THILDD0A510AA',qty:'3',qty2:'3'},
      ],
    };
  },
  methods:{
    // 点击选中中间数据
    selectCenterChassis(selectItem,selectIndex){
      this.centerChassisList.forEach((item,index)=>{
        // 如果当前项为第一个 或者 前一个已经选中
        if(Number(selectIndex) == 0 || this.centerChassisList[Number(selectIndex)-1].isSelect){
          // // 选中
          if(selectItem.isSelect == false){
            console.log(109,this.centerChassisList[Number(selectIndex)].isSelect)
            this.centerChassisList[Number(selectIndex)].isSelect = true
            this.centerChassisList[Number(selectIndex)].canSelect = true
            if(this.centerChassisList[Number(selectIndex + 1)]){
              this.centerChassisList[Number(selectIndex + 1)].canSelect = true
            }
            // if(Number(index) <= Number(selectIndex))item.isSelect = true
            // if(Number(index) <= Number(selectIndex + 1))item.canSelect = true
            // if(Number(selectIndex) == this.centerChassisList.length - 1){
            //   item.isSelect = true
            // }
          }
          // 取消选中todo:
          else{
            console.log(123)
            if(Number(index) == Number(selectIndex)){
              item.isSelect = false
            }
            // console.log(120,index,selectIndex)
            // if(Number(index) > Number(selectIndex)){
            //   item.canSelect = false
            //   item.isSelect = false
            // }
          }
          // if(selectIndex == this.centerChassisList.length - 1){
          //   item.canSelect = true
          // }else{
          //   this.centerChassisList[Number(selectIndex)+1].canSelect = true
          // }
        }else{
          this.$warningMsg("必须从上按顺序选择")
        }
        // if(selectItem.isSelect){
        //   if(Number(index) > Number(selectIndex)){
        //     item.canSelect = false
        //     item.isSelect = false
        //   }
        // }
      })
    }
  },
  mounted() {
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/mainbasicData.scss";
</style>