feature/process页面重构

.env.development

@@ -13,7 +13,7 @@ VITE_APP_UPLOAD_URL = 'http://192.168.101.4:9000'
 # 线上接口地址
 # VITE_APP_API_URL = http://vapi.youlai.tech
 # 开发接口地址
-VITE_APP_API_URL = 'http://192.168.101.4:8079'
+VITE_APP_API_URL = 'http://192.168.101.188:8079'
 # Websocket地址
 VITE_WEBSOCKET_URL = 'ws://192.168.101.4:8079'
 ``

src/components/Pagination/PDFView/index.vue

@@ -1,89 +0,0 @@
-<template>
-  <el-button
-    v-if="contentType === 'button'"
-    :link="isLink"
-    :type="btnType"
-    @click="showPdf"
-  >
-    {{ btnText }}
-  </el-button>
-  <VuePdfEmbed
-    v-else
-    :page="pageNumber"
-    :source="pdfSource"
-    annotation-layer
-    text-layer
-    @click="showPdf"
-  />
-  <el-drawer
-    v-if="needToShowPdf"
-    v-model="visible"
-    :footer="false"
-    :header="false"
-    :show-close="false"
-    destroy-on-close
-    direction="rtl"
-    size="972px"
-  >
-    <VuePdfEmbed
-      :page="showPdfNumber"
-      :source="pdfSource"
-      annotation-layer
-      text-layer
-    />
-  </el-drawer>
-</template>
-
-<script lang="ts" setup>
-import VuePdfEmbed from "vue-pdf-embed";
-// essential styles
-import "vue-pdf-embed/dist/style/index.css";
-
-// optional styles
-import "vue-pdf-embed/dist/style/annotationLayer.css";
-import "vue-pdf-embed/dist/style/textLayer.css";
-
-// either URL, Base64, binary, or document proxy
-const props = defineProps({
-  pdfSource: {
-    type: String,
-    required: true,
-  },
-  pageNumber: {
-    type: Number,
-    default: 0,
-  },
-  needToShowPdf: {
-    type: Boolean,
-    default: false,
-  },
-  contentType: {
-    type: String as PropType<"button" | "pdf">,
-    default: "pdf",
-  },
-  btnText: {
-    type: String,
-    default: "预览",
-  },
-  btnType: {
-    type: String,
-    default: "primary",
-  },
-  isLink: {
-    type: Boolean,
-    default: false,
-  },
-  showPdfNumber: {
-    type: Number,
-    default: 0,
-  },
-});
-
-const visible = ref(false);
-
-const showPdf = () => {
-  visible.value = true;
-};
-</script>
-
-<style lang="scss" scoped></style>

src/utils/common.ts

@@ -6,6 +6,7 @@ enum EventsNames {
   APPOINT_OUT = "APPOINT_OUT",
   //获取当前工序状态 实现叫料按钮的disabled实时效果
   PROCESS_STEPOBJ = "PROCESS_STEPOBJ",
+  PROCESS_STEPINDEX = "PROCESS_STEPINDEX",
 }
 
 export { emitter, EventsNames };

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

@@ -5,7 +5,7 @@
         <el-image class="img" :src="getImgurl(srcList[selectImgIndex]?.imgUrl)" :initial-index="selectImgIndex"
           :preview-src-list="showSrcList" fit="cover" />
       </div>
-
+      <PDFView :need-to-show-pdf="true" :pdf-source="baseUrl + box.drawingPath" />
       <div class="textBox">
         <el-scrollbar :max-height="scrollbarHeight">
           <div class="title">{{ srcList[selectImgIndex]?.title }}</div>
@@ -34,6 +34,7 @@
 <script lang="ts" setup>
 import { getImgList } from "@/api/prosteps/espo";
 import { useProcessStore } from "@/store";
