feature/预齐套流程页面设计

src/api/prepare/index.ts

@@ -0,0 +1,32 @@
+import request from "@/utils/request";
+//通过ID获取工序详情
+export function getStation(id: any) {
+  return request({
+    url: "/api/v1/plan/task/station/" + `${id}`,
+    method: "get",
+  });
+}
+//分页获取当前订单列表
+export function workOrderPage(data: any) {
+  return request({
+    url: "/api/v1/plan/workOrder/page",
+    method: "post",
+    data,
+  });
+}
+//预齐套列表数据获取
+export function getListData(data: any) {
+  return request({
+    url: "/api/v1/process/vehicleOperation/operationMaterial",
+    method: "post",
+    data,
+  });
+}
+//预齐套箱数据获取
+export function getBoxInfo(data: any) {
+  return request({
+    url: "/api/v1/process/vehicleOperation/processVehicle",
+    method: "post",
+    data,
+  });
+}

src/components/Empty/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-empty :description="description" :image="emptyImage" />
+  <el-empty :description="description" :image="emptyImage" :size="size" />
 </template>
 
 <script setup lang="ts">
@@ -10,6 +10,9 @@ defineProps({
     type: String,
     default: "暂无数据",
   },
+  size: {
+    type: Number,
+  },
 });
 const emptyImage = ref(EmptyImageSvg);
 </script>

src/components/Pagination/index.vue

@@ -1,15 +1,8 @@
 <template>
   <div :class="{ hidden: hidden }" class="pagination">
-    <el-pagination
-      v-model:current-page="currentPage"
-      v-model:page-size="pageSize"
-      :background="background"
-      :layout="layout"
-      :page-sizes="pageSizes"
-      :total="total"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-    />
+    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :background="background"
+      :layout="layout" :page-sizes="pageSizes" :total="total" @size-change="handleSizeChange"
+      @current-change="handleCurrentChange" :style="`float:${position} `" />
   </div>
 </template>
 
@@ -50,6 +43,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  position: {
+    type: String,
+    default: "left",
+  },
 });
 
 const emit = defineEmits(["pagination", "update:page", "update:limit"]);
@@ -59,7 +56,7 @@ const currentPage = useVModel(props, "page", emit);
 const pageSize = useVModel(props, "limit", emit);
 
 function handleSizeChange(val: number) {
-  emit("pagination", { page: currentPage, limit: val });
+  emit("pagination", { page: currentPage.value, limit: val });
 }
 
 function handleCurrentChange(val: number) {

src/styles/index.scss

@@ -227,3 +227,10 @@
     flex: 1;
   }
 }
+
+//全局表格样式
+//控制字体
+.el-table__cell{
+  font-size: $p20;
+  color: black;
+}

src/views/prepare-complete-suit/components/first.vue

