JG-CLIENT-TEMP/src/views/prepare-complete-suit/firstPopUpView/bindingScan.vue

<template>
  <div class="midPopUp" v-if="modelValue">
    <div class="container">
      <div class="headerTittle">载具绑定</div>
      <div class="body">
        <div class="boxInfo">
          <div class="info">
            <div class="titleText">载具名：{{ boxInfoData.vehicleName }}</div>
            <div class="describeText">
              载具编号：{{ boxInfoData.vehicleNo }}
            </div>
          </div>
          <div class="scanBox">
            <div class="titleText">请扫物料码：</div>
            <ScanCodeInput v-model="scanCode" @keyup.enter="enterfnc" />
          </div>
          <el-table class="infoTable" :data="scanItemArray" border>
            <el-table-column prop="materialName" label="物料名称" width="120" />
            <el-table-column prop="materialCode" label="物料编号" />
            <el-table-column prop="spec" label="规格" />
            <el-table-column prop="num" label="数量" align="center" />
            <el-table-column prop="batchCode" label="流转卡号/批次号" align="center" />
            <el-table-column prop="" label="操作" align="center">
              <template #default="scope">
                <el-popconfirm title="确认清空?" @confirm="tableDelete(scope.row.materialCode)" confirm-button-text="确定"
                  cancel-button-text="取消">
                  <template #reference>
                    <span class="opera">清空</span>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
            <template #empty>
              <Empty />
            </template>
          </el-table>
        </div>
        <div class="scan">
          <div class="scanBox">
            <div class="titleText">搜索记录：</div>
            <el-input clearable v-model="seachInput" placeholder="请输入已扫码" />
          </div>
          <div class="titleText" style="display: flex; justify-content: space-between">
            扫码记录：<span>本次总扫码{{ scanAllNum }}次</span>
            <span>目前实际记录{{ recordArray.length }}次</span>
          </div>
          <el-scrollbar class="scrollbarBox">
            <div class="infoBox" v-for="item in showRecordArray">
              <div class="describeText textRow">扫码时间：{{ item.time }}</div>
              <div class="describeText textRow">
                扫码内容：{{ item.scanCode }}
              </div>
              <div class="describeText textRow">
                物料名称:{{ item.materialName }}
              </div>
              <div class="describeText textRow">
                物料编码:{{ item.materialCode }}
              </div>
              <div class="describeText textRow">物料数量:{{ item.num }}</div>
              <div class="describeText delete" @click="recordDelete(index)">
                删除记录
              </div>
            </div>
            <div v-if="showRecordArray.length == 0" class="infoBox titleText">
              暂无内容
            </div>
          </el-scrollbar>
        </div>
      </div>

      <div class="bottomBtn">
        <el-button class="leftBtn" @click="handleClose">取消</el-button>
        <el-button class="rightBtn" :disabled="scanItemArray.length < 1" @click="handleSubmit"
          type="primary">绑定</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getMaterialInfo, addOperation } from "@/api/prepare";
import { useCommonStore } from "@/store";
const store = useCommonStore();
const props = defineProps({
  modelValue: {
    type: Boolean,
  },
  workOrderCode: {
    type: String,
  },
  operationId: {
    type: String,
  },
});
const boxInfoData = inject("boxInfoData");
const scanAllNum = ref(0);
const emits = defineEmits(["update:modelValue", "close"]);
//二维码
const scanCode = ref("");
//存放扫码信息总盒子
const recordArray = ref([]);
const seachInput = ref("");
const showRecordArray = computed(() => {
  if (seachInput.value != "") {
    return recordArray.value.filter(
      (item) => item.scanCode == seachInput.value
    );
  } else {
    return recordArray.value;
  }
});

