1.叫料历史。 2.数字输入弹窗3.提示弹窗

src/components/CommonDialogs/ChangeCount.vue

@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <el-dialog
+      id="custom-dialog"
+      v-model="visible"
+      :close-on-click-modal="false"
+      :title="null"
+      close-icon="null"
+    >
+      <div class="top-title">{{ title }}</div>
+      <div class="desc-title">{{ description }}</div>
+      <div class="center-content">
+        <NumberInput v-model="countValue" />
+      </div>
+
+      <div class="bottom-btns">
+        <el-button class="cancelBtn" @click="visible = false">取消</el-button>
+        <el-button class="sureBtn" type="primary" @click="sure"
+          >{{ sureText }}
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import NumberInput from "@/components/NumberInput/index.vue";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  description: {
+    type: String,
+    default: "",
+  },
+  sureText: {
+    type: String,
+    default: "确认取出",
+  },
+});
+
+const visible = ref(false);
+
+let callBack: Function | null = null;
+
+const countValue = ref(0);
+
+const showDialog = (count: number, callback: Function | null) => {
+  countValue.value = count;
+  visible.value = true;
+  callBack = callback;
+};
+
+const sure = () => {
+  callBack && callBack(countValue.value);
+  visible.value = false;
+};
+
+defineExpose({
+  showDialog,
+});
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-dialog) {
+  background: #f1f3f5;
+  box-shadow: 0px 0px 80px 10px rgba(0, 0, 0, 0.25);
+  border-radius: 16px;
+}
+
+#custom-dialog {
+  background: #f1f3f5;
+  box-shadow: 0px 0px 80px 10px rgba(0, 0, 0, 0.25);
+  border-radius: 16px 16px 16px 16px;
+  width: 924px;
+  max-height: 80vh;
+
+  .top-title {
+    width: 100%;
+
+    font-weight: 500;
+    font-size: 38px;
+    color: rgba(0, 0, 0, 0.9);
+    text-align: center;
+  }
+
+  .desc-title {
+    font-weight: 400;
+    font-size: 20px;
+    color: rgba(0, 0, 0, 0.6);
+    text-align: center;
+  }
+
+  .center-content {
+    margin-top: 24px;
+    width: 100%;
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .bottom-btns {
+    display: flex;
+    justify-content: center;
+    margin-top: 40px;
+    margin-bottom: 20px;
+
+    .button {
+      margin-right: 20px;
+    }
+
+    .cancelBtn {
+      width: 292px;
+      height: 80px;
+      background: rgba(0, 0, 0, 0.06);
+      border-radius: 76px 76px 76px 76px;
+    }
+
+    .sureBtn {
+      width: 292px;
+      height: 80px;
+      background: #0a59f7;
+      border-radius: 76px 76px 76px 76px;
+    }
+  }
+}
+</style>

src/components/CommonDialogs/ConfirmMessage.vue

@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <el-dialog
+      id="custom-dialog"
+      v-model="visible"
+      :close-on-click-modal="false"
+      :title="null"
+      close-icon="null"
+    >
+      <div class="top-title">{{ title }}</div>
+      <div class="center-content">
+        <div class="desc-title">{{ tip }}</div>
+      </div>
+
+      <div class="bottom-btns">
+        <el-button class="cancelBtn" @click="visible = false">取消</el-button>
+        <el-button class="sureBtn" type="primary" @click="sure"
+          >{{ sureText }}
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const visible = ref(false);
+
+let callBack: Function | null = null;
+
+const title = ref("");
+const tip = ref("");
+const sureText = ref("");
+
+const showDialog = (
+  msg: string,
+  tipText: string,
+  sureTxt: string,
+  callback: Function | null
+) => {
+  title.value = msg;
+  tip.value = tipText;
+  sureText.value = sureTxt;
+  visible.value = true;
+  callBack = callback;
+};
+
+const sure = () => {
+  callBack && callBack();
+  visible.value = false;
+};
+
+defineExpose({
+  showDialog,
+});
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-dialog) {
+  background: #f1f3f5;
+  box-shadow: 0px 0px 80px 10px rgba(0, 0, 0, 0.25);
+  border-radius: 16px;
+}
+
+#custom-dialog {
+  background: #f1f3f5;
+  box-shadow: 0px 0px 80px 10px rgba(0, 0, 0, 0.25);
+  border-radius: 16px 16px 16px 16px;
+  width: 924px;
+  max-height: 80vh;
+
+  .top-title {
+    width: 100%;
+
+    font-weight: 500;
+    font-size: 38px;
+    color: rgba(0, 0, 0, 0.9);
+    text-align: center;
+  }
+
+  .desc-title {
+    font-weight: 400;
+    font-size: 20px;
+    color: rgba(0, 0, 0, 0.9);
+    text-align: center;
+  }
+
+  .center-content {
+    margin-top: 24px;
+    width: 100%;
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .bottom-btns {
+    display: flex;
+    justify-content: center;
+    margin-top: 40px;
+    margin-bottom: 20px;
+
+    .button {
+      margin-right: 20px;
+    }
+
+    .cancelBtn {
+      width: 292px;
+      height: 80px;
+      background: rgba(0, 0, 0, 0.06);
+      border-radius: 76px 76px 76px 76px;
+    }
+
+    .sureBtn {
+      width: 292px;
+      height: 80px;
+      background: #0a59f7;
+      border-radius: 76px 76px 76px 76px;
+    }
+  }
+}
+</style>

