kd-aiot-frontend-mes/src/views/produce/components/footBtn.vue

<template>
  <div class="foot_box">
    <div v-for="(item, index) in btnList" :key="index" class="btn" :style="{ background: item.bjColor }"
      @click="footClick(item.type)">
      <img src="../../../assets/Frame.png" class="Frame" />
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      btnList1: [
        {
          name: '领料',
          type: 'pick',
          bjColor: '#FC1B75'
        },
        {
          name: '投料',
          type: 'feed',
          bjColor: '#FBD114'
        },
        {
          name: '报工',
          type: 'job',
          bjColor: '#157A2C'
        },
        {
          name: '委外请托',
          type: 'Outsourcing',
          bjColor: '#39D9AC'
        },
        {
          name: '暂停启动',
          type: '',
          bjColor: '#858585'
        },
        // {
        //   name: '工单交接',
        //   type: '',
        //   bjColor: '#2B56C2'
        // },
        {
          name: '工艺文件',
          type: 'work',
          bjColor: '#2f3033'
        }

      ],
      btnList2: [
        // {
        //   name: '取样质检',
        //   type: 'inspection',
        //   bjColor: '#FBD114'
        // },
        {
          name: '报工',
          type: 'job',
          bjColor: '#157A2C'
        },

        {
          name: '委外请托',
          type: 'Outsourcing',
          bjColor: '#39D9AC'
        },
        {
          name: '暂停启动',
          type: '',
          bjColor: '#858585'
        },
        {
          name: '工艺文件',
          type: 'work',
          bjColor: '#2B56C2'
        }

      ],
      btnList3: [
        {
          name: '入库',
          type: 'job',
          bjColor: '#157A2C'
        },
        {
          name: '暂停启动',
          type: '',
          bjColor: '#858585'
        },
        {
          name: '工艺文件',
          type: 'work',
          bjColor: '#2B56C2'
        }

      ],
      btnList: [

      ]
    };
  },
  props: {
    type: {
      type: String | Number,
      default: ''
    },
    singleReportInspection:{

    }

  },

  computed: {
    taskObj() {
      return this.$store.state.user.taskObj;
    },

    clientEnvironmentId() {
      return this.$store.state.user.info.clientEnvironmentId;
    }
  },
  watch: {
    taskObj(val) {
      // if (this.clientEnvironmentId == 2 && val.type == 3) {
      //   this.btnList[1].name = '质检';
      //   this.btnList[1].type = 'inspection';
      // } else {
      //   this.btnList[1].name = '投料';
      //   this.btnList[1].type = 'feed';
      // }
      if(this.clientEnvironmentId == 3 && (this.taskObj.type == 3||this.taskObj.type == 6)){
          let index=this.btnList2.findIndex(obj => obj.name == '取样质检');
          if( index !==-1){
            this.btnList2.splice(0, 1);
          }
      }
    },
    type: {
      handler(v) {


        if (v == '2' || v == '3' || v == '6') {
          console.log(111);
          let btnList2=this.btnList2.filter(item=>{
             if(v!=6){

             }
          })
          
          this.$set(this, 'btnList', this.btnList2)

        }else if (v == '5') {
          this.$set(this, 'btnList', this.btnList3)
        }else {
          this.$set(this, 'btnList', this.btnList1)
        }

        console.log(this.btnList, 'btnList');

      },
      immediate: true,
      deep: true
    },
    singleReportInspection:{
      handler(v) {
       if(v==1||v==null){
          let index=this.btnList2.findIndex(obj => obj.name == '取样质检');
          if( index !==-1){
            this.btnList2.splice(0, 1);
          }
       }else if(v==0){
         let arr= {
          name: '取样质检',
          type: 'inspection',
          bjColor: '#FBD114'
        }
        this.btnList2.unshift(arr)
       }

      }
    }

  },

  created() { 

  },
  mounted(){
      // if(this.clientEnvironmentId == 3 && (this.taskObj.type == 3||this.taskObj.type == 6)){
      //     this.btnList2.splice(0, 1);
      // }
  },
  methods: {
    footClick(type) {
      this.$emit('footBtn', type);
    }
  }
};
</script>

<style lang="scss" scoped>
.foot_box {
  min-width: 1280px;
  width: 100%;
  height: 80px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  // justify-content: space-between;
  font-size: 20px;
}

.btn {
  height: 70px;
  width: calc(100% / 10);
  margin: 0 10px;
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  .Frame {
    width: 26px;
    height: 26px;
  }
}
</style>