JG-CLIENT-TEMP/src/views/pro-steps/index.vue

`
<template>
  <div style="position: relative">
    <div class="headerInfo">
      <!-- <div
        class="titleText"
        style="
          width: 300px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        "
      >
        {{ store.processInfo.materialName }} -
        {{ store.processInfo.materialModel }}
      </div>
      <div class="info">
        <div class="item">
          当前工序:
          {{
            store.scanInfo.operationName ? store.scanInfo.operationName : "-"
          }}
        </div>
        <div class="item">
          下一工位:{{
            store.scanInfo.nextStation ? store.scanInfo.nextStation : "-"
          }}
        </div>
        <div class="item">
          卡号:{{ store.scanInfo.seqNo ? store.scanInfo.seqNo : "-" }}
        </div>
        <div class="item">
          编码:{{
            store.scanInfo.materialCode ? store.scanInfo.materialCode : "-"
          }}
        </div>
      </div> -->
    </div>
    <div class="mainContentBox">
      <el-row :gutter="20">
        <el-col :span="4" class="boxStyle">
          <div class="selectOpBox">
            <div
              style="
                font-size: 500;
                font-size: 24px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                height: 100%;
                color: black;
              "
            >
              请选择工位
              <el-select
                v-model="opValue"
                class="m-2"
                placeholder="请选择工位"
                style="width: calc(100% - 40px)"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <div class="productInfo" @click="openPop">
            <template v-if="taskIndex != null">
              <div
                class="productitleText"
                @click.stop
                style="
                  font-size: 500;
                  font-size: 24px;
                  -webkit-line-clamp: 1;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
              >
                <span @dblclick="fz()">{{
                  taskArray[taskIndex].orderCode
                }}</span>
                /
                {{ taskArray[taskIndex].planNum }}
              </div>
              <div
                class="productitleText"
                style="
                  color: #000000;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  -webkit-line-clamp: 2; /* 限制显示的行数 */
                "
              >
                {{ taskArray[taskIndex].materialName }}
              </div>
              <div style="display: flex">
                <div
                  class="productitleText"
                  style="
                    color: #000000;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2; /* 限制显示的行数 */
                  "
                >
                  {{ taskArray[taskIndex].materialModel }}
                </div>
              </div>
            </template>
            <template v-else>
              <div
                class="productitleText"
                style="
                  font-size: 500;
                  font-size: 24px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  height: 100%;
                "
              >
                请选择工单
              </div>
            </template>
          </div>
          <!-- 侧边栏盒子 -->
          <div
            class="commonTitle"
            style="display: flex; justify-content: space-between; color: black"
          >
            <div>工序</div>
            <el-button
              type="primary"
              @click="opShowAllStatus = true"
              v-if="!opShowAllStatus && opsArray.length > 0"
              link
              >全部工序</el-button
            >
            <el-button
              type="primary"
              @click="opShowAllStatus = false"
              v-if="opShowAllStatus && opsArray.length > 0"
              link
              >关闭</el-button
            >
            <!-- <div v-if="selectStepIndex !== null">
              <el-popconfirm
                class="box-item"
                title="请确认操作：叫料"
                placement="top"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="toCall"
              >
                <template #reference>
                  <el-button type="primary" link>叫料</el-button>

                  >
                </template>
              </el-popconfirm>
              <el-popconfirm
                class="box-item"
                title="请确认操作：回库"
                placement="top"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="toBack"
              >
                <template #reference>
                  <el-button type="warning" link>回库</el-button>
                </template>
              </el-popconfirm>
              <el-popconfirm
                class="box-item"
                title="请确认操作：伸出"
                placement="top"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="toExtend"
              >
                <template #reference>
                  <el-button type="success" link>伸出</el-button>
                </template>
              </el-popconfirm>
              <el-popconfirm
                class="box-item"
                title="请确认操作：缩回"
                placement="top"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="toWithdraw"
              >
                <template #reference>
                  <el-button type="danger" link>缩回</el-button>
                </template>
              </el-popconfirm>
            </div> -->
          </div>
          <el-scrollbar
            style="height: calc(100vh - 660px); padding-bottom: 20px"
          >
            <Steps
              v-if="opsArray.length > 0"
              :opsArray="setOpsArray"
              @init="init"
              :opShowAllStatus
            />
            <template v-else>
              <div
                class="productitleText"
                style="
                  font-size: 500;
                  font-size: 24px;
                  display: flex;
                  height: calc(100vh - 690px);
                  justify-content: center;
                  align-items: center;
                  background-color: #d5dade;
                  border-radius: 16px;
                  color: black;
                "
              >
                暂无工序
              </div>
            </template>
          </el-scrollbar>
          <div
            style="
              width: 100%;
              height: 260px;
              display: flex;
              flex-direction: column;
              justify-content: space-evenly;
              padding-bottom: 60px;
            "
          >
            <div>
              <el-button type="primary" @click="openPop1" style="width: 100%"
                >切换产品</el-button
              >
            </div>
            <div style="display: flex">
              <el-button type="primary" style="width: 50%">开工</el-button>
              <el-button type="primary" @click="openPop2" style="width: 50%"
                >报工</el-button
              >
            </div>
            <div style="display: flex">
              <el-button
                type="primary"
                @click="popStatus4 = true"
                style="width: 50%"
                >条码跟踪</el-button
              >
              <el-button
                type="primary"
                @click="popStatus5 = true"
                style="width: 50%"
                >叫料</el-button
              >
            </div>
            <div style="display: flex">
              <el-button
                type="primary"
                @click="
                  fileType = 0;
                  popStatus6 = true;
                "
                style="width: 50%"
                >图纸资料</el-button
              >
              <el-button
                type="primary"
                style="width: 50%"
                @click="
                  fileType = 1;
                  popStatus6 = true;
                "
                >作业指导书</el-button
              >
            </div>
            <div style="display: flex">
              <el-button
                type="primary"
                @click="popStatus8 = true"
                style="width: 50%"
                :disabled="true"
                >流程单据</el-button
              >
              <el-button
                type="primary"
                style="width: 50%"
                @click="popStatus7 = true"
                >操作</el-button
              >
            </div>
          </div>
        </el-col>
        <el-col :span="20">
          <div class="typeContainer">
            <el-scrollbar>
              <div style="display: flex">
                <div
                  v-for="(item, index) in defaultComponents"
                  :key="index"
                  :class="
                    componentsDisabled
                      ? 'scrollbar-demo-item disabled'
                      : 'scrollbar-demo-item'
                  "
                >
                  <router-link :to="{ name: item.name }" replace>
                    <div
                      :class="getNameClass(index)"
                      class="typeBox"
                      @click="setSelectIndex(index)"
                    >
                      <div class="svgIcon">
                        <svg-icon :icon-class="item.iconName" size="30" />
                      </div>
                      <div class="name">{{ item.compentName }}</div>
                    </div>
                  </router-link>
                </div>
              </div>
            </el-scrollbar>
          </div>

          <div :key="key" class="routerView" v-if="snVal != null">
            <el-scrollbar style="width: 100%">
              <router-view v-slot="{ Component, route }">
                <keep-alive
                  include="Dianjian,Jiluxiang,Duomeiticaiji,Esop,Jingu,Mingpaibangding,Shebeijilu,Tiaoshipipei,Wuliaocaiji,Screwdriver"
                >
                  <component :is="Component" :key="route.fullPath" />
                </keep-alive>
              </router-view>
            </el-scrollbar>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 选择工单 -->
    <div class="midPopUp" v-if="popStatus" @click.stop="popStatus = false">
      <div class="popView">
        <div class="hang">
          请扫码：
          <ScanCodeInput
            style="width: 400px"
            v-model="seqVal"
            @keyup.enter="console.log(111)"
            @click.stop
          />
        </div>
        <el-divider
          content-position="center"
          style="border-color: black !important"
          ><div
            style="
              width: 100%;
              height: 100%;
              display: flex;
              font-size: 20px;
              padding: 0 20px;
              font-weight: 500;
              color: black;
              background-color: #d5dade;
            "
          >
            选择近期产品
          </div></el-divider
        >
        <el-scrollbar style="height: calc(100vh - 220px)">
          <div class="taskBox">
            <div
              class="productInfo"
              :key="item + index"
              style="background-color: #ffffff80"
              v-for="(item, index) in taskArray"
              @click="selectProduct(index)"
            >
              <div
                class="productitleText"
                style="font-size: 500; font-size: 24px"
              >
                {{ item.orderCode }} / {{ item.planNum }}
              </div>
              <div
                class="productitleText"
                style="
                  color: #000000;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  width: 20vw;
                "
              >
                {{ item.materialName }}
              </div>
              <div style="display: flex">
                <div class="productitleText" style="color: #000000">
                  &nbsp;{{ item.materialCode }}
                </div>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <!-- 切换产品 -->
    <div class="midPopUp" v-if="popStatus1" @click.stop="popStatus1 = false">
      <div class="popView">
        <div class="hang">
          请扫码：
          <ScanCodeInput
            style="width: 400px"
            v-model="seqVal"
            @keyup.enter="console.log(111)"
            @click.stop
          />
        </div>
        <el-divider
          content-position="center"
          style="border-color: black !important"
          ><div
            style="
              width: 100%;
              height: 100%;
              display: flex;
              font-size: 20px;
              padding: 0 20px;
              font-weight: 500;
              color: black;
              background-color: #d5dade;
            "
          >
            选择近期产品
          </div></el-divider
        >
        <el-scrollbar style="height: calc(100vh - 220px)">
          <div class="taskBox">
            <div
              class="productInfo"
              :key="item + index"
              style="background-color: #ffffff80"
              v-for="(item, index) in taskArray"
              @click="selectProduct(index)"
            >
              <div
                class="productitleText"
                style="font-size: 500; font-size: 24px"
              >
                {{ item.orderCode }} / {{ item.planNum }}
              </div>
              <div
                class="productitleText"
                style="
                  color: #000000;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  width: 20vw;
                "
              >
                {{ item.materialName }}
              </div>
              <div style="display: flex">
                <div class="productitleText" style="color: #000000">
                  &nbsp;{{ item.materialCode }}
                </div>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <!-- 报工 -->
    <div class="midPopUp" v-if="popStatus2" @click.stop="popStatus2 = false">
      <div class="popView">
        <div
          class="hang"
          style="
            text-align: center;
            font-size: 26px;
            font-weight: 600;
            width: 100%;
          "
        >
          报工
        </div>
        <el-divider
          content-position="center"
          style="border-color: black !important"
        ></el-divider>
        <el-scrollbar @click.stop style="height: calc(100vh - 260px)">
          <el-table
            :data="tableData"
            border
            style="width: 100%; height: calc(100vh - 280px)"
          >
            <el-table-column prop="user" align="center" label="报工人员">
              <template #default="scope">
                <div v-if="setStatus || scope.row.addStatus">
                  <el-select
                    v-model="tableData[scope.$index].user"
                    filterable
                    placeholder="请选择人员"
                    value-key="id"
                    style="width: 140px"
                  >
                    <el-option
                      v-for="item in dictStroe.allUsers"
                      :key="item.id"
                      :label="item.userName"
                      :value="item.userName"
                    />
                  </el-select>
                </div>
                <div v-else>{{ scope.row.user }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="num" align="center" label="报工数量">
              <template #default="scope">
                <div v-if="setStatus || scope.row.addStatus">
                  <el-input-number
                    v-model="tableData[scope.$index].num"
                    controls-position="right"
                    :step="1"
                    :min="0"
                  />
                </div>
                <div v-else>{{ scope.row.num }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="error" align="center" label="不良品数量">
              <template #default="scope">
                <div v-if="setStatus || scope.row.addStatus">
                  <el-input-number
                    v-model="tableData[scope.$index].error"
                    controls-position="right"
                    :step="1"
                    :min="0"
                  />
                </div>
                <div v-else>{{ scope.row.error }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="" label="操作" align="center">
              <template #default="scope">
                <el-button
                  type="primary"
                  style="width: 80px"
                  v-if="!setStatus && !addStatus"
                  @click="addRow(scope.$index)"
                  >新增</el-button
                >
                <el-button
                  type="danger"
                  style="width: 80px"
                  @click="deleteRow(scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
        <div class="btns" @click.stop style="margin-top: 10px">
          <el-button
            type="primary"
            @click="cancel"
            style="width: 80px; float: right"
            >取消</el-button
          >
          <el-button
            type="danger"
            v-if="addStatus"
            style="width: 80px; float: right; margin-right: 10px !important"
            >报工</el-button
          >
          <el-button
            type="warning"
            @click="toChange"
            style="width: 80px; float: right; margin-right: 10px !important"
            v-if="!setStatus && !addStatus"
            >变更</el-button
          >
          <el-button
            type="warning"
            @click="toSubmit"
            style="width: 80px; float: right; margin-right: 10px !important"
            v-if="setStatus"
            >确认</el-button
          >
        </div>
      </div>
    </div>
    <!-- 密码 -->
    <div
      class="midPopUp"
      style="z-index: 999999999"
      v-if="popStatus3"
      @click.stop="popStatus3 = false"
    >
      <div class="popView" @click.stop style="height: 160px; width: 400px">
        <div
          class="hang"
          style="
            text-align: center;
            font-size: 26px;
            font-weight: 600;
            width: 100%;
          "
        >
          请输入产线线长密码
        </div>
        <div>
          <el-input
            v-model="password"
            type="password"
            placeholder="请输入密码"
            style="width: 350px"
          />
        </div>

        <div class="btns" @click.stop style="margin-top: 10px">
          <el-button
            type="warning"
            @click="
              password = '';
              popStatus3 = false;
            "
            style="width: 80px; float: right; margin-right: 10px !important"
            v-if="setStatus"
            >关闭</el-button
          >
          <el-button
            type="primary"
            @click="submit"
            style="width: 80px; float: right; margin-right: 10px !important"
            v-if="setStatus"
            >确认</el-button
          >
        </div>
      </div>
    </div>
    <!-- 条码跟踪 -->
    <div class="midPopUp" v-if="popStatus4" @click.stop="popStatus4 = false">
      <div class="popView">
        <div
          class="hang"
          style="
            text-align: center;
            font-size: 26px;
            font-weight: 600;
            width: 100%;
          "
        >
          条码跟踪
        </div>
        <el-divider
          content-position="center"
          style="border-color: black !important"
        ></el-divider>
        <el-scrollbar @click.stop style="height: calc(100vh - 260px)">
          <el-table
            :data="tableData1"
            border
            style="width: 100%; height: calc(100vh - 280px)"
          >
            <el-table-column prop="user" align="center" label="流水号">
              <template #default="scope">
                <div>{{ scope.row.num1 }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="num" align="center" label="序列号">
              <template #default="scope">
                <div>
                  <el-input
                    v-model="tableData[scope.$index].num2"
                    placeholder="请输入序列号"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="error" align="center" label="铭牌编号">
              <template #default="scope">
                <div>
                  <el-input
                    v-model="tableData[scope.$index].num3"
                    placeholder="请输入铭牌编号"
                  />
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
        <div class="btns" @click.stop style="margin-top: 10px">
          <el-button
            type="primary"
            @click="popStatus4 = false"
            style="width: 80px; float: right"
            >取消</el-button
          >

          <el-button
            type="warning"
            @click="popStatus4 = false"
            style="width: 80px; float: right; margin-right: 10px !important"
            >确认</el-button
          >
        </div>
      </div>
    </div>
    <!-- 叫料 -->
    <div
      class="midPopUp"
      v-if="popStatus5"
      @click.stop="
        popStatus5 = false;
        callMaterials = null;
        selectIndexData3 = null;
      "
    >
      <div
        class="popView"
        v-if="callMaterials == null"
        @click.stop
        style="height: 240px; width: 440px"
      >
        <div
          class="hang"
          style="
            text-align: center;
            font-size: 26px;
            font-weight: 600;
            margin-bottom: 20px;
            width: 100%;
          "
        >
          请选择叫料方式
        </div>
        <div style="display: flex; justify-content: space-around">
          <el-button
            type="primary"
            @click="callMaterials = 0"
            style="
              width: 140px;
              height: 140px;
              font-size: 20px;
              border-radius: 16px;
            "
            >零星叫料</el-button
          >
          <el-button
            type="success"
            @click="callMaterials = 1"
            style="
              width: 140px;
              height: 140px;
              font-size: 20px;
              border-radius: 16px;
            "
            >齐套叫料</el-button
          >
        </div>
      </div>
      <div class="popView" v-if="callMaterials == 0">
        <div
          class="hang"
          style="
            text-align: center;
            font-size: 26px;
            font-weight: 600;
            width: 100%;
          "
        >
          零星叫料
        </div>
        <div @click.stop style="width: 400px; display: flex">
          <div
            style="
              text-align: center;
              font-size: 20px;
              font-weight: 600;
              width: 140px;
            "
          >
            物料查询：
          </div>
          <el-input v-model="callMaterialsNum1" placeholder="请输入铭牌编号" />
        </div>
        <el-divider
          content-position="center"
          style="border-color: black !important"
        ></el-divider>
        <el-scrollbar @click.stop style="height: calc(100vh - 260px)">
          <el-table :data="tableData2" border style="width: 100%">
            <el-table-column prop="name" align="center" label="物料名称">
              <template #default="scope">
                <div>{{ scope.row.name }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="model" align="center" label="物料规格">
              <template #default="scope">
                <div>{{ scope.row.model }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="unit" align="center" label="单位">
              <template #default="scope">
                <div>{{ scope.row.unit }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="error" align="center" label="数量">
              <template #default="scope">
                <div>
                  <el-input-number
                    v-model="tableData2[scope.$index].num"
                    controls-position="right"
                    :step="1"
                    :min="0"
                  />
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="btns" @click.stop style="margin-top: 10px">
            <el-button
              type="warning"
              style="width: 80px; float: right; margin-right: 10px !important"
              >确认</el-button
            >
          </div>
          <div
            style="
              text-align: center;
              font-size: 20px;
              font-weight: 600;
              width: 140px;
              margin: 20px 0;
            "
          >
            已选择清单：
          </div>
          <el-table :data="tableData2" border style="width: 100%">
            <el-table-column prop="name" align="center" label="物料名称">
              <template #default="scope">
                <div>{{ scope.row.name }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="model" align="center" label="物料规格">
              <template #default="scope">
                <div>{{ scope.row.model }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="unit" align="center" label="单位">
              <template #default="scope">
                <div>{{ scope.row.unit }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="error" align="center" label="数量">
              <template #default="scope">
                <div>
                  <el-input-number
                    v-model="tableData2[scope.$index].num"
                    controls-position="right"
                    :step="1"
                    :min="0"
                  />
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
        <div class="btns" @click.stop style="margin-top: 10px">
          <el-button
            type="primary"
            @click="
              popStatus5 = false;
              callMaterials = null;
            "
            style="width: 80px; float: right; margin-right: 10px !important"
            >取消</el-button
          >
          <el-button
            type="success"
            style="width: 80px; float: right; margin-right: 10px !important"
            @click="toCall"
            >提交</el-button
          >
        </div>
      </div>
      <div class="popView" v-if="callMaterials == 1">
        <div
          class="hang"
          style="
            text-align: center;
            font-size: 26px;
            font-weight: 600;
            width: 100%;
          "
        >
          齐套物料
        </div>
        <el-divider
          content-position="center"
          style="border-color: black !important"
        ></el-divider>
        <el-scrollbar @click.stop style="height: calc(100vh - 260px)">
          <div
            style="
              width: 100%;
              display: grid;
              gap: 20px;
              padding: 20px;
              grid-template-columns: repeat(3, 1fr);
            "
          >
            <div
              :class="
                index == selectIndexData3
                  ? 'selcetedMaterialInfoBox materialInfoBox'
                  : 'materialInfoBox'
              "
              @click="selectIndexData3 = index"
              v-for="(item, index) in tableData3"
            >
              <div class="productitleText">料箱： {{ item.boxCode }}</div>
              <div class="productitleText">物料数量：{{ item.num }}</div>
              <div class="productitleText">
                工单编号：{{ item.workOrderCode }}
              </div>
              <div class="productitleText">工序： {{ item.opName }}</div>
            </div>
          </div>
        </el-scrollbar>
        <div class="btns" @click.stop style="margin-top: 10px">
          <el-button
            type="primary"
            @click="
              popStatus5 = false;
              callMaterials = null;
              selectIndexData3 = null;
            "
            style="width: 80px; float: right"
            >取消</el-button
          >

          <el-button
            type="success"
            style="width: 80px; float: right; margin-right: 10px !important"
            :disabled="selectIndexData3 == null"
            @click="toCall(tableData3[selectIndexData3].boxCode)"
            >配送</el-button
          >
        </div>
      </div>
    </div>
    <!-- 图纸资料、作业指导书 -->
    <div
      class="midPopUp"
      v-if="popStatus6"
      @click.stop="
        popStatus6 = false;
        fileType = null;
        selectIndexData4 = null;
      "
    >
      <div class="popView">
        <div
          class="hang"
          style="
            text-align: center;
            font-size: 26px;
            font-weight: 600;
            width: 100%;
          "
        >
          {{ fileType == 0 ? "图纸资料" : "作业指导书" }}
        </div>
        <el-divider
          content-position="center"
          style="border-color: black !important"
        ></el-divider>
        <el-scrollbar @click.stop style="height: calc(100vh - 260px)">
          <div
            style="
              width: 100%;
              display: grid;
              gap: 20px;
              padding: 20px;
              grid-template-columns: repeat(3, 1fr);
            "
          >
            <div
              :class="
                index == selectIndexData4
                  ? 'selcetedMaterialInfoBox materialInfoBox'
                  : 'materialInfoBox'
              "
              @click="selectIndexData4 = index"
              v-for="(item, index) in tableData4"
            >
              <div class="productitleText">文件名称： {{ item.name }}</div>
              <div class="productitleText">文件编号：{{ item.code }}</div>
              <div class="productitleText">版本号：{{ item.banbenhao }}</div>
              <div class="productitleText">
                上传时间： {{ item.onloadDate }}
              </div>
              <div class="productitleText">编辑人员： {{ item.user }}</div>
            </div>
          </div>
        </el-scrollbar>
        <div class="btns" @click.stop style="margin-top: 10px">
          <el-button
            type="primary"
            @click="
              popStatus6 = false;
              fileType = null;
              selectIndexData4 = null;
            "
            style="width: 80px; float: right"
            >取消</el-button
          >

          <!-- <el-button
            type="success"
            style="width: 80px; float: right; margin-right: 10px !important"
            @click="PDFShow = true"
            :disabled="selectIndexData4 == null"
          >
            打开
          </el-button> -->
          <div style="float: right; margin-right: 10px">
            <PDFViewFull
              btnText="打开"
              :need-to-show-pdf="selectIndexData4 != null"
              content-type="button"
              :is-link="false"
              pdf-source="http://192.168.1.3:20001/jgfile//2025/4/11/447488548627850.pdf"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 操作 -->
    <div class="midPopUp" v-if="popStatus7" @click.stop="popStatus7 = false">
      <div class="popView" @click.stop style="height: 300px; width: 680px">
        <div
          class="hang"
          style="
            text-align: center;
            font-size: 26px;
            font-weight: 600;
            margin-bottom: 20px;
            width: 100%;
          "
        >
          请操作内容
        </div>
        <div style="display: flex; justify-content: space-around">
          <!-- <el-popconfirm
            class="box-item"
            title="请确认操作：叫料"
            placement="top"
            confirm-button-text="确认"
            cancel-button-text="取消"
            @confirm="toCall"
          >
            <template #reference>
              <el-button
                type="primary"
                style="
                  width: 140px;
                  height: 140px;
                  font-size: 20px;
                  border-radius: 16px;
                "
                >叫料</el-button
              >

              >
            </template>
          </el-popconfirm> -->
          <div>
            <el-popconfirm
              class="box-item"
              title="请确认操作：回库"
              placement="top"
              confirm-button-text="确认"
              cancel-button-text="取消"
              @confirm="toBack"
            >
              <template #reference>
                <div style="display: flex; flex-direction: column">
                  <el-button
                    type="warning"
                    style="
                      width: 140px;
                      height: 140px;
                      font-size: 20px;
                      border-radius: 16px;
                    "
                    >回库</el-button
                  >
                </div>
              </template>
            </el-popconfirm>
            <el-input v-model="boxNo" style="width: 140px; margin-top: 10px" />
          </div>

          <el-popconfirm
            class="box-item"
            title="请确认操作：伸出"
            placement="top"
            confirm-button-text="确认"
            cancel-button-text="取消"
            @confirm="toExtend"
          >
            <template #reference>
              <el-button
                type="warning"
                style="
                  width: 140px;
                  height: 140px;
                  font-size: 20px;
                  border-radius: 16px;
                "
                >伸出</el-button
              >
            </template>
          </el-popconfirm>
          <el-popconfirm
            class="box-item"
            title="请确认操作：缩回"
            placement="top"
            confirm-button-text="确认"
            cancel-button-text="取消"
            @confirm="toWithdraw"
          >
            <template #reference>
              <el-button
                type="warning"
                style="
                  width: 140px;
                  height: 140px;
                  font-size: 20px;
                  border-radius: 16px;
                "
                >缩回</el-button
              >
            </template>
          </el-popconfirm>
        </div>
      </div>
    </div>
    <!-- 流程单据 -->
    <div class="midPopUp" v-if="popStatus8" @click.stop="popStatus8 = false">
      <div class="popView">
        <div
          class="hang"
          style="
            text-align: center;
            font-size: 26px;
            font-weight: 600;
            width: 100%;
            display: flex;
            justify-content: space-between;
          "
        >
          <div>流程模板</div>

          <el-button
            type="primary"
            style="width: 80px; float: right; margin-right: 10px !important"
            @click="toCreateTemplate"
          >
            新建
          </el-button>
        </div>
        <el-divider
          content-position="center"
          style="border-color: black !important"
        ></el-divider>
        <el-scrollbar @click.stop style="height: calc(100vh - 260px)">
          <div
            style="
              width: 100%;
              display: grid;
              gap: 20px;
              padding: 20px;
              grid-template-columns: repeat(3, 1fr);
            "
          >
            <div
              :class="
                index == selectIndexData5 && templateType == 1
                  ? 'selcetedMaterialInfoBoxTemplate materialInfoBoxTemplate'
                  : 'materialInfoBoxTemplate'
              "
              @click="
                templateType = 1;
                selectIndexData5 = index;
              "
              v-for="(item, index) in tableData5"
            >
              <div class="productitleText">模板名称： {{ item.name }}</div>
              <div class="productitleText">创建时间：{{ item.date }}</div>
              <div class="productitleText">创建人员：{{ item.user }}</div>
            </div>
          </div>
        </el-scrollbar>
        <div
          class="hang"
          style="
            text-align: center;
            font-size: 26px;
            font-weight: 600;
            width: 100%;
            display: flex;
            justify-content: space-between;
          "
        >
          <div>待处理流程</div>

          <el-button
            type="primary"
            style="width: 80px; float: right; margin-right: 10px !important"
            @click="toCreateTemplate"
          >
            打开
          </el-button>
        </div>
        <el-divider
          content-position="center"
          style="border-color: black !important"
        ></el-divider>
        <el-scrollbar @click.stop style="height: calc(100vh - 260px)">
          <div
            style="
              width: 100%;
              display: grid;
              gap: 20px;
              padding: 20px;
              grid-template-columns: repeat(3, 1fr);
            "
          >
            <div
              :class="
                index == selectIndexData5 && templateType == 2
                  ? 'selcetedMaterialInfoBox materialInfoBox'
                  : 'materialInfoBox'
              "
              @click="
                templateType = 2;
                selectIndexData5 = index;
              "
              v-for="(item, index) in tableData5"
            >
              <div class="productitleText">模板名称： {{ item.name }}</div>
              <div class="productitleText">创建时间：{{ item.date }}</div>
              <div class="productitleText">创建人员：{{ item.user }}</div>
              <div class="productitleText">当前阶段：{{ item.stage }}</div>
            </div>
          </div>
        </el-scrollbar>
        <!-- <div class="btns" @click.stop style="margin-top: 10px">
          <el-button
            type="primary"
            @click="
              popStatus6 = false;
              fileType = null;
              selectIndexData4 = null;
            "
            style="width: 80px; float: right"
            >取消</el-button
          >

          <el-button
            type="success"
            style="width: 80px; float: right; margin-right: 10px !important"
            @click="toTemplate"
            :disabled="selectIndexData5 == null"
          >
            打开
          </el-button>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import OperationBar from "@/views/pro-steps/operationBar.vue";
import ScanCodeInput from "@/components/ScanCodeInput/index.vue";
import Steps from "@/views/process/components/steps.vue";
import { useProcessStore } from "@/store";
import { useDictionaryStore } from "@/store/modules/dictionary";
import { getOpCompent } from "@/api/prosteps";
import { getOrders } from "@/api/process";
import { getScan } from "@/api/process";
import { carCall, carBack, carExtend } from "@/api/process";
import PDFViewFull from "@/components/PDFViewFull/index.vue";

defineOptions({
  name: "ProSteps",
});
const boxNo = ref(null);
const PDFShow = ref(false);
const baseUrl = import.meta.env.VITE_APP_UPLOAD_URL;
const cancel = () => {
  if (addStatus.value) {
    tableData.value.forEach((item, index) => {
      if (item.addStatus == true) {
        deleteRow(index);
      }
    });
    addStatus.value = false;
  } else if (setStatus.value) {
    setStatus.value = false;
  } else {
    popStatus2.value = false;
  }
};
//报工变更提交前产线线长密码
const password = ref("");
const toSubmit = () => {
  popStatus3.value = true;
};
const ROWMODEL = {
  user: "",
  num: 0,
  error: 0,
  addStatus: true,
};
const submit = () => {
  ElMessage.success("操作成功！");
  password.value = "";
  popStatus3.value = false;
};
const addRow = (index) => {
  addStatus.value = true;
  tableData.value.splice(index + 1, 0, ROWMODEL);
};
const deleteRow = (index) => {
  tableData.value.splice(index, 1);
};
const dictStroe = useDictionaryStore();
const addStatus = ref(false);
//报工数据编辑状态
const setStatus = ref(false);
const toChange = () => {
  setStatus.value = true;
};
const tableData = ref([
  {
    user: "admin",
    num: 12,
    error: 0,
  },
  {
    user: "admin",
    num: 18,
    error: 0,
  },
  {
    user: "admin",
    num: 12,
    error: 0,
  },
  {
    user: "admin",
    num: 18,
    error: 1,
  },
]);
const tableData1 = ref([
  {
    num1: "10021.123.34",
    num2: "",
    num3: "",
  },
  {
    num1: "10021.123.54",
    num2: "",
    num3: "",
  },
  {
    num1: "10021.123.40",
    num2: "",
    num3: "",
  },
]);
const tableData2 = ref([
  {
    name: "酒精",
    model: "xxx",
    unit: "ml",
    num: 0,
  },
  {
    name: "锡焊",
    model: "tttt",
    unit: "卷",
    num: 0,
  },
]);
const tableData3 = ref([
  {
    boxCode: "LX-00003",
    num: 12,
    workOrderCode: "2025.12.125",
    opName: "装配",
  },
  {
    boxCode: "LX-00004",
    num: 12,
    workOrderCode: "2025.12.125",
    opName: "调试",
  },

  {
    boxCode: "LX-00002",
    num: 12,
    workOrderCode: "2025.12.125",
    opName: "装配",
  },
  {
    boxCode: "LX-00007",
    num: 12,
    workOrderCode: "2025.12.125",
    opName: "装配",
  },
  {
    boxCode: "LX-00005",
    num: 12,
    workOrderCode: "2025.12.125",
    opName: "装配",
  },
  {
    boxCode: "LX-00006",
    num: 12,
    workOrderCode: "2025.12.125",
    opName: "装配",
  },
  {
    boxCode: "LX-00010",
    num: 12,
    workOrderCode: "2025.12.125",
    opName: "装配",
  },
]);
const selectIndexData4 = ref(null);
const tableData4 = ref([
  {
    name: "LX-000123",
    code: "NO.12321321",
    banbenhao: "2025.12.125",
    onloadDate: "2025/04/28 12:21:32",
    user: "admin",
  },

  {
    name: "LX-000123",
    code: "NO.12321321",
    banbenhao: "2025.12.125",
    onloadDate: "2025/04/28 12:21:32",
    user: "admin",
  },
  {
    name: "LX-000123",
    code: "NO.12321321",
    banbenhao: "2025.12.125",
    onloadDate: "2025/04/28 12:21:32",
    user: "admin",
  },
  {
    name: "LX-000123",
    code: "NO.12321321",
    banbenhao: "2025.12.125",
    onloadDate: "2025/04/28 12:21:32",
    user: "admin",
  },
]);
const selectIndexData3 = ref(null);
//流程模板
const templateType = ref(null);
const selectIndexData5 = ref(null);
const tableData5 = ref([
  {
    name: "委外",
    date: "2025-05-06 12:21:32",
    user: "admin",
    stage: "A阶段",
  },
  {
    name: "测试",
    date: "2025-05-06 12:21:32",
    user: "admin",
    stage: "C阶段",
  },
  {
    name: "返工",
    date: "2025-05-06 12:21:32",
    user: "admin",
    stage: "D阶段",
  },
  {
    name: "报故",
    date: "2025-05-06 12:21:32",
    user: "admin",
    stage: "E阶段",
  },
  {
    name: "检验",
    date: "2025-05-06 12:21:32",
    user: "admin",
    stage: "F阶段",
  },
]);
const toTemplate = () => {};
//true为展示所有
const opShowAllStatus = ref(false);
const opValue = ref("1");
const options = [
  {
    value: "1",
    label: "装配",
  },
  {
    value: "2",
    label: "调试",
  },
  {
    value: "3",
    label: "测试",
  },
];
const copyTextUsingTextarea = (text) => {
  let textArea = document.createElement("textarea");
  textArea.value = text;
  textArea.style.position = "absolute";
  textArea.style.opacity = "0";
  textArea.style.left = "-9999px";
  textArea.style.top = "-9999px";
  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();
  try {
    const result = document.execCommand("copy");
    showCopyMessage(result);
  } catch (err) {
    showCopyMessage(false);
  }
  textArea.remove();
};
const showCopyMessage = (success) => {
  if (success) {
    ElMessage({
      type: "success",
      message: "复制成功!",
    });
  } else {
    ElMessage({
      type: "error",
      message: "复制失败!",
    });
  }
};
const fz = () => {
  const text = taskArray.value[taskIndex.value].workOrderCode;
  copyTextUsingTextarea(text);
};
const toCall = async (no) => {
  boxNo.value = no;
  await carCall({ boxNo: boxNo.value });
  ElMessage.success("呼叫成功,请等待");
  popStatus6.value = false;
};
const toBack = async () => {
  await carBack({ boxNo: boxNo.value });
  ElMessage.success("操作成功,请等待");
  popStatus6.value = false;
};
const toExtend = async () => {
  await carExtend({
    drawerStatus: 0,
  });
  ElMessage.success("操作成功,请等待");
  popStatus6.value = false;
};
const toWithdraw = async () => {
  await carExtend({
    drawerStatus: 1,
  });
  ElMessage.success("操作成功,请等待");
  popStatus6.value = false;
};
const popStatus = ref(null);
const popStatus1 = ref(null);
const popStatus2 = ref(null);
const popStatus3 = ref(null);
const popStatus4 = ref(null);
//叫料 0零星叫料 1齐套叫料
const callMaterials = ref(null);
const popStatus5 = ref(null);
const popStatus6 = ref(null);
//文件类型 0图纸资料 1作业指导书
const fileType = ref(null);
const popStatus7 = ref(null);
// 单据
const popStatus8 = ref(null);
const callMaterialsNum1 = ref("");
const callMaterialsNum2 = ref("");
const openPop = async () => {
  await getTaskArray();
  popStatus.value = true;
};
const openPop1 = async () => {
  await getTaskArray();
  popStatus1.value = true;
};
const openPop2 = async () => {
  popStatus2.value = true;
};
const seqVal = ref("");
const snVal = ref(null);
const selectProduct = async (index) => {
  taskIndex.value = index;
  selectIndex.value = 0;
  //设置数据
  store.odersData.workOrderCode =
    taskArray.value[taskIndex.value].workOrderCode;
  store.processInfo.materialName =
    taskArray.value[taskIndex.value].materialName;
  store.processInfo.materialModel =
    taskArray.value[taskIndex.value].materialModel;
  if (taskArray.value[taskIndex.value].ops.length > 0) {
    opsArray.value = taskArray.value[taskIndex.value].ops;
    selectStepIndex.value = 0;
    snVal.value =
      taskArray.value[taskIndex.value].ops[selectStepIndex.value].seqs.length >
      0
        ? taskArray.value[taskIndex.value].ops[selectStepIndex.value].seqs[0]
            .seqNo
        : null;
  } else {
    selectStepIndex.value = null;
    ElMessage.warning("暂无操作步骤");
  }
  if (snVal.value != null) {
    await init(0);
  } else {
    ElMessage.warning("当前工序暂不可操作");
  }
  popStatus.value = false;
};
const store = useProcessStore();
store.odersData.productLineId = 10;
const taskArray = ref([]);
const taskIndex = ref(null);
const getScanData = async () => {
  const value = snVal.value;
  const res = await getScan({
    operationId: Number(
      taskArray.value[taskIndex.value].ops[selectStepIndex.value].operationId
    ),
    qrCode: value,
    workOrderCode: taskArray.value[taskIndex.value].workOrderCode,
    //stationId暂时随便传一个
    stationId: 1,
  });
  if (res) {
    const { code, data, msg } = res;
    if (code == "200") {
      store.scanInfo = data;
      store.useSeqNo = data.seqNo;
    }
    return true;
  } else {
    snVal.value = null;
    stepComponents.value = [];
    router.replace({ name: "ProSteps" });
    return false;
  }
};
const getTaskArray = async () => {
  const { data } = await getOrders({
    pageNo: 1,
    pageSize: 999999999,
    queryComplete: 0,
  });
  taskArray.value = data.records;
};
const opsArray = ref([]);
const setOpsArray = computed(() => {
  const array = JSON.parse(JSON.stringify(opsArray.value));
  array.forEach((item, index) => {
    if (index < 3) {
      item.isOp = false;
    } else {
      item.isOp = true;
    }
  });
  return array;
});
const selectStepIndex = ref(null);
provide("selectStepIndex", selectStepIndex);
const key = ref(false);
const route = useRoute();
const router = useRouter();
const instance = getCurrentInstance();
const loading = ref(false);
const recondOPId = ref(null);
const qrCode = ref(null);
//配置标签信息Data
const stepComponents = ref([]);
const defaultComponents = [
  {
    compentName: "ESOP",
    iconName: "ESOP",
    path: "esop",
    name: "Esop",
  },
  {
    compentName: "物料采集",
    iconName: "wuliaocaiji",
    path: "wuliaocaiji",
    name: "Wuliaocaiji",
  },
  {
    compentName: "图像采集",
    iconName: "duomeiticaiji",
    path: "duomeiticaiji",
    name: "Duomeiticaiji",
  },
  {
    compentName: "工序表单",
    iconName: "mingpai",
    path: "execl",
    name: "Excel",
  },

  // {
  //   compentName: "设备确认",
  //   iconName: "shebeijilu",
  //   path: "shebeijilu",
  //   name: "Shebeijilu",
  // },
  {
    compentName: "设备点检",
    iconName: "dianjian",
    path: "dianjian",
    name: "Dianjian",
  },
];
//当前路由在setpComponents中的index
const selectIndex = ref(null);
const componentsDisabled = ref(true);

//配置data固定路由参数等
const setStepComponents = (data) => {
  let resData = [];
  data.forEach((item) => {
    defaultComponents.forEach((obj) => {
      if (item.compentName === obj.compentName) {
        resData.push({ ...item, ...obj });
      }
    });
  });
  return resData;
};
const getNameClass = (index) => {
  return index === selectIndex.value ? "typeBoxSelected" : "typeBoxNormal";
};
//获取当前tags列表
const getOpCompentArray = async () => {
  const { data } = await getOpCompent(
    "/" +
      `${Number(
        taskArray.value[taskIndex.value].ops[selectStepIndex.value].operationId
      )}` +
      "/" +
      `${store.scanInfo.id}`
  );
  stepComponents.value = setStepComponents(data);
  router.replace({ name: stepComponents.value[selectIndex.value].name });
};
//设置标签是否被选中
const setSelectIndex = (index) => {
  if (componentsDisabled.value != true) {
    selectIndex.value = index;
  }
};
const init = async (index, status) => {
  if (taskIndex.value == null || status == true) {
    return;
  }
  selectStepIndex.value = index != null ? index : 0;
  //数据设置
  store.odersData.operationId =
    taskArray.value[taskIndex.value].ops[selectStepIndex.value].operationId;
  store.processInfo.operationCode =
    taskArray.value[taskIndex.value].ops[selectStepIndex.value].operationCode;
  store.processInfo.operationName =
    taskArray.value[taskIndex.value].ops[selectStepIndex.value].operationName;
  snVal.value =
    taskArray.value[taskIndex.value].ops[selectStepIndex.value].seqs.length > 0
      ? taskArray.value[taskIndex.value].ops[selectStepIndex.value].seqs[0]
          .seqNo
      : null;
  if (snVal.value != null) {
    const res = await getScanData();
    if (res == true) {
      await getOpCompentArray();
    }
  } else {
    stepComponents.value = [];
    ElMessage.warning("当前工序暂不可操作");
  }
};
onActivated(async () => {
  //缓存组件数据逻辑
  init(selectStepIndex.value);
});
watch(
  () => taskIndex.value,
  (val) => {
    if (val != null) {
      componentsDisabled.value = false;
    }
  }
);
</script>

<style lang="scss" scoped>
.materialInfoBox {
  height: 240px;
  font-size: 18px;
  background-color: #d7d7d7;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .productitleText {
    font-size: 20px;
    font-weight: 600;
  }
}
.selcetedMaterialInfoBox {
  background-color: #ffffff70;
  background-image: url("@/assets/images/caijiwancheng.png");
  background-position: right top;
  background-repeat: no-repeat;
}
.materialInfoBoxTemplate {
  height: 160px;
  font-size: 18px;
  background-color: #02a7f0;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .productitleText {
    font-size: 20px;
    font-weight: 600;
  }
}
.selcetedMaterialInfoBoxTemplate {
  background-color: #ffffff70;
  background-position: right top;
  background-repeat: no-repeat;
}
.selectOpBox {
  height: 100px;
  margin-bottom: 10px;
  background-color: #d5dade;
  border-radius: 5px;
}
.disabled {
  opacity: 0.6 !important;
}
:deep(.el-input__wrapper) {
  background-color: #000;
}
.boxStyle {
  height: calc(100vh - 80px);

  .commonTitle {
    color: var(--ohos-text);
    font-size: 28px;
  }
}
.productInfo {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
  border-radius: 5px;
  background-color: #d5dade;
  padding: 10px 20px;
  cursor: pointer;
  .productitleText {
    color: black;
  }
}
.optionBox {
  height: calc(100vh - 150px);
  background-color: #d5dade;
  border-radius: 16px;
}
.headerInfo {
  height: 20px;
  width: calc(100vw - 40px);
  // padding: 10px;
  // margin: 0 20px;
  // display: flex;
  // justify-content: space-between;
  // align-items: center;
  // border-radius: 16px;
  // border-right: 0px;
  // border-left: 0px;
  // box-sizing: border-box;
  // margin-bottom: 10px;
  // background-color: white;

  .info {
    display: flex;
    flex-shrink: 0;

    .item {
      margin: 0 5px;
      font-size: 14px;
      font-weight: 300;
    }
  }
}

.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 135px;
  border-radius: 16px;
  text-align: center;
  background-color: #d5dade;
  margin-right: 10px;
}

.typeContainer {
  width: 100%;
  height: 80px;
  overflow-x: auto;

  .svgIcon {
    @include flex;
  }
}

.mainContentBox {
  height: calc(100vh - 110px);
}

.routerView {
  display: flex;
  flex: 1;
  overflow-y: auto;
  width: 100%;
  height: calc(100vh - 214px);
  margin-top: 20px;
  background-color: #ffffff20 !important;
  padding: 0 20px;
  border-radius: 16px;
}

.typeBox {
  height: 80px;
  width: 135px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .name {
    height: 16px;
    font-weight: 500;
    font-size: $f20;
    line-height: 20px;
    text-align: center;
    font-style: normal;
    text-transform: none;
    margin-top: $p10;
  }
}

.typeBoxNormal {
  background: transparent;
  color: black;
}

.typeBoxSelected {
  background-color: var(--ohos-area-active-bg);
  color: white !important;
}
:deep(.el-divider__text) {
  padding: 0px;
}
.popView {
  width: 80%;
  display: flex;
  flex-direction: column;
  height: 80%;
  background-color: #d5dade;
  border-radius: 16px;
  padding: 20px;
  .hang {
    display: flex;
    align-items: center;
    color: black;
    font-size: 20px;
  }
  .taskBox {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 每行 3 列 */
    gap: 20px; /* 设置间距为 20px */
  }
}
:deep(.el-input__wrapper) {
  background-color: #00000020 !important;
}
:deep(.el-table--fit) {
  background-color: #d5dade;
}
:deep(.el-table__cell) {
  background-color: #d5dade;
}
:deep(.el-table__header > thead > tr > .el-table__cell) {
  background-color: #d5dade !important;
}
</style>