修改

src/api/assembling.js

@@ -11,3 +11,30 @@ export function formAssembling(query) {
   })
 }
 
+// 查询装配追溯详情
+export function queryDeviceAss(query) {
+  return request({
+    url: '/nltorderlinelogic/queryByLine',
+    method: 'get',
+    params: query
+  })
+}
+
+// 测试结果信息
+export function queryTestInfo(query) {
+  return request({
+    url: '/NltTestInfo/queryNltTestInfoDetail',
+    method: 'get',
+    params: query
+  })
+}
+
+// 批次详细信息
+export function queryBatch(query) {
+  return request({
+    url: '/nltorderlinelogic/queryRecordByPackage',
+    method: 'get',
+    params: query
+  })
+}
+

src/api/packing.js

@@ -20,3 +20,12 @@ export function exportPacking(query) {
     responseType: 'blob'
   })
 }
+
+// 查询主机追溯详情
+export function queryDetailDevice(query) {
+  return request({
+    url: 'nltorderlinelogic/queryRecordByLineCode',
+    method: 'get',
+    params: query
+  })
+}

src/api/workOrder.js

 // 生产工单－API
 
 import request from '@/utils/request'
+import Qs from 'qs'
 
 // 查询工单列表
 export function listOrder(query) {
@@ -85,3 +86,17 @@ export function clearCache(businessId) {
     method: 'delete'
   })
 }
+
+// 修改配置PO
+export function editPo(data) {
+  const businessId = data.businessId
+  data = Qs.stringify(data)
+  return request({
+    url: '/nltorderlinelogic/update/' + businessId,
+    method: 'put',
+    data,
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    }
+  })
+}

src/views/ProductionProcess/workOrder.vue

@@ -444,6 +444,15 @@
                   <span>{{ scope.row.jobName || '-' }}</span>
                 </template>
               </el-table-column>
+              <el-table-column :show-overflow-tooltip="true" align="center">
+                <template slot="header">
+                  <div>操作</div>
+<!--                  <div>Name</div>-->
+                </template>
+                <template slot-scope="scope">
+                  <el-link type="primary" @click="changePo(scope.row)">修改配置po</el-link>
+                </template>
+              </el-table-column>
             </el-table>
             <pagination
               v-show="total2>0"
@@ -486,6 +495,36 @@
         <el-button class="redBtn" type="danger" @click="OKImport">确定 Confirm</el-button>
       </div>
     </el-dialog>
+    <el-dialog
+      :close-on-click-modal="false"
+      title="修改配置po"
+      class="workOrderDialogImport"
+      :visible.sync="poDialog"
+      width="40%"
+      append-to-body
+    >
+      <el-form ref="formPo" :model="formPo" size="small" :rules="rules1" label-width="auto">
+        <el-form-item class="labelHeight" label="PO编号" prop="batchNo">
+          <div slot="label" class="labelClassRequired">
+            <div class="labelName">po编号</div>
+            <div class="labelName">PO</div>
+          </div>
+          <el-input
+            v-model.trim = "formPo.batchNo"
+            :maxlength="10"
+            show-word-limit
+            placeholder="请输入PO编号"
+            clearable
+            style="width: 100%;"
+            size="small"
+          />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button class="canleBtn" @click="cancelPo">关闭 Close</el-button>
+        <el-button class="redBtn" type="danger" @click="OKPo">确定 Confirm</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -499,7 +538,7 @@ import {
   listOrderMater,
   listStation,
   clearCache,
-  manualImport
+  manualImport, editPo
 } from '@/api/workOrder'
 import moment from 'moment'
 
@@ -513,6 +552,11 @@ export default {
   },
   data() {
     return {
+      // po表单
+      formPo: {
+        batchNo: '',
+        businessId: ''
+      },
       // tabs默认选中
       tabsName: 'bom',
       // 搜索框参数
@@ -522,6 +566,8 @@ export default {
         orderNo: undefined,
         partNo: undefined
       },
+      // po弹窗标志
+      poDialog: false,
       // 遮罩标志
       Loading: true,
       Loading1: true,
@@ -583,6 +629,16 @@ export default {
           { required: true, message: '请输入工单编号', trigger: 'blur' },
           { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
         ]
+      },
+
+      /**
+       *po配置规则
+       */
+      rules1: {
+        batchNo: [
+          { required: true, message: '请输入po编号', trigger: 'blur' },
+          { min: 10, message: '长度在 10个字符', trigger: 'blur' }
+        ]
       }
     }
   },
@@ -843,7 +899,6 @@ export default {
      * 点击标签事件
      */
     tabClickFun(tab) {
-      console.log(tab, 'hhh')
       if (tab.name === 'station') {
         this.getStationTable(this.orderRow)
       } else if (tab.name === 'action') {
@@ -851,6 +906,43 @@ export default {
       } else if (tab.name === 'bom') {
         this.getBomTable()
       }
+    },
+    /**
+     * 修改配置po点击事件
+     */
+    changePo(row) {
+      console.log(row)
+      this.formPo.businessId = row.batchId
+      this.formPo.batchNo = JSON.parse(JSON.stringify(row.batchNo))
+      this.poDialog = true
+    },
+    cancelPo() {
+      this.poDialog = false
+    },
+    OKPo() {
+      this.$refs['formPo'].validate(validPO => {
+        if (validPO) {
+          const po = (this.formPo.batchNo).substr(5,4)
+          const params = {
+            businessId: this.formPo.businessId,
+            batchNo: this.formPo.batchNo,
+            po: po
+          }
+          editPo(params).then(res => {
+            if (res.code === 200) {
+              this.$message.success("操作成功")
+              this.getLineTable()
+              this.formPo.businessId = ''
+              this.formPo.batchNo = ''
+              this.poDialog = false
+            } else {
+              this.$message.error(res.message)
+            }
+          }).catch(err => {
+            this.$message.error(err.message)
+          })
+        }
+      })
     }
   }
 }

src/views/productTraceability/assembling.vue

@@ -34,19 +34,26 @@
             <div slot="label" class="labelClass">
               <div>工单号(Order No.)：</div>
             </div>