//物料表格数据(会根据最近扫码后的结果进行统计展示)
const scanItemArray = computed(() => {
  let materialCodeArray = [];
  let resArray = [];
  // recordArray.value.forEach((item) => {
  //   if (!materialCodeArray.includes(item.materialCode)) {
  //     materialCodeArray.push(item.materialCode);
  //     resArray.push({
  //       materialCode: item.materialCode,
  //       materialName: item.materialName,
  //       num: item.num,
  //       spec: item.spec,
  //       batchCode: item.batchCode,
  //     });
  //   } else {
  //     resArray.forEach((res) => {
  //       if (
  //         res.materialCode == item.materialCode &&
  //         res.batchCode == item.batchCode
  //       ) {
  //         res.num = Number(res.num) + Number(item.num);
  //       } else {
  //         resArray.push({
  //           materialCode: item.materialCode,
  //           materialName: item.materialName,
  //           num: item.num,
  //           spec: item.spec,
  //           batchCode: item.batchCode,
  //         });
  //       }
  //     });
  //   }
  // });
  for (let i = 0; i < recordArray.value.length; i++) {
    if (!materialCodeArray.includes(recordArray.value[i].materialCode)) {
      materialCodeArray.push(recordArray.value[i].materialCode);
      resArray.push({
        materialCode: recordArray.value[i].materialCode,
        materialName: recordArray.value[i].materialName,
        num: recordArray.value[i].num,
        spec: recordArray.value[i].spec,
        batchCode: recordArray.value[i].batchCode,
      });
    } else {
      let status = false;
      for (let b = 0; b < resArray.length; b++) {
        if (
          resArray[b].materialCode == recordArray.value[i].materialCode &&
          resArray[b].batchCode == recordArray.value[i].batchCode
        ) {
          resArray[b].num =
            Number(resArray[b].num) + Number(recordArray.value[i].num);
          status = true;
        }
      }
      if (status == false) {
        resArray.push({
          materialCode: recordArray.value[i].materialCode,
          materialName: recordArray.value[i].materialName,
          num: recordArray.value[i].num,
          spec: recordArray.value[i].spec,
          batchCode: recordArray.value[i].batchCode,
        });
      }
    }
  }
  return resArray;
});
//清空操作
const tableDelete = (code) => {
  recordArray.value = recordArray.value.filter(
    (item) => item.materialCode != code
  );
};
const recordDelete = (index) => {
  recordArray.value.splice(index, 1);
};
const enterfnc = async () => {
  const { data, code } = await getMaterialInfo({
    materialLabel: scanCode.value,
    operationId: props.operationId,
    workOrderCode: props.workOrderCode,
  });
  if (code == "200") {
    const obj = {
      ...data,
      scanCode: scanCode.value,
      time: store.currentTimeFormat(),
    };
    recordArray.value.unshift(obj);
    scanCode.value = "";
    scanAllNum.value = scanAllNum.value + 1;
    ElMessage.success("扫描成功！");
  }
};
const addTableSum = computed((code) => {
  return;
});
const reset = () => {
  scanAllNum.value = 0;
  scanCode.value = "";
  recordArray.value = [];
  seachInput.value = [];
};
const handleClose = () => {
  emits("update:modelValue", false);
  reset();
};
const handleSubmit = async () => {
  const { data, code } = await addOperation({
    operationId: props.operationId,
    workOrderCode: props.workOrderCode,
    processVehicleMaterialList: [...recordArray.value],
    vehicleCode: boxInfoData.value.vehicleNo,
    vehicleId: boxInfoData.value.vehicleId,
    vehicleName: boxInfoData.value.vehicleName,
  });
  if (code == "200") {
    ElMessage.success("绑定成功！");
    handleClose();
    emits("close");
  }
};
</script>

<style lang="scss" scoped>
.midPopUp {
  z-index: 4;
}

.opera {
  color: var(--el-color-primary);
  font-size: $f20;
  cursor: pointer;
}

.container {
  width: 90vw;
  height: 90vh;
  background-color: #f1f3f5;
  border-radius: 16px;

  .body {
    display: flex;

    .boxInfo {
      width: 50%;
      padding: 20px;
      flex: 1;

      .info {
        width: 100%;
        height: 80px;
        border-radius: 16px;
        background-color: white;
        padding: $p10;
        display: flex;
        flex-direction: column;

        .titleText {
          line-height: 30px;
        }

        .describeText {
          text-align: left;
        }
      }

      .infoTable {
        width: 100%;
        margin-top: $p20;
        min-height: 120px;
        height: calc(80vh - 310px);
        border-radius: 16px;
      }
    }

    .scan {
      width: 50%;
      padding: 20px;
      padding-bottom: 0px;

      flex .scanBox {
        padding: 0 20px;
        width: 100%;
        height: 40px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
      }

      .scrollbarBox {
        height: calc(80vh - 226px);
        padding: $p20 0;
        padding-bottom: 0px;
      }
    }
  }
}

:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
  cursor: default;
  border-radius: 16px;

  .el-input__inner {
    cursor: default !important;
  }
}

.el-table__empty-block {
  height: 0 !important;
}

.infoBox {
  width: 100%;
  background-color: white;
  border-radius: 16px;
  margin-bottom: $p10;
  @include flex;
  flex-wrap: wrap;
  padding: 20px;

  .describeText {
    line-height: 22px;
    text-align: left;
    color: black;
  }

  .textRow {
    height: 22px;
  }

  .delete {
    text-align: right;
    color: var(--el-color-primary);
  }
}

.bottomBtn {
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: $p10 10% 0 10%;

  .leftBtn {
    height: 55px;
    width: 45%;
    border-radius: 16px;
    font-size: $f20;
    color: black;
    background-color: #00000015;
    border: 0px;
  }

  .rightBtn {
    height: 55px;
    width: 45%;
    border-radius: 16px;
    font-size: $f20;
    color: white;
  }
}
</style>