JG-CLIENT-TEMP/src/views/pro-steps/components/wuliaocaiji.vue

<template>
  <div class="scanCode">
    <ScanCodeInput v-model="scanCode" @keyup.enter="enterfnc" />
  </div>
  <div class="materialInfoBody">
    <el-scrollbar @click.stop style="height: calc(100vh - 360px)">
      <el-table
        :data="tableData"
        border
        style="width: 100%; height: calc(100vh - 360px)"
      >
        <el-table-column label="序号" type="index" width="120" align="center" />
        <el-table-column prop="materialModel" label="物料规格" align="center" />
        <el-table-column prop="materialName" label="物料名称" align="center" />
        <el-table-column prop="needNum" label="需求数量" align="center" />
        <el-table-column prop="scanNum" label="扫码确认数量" align="center" />
        <el-table-column prop="materialArray" label="物料编号" width="400">
          <template #default="scope">
            <el-tag
              v-for="(tag, index) in scope.row.materialArray"
              :key="tag.label"
              closable
              style="margin-right: 5px"
              @close="handleClose(scope.$index, index)"
            >
              {{ tag.label }}&nbsp;{{ tag.num }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
    <div class="btns">
      <el-button type="primary">提交</el-button>
    </div>
  </div>
</template>

<script setup>
defineOptions({
  name: "Wuliaocaiji",
});
import ScanCodeInput from "@/components/ScanCodeInput/index.vue";
import {
  getInfo,
  itemRecordAdd,
  recordList,
  searchMaterial,
} from "@/api/prosteps/wuliaocaiji";
import { useProcessStore } from "@/store";
const handleClose = (index1, index2) => {
  tableData.value[index1].materialArray.splice(index2, 1);
};
const tableData = ref([
  {
    materialModel: "SG-8",
    materialName: "盖片",
    needNum: 20,
    scanNum: 13,
    materialArray: [
      {
        label: "SN001",
        num: 12,
      },
      {
        label: "SN002",
        num: 8,
      },
      {
        label: "SN001",
        num: 12,
      },
      {
        label: "SN002",
        num: 8,
      },
      {
        label: "SN001",
        num: 12,
      },
      {
        label: "SN002",
        num: 8,
      },
      {
        label: "SN001",
        num: 12,
      },
      {
        label: "SN002",
        num: 8,
      },
      {
        label: "SN001",
        num: 12,
      },
      {
        label: "SN002",
        num: 8,
      },
      {
        label: "SN001",
        num: 12,
      },
      {
        label: "SN002",
        num: 8,
      },
      {
        label: "SN001",
        num: 12,
      },
      {
        label: "SN002",
        num: 8,
      },
      {
        label: "SN001",
        num: 12,
      },
      {
        label: "SN002",
        num: 8,
      },
      {
        label: "SN001",
        num: 12,
      },
      {
        label: "SN002",
        num: 8,
      },
      {
        label: "SN001",
        num: 12,
      },
      {
        label: "SN002",
        num: 8,
      },
      {
        label: "SN001",
        num: 12,
      },
      {
        label: "SN002",
        num: 8,
      },
    ],
  },
  {
    materialModel: "SG-8",
    materialName: "盖片",
    needNum: 20,
    scanNum: 13,
    materialArray: [
      {
        label: "SN001",
        num: 12,
      },
      {
        label: "SN002",
        num: 8,
      },
    ],
  },
  {
    materialModel: "SG-8",
    materialName: "盖片",
    needNum: 20,
    scanNum: 13,
    materialArray: [
      {
        label: "SN001",
        num: 12,
      },
      {
        label: "SN002",
        num: 8,
      },
    ],
  },
  {
    materialModel: "SG-8",
    materialName: "盖片",
    needNum: 20,
    scanNum: 13,
    materialArray: [
      {
        label: "SN001",
        num: 12,
      },
      {
        label: "SN002",
        num: 8,
      },
    ],
  },
  {
    materialModel: "SG-8",
    materialName: "盖片",
    needNum: 20,
    scanNum: 13,
    materialArray: [
      {
        label: "SN001",
        num: 12,
      },
      {
        label: "SN002",
        num: 8,
      },
    ],
  },
]);
const caijiRef = ref(null);
const store = useProcessStore();
const scanCode = ref("");
const scanCodeCopyValue = ref("");
const showXQ = ref(false);
const showCJ = ref(false);
//详情展示数据
const showInfoData = ref([]);
const showInfo = ref({});
//详情展示数据 ↑
const scanData = ref([]);
provide("scanData", scanData);
const enterfnc = async () => {
  let str = scanCode.value;
  scanCodeCopyValue.value = str;
  scanCode.value = "";
  const { code, data } = await searchMaterial({
    operationId: store.odersData.operationId,
    processId: store.scanInfo.id,
    seqNo: store.scanInfo.seqNo,
    scanCode: str,
    workOrderCode: store.odersData.workOrderCode,
  });
  if (code == "200") {
    data[0].itemSeq = scanCodeCopyValue.value;
    scanData.value = data;
    showCJ.value = true;
  }
};
const opCompentDataList = ref([]);
provide("opCompentDataList", opCompentDataList);
//通过id获取详情
const getInfoById = async (item) => {
  const { data } = await getInfo({
    itemCode: item.itemCode,
    opId: store.odersData.operationId,
    processId: store.scanInfo.id,
  });
  showInfoData.value = data;
  showInfo.value = item;
};
const toXQPop = async (itemName) => {
  await getInfoById(itemName);
  showXQ.value = true;
};
//提交录入信息
const submitRecordAdd = async () => {
  let array = JSON.parse(JSON.stringify(scanData.value));

  array.forEach((element) => {
    element.operationId = store.odersData.operationId;
    element.processId = store.scanInfo.id;
    element.seqNo = store.scanInfo.seqNo;
    element.trackBy = "S";
    element.workOrderCode = store.odersData.workOrderCode;
  });

  const { code, data } = await itemRecordAdd(array);
  if (code == "200") {
    showCJ.value = false;
    ElMessage.success("录入成功");
    getOpCompentData();
  }
};
const submit = () => {
  let selectIndex = caijiRef.value.selectIndex;
  submitRecordAdd(selectIndex);
};

//获取tag列表数据
const getOpCompentData = async () => {
  const { data } = await recordList({
    operationId: store.odersData.operationId,
    workOrderCode: store.odersData.workOrderCode,
    seqNo: store.scanInfo.seqNo,
    processId: store.scanInfo.id,
    pageNo: 1,
    pageSize: 9999,
  });
  opCompentDataList.value = data;
};
const input = ref("");
onMounted(() => {
  getOpCompentData();
});
</script>

<style lang="scss" scoped>
.scanCode {
  width: 400px;
  margin-top: $p5;
  border-radius: 25px;
  overflow: hidden;
}

.materialInfoBody {
  width: 100%;
  height: calc(100vh - 360px);
  margin-top: 10px;
  .btns {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: end;
  }
}
:deep(.el-input__wrapper) {
  background-color: #000;
}
.showCodeBody {
  width: calc((100vw / 6 * 5) - 50px);
  height: calc((100vh - 240px));
  @include flex;

  .codeBox {
    width: 180px;
    display: flex;
    flex-direction: column;

    img {
      margin: 0 auto;
    }

    .codeText {
      text-align: center;
      font-size: $f20;
      color: #00000030;
    }
  }
}
</style>