feature/弹框配置

.env.development

@@ -13,7 +13,7 @@ VITE_APP_UPLOAD_URL = 'http://192.168.101.4:9000'
 # 线上接口地址
 # VITE_APP_API_URL = http://vapi.youlai.tech
 # 开发接口地址
- VITE_APP_API_URL = 'http://192.168.101.4:8079'
+ VITE_APP_API_URL = 'http://192.168.101.90:8079'
 
 ``
 # 是否启用 Mock 服务

src/api/prosteps/espo.ts

@@ -0,0 +1,14 @@
+import request from "@/utils/request";
+
+/**
+ * 获取当前ESPO列表
+ *
+ * @param data
+ */
+export function getImgList(data: any) {
+  return request({
+    url: "/api/v1/process/opEsop/page",
+    method: "post",
+    data,
+  });
+}

src/api/prosteps/wuliaocaiji.ts

@@ -1,21 +1,6 @@
 import request from "@/utils/request";
 
-/**
- * 获取当前订单tags列表
- *
- * @param queryPath
- */
-export function getOpCompent(queryPath: any) {
-  return request({
-    url: "/api/v1/process/opCompent/get" + `${queryPath}`,
-    method: "get",
-  });
-}
-/**
- * 获取当前订单物料列表
- *
- * @param data
- */
+//获取当前订单物料列表
 export function recordList(data: any) {
   return request({
     url: "/api/v1/process/itemRecord/list",
@@ -24,6 +9,16 @@ export function recordList(data: any) {
   });
 }
 
+//采集详情查询
+export function itemInfoList(data: any) {
+  return request({
+    url: "/api/v1/process/itemRecord/itemInfo/list",
+    method: "post",
+    data: data,
+  });
+}
+
+//扫码搜寻物料
 export function searchMaterial(data: any) {
   return request({
     url: "/api/v1/process/itemRecord/searchMaterial",
@@ -32,3 +27,11 @@ export function searchMaterial(data: any) {
   });
 }
 
+//新增物料采集信息
+export function itemRecordAdd(data: any) {
+  return request({
+    url: "/api/v1/process/itemRecord/add",
+    method: "post",
+    data: data,
+  });
+}

src/components/NumberInput/index.vue

@@ -1,31 +1,14 @@
 <template>
   <div class="operate">
-    <div class="describeText operateText">实际值</div>
+    <div class="describeText operateText">{{ title }}</div>
     <div class="operateBox">
       <div class="leftBox">
-        <svg-icon
-          :icon-class="jiaDisabled ? 'bujian' : 'jian'"
-          class="svgStyle"
-          size="25"
-          @click="value = value - step"
-        />
+        <svg-icon :icon-class="jiaDisabled ? 'bujian' : 'jian'" class="svgStyle" size="25"
+          @click="value = value - step" />
       </div>
-      <!--      <div class="showSum">1212</div>-->
-      <el-input
-        v-model="value"
-        :disabled="jiaDisabled"
-        :max="max"
-        :min="min"
-        class="showSum"
-        type="number"
-      />
+      <el-input v-model="value" :disabled="jiaDisabled" :max="max" :min="min" class="showSum" />
       <div class="rightBox">
-        <svg-icon
-          :icon-class="jiaDisabled ? 'bujia' : 'jia'"
-          class="svgStyle"
-          size="25"
-          @click="value = value + step"
-        />
+        <svg-icon :icon-class="jiaDisabled ? 'bujia' : 'jia'" class="svgStyle" size="25" @click="value = value + step" />
       </div>
     </div>
   </div>
@@ -49,6 +32,10 @@ const props = defineProps({
     type: Number,
     default: 1,
   },
+  title: {
+    type: String,
+    default: "实际值",
+  },
 });
 
 const emits = defineEmits(["update:modelValue"]);
@@ -62,7 +49,6 @@ const value = computed({
     return props.modelValue;
   },
   set(val) {
-    console.log("value", val);
     if (val < props.min) {
       val = props.min;
     }
@@ -75,6 +61,28 @@ const value = computed({
 </script>
 
 <style lang="scss" scoped>
+:deep(.el-input__inner) {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  font-weight: bold;
+  font-size: $f38;
+  color: black;
+}
+
+:deep(.el-input__wrapper) {
+  border: none !important;
+  outline: none;
+  box-shadow: none;
+}
+
+.describeText {
+  font-size: $f20;
+  color: $font-default-60;
+  line-height: 25px;
+  text-align: center !important;
+}
+
 .operate {
   .operateText {
     margin-bottom: $p5;

src/components/ScanCodeInput/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-input v-model="scanCode" placeholder="Please input" class="scanInput" @keyup.enter="enter">
+  <el-input v-model="value" placeholder="Please input" class="scanInput" @keyup.enter="enter">
     <template #prefix>
       <img src="@/assets/icons/shaoma.svg" />
     </template>
@@ -9,28 +9,28 @@
 <script setup lang="ts">
 import { ref, reactive } from "vue";
 const props = defineProps({
-  inputValue: {
-    required: true,
+  modelValue: {
     type: String,
+    default: "",
   },
 });
-const emit = defineEmits(["setinputvalue", "enterfnc"]);
-const scanCode = ref("");
+const emits = defineEmits(["update:modelValue", "enterfnc"]);
 const enter = () => {
-  emit("enterfnc");
+  emits("enterfnc");
 };
-onMounted(() => {
-  scanCode.value = props.inputValue;
-});
-
-watch(scanCode, (newVal) => {
-  emit("setinputvalue", newVal);
+const value = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emits("update:modelValue", val);
+  },
 });
 </script>
 
 <style lang="scss" scoped>
 .scanInput {
-  height: 80px;
+  height: 50px;
   border-radius: 76px;
   overflow: hidden;
   border: 1px solid #00000025;

src/styles/index.scss

@@ -29,9 +29,9 @@
 
 .mainContentBox {
   width: 100%;
-  height: 100%;
-  padding: 24px;
-  overflow-x: auto;
+  height: calc(100vh - 80px);
+  padding: 0  24px 24px 24px;
+  overflow: hidden;
   //background: white;
 }
 

src/styles/variables.scss

@@ -58,3 +58,122 @@ $p20:20px;
   justify-content: center;
   align-items: center
 }
+//字体样式
+.titleText {
+  font-size: $f24;
+  font-weight: $Medium;
+  font-weight: bold;
+}
+
+.describeText {
+  font-size: $f20;
+  color: $font-default-60;
+  line-height: 25px;
+}
+
+
+//公共弹框样式
+
+.midPopUp {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  z-index: 2;
+  background-color: #00000030;
+  top: 0;
+  left: 0;
+  backdrop-filter: blur(5px);
+  @include flex;
+
+  .container {
+    width: 50vw;
+    height: 80vh;
+    background-color: #F1F3F5;
+    border-radius: 16px;
+    padding: $p10;
+    display: flex;
+    flex-direction: column;
+
+    .headerTittle {
+      width: 100%;
+      height: 55px;
+      text-align: center;
+      line-height: 55px;
+      font-size: $f38;
+      font-weight: $Medium;
+    }
+
+    .describeText {
+      width: 100%;
+      height: 40px;
+      text-align: center;
+      line-height: 40px;
+      font-size: $f20;
+      color: $font-default-60;
+    }
+
+    .info {
+      flex: 1;
+    }
+  }
+}
+// 弹框html模板
+// <div class="midPopUp">
+// <div class="container">
+//   <div class="headerTittle">本次存入</div>
+//   <div class="describeText">LX22112233221122</div>
+//   <el-scrollbar>
+//   </el-scrollbar>
+// </div>
+// </div>
+
+.rightFullPopUp {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  z-index: 2;
+  background-color: #00000030;
+  top: 0;
+  left: 0;
+  backdrop-filter: blur(5px);
+
+  .container {
+    width: 50vw;
+    height: 100vh;
+    background-color: #F1F3F5;
+    border-radius: 16px;
+    padding: $p10;
+    display: flex;
+    flex-direction: column;
+    float: right;
+
+    .headerTittle {
+      width: 100%;
+      height: 55px;
+      text-align: center;
+      line-height: 55px;
+      font-size: $f38;
+      font-weight: $Medium;
+    }
+
+    .describeText {
+      width: 100%;
+      height: 40px;
+      text-align: center;
+      line-height: 40px;
+      font-size: $f20;
+      color: $font-default-60;
+    }
+
+    .info {
+      flex: 1;
+    }
+  }
+}
+// <div class="rightFullPopUp" >
+// <div class="container">
+//   <div class="headerTittle">本次存入</div>
+//   <div class="describeText">LX22112233221122</div>
+//   <el-scrollbar />
+// </div>
+// </div>

src/views/pro-steps/Jiluxiang.vue

@@ -2,7 +2,7 @@
   <!-- <MaterialCollectionDG ref="MaterialCollectionDGRef" />
   <el-button @click="handleClick">物料采集</el-button>
   <el-input v-model="input" style="width: 240px" placeholder="Please input" /> -->
-  <el-scrollbar>
+  <el-scrollbar style="padding-bottom: 24px">
     <LeftBarInfo />
     <Operates />
   </el-scrollbar>

src/views/pro-steps/components/ESOP.vue

@@ -1,21 +1,16 @@
 <template>
-  <div class="container">
+  <div class="espoViewStyle">
     <div class="header">
       <div class="imgView">
-        <el-image :style="setImgViewWidth" :src="srcList[selectImgIndex]" :initial-index="selectImgIndex"
-          :preview-src-list="srcList" fit="cover" />
+        <el-image class="img" :src="srcList[selectImgIndex]" :initial-index="selectImgIndex" :preview-src-list="srcList"
+          fit="cover" />
       </div>
 
       <div class="textBox">
         <el-scrollbar :max-height="scrollbarHeight">
           <div class="title">我是啊啊啊啊的的阿德</div>
           <div class="describe">
-            当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业
-            当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业
-            当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业
-            当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业
-            当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业
-            当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业
+            {{ srcList[selectImgIndex].title }}
           </div>
         </el-scrollbar>
       </div>
@@ -37,6 +32,9 @@
 </template>
 
 <script lang="ts" setup>
+import { getImgList } from "@/api/prosteps/espo";
+import { useProcessStore } from "@/store";
+const store = useProcessStore();
 defineOptions({
   name: "Esop",
 });
@@ -49,93 +47,100 @@ const setScrollbarHeight = () => {
   const viewportHeight = window.innerHeight;
   scrollbarHeight.value = viewportHeight - 300;
 };
-const setImgViewWidth = computed(
-  () => `height:${scrollbarHeight.value - 20}px`
-);
-const srcList = ref([
-  "https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF",
-  "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
-  "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
-  "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
-]);
+const srcList = ref([]);
+const getImgListData = async () => {
+  const { data } = await getImgList({
+    // operationId: store.odersData.operationId,
+    operationId: "241",
+    pageNo: 1,
+    pageSize: 999,
+  });
+  srcList.value = data.records;
+};
 onMounted(() => {
   setScrollbarHeight();
+  getImgListData();
 });
 </script>
 
 <style lang="scss" scoped>
-.container {
-  width: calc((100vw / 6 * 5) - 50px);
-  height: calc((100vh - 160px)) !important;
+.espoViewStyle {
+  display: flex;
+  max-height: calc(100vh - 184px);
+  width: calc(100vw / 6 * 5 - 50px);
+  flex-direction: column;
+}
+
+.header {
+  flex: 1;
   display: flex;
+  position: relative;
 
-  .header {
-    width: calc((100vw / 6 * 5) - 50px);
+  .imgView {
     flex: 1;
-    margin-top: $p20;
-    display: flex;
-    position: relative;
+    height: calc(100vh - 294px);
+    @include flex;
+    justify-content: center;
 
-    .imgView {
-      width: calc(100% - 250px);
-      height: calc(100vh - 290px);
-      @include flex;
-      position: absolute;
-      justify-content: center;
+    padding: $p10 0;
+
+    .img {
+      height: 100%;
+      border: 0px solid;
     }
+  }
 
-    .textBox {
-      position: absolute;
-      width: 250px;
-      padding: $p5 $p20;
-      max-height: 100% !important;
-      right: 0;
-
-      .title {
-        font-size: $f24;
-        font-weight: $Medium;
-        width: 100%;
-      }
+  .textBox {
+    width: 30%;
+    min-width: 250px;
+    padding: $p5 $p20;
+    right: 0;
 
-      .describe {
-        font-size: $f20;
-        color: $font-default-60;
-      }
+    .title {
+      font-size: $f24;
+      font-weight: $Medium;
+      width: 100%;
+    }
+
+    .describe {
+      font-size: $f20;
+      color: $font-default-60;
     }
   }
+}
+
+.footer {
+  height: 20%;
+  min-height: 110px;
+  padding: 0 $p10;
 
-  .footer {
-    height: 110px;
-    padding: 0 $p10;
+  .scrollbar-flex-content {
+    display: flex;
 
-    .scrollbar-flex-content {
+    .scrollbar-demo-item {
+      flex-shrink: 0;
       display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 110px;
+      height: 110px;
+      margin-right: 10px;
+      @include flex;
+      border: 2px solid #0a59f7;
+      border-radius: 16px;
+      box-sizing: border-box;
 
-      .scrollbar-demo-item {
-        flex-shrink: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 110px;
-        height: 110px;
-        margin-right: 10px;
-        @include flex;
-        border: 2px solid #0a59f7;
+      .bottomImgBox {
+        width: 90px;
+        height: 90px;
         border-radius: 16px;
-        box-sizing: border-box;
-
-        .bottomImgBox {
-          width: 90px;
-          height: 90px;
-          border-radius: 16px;
 
-          @include flex;
-        }
+        @include flex;
       }
+    }
 
-      .unScrollbarItemBorder {
-        border: 0px;
-      }
+    .unScrollbarItemBorder {
+      border: 0px;
     }
   }
 }

src/views/pro-steps/components/jiluxiang.vue

@@ -15,26 +15,6 @@
       <div class="rightOperate">
         <div></div>
         <NumberInput v-model="input" />
-        <div class="operate">
-          <div class="describeText operateText">实际值</div>
-          <div class="operateBox">
-            <div class="leftBox">
-              <svg-icon
-                :icon-class="jianDisabled ? 'bujian' : 'jian'"
-                class="svgStyle"
-                size="25"
-              />
-            </div>
-            <div class="showSum">1212</div>
-            <div class="rightBox">
-              <svg-icon
-                :icon-class="jiaDisabled ? 'bujia' : 'jia'"
-                class="svgStyle"
-                size="25"
-              />
-            </div>
-          </div>
-        </div>
       </div>
     </div>
   </div>
@@ -44,7 +24,7 @@
 defineOptions({
   name: "Jiluxiang",
 });
-const input = ref<number>(10);
+const input = ref<number>(18);
 const jianDisabled = ref(true);
 const jiaDisabled = ref(false);
 </script>
@@ -62,7 +42,7 @@ const jiaDisabled = ref(false);
 }
 
 .recordBox {
-  width: 600px;
+  min-width: 600px;
   height: 210px;
   background-color: white;
   border-radius: 16px;

src/views/pro-steps/components/shebeijilu.vue

@@ -51,17 +51,7 @@ defineOptions({ name: "Shebeijilu" });
 </script>
 
 <style lang="scss" scoped>
-.titleText {
-  font-size: $f24;
-  font-weight: $Medium;
-  font-weight: bold;
-}
 
-.describeText {
-  font-size: $f20;
-  color: $font-default-60;
-  line-height: 25px;
-}
 
 .recordBox {
   width: 600px;

src/views/pro-steps/components/wuliaocaiji.vue

@@ -1,37 +1,91 @@
 <template>
   <div class="scanCode">
-    <ScanCodeInput />
+    <ScanCodeInput v-model="scanCode" @enterfnc="enterfnc" />
   </div>
-
-  <div class="showCodeBody" v-if="true">
+  <div class="showCodeBody" v-if="opCompentDataList.length < 1">
     <div class="codeBox">
       <img src="@/assets/icons/shaoma.svg" style="width: 134px; height: 134px" />
       <div class="codeText">扫码物料码添加物料</div>
     </div>
   </div>
-  <div class="materialInfoBody">
-    <div class="infoMsg">
+  <div class="materialInfoBody" v-else>
+    <div :class="item.needNum - item.realNum == 0 ? 'infoMsg infoMsgImg' : 'infoMsg'
+      " v-for="item in opCompentDataList" @click="toXQPop(item)">
       <div class="leftMsg">
-        <div class="nameMsg">PCBA-ASSSD电路板</div>
-        <div class="describe">100*100</div>
-        <div class="describe">需求：12112</div>
+        <div class="nameMsg">{{ item.itemName }}</div>
+        <div class="describe">{{ item.itemModel }}</div>
+        <div class="describe">需求：{{ item.needNum }}</div>
       </div>
-      <div class="rightMsg">
-        <div class="sum">50</div>
+      <div class="rightMsg" v-if="item.needNum - item.realNum != 0">
+        <div class="sum">{{ item.needNum - item.realNum }}</div>
         <div class="describe">还需采集</div>
       </div>
       <svg-icon icon-class="jiaobiao" size="25" class="svgStyle" />
     </div>
   </div>
+  <xiangqingPopUp v-model="showXQ" />
+  <caijiRightPopUp v-model="showCJ" />
 </template>
 
 <script lang="ts" setup>
 import ScanCodeInput from "@/components/ScanCodeInput/index.vue";
+import caijiRightPopUp from "../popUpView/caijiRightPopUp.vue";
+import xiangqingPopUp from "../popUpView/xiangqingPopUp.vue";
+import {
+  recordList,
+  searchMaterial,
+  itemInfoList,
+} from "@/api/prosteps/wuliaocaiji";
+import { useProcessStore } from "@/store";
+
 defineOptions({
   name: "Wuliaocaiji",
 });
-
+const store = useProcessStore();
+const scanCode = ref("");
+const showXQ = ref(false);
+const showCJ = ref(false);
+const enterfnc = async () => {
+  // const { code, data } = await searchMaterial({
+  //   operationId: store.odersData.operationId,
+  //   processId: "",
+  //   seqNo: scanCode.value,
+  //   workOrderCode: store.odersData.workOrderCode,
+  // });
+  const { code, data } = await searchMaterial({
+    operationId: "214",
+    processId: "14",
+    seqNo: "1202010000005",
+    workOrderCode: "GD2404150002",
+  });
+  if (code == "200") {
+    showCJ.value = true;
+  }
+};
+const opCompentDataList = ref([]);
+const toXQPop = async (item: any) => {
+  showXQ.value = true;
+};
+//获取tag列表数据
+const getOpCompentData = async () => {
+  // const { data } = await recordList({
+  //   operationId: store.odersData.operationId,
+  //   workOrderCode: store.odersData.workOrderCode,
+  //   pageNo: 1,
+  //   pageSize: 9999,
+  // });
+  const { data } = await recordList({
+    operationId: "241",
+    workOrderCode: "GD2404100005",
+    pageNo: 1,
+    pageSize: 9999,
+  });
+  opCompentDataList.value = data;
+};
 const input = ref("");
+onMounted(() => {
+  getOpCompentData();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -54,7 +108,7 @@ const input = ref("");
   }
 
   .infoMsg {
-    width: 600px;
+    min-width: 600px;
     height: 190px;
     background-color: white;
     border-radius: 16px;
@@ -73,7 +127,7 @@ const input = ref("");
     .describe {
       font-size: $f20;
       color: $font-default-60;
-      line-height: 20px;
+      line-height: 30px;
     }
 
     .leftMsg {

src/views/pro-steps/index.vue

@@ -1,27 +1,29 @@
 <template>
-  <div class="mainContentBox" style="padding: 0 24px">
+  <div class="mainContentBox">
     <el-row :gutter="20">
-      <el-col :span="4" class="elColClasss boxStyle">
+      <el-col :span="4" class="boxStyle">
         <!-- 侧边栏盒子 -->
         <Jiluxiang />
       </el-col>
-      <el-col :span="20" class="elColClasss">
-        <div class="container">
-          <div class="typeContainer">
-            <template v-for="(item, index) in stepComponents" :key="index">
-              <router-link :to="{ name: item.name }">
-                <div :class="getNameClass(index)" class="typeBox" @click="setSelectIndex(index)">
-                  <div class="svgIcon">
-                    <svg-icon :icon-class="item.iconName" size="30" />
+      <el-col :span="20">
+        <div class="typeContainer">
+          <el-scrollbar>
+            <div style="display: flex">
+              <div v-for="(item, index) in stepComponents" :key="index" class="scrollbar-demo-item">
+                <router-link :to="{ name: item.name }">
+                  <div :class="getNameClass(index)" class="typeBox" @click="setSelectIndex(index)">
+                    <div class="svgIcon">
+                      <svg-icon :icon-class="item.iconName" size="30" />
+                    </div>
+                    <div class="name">{{ item.compentName }}</div>
                   </div>
-                  <div class="name">{{ item.compentName }}</div>
-                </div>
-              </router-link>
-            </template>
-          </div>
-          <!-- 二级路由盒子 -->
-          <!-- 页面适配宽度：calc((100vw / 6 * 5) - 50px) -->
-          <el-scrollbar class="routerView">
+                </router-link>
+              </div>
+            </div>
+          </el-scrollbar>
+        </div>
+        <div class="routerView">
+          <el-scrollbar>
             <router-view v-slot="{ Component, route }">
               <keep-alive
                 include="Dianjian,Jiluxiang,Duomeiticaiji,Esop,Jingu,Mingpaibangding,Shebeijilu,Tiaoshipipei,Wuliaocaiji">
@@ -151,22 +153,24 @@ onActivated(() => {
   height: calc(100vh - 80px);
 }
 
-.container {
+.scrollbar-demo-item {
+  flex-shrink: 0;
   display: flex;
-  flex: 1;
-  flex-direction: column;
-  width: 100%;
-  height: calc(100vh - 80px);
+  align-items: center;
+  justify-content: center;
+  height: 80px;
+  width: 135px;
+  border-radius: 16px;
+  text-align: center;
+}
 
-  .typeContainer {
-    width: 100%;
-    overflow-x: auto;
-    display: flex;
-    justify-content: flex-start;
+.typeContainer {
+  width: 100%;
+  height: 80px;
+  overflow-x: auto;
 
-    .svgIcon {
-      @include flex;
-    }
+  .svgIcon {
+    @include flex;
   }
 }
 
@@ -175,7 +179,7 @@ onActivated(() => {
   flex: 1;
   overflow-y: auto;
   width: 100%;
-  height: 100%;
+  height: calc(100vh - 184px);
 }
 
 .typeBox {

src/views/pro-steps/popUpView/caijiRightPopUp.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="rightFullPopUp" v-if="modelValue" @click="handleClose">
+    <div class="container" @click.stop>
+      <div class="headerTittle">物料采集</div>
+      <div class="header">
+        <div class="inputBox">
+          <ScanCodeInput v-model="scanCode" />
+        </div>
+      </div>
+      <el-scrollbar>
+        <div class="body">
+          <div class="infoBox" v-for="item in 7">
+            <div class="leftInfo">
+              <div class="titleText">大号螺丝</div>
+              <div class="describeText">100*200</div>
+              <div class="describeText">批次号:1223341232123124121</div>
+              <div class="describeText">计划编号：1231231231233</div>
+              <div class="describeText">订单编号：1231231231233</div>
+              <div class="describeText">入库单号：1231231231233</div>
+            </div>
+            <div class="rightInput">
+              <div></div>
+              <NumberInput />
+            </div>
+          </div>
+        </div>
+      </el-scrollbar>
+      <div class="bottomBtn">
+        <el-button class="leftBtn" @click="handleClose">取消</el-button>
+        <el-button class="rightBtn" type="primary">确认</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const emits = defineEmits(["update:modelValue"]);
+const props = defineProps<{
+  modelValue: {
+    type: Boolean;
+    default: false;
+  };
+}>();
+const scanCode = ref("");
+const handleClose = () => {
+  emits("update:modelValue", false);
+};
+</script>
+
+<style lang="scss" scoped>
+.header {
+  @include flex;
+  width: 100%;
+  margin: $p10 0;
+
+  .inputBox {
+    width: 75%;
+  }
+}
+
+.describeText {
+  line-height: 25px !important;
+}
+
+.body {
+  .infoBox {
+    width: 100%;
+    height: 200px;
+    background-color: white;
+    border-radius: 16px;
+    display: flex;
+    justify-content: space-between;
+    padding: $p20;
+    background-color: white;
+    border-radius: 16px;
+    margin-bottom: $f10;
+
+    .leftInfo {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      div {
+        text-align: left;
+      }
+    }
+
+    .rightInput {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+  }
+}
+
+.bottomBtn {
+  width: 100%;
+  height: 70px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: $p10 10% 0 10%;
+
+  .leftBtn {
+    height: 55px;
+    width: 45%;
+    border-radius: 16px;
+    font-size: $f20;
+    color: #0a59f7;
+    background-color: #00000015;
+    border: 0px;
+  }
+
+  .rightBtn {
+    height: 55px;
+    width: 45%;
+    border-radius: 16px;
+    font-size: $f20;
+    color: white;
+  }
+}
+</style>

src/views/pro-steps/popUpView/xiangqingPopUp.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="midPopUp" v-if="modelValue" @click.stop="handleClose">
+    <div class="container" @click.stop>
+      <div class="headerTittle">物料详情</div>
+      <div class="infoBox">
+        <div class="leftInfo">
+          <div class="titleText">大号螺丝</div>
+          <div class="describeText">100*200</div>
+          <div class="describeText">计划编号：1231231231233</div>
+          <div class="describeText">订单编号：1231231231233</div>
+          <div class="describeText">入库单号：1231231231233</div>
+        </div>
+        <div class="rightBox">
+          <div></div>
+          <div class="sumBox">
+            <div class="describeText">录入数量</div>
+            <div class="sum">20</div>
+          </div>
+        </div>
+      </div>
+      <el-divider />
+      <el-scrollbar>
+        <div class="body">
+          <div class="info titleText">adadwad</div>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const emits = defineEmits(["update:modelValue"]);
+const props = defineProps<{
+  modelValue: {
+    type: Boolean;
+    default: false;
+  };
+}>();
+const scanCode = ref("");
+const handleClose = () => {
+  emits("update:modelValue", false);
+};
+</script>
+
+<style lang="scss" scoped>
+.el-divider {
+  margin-top: 0;
+}
+
+.header {
+  @include flex;
+  width: 100%;
+  margin: $p10 0;
+
+  .inputBox {
+    width: 75%;
+  }
+}
+
+.describeText {
+  line-height: 25px !important;
+}
+
+.infoBox {
+  width: 100%;
+  height: 200px;
+  border-radius: 16px;
+  display: flex;
+  justify-content: space-between;
+  padding: $p20;
+  border-radius: 16px;
+
+  .leftInfo {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    div {
+      text-align: left !important;
+    }
+  }
+
+  .rightBox {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .sumBox {
+      width: 180px;
+      height: 80px;
+      padding-bottom: 40px;
+      text-align: left;
+
+      .describeText {
+        text-align: left;
+        line-height: 30px;
+      }
+
+      .sum {
+        font-size: $f38;
+        font-weight: bold;
+        line-height: 20px;
+      }
+    }
+  }
+}
+
+.body {
+  padding: 0 $p20;
+
+  .info {
+    width: 100%;
+    height: 70px;
+    padding: 0 $p20;
+    background-color: white;
+    border-radius: 16px;
+    line-height: 70px;
+  }
+}
+</style>

src/views/process/components/scanCode.vue

@@ -5,7 +5,7 @@
     <img class="imgIcon" src="@/assets/icons/shaoma.svg" @click="toProSteps" />
   </div>
   <div class="body">
-    <ScanCodeInput :inputValue="inputValue" @setinputvalue="setInputValue" @enterfnc="toProSteps" />
+    <ScanCodeInput v-model="inputValue" @setinputvalue="setInputValue" @enterfnc="toProSteps" />
   </div>
 </template>