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.executorTime }} </div>
          </div>

          <div class="item_box rx-bc">
            <div class="time">报工人 {{ item.executorName }}</div>
          </div>

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

        <div class="rx-bc">
          <div class="item_box rx-bc">
            <div
              class="time"
              v-if="item.executorList && item.executorList.length != 0"
              >执行人:<span v-for="it in item.executorList"
                >【{{ it.name }}】</span
              >
            </div>
          </div>

          <div class="item_box rx-bc">
            <div class="time">班组名称： {{ item.teamName }}</div>
          </div>
        </div>

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

          <paramBom
            v-if="it.paramDetailList.length != 0"
            :list="it.paramDetailList"
          ></paramBom>

          <deviceBom
            v-if="it.equipmentList.length != 0"
            :list="it.equipmentList"
            :isDetails="true"
          ></deviceBom>

          <productsBom
            v-if="
              Object.prototype.hasOwnProperty.call(it, 'inProductList') &&
              it.inProductList[0] &&
              it.singleReport == 1
            "
            :productsObj="it.inProductList[0]"
            :itemObj="it"
          ></productsBom>

          <batchProductsBom
            v-if="
              Object.prototype.hasOwnProperty.call(it, 'inProductList') &&
              it.inProductList[0] &&
              it.singleReport == 0
            "
            :productsObj="it.inProductList[0]"
            :itemObj="it"
            :isEdit="isEdit"
          ></batchProductsBom>

          <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"
            :workInfo="it"
          ></instanceBom>

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

          <semiProductJobBom
            v-if="it.semiProductList.length != 0"
            :list="it.semiProductList"
            :equipmentList="it.equipmentList"
            :currentTaskDiagram="it.currentTaskDiagram"
            :item="it"
            :isDetails="true"
            title="物料清单"
          >
          </semiProductJobBom>
          <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
            "
            :list="it.palletList"
          ></palletBom>

          <revolvingDiskBom
            v-if="
              Object.prototype.hasOwnProperty.call(it, 'revolvingDiskList') &&
              it.revolvingDiskList.length != 0
            "
            :list="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.vue';
  import productsBom from './components/productsBom.vue';
  import batchProductsBom from './components/batchProductsBom.vue';
  import turnoverBom from './components/turnoverBom.vue';
  import semiProductJobBom from '@/views/produce/components/jobBooking/components/semiProductJobBom.vue';
  import paramBom from '../feeding/components/paramBom.vue';

  export default {
    components: {
      workOrderBom,
      deviceBom,
      modelBom,
      instanceBom,
      packingBom,
      palletBom,
      revolvingDiskBom,
      semiProductJobBom,
      productsBom,
      batchProductsBom,
      turnoverBom,
      paramBom
    },

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

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

    watch: {
      // curTaskObj: {
      //   handler(obj) {
      //     console.log(obj, '1131313');
      //     if (obj && obj.taskId != -2) {
      //       console.log(obj, '777777');
      //       this.getList(obj.taskId);
      //     }
      //   },
      //   deep: true,
      //   immediate: true
      // }
      curTaskObj: {
        handler(obj) {
          if (!obj || !obj.taskId) return;

          if (obj.taskId === -2) return;

          this.getList(obj.taskId);
        },
        deep: true,
        immediate: true
      }
    },

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

        currentTaskDiagram: {
          isFirstTask: 0
        },

        isLoad: false,
        isEdit: true
      };
    },

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

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