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

<template>
  <div>
    <div class="feed_box">
      <div v-for="(item, index) in dataList" :key="index" class="card_box">
        <div class="rx-bc">
          <div class="item_box rx-bc">
            <div class="round">{{ index + 1 }}</div>
            <div class="time">投料时间:{{ item.createTime }} </div>
          </div>

          <div class="item_box rx-bc">
            <div class="time">工序名称： {{ item.taskName }}</div>
          </div>
        </div>

        <div v-for="(it, idx) in item.orderInfoList" :key="idx">
          <workOrderBom :item="it" :isDetails="true"></workOrderBom>

          
						<deviceBom v-if='it.equipmentList.length != 0' :list='it.equipmentList'></deviceBom>
						
						
						<productsBom  v-if="Object.prototype.hasOwnProperty.call(it, 'inProductList') && it.inProductList[0]" :productsObj="it.inProductList[0]"></productsBom>

						<modelBom v-if='it.modelList.length != 0' :list='it.modelList'>
						</modelBom>

						<instanceBom v-if='it.instanceList.length != 0'  :isDetails='true' :list='it.instanceList' :currentTaskDiagram='currentTaskDiagram' :equipmentList='it.equipmentList'></instanceBom>
						
						<semiProductBom v-if='it.semiProductList.length != 0'  :isDetails='true' :list='it.semiProductList' :currentTaskDiagram='currentTaskDiagram' :equipmentList="it.equipmentList"></semiProductBom>
						

                        <turnoverBom v-if='it.turnover.length != 0' :list='it.turnover':isDetails='true' :wordItem='it' pattern='feed'></turnoverBom>

						<packingBom v-if='it.packingList.length != 0' :list='it.packingList'></packingBom>
						
						<palletBom v-if="Object.prototype.hasOwnProperty.call(it, 'palletList') && it.palletList.length != 0" :palletList='it.palletList'></palletBom>
						
						<revolvingDiskBom v-if="Object.prototype.hasOwnProperty.call(it, 'revolvingDiskList') && it.revolvingDiskList.length != 0"  :revolvingDiskList="it.revolvingDiskList"></revolvingDiskBom>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { feedByOrderIds } from '@/api/produce/feeding';
  import workOrderBom from './components/workOrderBom.vue';
  import deviceBom from './components/deviceBom.vue';
  import modelBom from './components/modelBom.vue';
  import instanceBom from './components/instanceBom.vue';
  import semiProductBom from './components/semiProductBom';
  import packingBom from './components/packingBom.vue';
  import palletBom from './components/palletBom';
  import revolvingDiskBom from './components/revolvingDiskBom';
  import productsBom from './components/productsBom.vue';
  import turnoverBom from './components/turnoverBom.vue';
  export default {
    components: {
      workOrderBom,
      deviceBom,
      modelBom,
      instanceBom,
      packingBom,
      palletBom,
      revolvingDiskBom,
      semiProductBom,
      productsBom,
      turnoverBom
    },

    props: {
      routeObj: {
        type: Object,
        default() {
          return {};
        }
      },

      curTaskObj: {
        type: Object,
        default() {
          return () => {};
        }
      }
    },

    watch: {
        curTaskObj: {
        handler(obj) {
            if(obj) {
          this.getList(obj.taskId);
            }

        },
        deep: true,
        immediate: true
      }
    },

    data() {
      return {
        ids: [],
        taskId: null,
        dataList: [],

        currentTaskDiagram: {
          isFirstTask: 0
        },

        isLoad: false
      };
    },

    created() {
      //   this.getList();

    },

    methods: {
      async getList(taskId) {
        let param = {
          ids: [this.routeObj.id],
          taskId: taskId
        };
        const res = await feedByOrderIds(param);
        console.log(res);
        this.dataList = JSON.parse(JSON.stringify(res));
      }
    }
  };
</script>

<style scoped lang="scss">
  .rx-bc {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .item_box {
    margin-top: 5px;
    margin-bottom: 6px;
    padding: 0 10px;

    .round {
      width: 20px;
      height: 20px;
      line-height: 20px;
      border-radius: 50%;
      background: #157a2c;
      color: #fff;
      text-align: center;
      font-size: 12px;
    }

    .time {
      color: #157a2c;
      font-family: PingFang HK;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      margin-left: 8px;
    }
  }
</style>