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

<template>
  <div class="scanCode">
    <ScanCodeInput v-model="scanCode" @enterfnc="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" />
  <caijiRightPopUp v-model="showCJ" />
</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,
  itemInfoList,
} from "@/api/prosteps/wuliaocaiji";
import { useProcessStore } from "@/store";

defineOptions({
  name: "Wuliaocaiji",
});
const store = useProcessStore();
const scanCode = ref("");
const showXQ = ref(false);
const showCJ = ref(false);
const enterfnc = async () => {
  // const { code, data } = await searchMaterial({
  //   operationId: store.odersData.operationId,
  //   processId: "",
  //   seqNo: scanCode.value,
  //   workOrderCode: store.odersData.workOrderCode,
  // });
  const { code, data } = await searchMaterial({
    operationId: "214",
    processId: "14",
    seqNo: "1202010000005",
    workOrderCode: "GD2404150002",
  });
  if (code == "200") {
    showCJ.value = true;
  }
};
const opCompentDataList = ref([]);
const toXQPop = async (item: any) => {
  showXQ.value = true;
};
//获取tag列表数据
const getOpCompentData = async () => {
  // const { data } = await recordList({
  //   operationId: store.odersData.operationId,
  //   workOrderCode: store.odersData.workOrderCode,
  //   pageNo: 1,
  //   pageSize: 9999,
  // });
  const { data } = await recordList({
    operationId: "241",
    workOrderCode: "GD2404100005",
    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>