1.物料流转 2.报工bug。

src/components/ScanCodeInput/index.vue

@@ -1,13 +1,18 @@
 <template>
-  <el-input v-model="value" placeholder="Please input" class="scanInput" @keyup.enter="enter">
+  <el-input
+    v-model="value"
+    class="scanInput"
+    placeholder="Please input"
+    @blur="enter"
+    @keyup.enter="enter"
+  >
     <template #prefix>
       <img src="@/assets/icons/shaoma.svg" />
     </template>
   </el-input>
 </template>
 
-<script setup lang="ts">
-import { ref, reactive } from "vue";
+<script lang="ts" setup>
 const props = defineProps({
   modelValue: {
     type: String,
@@ -38,7 +43,8 @@ const value = computed({
   color: #00000080;
 
   :deep(.el-input__wrapper) {
-    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
+    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color))
+      inset;
     cursor: default;
 
     .el-input__inner {

src/router/modules/process.ts

@@ -12,7 +12,6 @@ export default {
       name: "ProcessMain",
       meta: {
         title: "process",
-        icon: "homepage",
       },
     },
     {
@@ -21,7 +20,6 @@ export default {
       name: "ProSteps",
       meta: {
         title: "",
-        icon: "homepage",
         keepAlive: true,
         back: true,
       },
@@ -113,7 +111,7 @@ export default {
       name: "call-materiel",
       meta: {
         title: "叫料",
-        icon: "homepage",
+
         back: true,
       },
     },
@@ -123,7 +121,7 @@ export default {
       name: "drawing-list",
       meta: {
         title: "图纸",
-        icon: "homepage",
+
         back: true,
       },
     },
@@ -133,7 +131,17 @@ export default {
       name: "appoint-out",
       meta: {
         title: "委外",
-        icon: "homepage",
+
+        back: true,
+      },
+    },
+    {
+      path: "material-flow",
+      component: () => import("@/views/material-flow/index.vue"),
+      name: "material-flow",
+      meta: {
+        title: "物料流转",
+
         back: true,
       },
     },

src/views/material-flow/creatTask.vue

@@ -0,0 +1,157 @@
+<template>
+  <div>
+    <el-row :gutter="20">
+      <el-col :span="16">
+        <div class="type-title">当前料箱</div>
+
+        <div style="display: flex; margin-bottom: 15px">
+          <ScanCodeInput
+            v-model="currentBox"
+            style="width: 50%"
+            @enterfnc="enterBox"
+          />
+          <div class="current-box">
+            <span class="left">当前料箱</span>
+            <span class="right">{{ currentBox }}</span>
+          </div>
+        </div>
+
+        <div class="type-title">料箱绑定</div>
+        <ScanCodeInput
+          v-model="scanCodeInput"
+          style="width: 50%"
+          @enterfnc="handleScanCodeInput"
+        />
+        <div style="height: calc(100vh - 450px); margin-top: 15px">
+          <el-scrollbar>
+            <div class="list-container">
+              <div
+                v-for="(item, index) in materialList"
+                :key="index"
+                class="list-box"
+              >
+                ddd
+              </div>
+            </div>
+          </el-scrollbar>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="type-title">流转终点</div>
+        <div class="destination">
+          <div
+            v-for="(item, index) in destinationList"
+            :key="index"
+            :class="{ selected: index === currentDestinationIndex }"
+            class="end-box"
+            @click="onEndBoxClick(index)"
+          >
+            ddd
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+//料箱
+const currentBox = ref("");
+const enterBox = () => {
+  console.log("enterBox", currentBox);
+};
+
+// 物料
+const scanCodeInput = ref("");
+const handleScanCodeInput = () => {
+  console.log("handleScanCodeInput", scanCodeInput.value);
+};
+
+const materialList = ref([{}, {}, {}, {}, {}, {}, {}, {}, {}]);
+
+// 流转终点
+const destinationList = ref([{}, {}, {}, {}, {}, {}, {}, {}, {}]);
+const currentDestinationIndex = ref(-1);
+const onEndBoxClick = (index: number) => {
+  currentDestinationIndex.value = index;
+  console.log("onEndBoxClick", index);
+};
+</script>
+
+<style lang="scss" scoped>
+.type-title {
+  font-weight: 500;
+  font-size: 30px;
+  color: rgba(0, 0, 0, 0.9);
+  text-align: left;
+  margin-bottom: 15px;
+}
+
+.current-box {
+  background: rgba(0, 0, 0, 0.06);
+  border-radius: 16px 16px 16px 16px;
+  font-size: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 50%;
+  height: 49px;
+  padding: 0 20px;
+
+  .left {
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.6);
+    text-align: left;
+  }
+
+  .right {
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.9);
+    text-align: right;
+  }
+}
+
+.list-container {
+  width: 100%;
+  display: grid;
+  /*行间距*/
+  grid-row-gap: 24px;
+  /*列间距*/
+  grid-column-gap: 24px;
+
+  grid-template-columns: 1fr 1fr;
+
+  .list-box {
+    height: 210px;
+    background: #fff;
+    border-radius: 16px 16px 16px 16px;
+  }
+}
+
+.destination {
+  height: calc(100vh - 250px);
+  margin-top: 15px;
+  border: 2px solid rgba(0, 0, 0, 0.1);
+
+  .end-box {
+    height: 80px;
+    background: #ffffff;
+    border-radius: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 500;
+    font-size: 24px;
+    color: rgba(0, 0, 0, 0.9);
+  }
+
+  .end-box:not(:last-child) {
+    margin-bottom: 15px;
+  }
+
+  .selected {
+    order-radius: 40px;
+    border: 2px solid rgba(10, 89, 247, 1);
+  }
+}
+</style>

src/views/material-flow/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="mainContentBox">
+    <el-tabs
+      v-model="activeName"
+      class="demo-tabs"
+      type="card"
+      @tab-click="handleClick"
+    >
+      <el-tab-pane label="创建任务" name="first">
+        <CreatTask />
+      </el-tab-pane>
+      <el-tab-pane label="历史记录" name="second">
+        <TaskRecords />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import type { TabsPaneContext } from "element-plus";
+import CreatTask from "@/views/material-flow/creatTask.vue";
+import TaskRecords from "@/views/material-flow/taskRecords.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 .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;
+  overflow: hidden;
+  border-radius: 16px 16px 16px 16px;
+}
+
+:deep(.el-tabs--card > .el-tabs__header .el-tabs__item) {
+  width: 290px;
+  height: 80px;
+  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-color: transparent;
+  overflow: hidden;
+}
+
+.contentBox {
+  height: calc(100vh - 225px);
+  overflow-y: auto;
+}
+</style>

src/views/material-flow/taskRecords.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>src/views/material-flow /taskRecords</div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>

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

@@ -86,7 +86,7 @@
       <div class="bottom-btns">
         <el-button class="cancelBtn" @click="cancelClick">取消</el-button>
         <el-button
-          v-if="formDisabled"
+          v-if="!formDisabled"
           class="sureBtn"
           type="primary"
           @click="confirmClick"

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

@@ -41,6 +41,7 @@ const setIndex = (index: number) => {
     case "gongweishangliao":
       break;
     case "liuzhuan":
+      router.push({ name: "material-flow" });
       break;
     case "tuzhi":
       router.push({ name: "drawing-list" });

src/views/process/components/operate.vue

@@ -1,25 +1,50 @@
 <template>
   <div class="commonTitle">操作</div>
   <div class="body">
-    <div class="operateBox">
-      <span class="operateText">物料流转</span>
-      <svg-icon icon-class="liuzhuan" size="30" />
-    </div>
-    <div class="operateBox">
-      <span class="operateText">取暂存料</span>
-      <div class="operateSum">
-        <span>0</span>
-      </div>
-    </div>
-    <div class="operateBox">
-      <span class="operateText">生产履历</span>
-      <svg-icon icon-class="shengchanlvli" size="30" />
+    <div
+      v-for="(item, index) in operationObjs"
+      :key="index"
+      class="operateBox"
+      @click="handleClick(item)"
+    >
+      <span class="operateText">{{ item.text }}</span>
+      <svg-icon v-if="item.icon" :icon-class="item.icon" size="30" />
+      <span v-else>{{ item.num }}</span>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref } from "vue";
+import router from "@/router";
+
+const operationObjs: { icon?: string; text: string; num?: number }[] = [
+  {
+    icon: "liuzhuan",
+    text: "物料流转",
+  },
+  // {
+  //   text: "取暂存料",
+  //   num: 20,
+  // },
+  {
+    icon: "shengchanlvli",
+    text: "生产履历",
+  },
+];
+
+const handleClick = (item: { text: string }) => {
+  switch (item.text) {
+    case "物料流转":
+      router.push({ name: "material-flow" });
+      break;
+    case "取暂存料":
+      break;
+    case "生产履历":
+      break;
+    default:
+      break;
+  }
+};
 </script>
 
 <style lang="scss" scoped>