src/styles/index.scss

@@ -30,7 +30,7 @@
 .mainContentBox {
   width: 100%;
   height: calc(100vh - 80px);
-  padding: 0  24px 24px 24px;
+  padding: 0 24px 24px 24px;
   overflow: hidden;
   //background: white;
 }
@@ -56,6 +56,7 @@
   color: rgba(0, 0, 0, 0.9);
   text-align: center;
 }
+
 //steps 二级路由页面Scroll样式
 .stepsViewScroll {
   width: calc((100vw / 6 * 5) - 50px);
@@ -93,9 +94,9 @@
   top: 0;
   left: 0;
   backdrop-filter: blur(5px);
- display: flex;
- justify-content: center;
- align-items: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
   .container {
     width: 50vw;
@@ -129,6 +130,7 @@
     }
   }
 }
+
 // 弹框html模板
 // <div class="midPopUp">
 // <div class="container">
@@ -182,6 +184,7 @@
     }
   }
 }
+
 // <div class="rightFullPopUp" >
 // <div class="container">
 //   <div class="headerTittle">本次存入</div>
@@ -196,10 +199,11 @@
   height: 100vh;
   background-color: #F1F3F5;
   border-radius: 16px;
-  padding: 10px;
   display: flex;
   flex-direction: column;
-  float: right;
+  padding-top: 20px;
+  padding-left: 30px;
+  padding-right: 20px;
 
   .headerTittle {
     width: 100%;
@@ -207,7 +211,7 @@
     text-align: center;
     line-height: 55px;
     font-size: 38px;
-    font-weight:500;
+    font-weight: 500;
   }
 
   .describeText {
@@ -222,4 +226,4 @@
   .info {
     flex: 1;
   }
-}
+}

src/views/pro-operation/call-materiel/complete-suit.vue

@@ -1,16 +1,30 @@
 <template>
   <el-scrollbar>
     <div class="grid-container">
-      <div v-for="(box, index) in merterielBoxes" :key="index" class="suit-box">
+      <div
+        v-for="(box, index) in merterielBoxes"
+        :key="index"
+        class="suit-box"
+        @click="testClick(index)"
+      >
         <div class="suit-title">{{ box.title }}短发的</div>
         <div class="suit-desc">{{ box.desc }}对待</div>
         <svg-icon class="svgStyle" icon-class="jiaobiao" size="25" />
       </div>
     </div>
   </el-scrollbar>
