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

<template>
  <div>
    <ele-modal
      title="工艺路线"
      :visible.sync="visible"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      width="70%"
      :maxable="true"
    >
      <div class="routing_box">
        工艺路线： <span>{{ routeObj.produceRoutingName }}</span></div
      >
      <div>
        <el-steps :active="activeIndex" space="20px" align-center>
          <el-step
            v-for="(item, index) in routeList"
            :key="index"
            :title="item.taskTypeName"
            @click.native="handIdx(index, item)"
          >
            <template v-slot:description>
              <!-- <div>投:{{  item.feedExistNum || 0  }} 报:{{item.reportExistNum  || 0}}</div> -->
              <div>{{ desIndex == index ? '此处' : '' }}</div>
            </template>
          </el-step>
        </el-steps>
        <el-tabs type="border-card">
          <el-tab-pane label="领料记录">
            <!-- <feedDetails
              v-if="newId!=='-1'"
              :routeObj="routeObj"
              :curTaskObj="curTaskObj"
            ></feedDetails> -->
            <pickDetails ref="pickListRef" :isDetails="true"></pickDetails>
          </el-tab-pane>
          <el-tab-pane label="投料详情">
            <feedDetails
              v-if="newId !== '-1'"
              :routeObj="routeObj"
              :curTaskObj="curTaskObj"
            ></feedDetails>
          </el-tab-pane>
          <el-tab-pane label="报工详情">
            <jobDetails
              :newId="newId"
              :routeObj="routeObj"
              :curTaskObj="curTaskObj"
            ></jobDetails>
          </el-tab-pane>

          <el-tab-pane label="生产明细">
            <productionDetails :workOrderInfo="routeObj"></productionDetails>
          </el-tab-pane>
        </el-tabs>
      </div>
    </ele-modal>
  </div>
</template>
<script>
  import { getTaskInstanceList } from '@/api/produce/job';
  import feedDetails from '../components/feeding/details.vue';
  import jobDetails from '../components/jobBooking/details.vue';
  import pickDetails from '../components/picking/details.vue';
  import productionDetails from '@/views//workOrderList/components/productionDetails.vue';
  export default {
    components: {
      feedDetails,
      jobDetails,
      pickDetails,
      productionDetails
    },
    props: {
      routeObj: {
        type: Object,
        default() {
          return {};
        }
      }
    },
    data() {
      return {
        visible: true,
        routeList: [],
        activeIndex: 0,
        desIndex: 0,
        newId: '',
        curTaskObj: null
      };
    },
    methods: {
      getTaskFn() {
        getTaskInstanceList(this.routeObj.id).then((res) => {
          this.routeList = res;

          // 使用findIndex方法查找
          const index = this.routeList.findIndex(
            (item) => Number(item.taskId) == Number(this.routeObj.taskId)
          );

          this.desIndex = index;

          console.log('res', res, index);
          this.newId = res[index].taskId;

          console.log(this.routeObj, 666666);

          if (this.routeObj.taskId != -2) {
            this.curTaskObj = JSON.parse(JSON.stringify(this.routeObj));
          } else {
            this.curTaskObj = JSON.parse(JSON.stringify(this.routeList[0]));
            this.desIndex = 0;
          }

          this.activeIndex = index;
          this.$refs.pickListRef.getList([this.routeObj.id]);
        });
      },

      handleClose() {
        this.activeIndex = 0;
        this.$emit('closeRoute');
      },

      handIdx(index, item) {
        this.curTaskObj = JSON.parse(JSON.stringify(item));
        if (item.taskId == -2) {
          this.$message.info('完结状态不能点击');
        } else {
          this.desIndex = index;
          this.newId = this.curTaskObj.taskId;
          this.$refs.pickListRef.getList([this.routeObj.id]);
        }
      }
    },

    created() {
      this.getTaskFn();
    }
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-step__icon {
    cursor: pointer;
  }

  .routing_box {
    margin-bottom: 20px;
    margin-left: 20px;
    text-align: center;

    span {
      color: #157a2c;
      font-weight: bold;
    }
  }
</style>