HwJyHbMes/hw-ui/src/views/board/firstFloor/index.vue

<template>
  <div class="app-container">
    <div class="headTitle">京源环保生产管理系统</div>

    <div class="chartBox chartBox1">
      <div class="title">生产派工</div>
      <div class="chart">
        <div class="whiteTable">
          <el-table
            :cell-style="{textAlign:'center'}"
            :data="tableData"
            :header-cell-style="{textAlign:'center'}"
            :max-height="19.13 * vw"
            style="width: 100%"
            ref="planTable"
            highlight-current-row
            @current-change="getDetail"
          >
            <el-table-column
              label="序号"
              type="index"
              width="50"
            >
            </el-table-column>
            <el-table-column
              label="任务编号"
              prop="dispatchCode"
            >
            </el-table-column>
            <el-table-column
              label="派工单号"
              prop="planCode"
            >
            </el-table-column>
            <el-table-column
              label="成品名称"
              prop="materialName"
              width="100"
            >
            </el-table-column>
            <el-table-column
              label="成品规格"
              prop="materialSpec"
              width="100"
            >
            </el-table-column>
            <el-table-column
              label="计划"
              prop="planAmount"
              width="100"
            >
            </el-table-column>
            <el-table-column
              label="实际"
              prop="completeAmount"
              width="100"
            >
            </el-table-column>
            <el-table-column
              label="差异"
              prop="difference"
              width="100"
            >
              <template slot-scope="scope">
                {{ scope.row.planAmount - scope.row.completeAmount }}
              </template>
            </el-table-column>
            <el-table-column
              label="交付时间"
              prop="planDeliveryDate"
              width="150"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              width="120"
            >
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="text"
                  @click="handleViewSOP(scope.row)"
                >
                  SOP预览
                </el-button>

                <!--el-button
                  size="small"
                  type="text"
                  @click="getDetail(scope.row)"
                >
                  明细
                </el-button-->
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div>
      <div class="roundBorder" style="top: 32%;left: 1.2%;">
        <el-button :disabled="nowNum1 <= 1" circle icon="el-icon-back" size="mini" @click="pre1"></el-button>
      </div>
      <div class="roundBorder" style="top: 32%;left: 49%;">
        <el-button :disabled="nowNum1 >= totalNum1" circle icon="el-icon-right" size="mini" @click="next1"></el-button>
      </div>
    </div>

    <div class="chartBox chartBox2">
      <div class="title">物料安装情况(已完成)</div>
      <div class="chart">
        <div class="whiteTable">
          <el-table
            :cell-style="{textAlign:'center'}"
            :data="tableData2"
            :header-cell-style="{textAlign:'center'}"
            :max-height="19.13 * vw"
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              type="index"
              width="50"
            >
            </el-table-column>
            <el-table-column
              label="物料编码"
              prop="materialCode"
            >
            </el-table-column>
            <el-table-column
              label="物料名称"
              prop="materialName"
            >
            </el-table-column>
            <el-table-column
              label="完成数量"
              prop="checkAmount"
              width="100"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div>
      <div class="roundBorder" style="top: 32%;left: 51%;">
        <el-button :disabled="nowNum2 <= 1" circle icon="el-icon-back" size="mini" @click="pre2"></el-button>
      </div>
      <div class="roundBorder" style="top: 32%;left: 98.8%;">
        <el-button :disabled="nowNum2 >= totalNum2" circle icon="el-icon-right" size="mini" @click="next2"></el-button>
      </div>
    </div>

    <div class="chartBox chartBox3">
      <div class="title">生产明细</div>
      <div class="chart">
        <div class="whiteTable">
          <el-table
            @current-change="getMaterialInstall"
            :cell-style="{textAlign:'center'}"
            :data="tableData1"
            :header-cell-style="{textAlign:'center'}"
            :max-height="19.13 * vw"
            style="width: 100%"
            ref="table"
            highlight-current-row
          >
            <el-table-column
              label="序号"
              type="index"
              width="50"
            >
            </el-table-column>
            <el-table-column
              label="派工单号"
              prop="planCode"
              width="80"
            >
            </el-table-column>
            <el-table-column
              label="明细编号"
              prop="planDetailCode"
            >
            </el-table-column>
            <el-table-column
              label="开始时间"
              prop="realBeginTime"
              width="150"
            >
            </el-table-column>
            <el-table-column
              label="结束时间"
              prop="realEndTime"
              width="150"
            >
            </el-table-column>
            <el-table-column
              label="状态"
              prop="createTime"
              width="80"
            >
              <template slot-scope="scope">
                <dict-tag :options="dict.type.mes_plan_detail_status" :value="scope.row.planDetailStatus"/>
              </template>

            </el-table-column>
            <el-table-column
              label="操作"
              width="160"
            >
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.planDetailStatus !== '3' && scope.row.planDetailStatus !== '9'"
                  size="small"
                  type="text"
                  :loading="submitLoading"
                  @click="planExecute(scope.row)"
                >
                  {{ scope.row.planDetailStatus === '1' ? '开始' : '完成' }}
                </el-button>

                <el-button
                  size="small"
                  type="text"
                  @click="submitProductPlanDetailPause(scope.row)"
                  :loading="submitLoading"
                  v-if="scope.row.planDetailStatus === PLAN_DETAIL_STATUS.STARTED"
                >
                  暂停
                </el-button>

                <el-button
                  size="small"
                  type="text"
                  @click="submitProductPlanDetailContinue(scope.row)"
                  :loading="submitLoading"
                  v-if="scope.row.planDetailStatus === PLAN_DETAIL_STATUS.PAUSE"
                >
                  继续
                </el-button>

                <el-button
                  v-if="scope.row.planDetailStatus ===  PLAN_DETAIL_STATUS.STARTED" size="small"
                  type="text"
                  @click="getMaterials(scope.row) "
                >
                  领料
                </el-button>
                <el-button
                  v-if="scope.row.planDetailStatus ===  PLAN_DETAIL_STATUS.STARTED"
                  size="small"
                  type="text"
                  @click="handleMaterialConfirmForm(scope)"
                >
                  扫描
                </el-button>
                <el-button
                  size="small"
                  type="text"
                  @click="handleApplyRawReturn(scope.row)"
                  v-if="scope.row.planDetailStatus !== PLAN_DETAIL_STATUS.TO_START"
                >
                  退库
                </el-button>
                <el-button
                  size="small"
                  type="text"
                  @click="print(scope.row)"
                  v-if="(scope.row.planDetailStatus === PLAN_DETAIL_STATUS.FINISHED || scope.row.planDetailStatus === PLAN_DETAIL_STATUS.ABNORMAL_FINISHED)
                         && finalProcessFlag ==='1'"
                >
                  条码
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div>
      <div class="roundBorder" style="top: 72%;left: 1.2%;">
        <el-button :disabled="nowNum3 <= 1" circle icon="el-icon-back" size="mini" @click="pre3"></el-button>
      </div>
      <div class="roundBorder" style="top: 72%;left: 49%;">
        <el-button :disabled="nowNum3 >= totalNum3" circle icon="el-icon-right" size="mini" @click="next3"></el-button>
      </div>
    </div>

    <div class="chartBox chartBox4">
      <div class="title">物料安装情况(未完成)</div>
      <div class="chart">
        <div class="whiteTable">
          <el-table
            :cell-style="{textAlign:'center'}"
            :data="tableData3"
            :header-cell-style="{textAlign:'center'}"
            :max-height="19.13 * vw"
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              type="index"
              width="50"
            >
            </el-table-column>
            <el-table-column
              label="物料编码"
              prop="materialCode"
            >
            </el-table-column>
            <el-table-column
              label="物料名称"
              prop="materialName"
            >
            </el-table-column>
            <el-table-column
              label="差异值"
              prop="needAmount"
              width="100"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div>
      <div class="roundBorder" style="top: 72%;left: 51%;">
        <el-button :disabled="nowNum4 <= 1" circle icon="el-icon-back" size="mini" @click="pre4"></el-button>
      </div>
      <div class="roundBorder" style="top: 72%;left: 98.8%;">
        <el-button :disabled="nowNum4 >= totalNum4" circle icon="el-icon-right" size="mini" @click="next4"></el-button>
      </div>
    </div>

    <div class="bottom">
      <el-row>
        <el-button type="primary">首页</el-button>
        <el-button type="success" @click="handleProductInstock">成品入库</el-button>
        <el-button type="danger" @click="logout">退出</el-button>
      </el-row>
    </div>

    <!-- 申请领料信息对话框 -->
    <el-dialog title="申请领料" :visible.sync="dialogVisible" append-to-body>
      <apply-raw-outstock ref="applyRawOutstockRef" :defineData="productPlanData"
                          v-if="dialogVisible"></apply-raw-outstock>
    </el-dialog>

    <el-dialog :visible.sync="printModel" class="dialog" title="条码打印" width="80%">
      <div style="height: auto;">
        <PrintPage :defineData="PrintData" v-if="printModel"/>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="printModel = false">关闭</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="productInstockVisible"
      title="成品入库"
      width="40%">
      <el-form ref="productInstockForm" :model="productInstockForm" :rules="productInstockRules" label-width="80px">
        <el-form-item label="成品条码" prop="materialBarcode">
          <el-input v-model="productInstockForm.materialBarcode" suffix-icon="el-icon-full-screen"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitProductInstock">确 定</el-button>
        <el-button @click="cancelProductInstock">取 消</el-button>
      </div>
    </el-dialog>


    <el-dialog
      :visible.sync="materialConfirmVisible"
      title="确认物料使用"
      width="40%">
      <el-form ref="materialConfirmForm" :model="materialConfirmForm" :rules="materialConfirmRules" label-width="80px">
        <el-form-item v-if="false" label="计划ID" prop="planId">
          <el-input v-model="materialConfirmForm.planId"></el-input>
        </el-form-item>
        <el-form-item v-if="false" label="明细ID" prop="planDetailId">
          <el-input v-model="materialConfirmForm.planDetailId"></el-input>
        </el-form-item>
        <el-form-item label="明细编号" prop="planDetailCode">
          <el-input v-model="materialConfirmForm.planDetailCode" disabled></el-input>
        </el-form-item>
        <el-form-item label="物料条码" prop="materialBarcode">
          <el-input v-model="materialConfirmForm.materialBarcode" suffix-icon="el-icon-full-screen"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="checkAmount">
          <el-input v-model="materialConfirmForm.checkAmount" disabled></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitMaterialConfirm">确 定</el-button>
        <el-button @click="cancelMaterialConfirm">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="returnModelVisible" title="申请退库" width="400">
      <el-form ref="returnModelForm" :model="returnModelForm" label-width="80px" :rules="returnModelFormRules">
        <el-form-item label="计划编号">
          <el-input v-model="returnModelForm.planCode" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="明细编号">
          <el-input v-model="returnModelForm.planDetailCode" autocomplete="off" disabled></el-input>
        </el-form-item>
        <!--el-form-item label="成品">
          <el-input v-model="returnModelForm.materialName" autocomplete="off" disabled></el-input>
        </el-form-item-->
        <el-form-item label="物料条码">
          <el-input placeholder="请扫描或输入物料条码" v-model="returnModelForm.materialBarcode"
                    suffix-icon="el-icon-full-screen">
          </el-input>
        </el-form-item>
        <el-form-item label="仓库">
          <el-select v-model="returnModelForm.warehouseId" placeholder="请选择仓库"
                     style="width: 260px">
            <el-option :label="i.label" :key="i.value" :value="i.value" v-for="i in WarehousesList"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量" prop="planAmount">
          <el-input-number v-model="returnModelForm.planAmount" controls-position="right" :min="1"
                           style="width: 260px"></el-input-number>
        </el-form-item>
        <el-form-item label="退库类型" prop="taskType">
          <el-select v-model="returnModelForm.taskType" placeholder="请选择退库类型" style="width: 260px">
            <el-option :label="i.label" :key="i.value" :value="i.value"
                       v-for="i in dict.type.wms_raw_return_task_type"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请原因">
          <el-input type="textarea" v-model="returnModelForm.applyReason" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="returnModelVisible = false">取 消</el-button>
          <el-button type="primary" @click="returnModelConfirm">退 库</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


    <!-- 申请退库信息对话框 -->
    <el-dialog :title="applyRawReturnTitle" :visible.sync="applyRawReturnVisible" append-to-body>
      <apply-raw-return ref="applyRawReturnRef" :defineData="productPlanData"
                        v-if="applyRawReturnVisible"></apply-raw-return>
    </el-dialog>


    <div id="workshopNotice">
      <WorkshopNotice :visible.sync="showTableDialog" :noticeListData="noticeListData"></WorkshopNotice>
    </div>

    <div id="viewFile">
      <ViewFile :showFileDialog.sync="showFileDialog" :fileListData="fileListData" :thisTitle="thisTitle"></ViewFile>
    </div>
  </div>
