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

<template>
  <div class="foot_box">
    <template v-for="(item, index) in btnListData">
      <div
        v-if="$hasPermission(item.isShow)"
        :key="index"
        class="btn"
        :style="{ background: item.disable ? '#858585' : item.bjColor }"
        @click="footClick(item)"
      >
        <img src="../../../assets/Frame.png" class="Frame" />
        {{ item.name }}
      </div>
    </template>
  </div>
</template>

<script>
  export default {
    props: {
      //
      type: {
        type: String | Number,
        default: ''
      },
      singleReportInspection: {},
      // 是否完成产前准备
      isPreProductionResult: {
        type: Object,
        default: () => {
          return null;
        }
      }
    },
    data() {
      return {
        btnList1: [
          {
            name: '产前准备',
            type: 'prenatalExamination',
            bjColor: '#770077',
            isShow: 'mes:producetaskrulerecord:save1'
          },
          {
            name: '领料',
            type: 'pick',
            bjColor: '#FC1B75',
            isShow: 'mes:workorder:save'
          },
          {
            name: '投料',
            type: 'feed',
            bjColor: '#FBD114',
            isShow: 'mes:feed:save'
          },
          {
            name: '过程监测',
            type: 'processDetection',
            bjColor: '#008888',
            isShow: 'mes:producetaskrulerecord:save2'
          },
          {
            name: '报工',
            type: 'job',
            bjColor: '#157A2C',
            isShow: 'mes:workreport:save'
          },
          {
            name: '委外请托',
            type: 'Outsourcing',
            bjColor: '#39D9AC',
            isShow: 'mes:applyoutsource:save'
          },
          {
            name: '暂停启动',
            type: '',
            bjColor: '#858585',
            isShow: 'mes:workorder:startstop'
          },
          {
            name: '产后检查',
            type: 'postpartumExamination',
            bjColor: '#9955FF',
            isShow: 'mes:producetaskrulerecord:save3'
          },
          {
            name: '工单交接',
            type: '',
            bjColor: '#2B56C2',
            isShow: 'mes:producetaskrulerecord:save4'
          },
          {
            name: '工艺文件',
            type: 'work',
            bjColor: '#2f3033',
            isShow: 'mes:workorder:bomfile'
          },
          {
            name: '工步',
            type: 'workStep',
            bjColor: '#409EFF',
            isShow: 'main:categoryparamstep:save'
          },
          {
            name: '任务',
            type: 'task',
            bjColor: '#67c23a',
            isShow: 'aps:assign:save'
          },
          {
            name: '异常',
            type: 'error',
            bjColor: '#cc0000',
            isShow: 'mes:anomaly:save'
          },
          {
            name: 'BOM',
            type: 'bom',
            bjColor: '#BB5500',
            isShow: 'mes:workorder:bom'
          },
          {
            name: '设备',
            type: 'device',
            bjColor: '#008866',
            isShow: 'mes:workorder:device'
          },
          {
            name: '周转车',
            type: 'turnover',
            bjColor: '#660066',
            isShow: 'mes:workorder:transfer'
          }
          // {
          //   type: 'turnover',
          //   bjColor: '#E6F7E7'
          // }
        ],
        btnList2: [
          // {
          //   name: '取样质检',
          //   type: 'inspection',
          //   bjColor: '#FBD114'
          // },
          {
            name: '领料',
            type: 'pick',
            bjColor: '#FC1B75',
            isShow: 'mes:workorder:save'
          },
          {
            name: '投料',
            type: 'feed',
            bjColor: '#FBD114',
            isShow: 'mes:feed:save'
          },
          {
            name: '报工',
            type: 'job',
            bjColor: '#157A2C',
            isShow: 'mes:workreport:save'
          },

          {
            name: '委外请托',
            type: 'Outsourcing',
            bjColor: '#39D9AC',
            isShow: 'mes:applyoutsource:save'
          },
          {
            name: '暂停启动',
            type: '',
            bjColor: '#858585',
            isShow: 'mes:workorder:startstop'
          },
          {
            name: '工艺文件',
            type: 'work',
            bjColor: '#2B56C2',
            isShow: 'mes:workorder:bomfile'
          },
          {
            name: '工步',
            type: 'workStep',
            bjColor: '#409EFF',
            isShow: 'main:categoryparamstep:save'
          },
          {
            name: '任务',
            type: 'task',
            bjColor: '#67c23a',
            isShow: 'aps:assign:save'
          },
          {
            name: '异常',
            type: 'error',
            bjColor: '#cc0000',
            isShow: 'mes:anomaly:save'
          }
        ],
        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',
            isShow: 'mes:workreport:save'
          },

          {
            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: [],
        disableObj: {
          preResult: {
            buts: ['投料', '过程监测', '产后检查', '报工'],
            msg: '请先完成产前准备'
          },
          feedResult: {
            buts: ['过程监测', '产后检查', '报工'],
            msg: '请先完成投料'
          },
          processResult: {
            buts: ['产后检查', '报工'],
            msg: '请先完成过程监测'
          },
          postResult: {
            buts: ['报工'],
            msg: '请先完成产后检查'
          }
        }
      };
    },
    computed: {
      taskObj() {
        return this.$store.state.user.taskObj;
      },

      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      },
      btnListData() {
        // 根据是否完成产前准备等前置条件 来禁用按钮
        return this.btnList.map((i) => {
          if (this.isPreProductionResult) {
            for (let key in this.isPreProductionResult) {
              let obj = this.disableObj[key];
              if (!this.isPreProductionResult[key] && obj) {
                // 未完成
                if (obj.buts.includes(i.name) && !i.disable) {
                  return {
                    ...i,
                    disable: true,
                    msg: obj.msg
                  };
                }
              }
            }
          }
          return i;
        });
      }
    },
    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';
        // }
        console.log(val);
        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 == 2) {
          //   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(item) {
        if (item.disable) {
          this.$message.warning(item.msg);
          return;
        }
        this.$emit('footBtn', item.type);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .foot_box {
    // min-width: 1280px;
    width: 100%;
    height: 80px;
    padding: 0 10px !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    // justify-content: space-between;
    box-sizing: border-box;
  }

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

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