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

<template>
  <div>
    <el-tabs v-model="activeName" type="border-card" @tab-click="tabsChange">
      <el-tab-pane lazy label="工艺参数" name="工艺参数">
        <ele-pro-table
          ref="table"
          :datasource="newBomObj.produceList"
          :immediate="true"
          :need-page="false"
          :columns="produceColumns"
          height="260px"
        >
        </ele-pro-table>
      </el-tab-pane>
      <el-tab-pane lazy label="质检参数" name="质检参数"></el-tab-pane>
      <el-tab-pane lazy label="生产节拍" name="生产节拍">
        <beatInfo :beatParam="newBomObj.beatParam"></beatInfo>
      </el-tab-pane>
      <el-tab-pane lazy label="标准工时" name="标准工时">
        <normalHoursInfo :normalHours="newBomObj.normalHours"></normalHoursInfo>
      </el-tab-pane>
      <el-tab-pane lazy label="材料定额" name="材料定额">
        <ele-pro-table
          ref="materialQuotaTable"
          :columns="materialQuotaColumns"
          :datasource="newBomObj.materialQuota"
          :need-page="false"
          :immediate="true"
          height="260px"
        >
          <template v-slot:toolbar>
            基本数量:
            <span style="color: rgb(21, 122, 44)">
              {{ newBomObj.baseCount }} {{ newBomObj.baseCountUnit }}</span
            >
          </template>

          <template v-slot:isReworkBom="{ row }">
            {{ row.isReworkBom ? '是' : '否' }}
          </template>

          <template v-slot:bomArtFiles="{ row }">
            <el-button
              size="mini"
              type="primary"
              @click="downloadFile(row.bomArtFiles)"
              >下载</el-button
            >
          </template>
        </ele-pro-table>
      </el-tab-pane>
      <el-tab-pane lazy label="制造资源" name="制造资源">
        <ele-pro-table
          ref="resourceTable"
          :columns="materialQuotaColumns"
          :datasource="newBomObj.resource"
          :need-page="false"
          :immediate="true"
          height="260px"
        >
          <template v-slot:isReworkBom="{ row }">
            {{ row.isReworkBom ? '是' : '否' }}
          </template>

          <template v-slot:bomArtFiles="{ row }">
            <el-button
              size="mini"
              type="primary"
              @click="downloadFile(row.bomArtFiles)"
              >下载</el-button
            >
          </template>
        </ele-pro-table>
      </el-tab-pane>
      <el-tab-pane lazy label="替代料" name="替代料">
        <ele-pro-table
          ref="replaceMaterialTable"
          :columns="materialQuotaColumns"
          :datasource="newBomObj.replaceMaterial"
          :need-page="false"
          :immediate="true"
          height="260px"
        >
          <template v-slot:toolbar>
            基本数量:
            <span style="color: rgb(21, 122, 44)">
              {{ newBomObj.baseCount2 }} {{ newBomObj.baseCountUnit2 }}</span
            >
          </template>

          <template v-slot:isReworkBom="{ row }">
            {{ row.isReworkBom ? '是' : '否' }}
          </template>

          <template v-slot:bomArtFiles="{ row }">
            <el-button
              size="mini"
              type="primary"
              @click="downloadFile(row.bomArtFiles)"
              >下载</el-button
            >
          </template>
        </ele-pro-table>
      </el-tab-pane>
      <el-tab-pane lazy label="工种" name="工种">
        <ele-pro-table
          ref="aptitudeParamTable"
          :columns="fileParamColumns"
          :datasource="newBomObj.aptitudeParam"
          row-key="id"
                    height="260px"
        >
        </ele-pro-table>
      </el-tab-pane>
      <el-tab-pane lazy label="工艺文件" name="工艺文件">
        {{ newBomObj.fileParam }}
      </el-tab-pane>
      <el-tab-pane lazy label="标准产出" name="标准产出">
        {{ newBomObj.standardOutput }}
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import {
    produceColumns,
    materialQuotaColumns,
    fileParamColumns
  } from './columnsTab.js';

  import beatInfo from './components/beatInfo.vue';
  import normalHoursInfo from './components/normalHoursInfo.vue';

  import { getFile } from '@/api/system/file';
  export default {
    components: {
      beatInfo,
      normalHoursInfo
    },

    props: {
      BomObj: {
        type: Object
      }
    },

    watch: {
      BomObj: {
        handler(val) {
          this.newBomObj = JSON.parse(JSON.stringify(val));

          this.$forceUpdate();
        },
        immediate: true,
        deep: true
      }
    },

    data() {
      return {
        activeName: '工艺参数',
        newBomObj: {},

        produceColumns,
        materialQuotaColumns,
        fileParamColumns
      };
    },

    methods: {
      tabsChange(tab) {
        this.activeName = tab.name;
      },

      downloadFile(url) {
        getFile({ objectName: url }, '附件');
      }
    }
  };
</script>

<style lang="scss">
  .el-tabs__content {
    padding: 4px !important;
  }
</style>