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="计划类型">{{
            typeList[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.formingNum
          }}</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="工单状态">{{
            statusList[infoData.status]
          }}</el-descriptions-item>
          <el-descriptions-item label="完成时间">{{
            infoData.completeTime
          }}</el-descriptions-item>
          <el-descriptions-item label="生产周期">{{
            infoData.productionCycle
          }}</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="componentName"
        :key="activeName + isUpdate"
        :infoData="infoData"
        :formData="formData"
        :firstInfo="tabList[0]"
        :currentInfo="tabList[activeName]"
        :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 { getInfo } from '@/api/operationControl/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: {},
        isUpdate: true,
        descriptionsShow: true,
        activeName: '0',
        tabList: [],
        statusList: {
          4: '待生产',
          5: '生产中',
          6: '已完成',
          7: '已延期'
        },
        typeList: {
          1: '内销订单',
          2: '外销订单',
          3: '预制订单'
        },
        componentsList: {
          挤压成型: 'Extrusion',
          自然干燥: 'Drying',
          升温干燥: 'Heating',
          半加: 'HalfAdded',
          备炉: 'Furnace',
          烧结: 'Common', //'Sinter',
          深加工: 'Common',
          包装: 'Package',
          入库: 'Warehousing'
        },
        formData: {}
      };
    },
    computed: {
      componentName() {
        const { name } = this.tabList[this.activeName];

        if (name.includes('半加')) {
          return 'HalfAdded';
        }
        return (
          this.componentsList[this.tabList[this.activeName].name] || 'Common'
        );
      }
    },
    created() {
      this.init();
      this.getInfoData();
    },
    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: 2, //sap报工状态(0:不调用SAP接口报工;1:投料;2:报工;3:入库)
            lastTaskCode:
              this.tabList[
                this.activeName > 0 ? this.activeName - 1 : this.activeName
              ].code,
            ...data
          };
          await report(params).then((res) => {
            this.$message.success('报工成功！');
            this.getDetail();
            this.isUpdate = !this.isUpdate;
            return res;
          });
        });
      },
      async init() {
        await this.getDetail();
        await this._getTaskListById();
      },
      async getDetail() {
        const res = await getById(this.$route.query.id);
        this.infoData = res;
      },
      async _getTaskListById() {
        // 获取工序
        const res1 = await getTaskListById(this.infoData.produceVersionId);

        this.tabList = res1;
        this.tabList.push({
          name: '入库',
          code: '999999',
          sortNum: 99
        });
        this.activeName = '0';
      },
      async getInfoData() {
        const res = await getInfo();
        if (typeof res != 'string') {
          this.formData = res;
        } else {
          this.formData = {};
        }
      }
    }
  };
</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>