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

<template>
  <div class="scanCode">
    <ScanCodeInput v-model="scanCode" @keyup.enter="enterfnc" />
  </div>
  <div class="showCodeBody" v-if="opCompentDataList.length < 1">
    <div class="codeBox">
      <img
        src="@/assets/icons/shaoma.svg"
        style="width: 134px; height: 134px"
      />
      <div class="codeText">扫码物料码添加物料</div>
    </div>
  </div>
  <div class="materialInfoBody" v-else>
    <div
      :class="
        item.needNum - item.realNum == 0 ? 'infoMsg infoMsgImg' : 'infoMsg'
      "
      v-for="item in opCompentDataList"
      @click="toXQPop(item)"
    >
      <div class="leftMsg">
        <div class="nameMsg">{{ item.itemName }}</div>
        <div class="describe">{{ item.itemModel }}</div>
        <div class="describe">需求：{{ item.needNum }}</div>
      </div>
      <div class="rightMsg" v-if="item.needNum - item.realNum != 0">
        <div class="sum">{{ item.needNum - item.realNum }}</div>
        <div class="describe">还需采集</div>
      </div>
      <svg-icon icon-class="jiaobiao" size="25" class="svgStyle" />
    </div>
  </div>
  <xiangqingPopUp
    v-model="showXQ"
    :showInfoData="showInfoData"
    :showInfo="showInfo"
  />
  <caijiRightPopUp
    v-model="showCJ"
    @submit="submit"
    ref="caijiRef"
    :seqNo="scanCode"
  />
</template>

<script lang="ts" setup>
import ScanCodeInput from "@/components/ScanCodeInput/index.vue";
import caijiRightPopUp from "../popUpView/caijiRightPopUp.vue";
import xiangqingPopUp from "../popUpView/xiangqingPopUp.vue";
import {
  recordList,
  searchMaterial,
  itemRecordAdd,
  getInfo,
} from "@/api/prosteps/wuliaocaiji";
import { useProcessStore } from "@/store";

defineOptions({
  name: "Wuliaocaiji",
});
const caijiRef = ref(null);
const store = useProcessStore();
const scanCode = 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;
  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") {
    scanData.value = data;
    showCJ.value = true;
  }
};
const opCompentDataList = ref([]);
//通过id获取详情
const getInfoById = async (item: any) => {
  const { data } = await getInfo({
    itemCode: item.itemCode,
    opId: store.odersData.operationId,
    processId: store.scanInfo.id,
  });
  showInfoData.value = data;
  showInfo.value = item;
};
const toXQPop = async (item: any) => {
  await getInfoById(item);
  showXQ.value = true;
};
//提交录入信息
const submitRecordAdd = async (index) => {
  const chooseData = scanData.value[index];
  if (!chooseData) {
    ElMessage.error("请先选择物料,并确定数量在提交录入信息");
    return;
  }
  if (!chooseData.num || chooseData.num < 1) {
    ElMessage.error("请输入数量!");
    return;
  }
  const { code, data } = await itemRecordAdd({
    itemCode: chooseData.materialCode,
    itemModel: chooseData.spec,
    itemName: chooseData.materialName,
    itemSeq: scanCode.value,
    operationId: store.odersData.operationId,
    processId: store.scanInfo.id,
    num: chooseData.num,
    seqNo: store.scanInfo.seqNo,
    trackBy: "S",
    workOrderCode: store.odersData.workOrderCode,
  });
  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: 40%;
  margin-top: $p5;
}

.materialInfoBody {
  width: calc((100vw / 6 * 5) - 50px);
  margin-top: $p10;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;

  .infoMsgImg {
    background-image: url("@/assets/images/caijiwancheng.png");
    background-position: right top;
    background-repeat: no-repeat;
  }

  .infoMsg {
    min-width: 600px;
    height: 190px;
    background-color: white;
    border-radius: 16px;
    display: flex;
    padding: $p20;
    justify-content: space-between;
    align-items: center;
    position: relative;

    .svgStyle {
      position: absolute;
      bottom: 0;
      right: 0;
    }

    .describe {
      font-size: $f20;
      color: $font-default-60;
      line-height: 30px;
    }

    .leftMsg {
      .nameMsg {
        font-size: $f24;
        font-weight: $Medium;
      }
    }

    .rightMsg {
      .sum {
        font-size: $f38;
        font-weight: bold;
        line-height: 38px;
        text-align: right;
      }
    }
  }
}

.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>