JG-CLIENT-TEMP/src/views/process/components/steps.vue

<template>
  <div class="body">
    <div class="steps" v-for="(item, index) in opsArray" :key="index" @click="boxClick(item, index)">
      <div :class="item.opComplete
          ? 'stepBox stepBoxDisabled'
          : item.exists == true
            ? selectStepIndex == index
              ? 'stepBox stepBoxHover'
              : 'stepBox'
            : 'stepBox stepExistsHover'
        ">
        <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 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 router = useRouter();
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
        : true,
  });
};
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 || 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();
      if (selectStepIndex.value !== null) {
        boxClick(props.opsArray[selectStepIndex.value], selectStepIndex.value);
      } else {
        emitFnc();
      }
    } else {
      selectStepIndex.value = null;
    }
  }
);
watch(
  () => scanStatus.value,
  () => {
    selectStepIndex.value = null;
  }
);
onBeforeUnmount(() => {
  emitter.off(EventsNames.PROCESS_STEPOBJ);
});
</script>

<style lang="scss" scoped>
.body {
  width: 100%;
}

.existsText {
  margin-left: 40px;
  font-size: $f16;
  font-weight: 500;
  color: #303030;
}

.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;
}

.stepExistsHover {
  background-color: grey;
  cursor: not-allowed;
}

.stepBoxDisabled {
  background-color: green;
  cursor: not-allowed;
}

.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>