1.叫料布局。

src/router/index.ts

@@ -132,6 +132,17 @@ export const constantRoutes: RouteRecordRaw[] = [
           },
         ],
       },
+      {
+        path: "call-materiel",
+        component: () =>
+          import("@/views/pro-operation/call-materiel/index.vue"),
+        name: "call-materiel",
+        meta: {
+          title: "叫料",
+          icon: "homepage",
+          back: true,
+        },
+      },
     ],
   },
 

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

@@ -0,0 +1,69 @@
+<template>
+  <el-scrollbar>
+    <div class="grid-container">
+      <div v-for="(box, index) in merterielBoxes" :key="index" class="suit-box">
+        <div class="suit-title">{{ box.title }}短发的</div>
+        <div class="suit-desc">{{ box.desc }}对待</div>
+      </div>
+    </div>
+  </el-scrollbar>
+</template>
+
+<script lang="ts" setup>
+const merterielBoxes = ref<any>([
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+]);
+</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: 30px;
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    justify-content: center;
+
+    .suit-title {
+      font-weight: 500;
+      font-size: 20px;
+      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/desperse.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>src/views/pro-operation/call-materiel /desperse</div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,7 @@
+<template>
+  <div>src/views/pro-operation/call-materiel /in-complete-suit</div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,70 @@
+<template>
+  <div class="mainContentBox">
+    <el-tabs
+      v-model="activeName"
+      class="demo-tabs"
+      type="card"
+      @tab-click="handleClick"
+    >
+      <el-tab-pane label="齐套叫料" name="first">
+        <div class="contentBox">
+          <CompleteSuit />
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="未齐套叫料" name="second">
+        <div class="contentBox">
+          <InCompleteSuit />
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="零星叫料" name="third">
+        <div class="contentBox">
+          <Desperse />
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import type { TabsPaneContext } from "element-plus";
+import CompleteSuit from "@/views/pro-operation/call-materiel/complete-suit.vue";
+import InCompleteSuit from "@/views/pro-operation/call-materiel/in-complete-suit.vue";
+import Desperse from "@/views/pro-operation/call-materiel/desperse.vue";
+
+const activeName = ref("first");
+
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event);
+};
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-tabs--card > .el-tabs__header) {
+  height: 80px;
+  border: 0;
+  overflow: hidden;
+  border-radius: 16px 16px 16px 16px;
+}
+
+: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;
+}
+
+:deep(.el-tabs--card > .el-tabs__header .el-tabs__item.is-active) {
+  background: white;
+  border-radius: 16px 16px 16px 16px;
+  border-bottom-color: transparent;
+}
+
+.contentBox {
+  height: calc(100vh - 225px);
+  overflow-y: auto;
+}
+</style>

src/views/pro-operation/report-work/index.vue

@@ -103,7 +103,7 @@ import { useDictionaryStore } from "@/store/modules/dictionary";
 import { getProcessInfo } from "@/api/prosteps";
 
 import { CirclePlus, Remove } from "@element-plus/icons-vue";
-import { reportWork, reportWorkList } from "@/api/process/reportBreak";
+import { reportWork } from "@/api/process/reportBreak";
 
 const processStore = useProcessStore();
 const dictStroe = useDictionaryStore();
@@ -125,13 +125,14 @@ const openReportWorkDrawer = () => {
     processStore.scanInfo.currentState = res.data.currentState;
     if (res.data.currentState !== "start") {
       ElMessage.warning("当前工单状态不允许报工");
-      formDisabled.value = true;
-      reportWorkList(processStore.scanInfo.id).then((res) => {
-        persons.value = res.data || [];
-      });
+      // formDisabled.value = true;
+      // reportWorkList(processStore.scanInfo.id).then((res) => {
+      //   persons.value = res.data || [];
+      // });
+    } else {
+      drawerVisible.value = true;
+      formDisabled.value = false;
     }
-    drawerVisible.value = true;
-    formDisabled.value = false;
   });
 };
 

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

@@ -26,6 +26,8 @@ const reportBreakRef = ref<InstanceType<typeof ReportBreak>>();
 // ================ 报工
 const reportWorkRef = ref<InstanceType<typeof ReportWork>>();
 
+const router = useRouter();
+
 const selectIndex = ref(0);
 const setIndex = (index: number) => {
   selectIndex.value = index;
@@ -33,6 +35,9 @@ const setIndex = (index: number) => {
     case "baogu":
       reportBreakRef.value?.openReportBreakDrawer();
       break;
+    case "jiaoliao":
+      router.push({ name: "call-materiel" });
+      break;
     case "gongweishangliao":
       break;
     case "liuzhuan":