@@ -0,0 +1,246 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :span="5" class="elColClasss">
+      <el-scrollbar>
+        <Order v-for="(item, index) in orderData" :key="index" :hoverStatus="index == selectOrderIndex ? true : false"
+          :item="item" @click="setOrderIndex(index)" />
+        <Empty v-if="orderData.length == 0" />
+      </el-scrollbar>
+    </el-col>
+    <el-col :span="5" class="elColClasss">
+      <el-scrollbar>
+        <Steps :opsArray="opsArray" @setstepindex="setSelectStepIndex" :selectStepIndex="selectStepIndex" />
+      </el-scrollbar>
+    </el-col>
+    <el-col :span="14" class="elColClasss">
+      <div class="rightCol">
+        <div class="showTable">
+          <el-table id="table" :height="tableFlexHeight" :data="tableData">
+            <el-table-column prop="materialName" label="物料名称" width="180" />
+            <el-table-column prop="spec" label="规格" width="180" />
+            <el-table-column prop="totalMaterial" label="所需总数" />
+            <el-table-column prop="completeNum" label="已经装箱数量" />
+            <el-table-column prop="" label="还需装箱数量">
+              <template #default="scope">
+                <span :class="scope.row.totalMaterial - scope.row.completeNum < 0
+                    ? 'sumOk'
+                    : 'sumFail'
+                  ">{{
+    scope.row.totalMaterial - scope.row.completeNum > 0
+    ? scope.row.totalMaterial - scope.row.completeNum
+    : Math.abs(
+      scope.rwo.totalMaterial - scope.row.completeNum
+    )
+  }}</span>
+              </template>
+            </el-table-column>
+
+            <el-table-column label="操作">
+              <template #default="scope">
+                <span class="opera" @click="showInfoPop(scope.row)">查询料箱</span>
+              </template>
+            </el-table-column>
+            <template #empty>
+              <div class="empty">
+                <Empty />
+              </div>
+            </template>
+          </el-table>
+          <Pagination :position="'right'" :page="page" :limit="limit" :total="total" @pagination="getPagination" />
+        </div>
+        <!-- <div class="scanCode">
+          <ScanCode />
+        </div> -->
+      </div>
+    </el-col>
+  </el-row>
+  <div class="scanBox">
+    <el-button type="primary" @click="openPop('扫描料箱')" plain>扫描料箱</el-button>
+  </div>
+  <ScanCode v-model="modelValue" :title="scanCodeTitle" @scancodefnc="scanCodeFnc" />
+  <ShowInfo v-model="infoModelValue" />
+</template>
+
+<script lang="ts" setup>
+import Order from "./order.vue";
+import Steps from "./steps.vue";
+import ScanCode from "../popUpView/scanCode.vue";
+import ShowInfo from "../popUpView/showInfo.vue";
+import {
+  getStation,
+  workOrderPage,
+  getListData,
+  getBoxInfo,
+} from "@/api/prepare";
+const orderData = ref([]);
+const opsArray = ref([]);
+const tableData = ref([]);
+const scanCode = ref("");
+const modelValue = ref(false);
+const infoModelValue = ref(false);
+const scanCodeTitle = ref("");
+const total = ref(0);
+const page = ref(1);
+const limit = ref(10);
+const selectOrderIndex = ref(0);
+const selectStepIndex = ref(0);
+const tableFlexHeight = ref(0);
+const materialData = ref([]);
+const selectMaterialData = ref([]);
+const selectRowData = ref({});
+provide("scanCode", scanCode);
+provide("materialData", materialData);
+provide("selectMaterialData", selectMaterialData);
+provide("selectRowData", selectRowData);
+const showInfoPop = async (row: any) => {
+  //获取对应row箱子数据
+  selectRowData.value = row;
+  await getMaterialData(row.materialCode);
+  infoModelValue.value = true;
+};
+//扫描料箱
+const scanCodeFnc = async () => {
+  
+};
+const isInclude = () => {
+  let res = false;
+  tableData.value.forEach((item) => {
+    if (item.materialCode == scanCode.value) {
+      res = true;
+    }
+  });
+  return res;
+};
+const getPagination = (obj: any) => {
+  page.value = obj.page;
+  limit.value = obj.limit;
+  getTableData();
+};
+const openPop = (title: string) => {
+  scanCodeTitle.value = title;
+  modelValue.value = true;
+};
+//获取封箱数据
+const getMaterialData = async (code: string) => {
+  const { data } = await getBoxInfo({
+    materialCode: code,
+    pageNo: 1,
+    pageSize: 9999,
+    operationId: opsArray.value[selectStepIndex.value].operationId,
+    workOrderCode: orderData.value[selectOrderIndex.value].workOrderCode,
+  });
+  materialData.value = data;
+};
+//获取当前订单信息数据
+const getOrderData = async () => {
+  const { data } = await workOrderPage({
+    itemAllotState: "0",
+    pageNo: 1,
+    pageSize: 999,
+  });
+  orderData.value = data.records;
+};
+
+const setOrderIndex = (index: number) => {
+  selectOrderIndex.value = index;
+  getStationData(orderData.value[selectOrderIndex.value].workOrderCode);
+};
+const getStationData = async (id: any) => {
+  const { data } = await getStation(id);
+  opsArray.value = data;
+};
+const getTableData = async () => {
+  const { data } = await getListData({
+    operationId: opsArray.value[selectStepIndex.value].operationId,
+    workOrderCode: orderData.value[selectOrderIndex.value].workOrderCode,
+    pageNo: page.value,
+    pageSize: limit.value,
+  });
+  tableData.value = data.records;
+  total.value = data.totalCount;
+};
+const setSelectStepIndex = (index: number) => {
+  selectStepIndex.value = index;
+  getTableData();
+};
+onMounted(async () => {
+  tableFlexHeight.value = document.getElementById("table");
+  await getOrderData();
+  setOrderIndex(0);
+});
+</script>
+
+<style lang="scss" scoped>
+.sumOk {
+  color: #67c23a;
+}
+
+.sumFail {
+  color: #f56c6c;
+}
+
+:deep(.el-table__inner-wrapper:before) {
+  width: 0 !important;
+}
+
+.opera {
+  color: var(--el-color-primary);
+  font-size: $f20;
+  cursor: pointer;
+}
+
+.scanBox {
+  width: calc(100vw - 942px);
+  height: 80px;
+  position: fixed;
+  right: 24px;
+  top: 80px;
+  display: flex;
+  border-radius: 16px;
+  justify-content: space-evenly;
+  padding: 0 20px;
+
+  .el-button {
+    background-color: #0a59f7;
+    color: white;
+    height: 100%;
+    flex: 1;
+    border-radius: 16px;
+    font-size: $f24;
+    font-weight: $Medium;
+  }
+}
+
+.elColClasss {
+  padding-bottom: 69px;
+
+  .rightCol {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .showTable {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+
+      #table {
+        flex: 1;
+        border-radius: 16px;
+        max-height: 100%;
+
+        .empty {
+          @include flex;
+        }
+      }
+    }
+
+    .scanCode {
+      flex: 1;
+      padding-bottom: $p10;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}
+</style>

src/views/prepare-complete-suit/components/order.vue

@@ -0,0 +1,138 @@
+<template>
+  <!-- 子订单盒子 -->
+  <div :class="hoverStatus ? 'body bodyHover ' : 'body'">
+    <div class="topArea">
+      <div class="productName">{{ item.materialName }}</div>
+      <div class="productMsg">
+        <span :class="hoverStatus ? 'msgName msgNameHover' : 'msgName'">产品型号</span>
+        <span class="msgValue">{{ item.materialModel }}</span>
+      </div>
+      <div class="productMsg">
+        <span :class="hoverStatus ? 'msgName msgNameHover' : 'msgName'">工单编号</span>
+        <span class="msgValue">{{ item.workOrderCode }}</span>
+      </div>
+      <div class="productMsg">
+        <span :class="hoverStatus ? 'msgName msgNameHover' : 'msgName'">计划编号</span>
+        <span class="msgValue">{{ item.orderCode }}</span>
+      </div>
+    </div>
+    <div class="bottomArea">
+      <div class="bottomBox">
+        <div class="boxNum">{{ parseInt(item.planNum) }}</div>
+        <div :class="hoverStatus ? 'boxText boxTextHover' : 'boxText'">
+          产品数量
+        </div>
+      </div>
+      <div class="textDivider">
+        <div class="dividerBox">
+          <el-divider direction="vertical" style="height: 60%" />
+        </div>
+      </div>
+      <div class="bottomBox">
+        <div class="boxNum">{{ parseInt(item.planNum) }}</div>
+        <div :class="hoverStatus ? 'boxText boxTextHover' : 'boxText'">
+          主料齐套
+        </div>
+      </div>
+    </div>
+    <!-- 右下角状态盒子 -->
+    <div class="statusBox">未开始</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  hoverStatus: { type: Boolean, defalut: false },
+  item: {
+    type: Object,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+//盒子间隔在MAR-bottom
+.body {
+  position: relative;
+  width: 100%;
+  height: 244px;
+  border-radius: 16px;
+  margin-bottom: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 15px 0 15px 20px;
+  background-color: #ffffff;
+}
+
+.bodyHover {
+  background-color: $select-hover;
+  color: white;
+}
+
+.boxTextHover {
+  color: white !important;
+}
+
+.productName {
+  font-size: $f24;
+}
+
+.msgName {
+  font-size: $f20;
+  color: $font-default-60;
+}
+
+.msgNameHover {
+  color: white !important;
+}
+
+.msgValue {
+  margin-left: 5px;
+  font-size: $f20;
+}
+
+.bottomArea {
+  height: 60px;
+}
+
+.bottomBox {
+  width: 80px;
+  display: inline-block;
+}
+
+.textDivider {
+  display: inline-block;
+
+  .dividerBox {
+    height: 60px;
+    display: flex;
+  }
+}
+
+.boxNum {
+  text-align: center;
+  line-height: 38px;
+  font-size: $f38;
+}
+
+.boxText {
+  text-align: center;
+  font-size: $f20;
+  line-height: 20px;
+  color: $font-default-60;
+}
+
+.statusBox {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 90px;
+  height: 40px;
+  border-radius: 10px 0 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: $select-hover;
+  font-size: $f20;
+}
+</style>

src/views/prepare-complete-suit/components/second.vue

@@ -0,0 +1,7 @@
+<template>
+  <div><input /></div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>

src/views/prepare-complete-suit/components/steps.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="body">
+    <div class="steps" v-for="(item, index) in opsArray" :key="index" @click="boxClick(item, index)">
+      <div :class="selectStepIndex == index ? 'stepBox stepBoxHover' : 'stepBox'">
+        <div style="display: flex; align-items: center">
+          <div :class="selectStepIndex == index
+              ? 'stepIndex stepIndexHover'
+              : 'stepIndex'
+            ">
+            <span :class="selectStepIndex == index
+                ? 'indexText hoverTextColor'
+                : 'indexText'
+              ">{{ index + 1 }}</span>
+          </div>
+          <div class="midTextBox">
+            <div :class="selectStepIndex == index ? 'stepName stepNameHover' : 'stepName'
+              ">
+              {{ item.operationName }}
+            </div>
+            <div :class="selectStepIndex == index
+                ? 'stepStation stepStationHover'
+                : 'stepStation'
+              ">
+              {{ item.operationCode }}
+            </div>
+          </div>
+        </div>
+        <div :class="selectStepIndex == index ? 'timeBox timeBoxHover' : 'timeBox'">
+          {{ item.completeNum }}
+        </div>
+      </div>
+      <div class="line" v-if="index != opsArray.length - 1"></div>
+    </div>
+    <el-empty v-if="!opsArray" description="暂无数据" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useProcessStore } from "@/store";
+const store = useProcessStore();
+const props = defineProps({
+  opsArray: { type: Object },
+  selectStepIndex: { type: Number },
+});
+const emit = defineEmits(["setstepindex"]);
+const boxClick = (item, index) => {
+  //第二层参数赋值
+  store.odersData.operationId = item.operationId;
+  store.processInfo.operationCode = item.operationCode;
+  store.processInfo.operationName = item.operationName;
+  emit("setstepindex", index);
+};
+watch(
+  () => props.opsArray,
+  () => {
+    if (props.opsArray.length > 0) {
+      boxClick(props.opsArray[0], 0);
+    }
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+.body {
+  width: 100%;
+}
+
+.stepBox {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 88px;
+  border-radius: 44px;
+  background-color: white;
+  box-shadow: 0px 1px 1px 1px #00000025;
+}
+
+.stepBoxHover {
+  box-shadow: 0px 0px 0px 0px;
+  background-color: $select-hover;
+}
+
+.stepIndexHover {
+  border-color: white !important;
+
+  span {
+    color: white;
+  }
+}
+
+.stepNameHover {
+  color: white !important;
+}
+
+.stepStationHover {
+  color: white !important;
+}
+
+.timeBoxHover {
+  color: white !important;
+}
+
+.hoverTextColor {
+  color: white !important;
+}
+
+.stepIndex {
+  width: 88px;
+  height: 88px;
+  border: 2px solid #303030;
+  border-radius: 44px;
+  @include flex;
+
+  .indexText {
+    font-size: $f24;
+    color: #303030;
+  }
+}
+
+.midTextBox {
+  margin-left: 10px;
+
+  .stepName {
+    font-size: $f24;
+    color: $font-default-black;
+  }
+
+  .stepStation {
+    font-size: $f20;
+    color: $font-default-60;
+    line-height: 20px;
+  }
+}
+
+.timeBox {
+  margin-right: 20px;
+  @include flex;
+  font-size: $f24;
+}
+
+.line {
+  border-right: 1px solid #303030;
+  height: 15px;
+  width: 1px;
+  margin-left: 44px;
+}
+</style>

src/views/prepare-complete-suit/components/third.vue

@@ -0,0 +1,10 @@
+<template>
+  <div></div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang='scss' scoped>
+</style>

src/views/prepare-complete-suit/index.vue

@@ -1,7 +1,72 @@
 <template>
-  <div>src/views/perpair-complete-suit /index预齐套</div>
+  <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">
+          <First />
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="Second" name="second">
+        <div class="contentBox">
+          <Second />
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="Third" name="third">
+        <div class="contentBox">
+          <Third />
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+    <ShowInfo />
+  </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import First from "./components/first.vue";
+import Second from "./components/second.vue";
+import Third from "./components/third.vue";
+import ShowInfo from "./popUpView/showInfo.vue";
+const activeName = ref("first");
 
-<style lang="scss" scoped></style>
+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 - 199px);
+}
+</style>

src/views/prepare-complete-suit/popUpView/bangding.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="midPopUp" v-if="modelValue">
+    <div class="container">
+      <div class="headerTittle">绑定确认</div>
+      <el-scrollbar style="padding: 0 20px">
+        <div class="infoBox" v-for="item in selectedItem">{{ item.name }}</div>
+      </el-scrollbar>
+      <div class="bottomBtn">
+        <el-button class="leftBtn" @click="handleClose">取消</el-button>
+        <el-button class="rightBtn" @click="emits('submit')" type="primary">绑定</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 0,
+  },
+});
+const emits = defineEmits(["update:modelValue"]);
+const materialData = inject("materialData");
+const selectedItem = computed(() =>
+  materialData.value.filter((item) => item.selected == true)
+);
+const handleClose = () => emits("update:modelValue", false);
+</script>
+
+<style lang="scss" scoped>
+.midPopUp {
+  z-index: 4;
+}
+
+.container {
+  background-color: #f1f3f5;
+}
+
+.infoBox {
+  width: 100%;
+  height: 80px;
+  background-color: white;
+  border-radius: 16px;
+  margin-bottom: $p10;
+}
+
+.bottomBtn {
+  width: 100%;
+  height: 70px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: $p10 10% 0 10%;
+
+  .leftBtn {
+    height: 55px;
+    width: 45%;
+    border-radius: 16px;
+    font-size: $f20;
+    color: black;
+    background-color: #00000015;
+    border: 0px;
+  }
+
+  .rightBtn {
+    height: 55px;
+    width: 45%;
+    border-radius: 16px;
+    font-size: $f20;
+    color: white;
+  }
+}
+</style>

