<template>
|
<div class="product-traceability-div">
|
<div class="product-traceability-hearder-div">
|
<div style="width: 600px;margin-left:3px;">
|
<tRemoteSelect
|
v-model="systemNo"
|
:columns="partColumn"
|
:data="partList"
|
:formatter="labelFormatter"
|
:selectLoading="selectLoading"
|
:valueColumn="valueColumn"
|
@selectChange="changePart()"
|
@remoteSearch="queryPart"
|
></tRemoteSelect>
|
</div>
|
<div style="margin-left:20px;">
|
<el-radio v-model="traceType" label="posite" @change="changeTraceType"
|
>反向追溯</el-radio
|
>
|
<el-radio v-model="traceType" label="negate" @change="changeTraceType"
|
>正向追溯</el-radio
|
>
|
</div>
|
</div>
|
<div class="product-traceability-body-div">
|
<div class="product-traceability-relationship-div">
|
<div class="product-traceability-relationship-title-div">
|
产品追溯流程图
|
</div>
|
<el-divider class="product-traceability-divider"></el-divider>
|
<div class="product-traceability-relationship-content-div">
|
<traceability-diagram
|
:modelData="modelData"
|
@changed-selection="nodeChange"
|
></traceability-diagram>
|
</div>
|
</div>
|
<div ref="productInfoTab" class="product-traceability-productinfo-div">
|
<el-tabs
|
v-model="tabActiveName"
|
:tab-position="tabPosition"
|
style="height: 100%;width:100%;"
|
@tab-click="tabClick"
|
>
|
<el-tab-pane label="工单信息" name="工单信息">
|
<div style="margin-top:10px;">
|
<el-row>
|
<el-col
|
:span="10"
|
:offset="1"
|
class="product-traceability-taskinfo-pane-div"
|
>
|
<el-row>
|
<el-col :span="12">
|
<div class="product-traceability-param-top">
|
<div class="product-traceability-form-item">
|
<label>工艺名称</label>
|
<div style="color: #7A9EFD">
|
{{ currOperateTask.technologyName }}
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="product-traceability-param-top">
|
<div class="product-traceability-form-item">
|
<label>零件号</label>
|
<div style="color: #7A9EFD">
|
{{ currOperateTask.partNo }}
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
<el-row style="margin-top: 20px">
|
<el-col :span="12">
|
<div class="product-traceability-param-top">
|
<div class="product-traceability-form-item">
|
<label>创建时间</label>
|
<div style="color: #7A9EFD">
|
{{ currOperateTask.createTime }}
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="product-traceability-param-top">
|
<div class="product-traceability-form-item">
|
<label>零件</label>
|
<div style="color: #7A9EFD;white-space:normal;">
|
{{ currOperateTask.partName }}
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</el-col>
|
<el-col
|
:span="10"
|
:offset="1"
|
class="product-traceability-taskinfo-pane-div"
|
>
|
<el-row>
|
<el-col :span="12">
|
<div class="product-traceability-param-top">
|
<div class="product-traceability-form-item">
|
<label>制造订单号</label>
|
<div style="color: #7A9EFD">
|
{{ currOperateTask.moNo }}
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="product-traceability-param-top">
|
<div class="product-traceability-form-item">
|
<label>工单编号</label>
|
<div style="color: #7A9EFD">
|
{{ currOperateTask.optaskNo }}
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
<el-row style="margin-top: 20px">
|
<el-col :span="12">
|
<div class="product-traceability-param-top">
|
<div class="product-traceability-form-item">
|
<label>状态</label>
|
<div style="color: #7A9EFD">
|
{{ taskStateFormatter(currOperateTask.state) }}
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="product-traceability-param-top">
|
<div class="product-traceability-form-item">
|
<label>备注</label>
|
<div style="color: #7A9EFD">
|
{{ currOperateTask.remark }}
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col
|
:span="10"
|
:offset="1"
|
class="product-traceability-taskinfo-pane-div"
|
>
|
<el-row>
|
<el-col :span="12"
|
><div class="product-traceability-param-top">
|
<div class="product-traceability-form-item">
|
<label>工序</label>
|
<div style="color: #7A9EFD">
|
{{ currOperateTask.operationName }}
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="product-traceability-param-top">
|
<div class="product-traceability-form-item">
|
<label>计划数量</label>
|
<div style="color: #7A9EFD">
|
{{ currOperateTask.plannedQuantity }}
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
<el-row style="margin-top: 20px">
|
<el-col :span="12">
|
<div class="product-traceability-param-top">
|
<div class="product-traceability-form-item">
|
<label>完成数量</label>
|
<div style="color: #7A9EFD">
|
{{ currOperateTask.completedQuantity }}({{
|
currOperateTask.unit
|
}})
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="product-traceability-param-top">
|
<div class="product-traceability-form-item">
|
<label>优先级</label>
|
<div style="color: #7A9EFD">
|
{{ currOperateTask.priority }}
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</el-col>
|
<el-col
|
:span="10"
|
:offset="1"
|
class="product-traceability-taskinfo-pane-div"
|
>
|
<el-row>
|
<el-col :span="12">
|
<div class="product-traceability-param-top">
|
<div class="product-traceability-form-item">
|
<label>实际完成时间</label>
|
<div style="color: #7A9EFD">
|
{{ currOperateTask.actualFinishDate }}
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="product-traceability-param-top">
|
<div class="product-traceability-form-item">
|
<label>计划开始时间</label>
|
<div style="color: #7A9EFD">
|
{{ currOperateTask.plannedStartDate }}
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
<el-row style="margin-top: 20px">
|
<el-col :span="12">
|
<div class="product-traceability-param-top">
|
<div class="product-traceability-form-item">
|
<label>计划完成时间</label>
|
<div style="color: #7A9EFD">
|
{{ currOperateTask.plannedFinishDate }}
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="product-traceability-param-top">
|
<div class="product-traceability-form-item">
|
<label>实际开始时间</label>
|
<div style="color: #7A9EFD">
|
{{ currOperateTask.actualStartDate }}
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</el-col>
|
</el-row>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="报工信息" name="报工信息">
|
<div
|
style="margin-top:10px;"
|
class="product-traceability-producttracking-div"
|
>
|
<div class="product-traceability-producttracking-item-div">
|
<div class="product-traceability-producttracking-name-div">
|
<div>工作站：</div>
|
<div>报工单号：</div>
|
<div>报工人员：</div>
|
<div>产品编号：</div>
|
<div>零件号：</div>
|
<div>单位：</div>
|
<div>产出数量：</div>
|
</div>
|
<div class="product-traceability-producttracking-val-div">
|
<div :title="currProductTracking.workstationName">
|
{{ currProductTracking.workstationName }}
|
</div>
|
<div>{{ currProductTracking.productNo }}</div>
|
<div :title="currProductTracking.productStaff">
|
{{ currProductTracking.productStaff }}
|
</div>
|
<div>{{ currProductTracking.batchNo }}</div>
|
<div :title="currProductTracking.partNo">
|
{{ currProductTracking.partNo }}
|
</div>
|
<div>{{ currProductTracking.unit }}</div>
|
<div>{{ currProductTracking.productQty }}</div>
|
</div>
|
</div>
|
<div class="product-traceability-producttracking-item-div">
|
<div class="product-traceability-producttracking-name-div">
|
<div>班组：</div>
|
<div>汇报工序：</div>
|
<div>汇报时间：</div>
|
<div>批号：</div>
|
<div>零件描述：</div>
|
<div>生产日期：</div>
|
</div>
|
<div class="product-traceability-producttracking-val-div">
|
<div>{{ currProductTracking.crewName }}</div>
|
<div>{{ currProductTracking.operationName }}</div>
|
<div>{{ currProductTracking.trackingTime }}</div>
|
<div>{{ currProductTracking.systemNo }}</div>
|
<div :title="currProductTracking.partName">
|
{{ currProductTracking.partName }}
|
</div>
|
<div>{{ currProductTracking.productDate }}</div>
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="工步信息" name="工步信息">
|
<div style="margin-top:10px;">
|
<el-table
|
ref="stepRecordTable"
|
:data="stepRecordList"
|
height="800px"
|
:header-cell-style="stepRecordTableHeaderCellStyle"
|
:row-class-name="stepRecordTableRowClassName"
|
class="step-table"
|
>
|
<el-table-column label="工步编号" prop="stepNo" align="center">
|
</el-table-column>
|
<el-table-column label="工步名称" prop="name" align="center">
|
</el-table-column>
|
<el-table-column
|
label="人员"
|
prop="staffName"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
</el-table-column>
|
<el-table-column label="时间" prop="createTime" align="center">
|
</el-table-column>
|
</el-table>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="检测信息" name="检测信息">
|
<div style="margin-top:10px;">
|
<el-tabs type="card">
|
<el-tab-pane
|
v-for="(item, index) in checkItemList"
|
:key="item.reportTypeLabel"
|
:label="item.reportTypeLabel"
|
>
|
<el-table
|
stripe
|
:data="item.itemList"
|
:height="sampleTableHeight"
|
:row-style="{ height: '26px' }"
|
:cell-style="{ padding: '0' }"
|
>
|
<el-table-column
|
prop="sort"
|
label="序号"
|
align="center"
|
min-width="50px"
|
/>
|
<el-table-column
|
prop="itemCode"
|
label="编号"
|
align="center"
|
min-width="75px"
|
/>
|
<el-table-column
|
prop="itemName"
|
label="检测项目"
|
align="center"
|
min-width="100px"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.itemName }}({{ scope.row.unit }})
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="itemReference"
|
label="要求范围"
|
align="center"
|
min-width="75px"
|
/>
|
<el-table-column
|
prop="itemValue"
|
label="实测值"
|
align="center"
|
min-width="75px"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.itemValue }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="isQualified"
|
label="合格"
|
align="center"
|
min-width="60px"
|
>
|
<template slot-scope="scope">
|
{{
|
scope.row.isQualified == false
|
? '否'
|
: scope.row.isQualified
|
? '是'
|
: ''
|
}}
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="remark"
|
label="备注"
|
align="center"
|
min-width="90px"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.remark }}
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-tab-pane>
|
<!--<el-tab-pane label="附件">
|
<el-upload
|
drag
|
ref="upload"
|
action="/mes/reportSample/upload"
|
:headers="headers"
|
:auto-upload="true"
|
:file-list="fileList"
|
list-type="text"
|
:on-preview="handlePreview"
|
:with-credentials="true"
|
>
|
<i class="el-icon-upload"></i>
|
<div class="el-upload__text">
|
将文件拖到此处，或<em>点击上传</em>
|
</div>
|
</el-upload>
|
</el-tab-pane>-->
|
</el-tabs>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="生产记录" name="生产记录">
|
<div style="margin-top:10px;">
|
<div style="padding:0px 14px;height: 100%;overflow: auto;">
|
<div class="product-record-div">
|
<div class="product-record-div-left">
|
<div class="product-record-list-header">
|
<div>
|
<el-divider
|
class="pane-divider"
|
direction="vertical"
|
></el-divider
|
><span style="font-size:14px;font-weight:bold"
|
>生产记录</span
|
>
|
</div>
|
</div>
|
<el-table
|
ref="productRecordTable"
|
:data="productRecords"
|
height="800px"
|
:highlight-current-row="true"
|
:header-cell-style="productRecordTableHeaderCellStyle"
|
:row-class-name="productRecordTableRowClassName"
|
class="product-record-table"
|
@row-click="handleProductRecordChange"
|
>
|
<el-table-column
|
label="记录描述"
|
prop="name"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
</el-table-column>
|
<el-table-column
|
label="记录人"
|
prop="createUser"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="product-record-div-right">
|
<div class="product-record-info-header">
|
<div>
|
<el-divider
|
class="pane-divider"
|
direction="vertical"
|
></el-divider
|
><span style="font-size:14px;font-weight:bold"
|
>记录详情</span
|
>
|
</div>
|
</div>
|
<div style="height:800px;">
|
<el-tabs type="card" ref="tabs">
|
<el-tab-pane label="参数">
|
<el-table
|
ref="productRecordInfoTable"
|
:data="productRecordParamValues"
|
height="744px"
|
:row-class-name="productRecordInfoTableRowClassName"
|
class="product-record-table"
|
>
|
<el-table-column
|
prop="code"
|
label="编号"
|
align="center"
|
></el-table-column>
|
<el-table-column
|
prop="parameterItem"
|
label="名称"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<span
|
>{{ scope.row.parameterItem }}（{{
|
scope.row.unit
|
}}）</span
|
>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="type"
|
label="参数类型"
|
align="center"
|
:formatter="getParam"
|
></el-table-column>
|
<el-table-column
|
prop="paramValue"
|
label="值"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<el-input
|
v-model="scope.row.paramValue"
|
placeholder="值"
|
></el-input>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-tab-pane>
|
<el-tab-pane label="附件">
|
<el-upload
|
ref="upload"
|
action="/mes/operationTask/upload"
|
:headers="headers"
|
:on-preview="handlePreview"
|
:file-list="productRecordFileList"
|
:auto-upload="false"
|
list-type="picture"
|
></el-upload
|
></el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="工艺参数" name="工艺参数">
|
<div style="margin-top:10px;">
|
<el-tabs
|
v-model="activeName"
|
type="card"
|
@tab-click="handleTabClick"
|
v-if="paramTabs.length > 0"
|
>
|
<el-tab-pane
|
v-for="(paramTab, index) in paramTabs"
|
:key="index"
|
:label="paramTab"
|
:name="paramTab"
|
>
|
<div class="pane-div">
|
<div>
|
<el-divider
|
class="pane-divider"
|
direction="vertical"
|
></el-divider
|
><span style="font-size:14px;font-weight:bold"
|
>参数集</span
|
>
|
<div class="template-content-div">
|
<el-select
|
v-model="currTemplateId"
|
placeholder="请选择"
|
style="width: 300px;"
|
@change="tabParamsClick()"
|
clearable
|
>
|
<el-option
|
v-for="item in everyTabParams"
|
:key="item.id"
|
:label="item.operationTemplateName"
|
:value="item.id"
|
>
|
<div style="display: table;width: 300px;">
|
<div style="display: table-row;">
|
<div
|
style="display: table-cell;width:50%;text-align: center;"
|
>
|
{{ item.systemNo }}
|
</div>
|
<div
|
style="display: table-cell;text-align: center;"
|
>
|
{{ item.operationTemplateName }}
|
</div>
|
</div>
|
</div>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
<div style="margin-top:14px;">
|
<el-divider
|
class="pane-divider"
|
direction="vertical"
|
></el-divider
|
><span style="font-size:14px;font-weight:bold">参数</span>
|
<div class="params-content-div">
|
<el-table
|
:data="params"
|
:height="paramsTableHeight"
|
:header-cell-style="paramsTableHeaderStyle"
|
:row-class-name="tableRowClassName"
|
class="taskinfo-params-table"
|
>
|
<el-table-column
|
prop="code"
|
label="编号"
|
width="350"
|
align="center"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="parameterItem"
|
label="名称"
|
width="350"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<span
|
>{{ scope.row.parameterItem }}（{{
|
scope.row.unit
|
}}）</span
|
>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="paramValue"
|
label="值"
|
align="center"
|
>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="模具信息" name="模具信息">
|
<div style="margin-top:10px;">
|
<el-table
|
ref="mouldRecordTable"
|
:data="mouldRecordList"
|
height="800px"
|
:header-cell-style="mouldRecordTableHeaderCellStyle"
|
:row-class-name="stepRecordTableRowClassName"
|
class="step-table"
|
>
|
<el-table-column
|
label="设备"
|
prop="equipmentName"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.equipmentName }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="模具编号"
|
prop="mouldCode"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.mouldCode }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="模具名称"
|
prop="mouldName"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.mouldName }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="工序"
|
prop="name"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.name }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="工步"
|
prop="stepName"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.stepName }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="批号"
|
prop="batchNo"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.batchNo }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="产量" prop="output" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.output }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="寿命转换系数"
|
prop="lifeConversionFactor"
|
align="center"
|
width="100px"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.lifeConversionFactor }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="使用量"
|
prop="usageAmount"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.usageAmount }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="报工单号"
|
prop="productNo"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.productNo }}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</div>
|
</template>
|
<style lang="scss" scoped>
|
.product-traceability-div {
|
padding: 0px 10px 8px;
|
height: 100%;
|
}
|
.product-traceability-hearder-div {
|
display: flex;
|
align-items: center;
|
height: 50px;
|
background-color: #fff;
|
border-radius: 4px;
|
}
|
.product-traceability-body-div {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 10px;
|
height: calc(100% - 60px);
|
}
|
.product-traceability-relationship-div {
|
width: 45%;
|
border-radius: 4px;
|
background-color: #fff;
|
}
|
.product-traceability-relationship-title-div {
|
font-size: 15px;
|
font-weight: bold;
|
height: 30px;
|
line-height: 30px;
|
margin-left: 3px;
|
}
|
.product-traceability-divider {
|
margin-top: 0px;
|
margin-bottom: 0px;
|
}
|
.product-traceability-relationship-content-div {
|
height: calc(100% - 31px);
|
overflow: auto;
|
}
|
.product-traceability-productinfo-div {
|
width: calc(55% - 10px);
|
border-radius: 4px;
|
background-color: #fff;
|
display: flex;
|
justify-content: space-between;
|
}
|
.product-traceability-taskinfo-pane-div {
|
border: 0.5px solid #f8f8fb;
|
border-radius: 10px;
|
height: 210px;
|
}
|
.product-traceability-param-top {
|
width: 100%;
|
height: 60px;
|
padding: 10px 20px;
|
|
.product-traceability-form-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
|
.product-traceability-form-item label {
|
color: #333;
|
font-weight: bold;
|
display: inline-block;
|
white-space: nowrap;
|
font-size: 12px;
|
transform: translateZ(0);
|
margin：autoauto；min-width: 100px;
|
}
|
|
.product-traceability-form-item div {
|
font-size: 12px;
|
font-weight: bold;
|
margin-top: 5px;
|
white-space: nowrap;
|
color: rgba(0, 0, 0, 0.9);
|
vertical-align: text-top;
|
}
|
}
|
|
.product-traceability-producttracking-div {
|
display: flex;
|
justify-content: space-around;
|
}
|
.product-traceability-producttracking-item-div {
|
display: flex;
|
justify-content: center;
|
|
width: 48%;
|
}
|
.product-traceability-producttracking-name-div {
|
width: 80px;
|
}
|
.product-traceability-producttracking-val-div {
|
width: calc(96% - 80px);
|
}
|
.product-traceability-producttracking-name-div div {
|
height: 30px;
|
line-height: 30px;
|
font-size: 14px;
|
text-align: right;
|
}
|
.product-traceability-producttracking-val-div div {
|
height: 30px;
|
line-height: 30px;
|
font-size: 14px;
|
text-align: left;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
.step-table >>> .stripe-row {
|
background: #f6f9fe;
|
}
|
.step-table >>> td {
|
padding: 3px 0px;
|
}
|
.step-table >>> .el-button {
|
padding: 5px 0px;
|
}
|
.step-table {
|
/deep/ .el-table__fixed-right {
|
height: 100% !important; //设置高优先，以覆盖内联样式
|
}
|
}
|
.product-record-div {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.product-record-div-left {
|
width: 40%;
|
}
|
.product-record-div-right {
|
width: 58%;
|
}
|
.product-record-list-header {
|
margin-top: 20px;
|
margin-bottom: 14px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.product-record-list-header >>> .product-record-btn-add {
|
background: url('/img/workbench/icon_xz1.png') center center no-repeat;
|
background-size: cover;
|
}
|
|
.product-record-list-header >>> .product-record-btn-add:before {
|
content: '增';
|
font-size: 14px;
|
visibility: hidden;
|
}
|
.pane-divider {
|
width: 4px;
|
background-color: #4283ee;
|
}
|
.product-record-table >>> .stripe-row {
|
background: #f6f9fe;
|
}
|
.product-record-table >>> td {
|
padding: 3px 0px;
|
}
|
.product-record-table >>> .el-button {
|
padding: 5px 0px;
|
}
|
.product-record-table >>> .el-input .el-input__inner {
|
height: 24px;
|
line-height: 24px;
|
}
|
.product-record-info-header {
|
margin-top: 20px;
|
margin-bottom: 14px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.pane-div {
|
height: 100%;
|
padding: 5px 14px;
|
}
|
|
.pane-divider {
|
width: 4px;
|
background-color: #4283ee;
|
}
|
.template-content-div {
|
margin-top: 14px;
|
}
|
.template-content-div > div:first-child img {
|
width: 100%;
|
}
|
.params-content-div {
|
margin-top: 14px;
|
}
|
.taskinfo-params-table >>> .stripe-row {
|
background: #eef3fd;
|
}
|
.taskinfo-params-table >>> td {
|
padding: 3px 0px;
|
}
|
</style>
|
<script>
|
import {
|
queryByNo,
|
queryDiagram,
|
queryOperationTask
|
} from '@/api/product/producttraceability'
|
import {
|
getTemplateRecord,
|
getTemplateParam,
|
getTemplate
|
} from '@/api/plan/operationtask'
|
import { getStepRecords, getProductStepBySn } from '@/api/product/productstep'
|
import tRemoteSelect from '@/views/common/ztt-remote-select.vue'
|
import traceabilityDiagram from './traceability-diagram'
|
import { getStore } from '@/util/store.js'
|
import { remote } from '@/api/admin/dict'
|
import { fetchList as fetchMoulduserecord } from '@/api/product/moulduserecord'
|
export default {
|
components: {
|
tRemoteSelect,
|
traceabilityDiagram
|
},
|
data() {
|
return {
|
headers: {
|
Authorization: 'Bearer ' + getStore({ name: 'access_token' })
|
},
|
selectLoading: false,
|
systemNo: null,
|
selectedProductSystemNo: null,
|
valueColumn: 'systemNo',
|
partColumn: [
|
{
|
prop: 'batchNo',
|
label: '批次号'
|
},
|
{
|
prop: 'systemNo',
|
label: '系统号'
|
},
|
{
|
prop: 'partName',
|
label: '零件名称'
|
}
|
],
|
partList: [],
|
modelData: {
|
nodeDataArray: [
|
{
|
key: '1',
|
text: 'A',
|
color: 'lightblue'
|
},
|
{ key: '2', text: 'B', color: 'pink' },
|
|
{ key: '3', text: 'C', color: 'pink' },
|
{ key: '4', text: 'D', color: 'pink' },
|
{ key: '5', text: 'E', color: 'pink' },
|
{ key: '6', text: 'F', color: 'pink' },
|
{ key: '7', text: 'G', color: 'pink' },
|
{ key: '8', text: 'H', color: 'pink' },
|
{ key: '9', text: 'I', color: 'pink' },
|
{ key: '10', text: 'J', color: 'pink' }
|
],
|
linkDataArray: [
|
{ from: '1', to: '3' },
|
{ from: '2', to: '3' },
|
{ from: '3', to: '5' },
|
{ from: '4', to: '5' },
|
{ from: '5', to: '6' },
|
{ from: '5', to: '7' },
|
{ from: '7', to: '10' },
|
{ from: '8', to: '10' },
|
{ from: '9', to: '10' }
|
]
|
},
|
tabActiveName: '工单信息',
|
tabPosition: 'left',
|
currOperateTask: {
|
id: null,
|
technologyName: null,
|
partNo: null,
|
createTime: null,
|
partName: null,
|
moNo: null,
|
optaskNo: null,
|
state: '',
|
remark: '',
|
operationName: null,
|
plannedQuantity: null,
|
completedQuantity: null,
|
unit: null,
|
priority: null,
|
actualFinishDate: null,
|
plannedStartDate: null,
|
plannedFinishDate: null,
|
actualStartDate: null
|
},
|
currProductTracking: {
|
workstationName: '跳线工作站',
|
productNo: 'BG00001',
|
productStaff: 'ZTT-00159 张三',
|
batchNo: 'C09202106030001',
|
partNo: '88.118.1/A0045543',
|
unit: '根',
|
shiftName: '跳线车间-白班',
|
crewName: null,
|
operationName: '裁线',
|
trackingTime: '2021/8/30 14:00:00',
|
systemNo: '2021060200001',
|
partName: '跳线成品 NM-NM-8*3',
|
productDate: '2021/9/1',
|
productQty: 0
|
},
|
stepRecordList: [],
|
paramValues: [],
|
fileList: [],
|
productRecords: [],
|
productRecordParamValues: [],
|
productRecordFileList: [],
|
activeName: '',
|
paramDatas: [],
|
paramTabs: [],
|
currTemplateId: null,
|
everyTabParams: [], // 每个tab下参数集的集合
|
params: [], // 每个参数集下的参数的集合
|
paramTabCurrTemplateIds: [], // tab对应的最新参数集的集合
|
sampleTableHeight: null,
|
paramsTableHeight: null,
|
traceType: 'posite',
|
reportTypeOptions: [],
|
checkItemList: [],
|
mouldRecordList: []
|
}
|
},
|
mounted() {
|
this.getParamType()
|
this.getReportTypeDict()
|
this.resize()
|
},
|
methods: {
|
// 加载浏览器窗口变化自适应
|
resize() {
|
window.addEventListener('resize', () => {
|
this.$nextTick(() => {
|
if (this.tabActiveName === '检测信息') {
|
this.sampleTableHeight =
|
this.$refs.productInfoTab.clientHeight - 69 + 'px'
|
}
|
if (this.tabActiveName === '工艺参数') {
|
this.paramsTableHeight =
|
this.$refs.productInfoTab.clientHeight - 191 + 'px'
|
}
|
})
|
})
|
},
|
tabClick() {
|
this.$nextTick(() => {
|
if (this.tabActiveName === '检测信息') {
|
this.sampleTableHeight =
|
this.$refs.productInfoTab.clientHeight - 69 + 'px'
|
}
|
if (this.tabActiveName === '工艺参数') {
|
this.paramsTableHeight =
|
this.$refs.productInfoTab.clientHeight - 191 + 'px'
|
}
|
})
|
},
|
productRecordTableHeaderCellStyle({ row, column, rowIndex, columnIndex }) {
|
let headerStyle = 'background:#599ef4;color:#fff;'
|
if (columnIndex === 0) {
|
headerStyle += 'border-radius: 6px 0px 0px 0px;'
|
} else if (columnIndex === 1) {
|
headerStyle += 'border-radius: 0px 6px 0px 0px;'
|
}
|
return headerStyle
|
},
|
productRecordTableRowClassName({ row, rowIndex }) {
|
if (rowIndex % 2 === 1) {
|
return 'stripe-row'
|
} else {
|
return ''
|
}
|
},
|
productRecordInfoTableRowClassName({ row, rowIndex }) {
|
if (rowIndex % 2 === 1) {
|
return 'stripe-row'
|
} else {
|
return ''
|
}
|
},
|
taskStateFormatter(state) {
|
if (state === '01pending') {
|
return '等待'
|
} else if (state === '02inProgress') {
|
return '进行中'
|
} else if (state === '03interrupted') {
|
return '已暂停'
|
} else if (state === '04completed') {
|
return '已完成'
|
} else if (state === '05canceled') {
|
return '已取消'
|
} else {
|
return ''
|
}
|
},
|
labelFormatter(ele) {
|
let partLabel
|
const part = this.partList.find((item) => ele.systemNo === item.systemNo)
|
if (part !== undefined) {
|
partLabel =
|
'系统号：' +
|
part.systemNo +
|
' ' +
|
'零件名称：' +
|
part.partName +
|
' ' +
|
'批次号：' +
|
part.batchNo
|
}
|
return partLabel
|
},
|
queryPart(param) {
|
if (param !== '') {
|
this.selectLoading = true
|
const query = { no: param }
|
queryByNo(query)
|
.then((response) => {
|
this.selectLoading = false
|
var data = response.data
|
if (data.code === 0) {
|
this.partList = data.data
|
} else {
|
this.partList = []
|
}
|
})
|
.catch((error) => {
|
this.partList = []
|
console.log(error)
|
})
|
} else {
|
this.partList = []
|
}
|
},
|
changePart() {
|
if (this.systemNo != null && this.systemNo !== '') {
|
const query = { systemNo: this.systemNo, traceType: this.traceType }
|
queryDiagram(query)
|
.then((response) => {
|
var data = response.data
|
if (data.code === 0) {
|
data.data.nodeDataArray.forEach((item) => {
|
// 判断节点是否有产出
|
const hasOutNode = data.data.linkDataArray.find((ele) => {
|
return ele.from === item.key
|
})
|
item.batchNo = 'SN号:' + item.batchNo
|
item.quantity =
|
'投入数量:' +
|
(hasOutNode ? item.quantity : 0) +
|
' ' +
|
item.unit
|
item.ifsBatchNo =
|
'IFS批次号:' +
|
(item.ifsBatchNo == null ? '' : item.ifsBatchNo)
|
})
|
this.modelData = {
|
nodeDataArray: data.data.nodeDataArray,
|
linkDataArray: data.data.linkDataArray
|
}
|
} else {
|
this.modelData = { nodeDataArray: [], linkDataArray: [] }
|
}
|
})
|
.catch((error) => {
|
this.modelData = { nodeDataArray: [], linkDataArray: [] }
|
console.log(error)
|
})
|
} else {
|
this.modelData = { nodeDataArray: [], linkDataArray: [] }
|
}
|
},
|
// 节点选择发生变化时，触发该方法
|
nodeChange(param) {
|
const _that = this
|
param.diagram.selection.each(function(node) {
|
if (node instanceof go.Node) {
|
const nodeData = node.data
|
_that.selectedProductSystemNo = nodeData.key.split('_')[0]
|
// const query = { systemNo: 'XT000131' }
|
const query = { systemNo: nodeData.key.split('_')[0] }
|
console.log(query)
|
queryOperationTask(query)
|
.then((response) => {
|
var data = response.data
|
if (data.code === 0) {
|
// 报工信息
|
const productOut = data.data.productOut
|
if (productOut != null) {
|
const productTracking = productOut
|
_that.currProductTracking.workstationName =
|
productTracking.workstationName
|
_that.currProductTracking.productNo =
|
productTracking.productNo
|
_that.currProductTracking.productStaff =
|
productTracking.staffName
|
_that.currProductTracking.batchNo = productTracking.outBatchNo
|
_that.currProductTracking.partNo = productTracking.partNo
|
_that.currProductTracking.unit = productTracking.unit
|
_that.currProductTracking.shiftName = null
|
_that.currProductTracking.crewName = productTracking.crewName
|
_that.currProductTracking.operationName =
|
productTracking.operationName
|
_that.currProductTracking.trackingTime =
|
productTracking.createTime
|
_that.currProductTracking.systemNo = productTracking.systemNo
|
_that.currProductTracking.partName = productTracking.partName
|
_that.currProductTracking.productDate = productTracking.date
|
_that.currProductTracking.productQty =
|
productTracking.productQty
|
} else {
|
_that.currProductTracking = {}
|
}
|
// 检测信息
|
const sampleItemList = data.data.sampleItems
|
if (sampleItemList != null && sampleItemList.length > 0) {
|
_that.paramValues = sampleItemList
|
_that.checkItemList = []
|
sampleItemList.forEach((item) => {
|
const reportTypeLabel = _that.reportTypeOptions.find(
|
(el) => {
|
return item.reportType == el.value
|
}
|
)
|
if (reportTypeLabel) {
|
const existCheckItem = _that.checkItemList.find(
|
(checkItem) => {
|
return (
|
reportTypeLabel.label == checkItem.reportTypeLabel
|
)
|
}
|
)
|
if (existCheckItem) {
|
existCheckItem.itemList.push(item)
|
} else {
|
_that.checkItemList.push({
|
reportTypeLabel: reportTypeLabel.label,
|
itemList: [item]
|
})
|
}
|
}
|
})
|
// reportTypeOptions
|
} else {
|
_that.paramValues = []
|
_that.checkItemList = []
|
}
|
_that.currOperateTask = data.data.operationTask
|
if (_that.currOperateTask == null) {
|
_that.currOperateTask = {
|
id: null,
|
technologyName: null,
|
partNo: null,
|
createTime: null,
|
partName: null,
|
moNo: null,
|
optaskNo: null,
|
state: '',
|
remark: '',
|
operationName: null,
|
plannedQuantity: null,
|
completedQuantity: null,
|
unit: null,
|
priority: null,
|
actualFinishDate: null,
|
plannedStartDate: null,
|
plannedFinishDate: null,
|
actualStartDate: null
|
}
|
_that.stepRecordList = []
|
_that.productRecords = []
|
_that.productRecordParamValues = []
|
_that.paramTabs = []
|
} else {
|
// 工步信息
|
console.log('nodeData', nodeData.batchNo)
|
_that.getStepRecords({
|
id: _that.currOperateTask.id,
|
sn: nodeData.batchNo.split('SN号:')[1]
|
})
|
// 工艺参数信息
|
_that.queryTechnologyInfo(_that.currOperateTask.id)
|
// 生产记录
|
const dutyRecordId = data.data.dutyRecordId
|
const outBatchNo = nodeData.batchNo.split('SN号:').length > 1?nodeData.batchNo.split('SN号:')[1]:null
|
_that.getProductRecords(
|
_that.currOperateTask.id,
|
dutyRecordId,
|
outBatchNo
|
)
|
}
|
// 查询模具信息
|
_that.getMouldRecordList(nodeData.batchNo.split('SN号:')[1])
|
} else {
|
_that.currOperateTask = {}
|
}
|
})
|
.catch((error) => {
|
_that.currOperateTask = {}
|
console.log(error)
|
})
|
}
|
})
|
console.log(param.diagram.selection)
|
},
|
// 根据工单id，查询对应的工艺参数信息
|
queryTechnologyInfo(taskId) {
|
getTemplate(taskId).then((response) => {
|
this.paramDatas = response.data.data
|
this.paramTabs = []
|
this.paramTabCurrTemplateIds = []
|
if (this.paramDatas != null && this.paramDatas.length > 0) {
|
for (let i = 0; i < this.paramDatas.length; i++) {
|
const paramData = this.paramDatas[i]
|
this.$set(paramData, 'checked', false)
|
if (this.paramTabs.indexOf(paramData.operationTemplateType) < 0) {
|
this.paramTabs.push(paramData.operationTemplateType)
|
this.paramTabCurrTemplateIds.push({
|
tab: paramData.operationTemplateType,
|
templateId: null
|
})
|
}
|
}
|
if (this.paramTabs.length > 0) {
|
this.activeName = this.paramTabs[0]
|
this.getEveryTabParams(this.paramTabs[0])
|
}
|
}
|
})
|
},
|
// 根据工单id，查询工单下的工步记录
|
getStepRecords(queryParam) {
|
getProductStepBySn(queryParam)
|
.then((response) => {
|
var data = response.data
|
if (data.code === 0) {
|
this.stepRecordList = data.data
|
} else {
|
this.stepRecordList = []
|
}
|
})
|
.catch((error) => {
|
console.log(error)
|
})
|
},
|
// 根据工单id、当班记录id，查询生产记录列表
|
getProductRecords(taskId, dutyRecordId,outBatchNo) {
|
var templateJson = {
|
operationTaskId: taskId,
|
dutyRecordId: dutyRecordId,
|
outBatchNo: outBatchNo
|
}
|
getTemplateRecord(templateJson).then((response) => {
|
if (response.data.code === 0) {
|
this.productRecords = response.data.data
|
} else {
|
this.productRecords = []
|
}
|
})
|
},
|
stepRecordTableHeaderCellStyle({ row, column, rowIndex, columnIndex }) {
|
let headerStyle = 'background:#599ef4;color:#fff;'
|
if (columnIndex === 0) {
|
headerStyle += 'border-radius: 6px 0px 0px 0px;'
|
} else if (columnIndex === 3) {
|
headerStyle += 'border-radius: 0px 6px 0px 0px;'
|
}
|
return headerStyle
|
},
|
stepRecordTableRowClassName({ row, rowIndex }) {
|
if (rowIndex % 2 === 1) {
|
return 'stripe-row'
|
} else {
|
return ''
|
}
|
},
|
handlePreview(file) {
|
window.open(file.url)
|
},
|
// 获取工序参数类型
|
getParamType() {
|
remote('technology_param').then((response) => {
|
if (response.data.code === 0) {
|
this.typeOptions = response.data.data
|
} else {
|
this.typeOptions = []
|
}
|
})
|
},
|
getReportTypeDict() {
|
remote('apply_report_type').then((response) => {
|
if (response.data.code === 0) {
|
this.reportTypeOptions = response.data.data
|
} else {
|
this.reportTypeOptions = []
|
}
|
})
|
},
|
// 表格字段格式化
|
getParam(row, column, cellValue) {
|
for (let i = 0, len = this.typeOptions.length; i < len; i++) {
|
if (cellValue == this.typeOptions[i].value) {
|
return this.typeOptions[i].label
|
}
|
}
|
},
|
// 点击某个生产记录触发
|
handleProductRecordChange(row) {
|
this.productRecordParamValues = []
|
var productRecordJson = {
|
operationTaskRecordId: row.id
|
}
|
getTemplateParam(productRecordJson).then((response) => {
|
if (response.data.code === 0) {
|
this.productRecordParamValues = response.data.data
|
if (response.data.data.length > 0) {
|
const attachments =
|
response.data.data[0].operationTaskAttachmentList
|
// 渲染附件
|
this.productRecordFileList = []
|
if (attachments != null && attachments.length > 0) {
|
let attachment
|
let fileEl
|
for (let i = 0; i < attachments.length; i++) {
|
attachment = attachments[i]
|
fileEl = {}
|
fileEl.name = attachment.original
|
fileEl.url = attachment.url
|
fileEl.id = attachment.id
|
fileEl.fileName = attachment.fileName
|
this.productRecordFileList.push(fileEl)
|
}
|
}
|
}
|
} else {
|
this.productRecordParamValues = []
|
}
|
})
|
},
|
// 响应tab单击事件
|
handleTabClick(tab, event) {
|
this.getEveryTabParams(tab.name)
|
},
|
// 根据tab名称，去获取参数集的集合
|
getEveryTabParams(tabName) {
|
this.currTemplateId = null
|
this.everyTabParams = []
|
this.params = []
|
if (this.paramDatas != null && this.paramDatas.length > 0) {
|
for (let i = 0; i < this.paramDatas.length; i++) {
|
const paramData = this.paramDatas[i]
|
paramData.checked = false
|
if (paramData.operationTemplateType === tabName) {
|
this.everyTabParams.push(paramData)
|
}
|
}
|
if (this.everyTabParams.length > 0) {
|
// 去paramTabCurrTemplateIds查看，当前tabName是否有templateId，若有则取出来，若没有，则找everyTabParams中的第一个元素
|
const paramTabCurrTemplate = this.paramTabCurrTemplateIds.find(
|
(item) => tabName === item.tab
|
)
|
if (paramTabCurrTemplate.templateId != null) {
|
this.currTemplateId = paramTabCurrTemplate.templateId
|
} else {
|
this.currTemplateId = this.everyTabParams[0].id
|
}
|
this.tabParamsClick()
|
}
|
}
|
},
|
// 响应参数集点击事件
|
tabParamsClick() {
|
const paramTabCurrTemplate = this.paramTabCurrTemplateIds.find(
|
(item) => this.activeName === item.tab
|
)
|
paramTabCurrTemplate.templateId =
|
this.currTemplateId === '' ? null : this.currTemplateId
|
this.getParams(this.currTemplateId)
|
},
|
// 根据参数集id，去获取参数的集合
|
getParams(id) {
|
this.params = []
|
const paramData = this.paramDatas.find((item) => id === item.id)
|
if (paramData !== undefined) {
|
this.params = paramData.paramList
|
}
|
},
|
// 切换追溯模式
|
changeTraceType() {
|
console.log('traceType', this.traceType)
|
this.changePart()
|
},
|
paramsTableHeaderStyle({ row, column, rowIndex, columnIndex }) {
|
let headerStyle = 'background:#599ef4;color:#fff;'
|
if (columnIndex === 0) {
|
headerStyle += 'border-radius: 6px 0px 0px 0px;'
|
} else if (columnIndex === 2) {
|
headerStyle += 'border-radius: 0px 6px 0px 0px;'
|
}
|
return headerStyle
|
},
|
tableRowClassName({ row, rowIndex }) {
|
if (rowIndex % 2 === 1) {
|
return 'stripe-row'
|
} else {
|
return ''
|
}
|
},
|
mouldRecordTableHeaderCellStyle({ row, column, rowIndex, columnIndex }) {
|
let headerStyle = 'background:#599ef4;color:#fff;'
|
if (columnIndex === 0) {
|
headerStyle += 'border-radius: 6px 0px 0px 0px;'
|
} else if (columnIndex === 10) {
|
headerStyle += 'border-radius: 0px 6px 0px 0px;'
|
}
|
return headerStyle
|
},
|
// 查询模具信息
|
getMouldRecordList(batchNo) {
|
this.mouldRecordList = []
|
const query = Object.assign({
|
batchNo: batchNo
|
})
|
fetchMoulduserecord(query)
|
.then((response) => {
|
const data = response.data
|
if (data.code === 0) {
|
this.mouldRecordList = data.data.records
|
}
|
})
|
.catch((error) => {
|
console.log(error)
|
})
|
},
|
// 模具状态字段格式化
|
formatStatus(row, column, cellValue) {
|
if (cellValue) {
|
if (cellValue == '01unsubmitted') {
|
return '未提交'
|
} else {
|
return '已提交'
|
}
|
} else {
|
return ''
|
}
|
}
|
}
|
}
|
</script>
|