+  <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";
+
 const merterielBoxes = ref<any>([
   {},
   {},
@@ -29,6 +43,31 @@ const merterielBoxes = ref<any>([
   {},
   {},
 ]);
+
+// =========叫料历史
+const callHistoryRef = ref<InstanceType<typeof CallHistory>>();
+
+// =========料箱详情
+const materielBoxDetailRef = ref<InstanceType<typeof MarterielBoxDetail>>();
+// =========叫料数量
+const changeCountRef = ref<InstanceType<typeof ChangeCount>>();
+
+// =========确认弹窗
+const confirmMessageRef = ref<InstanceType<typeof ConfirmMessage>>();
+
+const testClick = (index: number) => {
+  callHistoryRef.value?.showDrawer(index);
+  materielBoxDetailRef.value?.showDialog("", () => {});
+  changeCountRef.value?.showDialog(12, (value: number) => {
+    console.log(value);
+  });
+  confirmMessageRef.value?.showDialog(
+    "工位上料提示",
+    "料箱：LX1321312已到达缓存位，是否立即工位上料？",
+    "工位上料",
+    () => {}
+  );
+};
 </script>
 
 <style lang="scss" scoped>

src/views/pro-operation/call-materiel/components/call-history.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <el-drawer
+      v-model="drawerVisible"
+      :show-close="false"
+      :with-header="false"
+      destroy-on-close
+      direction="rtl"
+      size="656px"
+    >
+      <div>
+        <div class="container">
+          <div class="headerTittle">叫料历史</div>
+          <el-scrollbar>
+            <div
+              v-for="(item, index) in historyList"
+              :key="index"
+              class="item-container"
+            >
+              <div>
+                <div class="item-header">{{ item?.header }}header</div>
+                <div class="item-describe">{{ item?.describe1 }}header</div>
+                <div class="item-describe">{{ item?.describe2 }}header</div>
+              </div>
+              <div>
+                <span class="item-count">{{ item?.count }}50</span>
+                <span class="item-unit">{{ item?.unit }}卷</span>
+              </div>
+            </div>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const drawerVisible = ref(false);
+
+const historyList = ref<any>([
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+]);
+
+const showDrawer = () => {
+  drawerVisible.value = true;
+};
+
+const hideDrawer = () => {
+  drawerVisible.value = false;
+};
+
+defineExpose({ showDrawer });
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-drawer) {
+  background: #f1f3f5;
+  box-shadow: 0px 0px 80px 10px rgba(0, 0, 0, 0.25);
+  border-radius: 16px 0px 0px 16px;
+}
+
+:deep(.el-drawer__body) {
+  padding: 0;
+}
+
+.item-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: 30px;
+  padding-right: 20px;
+  height: 122px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.item-header {
+  font-weight: 500;
+  font-size: 24px;
+  color: rgba(0, 0, 0, 0.9);
+  text-align: left;
+}
+
+.item-describe {
+  font-weight: 400;
+  font-size: 20px;
+  color: rgba(0, 0, 0, 0.6);
+  text-align: left;
+}
+
+.item-count {
+  font-weight: bold;
+  font-size: 38px;
+  color: rgba(0, 0, 0, 0.9);
+
+  text-align: right;
+}
+
+.item-unit {
+  font-weight: 500;
+  font-size: 20px;
+  color: rgba(0, 0, 0, 0.6);
+
+  text-align: right;
+}
+</style>

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

@@ -0,0 +1,170 @@
+<template>
+  <div>
+    <el-dialog
+      id="custom-dialog"
+      v-model="visible"
+      :close-on-click-modal="false"
+      :title="null"
+      close-icon="null"
+    >
+      <div class="top-title">料箱详情</div>
+      <div class="desc-title">LX22112233221122</div>
+      <div class="center-content">
+        <el-scrollbar>
+          <div
+            v-for="(item, index) in materielListData"
+            :key="index"
+            class="item-container"
+          >
+            <div>
+              <div class="item-header">{{ item?.header }}header</div>
+              <div class="item-describe">{{ item?.describe1 }}header</div>
+            </div>
+            <div>
+              <span class="item-count">{{ item?.count }}50</span>
+              <span class="item-unit">{{ item?.unit }}个</span>
+            </div>
+          </div>
+        </el-scrollbar>
+      </div>
+
+      <div class="bottom-btns">
+        <el-button class="cancelBtn" @click="visible = false">取消</el-button>
+        <el-button class="sureBtn" type="primary" @click="sure"
+          >确认取出
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const visible = ref(false);
+
+let callBack: Function | null = null;
+
+const materielListData = ref<any>([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]);
+
+const showDialog = (id: string, callback: Function | null) => {
+  visible.value = true;
+  callBack = callback;
+};
+
+const sure = () => {
+  callBack && callBack();
+  visible.value = false;
+};
+
+defineExpose({
+  showDialog,
+});
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-dialog) {
+  background: #f1f3f5;
+  box-shadow: 0px 0px 80px 10px rgba(0, 0, 0, 0.25);
+  border-radius: 16px;
+}
+
+#custom-dialog {
+  background: #f1f3f5;
+  box-shadow: 0px 0px 80px 10px rgba(0, 0, 0, 0.25);
+  border-radius: 16px 16px 16px 16px;
+  width: 924px;
+  max-height: 80vh;
+
+  .top-title {
+    width: 100%;
+
+    font-weight: 500;
+    font-size: 38px;
+    color: rgba(0, 0, 0, 0.9);
+    text-align: center;
+  }
+
+  .desc-title {
+    font-weight: 400;
+    font-size: 20px;
+    color: rgba(0, 0, 0, 0.6);
+    text-align: center;
+  }
+
+  .center-content {
+    margin-top: 24px;
+    width: 100%;
+    height: 500px;
+
+    font-size: 24px;
+    overflow-y: auto;
+    color: rgba(0, 0, 0, 0.9);
+    border-radius: 16px 16px 16px 16px;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+  }
+
+  .bottom-btns {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+    margin-bottom: 20px;
+
+    .button {
+      margin-right: 20px;
+    }
+
+    .cancelBtn {
+      width: 292px;
+      height: 80px;
+      background: rgba(0, 0, 0, 0.06);
+      border-radius: 76px 76px 76px 76px;
+    }
+
+    .sureBtn {
+      width: 292px;
+      height: 80px;
+      background: #0a59f7;
+      border-radius: 76px 76px 76px 76px;
+    }
+  }
+}
+
+.item-container {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: 30px;
+  padding-right: 20px;
+  height: 80px;
+}
+
+.item-header {
+  font-weight: 500;
+  font-size: 24px;
+  color: rgba(0, 0, 0, 0.9);
+  text-align: left;
+}
+
+.item-describe {
+  font-weight: 400;
+  font-size: 20px;
+  color: rgba(0, 0, 0, 0.6);
+  text-align: left;
+}
+
+.item-count {
+  font-weight: bold;
+  font-size: 38px;
+  color: rgba(0, 0, 0, 0.9);
+
+  text-align: right;
+}
+
+.item-unit {
+  font-weight: 500;
+  font-size: 20px;
+  color: rgba(0, 0, 0, 0.6);
+
+  text-align: right;
+}
+</style>