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="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>
  </div>
</template>

<script lang="ts" setup>
import router from "@/router";
import { useProcessStore } from "@/store";

const store = useProcessStore();
defineProps<{
  opsArray?: object;
  selectStepIndex: number;
}>();
const emit = defineEmits(["setstepindex"]);
const boxClick = (item, index) => {
  const data1 = JSON.parse(JSON.stringify(store.odersData));
  const data2 = JSON.parse(JSON.stringify(store.processInfo));
  data1.operationId = item.operationId;
  //配置状态机参数
  store.setOdersData({ ...data1 });
  data2.operationCode = item.operationCode;
  data2.operationName = item.operationName;
  store.setProcessInfo({ ...data2 });
  router.push({ path: "/pro-steps" });
  emit("setstepindex", index);
};
</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>