kd-aiot-frontend-mes/src/views/produceOrder/report.vue

<template>
  <div class="ele-body">
    <el-card>
      <div class="page-title">
        <el-page-header @back="$router.go(-1)">
          <div slot="content" class="pageContent">
            <div>生产报工</div>
          </div>
        </el-page-header>
      </div>

      <el-collapse-transition>
        <el-descriptions
          title=""
          direction="vertical"
          :column="7"
          border
          v-if="descriptionsShow"
        >
          <el-descriptions-item label="工单号">{{
            infoData.code
          }}</el-descriptions-item>
          <el-descriptions-item label="生产版本">{{
            infoData.produceVersionName
          }}</el-descriptions-item>
          <el-descriptions-item label="工单类型">{{
            infoData.workOrderType
          }}</el-descriptions-item>
          <el-descriptions-item label="产线">{{
            infoData.productLine
          }}</el-descriptions-item>
          <el-descriptions-item label="工艺路线版本">{{
            infoData.routingVersion
          }}</el-descriptions-item>
          <el-descriptions-item label="计划编号">{{
            infoData.productionPlanCode
          }}</el-descriptions-item>
          <el-descriptions-item label="计划类型">{{
            infoData.planType
          }}</el-descriptions-item>
          <el-descriptions-item label="产品编码">{{
            infoData.productCode
          }}</el-descriptions-item>
          <el-descriptions-item label="产品名称">{{
            infoData.productName
          }}</el-descriptions-item>
          <el-descriptions-item label="牌号 | 型号"
            >{{ infoData.brandNo }}|{{ infoData.model }}</el-descriptions-item
          >
          <el-descriptions-item label="要求成型数量(PCS)">{{
            infoData.number
          }}</el-descriptions-item>
          <el-descriptions-item label="要求成型重量(KG)">{{
            infoData.formingWeight
          }}</el-descriptions-item>
          <el-descriptions-item label="计划开始时间">{{
            infoData.planStartTime
          }}</el-descriptions-item>
          <el-descriptions-item label="实际开始时间">{{
            infoData.startTime
          }}</el-descriptions-item>
          <el-descriptions-item label="已成型数量(PCS)">{{
            infoData.formedNum
          }}</el-descriptions-item>
          <el-descriptions-item label="已成型重量(KG)">{{
            infoData.formedWeight
          }}</el-descriptions-item>
          <el-descriptions-item label="已交付数量(PCS)">{{
            infoData.deliveredQuantity
          }}</el-descriptions-item>
          <el-descriptions-item label="已交付重量(KG)">{{
            infoData.deliveredWeight
          }}</el-descriptions-item>
          <el-descriptions-item label="工单状态">{{
            infoData.status
          }}</el-descriptions-item>
          <el-descriptions-item label="完成时间">{{
            infoData.completeTime
          }}</el-descriptions-item>
          <el-descriptions-item label="生产周期">{{
            infoData.ssss
          }}</el-descriptions-item>
        </el-descriptions>
      </el-collapse-transition>
      <div>
        <el-button
          class="w100"
          type="primary"
          size="mini"
          plain
          @click="descriptionsShow = !descriptionsShow"
        >
          <i
            class="el-icon el-icon-d-arrow-left"
            :class="[descriptionsShow ? 'slideDown-icon' : 'slideUp-icon']"
          ></i>
        </el-button>
      </div>
    </el-card>

    <el-card>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane
          :label="item.name"
          :name="index + ''"
          v-for="(item, index) in tabList"
          :key="item.id"
        ></el-tab-pane>
        <!--<el-tab-pane label="挤压成型" name="挤压成型"></el-tab-pane>
        <el-tab-pane label="自然干燥" name="自然干燥"></el-tab-pane>
        <el-tab-pane label="升温干燥" name="升温干燥"></el-tab-pane>
        <el-tab-pane label="半加定长" name="半加定长"></el-tab-pane>
        <el-tab-pane label="备炉" name="备炉"></el-tab-pane>
        <el-tab-pane label="烧结" name="烧结"></el-tab-pane>
        <el-tab-pane label="深加工" name="深加工"></el-tab-pane>
        <el-tab-pane label="包装" name="包装"></el-tab-pane>
        <el-tab-pane label="入库" name="入库"></el-tab-pane> -->
      </el-tabs>
      <components
        v-if="tabList.length"
        ref="reportRef"
        :is="componentsList[tabList[activeName].name] || 'Common'"
        :key="activeName"
        :infoData="infoData"
        :taskInfo="{
          ...tabList[activeName],
          lastTaskCode:
            tabList[activeName > 0 ? activeName - 1 : activeName].code
        }"
      ></components>
      <div class="footer">
        <el-button type="primary" @click="handleReport">一键报工</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
  import { getById, report } from '@/api/produceOrder/index.js';
  import { getTaskListById } from '@/api/mainData/index.js';
  import Extrusion from './components/report/Extrusion';
  import Drying from './components/report/Drying';
  import Heating from './components/report/Heating';
  import HalfAdded from './components/report/HalfAdded';
  import Common from './components/report/Common';
  import Package from './components/report/Package';
  import Warehousing from './components/report/Warehousing';
  import Sinter from './components/report/Sinter';
  import Furnace from './components/report/Furnace';
  export default {
    components: {
      Extrusion,
      Drying,
      Heating,
      HalfAdded,
      Common,
      Package,
      Sinter,
      Furnace,
      Warehousing
    },
    data () {
      return {
        infoData: {},
        descriptionsShow: true,
        activeName: '0',
        tabList: [],
        componentsList: {
          挤压成型: 'Extrusion',
          自然干燥: 'Drying',
          升温干燥: 'Heating',
          半加定长: 'HalfAdded',
          备炉: 'Furnace',
          烧结: 'Common', //'Sinter',
          深加工: 'Common',
          包装: 'Package',
          入库: 'Warehousing'
        }
      };
    },
    created () {
      this.getDetail(this.$route.query.id);
    },
    methods: {
      handleReport () {
        this.$refs.reportRef.report(async (data) => {
          // data.workReportCategoryList = data.workReportCategoryList || [
          //   {
          //     code: this.infoData.productCode,
          //     name: this.infoData.productName,
          //     rootCategoryLevelId: '1',
          //     batchNo: '',
          //     brandNum: this.infoData.brandNo
          //   }
          // ];
          if (data.workReport) {
            data.workReport.taskCode = this.tabList[this.activeName].code;
            data.workReport.taskName = this.tabList[this.activeName].name;
            data.workReport.taskSort = this.tabList[this.activeName].sortNum;
            data.workReport.workOrderId = this.infoData.id;
          }

          const params = {
            isSapReportState: 0,
            lastTaskCode:
              this.tabList[
                this.activeName > 0 ? this.activeName - 1 : this.activeName
              ].code,
            ...data
          };
          await report(params);
        });
      },
      async getDetail (id) {
        const res = await getById(id);

        this.infoData = res;
        // 获取工序
        const res1 = await getTaskListById(res.produceVersionId);

        this.tabList = [...res1, { name: '自然干燥' }, { name: '升温干燥' }];
        this.activeName = '0';
      }
    }
  };
</script>

<style lang="scss" scoped>
  .el-tabs {
    margin-top: 20px;
  }
  .el-button {
    margin-top: 10px;
  }
  .slideUp-icon {
    transform: rotate(-90deg);
  }
  .slideDown-icon {
    transform: rotate(90deg);
  }

  .footer {
    text-align: center;
    padding: 20px;
  }
</style>