</template>

<script>
import Chart from '@/components/board/Chart'
import PrintPage from '@/views/board/barcode/workshopBarcode'
import {monitorSerialData} from "@/utils/serial"
import WorkshopNotice from "@/components/workshopNotice/index.vue";
import {noticeData} from "@/utils/notice"
import * as echarts from 'echarts'
import {
  getWarehouses,
  getProductPlans,
  insertProductPlanDetails,
  getProductPlanDetails,
  startProductPlanDetail,
  completeProductPlanDetail,
  firstFloorProduceInstock,
  scanMaterial2Confirm,
  selectMaterialInstallationCircumstance,
  productPlanDetailPause,productPlanDetailContinue
} from '@/api/board'
import {getToken} from "@/utils/auth";
import applyRawOutstock from "@/views/board/common/applyRawOutstock.vue";
import applyRawReturn from '@//views/board/common/applyRawReturn.vue';
import {getNowDateTime} from "@/utils/ruoyi";
import ViewFile from "@/components/viewFile/index.vue";
import {getDispatchSOPAttachList} from "@/api/mes/productplan";

const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default {
  name: 'Board1',
  dicts: ['mes_plan_detail_status', 'wms_raw_return_task_type', "mes_safe_flag"],
  provide(){
    return{
      closeDialog : this.closeDialog,
      closeRawReturnDialog:this.closeRawReturnDialog
    }
  },
  components: {
    'apply-raw-outstock': applyRawOutstock,
    'apply-raw-return': applyRawReturn,
    Chart,
    PrintPage,
    WorkshopNotice,
    ViewFile
  },
  mixins: [monitorSerialData, noticeData],
  data() {
    return {
      info: {},
      fileList: [],
      SOPModel: false,
      pictureDetailModel: false,
      dialogImageUrl: '',
      returnModelVisible: false,
      returnModelForm: {},
      WarehousesList: [],
      PrintData: {},
      printModel: false,
      nowNum1: 1,
      totalNum1: 0,
      nowNum2: 1,
      totalNum2: 0,
      nowNum3: 1,
      totalNum3: 0,
      nowNum4: 1,
      totalNum4: 0,
      productId:null,
      materialBomId: null,
      planId: null,
      nowMaterial: null,
      finalProcessFlag:null,
      vw: (document.documentElement.clientWidth || document.body.clientWidth) / 100,
      searchMaterialValue: '',
      warehouseList: [],
      form: {},
      dialogVisible: false,
      applyRawReturnVisible:false,
      applyRawReturnTitle: '',
      tableData: [],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      submitLoading:false,
      productInstockVisible: false,
      productInstockForm: {
        materialBarcode: null
      },
      productInstockRules: {
        materialBarcode: [
          {required: true, message: "成品条码不能为空", trigger: "blur"}
        ],
      },

      materialConfirmVisible: false,
      materialConfirmForm: {
        materialBarcode: null,
        planId: null,
        planDetailId: null,
        planDetailCode: null,
        checkAmount: 1
      },
      materialConfirmRules: {
        materialBarcode: [
          {required: true, message: "物料条码不能为空", trigger: "blur"}
        ],
        checkAmount: [
          {required: true, message: "数量不能为空", trigger: "blur"}
        ],
      },
      returnModelFormRules: {
        taskType: [
          {required: true, message: '请选择退库类型', trigger: 'change'}
        ],
        planAmount: [
          {required: true, message: '请输入数量', trigger: 'change'}
        ],
      },
      headers: {
        Authorization: "Bearer " + getToken(),
      },

      PLAN_DETAIL_STATUS: {
        TO_START: '1',
        STARTED: '2',
        FINISHED: '3',
        PAUSE:'4',
        ABNORMAL_FINISHED: '9'
      },

      productPlanData: {},

      reloadFlag: "0",
      //显示预览文件
      showFileDialog: false,
      //显示预览文件标题
      thisTitle: "查看SOP附件",
      //预览文件数据列表
      fileListData: [],
    }
  },
  mounted() {
    this.firstConnectSerial();
    // setInterval(() => {
    //   this.$notify.info({
    //     title: '通知',
    //     message: '通知公告',
    //     position: 'bottom-right',
    //     duration: 0
    //   });
    // }, 60 * 1000)
    getProductPlans({pageNum: 1, pageSize: 5}).then(async e => {
      this.tableData = e.rows
      this.totalNum1 = Math.ceil(e.total / 5)
      this.$refs.planTable.setCurrentRow(e.rows?.[0]);

      let queryRow = {
        pageNum: 1,
        pageSize: 5,
        planId: e.rows?.[0]?.planId,
        materialName: e.rows?.[0]?.materialName,
        materialBomId: e.rows?.[0]?.materialBomId,
        saleOrderId: e.rows?.[0]?.saleOrderId,
        saleType: e.rows?.[0]?.saleType
      }

      await this.getDetail(queryRow);

    })
  },
  methods: {

    async logout() {
      this.$confirm('确定退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/login?isStationId=true';
        })
      }).catch(() => {
      });
    },
    next1() {
      this.nowNum1 += 1
      getProductPlans({pageNum: this.nowNum1, pageSize: 5}).then(e => {
        this.tableData = e.rows
        this.totalNum1 = Math.ceil(e.total / 5)
      })
    },
    pre1() {
      this.nowNum1 -= 1
      getProductPlans({pageNum: this.nowNum1, pageSize: 5}).then(e => {
        this.tableData = e.rows
        this.totalNum1 = Math.ceil(e.total / 5)
      })
    },
    next2() {
      this.nowNum2 += 1
      selectMaterialInstallationCircumstance({
        installType: 1,
        planDetailId: this.info.planDetailId,
        pageNum: this.nowNum2,
        pageSize: 5
      }).then(v => {
        this.tableData2 = v.rows
        this.totalNum2 = Math.ceil(v.total / 5)
      })
    },
    pre2() {
      this.nowNum2 -= 1
      selectMaterialInstallationCircumstance({
        installType: 1,
        planDetailId: this.info.planDetailId,
        pageNum: this.nowNum2,
        pageSize: 5
      }).then(v => {
        this.tableData2 = v.rows
        this.totalNum2 = Math.ceil(v.total / 5)
      })
    },
    next3() {
      this.nowNum3 += 1
      getProductPlanDetails({pageNum: this.nowNum3, pageSize: 5, planId: this.planId}).then(res => {
        this.tableData1 = res.rows
        this.totalNum3 = Math.ceil(res.total / 5)
      })
    },
    pre3() {
      this.nowNum3 -= 1
      getProductPlanDetails({pageNum: this.nowNum3, pageSize: 5, planId: this.planId}).then(res => {
        this.tableData1 = res.rows
        this.totalNum3 = Math.ceil(res.total / 5)
      })
    },
    next4() {
      this.nowNum4 += 1
      selectMaterialInstallationCircumstance({
        installType: 2,
        productId:this.productId,
        materialBomId: this.materialBomId,
        planDetailId: this.info.planDetailId,
        pageNum: this.nowNum4,
        pageSize: 5
      }).then(v => {
        this.tableData3 = v.rows
        this.totalNum4 = Math.ceil(v.total / 5)
      })
    },
    pre4() {
      this.nowNum4 -= 1
      selectMaterialInstallationCircumstance({
        installType: 2,
        productId:this.productId,
        materialBomId: this.materialBomId,
        planDetailId: this.info.planDetailId,
        pageNum: this.nowNum4,
        pageSize: 5
      }).then(v => {
        this.tableData3 = v.rows
        this.totalNum4 = Math.ceil(v.total / 5)
      })
    },
    // 开始/继续计划
    planExecute(e) {
      if (e.planDetailStatus === '1') {
        this.submitLoading = true;
        this.$confirm('是否开始生产明细', '确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          startProductPlanDetail({
            planDetailId: e.planDetailId
          })
            .then(() => {
              this.$modal.msgSuccess("开始成功");
              e.realBeginTime = getNowDateTime();
              e.planDetailStatus = this.PLAN_DETAIL_STATUS.STARTED;
            })
        })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          }).finally(e => {
          this.submitLoading = false;
        });
      }
      if (e.planDetailStatus === '2') {
        this.submitLoading = true;
        this.$confirm('是否完成生产明细', '确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          completeProductPlanDetail({
            planDetailId: e.planDetailId
          })
            .then(() => {
              this.$modal.msgSuccess("完成成功");
              e.realEndTime = getNowDateTime();
              e.planDetailStatus = this.PLAN_DETAIL_STATUS.FINISHED;
              let currentProductPlan = this.tableData.filter(item => item.planId === e.planId)
              currentProductPlan[0].completeAmount += 1;
            })
        })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          }).finally(e => {
          this.submitLoading = false;
        });
      }
    },
    // 生成/获取明细
    async getDetail(row) {
      if (this.reloadFlag !== "1" && this.planId === row.planId) {
        return;
      }
      this.reloadFlag = "0";
      this.planId = row.planId
      this.productId = row.materialId;
      this.materialBomId = row.materialBomId
      this.nowMaterial = row.materialName
      this.saleOrderId = row.saleOrderId
      this.saleType = row.saleType
      this.finalProcessFlag = row.finalProcessFlag

      await getProductPlanDetails({pageNum: 1, pageSize: 5, planId: row.planId}).then(res => {
        if (res.rows.length === 0) {
          insertProductPlanDetails({
            "planId": row.planId,
          }).then(val => {
            getProductPlanDetails({pageNum: 1, pageSize: 5, planId: row.planId}).then(res => {
              this.tableData1 = res.rows
              this.totalNum3 = Math.ceil(res.total / 5)
              this.$refs.table.setCurrentRow(res.rows[0]);
            })
          })

        } else {
          this.tableData1 = res.rows
          this.$refs.table.setCurrentRow(res.rows[0]);
          this.totalNum3 = Math.ceil(res.total / 5)
        }

      })
    },


    async getMaterialInstall(e) {
      this.info = e
      this.nowNum2 = 1
      this.nowNum4 = 1
      const table1 = await selectMaterialInstallationCircumstance({
        installType: 1,
        planDetailId: e.planDetailId,
        pageNum: this.nowNum2,
        pageSize: 5
      })
      const table2 = await selectMaterialInstallationCircumstance({
        installType: 2,
        materialBomId: this.materialBomId,
        planDetailId: e.planDetailId,
        pageNum: this.nowNum4,
        pageSize: 5
      })
      this.tableData2 = table1.rows
      this.tableData3 = table2.rows
      this.totalNum2 = Math.ceil(table1.total / 5)
      this.totalNum4 = Math.ceil(table2.total / 5)
    },


    // 领料页面
    getMaterials(val) {
      this.dialogVisible = true
      this.productPlanData = {
        warehouseId: '',
        planId: val.planId,
        planCode: val.planCode,
        dispatchCode: val.dispatchCode,
        planDetailCode: val.planDetailCode,
        saleOrderId: val.saleOrderId,
        productId: this.productId,
        materialBomId: this.materialBomId,
        maxPlanAmount: 100000000,
        returnFlag: "0",
        applyReason: '',
        taskType: "1",
        warehouseFloor: 1,
        wmsRawOutstockDetailList: []
      }
    },

    print(val) {
      this.PrintData = val
      this.PrintData.barcodeType = '3';//成品码
      this.printModel = true
    },

    // 表单重置
    resetProductInstock() {
      this.productInstockForm = {
        materialBarcode: null
      };
      this.resetForm("productInstockForm");
    },

    /** 成品入库按钮操作 */
    handleProductInstock() {
      this.resetProductInstock();
      this.productInstockVisible = true;

      if (!this.checkSerialConnected()) {
        this.$confirm('请连接条码枪', '提示', {
          confirmButtonText: '连接',
          showClose: true,
          showCancelButton: true,
          type: 'warning'
        }).then(() => {
          console.log("dddd")
          this.connectSerial(this.setSerialData);
        }).catch(() => {
        });
      }
    },


    submitProductInstock() {
      this.$refs["productInstockForm"].validate(valid => {
        if (valid) {
          firstFloorProduceInstock(this.productInstockForm).then(response => {
            this.$modal.msgSuccess("入库成功");
            this.cancelProductInstock();
          });
        }
      });
    },

    cancelProductInstock() {
      this.productInstockVisible = false;
      this.resetProductInstock();
    },


    // 表单重置
    resetMaterialConfirm() {
      this.materialConfirmForm = {
        materialBarcode: null,
        planId: null,
        planDetailId: null,
        planDetailCode: null,
        checkAmount: 1
      };
      this.resetForm("materialConfirmForm");
    },

    /** 扫描确认按钮操作 */
    handleMaterialConfirmForm(scope) {
      this.materialConfirmForm = {
        materialBarcode: null,
        planId: scope.row.planId,
        planDetailId: scope.row.planDetailId,
        planDetailCode: scope.row.planDetailCode,
        checkAmount: 1
      };
      this.materialConfirmVisible = true;

      if (!this.checkSerialConnected()) {
        this.$confirm('请连接条码枪', '提示', {
          confirmButtonText: '连接',
          showClose: true,
          showCancelButton: true,
          type: 'warning'
        }).then(() => {
          console.log("dddd")
          this.connectSerial(this.setSerialData);
        }).catch(() => {
        });
      }

    },


    submitMaterialConfirm() {
      this.$refs["materialConfirmForm"].validate(valid => {
        if (valid) {
          scanMaterial2Confirm(this.materialConfirmForm).then(response => {
            this.$modal.msgSuccess("确认成功");
            this.cancelMaterialConfirm();
          });
        }
      });
    },

    cancelMaterialConfirm() {
      this.materialConfirmVisible = false;
      this.resetMaterialConfirm();
    },
    returnMaterial(e) {
      this.returnModelVisible = true
      this.returnModelForm = {materialName: this.nowMaterial, ...e.row}
      this.setReturnModelForm();

      if (!this.checkSerialConnected()) {
        this.$confirm('请连接条码枪', '提示', {
          confirmButtonText: '连接',
          showClose: true,
          // beforeClose:async(action,instance,done)=>{
          //   if(action==='confirm'){
          //   }else{
          //     this.connectSerialPort();
          //   }
          //
          // },
          showCancelButton: true,
          type: 'warning'
        }).then(() => {
          console.log("dddd")
          this.connectSerial(this.setSerialData);
        }).catch(() => {
        });
      }

    },
    setReturnModelForm() {
      getWarehouses({
        warehouseFloor: 1,
        materialBarcode: this.returnModelForm.materialBarcode
      }).then(e => {
        this.WarehousesList = e.data.map(v => {
          return {
            label: v.warehouseName,
            value: v.warehouseId,
          }
        })

        this.returnModelForm.warehouseId = e.data[0]?.warehouseId

      })
    },
    returnModelConfirm() {
      this.$refs.returnModelForm.validate((valid) => {
        if (valid) {
          let data = [this.returnModelForm]
          applyRawReturn(data).then(v => {
            if (v.code === 200) {
              this.$message({
                message: '退库成功',
                type: 'success'
              });
            }
            this.returnModelVisible = false
          })
        } else {
          return false;
        }
      });
    },

    /** SOP预览*/
    handleViewSOP(e){
      this.fileListData = [];
      getDispatchSOPAttachList(e.dispatchCode, e.processId).then(res => {
        let attachList = res.data;
        let thisFileList = [];
        attachList.forEach(e => {
          let previewFile = {};
          previewFile.url = e.attachPath;
          previewFile.name = e.attachName;
          thisFileList.push(previewFile);
        })
        console.log("thisFileList：", thisFileList)
        if (thisFileList.length > 0){
          this.fileListData = thisFileList;
          this.showFileDialog = true;
        } else {
          this.$modal.msgWarning("此派工派工单号无SOP附件！");
        }
      })
    },


    firstConnectSerial() {
      if (!this.checkSerialConnected()) {
        this.$confirm('请连接条码枪', '提示', {
          confirmButtonText: '连接',
          showClose: true,
          showCancelButton: true,
          type: 'warning'
        }).then(() => {
          this.connectSerial(this.setSerialData);
        }).catch(() => {
        });
      }
    },


    setSerialData() {
      if (this.productInstockVisible) {
        this.productInstockForm.materialBarcode = this.serialData;
      } else if (this.returnModelVisible) {
        this.returnModelForm.materialBarcode = this.serialData;
      } else if (this.materialConfirmVisible) {
        this.materialConfirmForm.materialBarcode = this.serialData;
      }
      // console.log(this.serialData)
    },

    closeDialog(){
      this.dialogVisible = false;
    },


    // 申请退库页面
    handleApplyRawReturn(row) {
      this.applyRawReturnTitle = "申请退库";
      this.applyRawReturnVisible = true;

      this.productPlanData = {
        warehouseId: '',
        planId: row.planId,
        planCode: row.planCode,
        dispatchCode: row.dispatchCode,
        planDetailCode: row.planDetailCode,
        saleOrderId: row.saleOrderId,
        productId: this.productId,
        materialBomId: this.materialBomId,
        applyReason: '',
        taskType: '',
        warehouseFloor: 1,
        wmsRawReturnList: []
      }
    },


    closeRawReturnDialog(){
      this.applyRawReturnVisible = false;
    },


    /** 提交暂停按钮 */
    submitProductPlanDetailPause(row) {
      this.submitLoading = true;
      let pauseForm = {planDetailId:row.planDetailId};
      this.$modal.confirm('确认要暂停么？').then(function () {
        return productPlanDetailPause(pauseForm);
      }).then(() => {
        this.$modal.msgSuccess("暂停成功");
        row.planDetailStatus = this.PLAN_DETAIL_STATUS.PAUSE;
      }).catch(() => {
      }).finally(e => {
        this.submitLoading = false;
      });
    },


    /** 提交继续按钮 */
    submitProductPlanDetailContinue(row) {
      this.submitLoading = true;
      let continueForm = {planDetailId:row.planDetailId};
      this.$modal.confirm('确认要继续么？').then(function () {
        return productPlanDetailContinue(continueForm);
      }).then(() => {
        row.planDetailStatus = this.PLAN_DETAIL_STATUS.STARTED;
        this.$modal.msgSuccess("继续成功");
      }).catch(() => {
      }).finally(e => {
        this.submitLoading = false;
      });
    },

  }
}
</script>
<style lang="less" scoped>

