JG-CLIENT-TEMP/src/views/pro-operation/call-materiel/desperse.vue

<template>
  <div class="container-desperse">
    <div class="left">
      <div
        v-for="(box, index) in leftTrees"
        :key="index"
        :class="{ boxSelected: index === leftTreeIndex }"
        class="box-item"
        @click="changeRightEl(box, index)"
      >
        {{ box.dictLabel }}
      </div>
    </div>
    <div class="right">
      <el-scrollbar v-loading="loading">
        <div class="grid-container">
          <div
            v-for="(box, index) in merterielBoxes"
            :key="index"
            :class="box.selected ? 'suit-box suit-box-select' : 'suit-box'"
          >
            <div style="width: 100%">
              <div class="suit-header">
                <div>
                  <div class="suit-title">{{ box?.materialName }}</div>
                  <div class="suit-desc">{{ box?.spec }}</div>
                </div>
                <div>
                  <el-button
                    :type="box.selected ? 'info' : 'primary'"
                    class="suit-btn"
                    round
                    @click="clickItem(box)"
                  >
                    {{ box.selected ? "取消" : "添加" }}
                  </el-button>
                </div>
              </div>
            </div>
            <div style="width: 100%">
              <div>
                <div class="suit-count">
                  <!--                  <span>数量:</span>-->
                  <NumberInput v-model="box.totalNum" :max="box.stockNum"/>
                </div>
                <span class="suit-desc">库存: {{box.stockNum}} {{ box?.unit }}</span>
              </div>
              <!-- <div class="suit-desc">当前库存</div> -->
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <el-button class="call-btn" round type="primary" @click="toCall">
      叫料
    </el-button>
    <ChangeCount
      ref="changeCountRef"
      description="双面胶黑色"
      title="叫料数量"
    />
  </div>
</template>

<script lang="ts" setup>
import { accessoriesList, sporadicCallItem } from "@/api/process/callMateriel";
import { useDictionaryStore } from "@/store/modules/dictionary";
import ChangeCount from "@/components/CommonDialogs/ChangeCount.vue";
import { useProcessStore } from "@/store/modules/processView";

const processStore = useProcessStore();
const dictStore = useDictionaryStore();
const leftTrees = ref<any[]>([]);
const leftTreeIndex = ref(0);
const merterielBoxes = ref<any>([]);
const loading = ref(false);
const changeRightEl = (row: any, index: number) => {
  leftTreeIndex.value = index;
  accessoriesDataList(index);
};
const toCall = async () => {
  let array = [];
  for (let i = 0; i < merterielBoxes.value.length; i++) {
    if (merterielBoxes.value[i].selected) {
      array.push({
        materialCode: merterielBoxes.value[i].materialNo,
        num: merterielBoxes.value[i].totalNum,
      });
    }
  }
  sporadicCallItem({
    materials: array,
    processId: processStore.scanInfo.id,
    workOrderCode: processStore.odersData.workOrderCode,
  })
    .then(() => {
      ElMessage.success("叫料成功");
      accessoriesDataList(leftTreeIndex.value, false);
      merterielBoxes.value.forEach((element: any) => {
        element.selected = false;
        element.totalNum = 0;
      });
    })
    .catch(() => {
      merterielBoxes.value.forEach((element: any) => {
        element.selected = false;
        element.totalNum = 0;
      });
    });
};
const cacheDataMap = ref(new Map());
const accessoriesDataList = (index: number, cache: boolean = true) => {
  //对结果进行缓存 不频繁请求接口
  if (cacheDataMap.value.has(index) && cache) {
    merterielBoxes.value = cacheDataMap.value.get(index);
    return;
  }
  const firstObj = leftTrees?.value[index];
  //dictLabel: "炼胶",dictSort: 1,dictValue: "1"
  const queryAccessoriesParam = {
    accessoriesType: firstObj.dictValue,
    pageNo: 0,
    pageSize: 1000,
  };

  // 获取数据
  loading.value = true;
  accessoriesList(queryAccessoriesParam)
    .then((res: any) => {
      // console.log("onMounted", res.data);
      merterielBoxes.value = res.data;
      merterielBoxes.value.forEach((element: any) => {
        element.selected = false;
      });
      cacheDataMap.value.set(index, res.data);
    })
    .finally(() => {
      loading.value = false;
    });
};
onMounted(() => {
  leftTrees.value = dictStore?.dicts?.accessories_type;
  if (leftTrees?.value) {
    accessoriesDataList(0);
  }
});

// =========叫料数量
const changeCountRef = ref<InstanceType<typeof ChangeCount>>();
const clickItem = (box: any) => {
  box.selected = !box.selected;
  // changeCountRef.value?.showDialog(box.totalNum, (value: number) => {
  //   sporadicCallItem({
  //     materials: [
  //       {
  //         materialName: box.materialCode,
  //         num: value,
  //       },
  //     ],
  //     processId: processStore.scanInfo.id,
  //     workOrderCode: processStore.odersData.workOrderCode,
  //   }).then(() => {
  //     ElMessage.success("叫料成功");
  //     accessoriesDataList(leftTreeIndex.value, false);
  //   });
  // });
};
</script>

<style lang="scss" scoped>
.container-desperse {
  display: flex;
  position: relative;

  .call-btn {
    position: fixed;
    height: 80px;
    width: 200px;
    font-size: 24px;
    top: 80px;
    left: 650px;
  }

  .left {
    width: 300px;

    .box-item {
      width: 100%;
      text-align: center;
      line-height: 80px;
      height: 80px;
      border-radius: 40px;
      font-size: $f24;

      &:hover {
        color: #1482f0;
      }
    }

    .boxSelected {
      background: #fff;
      color: #1482f0;
    }
  }

  .right {
    width: calc(100% - 300px);
    margin-left: 20px;
  }
}

.grid-container {
  width: 100%;
  display: grid;
  /*行间距*/
  grid-row-gap: 24px;
  /*列间距*/
  grid-column-gap: 24px;

  grid-template-columns: 1fr 1fr;
  overflow-y: auto;

  .suit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .suit-btn {
    font-size: $f24;
    padding: 20px;
  }

  .suit-box {
    box-sizing: border-box;
    border: 2px solid white;
    height: 210px;
    background-color: white;
    border-radius: 16px 16px 16px 16px;
    padding: 24px 30px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    position: relative;

    .suit-title {
      font-weight: 500;
      font-size: 20px;
      color: rgba(0, 0, 0, 0.9);
      text-align: left;
    }

    .suit-count {
      font-weight: bold;
      font-size: 38px;
      color: rgba(0, 0, 0, 0.9);
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .suit-desc {
      font-size: 20px;
      color: rgba(0, 0, 0, 0.6);
      text-align: left;
    }
  }

  .suit-box-select {
    border: 2px solid #0a59f7 !important;
  }
}
</style>