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'
          },
          {
            name: '工步',
            type: 'workStep',
            bjColor: '#409EFF'
          },
          {
            name: '任务',
            type: 'task',
            bjColor: '#67c23a'
          },
          {
            name: '异常',
            type: 'error',
            bjColor: '#cc0000'
          }
        ],
        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'
          },
          {
            name: '工步',
            type: 'workStep',
            bjColor: '#409EFF'
          },
          {
            name: '任务',
            type: 'task',
            bjColor: '#67c23a'
          },
          {
            name: '异常',
            type: 'error',
            bjColor: '#cc0000'
          }
        ],
        btnList3: [
          {
            name: '入库',
            type: 'job',
            bjColor: '#157A2C'
          },
          {
            name: '暂停启动',
            type: '',
            bjColor: '#858585'
          },
          {
            name: '工艺文件',
            type: 'work',
            bjColor: '#2B56C2'
          },
          {
            name: '异常',
            type: 'error',
            bjColor: '#cc0000'
          }
        ],
        btnList4: [
          {
            name: '取样质检',
            type: 'inspection',
            bjColor: '#FBD114'
          },
          {
            name: '报工',
            type: 'job',
            bjColor: '#157A2C'
          },

          {
            name: '委外请托',
            type: 'Outsourcing',
            bjColor: '#39D9AC'
          },
          {
            name: '暂停启动',
            type: '',
            bjColor: '#858585'
          },
          {
            name: '工艺文件',
            type: 'work',
            bjColor: '#2B56C2'
          },
          {
            name: '工步',
            type: 'workStep',
            bjColor: '#409EFF'
          },
          {
            name: '任务',
            type: 'task',
            bjColor: '#67c23a'
          },
          {
            name: '异常',
            type: 'error',
            bjColor: '#cc0000'
          }
        ],
        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') {
            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);
          }
        },
        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 && this.clientEnvironmentId != 3) {
            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% / 11);
    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>