JG-CLIENT-TEMP/src/views/pro-steps/popUpView/flXiangqingPopUp.vue

<template>
  <!-- 辅料采集详情界面 -->
  <div class="popUp" v-if="modelValue">
    <div class="header" style="height: 3vh">
      <div class="headerTittle" style="font-weight: border; font-size: 28px">辅料采集详情</div>
    </div>
    <div class="header" style="display: flex; justify-content: center; margin: 20px">
      <div class="box" @click.stop>
        <div class="boxItem">
          <div class="describeText">需采集物料：{{ showInfo.materialName }}</div>
          <div class="describeText">物料编码：{{ showInfo.materialCode }}</div>
          <div class="describeText">型号：{{ showInfo.spec }}</div>
        </div>
      </div>
    </div>
    <div class="body">
      <div class="container1" @click.stop>
        <div class="boxTittle">批次号列表(共&nbsp;{{ batchNoTableData.length }}&nbsp;批次)</div>
        <el-divider style="margin-top: 20px !important" />
        <div style="display: flex; margin-bottom: 20px; align-items: center">
          <div class="seqSearchInput">
            <!-- <el-input
              v-model="searchBatchNo"
              placeholder="搜索批次号"
              class="searchInput"
              clearable
            /> -->
          </div>
          <!-- <el-button style="width: 300px" type="success" @click="autoAll"
            >按需全批次自动绑定</el-button
          > -->
        </div>

        <el-table border class="seqTable" :data="showBatchNoTableData" style="flex: 1">
          <el-table-column align="center" label="批次号" prop="batchNo" />
          <el-table-column align="center" label="绑定管号">
            <template #default="scope">
              <el-scrollbar max-height="300px">
                <el-select
                  multiple
                  clearable
                  filterable
                  placeholder="管号"
                  :disabled="!props.isShow"
                  v-model="batchNoTableData[scope.$index].seqList"
                >
                  <template #header>
                    <el-checkbox @change="handleCheckAll(scope.$index)"> 全选 </el-checkbox>
                  </template>
                  <el-option v-for="item in seqList" :key="item" :label="item" :value="item"> </el-option>
                </el-select>
              </el-scrollbar>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" width="160" label="操作">
            <template #default="scope">
              <el-button style="width: 120px" type="primary"
                >按需自动绑定</el-button
              >
            </template>
          </el-table-column> -->
          <template #empty>
            <div class="empty">
              <Empty />
            </div>
          </template>
        </el-table>
        <div class="btns">
          <el-button type="primary" @click="submit" v-if="props.isShow">绑定确认</el-button>
          <el-button @click="handleClose">取消</el-button>
        </div>
      </div>
      <div class="container2" @click.stop>
        <div class="boxTittle">管号列表(共 {{ seqList.length }} 个 )</div>
        <el-divider />
        <div style="display: flex; margin-bottom: 20px; align-items: center">
          <div class="seqSearchInput">
            <el-input v-model="searchSeqNo" placeholder="搜索管号" class="searchInput" clearable />
          </div>
          <!-- <el-button @click="seqNoOk = true" :type="seqNoOk ? 'primary' : ''"
            >完成绑定</el-button
          >
          <el-button :type="!seqNoOk ? 'primary' : ''" @click="seqNoOk = false"
            >未完成</el-button
          > -->
        </div>
        <el-table border class="seqTable" :data="showSeqData" style="flex: 1">
          <el-table-column align="center" label="管号" prop="seqNo" />
          <el-table-column align="center" label="批次号绑定情况" prop="bodyatchNoList">
            <template #default="scope">
              <template v-if="scope.row.batchNoList.length > 0" v-for="item in scope.row.batchNoList">
                <div>批次号: {{ item }}</div>
              </template>
              <span v-else>-</span>
            </template>
          </el-table-column>

          <template #empty>
            <div class="empty">
              <Empty />
            </div>
          </template>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useProcessStore } from "@/store";
