1.叫料修改。

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

@@ -1,7 +1,125 @@
 <template>
-  <div>src/views/pro-operation/call-materiel /in-complete-suit</div>
+  <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.title }}短发的</div>
+          <div class="suit-desc">{{ box.desc }}对待</div>
+        </div>
+        <div>
+          <div>
+            <span class="suit-count">90</span>
+            <span class="suit-desc">件</span>
+          </div>
+          <div class="suit-desc">{{ box.desc }}对待</div>
+        </div>
+      </div>
+    </div>
+  </el-scrollbar>
+  <CallHistory ref="callHistoryRef" />
+  <MarterielBoxDetail ref="materielBoxDetailRef" />
+  <ChangeCount ref="changeCountRef" description="双面胶黑色" title="叫料数量" />
+  <ConfirmMessage ref="confirmMessageRef" />
 </template>
 
-<script lang="ts" setup></script>
+<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";
 
-<style lang="scss" scoped></style>
+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>
+.grid-container {
+  width: 100%;
+  display: grid;
+  /*行间距*/
+  grid-row-gap: 24px;
+  /*列间距*/
+  grid-column-gap: 24px;
+
+  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-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-desc {
+      font-size: 20px;
+      color: rgba(0, 0, 0, 0.6);
+      text-align: left;
+    }
+  }
+}
+</style>

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

@@ -40,6 +40,13 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
 </script>
 
 <style lang="scss" scoped>
+:deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 16px 16px 16px 16px;
+  overflow: hidden;
+  border: 0;
+}
+
 :deep(.el-tabs--card > .el-tabs__header) {
   height: 80px;
   border: 0;
@@ -50,17 +57,20 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
 :deep(.el-tabs--card > .el-tabs__header .el-tabs__item) {
   width: 290px;
   height: 80px;
-  background: rgba(0, 0, 0, 0.1);
   border-radius: 0;
 
   font-weight: 500;
   font-size: 24px;
+  overflow: hidden;
+  background: transparent;
+  border-color: transparent;
 }
 
 :deep(.el-tabs--card > .el-tabs__header .el-tabs__item.is-active) {
   background: white;
   border-radius: 16px 16px 16px 16px;
-  border-bottom-color: transparent;
+  border-color: transparent;
+  overflow: hidden;
 }
 
 .contentBox {