src/views/prepare-complete-suit/popUpView/bindingScan.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="midPopUp" v-if="modelValue">
+    <div class="container">
+      <div class="headerTittle">料箱绑定</div>
+      <div class="body">
+        <div class="boxInfo">
+          <div class="info"></div>
+          <el-table class="infoTable" :data="selectIndexInfoData" border>
+            <el-table-column prop="materialName" label="物料名称" width="120" />
+            <el-table-column prop="materialNo" label="物料编号" />
+            <el-table-column prop="num" label="出入库数量" />
+            <el-table-column prop="coordinate" label="储位坐标" />
+            <template #empty>
+              <Empty />
+            </template>
+          </el-table>
+        </div>
+        <div class="scan">
+          <div style="padding: 0 20px">
+            <ScanCodeInput />
+          </div>
+          <el-scrollbar class="scrollbarBox">
+            <div class="infoBox" v-for="item in 8">
+              {{ item.name }}
+            </div>
+          </el-scrollbar>
+        </div>
+      </div>
+
+      <div class="bottomBtn">
+        <el-button class="leftBtn" @click="handleClose">取消</el-button>
+        <el-button class="rightBtn" @click="emits('submit')" type="primary">绑定</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const emits = defineEmits(["update:modelValue"]);
+const materialData = inject("materialData");
+const selectIndexInfoData = ref([]);
+const selectedItem = computed(() =>
+  materialData.value.filter((item) => item.selected == true)
+);
+const handleClose = () => emits("update:modelValue", false);
+</script>
+
+<style lang="scss" scoped>
+.midPopUp {
+  z-index: 4;
+}
+
+.el-empty {
+  transform: scale(0.7);
+}
+
+.container {
+  width: 90vw;
+  height: 90vh;
+  background-color: #f1f3f5;
+  border-radius: 16px;
+
+  .body {
+    display: flex;
+
+    .boxInfo {
+      width: 50%;
+      padding: 20px;
+      flex: 1;
+
+      .info {
+        width: 100%;
+        height: 120px;
+        border-radius: 16px;
+        background-color: white;
+      }
+
+      .infoTable {
+        width: 100%;
+        margin-top: $p20;
+        min-height: 240px;
+        height: calc(80vh - 260px);
+
+        border-radius: 16px;
+      }
+    }
+
+    .scan {
+      width: 50%;
+      padding: 20px;
+
+      .scrollbarBox {
+        height: calc(80vh - 165px);
+        padding: $p20;
+      }
+    }
+  }
+}
+
+.el-table__empty-block {
+  height: 0 !important;
+}
+
+.infoBox {
+  width: 100%;
+  height: 80px;
+  background-color: white;
+  border-radius: 16px;
+  margin-bottom: $p10;
+}
+
+.bottomBtn {
+  width: 100%;
+  height: 70px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: $p10 10% 0 10%;
+
+  .leftBtn {
+    height: 55px;
+    width: 45%;
+    border-radius: 16px;
+    font-size: $f20;
+    color: black;
+    background-color: #00000015;
+    border: 0px;
+  }
+
+  .rightBtn {
+    height: 55px;
+    width: 45%;
+    border-radius: 16px;
+    font-size: $f20;
+    color: white;
+  }
+}
+</style>