import { getunProcessedList } from "@/api/prosteps";
import { saveFlBatch } from "@/api/prosteps/wuliaocaiji.ts";
import { useUserStore } from "@/store";
import { includes } from "lodash-es";
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  showInfo: {
    type: Object,
  },
  isShow: {
    type: Boolean,
    default: true,
  },
  isMixMaterial: {
    type: Boolean,
    default: false,
  },
});
const searchBatchNo = ref("");
const searchSeqNo = ref("");
const handleCheckAll = (index) => {
  batchNoTableData.value[index].seqList = seqList.value;
};
const showBatchNoTableData = computed(() => {
  let array = JSON.parse(JSON.stringify(batchNoTableData.value));
  if (searchBatchNo.value) {
    const lowerCaseSearchValue = searchBatchNo.value.toLowerCase();
    array = array.filter((item) => item.batchNo && item.batchNo.toLowerCase().includes(lowerCaseSearchValue));
  }
  return array;
});
const store1 = useUserStore();
const emits = defineEmits(["update:modelValue", "dataList"]);
const store = useProcessStore();
//批次号绑定
const batchNoTableData = ref([]);
const setBatchNo = () => {
  const array = [];
  if (props.showInfo.batchNoList.length > 0) {
    for (let i = 0; i < props.showInfo.batchNoList.length; i++) {
      array.push({
        batchNo: props.showInfo.batchNoList[i],
        seqList: [],
      });
    }
  }
  //回显逻辑
  if (props.showInfo.collectList.length > 0) {
    for (let i = 0; i < array.length; i++) {
      for (let j = 0; j < props.showInfo.collectList.length; j++) {
        if (props.showInfo.collectList[j].batchNo.includes(array[i].batchNo)) {
          array[i].seqList.push(props.showInfo.collectList[j].seqNo);
        }
      }
    }
  }
  batchNoTableData.value = array;
};
//获取当前物料绑定管号
const seqTableData = ref([]);
const getSeqList = async () => {
  const { data } = await getunProcessedList(store.scanInfo.id);
  seqList.value = data;
};
const setSeqTableData = () => {
  seqTableData.value = [];
  for (let i = 0; i < seqList.value.length; i++) {
    seqTableData.value.push({
      seqNo: seqList.value[i],
      batchNoList: [],
    });
  }
};
const showSeqData = computed(() => {
  let array = JSON.parse(JSON.stringify(seqTableData.value));
  let obj = {};
  for (let j = 0; j < batchNoTableData.value.length; j++) {
    obj[batchNoTableData.value[j].batchNo] = batchNoTableData.value[j].seqList;
  }

  for (let i = 0; i < array.length; i++) {
    for (let j = 0; j < batchNoTableData.value.length; j++) {
      if (obj[batchNoTableData.value[j].batchNo].includes(array[i].seqNo)) {
        array[i].batchNoList.push(batchNoTableData.value[j].batchNo);
      }
    }
  }
  if (searchSeqNo.value) {
    const lowerCaseSearchValue = searchSeqNo.value.toLowerCase();
    array = array.filter((item) => item.seqNo && item.seqNo.toLowerCase().includes(lowerCaseSearchValue));
  }
  return array;
});
const submit = async () => {
  const array = ref([]);
  batchNoTableData.value.forEach((item) => {
    if (item.seqList.length > 0) {
      array.value.push({
        itemCode: props.showInfo.materialCode,
        itemModel: props.showInfo.spec,
        itemName: props.showInfo.materialName,
        operationId: store.scanInfo.operationId,
        operationName: store.scanInfo.operationName,
        processId: store.scanInfo.id,
        workOrderCode: store.odersData.workOrderCode,
        trackBy: store1.user.username,
        seqNoList: item.seqList,
        batchNo: item.batchNo,
        isMixMaterial: props.isMixMaterial ? 1 : 0,
      });
    }
  });
  if (array.value.length < 1) {
    ElMessage.error("请先绑定物料！");
    return;
  }
  const { code } = await saveFlBatch(array.value);
  if (code == "200") {
    ElMessage.success("采集成功！");
    handleClose();
    dataList();
  }
};
//更新外部列表
const dataList = () => {
  emits("dataList");
};

const handleClose = () => {
  emits("update:modelValue", false);
};
//当前所有管号
const seqList = ref([]);

watch(
  () => props.showInfo,
  async () => {
    if (props.showInfo) {
      await getSeqList();
      setBatchNo();
      setSeqTableData();
    }
  }
);
</script>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
<style lang="scss" scoped>
.selectInfo {
  margin-bottom: 5px;
}

:deep(.el-form-item) {
  margin-bottom: 5px !important;
}

.sumFail {
  color: black;
}
.sumOk {
  color: green;
}
.describeText {
  font-size: 20px !important;
  font-weight: bolder;
  color: black;
}
.searchInput {
  height: 40px;
}
:deep(.el-input__wrapper) {
  height: 40px !important;
}
:deep(.el-table__cell) {
  font-size: 18px !important;
}
.el-divider {
  margin-bottom: 10px;
}
.el-button {
  width: 180px;
  height: 40px;
  font-size: 18px;
  border-radius: 10px;
}
.describeText {
  line-height: 25px !important;
}
.seqTable {
  border-radius: 16px;
}
.boxTittle {
  font-size: 18px;
  font-weight: bolder;
  text-align: center;
  height: 1vh;
}
.popUp {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background-color: #00000030;
  top: 0;
  left: 0;
  backdrop-filter: blur(5px);
  .header {
    margin: 0;
    .box {
      width: 95vw;
      height: 6vh;
      background-color: #f1f3f5;
      border-radius: 16px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      .boxItem {
        display: flex;
        justify-content: space-between;
        padding: 0 5%;
        .describeText {
          font-size: 18px;
        }
      }
    }
  }
  .body {
    width: 100vw;
    height: 85vh;
    display: flex;
    justify-content: space-evenly;
    .container1 {
      width: 60vw;
      height: 100%;
      background-color: #f1f3f5;
      border-radius: 16px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      .seqSearchInput {
        margin-right: 10px;
        width: 40%;
        max-width: 360px;
      }
      .btns {
        padding-top: 10px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
      }
    }
    .container2 {
      width: 32vw;
      height: 100%;
      background-color: #f1f3f5;
      border-radius: 16px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      .seqSearchInput {
        margin-right: 10px;
        width: 40%;
        max-width: 360px;
      }
      .btns {
        height: 8vh;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
      }
    }
  }
}
.headerTittle {
  width: 100%;
  height: 55px;
  text-align: center;
  line-height: 55px;
  font-size: 38px;
  font-weight: 500;
}
</style>