+import PDFView from "@/components/PDFView/index.vue";
 const store = useProcessStore();
 defineOptions({
   name: "Esop",

src/views/process/components/operate.vue

@@ -8,12 +8,13 @@
       </el-button>
     </div>
     <template v-for="(item, index) in operationObjs" :key="index">
-      <div v-if="index == 1
+      <div v-if="
+        index == 1
           ? selectSeqArray.length > 0 && selectSeqIndex > -1
             ? true
             : false
           : true
-        " class="operateBox" @click="handleClick(item)">
+      " 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>
@@ -38,6 +39,7 @@ const operationObjs: { icon?: string; text: string; num?: number }[] = [
     text: "生产履历",
   },
 ];
+const scanStatus = inject("scanStatus");
 const selectSeqArray = inject("selectSeqArray");
 const selectSeqIndex = inject("selectSeqIndex");
 const handleClick = (item: { text: string }) => {

src/views/process/components/order.vue

@@ -36,7 +36,9 @@
       </div>
     </div>
     <!-- 右下角状态盒子 -->
-    <div class="statusBox">{{ dictS.getLableByValue("plan_work_order_state", item.workOrderState) }}</div>
+    <div class="statusBox" :style="`background-color:${planStyle(item.workOrderState).bgColor};`">
+      {{ dictS.getLableByValue("plan_work_order_state", item.workOrderState) }}
+    </div>
   </div>
 </template>
 
@@ -47,6 +49,39 @@ defineProps<{
   hoverStatus?: boolean;
   item: object;
 }>();
+//工单右下角盒子样式动态控制
+const planStyle = (val) => {
+  let obj = {
+    bgColor: "#0A59F7",
+    color: "#FFFFFF",
+  };
+  switch (val) {
+    case "0":
+      obj.bgColor = "#00FFFF";
+      break;
+    case "1":
+      obj.bgColor = "#FF00FF";
+      break;
+    case "2":
+      obj.bgColor = "#FF8080";
+      break;
+    case "3":
+      obj.bgColor = "#008040";
+      break;
+    case "4":
+      obj.bgColor = "#FF8000";
+      break;
+    case "5":
+      obj.bgColor = "#FF0000";
+      break;
+    case "6":
+      obj.bgColor = "#0A59F7";
+      break;
+    default:
+      break;
+  }
+  return obj;
+};
 </script>
 
 <style lang="scss" scoped>

src/views/process/components/scanCode.vue

@@ -11,28 +11,48 @@
 <script lang="ts" setup>
 import ScanCodeInput from "@/components/ScanCodeInput/index.vue";
 import { useProcessStore } from "@/store";
-import { getScan } from "@/api/process";
+
+import { emitter, EventsNames } from "@/utils/common";
 const store = useProcessStore();
 const router = useRouter();
 const inputValue = ref("");
+//选择状态
+const selectOrderIndex = inject("selectOrderIndex");
+//扫码状态
+const scanStatus = inject("scanStatus");
+//选中的oderItem
+const selectSeqArray = inject("selectSeqArray");
+//工序data
+const opsArray = inject("opsArray");
 const toProSteps = () => {
-  if (inputValue.value == "") return ElMessage.error("不能输入空值！");
-  store.odersData.qrCode = inputValue.value;
-  getScanData();
-};
-const getScanData = async () => {
-  const { code, data, msg } = await getScan({
-    operationId: Number(store.odersData.operationId),
-    qrCode: store.odersData.qrCode,
-    workOrderCode: store.odersData.workOrderCode,
-    //stationId暂时随便传一个
-    stationId: 1,
-  });
-  if (code == "200") {
-    store.scanInfo = data;
-    router.push({ path: "/pro-steps" });
+  if (inputValue.value == "") return ElMessage.error("流转卡号不能为空值！");
+
+  if (selectOrderIndex.value == null)
+    return ElMessage.error("请选择所操作工单！");
+  let status = false;
+  for (let i = 0; i < selectSeqArray.value.length; i++) {
+    if (selectSeqArray.value[i].seqNo == inputValue.value) {
+      status = true;
+      opsArray.value = selectSeqArray.value[i].ops;
+      store.odersData.qrCode = inputValue.value;
+    }
   }
+  if (status) {
+    ElMessage.success("扫码成功！");
+    scanStatus.value = true;
+    emitFnc();
+  } else {
+    ElMessage.error("流转卡号有误！");
+    scanStatus.value = false;
+  }
+  inputValue.value = "";
+  // getScanData();
+};
+//扫码成功重置工序index
+const emitFnc = () => {
+  emitter.emit(EventsNames.PROCESS_STEPINDEX, null);
 };
+
 </script>
 
 <style lang="scss" scoped>

src/views/process/components/steps.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="body">
     <div class="steps" v-for="(item, index) in opsArray" :key="index" @click="boxClick(item, index)">
-      <div :class="selectStepIndex == index
-          ? item.exists == true
-            ? 'stepBox stepBoxHover'
+      <div :class="item.opComplete
+          ? 'stepBox stepBoxDisabled'
+          : item.exists == true
+            ? selectStepIndex == index
+              ? 'stepBox stepBoxHover'
+              : 'stepBox'
             : 'stepBox stepExistsHover'
-          : item.opComplete
-            ? 'stepBox stepBoxDisabled'
-            : 'stepBox'
         ">
         <div style="display: flex; align-items: center">
           <div :class="selectStepIndex == index
@@ -36,57 +36,96 @@
           {{ item.completeNum }}
         </div>
       </div>
-      <div v-if="item.exists != true && selectStepIndex == index" class="existsText">
+      <div v-if="item.exists != true" class="existsText">
         注：该工位在计划上未分配此工序任务！
       </div>
       <div class="line" v-if="index != opsArray.length - 1"></div>
     </div>
     <el-empty v-if="!opsArray" description="暂无数据" />
+    <!-- 弹窗 -->
+    <el-dialog v-model="centerDialogVisible" width="500" align-center style="border-radius: 16px">
+      <template #header>
+        <div class="titleText" style="text-align: center">通知</div>
+      </template>
+      <span class="titleText">已选择好工序，点击确认立即开工</span>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="centerDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="getScanData"> 确定 </el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { useProcessStore } from "@/store";
 import { emitter, EventsNames } from "@/utils/common";
+import { getScan } from "@/api/process";
 const store = useProcessStore();
 const props = defineProps<{
   opsArray?: object;
 }>();
 //步骤显示index
 const selectStepIndex = ref(null);
+const scanStatus = inject("scanStatus");
+const centerDialogVisible = ref(false);
 const emitFnc = () => {
   emitter.emit(EventsNames.PROCESS_STEPOBJ, {
     index: selectStepIndex.value,
     lastStatus:
       selectStepIndex.value == null || selectStepIndex.value == 0
         ? false
-        : props.opsArray[selectStepIndex.value - 1].opComplete == false
+        : props.opsArray[selectStepIndex.value - 1].opComplete == false &&
+          props.opsArray[selectStepIndex.value - 1].exists == true
           ? true
           : false,
   });
 };
-const setStepIndex = () => {
-  for (let i = 0; i < props.opsArray.length; i++) {
-    if (props.opsArray[i].opComplete == false) {
-      selectStepIndex.value = i;
-      return;
-    }
-  }
-};
+emitter.on(EventsNames.PROCESS_STEPINDEX, (val: any) => {
+  selectStepIndex.value = val;
+});
+// const setStepIndex = () => {
+//   for (let i = 0; i < props.opsArray.length; i++) {
+//     if (props.opsArray[i].opComplete == false) {
+//       selectStepIndex.value = i;
+//       return;
+//     }
+//   }
+// };
 const boxClick = (item, index) => {
-  if (item.opComplete == true) return;
+  if (item.opComplete == true || item.exists != true) return;
   store.odersData.operationId = item.operationId;
   store.processInfo.operationCode = item.operationCode;
   store.processInfo.operationName = item.operationName;
   selectStepIndex.value = index;
   emitFnc();
+  centerDialogVisible.value = true;
+};
+const getScanData = async () => {
+  try {
+    const { code, data, msg } = await getScan({
+      operationId: Number(store.odersData.operationId),
+      qrCode: store.odersData.qrCode,
+      workOrderCode: store.odersData.workOrderCode,
+      //stationId暂时随便传一个
+      stationId: 1,
+    });
+    if (code == "200") {
+      store.scanInfo = data;
+      router.push({ path: "/pro-steps" });
+    }
+  } catch {
+  } finally {
+    centerDialogVisible.value = false;
+  }
 };
 watch(
   () => props.opsArray,
   () => {
     if (props.opsArray.length > 0) {
       selectStepIndex.value = null;
-      setStepIndex();
+      // setStepIndex();
       if (selectStepIndex.value !== null) {
         boxClick(props.opsArray[selectStepIndex.value], selectStepIndex.value);
       } else {
@@ -97,6 +136,12 @@ watch(
     }
   }
 );
+watch(
+  () => scanStatus.value,
+  () => {
+    selectStepIndex.value = null;
+  }
+);
 onBeforeUnmount(() => {
   emitter.off(EventsNames.PROCESS_STEPOBJ);
 });
@@ -131,10 +176,12 @@ onBeforeUnmount(() => {
 
 .stepExistsHover {
   background-color: red;
+  cursor: not-allowed;
 }
 
 .stepBoxDisabled {
   background-color: grey;
+  cursor: not-allowed;
 }
 
 .stepIndexHover {

src/views/process/main.vue

@@ -27,20 +27,26 @@ const ordersDataArray = ref([]);
 //未完成任务总数
 const ordersSum = ref(0);
 // 获取选中订单的Index
-const selectOrderIndex = ref(NaN);
+const selectOrderIndex = ref(null);
 // 获取选中订单对应流转卡号的Data
 const selectSeqArray = ref([]);
 // 获取选中订单对应流转卡号的index
 const selectSeqIndex = ref(null);
-
+// 扫码变量确认工序
+const scanStatus = ref(false);
+//当前选择的订单对应订单的工序data
+const opsArray = ref([]);
 const setSelectOrderIndex = (value: number) => {
   selectOrderIndex.value = value;
   selectSeqArray.value = ordersDataArray.value[value].seqs;
+  scanStatus.value = false;
 };
 provide("selectSeqIndex", selectSeqIndex);
 provide("ordersDataArray", ordersDataArray);
 provide("selectOrderIndex", selectOrderIndex);
 provide("selectSeqArray", selectSeqArray);
+provide("scanStatus", scanStatus);
+provide("opsArray", opsArray);
 //获取未完成订单的参数
 const ordersQuery = ref({
   orders: [],
@@ -53,6 +59,9 @@ const getOrdersData = async () => {
   const { code, data } = await getOrders(ordersQuery.value);
   if (code == "200") {
     ordersDataArray.value = data.records;
+    ordersDataArray.value.forEach((element, index) => {
+      element.index = index;
+    });
     ordersSum.value = data.totalCount;
   }
 };

src/views/process/orders.vue

@@ -1,16 +1,23 @@
 <template>
-  <div class="commonTitle">待完成订工单[{{ ordersSum }}]</div>
-  <Empty v-if="ordersDataArray.length < 1" />
-  <el-scrollbar class="barHeight">
-    <Order v-for="(item, index) in ordersDataArray" :key="index" @click="setSlectIndex(index)"
-      :hoverStatus="index == selectIndex ? true : false" :item="item" />
-    <el-empty v-if="!ordersDataArray" description="暂无数据" />
-  </el-scrollbar>
+  <div>
+    <div class="commonTitle">待完成工单[{{ ordersSum }}]</div>
+    <el-tabs v-model="activeName" class="demo-tabs" type="card" @tab-click="handleClick">
+      <el-tab-pane label="未完成" name="false" />
+      <el-tab-pane label="已完成" name="ok" />
+    </el-tabs>
+    <el-scrollbar class="barHeight">
+      <Order v-for="(item, index) in selectOrder" :key="index" @click="setSlectIndex(item)"
+        :hoverStatus="item.index == selectIndex ? true : false" :item="item" />
+      <Empty v-if="selectOrder.length < 1" />
+    </el-scrollbar>
+    <Empty v-if="ordersDataArray.length < 1" />
+  </div>
 </template>
 <script lang="ts" setup>
 import Order from "@/views/process/components/order.vue";
 import { useProcessStore } from "@/store";
-
+import { useDictionaryStore } from "@/store";
+const dictS = useDictionaryStore();
 const store = useProcessStore();
 const selectSeqIndex = inject("selectSeqIndex");
 const props = defineProps<{
@@ -18,30 +25,86 @@ const props = defineProps<{
 }>();
 const emit = defineEmits(["getindex"]);
 const ordersDataArray = inject("ordersDataArray");
+const selectOrder = computed(() => {
+  let array = [];
+  if (activeName.value == "ok") {
+    array = ordersDataArray.value.filter((item) => item.workOrderState == "6");
+  } else {
+    array = ordersDataArray.value.filter((item) => item.workOrderState != "6");
+  }
+  return array;
+});
+const activeName = ref("false");
 //这里是存放控制当前选择工序的index
-const selectIndex = ref(0);
-const setSlectIndex = (value: number) => {
-  selectIndex.value = value;
-  store.odersData.productLineId = ordersDataArray.value[value].productLineId;
-  store.odersData.workOrderCode = ordersDataArray.value[value].workOrderCode;
-  store.processInfo.materialName = ordersDataArray.value[value].materialName;
-  store.processInfo.materialModel = ordersDataArray.value[value].materialModel;
+const selectIndex = ref(null);
+const setSlectIndex = (item: object) => {
+  if (item == null) {
+    selectIndex.value = null;
+    return;
+  }
+  selectIndex.value = item.index;
+  store.odersData.productLineId =
+    ordersDataArray.value[selectIndex.value].productLineId;
+  store.odersData.workOrderCode =
+    ordersDataArray.value[selectIndex.value].workOrderCode;
+  store.processInfo.materialName =
+    ordersDataArray.value[selectIndex.value].materialName;
+  store.processInfo.materialModel =
+    ordersDataArray.value[selectIndex.value].materialModel;
   store.odersData.operationId = "";
   store.processInfo.operationCode = "";
   store.processInfo.operationName = "";
   store.useSeqNo = "";
   selectSeqIndex.value = null;
-  emit("getindex", value);
+  emit("getindex", selectIndex.value);
 };
-
-watch(ordersDataArray, () => {
-  if (ordersDataArray.value.length > 0) setSlectIndex(0);
-});
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  setSlectIndex(null);
+  store.odersData.productLineId = "";
+  store.odersData.workOrderCode = "";
+  store.processInfo.materialName = "";
+  store.processInfo.materialModel = "";
+};
+// watch(ordersDataArray, () => {
+//   if (ordersDataArray.value.length > 0) setSlectIndex(0);
+// });
 </script>
 
 <style lang="scss" scoped>
 .barHeight {
-  height: calc(100vh - 170px);
+  height: calc(100vh - 265px);
+}
+
+: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: 11.5vw;
+  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;
 }
 
 .scrollbar-demo-item {

src/views/process/popUpView/operatePop.vue

@@ -44,8 +44,8 @@ const props = defineProps({
   },
 });
 const emits = defineEmits(["update:modelValue"]);
-const gxDisabled = ref(false);
-const lcDisabled = ref(false);
+const gxDisabled = ref(true);
+const lcDisabled = ref(true);
 const callBoxStatus = ref(false);
 //工序叫料
 const opeateCall = () => {
@@ -53,6 +53,7 @@ const opeateCall = () => {
   router.push({ name: "call-materiel" });
   emits("update:modelValue", false);
 };
+const scanStatus = inject("scanStatus");
 const callLast = async () => {
   const { data, code } = await callItems({
     operationId: store.odersData.operationId,
@@ -79,7 +80,8 @@ const lastOpCall = () => {
 };
 //监听工序index等
 emitter.on(EventsNames.PROCESS_STEPOBJ, (data: any) => {
-  if (data.index == null) {
+  console.log(data);
+  if (data.index == null || scanStatus.value == false) {
     lcDisabled.value = true;
     gxDisabled.value = true;
   } else {
@@ -95,13 +97,13 @@ watch(
   () => props.modelValue,
   (val) => {
     if (val == true) {
-      if (lcDisabled.value == false) {
-        if (store.useSeqNo == "") {
-          lcDisabled.value = true;
-        } else {
-          lcDisabled.value = false;
-        }
-      }
+      // if (lcDisabled.value == false) {
+      //   if (store.useSeqNo == "") {
+      //     lcDisabled.value = true;
+      //   } else {
+      //     lcDisabled.value = false;
+      //   }
+      // }
     }
   }
 );

src/views/process/processes.vue

@@ -1,33 +1,42 @@
 <template>
   <div class="commonTitle">工序[{{ OptArrayLength }}]</div>
-  <Empty v-if="opsArray.length < 1" />
   <el-scrollbar class="barHeight">
-    <Steps :opsArray="opsArray" />
+    <div class="titleText notice" v-if="!scanStatus">请先扫码获取工序</div>
+    <template v-else>
+      <Steps :opsArray="opsArray" />
+      <Empty v-if="opsArray.length < 1" />
+    </template>
   </el-scrollbar>
 </template>
 <script lang="ts" setup>
 import Steps from "@/views/process/components/steps.vue";
+const scanStatus = inject("scanStatus");
 //总的订单data
 const ordersDataArray = inject("ordersDataArray");
 //当前选择的订单index
 const selectOrderIndex = inject("selectOrderIndex");
-//当前选择的订单对应订单的工序data
-const opsArray = ref([]);
-const setOptArray = () => {
-  if (selectOrderIndex.value > -1) {
-    opsArray.value = ordersDataArray.value[selectOrderIndex.value].ops;
-  } else {
-    opsArray.value = [];
-  }
-};
+
+const opsArray = inject("opsArray");
+// const setOptArray = () => {
+//   if (selectOrderIndex.value > -1) {
+//     opsArray.value = ordersDataArray.value[selectOrderIndex.value].ops;
+//   } else {
+//     opsArray.value = [];
+//   }
+// };
 const OptArrayLength = computed(() => opsArray.value.length);
-watch(selectOrderIndex, () => {
-  setOptArray();
-});
 </script>
 
 <style lang="scss" scoped>
 .barHeight {
   height: calc(100vh - 170px);
 }
+
+.notice {
+  width: 100%;
+  border-radius: 16px;
+  background-color: white;
+  text-align: center;
+  padding: 60px;
+}
 </style>