src/views/prepare-complete-suit/popUpView/scanCode.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="midPopUp" @click="handleClose" v-if="modelValue">
+    <div class="container" @click.stop>
+      <div class="headerTittle">{{ title }}</div>
+      <div class="describeText">请扫描料码</div>
+      <ScanCodeInput v-model="scanCode" />
+      <div class="bottomBtn">
+        <el-button class="leftBtn" @click="handleClose">关闭</el-button>
+        <el-button class="rightBtn" @click="handleSubmit" type="primary">确定</el-button>
+      </div>
+    </div>
+    <BindingScan v-model="showBinding" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import ScanCodeInput from "@/components/ScanCodeInput/index.vue";
+import BindingScan from "./bindingScan.vue";
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+  },
+});
+const scanCode = inject("scanCode");
+const showBinding = ref(false);
+const emits = defineEmits(["update:modelValue", "scancodefnc"]);
+const handleClose = () => {
+  emits("update:modelValue", false);
+};
+const handleSubmit = () => {
+  emits("scancodefnc");
+  showBinding.value = true;
+};
+</script>
+
+<style lang="scss" scoped>
+.midPopUp {
+  z-index: 4;
+}
+
+.container {
+  background-color: #f1f3f5;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 300px;
+  padding: 20px 40px;
+}
+
+.infoBox {
+  width: 100%;
+  height: 80px;
+  background-color: white;
+  border-radius: 16px;
+  margin-bottom: $p10;
+}
+
+.bottomBtn {
+  width: 100%;
+  height: 70px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: $p10 10% 0 10%;
+
+  .leftBtn {
+    height: 55px;
+    width: 45%;
+    border-radius: 16px;
+    font-size: $f20;
+    color: black;
+    background-color: #00000015;
+    border: 0px;
+  }
+
+  .rightBtn {
+    height: 55px;
+    width: 45%;
+    border-radius: 16px;
+    font-size: $f20;
+    color: white;
+  }
+}
+</style>

