对接辅料的接口

src/api/process/callMateriel.ts

@@ -17,3 +17,11 @@ export function boxSuitDetailByBoxId(p: object) {
     data: p,
   });
 }
+
+export function accessoriesList(data: any) {
+  return request({
+    url: `/api/v1/base/accessories/material/accessoriesList`,
+    method: "post",
+    data: data,
+  });
+}

src/views/pro-operation/call-materiel/desperse.vue

@@ -1,30 +1,42 @@
 <template>
   <div class="container-desperse">
-    <div class="left">2</div>
-    <div class="right">3</div>
-  </div>
-  <!-- <el-scrollbar>
-    <div class="grid-container">
+    <div class="left">
       <div
-        v-for="(box, index) in merterielBoxes"
+        class="box-item"
+        v-for="(box, index) in leftTrees"
         :key="index"
-        class="suit-box"
-        @click="testClick(index)"
+        :class="{ hoverEffect: index === leftTreeIndex }"
+        @click="changeRightEl(box, index)"
       >
-        <div>
-          <div class="suit-title">{{ box?.materialName }}</div>
-          <div class="suit-desc">{{ box?.spec }}</div>
-        </div>
-        <div>
-          <div>
-            <span class="suit-count">{{ box?.num }}</span>
-            <span class="suit-desc">{{ box?.unit }}</span>
+        {{ 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 class="suit-desc">当前库存</div>
         </div>
-      </div>
-    </div> 
-  </el-scrollbar>-->
+      </el-scrollbar>
+    </div>
+  </div>
+
   <!-- <CallHistory ref="callHistoryRef" />
   <MarterielBoxDetail ref="materielBoxDetailRef" />
   <ChangeCount ref="changeCountRef" description="双面胶黑色" title="叫料数量" />
@@ -36,21 +48,43 @@
 // 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 } from "@/api/process/callMateriel";
-// import { useProcessStore } from "@/store/modules/processView";
-// import { useDictionaryStore } from "@/store/modules/dictionary";
+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 merterielBoxes = ref<any>([]);
+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,
+  };
 
-onMounted(() => {
-  // console.log("dictS.dicts", dictStore.dicts.accessories_type);
-  // merterielBoxes.value = dictStore.dicts.accessories_type.keys();
   // 获取数据
-  // stockMaterialList(processStore.scanInfo.materialCode).then((res) => {
-  //   merterielBoxes.value = res.data;
-  // });
+  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>
 
@@ -58,57 +92,71 @@ onMounted(() => {
 .container-desperse {
   display: flex;
   .left {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
     width: 300px;
-    background-color: red;
+    .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%;
-    background-color: black;
   }
 }
-// .grid-container {
-//   width: 100%;
-//   display: grid;
-//   /*行间距*/
-//   grid-row-gap: 24px;
-//   /*列间距*/
-//   grid-column-gap: 24px;
+.grid-container {
+  width: 100%;
+  display: grid;
+  /*行间距*/
+  grid-row-gap: 24px;
+  /*列间距*/
+  grid-column-gap: 24px;
 
-//   grid-template-columns: 1fr 1fr 1fr;
-//   overflow-y: auto;
+  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-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-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-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;
-//     }
-//   }
-// }
+    .suit-desc {
+      font-size: 20px;
+      color: rgba(0, 0, 0, 0.6);
+      text-align: left;
+    }
+  }
+}
 </style>