adweb3-web/src/views/adweb/site/components/SiteProcess.vue

<template>
  <a-drawer :title="title" placement="right" :closable="true" v-model:open="props.visible" @close="onClose" destroyOnClose :width="600">
    <a-steps :current="current" direction="vertical" class="self_step">
      <a-step v-for="(item, index) in stepData" :key="index">
        <template #title>
          <div v-if="item.status == 1" style="width: 100%; line-height: 21px">
            <span>{{ item.title }}</span>

            <a-button style="margin-left: 16px" ghost v-if="index > 0" type="primary" size="small" @click="finishOrRollbackStep(item, index)">
              撤销
            </a-button>
          </div>

          <div style="width: 100%; line-height: 21px" v-else-if="index === current">
            <span :style="{ color: 'blue' }">{{ item.title }}</span>
            <a-button
              style="margin-left: 16px"
              v-if="showFinBtn && !isCustomer"
              ghost
              type="primary"
              size="small"
              @click="finishOrRollbackStep(item, index)"
            >
              完成
            </a-button>
          </div>

          <div style="width: 100%; line-height: 21px" v-else>
            <span :style="{ color: '#606266' }">{{ item.title }}</span>
            <a-button
              :style="{ marginLeft: '16px', color: '#606266' }"
              style=""
              v-if="showFinBtn && !isCustomer"
              ghost
              type="primary"
              size="small"
              @click="finishOrRollbackStep(item, index)"
              >完成</a-button
            >
          </div>
        </template>

        <template #description>
          <div style="margin: 2.5px 0" v-if="item.title !== null">{{ item.description }}</div>
        </template>
      </a-step>
    </a-steps>
  </a-drawer>
</template>

<script lang="ts" setup name="seoProcess">
  import '/@/assets/less/common.less';
  import { getAction, postActionForm } from '/@/api/manage/manage';
  import { reactive, ref } from 'vue';
  import { useMessage } from '@/hooks/web/useMessage';

  const { createMessage } = useMessage();
  const url = ref('');
  const current = ref(0);
  let stepData = ref([{ value: '', title: '', color: '', description: '', status: 0 }]);
  let record = reactive({
    code: undefined,
    siteFlowStatus: '',
  });
  const showFinBtn = ref(false);
  const isCustomer = ref(false);

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: 'SEO流程',
    },
  });

  const emit = defineEmits(['ok', 'close', 'reload']);

  function init(r, t) {
    record = r;

    if (t == 'seo') {
      url.value = '/adweb/executeNode/querySEOFlow?siteCode=' + r.code + '&historyId=' + r.historyId;
    } else {
      url.value = '/sys/dict/getDictItems/build_website_status';
    }

    showStep();
  }

  function onClose() {
    emit('close');
    closeStep();
  }

  function showStep() {
    stepData.value = [];

    getAction(url.value, null)
      .then((res) => {
        if (res.code === 0) {
          stepData.value = res.result;
          // 当前步骤
          for (let i = 0; i < res.result.length; i++) {
            if (res.result[i].value == record.siteFlowStatus) {
              current.value = i + 1;
              showFinBtn.value = true;
            }

            if (res.result[i].value <= record.siteFlowStatus) {
              stepData.value[i].status = 1;
            } else {
              stepData.value[i].status = 0;
            }
          }

          if (current.value == 0) {
            current.value = res.result.length;
            showFinBtn.value = false;
          }
        }
      })
      .catch((e) => {
        createMessage.warning('获取数据失败！' + e.message());
      });
  }

  function closeStep() {
    showFinBtn.value = false;
    current.value = 0;
    stepData.value = [];
  }

  function finishOrRollbackStep(item, index) {
    let params;

    if (item.status === 0) {
      params = {
        stepFlowId: item.value,
        siteCode: record.code,
        currentStep: item.label,
      };

      current.value++;
      stepData.value[index].status = 1;
    } else {
      let currentItem = stepData.value[index - 1];

      params = {
        stepFlowId: currentItem.value,
        siteCode: record.code,
        currentStep: currentItem.label,
      };

      current.value--;
      stepData.value[index].status = 0;
    }

    postActionForm('/adweb/adwebSite/finishOrRollbackStep', params, 120000).then((res) => {
      if (res.code === 200) {
        createMessage.success('操作成功！');
        // showStep();
        emit('reload');
      }
    });
  }

  defineExpose({ init });
</script>

<style lang="less" scoped>
  .self_step {
    /deep/ .ant-steps-item-content {
      width: 410px;

      .ant-steps-item-title {
        width: 100%;

        span {
          font-size: 13px;
          color: green;

          &.fr {
            float: right;
          }
        }
      }

      .ant-steps-item-description {
        div {
          padding-left: 20px;
          font-size: 14px;
        }
      }
    }
  }

  .doBtn {
    position: absolute;
    bottom: 15px;
    width: 150px;
    right: 150px;
  }
</style>

<style lang="less">
  .self_step {
    .ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot {
      background: green;
    }
  }
</style>