src/views/prepare-complete-suit/popUpView/showInfo.vue

@@ -0,0 +1,284 @@
+<template>
+  <div class="midPopUp" v-if="modelValue">
+    <div class="body">
+      <el-row :gutter="20">
+        <el-col :span="14" class="leftView">
+          <div class="btns">
+            <el-button :class="selectedType == 'default' ? 'activeBtn' : ''" @click="setSelectedType('default')"
+              type="primary" plain>全 部</el-button>
+            <el-button :class="selectedType == 'no' ? 'activeBtn' : ''" @click="setSelectedType('no')" type="primary"
+              plain>不符合</el-button>
+            <el-button :class="selectedType == 'yes' ? 'activeBtn' : ''" @click="setSelectedType('yes')" type="primary"
+              plain>符 合</el-button>
+
+            <div class="submitBox">
+              <el-button type="primary" @click="close" v-if="!bingdingStatus" plain>关 闭</el-button>
+              <el-button type="primary" style="background-color: #f9bf5c90" v-if="!bingdingStatus" @click="binding"
+                plain>绑 定</el-button>
+              <el-button @click="cancelBingding" type="primary" v-if="bingdingStatus" plain>取 消</el-button>
+              <el-button type="primary" @click="submit" style="background-color: #f9bf5c90; color: white; border: 0px"
+                v-if="bingdingStatus" plain>确 认</el-button>
+            </div>
+          </div>
+          <div class="selectInfoBox">
+            <el-scrollbar class="scrollbarTop">
+              <div class="scroll">
+                <div class="needMaterialInfo">
+                  <div>{{ selectRowData.materialName }}</div>
+                  <div>{{ selectRowData.materialCode }}</div>
+                  <div>
+                    已装数量：{{
+                      selectRowData.completeNum
+                      ? selectRowData.completeNum
+                      : "-"
+                    }}
+                  </div>
+                  <div>所需总数：{{ selectRowData.totalMaterial }}</div>
+                  <div>
+                    还需数量：{{
+                      selectRowData.totalMaterial - selectRowData.completeNum
+                    }}
+                  </div>
+                </div>
+                <div class="selectInfoItem" @click="closeTopItem(item.selectedIndex)" v-for="item in setTopItem">
+                  {{ item.name }}
+                </div>
+              </div>
+            </el-scrollbar>
+          </div>
+          <el-scrollbar class="scrollbar">
+            <template v-for="(item, index) in materialData" @click="setSelectIndex(index)">
+              <div :class="item.selected == true ? 'item active' : 'item'" v-if="itemShowStatus(item)">
+                <div>{{ item.name }}</div>
+              </div>
+            </template>
+
+            <Empty v-if="materialData.length < 1" />
+          </el-scrollbar>
+        </el-col>
+        <el-col :span="10">
+          <el-scrollbar class="infoBox">
+            <el-table class="infoTable" :data="selectIndexInfoData" border>
+              <el-table-column prop="materialName" label="物料名称" width="120" />
+              <el-table-column prop="materialNo" label="物料编号" />
+              <el-table-column prop="num" label="出入库数量" />
+              <el-table-column prop="coordinate" label="储位坐标" />
+
+              <template #empty>
+                <Empty />
+              </template>
+            </el-table>
+          </el-scrollbar>
+        </el-col>
+      </el-row>
+    </div>
+    <Bangding v-model="showStatus" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Bangding from "./bangding.vue";
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emits = defineEmits(["update:modelValue"]);
+const selectedType = ref("default");
+const materialData = inject("materialData");
+const selectMaterialData = inject("selectMaterialData");
+const selectRowData = inject("selectRowData");
+const showStatus = ref(false);
+const itemShowStatus = (item: any) => {
+  if (selectedType.value == "default") {
+    return true;
+  } else if (selectedType.value == "yes") {
+    if (item.isEnable == 1) {
+      return true;
+    } else {
+      return false;
+    }
+  } else {
+    if (item.isEnable == 0) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+};
+const bingdingStatus = ref(false);
+const selectIndex = ref(0);
+const setSelectedType = (type: string) => {
+  selectedType.value = type;
+};
+const selectIndexInfoData = computed(() => {
+  if (materialData.value.length > 0) {
+    return materialData.value[selectIndex.value].list;
+  } else {
+    return [];
+  }
+});
+const setSelectIndex = (index: number) => {
+  selectIndex.value = index;
+  if (bingdingStatus.value) {
+    if (materialData.value[selectIndex.value].selected == true) {
+      materialData.value[selectIndex.value].selected = false;
+    } else {
+      materialData.value[selectIndex.value].selected = true;
+    }
+    materialData.value[selectIndex.value].selectedIndex = index;
+  }
+};
+const closeTopItem = (index: number) => {
+  materialData.value[index].selected = false;
+};
+const setTopItem = computed(() => {
+  return materialData.value.filter((item) => item.selected == true);
+});
+const close = () => {
+  emits("update:modelValue", false);
+  reset();
+};
+const binding = () => {
+  bingdingStatus.value = true;
+};
+const cancelBingding = () => {
+  bingdingStatus.value = false;
+};
+const submit = () => {
+  showStatus.value = true;
+};
+const reset = () => {
+  selectedType.value = "default";
+};
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-table__inner-wrapper:before) {
+  width: 0 !important;
+}
+
+.leftView {
+  width: calc(100vw);
+
+  .activeBtn {
+    background-color: #6cc2ff !important;
+    color: white !important;
+    border: 0px !important;
+  }
+}
+
+.body {
+  display: flex;
+  flex: 1;
+  height: 100%;
+  width: 100%;
+  padding: 24px;
+
+  .selectInfoBox {
+    width: 100%;
+    height: 160px;
+    border-radius: 16px;
+    background-color: #ffffff60;
+
+    .scrollbarTop {
+      padding: $p10;
+      height: 170px;
+      width: calc(100vw * 7 / 12 - 34px);
+      margin-bottom: $p10;
+
+      .scroll {
+        display: flex;
+
+        .needMaterialInfo {
+          flex-shrink: 0;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-evenly;
+          width: 200px;
+          height: 140px;
+          border-radius: 16px;
+          background-color: #ffffff60;
+          padding: $p10;
+
+          div {
+            font-size: $p20;
+            line-height: 20px;
+            width: 100%;
+          }
+        }
+
+        .selectInfoItem {
+          margin-left: $p10;
+          flex-shrink: 0;
+          width: 150px;
+          height: 140px;
+          border-radius: 16px;
+          background-color: #ffffff60;
+          background-image: url("@/assets/images/caijiwancheng.png");
+          background-position: right top;
+          background-repeat: no-repeat;
+        }
+      }
+    }
+  }
+
+  .infoBox {
+    height: calc(100vh - 48px);
+    width: calc(100vw * 5 / 12 - 48px);
+    border-radius: 16px;
+    background-color: #ffffff60;
+
+    .infoTable {
+      height: calc(100vh - 48px);
+      background-color: white;
+    }
+  }
+
+  .btns {
+    width: 100%;
+    height: 70px;
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 10px;
+
+    .submitBox {
+      width: 300px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .el-button {
+      width: 150px;
+      height: 60px;
+      border: 1px solid #00000030;
+      font-size: $f24;
+      color: black;
+      background-color: transparent;
+      border-radius: 16px;
+    }
+  }
+
+  .scrollbar {
+    height: calc(100vh - 288px);
+    margin-top: $p10;
+
+    .item {
+      width: 190px;
+      height: 180px;
+      border-radius: 16px;
+      background-color: #ffffff60;
+      display: inline-block;
+      margin: $p20;
+    }
+  }
+}
+
+.active {
+  background-image: url("@/assets/images/caijiwancheng.png");
+  background-position: right top;
+  background-repeat: no-repeat;
+}
+</style>

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

@@ -60,7 +60,6 @@ const setShowSrcList = () => {
     resArray.push(getImgurl(item.imgUrl));
   });
   showSrcList.value = resArray;