-            <span>{{ form.orderNo }}</span>
+            <el-link type="primary" @click="orderDetail">{{ form.orderNo }}</el-link>
           </el-form-item>
           <el-form-item style="padding-left: 50px" label="装配追溯号" prop="lineNo">
             <div slot="label" class="labelClass">
               <div>装配追溯号(Beach Line No.)：</div>
             </div>
-            <span>{{ form.lineNo }}</span>
+            <el-link type="primary" @click="beachLineDetail">{{ form.lineNo }}</el-link>
           </el-form-item>
           <el-form-item style="padding-left: 50px" label="包装追溯号" prop="kits">
             <div slot="label" class="labelClass">
               <div>包装追溯号(Traceability Code for Starter Kit)：</div>
             </div>
-            <span>{{ form.kits }}</span>
+            <el-link v-for="item in form.kits" type="primary" @click="kitsDetail(item)">{{ item.lineCode }}</el-link>
+          </el-form-item>
+          <br/>
+          <el-form-item  label="包装追溯号" prop="productionLine">
+            <div slot="label" class="labelClass">
+              <div>线体信息：</div>
+            </div>
+            <span>{{ form.productionLine }}</span>
           </el-form-item>
         </el-form>
       </div>
@@ -82,58 +89,679 @@
             <span>{{ scope.row.materSn || '-' }}</span>
           </template>
         </el-table-column>
-        <el-table-column :show-overflow-tooltip="true" align="center" prop="packageCodeReal">
+        <el-table-column :show-overflow-tooltip="true" align="center" prop="packageCode">
           <template slot="header">
             <div>批次号</div>
             <div>Batch No.</div>
           </template>
           <template slot-scope="scope">
-            <span>{{ scope.row.packageCodeReal || '-' }}</span>
+            <el-link type="primary" @click="batchDetail(scope.row)">{{ scope.row.packageCode || '-' }}</el-link>
+          </template>
+        </el-table-column>
+        <el-table-column :show-overflow-tooltip="true" align="center" prop="staName">
+          <template slot="header">
+            <div>工站名称</div>
+          </template>
+          <template slot-scope="scope">
+            <span>{{ scope.row.staName || '-' }}</span>
           </template>
         </el-table-column>
         <el-table-column :show-overflow-tooltip="true" align="center" prop="createDate">
           <template slot="header">
-            <div>扫码时间</div>
-            <!--            <div>Batch No.</div>-->
+            <div>扫码/测试时间</div>
+            <div>Scan/Test/Repair Time</div>
           </template>
           <template slot-scope="scope">
             <span>{{ scope.row.createDate || '-' }}</span>
           </template>
         </el-table-column>
-        <el-table-column :show-overflow-tooltip="true" align="center" prop="updateDate">
+        <el-table-column :show-overflow-tooltip="true" align="center" prop="reNum">
           <template slot="header">
-            <div>维修时间</div>
+            <div>维修次数</div>
             <!--            <div>Batch No.</div>-->
           </template>
           <template slot-scope="scope">
-            <span>{{ scope.row.updateDate || '-' }}</span>
+            <span>{{ scope.row.reNum || '-' }}</span>
           </template>
         </el-table-column>
-        <el-table-column :show-overflow-tooltip="true" align="center" prop="repairSn">
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template slot="header">
-            <div>维修SN编码</div>
-            <!--            <div>Batch No.</div>-->
+            <div>维修记录/测试结果</div>
+            <div>Operate</div>
           </template>
           <template slot-scope="scope">
-            <span>{{ scope.row.repairSn || '-' }}</span>
+            <el-link
+              v-if="scope.row.recordList != null"
+              size="mini"
+              type="success"
+              @click="handleDetail(scope.row)"
+            >记录详情</el-link>
+            <el-link
+              v-if="scope.row.testId != null "
+              size="mini"
+              type="danger"
+              style="margin-left: 10px"
+              @click="handlePass(scope.row)"
+            >{{ scope.row.testResult === '1' ? '通过' : '不通过' }}</el-link>
           </template>
         </el-table-column>
       </el-table>
     </div>
