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

<template>
  <div class="ele-body">
    <div class="page-title">
      <el-page-header @back="$router.go(-1)">
        <div slot="content" class="pageContent">
          <div>详情</div>
        </div>
      </el-page-header>
    </div>
    <progressBox v-if="tabList.length" :list="tabList" :total="infoData.formingNum"/>
    <el-card>
      <el-descriptions title="" direction="vertical" :column="7" border>
        <el-descriptions-item label="工单号">{{infoData.code}}</el-descriptions-item>
        <el-descriptions-item label="生产版本" >{{infoData.produceVersionName}}</el-descriptions-item >
        <!-- <el-descriptions-item label="工单类型">苏州市</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.completionTime}}</el-descriptions-item>
        <el-descriptions-item label="生产周期">{{infoData.productionCycle}}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card v-if="tabList.length">
      <el-tabs v-model="activeName" type="card">
		  <el-tab-pane
		    :label="item.taskTypeName"
		    :name="item.taskTypeName"
		    v-for="item in tabList"
		    :key="item.taskCode"
		  ></el-tab-pane>
<!--        <el-tab-pane label="挤压成型" name="1"> </el-tab-pane>
        <el-tab-pane label="自然干燥" name="2"></el-tab-pane>
        <el-tab-pane label="升温干燥" name="3"></el-tab-pane>
        <el-tab-pane label="半加定长" name="4"></el-tab-pane>
        <el-tab-pane label="备炉" name="5"></el-tab-pane>
        <el-tab-pane label="烧结" name="6"></el-tab-pane>
        <el-tab-pane label="深加工" name="7"></el-tab-pane>
        <el-tab-pane label="包装" name="8"></el-tab-pane>
        <el-tab-pane label="入库" name="9"></el-tab-pane> -->
      </el-tabs>
      <ele-pro-table
        :columns="columnOpt[activeName] || columnOpt['深加工'] "
        :datasource="datasource"
        :key="activeName"
        :cache-key="`produceDetal${activeName}`"
		:initLoad="false"
		ref="table"
      >
        <template v-slot:toolbar>
          <div class="tips-box">
            <ul v-if="activeName == '挤压成型'">
              <li>
                <span class="label">累计合格品数量</span>
                1500PCS
              </li>
              <li>
                <span class="label">累计合格品重量</span>
                1500PCS
              </li>
              <li>
                <span class="label">累计投料重量</span>
                1500PCS
              </li>
            </ul>
            <ul v-else-if="['自然干燥', '升温干燥', '半加定长'].includes(activeName)">
              <li>
                <span class="label">累计合格品数量</span>
                1500PCS
              </li>
              <li>
                <span class="label">累计合格品重量</span>
                1500PCS
              </li>
              <li>
                <span class="label">累计投料产品重量</span>
                1500PCS
              </li>
            </ul>
            <ul v-else-if="['备炉'].includes(activeName)">
              <li>
                <span class="label">累计交接数量</span>
                1500PCS
              </li>
              <li>
                <span class="label">累计实际数量</span>
                1500PCS
              </li>
            </ul>
            <ul v-else-if="['烧结', '质检', '深加工'].includes(activeName)">
              <li>
                <span class="label">累计合格品数量</span>
                1500PCS
              </li>
              <li>
                <span class="label">累计合格品重量</span>
                1500PCS
              </li>
              <li>
                <span class="label">累计投料数量</span>
                1500PCS
              </li>
            </ul>
            <ul v-else-if="['包装'].includes(activeName)">
              <li>
                <span class="label">累计交接数量</span>
                1500PCS
              </li>
              <li>
                <span class="label">累计实际数量</span>
                1500PCS
              </li>
              <li>
                <span class="label">累计包装数量</span>
                1500PCS
              </li>
              <li>
                <span class="label">累计包装产品数量</span>
                1500PCS
              </li>
            </ul>
            <ul v-else-if="['缴库'].includes(activeName)">
              <li>
                <span class="label">累计交接数量</span>
                1500PCS
              </li>
              <li>
                <span class="label">累计批次数量</span>
                1500PCS
              </li>
              <li>
                <span class="label">累计产品数量</span>
                1500PCS
              </li>
            </ul>
