1.物料采集弹窗。

src/components/CommonDialogs/MaterialCollectionDG.vue

@@ -0,0 +1,96 @@
+<template>
+  <el-dialog
+    id="custom-dialog"
+    v-model="visible"
+    :close-on-click-modal="false"
+    :title="null"
+    close-icon="null"
+  >
+    <div class="top-title">物料采集[3]</div>
+    <div class="center-content">
+      <div>请选择采集的物料类型</div>
+    </div>
+    <div class="bottom-btns">
+      <el-button class="cancelBtn" @click="visible = false">Cancel</el-button>
+      <el-button class="sureBtn" type="primary" @click="sure"
+        >Confirm
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+//物料采集弹窗
+
+const visible = ref(false);
+
+let callBack: Function | null = null;
+
+const showMCDG = (id: string, callback: Function | null) => {
+  visible.value = true;
+  callBack = callback;
+};
+
+const sure = () => {
+  callBack && callBack();
+  visible.value = false;
+};
+
+defineExpose({
+  showMCDG,
+});
+</script>
+
+<style lang="scss">
+#custom-dialog {
+  background: #f1f3f5;
+  box-shadow: 0px 0px 80px 10px rgba(0, 0, 0, 0.25);
+  border-radius: 16px 16px 16px 16px;
+  width: 924px;
+
+  .top-title {
+    width: 100%;
+    height: 38px;
+    font-weight: 500;
+    font-size: 38px;
+    color: rgba(0, 0, 0, 0.9);
+    text-align: center;
+  }
+
+  .center-content {
+    margin-top: 24px;
+    width: 100%;
+    //height: 200px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 24px;
+    color: rgba(0, 0, 0, 0.9);
+  }
+
+  .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;
+    }
+  }
+}
+</style>

src/views/pro-steps/Jiluxiang.vue

@@ -1,7 +1,18 @@
 <template>
-  <div>jlx</div>
+  <MaterialCollectionDG ref="MaterialCollectionDGRef" />
+  <el-button @click="handleClick">物料采集</el-button>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import MaterialCollectionDG from "@/components/CommonDialogs/MaterialCollectionDG.vue";
+
+const MaterialCollectionDGRef = ref<any>(null);
+const handleClick = () => {
+  MaterialCollectionDGRef.value &&
+    MaterialCollectionDGRef.value.showMCDG("", () => {
+      console.log("采集成功");
+    });
+};
+</script>
 
 <style lang="scss" scoped></style>

src/views/pro-steps/index.vue

@@ -3,11 +3,17 @@
     <el-row :gutter="20">
       <el-col :span="4" class="elColClasss">
         <!-- 侧边栏盒子 -->
+        <Jiluxiang />
       </el-col>
       <el-col :span="20" class="elColClasss">
         <div class="typeContainer">
-          <div v-for="(item, index) in stepComponents" :key="index" :class="getNameClass(index)" class="typeBox"
-            @click="clickToolCom(item, index)">
+          <div
+            v-for="(item, index) in stepComponents"
+            :key="index"
+            :class="getNameClass(index)"
+            class="typeBox"
+            @click="clickToolCom(item, index)"
+          >
             <svg-icon :icon-class="item.compentType" size="30" />
             <div class="name">{{ item.compentName }}</div>
           </div>
@@ -19,6 +25,8 @@
 
 <script setup>
 import { onMounted } from "vue";
+import Jiluxiang from "@/views/pro-steps/Jiluxiang.vue";
+
 const route = useRoute();
 const stepComponents = ref([
   {