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

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

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

defineOptions({
  name: "Wuliaocaiji",
});
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%;
  margin-top: $p10;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
  color: var(--ohos-text);

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

  .blueBgClass {
    background-color: #64bb5c;
  }

  .whiteBgClass {
    background-color: var(--ohos-box-bg);
  }

  .infoMsg {
    height: 190px;
    color: var(--ohos-text);
    border-radius: 16px;
    background-color: #d5dade;
    display: flex;
    padding: $p20;
    justify-content: space-between;
    align-items: center;
    position: relative;

    .svgStyle {
      position: absolute;
      bottom: 0;
      right: 0;
      color: var(--ohos-text);
    }

    .describe {
      font-size: $f20;
      color: $font-default-60;
      line-height: 30px;
      color: var(--ohos-text);
    }

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

    .rightMsg {
      .sum {
        font-size: $f38;
        font-weight: bold;
        line-height: 38px;
        text-align: right;
      }
    }
  }
}
: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>