adweb3-web/src/views/adweb/enquiry/modules/enquiryVerifyProcess.vue

<template>
  <a-drawer :title="title" placement="right" :closable="true" :visible="visible" @close="onClose" destroyOnClose :width="600">
    <a-spin :spinning="loading">
      <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.name }}</span>
              <a-button
                style="margin-left: 16px"
                ghost
                disabled
                v-if="!isCustomer"
                type="primary"
                size="small"
                @click="finishOrRollbackStep(item.id, 0, null, item.nodeType, item.description)"
              >
                撤销
              </a-button>

              <span style="margin-left: 40px">{{ item.finTime }}</span>
            </div>

            <div style="margin: 2.5px 0" v-if="item.finName !== null">
              <span>审核人： {{ item.finName }}</span>
            </div>

            <div style="width: 100%; line-height: 21px" v-else-if="index === current">
              <span :style="{ color: 'blue' }">{{ item.name }}</span>
              <a-button
                style="margin-left: 16px"
                v-if="showFinBtn && !isCustomer"
                ghost
                type="primary"
                size="small"
                @click="finishOrRollbackStep(item.id, 1, item.finTime, item.nodeType, item.description)"
              >
                完成
              </a-button>
              {{ item.finTime }}
            </div>
            <div style="width: 100%; line-height: 21px" v-else>
              <span :style="{ color: '#606266' }">{{ item.name }}</span>
              <a-button
                style="margin-left: 16px"
                v-if="showFinBtn && !isCustomer"
                ghost
                type="primary"
                size="small"
                @click="finishOrRollbackStep(item.id, 1, item.finTime, item.nodeType, item.description)"
                >完成</a-button
              >
            </div>
          </template>
          <template #description>
            <div style="margin: 2.5px 0" v-if="item.timeDesc !== null">{{ item.timeDesc }}</div>
            <div style="margin: 2.5px 0" v-if="item.status == 1">
              <a-textarea v-model:value="item.description" disabled="disabled" :rows="8" placeholder="请输入审核日志记录" />
            </div>
            <div style="margin: 2.5px 0" v-if="item.status == 0">
              <a-textarea v-model:value="item.description" :rows="8" placeholder="请输入审核日志记录" />
            </div>
          </template>
        </a-step>
      </a-steps>
    </a-spin>
  </a-drawer>
</template>

<script lang="ts" setup>
  import '/@/assets/less/common.less';
  import { getAction, postAction } from '/@/api/manage/manage';
  import { computed, reactive, ref } from 'vue';
  import { useMessage } from '@/hooks/web/useMessage';
  import { RoleEnum } from '@/enums/roleEnum';
  import { useUserStore } from '@/store/modules/user';
  const userStore = useUserStore();
  const visible = ref(false);
  const title = ref('询盘审核流程');
  const url = ref('');
  const current = ref(0);
  let stepData = ref([{ id: '', status: 0, name: '未提交', description: '未提交', nodeType: 4, finName: '', finTime: '', timeDesc: '', finUid: '' }]);
  let record = reactive({});
  const showFinBtn = ref(false);
  const isCustomer = ref(false);
  // const finishTime = ref('');
  // const dateFormat = 'YYYY-MM-DD HH:mm:ss';

  const loading = ref(false);
  const emit = defineEmits(['close', 'reload']);
  const { createMessage } = useMessage();

  const isAdmin = computed(() => {
    return (
      userStore.getRoleList.includes(RoleEnum.ADMIN) ||
      userStore.getRoleList.includes(RoleEnum.ADWEB_ADMIN) ||
      userStore.getRoleList.includes(RoleEnum.SEO_ADMIN) ||
      userStore.getRoleList.includes(RoleEnum.ADWEB_SITE_MANAGER) ||
      userStore.getRoleList.includes(RoleEnum.ADWEB_SEO_MANAGER) ||
      userStore.getRoleList.includes(RoleEnum.ADWEB_CHANNEL_ADMIN)
    );
  });

  const enquiryMaster = ref(false);

  // 判断询盘所有者是否已经审核过该询盘
  const enquiryMasterHasBeenVerify = ref(false);

  function init(r, t) {
    record = r;
    visible.value = true;
    if (t === 'seo') {
      url.value = '/adweb/executeNode/querySEOFlow?siteCode=' + r.code + '&historyId=' + r.historyId;
    } else if (t === 'enquiry') {
      url.value = '/adweb/executeNode/queryEnquiryVerifyFlow?enquiryId=' + r.id;
    } else {
      url.value = '/adweb/executeNode/querySiteBuildFlow?siteCode=' + r.code;
    }
    showStep();

    // 判断当前询盘是否属于当前登录用户
    if (r.uid == userStore.userInfo?.id) {
      enquiryMaster.value = true;
    }
  }
  function onClose() {
    emit('close');
    closeStep();
  }
  function showStep() {
    stepData.value = [];

    loading.value = true;
    getAction(url.value, {})
      .then((res) => {
        loading.value = false;
        if (res.code === 200) {
          stepData.value = res.result;
          // 当前步骤
          for (let i = 0; i < res.result.length; i++) {
            if (res.result[i].status === 0) {
              current.value = i;
              showFinBtn.value = true;
              return;
            }
          }

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

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

  function finishOrRollbackStep(id, status, finishTime, nodeType, description) {
    for (let i = 0; i < stepData.value.length; i++) {
      // 判断当前登录用户是否是询盘所有者，并且是否已经审核过询盘
      if (enquiryMaster.value && stepData.value[i].status === 1 && stepData.value[i].finUid === record.uid) {
        createMessage.warn('询盘所有者已经审核过，请等待其他管理员审核！');
        return;
      }

      if (isAdmin.value && stepData.value[i].status === 1 && stepData.value[i].finUid !== record.uid) {
        createMessage.warn('管理员用户已经审核过，请等待询盘所有者审核！');
        return;
      }
    }

    if (status == 1 && description == '') {
      createMessage.warn('审核日志记录不能为空');
      return;
    }

    loading.value = true;
    let params = {
      id: id,
      status: status,
      hostId: record.id,
      finTime: finishTime,
      nodeType: nodeType,
      stepCount: stepData.value.length,
      description: description,
    };
    postAction('/adweb/executeNode/finishOrRollbackEnquiryVerifyStep', params, 120000).then((res) => {
      if (res.code === 200) {
        createMessage.success('操作成功');
        showStep();
        emit('reload');
      }

      loading.value = false;
    });
  }

  defineExpose({
    init,
    onClose,
  });
</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>