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

<template>
  <div class="container-desperse">
    <div class="left">
      <div
        class="box-item"
        v-for="(box, index) in leftTrees"
        :key="index"
        :class="{ hoverEffect: index === leftTreeIndex }"
        @click="changeRightEl(box, index)"
      >
        {{ box.dictLabel }}
      </div>
    </div>
    <div class="right">
      <el-scrollbar>
        <div class="grid-container">
          <div
            v-for="(box, index) in merterielBoxes"
            :key="index"
            class="suit-box"
            @click="testClick(index)"
          >
            <div>
              <div class="suit-title">{{ box?.materialName }}</div>
              <div class="suit-desc">{{ box?.spec }}</div>
            </div>
            <div>
              <div>
                <span class="suit-count">{{ box?.totalNum }}</span>
                <span class="suit-desc">{{ box?.unit }}</span>
              </div>
              <div class="suit-desc">当前库存</div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>

  <!-- <CallHistory ref="callHistoryRef" />
  <MarterielBoxDetail ref="materielBoxDetailRef" />
  <ChangeCount ref="changeCountRef" description="双面胶黑色" title="叫料数量" />
  <ConfirmMessage ref="confirmMessageRef" /> -->
</template>

<script lang="ts" setup>
// import CallHistory from "@/views/pro-operation/call-materiel/components/call-history.vue";
// import MarterielBoxDetail from "@/views/pro-operation/call-materiel/components/materiel-box-detail.vue";
// import ChangeCount from "@/components/CommonDialogs/ChangeCount.vue";
// import ConfirmMessage from "@/components/CommonDialogs/ConfirmMessage.vue";
import { stockMaterialList, accessoriesList } from "@/api/process/callMateriel";
import { useProcessStore } from "@/store/modules/processView";
import { useDictionaryStore } from "@/store/modules/dictionary";

const processStore = useProcessStore();
const dictStore = useDictionaryStore();
const leftTrees = ref<any[]>([]);
const leftTreeIndex = ref(0);
const merterielBoxes = ref<any>([]);
const changeRightEl = (row, index) => {
  leftTreeIndex.value = index;
  accessoriesDataList(index);
};
const testClick = () => {
  console.log("here---in");
};
const accessoriesDataList = (index) => {
  const firstObj = leftTrees?.value[index];
  //dictLabel: "炼胶",dictSort: 1,dictValue: "1"
  const queryAccessoriesParam = {
    accessoriesType: firstObj.dictValue,
    pageNo: 0,
    pageSize: 1000,
  };

  // 获取数据
  accessoriesList(queryAccessoriesParam).then((res) => {
    // console.log("onMounted", res.data);
    merterielBoxes.value = res.data;
  });
};
onMounted(() => {
  console.log("dictS.dicts", dictStore.dicts.accessories_type);
  leftTrees.value = dictStore?.dicts?.accessories_type;
  if (leftTrees?.value) {
    accessoriesDataList(0);
  }
});
</script>

<style lang="scss" scoped>
.container-desperse {
  display: flex;
  .left {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 300px;
    .box-item {
      border: 1px solid red;
      width: 100%;
      text-align: center;
      line-height: 80px;
      height: 80px;
    }
    .hoverEffect {
      color: blue;
      // text-decoration: underline;
      // background-color: red;
    }
  }

  .right {
    flex: 1;
    // margin-left: 12%;
  }
}
.grid-container {
  width: 100%;
  display: grid;
  /*行间距*/
  grid-row-gap: 24px;
  /*列间距*/
  grid-column-gap: 24px;

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

  .suit-box {
    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;
    }

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