-  console.log(resArray, "resArray");
 };
 const getImgListData = async () => {
   const { data } = await getImgList({

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

@@ -1,25 +1,7 @@
 <template>
   <div class="stepsViewScroll">
-    <div class="recordBox">
-      <div class="leftMsg">
-        <div class="msgHeader">
-          <div class="titleText">外围尺寸</div>
-          <div class="describeText">单位：cm</div>
-        </div>
-        <div class="msgFooter">
-          <div class="describeText">单位：cm</div>
-          <div class="describeText">单位：cm</div>
-          <div class="describeText">单位：cm</div>
-        </div>
-      </div>
-      <div class="rightOperate">
-        <div></div>
-        <div class="operate">
-          <div class="describeText operateText">实际值</div>
-          <NumberInput v-model="input" />
-        </div>
-      </div>
-    </div>
+    <div class="operateBox"></div>
+    <div class="operateBox"></div>
   </div>
 </template>
 
@@ -44,8 +26,8 @@ const jiaDisabled = ref(false);
   line-height: 25px;
 }
 
-.recordBox {
-  width: 600px;
+.operateBox {
+  width: 100%;
   height: 210px;
   background-color: white;
   border-radius: 16px;
@@ -54,56 +36,5 @@ const jiaDisabled = ref(false);
   justify-content: space-between;
   align-items: center;
   position: relative;
-
-  .leftMsg {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    height: 170px;
-  }
-
-  .rightOperate {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-
-    .operate {
-      .operateText {
-        margin-bottom: $p5;
-      }
-
-      .operateBox {
-        width: 290px;
-        height: 70px;
-        border: 2px solid black;
-        border-radius: 16px;
-        display: flex;
-        justify-content: space-between;
-
-        .leftBox {
-          width: 70px;
-          height: 70px;
-          @include flex;
-        }
-
-        .showSum {
-          flex: 1;
-          @include flex;
-          border: 2px solid black;
-          border-top: 0px;
-          border-bottom: 0px;
-          font-weight: bold;
-          font-size: $f38;
-        }
-
-        .rightBox {
-          width: 70px;
-          height: 70px;
-          @include flex;
-        }
-      }
-    }
-  }
 }
 </style>

src/views/process/components/transferNum.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="commonTitle">流转卡号</div>
+  <div class="body">
+    <el-scrollbar class="scrollbar">
+      <div class="describeText" v-for="item in 111">
+        60301000012412404150031603010000124124041500360301000012412404150031
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped>
+.body {
+  width: 100%;
+  height: calc(100% - 80px);
+  background-color: white;
+  border-radius: 16px;
+  padding: 20px;
+}
+
+.describeText {
+  color: black;
+  font-weight: $Medium;
+}
+</style>

src/views/process/currentProduction.vue

@@ -2,7 +2,7 @@
   <div class="setFlex">
     <el-row :gutter="20">
       <el-col :span="12" class="elColClasss" style="height: 310px" @click="setOdersData">
-        <CurrentOrderInfo />
+        <TransferNum />
       </el-col>
       <el-col :span="12" class="elColClasss" style="height: 310px">
         <Operate />
@@ -12,7 +12,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import CurrentOrderInfo from "@/views/process/components/currentOrderInfo.vue";
+import TransferNum from "@/views/process/components/transferNum.vue";
 import Operate from "@/views/process/components/operate.vue";
 import ScanCode from "@/views/process/components/scanCode.vue";
 import { useProcessStore } from "@/store";

src/views/process/processes.vue

@@ -1,12 +1,11 @@
 <template>
-  <!-- 工序板块 -->
   <div class="commonTitle">工序[{{ OptArrayLength }}]</div>
   <el-scrollbar class="barHeight">
     <Steps :opsArray="opsArray" @setstepindex="setSelectStepIndex" :selectStepIndex="selectStepIndex" />
   </el-scrollbar>
   <div class="bottomBtn">
     <el-button color="#0A59F7" class="btn" round>
-      <span class="btnText">叫主料</span>
+      <span class="btnText">叫料</span>
     </el-button>
   </div>
 </template>