test.vue

<template>
  <div class="process__stage">
    <!--<div class="process__stage-interval">
      <ProcessInterval
        :start="stageInfo.start_date"
        :end="stageInfo.end_date"
    />-->
    <div class="process__stage-body">
      <div class="process__stage_date_label">
        <div class="process__stage-interval">
          <ProcessInterval
            :start="stageInfo.start_date"
            :end="stageInfo.end_date"
          ></ProcessInterval>
        </div>
      </div>
      <h4 class="process__stage-name">{{ stageInfo.name }}</h4>
      <p v-if="stageInfo.description" class="process__stage-description">
        {{ stageInfo.description }}
      </p>
      <p
        v-if="stageInfo.state && stageInfo.state.description"
        :class="[
          stageInfo.state.signature === 'Отклонено'
            ? 'process__stage-state1--rejected'
            : '',
          'process__stage-state1',
        ]"
      >
        <span>{{ stageInfo.state.description }}</span>
      </p>
      
      <template v-if="stageInfo.is_ready">
        <router-link
          v-if="
            stageInfo.state !== null &&
            stageInfo.state.signature !== 'НаРассмотрении' &&
            isShowBtns
          "
          :to="stageRoute"
          class="btn process__stage-link"
          >{{ stageInfo.state.button_name }}</router-link
        >

        <button
          v-if="stageInfo.state == null"
          type="button"
          class="btn process__stage-link"
          @click="startStage"
        >
          {{ stageInfo.button_name }}
        </button>
      </template>

      <router-link
        v-if="
          stageInfo.state !== null &&
          stageInfo.state.signature !== 'Отклонено' &&
          stageInfo.state.signature !== 'Новый'
        "
        :to="routeForViewOnly"
        class="btn process__stage-link"
        >{{ $t(getUiItemCaption(signature, 'viewClaim')) }}</router-link
      >
    </div>
  </div>
</template>

<script>
import Axios from '@/utils/Elk-Axios';
import setNotification from '@/utils/setNotification';
import { CREATE_STAGE } from './api';
import { getUiItemCaption, getCommonCaptionByName } from '@/i18n/utils';

import ProcessInterval from '@/components/common/processInterval';

export default {
  name: 'asav-process-stage',

  components: {
    ProcessInterval,
  },

  props: { stageInfo: Object, processId: String },
  inject: ['signature'],

  computed: {
    stageRoute() {
      return {
        name: 'elk.process.step.detail',
        params: {
          process_id: this.processId,
          stage_id: this.stageInfo.url,
        },
      };
    },
    routeForViewOnly() {
      return {
        ...this.stageRoute,
        query: {
          view_only: true,
        },
      };
    },
    isShowBtns() {
      return this.stageInfo.state && !!this.stageInfo.state.button_name;
    },
  },

  methods: {
    getUiItemCaption,
    getCommonCaptionByName,
    setNotification,
    async startStage() {
      try {
        const { status } = await Axios.post(CREATE_STAGE, {
          id: this.processId,
          url: this.stageInfo.url,
        });

        if (status === 200) {
          this.$router.push(this.stageRoute);
        } else {
          //sentry
          throw new Error();
        }
      } catch (err) {
        if (!err.isHandled) {
          this.setNotification({
            message: this.$t(
              this.getUiItemCaption(this.signature, 'createStageError')
            ),
          });
        }
      }
    },
  },
};
</script>
<style lang="scss">
.process__stage-link {
  margin-right: 12px;
}
.process__stage_date_label {
  font-size: 14px;
}
.process__stage {
  grid-template-columns: none;
}
.process__stage-state1 span {
  font-size: 14px;
  margin-top: 20px;
  font-weight: 600;
  padding: 6px 8px;
  display: inline-block;
  color: #0f0f14;
  font-family: Proxima Nova;
  background-color: rgba(0, 80, 207, 0.1);
}
.process__stage-state1--rejected span {
  color: $system-error-dark;
  background-color: $system-error-0-1;
}
</style>