.app-container {
  background-image: url("../../../assets/board/bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.headTitle {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -100%);
  font-size: 1.5vw;
  color: #d6eaed;
  letter-spacing: 10px;
}

.el-table {
  background-color: #fff0;
  //overflow: auto;
}

.whiteTable {
  /deep/ .el-table .el-table__header-wrapper th {
    background-color: #fff0;
  }

  /deep/ .el-table tr {
    background-color: #fff0;
  }

  /deep/ .el-table .cell {
    color: #fff
  }

  /deep/ .current-row .cell {
    color: #000
  }

  /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background-color: #fff0;
  }
}

.chartBox {
  background-image: url("../../../assets/board/box.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  width: 46%;
  height: 23.34vw;

  .title {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2vw;
    color: #ccc;
  }

  .chart {
    position: absolute;
    top: 16%;
    left: 1%;
    width: 98%;
    height: 82%;
  }
}

.chartBox1 {
  top: 10%;
  left: 2%;
}

.chartBox2 {
  top: 10%;
  right: 2%;
}

.chartBox3 {
  top: 53%;
  left: 2%;
}

.chartBox4 {
  top: 53%;
  right: 2%;
}

.bottom {
  position: absolute;
  bottom: 1.5%;
  left: 2%;
}

.roundBorder {
  position: absolute;
  transform: translate(-50%, -50%);
}

/deep/ .dialog .app-container {
  background: none !important;
  position: static;
}

/deep/ .dialog .el-dialog__body {
  padding: 0 !important;
}

/deep/ .el-upload {
  display: none;
}
</style>