<!--            <el-link type="primary" v-if="activeName == 1" @click="openOther"
              >其他任务记录</el-link
            > -->
          </div>
        </template>
        <template v-slot:action>
          <el-link type="primary">冲销</el-link>
        </template>
      </ele-pro-table>
    </el-card>
    <otherMission ref="otherMissionRef" />
  </div>
</template>

<script>
  import progressBox from './components/progressBox';
  import otherMission from './components/otherMission';
  import { getTaskListById } from '@/api/mainData/index.js';
  import { reportPage , getInfoById } from '@/api/produceOrder/index.js';
  export default {
    components: {
      otherMission,
      progressBox
    },
    data () {
      return {
		infoData:{},
        descriptionsShow: true,
        activeName: '挤压成型',
		tabList:[],
        columnOpt: {
          挤压成型: [
            {
              label: '序号',
              type: 'index',
			  width: 55
            },
            {
              label: '投料时间',
              prop: 'feedingTime'
            },
            {
              label: '投料重量',
              prop: 'feedingWeight'
            },
            {
              label: '投料执行人',
              prop: 'feedingOperator'
            },
            {
              label: '设备编码',
              prop: 'deviceCode'
            },
            {
              label: '设备名称',
              prop: 'deviceName'
            },
            {
              label: '报工时间',
              prop: 'reportWorkTime'
            },
            {
              label: '报工执行人',
              prop: 'reportingOperator'
            },
            {
              label: '周转车编码',
              prop: 'transferCarCode'
            },
            {
              label: '合格品数量',
              prop: 'standardNum'
            },
            {
              label: '合格品重量',
              prop: 'standardWeight'
            },
            {
              label: '不合格品数量',
              prop: 'noStandardNum'
            },
            {
              label: '不合格品重量',
              prop: 'noStandardWeight'
            },
            {
              label: '副产品重量',
              prop: 'secondaryProductWeight'
            },
            {
              label: '操作',
              slot: 'action'
            }
          ],
          自然干燥: [
            {
              label: '序号',
              type: 'index',
			  width: 55
            },
            {
              label: '投料时间',
              prop: 'feedingTime'
            },
            {
              label: '投料执行人',
              prop: 'feedingOperator'
            },
            {
              label: '产品数量',
              prop: 'productNum'
            },
            {
              label: '周转车编码',
              prop: 'transferCarCode'
            },
            {
              label: '区域编码',
              prop: 'areaCode'
            },
            {
              label: '干燥时长',
              prop: 'dryingDuration'
            },
            {
              label: '报工时间',
              prop: 'reportWorkTime'
            },
            {
              label: '报工执行人',
              prop: 'reportingOperator'
            },
            {
              label: '合格品数量',
              prop: 'standardNum'
            },
            {
              label: '合格品重量',
              prop: 'standardWeight'
            },
            {
              label: '不合格品数量',
              prop: 'noStandardNum'
            },
            {
              label: '不合格品重量',
              prop: 'noStandardWeight'
            },
            {
              label: '副产品重量',
              prop: 'secondaryProductWeight'
            },
            {
              label: '操作',
              slot: 'action'
            }
          ],
          升温干燥: [
            {
              label: '序号',
              type: 'index',
			  width: 55
            },
            {
              label: '投料时间',
              prop: 'feedingTime'
            },
            {
              label: '投料执行人',
              prop: 'feedingOperator'
            },
            {
              label: '产品数量',
              prop: 'productNum'
            },
            {
              label: '周转车编码',
              prop: 'transferCarCode'
            },
            {
              label: '设备编码',
              prop: 'deviceCode'
            },
            {
              label: '设备名称',
              prop: 'deviceName'
            },
            {
              label: '升温曲线',
              prop: 'temperatureRamp'
            },
            {
              label: '报工时间',
              prop: 'reportWorkTime'
            },
            {
              label: '报工执行人',
              prop: 'reportingOperator'
            },
            {
              label: '合格品数量',
              prop: 'standardNum'
            },
            {
              label: '合格品重量',
              prop: 'standardWeight'
            },
            {
              label: '不合格品数量',
              prop: 'noStandardNum'
            },
            {
              label: '不合格品重量',
              prop: 'noStandardWeight'
            },
            {
              label: '副产品重量',
              prop: 'secondaryProductWeight'
            },
            {
              label: '操作',
              slot: 'action'
            }
          ],
          半加定长: [
            {
              label: '序号',
              type: 'index',
			  width: 55
            },
            {
              label: '投料时间',
              prop: 'feedingTime'
            },
            {
              label: '投料执行人',
              prop: 'feedingOperator'
            },
            {
              label: '产品数量',
              prop: 'productNum'
            },
            {
              label: '周转车编码',
              prop: 'transferCarCode'
            },
            {
              label: '设备编码',
              prop: 'deviceCode'
            },
            {
              label: '设备名称',
              prop: 'deviceName'
            },
            {
              label: '报工时间',
              prop: 'reportWorkTime'
            },
            {
              label: '报工执行人',
              prop: 'reportingOperator'
            },
            {
              label: '合格品数量',
              prop: 'standardNum'
            },
            {
              label: '合格品重量',
              prop: 'standardWeight'
            },
            {
              label: '不合格品数量',
              prop: 'noStandardNum'
            },
            {
              label: '不合格品重量',
              prop: 'noStandardWeight'
            },
            {
              label: '副产品重量',
              prop: 'secondaryProductWeight'
            },
            {
              label: '操作',
              slot: 'action'
            }
          ],
          备炉: [
            {
              label: '序号',
              type: 'index',
			  width: 55
            },
            {
              label: '交接时间',
              prop: 'handoverTime'
            },
            {
              label: '交接执行人',
              prop: 'handoverOperator'
            },
            {
              label: '交接数量',
              prop: 'handoverQuantity'
            },
            {
              label: '实际数量',
              prop: 'actualQuantity'
            },
            {
              label: '执行时间',
              prop: 'executionTime'
            },
            {
              label: '执行人',
              prop: 'executor'
            },
            {
              label: '设备编码',
              prop: 'deviceCode'
            },
            {
              label: '设备名称',
              prop: 'deviceName'
            },
            {
              label: '烧结曲线',
              prop: 'sinteringCurve'
            },
            {
              label: '操作',
              slot: 'action'
            }
          ],
          烧结: [
            {
              label: '序号',
              type: 'index',
			  width: 55
            },
            {
              label: '报工时间',
              prop: 'reportWorkTime'
            },
            {
              label: '报工执行人',
              prop: 'reportingOperator'
            },
            {
              label: '合格品数量',
              prop: 'standardNum'
            },
            {
              label: '合格品重量',
              prop: 'standardWeight'
            },
            {
              label: '不合格品数量',
              prop: 'noStandardNum'
            },
            {
              label: '不合格品重量',
              prop: 'noStandardWeight'
            },
            {
              label: '副产品重量',
              prop: 'secondaryProductWeight'
            },
            {
              label: '操作',
              slot: 'action'
            }
          ],
          质检: [
            {
              label: '序号',
              type: 'index',
			  width: 55
            },
            {
              label: '报工时间',
              prop: 'reportWorkTime'
            },
            {
              label: '报工执行人',
              prop: 'reportingOperator'
            },
            {
              label: '合格品数量',
              prop: 'standardNum'
            },
            {
              label: '合格品重量',
              prop: 'standardWeight'
            },
            {
              label: '不合格品数量',
              prop: 'noStandardNum'
            },
            {
              label: '不合格品重量',
              prop: 'noStandardWeight'
            },
            {
              label: '副产品重量',
              prop: 'secondaryProductWeight'
            },
            {
              label: '操作',
              slot: 'action'
            }
          ],
          深加工: [
            {
              label: '序号',
              type: 'index',
			  width: 55
            },
            {
              label: '交接时间',
              prop: 'handoverTime'
            },
            {
              label: '交接执行人',
              prop: 'handoverOperator'
            },
            {
              label: '交接数量',
              prop: 'handoverQuantity'
            },
            {
              label: '实际数量',
              prop: 'actualQuantity'
            },
            {
              label: '投料时间',
              prop: 'feedingTime'
            },
            {
              label: '投料执行人',
              prop: 'feedingOperator'
            },
            {
              label: '设备编码',
              prop: 'deviceCode'
            },
            {
              label: '设备名称',
              prop: 'deviceName'
            },
            {
              label: '报工时间',
              prop: 'reportWorkTime'
            },
            {
              label: '报工执行人',
              prop: 'reportingOperator'
            },
            {
              label: '合格品数量',
              prop: 'standardNum'
            },
            {
              label: '合格品重量',
              prop: 'standardWeight'
            },
            {
              label: '不合格品数量',
              prop: 'noStandardNum'
            },
            {
              label: '不合格品重量',
              prop: 'noStandardWeight'
            },
            {
              label: '副产品重量',
              prop: 'secondaryProductWeight'
            },
            {
              label: '操作',
              slot: 'action'
            }
          ],
          包装: [
            {
              label: '序号',
              type: 'index',
			  width: 55
            },
            {
              label: '交接时间',
              prop: 'handoverTime'
            },
            {
              label: '交接执行人',
              prop: 'handoverOperator'
            },
            {
              label: '交接数量',
              prop: 'handoverQuantity'
            },
            {
              label: '实际数量',
              prop: 'actualQuantity'
            },
            {
              label: '报工时间',
              prop: 'reportWorkTime'
            },
            {
              label: '报工执行人',
              prop: 'reportingOperator'
            },
            {
              label: '包装数量',
              prop: 'packagingQuantity'
            },
            {
              label: '包装产品数量',
              prop: 'packagedProductQuantity'
            },
            {
              label: '尾料数量',
              prop: 'tailingsQuantity'
            },
            {
              label: '物料清单',
              prop: 'materialList'
            },
            {
              label: '操作',
              slot: 'action'
            }
          ],
          缴库: [
            {
              label: '序号',
              type: 'index',
			  width: 55
            },
            {
              label: '交接时间',
              prop: 'handoverTime'
            },
            {
              label: '交接执行人',
              prop: 'handoverOperator'
            },
            {
              label: '交接数量',
              prop: 'handoverQuantity'
            },
            {
              label: '实际数量',
              prop: 'actualQuantity'
            },
            {
              label: '报工时间',
              prop: 'reportWorkTime'
            },
            {
              label: '报工执行人',
              prop: 'reportingOperator'
            },
            {
              label: '批次数量',
              prop: 'batchQuantity'
            },
            {
              label: '入库数量',
              prop: 'inboundQuantity'
            },
            {
              label: '交货仓库',
              prop: 'deliveryWarehouse'
            },
            {
              label: '操作',
              slot: 'action'
            }
          ]
        },
		workOrderId:'',
		taskCode:'',
		typeList:{
			1:'内销订单',
			2:'外销订单',
			3:'预制订单'
		},
		statusList:{
			4:'待生产',
			5:'生产中',
			6:'已完成',
			7:'已延期'
		}
      };
    },
	created () {
	  this.workOrderId  = this.$route.query.id
	  this.getInfo(this.workOrderId)
	},
    methods: {
		 datasource({ page, limit,where }) {
			return reportPage({ ...where, pageNum:page, size:limit });
		 },
		 /* 刷新表格 */
		 reload (where) {
		   this.$nextTick(() =>
		     this.$refs.table.reload({ page: 1, limit: 10, where })
		   );
		 },
		async getInfo(id){
			const res = await getInfoById(id)
			this.infoData = res
			if(typeof res.taskTypeProcessDiagrams == 'string' ){
				this.tabList = []
			}else{
				this.tabList = res.taskTypeProcessDiagrams
			}
			this.activeName = this.tabList[0]?.taskTypeName || ''
			this.taskCode = this.tabList[0]?.taskCode || ''
			this.reload({workOrderId:this.workOrderId, taskCode:this.taskCode})
		},
		// async getTab (id) {
		//   const res = await getTaskListById(id);
		//   this.tabList = res;
		//   this.activeName = res[0]?.taskTypeName || '';
		//   this.getTabList(res[0].taskCode)
		// },
		// async getTabList(code){
		// 	const data = {
		// 		pageNum:1,
		// 		size:10,
		// 		taskCode:code,
		// 		workOrderId:this.workOrderId
		// 	}
		// 	const res = await reportPage(data)
		// 	console.log('res',res)
		// },
		  openOther () {
			this.$refs.otherMissionRef.open();
		  }
		  
    }
  };
</script>

<style lang="scss" scoped>
  .el-tabs {
    margin-top: 20px;
  }

  .tips-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 20px;
    ul {
      list-style: none;
      display: flex;
      justify-content: flex-start;

      li {
        margin-right: 40px;
      }
    }
  }
</style>