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

<template>
  <a-drawer
    :title="modalTitle"
    :maskClosable="true"
    width="850"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="modalVisible"
    :ok-button-props="okBtnStatus"
    destroy-on-close
    style="overflow: auto; padding-bottom: 53px"
  >
    <!--      Gtm代码-->
    <template v-if="modalGtmStatus">
      <a-spin :spinning="spinning" :tip="tipTitle">
        <a-button type="primary" @click="addGTMBySys" style="margin-right: 20px">系统添加</a-button>
      </a-spin>
    </template>

    <template v-if="modalSysAddGTMStatus">
      <a-spin :spinning="spinning" :tip="tipTitle">
        <a-form ref="ruleForm" :model="googleGtmForm" :label-col="labelCol" :wrapper-col="wrapperCol">
          <div>
            <p style="text-align: center; font-weight: bold">系统生成的跟踪代码已添加至网站，请勿重复添加跟踪代码。</p>
          </div>
          <a-form-item label="GTM Head" name="head">
            <a-textarea
              v-model:value="googleGtmForm.head"
              id="googleGtmHead"
              type="textarea"
              :autosize="{ minRows: 10, maxRows: 15 }"
              :readOnly="true"
            />
          </a-form-item>
          <a-form-item label="GTM Body" name="body">
            <a-textarea
              v-model:value="googleGtmForm.body"
              id="googleGtmBody"
              type="textarea"
              :autosize="{ minRows: 10, maxRows: 15 }"
              :readOnly="true"
            />
          </a-form-item>
        </a-form>
      </a-spin>
    </template>

    <template v-if="modalManualAddGTMStatus">
      <a-spin :spinning="spinning" :tip="tipTitle">
        <a-form ref="ruleForm" :model="googleGtmForm" :rules="googleGtmFormRules" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item label="Gtm Head" prop="head">
            <a-input
              v-model="googleGtmForm.head"
              type="textarea"
              placeholder="请输入Gtm跟踪代码 Head部分"
              :auto-size="{ minRows: 10, maxRows: 15 }"
            />
          </a-form-item>
          <a-form-item label="Gtm Body" prop="body">
            <a-input
              v-model="googleGtmForm.body"
              type="textarea"
              placeholder="请输入Gtm跟踪代码 Body部分"
              :auto-size="{ minRows: 10, maxRows: 15 }"
            />
          </a-form-item>
        </a-form>
      </a-spin>
    </template>
  </a-drawer>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import { getAction, postActionForm } from '/@/api/manage/manage';
  import { useMessage } from '@/hooks/web/useMessage';
  const { createMessage } = useMessage();

  const modalTitle = ref('跟踪代码');

  const labelCol = reactive({ span: 3 });
  const wrapperCol = reactive({ span: 21 });
  const spinning = ref(false);
  const tipTitle = ref('');
  const modalGtmStatus = ref(false);
  const modalManualAddGTMStatus = ref(false);
  let siteInfo = reactive({ id: '', code: '', domain: '', name: '' });
  const modalSysAddGTMStatus = ref(false);

  const okBtnStatus = ref(true);
  const modalVisible = ref(false);

  let googleGtmForm = reactive({ head: '', body: '' });

  const googleGtmFormRules = reactive({
    head: [{ required: true, message: 'GTM Head不能为空', trigger: 'blur' }],
    body: [{ required: true, message: 'GTM Body不能为空', trigger: 'blur' }],
  });

  function init(record) {
    modalVisible.value = true;
    modalTitle.value = record.name;
    siteInfo = record;
    addGTM(record);
  }

  // 添加gtm
  function addGTM(r) {
    let params = {
      id: r.id,
    };
    let gtmListUrl = `/gtm/list`;
    spinning.value = true;
    getAction(gtmListUrl, params)
      .then(function (res) {
        if (res.code === 200) {
          if (res.result.gtmHead != null && res.result.gtmBody != null) {
            modalVisible.value = true;
            modalTitle.value += ' 系统生成跟踪代码';
            modalGtmStatus.value = false;
            modalManualAddGTMStatus.value = false;
            modalSysAddGTMStatus.value = true;
            okBtnStatus.value = false;
            googleGtmForm.head = res.result.gtmHead;
            googleGtmForm.body = res.result.gtmBody;
          } else {
            modalVisible.value = true;
            modalTitle.value += ' 添加跟踪代码';
            modalGtmStatus.value = true;
            modalManualAddGTMStatus.value = false;
            modalSysAddGTMStatus.value = false;
            okBtnStatus.value = false;
          }
        } else if (res.code == 102) {
          createMessage.warning('该网站已分配GA账号，不可生成跟踪代码！');
        } else {
          createMessage.error('系统异常，请重试!');
        }

        spinning.value = false;
      })
      .catch(function (err) {
        cleanAllFormData();
        createMessage.error('网络超时，请重试!' + err.message());
        spinning.value = false;
      });
  }

  function handleCancel() {
    cleanAllFormData();
  }

  function cleanAllFormData() {
    okBtnStatus.value = true;

    spinning.value = false;
    tipTitle.value = '';

    modalVisible.value = false;
    modalTitle.value = '';

    modalGtmStatus.value = false;
    googleGtmForm = {
      head: '',
      body: '',
    };

    modalSysAddGTMStatus.value = false;
    modalManualAddGTMStatus.value = false;
    modalGtmStatus.value = false;
  }

  function addGTMBySys() {
    modalVisible.value = false;
    modalTitle.value = '';
    modalGtmStatus.value = false;
    modalManualAddGTMStatus.value = false;
    modalSysAddGTMStatus.value = false;

    let params = {
      siteCode: siteInfo.code,
      domain: siteInfo.domain,
      domainName: siteInfo.name,
    };
    let gtmAddUrl = `/gtm/add`;
    spinning.value = true;
    postActionForm(gtmAddUrl, params, 300000)
      .then(function (res) {
        if (res.code == 200) {
          createMessage.success('跟踪代码已生成并已添加至网站，请重新发布网站，查看跟踪代码安装情况！');
          modalVisible.value = true;
          modalTitle.value = 'GTM网站跟踪代码';
          modalGtmStatus.value = false;
          modalSysAddGTMStatus.value = true;
          modalManualAddGTMStatus.value = false;
          googleGtmForm.head = res.data.gtmHead;
          googleGtmForm.body = res.data.gtmBody;
        } else if (res.code == 102) {
          createMessage.warning('该网站已分配GA账号，不可生成跟踪代码！');
        } else {
          createMessage.error('网站跟踪代码生成失败！');
        }

        spinning.value = false;
      })
      .catch(function () {
        createMessage.error('网络超时，请重试!');
      });
  }

  defineExpose({ init });
</script>