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

<template>
  <div class="body">
    <div
      :class="item.isOp == true ? 'steps stepsDisabled' : 'steps'"
      v-for="(item, index) in showOpsArray"
      :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>
        </div>
        <div
          :class="selectStepIndex == index ? 'timeBox timeBoxHover' : 'timeBox'"
        >
          {{ item.completeNum }}
        </div>
        <!-- <div style="padding-right: 20px">
          <svg-icon
            icon-class="dangqian"
            size="20"
            v-if="index == selectStepIndex"
          />
        </div> -->
      </div>

      <div class="line" v-if="index != showOpsArray.length - 1"></div>
    </div>

    <el-empty v-if="!opsArray" description="暂无数据" />
    <!-- 弹窗 -->
  </div>
</template>

<script setup>
import { useProcessStore } from "@/store";
import { getScan } from "@/api/process";
const store = useProcessStore();
const props = defineProps({
  opsArray: Object,
  opShowAllStatus: Boolean,
});
const showOpsArray = computed(() => {
  return props.opShowAllStatus ? props.opsArray : props.opsArray.slice(0, 3);
});
const emit = defineEmits(["init"]);
//步骤显示index
const router = useRouter();
const selectStepIndex = inject("selectStepIndex");

const boxClick = (item, index) => {
  if (item.isOp == true) {
    return;
  }
  store.odersData.operationId = item.operationId;
  store.processInfo.operationCode = item.operationCode;
  store.processInfo.operationName = item.operationName;
  selectStepIndex.value = index;
};
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 {}
};
</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: 40px;
  border-radius: 20px;
  background-color: rgb(64, 64, 64);
  box-shadow: 0px 1px 1px 1px #00000025;
}
.stepsDisabled {
  opacity: 0.5;
}
.stepsDisabled:hover {
  cursor: not-allowed; /* 禁止状态 */
}
.stepBoxHover {
  box-shadow: 0px 0px 0px 0px;
  background-color: var(--ohos-area-active-bg);
}

.stepExistsHover {
  cursor: not-allowed;
}

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

.stepIndexHover {
  border-color: white !important;
  background-color: var(--ohos-area-active-bg) !important;
  span {
    color: white !important;
  }
}

.stepNameHover {
  color: white !important;
}

.stepStationHover {
  color: white !important;
}

.timeBoxHover {
  color: white !important;
}

.hoverTextColor {
  color: white !important;
}

.stepIndex {
  width: 40px;
  height: 40px;
  border: 2px solid #303030;
  border-radius: 44px;
  color: var(--ohos-text);
  background-color: rgb(108, 108, 108);
  @include flex;

  .indexText {
    font-size: $f16;
    color: var(--ohos-text);
  }
}

.midTextBox {
  margin-left: 10px;

  .stepName {
    font-size: $f16;
    color: var(--ohos-text);
  }

  .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 black;
  height: 15px;
  width: 1px;
  margin-left: 20px;
}
</style>