+    <!--    详细信息对话框-->
+    <el-dialog
+      :close-on-click-modal="false"
+      title="工单信息"
+      class="orderDialog"
+      :visible.sync="open.orderDialog"
+      width="80%"
+      append-to-body
+      @close="cancel"
+    >
+      <el-form ref="form" :model="orderform" size="small" label-width="120px">
+        <el-row>
+          <el-col :span="8">
+            <el-form-item class="labelHeight" label="工单编号" prop="orderNo">
+              <div slot="label" class="labelClass">
+                <div class="labelName">工单编号</div>
+                <div class="labelName">Order No.</div>
+              </div>
+              <el-input v-model="orderform.orderNo" :disabled="true" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item class="labelHeight" label="成品料号" prop="partNo">
+              <div slot="label" class="labelClass">
+                <div class="labelName">成品料号</div>
+                <div class="labelName">Part No.</div>
+              </div>
+              <el-input v-model="orderform.partNo" :disabled="true" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item class="labelHeight" label="模型类型" prop="modelType1">
+              <div slot="label" class="labelClass">
+                <div class="labelName">模型类型</div>
+                <div class="labelName">Model</div>
+              </div>
+              <el-input v-model="orderform.modelType1" :disabled="true" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item class="labelHeight" label="创建时间" prop="createDate">
+              <div slot="label" class="labelClass">
+                <div class="labelName">创建时间</div>
+                <div class="labelName">Build Time</div>
+              </div>
+              <el-input v-model="orderform.createDate" :disabled="true" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item class="labelHeight" label="计划开工时间" prop="revisedStartDate">
+              <div slot="label" class="labelClass">
+                <div class="labelName">计划开工时间</div>
+                <div class="labelName">Start Time</div>
+              </div>
+              <el-input v-model="orderform.revisedStartDate" :disabled="true" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item class="labelHeight" label="计划完工时间" prop="revisedDueDate">
+              <div slot="label" class="labelClass">
+                <div class="labelName">计划完工时间</div>
+                <div class="labelName">End Time</div>
+              </div>
+              <el-input v-model="orderform.revisedDueDate" :disabled="true" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item class="labelHeight" label="工厂" prop="contract">
+              <div slot="label" class="labelClass">
+                <div class="labelName">工厂</div>
+                <div class="labelName">Factory</div>
+              </div>
+              <el-input v-model="orderform.contract" :disabled="true" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item class="labelHeight" label="工单类型" prop="type">
+              <div slot="label" class="labelClass">
+                <div class="labelName">工单类型</div>
+                <div class="labelName">Order Type</div>
+              </div>
+              <el-input v-model="orderform.type" :disabled="true" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div>
+        <el-tabs v-model="tabsName" shadow="never" type="border-card" class="tabBorder" @tab-click="tabClickFun">
+          <el-tab-pane label="工单Bom" name="bom">
+            <el-table
+              v-loading="Loading1"
+              :data="bomList"
+              border
+            >
+              <el-table-column
+                label="序号"
+                type="index"
+                width="50"
+              />
+              <el-table-column :show-overflow-tooltip="true" align="center" prop="materCode">
+                <template slot="header">
+                  <div>料号</div>
+                  <div>Part No.</div>
+                </template>
+                <template slot-scope="scope">
+                  <span>{{ scope.row.materCode || '-' }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column width="400" :show-overflow-tooltip="true" align="center" prop="materDesc">
+                <template slot="header">
+                  <div>描述</div>
+                  <div>Part Description</div>
+                </template>
+                <template slot-scope="scope">
+                  <span>{{ scope.row.materDesc || '-' }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column :show-overflow-tooltip="true" align="center" prop="materUnit">
+                <template slot="header">
+                  <div>单位</div>
+                  <div>Unit</div>
+                </template>
+                <template slot-scope="scope">
+                  <span>{{ scope.row.materUnit || '-' }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column :show-overflow-tooltip="true" align="center" prop="qtyRequired">
+                <template slot="header">
+                  <div>数量</div>
+                  <div>Qty</div>
+                </template>
+                <template slot-scope="scope">
+                  <span>{{ scope.row.qtyRequired || '-' }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total1>0"
+              :total="total1"
+              :page.sync="rowsBom.page"
+              :limit.sync="rowsBom.rows"
+              @pagination="getBomTable"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="工站信息" name="station">
+            <el-table
+              v-loading="Loading3"
+              :data="stationList"
+              border
+            >
+              <el-table-column
+                type="index"
+                width="60"
+              >
+                <template slot="header">
+                  <div>排序</div>
+                  <div>Sort</div>
+                </template>
+              </el-table-column>
+              <el-table-column :show-overflow-tooltip="true" align="center" prop="staCode">
+                <template slot="header">
+                  <div>工站编号</div>
+                  <div>Position No.</div>
+                </template>
+                <template slot-scope="scope">
+                  <span>{{ scope.row.staCode || '-' }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column :show-overflow-tooltip="true" align="center" prop="staName">
+                <template slot="header">
+                  <div>工站名称</div>
+                  <div>Position Name</div>
+                </template>
+                <template slot-scope="scope">
+                  <span>{{ scope.row.staName || '-' }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column :show-overflow-tooltip="true" align="center" prop="staType">
+                <template slot="header">
+                  <div>工站类型</div>
+                  <div>Position Type</div>
+                </template>
+                <template slot-scope="scope">
+                  <span>{{ scope.row.staType || '-' }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column :show-overflow-tooltip="true" align="center" prop="materCode">
+                <template slot="header">
+                  <div>物料料号</div>
+                  <div>Part No.</div>
+                </template>
+                <template slot-scope="scope">
+                  <span>{{ scope.row.materCode || '-' }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total3>0"
+              :total="total3"
+              :page.sync="rowsStation.page"
+              :limit.sync="rowsStation.rows"
+              @pagination="getStationTable"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="开工信息" name="action">
+            <el-table
+              v-loading="Loading2"
+              :data="lineList"
+              border
+            >
+              <el-table-column
+                type="index"
+                width="60"
+              >
+                <template slot="header">
+                  <div>排序</div>
+                  <div>Sort</div>
+                </template>
+              </el-table-column>
+              <el-table-column :show-overflow-tooltip="true" align="center" prop="lineCode1">
+                <template slot="header">
+                  <div>线别号</div>
+                  <div>Line Beach No.</div>
+                </template>
+                <template slot-scope="scope">
+                  <span>{{ scope.row.lineCode1 || '-' }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column :show-overflow-tooltip="true" align="center" prop="startTime">
+                <template slot="header">
+                  <div>实际开工时间</div>
+                  <div>Real Start Time</div>
+                </template>
+                <template slot-scope="scope">
+                  <span>{{ scope.row.startTime || '-' }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column :show-overflow-tooltip="true" align="center" prop="jobNo">
+                <template slot="header">
+                  <div>工号</div>
+                  <div>B/N</div>
+                </template>
+                <template slot-scope="scope">
+                  <span>{{ scope.row.jobNo || '-' }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column :show-overflow-tooltip="true" align="center" prop="jobName">
+                <template slot="header">
+                  <div>姓名</div>
+                  <div>Name</div>
+                </template>
+                <template slot-scope="scope">
+                  <span>{{ scope.row.jobName || '-' }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total2>0"
+              :total="total2"
+              :page.sync="rowsLine.page"
+              :limit.sync="rowsLine.rows"
+              @pagination="getLineTable"
+            />
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </el-dialog>
+    <el-dialog
+      :close-on-click-modal="false"
+      :title="dialogTitle"
+      class="deviceAndPackingDialog"
+      :visible.sync="open.kitsDialog || open.beachLineDialog || open.batchDetailDialog"
+      width="80%"
+      append-to-body
+      @close="cancel">
+      <el-form ref="form" :model="deviceAndPackingForm" size="small" label-width="120px">
+        <el-row>
+          <el-col :span="8">
+            <el-form-item v-if="open.beachLineDialog" class="labelHeight" label="工单编号" prop="orderNo">
+              <div slot="label" class="labelClass">
+                <div class="labelName">工单编号</div>
+                <div class="labelName">Order No.</div>
+              </div>
+              <el-input v-model="deviceAndPackingForm.orderNo" :disabled="true" />
+            </el-form-item>
+            <el-form-item v-if="open.kitsDialog" class="labelHeight" label="包装线别号" prop="lineCode">
+              <div slot="label" class="labelClass">
+                <div class="labelName">包装线别号</div>
+<!--                <div class="labelName">Order No.</div>-->
+              </div>
+              <el-input v-model="deviceAndPackingForm.lineCode" :disabled="true" />
+            </el-form-item>
+            <el-form-item v-if="open.batchDetailDialog" class="labelHeight" label="物料料号" prop="materCode">
+              <div slot="label" class="labelClass">
+                <div class="labelName">物料料号</div>
+                <!--                <div class="labelName">Order No.</div>-->
+              </div>
+              <el-input v-model="deviceAndPackingForm.materCode" :disabled="true" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item v-if="open.beachLineDialog" class="labelHeight" label="成品料号" prop="partNo">
+              <div slot="label" class="labelClass">
+                <div class="labelName">成品料号</div>
+                <div class="labelName">Part No.</div>
+              </div>
+              <el-input v-model="deviceAndPackingForm.partNo" :disabled="true" />
+            </el-form-item>
+            <el-form-item v-if="open.kitsDialog" class="labelHeight" label="成品料号" prop="partNo">
+              <div slot="label" class="labelClass">
+                <div class="labelName">包装成品料号</div>
+<!--                <div class="labelName">Part No.</div>-->
+              </div>
+              <el-input v-model="deviceAndPackingForm.partNo" :disabled="true" />
+            </el-form-item>
+            <el-form-item v-if="open.batchDetailDialog" class="labelHeight" label="批次号和唯一码" prop="packageCode">
+              <div slot="label" class="labelClass">
+                <div class="labelName">批次号和唯一码</div>
+                <!--                <div class="labelName">Part No.</div>-->
+              </div>
+              <el-input v-model="deviceAndPackingForm.packageCode" :disabled="true" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item v-if="open.beachLineDialog" class="labelHeight" label="生产数量" prop="revisedQtyDue">
+              <div slot="label" class="labelClass">
+                <div class="labelName">生产数量</div>
+                <div class="labelName">Qty</div>
+              </div>
+              <el-input v-model="deviceAndPackingForm.revisedQtyDue" :disabled="true" />
+            </el-form-item>
+            <el-form-item v-if="open.kitsDialog" class="labelHeight" label="生产数量" prop="revisedQtyDue">
+              <div slot="label" class="labelClass">
+                <div class="labelName">生产数量</div>
+<!--                <div class="labelName">Model</div>-->
+              </div>
+              <el-input v-model="deviceAndPackingForm.revisedQtyDue" :disabled="true" />
+            </el-form-item>
+            <el-form-item v-if="open.batchDetailDialog" class="labelHeight" label="数量" prop="sumNum">
+              <div slot="label" class="labelClass">
+                <div class="labelName">数量</div>
+<!--                <div class="labelName">Model</div>-->
+              </div>
+              <el-input v-model="deviceAndPackingForm.sumNum" :disabled="true" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <el-table
+        v-loading="false"
+        :data="batchTableData.slice((currentPage1-1)*pageSize1,currentPage1*pageSize1)"
+        border
+        v-if="open.beachLineDialog || open.kitsDialog"
+      >
+        <el-table-column
+          type="index"
+          width="60"
+        >
+          <template slot="header">
+            <div>序号</div>
+            <div>Sort</div>
+          </template>
+        </el-table-column>
+        <el-table-column :show-overflow-tooltip="true" align="center" prop="materCode">
+          <template slot="header">
+            <div>物料料号</div>
+<!--            <div>Part No.</div>-->
+          </template>
+          <template slot-scope="scope">
+            <span>{{ scope.row.materCode || '-' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column width="400" :show-overflow-tooltip="true" align="center" prop="packageCode">
+          <template slot="header">
+            <div>批次号</div>
+<!--            <div>Part Description</div>-->
+          </template>
+          <template slot-scope="scope">
+            <span>{{ scope.row.packageCode || '-' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :show-overflow-tooltip="true" align="center" prop="consume">
+          <template slot="header">
+            <div>使用数量</div>
+<!--            <div>Unit</div>-->
+          </template>
+          <template slot-scope="scope">
+            <span>{{ scope.row.consume || '0' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :show-overflow-tooltip="true" align="center" prop="scanTime">
+          <template slot="header">
+            <div>扫码时间</div>
+<!--            <div>Qty</div>-->
+          </template>
+          <template slot-scope="scope">
+            <span>{{ scope.row.scanTime || '-' }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination v-if="open.beachLineDialog || open.kitsDialog" align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                     :current-page="currentPage1"
+                     :page-sizes="[10,20,50,100]"
+                     :page-size="pageSize1"
+                     layout="total, sizes, prev, pager, next, jumper"
+                     :total="batchTableData.length">
+      </el-pagination>
+      <el-table
+        v-loading="false"
+        :data="batchDetailData.slice((currentPage1-1)*pageSize1,currentPage1*pageSize1)"
+        border
+        v-if="open.batchDetailDialog"
+      >
+        <el-table-column
+          type="index"
+          width="60"
+        >
+          <template slot="header">
+            <div>序号</div>
+            <div>Sort</div>
+          </template>
+        </el-table-column>
+        <el-table-column :show-overflow-tooltip="true" align="center" prop="orderNo">
+          <template slot="header">
+            <div>工单编号</div>
+<!--            <div>Part No.</div>-->
+          </template>
+          <template slot-scope="scope">
+            <span>{{ scope.row.orderNo || '-' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column width="400" :show-overflow-tooltip="true" align="center" prop="partNo">
+          <template slot="header">
+            <div>成品料号</div>
+<!--            <div>Part Description</div>-->
+          </template>
+          <template slot-scope="scope">
+            <span>{{ scope.row.partNo || '-' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :show-overflow-tooltip="true" align="center" prop="xtCode">
+          <template slot="header">
+            <div>线体号</div>
+<!--            <div>Unit</div>-->
+          </template>
+          <template slot-scope="scope">
+            <span>{{ scope.row.xtCode || '-' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :show-overflow-tooltip="true" align="center" prop="consume">
+          <template slot="header">
+            <div>使用数量</div>
+<!--            <div>Qty</div>-->
+          </template>
+          <template slot-scope="scope">
+            <span>{{ scope.row.consume || '0' }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination v-if="open.batchDetailDialog" align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                     :current-page="currentPage1"
+                     :page-sizes="[10,20,50,100]"
+                     :page-size="pageSize1"
+                     layout="total, sizes, prev, pager, next, jumper"
+                     :total="batchDetailData.length">
+      </el-pagination>
+    </el-dialog>
+    <el-dialog
+      :close-on-click-modal="false"
+      :title="dialogTitle"
+      class="detailAndPassDialog"
+      :visible.sync="open.detailDialog || open.passDialog"
+      width="80%"
+      append-to-body
+      @close="cancel">
+      <el-table
+        v-loading="false"
+        :data="repairDetailsData.slice((currentPage1-1)*pageSize1,currentPage1*pageSize1)"
+        border
+        v-if="open.detailDialog"
+      >
+        <el-table-column
+          type="index"
+          width="60"
+        >
+          <template slot="header">
+            <div>序号</div>
+            <div>Sort</div>
+          </template>
+        </el-table-column>
+        <el-table-column :show-overflow-tooltip="true" align="center" prop="repSn">
+          <template slot="header">
+            <div>替换SN</div>
+            <!--            <div>Part No.</div>-->
+          </template>
+          <template slot-scope="scope">
+            <span>{{ scope.row.repSn || '-' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :show-overflow-tooltip="true" align="center" prop="repPackageCode">
+          <template slot="header">
+            <div>替换SN批次</div>
+            <!--            <div>Part Description</div>-->
+          </template>
+          <template slot-scope="scope">
+            <span>{{ scope.row.repPackageCode || '-' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :show-overflow-tooltip="true" align="center" prop="maintainSn">
+          <template slot="header">
+            <div>维修SN</div>
+            <!--            <div>Unit</div>-->
+          </template>
+          <template slot-scope="scope">
+            <span>{{ scope.row.maintainSn || '-' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :show-overflow-tooltip="true" align="center" prop="mainPackageCode">
+          <template slot="header">
+            <div>维修SN批次</div>
+            <!--            <div>Qty</div>-->
+          </template>
+          <template slot-scope="scope">
+            <span>{{ scope.row.mainPackageCode || '-' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :show-overflow-tooltip="true" align="center" prop="mainDate">
+          <template slot="header">
+            <div>维修时间</div>
+            <!--            <div>Qty</div>-->
+          </template>
+          <template slot-scope="scope">
+            <span>{{ scope.row.mainDate || '-' }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination v-if="open.detailDialog" align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                     :current-page="currentPage1"
+                     :page-sizes="[10,20,50,100]"
+                     :page-size="pageSize1"
+                     layout="total, sizes, prev, pager, next, jumper"
+                     :total="repairDetailsData.length">
+      </el-pagination>
+      <el-table
+        v-loading="false"
+        :data="testInfoTable.slice((currentPage1-1)*pageSize1,currentPage1*pageSize1)"
+        border
+        v-if="open.passDialog"
+      >
+        <el-table-column
+          type="index"
+          width="60"
+        >
+          <template slot="header">
+            <div>序号</div>
+            <div>Sort</div>
+          </template>
+        </el-table-column>
+        <el-table-column :show-overflow-tooltip="true" align="center" prop="key">
+          <template slot="header">
+            <div>参数</div>
+            <!--            <div>Part No.</div>-->
+          </template>
+          <template slot-scope="scope">
+            <span>{{ scope.row.key || '-' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :show-overflow-tooltip="true" align="center" prop="value">
+          <template slot="header">
+            <div>结果</div>
+            <!--            <div>Part Description</div>-->
+          </template>
+          <template slot-scope="scope">
+            <span>{{ scope.row.value || '-' }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination v-if="open.passDialog" align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                     :current-page="currentPage1"
+                     :page-sizes="[10,20,50,100]"
+                     :page-size="pageSize1"
+                     layout="total, sizes, prev, pager, next, jumper"
+                     :total="testInfoTable.length">
+      </el-pagination>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { formAssembling } from '@/api/assembling'
+import { formAssembling, queryBatch, queryDeviceAss, queryTestInfo } from '@/api/assembling'
+import { getOrder, listModelOrder, listOrderLine, listOrderMater, listStation } from '@/api/workOrder'
 
 export default {
   name: 'Assembling',
   data() {
     return {
+      // 维修详情数据
+      repairDetailsData: [],
+      // 对话框标题
+      dialogTitle: '',
       // 搜索框表单数据
       queryParams: {
         materSn: ''
       },
+      // 测试结果详情数据
+      testInfoTable: [],
+      // 弹窗开启标志
+      open: {
+        orderDialog: false,
+        beachLineDialog: false,
+        kitsDialog: false,
+        detailDialog: false,
+        passDialog: false,
+        batchDetailDialog: false
+      },
       // 表格上方表单数据
       form: {},
       // 表格遮罩标志
@@ -145,7 +773,52 @@ export default {
         materSn: [
           { required: true, message: '请输入SN编码', trigger: 'blur' }
         ]
-      }
+      },
+      // 工单详情表单数据
+      orderform: {},
+      // 包装追溯和装配追溯表单数据
+      deviceAndPackingForm: {},
+      // tabs默认选中
+      tabsName: 'bom',
+      // 表格分页总数2
+      total1: 0,
+      total2: 0,
+      total3: 0,
+      // 当前页码
+      currentPage1: 1,
+      // 每页的数据条数
+      pageSize1: 10 ,
+      // 遮罩标志
+      Loading1: true,
+      Loading2: true,
+      Loading3: true,
+      // 详情数据
+      rowsBom: {
+        // 表格页码标志
+        page: 1,
+        rows: 10,
+        businessId: undefined
+      },
+      rowsLine: {
+        page: 1,
+        rows: 10,
+        businessId: undefined
+      },
+      rowsStation: {
+        page: 1,
+        rows: 10,
+        businessId: undefined
+      },
+      // Bom表格数据
+      bomList: [],
+      // 工站表格数据
+      stationList: [],
+      // 开工表格数据
+      lineList: [],
+      // 装配追溯和包装追溯表格数据
+      batchTableData: [],
+      // 批次详情数据
+      batchDetailData: []
     }
   },
   /** 路由离开前存储筛选条件*/
@@ -198,13 +871,188 @@ export default {
       }
       formAssembling(params).then(response => {
         this.form = response.data
-        this.assemblingList = response.data.nltScan
+        this.assemblingList = response.data.retrospectDtoList
         this.Loading = false
       }).catch(() => {
         this.assemblingList = []
         this.form = {}
         this.Loading = false
       })
+    },
+    /**
+     * 记录详情方法
+     */
+    handleDetail(row) {
+      this.open.detailDialog = true
+      this.dialogTitle = '维修记录'
+      this.repairDetailsData = row.recordList
+    },
+    /**
+     * 测试详情方法
+     */
+    handlePass(row) {
+      this.open.passDialog = true
+      this.dialogTitle = '测试参数结果'
+      const params = {
+        businessId: row.testId
+      }
+      queryTestInfo(params).then(res => {
+        this.testInfoTable = res.data
+      })
+    },
+    /**
+     * 批次号点击事件
+     */
+    batchDetail(row) {
+      this.open.batchDetailDialog = true
+      this.dialogTitle = '批次信息'
+      this.deviceAndPackingForm.materCode = row.materCode
+      this.deviceAndPackingForm.packageCode = row.packageCode
+      const params = {
+        packId : row.packId,
+        packageCode: row.batchNumber,
+        uniqueCode: row.niqueCode
+      }
+      queryBatch(params).then(res => {
+        this.deviceAndPackingForm.sumNum = res.data.sumNum
+        this.batchDetailData = res.data.recordList
+      })
+    },
+    /**
+     * 对话框关闭按钮方法
+     */
+    cancel() {
+      this.open.kitsDialog = false
+      this.open.beachLineDialog = false
+      this.open.orderDialog = false
+      this.open.detailDialog = false
+      this.open.passDialog = false
+      this.pageSize1 = 10
+      this.currentPage1 = 1
+      this.orderform = {}
+      this.lineList = []
+      this.stationList = []
+      this.bomList = []
+      this.batchDetailData = []
+      this.testInfoTable = []
+      this.deviceAndPackingForm = {}
+      this.repairDetailsData = []
+      this.batchTableData = []
+      this.tabsName = 'bom'
+      this.rowsBom.page = 1
+      this.rowsStation.page = 1
+      this.rowsLine.page = 1
+    },
+    /**
+     * 工单详情点击事件
+     */
+    orderDetail() {
+      this.open.orderDialog = true
+      this.Loading1 = true
+      getOrder(this.form.orderId).then(response => {
+        const tempData = response.data
+        if (tempData.contract === 'NB') {
+          tempData.contract = '北京'
+        } else if (tempData.contract === 'NOSZ') {
+          tempData.contract = '苏州'
+        } else {
+          tempData.contract = '-'
+        }
+        if (tempData.type === '1') {
+          tempData.type = '装配线'
+        } else if (tempData.type === '2') {
+          tempData.type = '包装线'
+        } else {
+          tempData.type = '-'
+        }
+        this.orderform = tempData
+        this.rowsBom.businessId = this.form.orderId
+        this.rowsLine.businessId = this.form.orderId
+        this.rowsStation.businessId = this.form.orderId
+        this.getBomTable()
+      })
+    },
+    /** 查询工单BOM数据 */
+    getBomTable() {
+      listOrderMater(this.rowsBom).then(response => {
+        this.bomList = response.rows
+        this.total1 = response.total
+        this.Loading1 = false
+      })
+    },
+    /** 查询工单线别数据 */
+    getLineTable() {
+      this.Loading2 = true
+      listOrderLine(this.rowsLine).then(response => {
+        this.lineList = response.rows
+        this.total2 = response.total
+        this.Loading2 = false
+      })
+    },
+    /** 查询工单工站和模型数据 */
+    getStationTable() {
+      this.Loading3 = true
+      listStation(this.rowsStation).then(response => {
+        this.stationList = response.rows
+        this.total3 = response.total
+        this.Loading3 = false
+      })
+    },
+    /**
+     *装配追溯点击事件
+     */
+    beachLineDetail() {
+      this.open.beachLineDialog = true
+      this.dialogTitle = '装配线别号信息'
+      const params = {
+        lineId: this.form.lineId,
+        orderId: this.form.orderId
+      }
+      queryDeviceAss(params).then(res => {
+        this.deviceAndPackingForm = res.data
+        this.batchTableData = res.data.recordList
+      })
+    },
+    /**
+     *包装追溯点击事件
+     */
+    kitsDetail(item) {
+      this.open.kitsDialog = true
+      this.dialogTitle = '包装线别号信息'
+      this.deviceAndPackingForm.lineCode = item.lineCode
+      const params = {
+        lineId: item.businessId,
+        orderId: item.orderId
+      }
+      queryDeviceAss(params).then(res => {
+        this.deviceAndPackingForm.partNo = res.data.partNo
+        this.deviceAndPackingForm.revisedQtyDue = res.data.revisedQtyDue
+        this.batchTableData = res.data.recordList
+      })
+    },
+    /**
+     * 分页方法
+     */
+    //每页条数改变时触发 选择一页显示多少行
+    handleSizeChange(val) {
+      this.currentPage1 = 1;
+      this.pageSize1 = val;
+    },
+    //当前页改变时触发 跳转其他页
+    handleCurrentChange(val) {
+      this.currentPage1 = val;
+    },
+    /**
+     * 点击标签事件
+     */
+    tabClickFun(tab) {
+      if (tab.name === 'station') {
+        this.getStationTable()
+      } else if (tab.name === 'action') {
+        this.getLineTable()
+      } else if (tab.name === 'bom') {
+        this.getBomTable()
+      }
     }
   }
 }
@@ -243,4 +1091,244 @@ export default {
     text-align: center;
   }
 }
+.orderDialog {
+  .el-table th .cell {
+    display: inline-block !important;
+  }
+
+  .el-col-8 {
+    position: relative;
+    right: 20px;
+  }
+
+  .table-drop {
+    vertical-align: 2px;
+    line-height: 20px;
+    margin-left: 15px
+  }
+
+  .labelHeight {
+    .el-form-item__label {
+      height: 60px;
+    }
+
+    .el-form-item__error {
+      top: 73%;
+      line-height: 0;
+    }
+  }
+
+  .el-form-item--small .el-form-item__label {
+    line-height: 17px;
+  }
+
+  .labelName {
+    display: flex;
+    justify-content: end;
+    white-space: nowrap;
+  }
+
+  .labelClass {
+    position: relative;
+    bottom: 1px;
+    text-align: center;
+  }
+
+  .labelClassRequired {
+    text-align: center;
+    position: relative;
+    bottom: 17px;
+    right: 13px;
+  }
+
+  .tabBorder {
+    border: 1px solid #d1d1d1;
+  }
+
+  .el-tabs--border-card {
+    box-shadow: none !important;
+  }
+
+  .el-tabs--border-card > .el-tabs__header {
+    background-color: #f8f8f8;
+  }
+
+  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+    color: #D20A10;
+  }
+
+  .el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
+    color: #D20A10;
+  }
+
+  .el-dialog__headerbtn:hover .el-dialog__close {
+    color: #D20A10;
+  }
+
+  .el-input {
+    [disabled] {
+      background-color: #E9E9E9;
+    }
+  }
+}
+.deviceAndPackingDialog {
+  .el-table th .cell {
+    display: inline-block !important;
+  }
+
+  .el-col-8 {
+    position: relative;
+    right: 20px;
+  }
+
+  .table-drop {
+    vertical-align: 2px;
+    line-height: 20px;
+    margin-left: 15px
+  }
+
+  .labelHeight {
+    .el-form-item__label {
+      height: 60px;
+    }
+
+    .el-form-item__error {
+      top: 73%;
+      line-height: 0;
+    }
+  }
+
+  .el-form-item--small .el-form-item__label {
+    line-height: 17px;
+  }
+
+  .labelName {
+    display: flex;
+    justify-content: end;
+    white-space: nowrap;
+  }
+
+  .labelClass {
+    position: relative;
+    bottom: 1px;
+    text-align: center;
+  }
+
+  .labelClassRequired {
+    text-align: center;
+    position: relative;
+    bottom: 17px;
+    right: 13px;
+  }
+
+  .tabBorder {
+    border: 1px solid #d1d1d1;
+  }
+
+  .el-tabs--border-card {
+    box-shadow: none !important;
+  }
+
+  .el-tabs--border-card > .el-tabs__header {
+    background-color: #f8f8f8;
+  }
+
+  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+    color: #D20A10;
+  }
+
+  .el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
+    color: #D20A10;
+  }
+
+  .el-dialog__headerbtn:hover .el-dialog__close {
+    color: #D20A10;
+  }
+
+  .el-input {
+    [disabled] {
+      background-color: #E9E9E9;
+    }
+  }
+}
+.detailAndPassDialog {
+  .el-table th .cell {
+    display: inline-block !important;
+  }
+
+  .el-col-8 {
+    position: relative;
+    right: 20px;
+  }
+
+  .table-drop {
+    vertical-align: 2px;
+    line-height: 20px;
+    margin-left: 15px
+  }
+
+  .labelHeight {
+    .el-form-item__label {
+      height: 60px;
+    }
+
+    .el-form-item__error {
+      top: 73%;
+      line-height: 0;
+    }
+  }
+
+  .el-form-item--small .el-form-item__label {
+    line-height: 17px;
+  }
+
+  .labelName {
+    display: flex;
+    justify-content: end;
+    white-space: nowrap;
+  }
+
+  .labelClass {
+    position: relative;
+    bottom: 1px;
+    text-align: center;
+  }
+
+  .labelClassRequired {
+    text-align: center;
+    position: relative;
+    bottom: 17px;
+    right: 13px;
+  }
+
+  .tabBorder {
+    border: 1px solid #d1d1d1;
+  }
+
+  .el-tabs--border-card {
+    box-shadow: none !important;
+  }
+
+  .el-tabs--border-card > .el-tabs__header {
+    background-color: #f8f8f8;
+  }
+
+  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+    color: #D20A10;
+  }
+
+  .el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
+    color: #D20A10;
+  }
+
+  .el-dialog__headerbtn:hover .el-dialog__close {
+    color: #D20A10;
+  }
+
+  .el-input {
+    [disabled] {
+      background-color: #E9E9E9;
+    }
+  }
+}
 </style>

src/views/productTraceability/packing.vue

@@ -153,7 +153,7 @@
             <div>Traceability Code for Starter Kit</div>
           </template>
           <template slot-scope="scope">
-            <span>{{ scope.row.lineCode || '-' }}</span>
+            <el-link type="primary" @click="detailPacking">{{ scope.row.lineCode || '-' }}</el-link>
           </template>
         </el-table-column>
         <el-table-column width="250" :show-overflow-tooltip="true" align="center" prop="packageCode">
@@ -162,7 +162,7 @@
             <div>Traceability code for device</div>
           </template>
           <template slot-scope="scope">
-            <span>{{ scope.row.packageCode || '-' }}</span>
+            <el-link type="primary" @click="detailDevice(scope.row)">{{ scope.row.packageCode || '-' }}</el-link>
           </template>
         </el-table-column>
         <el-table-column width="200" :show-overflow-tooltip="true" align="center" prop="createDate">
@@ -185,12 +185,103 @@
         </el-table-column>
       </el-table>
     </div>
+    <el-dialog
+      :close-on-click-modal="false"
+      :title="dialogTitle"
+      class="packingAndDeviceDialog"
+      :visible.sync="open"
+      width="80%"
+      append-to-body
+      @close="cancel">
+      <el-form ref="form" :model="deviceAndPackingForm" size="small" label-width="120px">
+        <el-row>
+          <el-col :span="8">
+            <el-form-item class="labelHeight" label="工单编号" prop="orderNo">
+              <div slot="label" class="labelClass">
+                <div class="labelName">工单编号</div>
+                <div class="labelName">Order No.</div>
+              </div>
+              <el-input v-model="deviceAndPackingForm.orderNo" :disabled="true" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item class="labelHeight" label="成品料号" prop="orderNo">
+              <div slot="label" class="labelClass">
+                <div class="labelName">成品料号</div>
+                <div class="labelName">Part No.</div>
+              </div>
+              <el-input v-model="deviceAndPackingForm.orderNo" :disabled="true" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item class="labelHeight" label="生产数量" prop="orderNo">
+              <div slot="label" class="labelClass">
+                <div class="labelName">生产数量</div>
+                <div class="labelName">Order No.</div>
+              </div>
+              <el-input v-model="deviceAndPackingForm.orderNo" :disabled="true" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <el-table
+        v-loading="false"
+        :data="deviceAndPackingData"
+        border
+      >
+        <el-table-column
+          type="index"
+          width="60"
+        >
+          <template slot="header">
+            <div>序号</div>
+            <div>Sort</div>
+          </template>
+        </el-table-column>
+        <el-table-column :show-overflow-tooltip="true" align="center" prop="materCode">
+          <template slot="header">
+            <div>物料料号</div>
+            <!--            <div>Part No.</div>-->
+          </template>
+          <template slot-scope="scope">
+            <span>{{ scope.row.materCode || '-' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column width="400" :show-overflow-tooltip="true" align="center" prop="materDesc">
+          <template slot="header">
+            <div>批次号</div>
+            <!--            <div>Part Description</div>-->
+          </template>
+          <template slot-scope="scope">
+            <span>{{ scope.row.materDesc || '-' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :show-overflow-tooltip="true" align="center" prop="materUnit">
+          <template slot="header">
+            <div>使用数量</div>
+            <!--            <div>Unit</div>-->
+          </template>
+          <template slot-scope="scope">
+            <span>{{ scope.row.materUnit || '-' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :show-overflow-tooltip="true" align="center" prop="qtyRequired">
+          <template slot="header">
+            <div>扫码时间</div>
+            <!--            <div>Qty</div>-->
+          </template>
+          <template slot-scope="scope">
+            <span>{{ scope.row.qtyRequired || '-' }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import moment from 'moment'
-import { exportPacking, listPacking } from '@/api/packing'
+import { exportPacking, listPacking, queryDetailDevice } from '@/api/packing'
 export default {
   name: 'Packing',
   /** 路由离开前存储筛选条件*/
@@ -224,9 +315,23 @@ export default {
       Loading: false,
       // 包装追溯表格数据
       packingList: [],
+      // 弹窗开启标志
+      open: false,
+      // 弹窗标题
+      dialogTitle: '',
+      // 弹窗表单数据
+      deviceAndPackingForm: {},
+      // 弹窗表格数据
+      deviceAndPackingData: [],
     }
   },
   methods: {
+    /**
+     * 弹窗取消方法
+     */
+    cancel() {
+      this.open = false
+    },
     /**
      * 搜索按钮方法
      */
@@ -288,6 +393,28 @@ export default {
         this.packingList = response.data
         this.Loading = false
       })
+    },
+    /**
+     * 包装追溯详情
+     */
+    detailPacking() {
+      this.open = true
+      this.dialogTitle = '包装追溯号'
+    },
+    /**
+     * 主机追溯详情
+     */
+    detailDevice(row) {
+      this.open = true
+      this.dialogTitle = '主机追溯号'
+      const params = {
+        beginDate: this.queryParams.beginDate,
+        endDate: this.queryParams.endDate,
+        lineCode: row.lineCode
+      }
+      queryDetailDevice(params).then(res => {
+        console.log(res.data)
+      })
     }
   }
 }
@@ -320,4 +447,84 @@ export default {
     margin-left: 15px
   }
 }
+.packingAndDeviceDialog {
+  .el-table th .cell {
+    display: inline-block !important;
+  }
+
+  .el-col-8 {
+    position: relative;
+    right: 20px;
+  }
+
+  .table-drop {
+    vertical-align: 2px;
+    line-height: 20px;
+    margin-left: 15px
+  }
+
+  .labelHeight {
+    .el-form-item__label {
+      height: 60px;
+    }
+
+    .el-form-item__error {
+      top: 73%;
+      line-height: 0;
+    }
+  }
+
+  .el-form-item--small .el-form-item__label {
+    line-height: 17px;
+  }
+
+  .labelName {
+    display: flex;
+    justify-content: end;
+    white-space: nowrap;
+  }
+
+  .labelClass {
+    position: relative;
+    bottom: 1px;
+    text-align: center;
+  }
+
+  .labelClassRequired {
+    text-align: center;
+    position: relative;
+    bottom: 17px;
+    right: 13px;
+  }
+
+  .tabBorder {
+    border: 1px solid #d1d1d1;
+  }
+
+  .el-tabs--border-card {
+    box-shadow: none !important;
+  }
+
+  .el-tabs--border-card > .el-tabs__header {
+    background-color: #f8f8f8;
+  }
+
+  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+    color: #D20A10;
+  }
+
+  .el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
+    color: #D20A10;
+  }
+
+  .el-dialog__headerbtn:hover .el-dialog__close {
+    color: #D20A10;
+  }
+
+  .el-input {
+    [disabled] {
+      background-color: #E9E9E9;
+    }
+  }
+}
 </style>