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

<template>
  <div class="body">
    <TransitionGroup name="list">
      <div
        class="steps"
        v-for="(item, index) in opsArray"
        :key="index"
        @click="boxClick(item, index)"
      >
        <div
          :class="
            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>
    </TransitionGroup>
    <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";
import { Transition } from "vue";
import { Translation } from "vue-i18n";
const store = useProcessStore();
const selectSeqArray = inject("selectSeqArray");
const ordersDataArray = inject("ordersDataArray");
const props = defineProps<{
  opsArray?: object;
}>();
//步骤显示index
const router = useRouter();
const selectStepIndex = ref(null);
const selectedOderStatus = inject("selectedOderStatus");
const selectOrderIndex = inject("selectOrderIndex");
const centerDialogVisible = ref(false);
const emitFnc = () => {
  emitter.emit(EventsNames.PROCESS_STEPOBJ, {
    index: selectStepIndex.value,
  });
};
emitter.on(EventsNames.PROCESS_STEPINDEX, (val: any) => {
  selectStepIndex.value = val;
});
emitter.on(EventsNames.PROCESS_REDER, () => {
  selectStepIndex.value = null;
});
// 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.exists != true) return;
  selectSeqArray.value =
    ordersDataArray.value[selectOrderIndex.value].ops[index].seqs;
  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(
  () => selectedOderStatus.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;
  animation-name: bodyHover;
  animation-duration: $animation-duration;
}

.stepExistsHover {
  background-color: grey;
  animation-name: stepHover;
  animation-duration: $animation-duration;
  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>