物料流转修改

src/views/material-flow/creatTask.vue

@@ -1,11 +1,10 @@
 <template>
   <div>
     <el-row :gutter="20">
-      <el-col :span="16">
-        <div class="type-title">当前料箱</div>
-
+      <el-col :span="24">
         <div style="display: flex; margin-bottom: 15px">
-          <div class="current-box">
+          <div class="type-title">当前料箱</div>
+          <div class="current-box" style="width: 25vw">
             <span class="left">料箱id: {{ boxDetail?.rfid ?? "" }}</span>
             <!--            <span class="right">{{ boxDetail?.code || "未绑定料箱" }}</span>-->
           </div>
@@ -13,17 +12,19 @@
             v-model="currentBox"
             :clearable="true"
             placeholder="请扫描或输入料箱编号"
-            style="width: 50%"
+            style="width: 30vw"
             @keyup.enter="enterBox"
           />
         </div>
-
-        <div class="type-title">请扫码物料</div>
-        <ScanCodeInput
-          v-model="scanCodeInput"
-          placeholder="请扫描或输入物料编码"
-          @keyup.enter="handleScanCodeInput"
-        />
+        <div style="display: flex; margin-bottom: 15px">
+          <div class="type-title">请扫码物料</div>
+          <ScanCodeInput
+            v-model="scanCodeInput"
+            style="width: 30vw"
+            placeholder="请扫描或输入物料编码"
+            @keyup.enter="handleScanCodeInput"
+          />
+        </div>
         <div
           v-loading="map.get('getMaterialInfoByLabel')"
           style="height: calc(100vh - 450px); margin-top: 15px"
@@ -32,7 +33,7 @@
             <div class="list-container">
               <div
                 v-for="(item, index) in materialList"
-                :key="index"
+                :key="item"
                 class="list-box"
               >
                 <div>
@@ -60,7 +61,7 @@
           </el-scrollbar>
         </div>
       </el-col>
-      <el-col :span="8">
+      <!-- <el-col :span="8" style="position: relative">
         <div class="type-title">流转终点</div>
         <div class="destination">
           <el-scrollbar>
@@ -72,38 +73,43 @@
               @click="onEndBoxClick(index, item)"
             >
               <div class="name">{{ item.name }}</div>
-              <!--            <div-->
-              <!--              v-if="-->
-              <!--                item.targetType === 'stock' && index === currentDestinationIndex-->
-              <!--              "-->
-              <!--            >-->
-              <!--              <el-select-->
-              <!--                v-model="selectStore"-->
-              <!--                filterable-->
-              <!--                placeholder="请选择"-->
-              <!--                size="large"-->
-              <!--                style="width: 200px"-->
-              <!--                value-key="id"-->
-              <!--              >-->
-              <!--                <el-option-->
-              <!--                  v-for="store in storeMap.get(item.houseNo)"-->
-              <!--                  :key="store.id"-->
-              <!--                  :label="store.name"-->
-              <!--                  :value="store"-->
-              <!--                />-->
-              <!--              </el-select>-->
-              <!--            </div>-->
             </div>
           </el-scrollbar>
         </div>
-        <el-button
-          class="sureBtn el-button-big"
-          type="primary"
-          @click="createTask"
-          >创建任务
-        </el-button>
-      </el-col>
+      </el-col> -->
+      <el-button
+        class="sureBtn el-button-big"
+        type="primary"
+        @click="popStatus = true"
+        >创建任务
+      </el-button>
     </el-row>
+    <!-- 弹窗 -->
+    <div class="midPopUp" v-if="popStatus" @click="handleClose">
+      <div class="container" @click.stop>
+        <div class="body">
+          <div class="destination">
+            <el-scrollbar>
+              <div
+                v-for="(item, index) in destinationList"
+                :key="index"
+                :class="{ selected: index === currentDestinationIndex }"
+                class="end-box"
+                @click="onEndBoxClick(index, item)"
+              >
+                <div class="name">{{ item.name }}</div>
+              </div>
+            </el-scrollbar>
+          </div>
+        </div>
+        <div class="bottomBtn">
+          <el-button class="leftBtn" @click="handleClose">取消</el-button>
+          <el-button class="rightBtn" @click="createTask" type="primary"
+            >确认</el-button
+          >
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -116,7 +122,11 @@ import {
   getStationInfo,
 } from "@/api/process/materialFlow";
 import { useCommonStoreHook, useUserStore } from "@/store";
-
+const popStatus = ref(false);
+const handleClose = () => {
+  popStatus.value = false;
+};
+const submit = () => {};
 const commonS = useCommonStoreHook();
 const userStore = useUserStore();
 const map = commonS.loadingMap;
@@ -235,19 +245,42 @@ const createTask = () => {
 
     scanCodeInput.value = "";
     materialList.value = [];
+    handleClose();
   });
 };
 </script>
 
 <style lang="scss" scoped>
 .type-title {
+  width: 190px;
   font-weight: 500;
   font-size: 30px;
   color: rgba(0, 0, 0, 0.9);
   text-align: left;
   margin-bottom: 15px;
 }
-
+.midPopUp {
+  z-index: 999;
+  .container {
+    display: flex;
+    .body {
+      flex: 1;
+      height: calc(100% - 40px);
+      padding: 0 10%;
+    }
+    .bottomBtn {
+      height: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .el-button {
+        width: 120px;
+        height: 40px;
+        font-size: 20px;
+      }
+    }
+  }
+}
 .current-box {
   background: rgba(0, 0, 0, 0.06);
   border-radius: 16px 16px 16px 16px;
@@ -280,7 +313,7 @@ const createTask = () => {
   /*列间距*/
   grid-column-gap: 24px;
 
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
 
   .list-box {
     height: 210px;
@@ -329,7 +362,7 @@ const createTask = () => {
 }
 
 .destination {
-  height: calc(100vh - 350px);
+  height: calc(100% - 40px);
   margin-top: 15px;
 
   .end-box {
@@ -367,9 +400,13 @@ const createTask = () => {
   height: 80px;
   background: #0a59f7;
   border-radius: 76px 76px 76px 76px;
-  width: 100%;
+  width: 32vw;
   margin-top: 10px;
   font-size: $f24;
+  position: fixed;
+  top: 70px;
+  right: 24px;
+  z-index: 9;
 }
 
 .number {