1.零星叫料

src/store/modules/dictionary.ts

@@ -9,6 +9,7 @@ export const useDictionaryStore = defineStore("dictionaryStore", () => {
     "process_state",
     "outsource_state",
     "work_order_seq_state",
+    "accessories_type",
   ];
   const dicts = ref<{ [key: string]: any[] }>({});
 

src/views/pro-operation/call-materiel/components/materiel-box-detail.vue

@@ -10,7 +10,7 @@
       <div class="top-title">{{ boxObj?.vehicleName }}</div>
       <div class="desc-title">{{ boxObj?.vehicleCode }}</div>
       <div class="center-content">
-        <el-scrollbar>
+        <el-scrollbar v-loading="loading">
           <div
             v-for="(item, index) in materielListData"
             :key="index"
@@ -39,7 +39,7 @@
 </template>
 
 <script lang="ts" setup>
-// import { outSuitBox } from "@/api/process/callMateriel";
+import { outSuitBox } from "@/api/process/callMateriel";
 
 const visible = ref(false);
 
@@ -49,6 +49,8 @@ const materielListData = ref<any[]>([]);
 
 const boxObj = ref<any>({});
 
+const loading = ref(false);
+
 const showDialog = (
   box: object,
   listData: any[],
@@ -60,9 +62,10 @@ const showDialog = (
   callBack = callback;
 };
 
-const sure = () => {
-  console.log(boxObj.value);
-  // outSuitBox({vehicleOperationId});
+const sure = async () => {
+  loading.value = true;
+  await outSuitBox({ vehicleOperationId: boxObj.value.id });
+  loading.value = false;
   callBack && callBack();
   visible.value = false;
 };

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

@@ -2,23 +2,23 @@
   <div class="container-desperse">
     <div class="left">
       <div
-        class="box-item"
         v-for="(box, index) in leftTrees"
         :key="index"
-        :class="{ hoverEffect: index === leftTreeIndex }"
+        :class="{ boxSelected: index === leftTreeIndex }"
+        class="box-item"
         @click="changeRightEl(box, index)"
       >
         {{ box.dictLabel }}
       </div>
     </div>
     <div class="right">
-      <el-scrollbar>
+      <el-scrollbar v-loading="loading">
         <div class="grid-container">
           <div
             v-for="(box, index) in merterielBoxes"
             :key="index"
             class="suit-box"
-            @click="testClick(index)"
+            @click="testClick"
           >
             <div>
               <div class="suit-title">{{ box?.materialName }}</div>
@@ -36,35 +36,25 @@
       </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 { accessoriesList } from "@/api/process/callMateriel";
 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) => {
+const loading = ref(false);
+const changeRightEl = (row: any, index: number) => {
   leftTreeIndex.value = index;
   accessoriesDataList(index);
 };
 const testClick = () => {
   console.log("here---in");
 };
-const accessoriesDataList = (index) => {
+const accessoriesDataList = (index: number) => {
   const firstObj = leftTrees?.value[index];
   //dictLabel: "炼胶",dictSort: 1,dictValue: "1"
   const queryAccessoriesParam = {
@@ -74,13 +64,17 @@ const accessoriesDataList = (index) => {
   };
 
   // 获取数据
-  accessoriesList(queryAccessoriesParam).then((res) => {
-    // console.log("onMounted", res.data);
-    merterielBoxes.value = res.data;
-  });
+  loading.value = true;
+  accessoriesList(queryAccessoriesParam)
+    .then((res) => {
+      // console.log("onMounted", res.data);
+      merterielBoxes.value = res.data;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
 };
 onMounted(() => {
-  console.log("dictS.dicts", dictStore.dicts.accessories_type);
   leftTrees.value = dictStore?.dicts?.accessories_type;
   if (leftTrees?.value) {
     accessoriesDataList(0);
@@ -91,31 +85,34 @@ onMounted(() => {
 <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;
+      border-radius: 40px;
+
+      &:hover {
+        color: #1482f0;
+      }
     }
-    .hoverEffect {
-      color: blue;
-      // text-decoration: underline;
-      // background-color: red;
+
+    .boxSelected {
+      background: #fff;
+      color: #1482f0;
     }
   }
 
   .right {
     flex: 1;
-    // margin-left: 12%;
+    margin-left: 20px;
   }
 }
+
 .grid-container {
   width: 100%;
   display: grid;

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

@@ -17,7 +17,7 @@
       <!--        </div>-->
       <!--      </el-tab-pane>-->
       <el-tab-pane label="零星叫料" name="third">
-        <div class="contentBox" style="border: 2px solid blueviolet">
+        <div class="contentBox">
           <Desperse />
         </div>
       </el-tab-pane>