Merge branch 'cpq-dev' of wangfan/adweb3-web into master

src/views/adweb/site/AdwebSite.api.ts

@@ -1,16 +1,17 @@
 import { defHttp } from '/src/utils/http/axios';
-import { useMessage } from "/src/hooks/web/useMessage";
+import { useMessage } from '/src/hooks/web/useMessage';
 
 const { createConfirm } = useMessage();
 
 enum Api {
   list = '/adweb/adwebSite/list',
-  save='/adweb/adwebSite/add',
-  edit='/adweb/adwebSite/edit',
+  save = '/adweb/adwebSite/add',
+  edit = '/adweb/adwebSite/edit',
   deleteOne = '/adweb/adwebSite/delete',
   deleteBatch = '/adweb/adwebSite/deleteBatch',
   importExcel = '/adweb/adwebSite/importExcel',
   exportXls = '/adweb/adwebSite/exportXls',
+  gtmListUrl = 'gtm/add/list',
 }
 
 /**
@@ -24,6 +25,8 @@ export const getExportUrl = Api.exportXls;
  */
 export const getImportUrl = Api.importExcel;
 
+export const gtmListUrl = Api.gtmListUrl;
+
 /**
  * 列表接口
  * @param params
@@ -35,11 +38,11 @@ export const list = (params) => defHttp.get({ url: Api.list, params });
  * @param params
  * @param handleSuccess
  */
-export const deleteOne = (params,handleSuccess) => {
-  return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => {
+export const deleteOne = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.deleteOne, params }, { joinParamsToUrl: true }).then(() => {
     handleSuccess();
   });
-}
+};
 
 /**
  * 批量删除
@@ -54,12 +57,12 @@ export const batchDelete = (params, handleSuccess) => {
     okText: '确认',
     cancelText: '取消',
     onOk: () => {
-      return defHttp.delete({url: Api.deleteBatch, data: params}, {joinParamsToUrl: true}).then(() => {
+      return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
         handleSuccess();
       });
-    }
+    },
   });
-}
+};
 
 /**
  * 保存或者更新
@@ -67,6 +70,6 @@ export const batchDelete = (params, handleSuccess) => {
  * @param isUpdate
  */
 export const saveOrUpdate = (params, isUpdate) => {
-  let url = isUpdate ? Api.edit : Api.save;
+  const url = isUpdate ? Api.edit : Api.save;
   return defHttp.post({ url: url, params }, { isTransformResponse: false });
-}
+};

src/views/adweb/site/AdwebSite.data.ts

@@ -1,4 +1,6 @@
 import { BasicColumn } from '/src/components/Table';
+import moment from 'moment';
+
 //列表数据
 export const columns: BasicColumn[] = [
   {
@@ -42,11 +44,6 @@ export const columns: BasicColumn[] = [
     dataIndex: 'subscribePlan',
   },
   {
-    title: '到期时间',
-    align: 'left',
-    dataIndex: 'etime',
-  },
-  {
     title: '当前状态',
     align: 'left',
     dataIndex: 'status_dictText',
@@ -61,6 +58,32 @@ export const columns: BasicColumn[] = [
     align: 'left',
     dataIndex: 'completeProcess',
   },
+  {
+    title: '创建时间',
+    align: 'left',
+    dataIndex: 'ctime',
+  },
+  {
+    title: '预计发布时间',
+    align: 'left',
+    dataIndex: 'publishTime',
+    customRender: function ({ text, record }) {
+      return moment(record.ctime).add(1, 'month').format('YYYY-MM-DD');
+    },
+  },
+  {
+    title: '实际发布时间',
+    align: 'left',
+    dataIndex: 'issueTime',
+    customRender: function ({ text, record }) {
+      return !text ? '-' : text.length > 16 ? text.substr(0, 16) : text;
+    },
+  },
+  {
+    title: '到期时间',
+    align: 'left',
+    dataIndex: 'etime',
+  },
 ];
 
 // 高级查询数据

src/views/adweb/site/AdwebSiteList.vue

@@ -154,6 +154,8 @@
     <!-- 表单区域 -->
     <AdwebSiteModal ref="registerModal" @success="handleSuccess" />
 
+    <!-- 自动化嵌入GTM 代码     -->
+    <gtm-add ref="gtmRef" />
     <!--SEO流程-->
     <seo-process ref="seoProcessRef" :visible="seoProcessVisible" :title="processTitle" @close="closeProcess" @reload="reload" />
   </div>
@@ -165,12 +167,13 @@
   import { BasicTable, TableAction } from '/src/components/Table';
   import { useListPage } from '/src/hooks/system/useListPage';
   import { columns, superQuerySchema } from './AdwebSite.data';
-  import { batchDelete, deleteOne, getExportUrl, getImportUrl, list } from './AdwebSite.api';
+  import { batchDelete, deleteOne, getExportUrl, getImportUrl, list, gtmListUrl } from './AdwebSite.api';
   import AdwebSiteModal from './components/AdwebSiteModal.vue';
   import { useUserStore } from '/src/store/modules/user';
-  import SeoProcess from '@/views/adweb/site/components/seoProcess.vue';
+  import SeoProcess from '@/views/adweb/site/components/SeoProcess.vue';
   import JInput from '@/components/Form/src/jeecg/components/JInput.vue';
   import JSearchSelect from '@/components/Form/src/jeecg/components/JSearchSelect.vue';
+  import GtmAdd from '@/views/adweb/site/components/GtmAdd.vue';
 
   const formRef = ref();
   const queryParam = reactive<any>({});
@@ -180,6 +183,7 @@
   const processTitle = ref('');
   const seoProcessVisible = ref(false);
   const seoProcessRef = ref();
+  const gtmRef = ref();
   let channelProviderList = reactive([{ username: '', workNo: '' }]);
   //注册table数据
   const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
@@ -315,6 +319,10 @@
         onClick: handleDetail.bind(null, record),
       },
       {
+        label: '跟踪代码',
+        onClick: addGtm.bind(null, record),
+      },
+      {
         label: '删除',
         popConfirm: {
           title: '是否确认删除',
@@ -352,6 +360,11 @@
   function closeProcess() {
     seoProcessVisible.value = false;
   }
+
+  // 添加gtm
+  function addGtm(r) {
+    gtmRef.value.init(r);
+  }
 </script>
 
 <style lang="less" scoped>

src/views/adweb/site/components/GtmAdd.vue

@@ -0,0 +1,205 @@
+<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-button class="manual-add" @click="addGTMByUser">手动添加</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" prop="head">
+            <a-input v-model="googleGtmForm.head" id="googleGtmHead" type="textarea" :auto-size="{ minRows: 10, maxRows: 15 }" :readOnly="true" />
+          </a-form-item>
+          <a-form-item label="Gtm Body" prop="body">
+            <a-input v-model="googleGtmForm.body" id="googleGtmBody" type="textarea" :auto-size="{ 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 } from '/@/api/manage/manage';
+  import { message } from 'ant-design-vue';
+
+  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);
+
+  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;
+    addGTM(record);
+  }
+
+  // 添加gtm
+  function addGTM(r) {
+    let params = {
+      id: r.id,
+    };
+    let gtmListUrl = `/gtm/list`;
+    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) {
+          message.warning('该网站已分配GA账号，不可生成跟踪代码！');
+        } else {
+          message.error('系统异常，请重试!');
+        }
+      })
+      .catch(function (err) {
+        cleanAllFormData();
+        message.error('网络超时，请重试!');
+      });
+  }
+
+  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() {
+    let that = this;
+    modalVisible.value = false;
+    modalTitle.value = '';
+    modalGtmStatus.value = false;
+    modalManualAddGTMStatus.value = false;
+    modalSysAddGTMStatus.value = false;
+    let r = siteInfo;
+    tableLoading = true;
+    tableLoadingTip = '正在生成网站跟踪代码';
+    let params = {
+      siteId: r.id,
+      domain: r.domain,
+      domainName: r.name,
+      siteCert: r.siteCert,
+      sitePrivkey: r.sitePrivkey,
+      siteChain: r.siteChain,
+    };
+    let gtmAddUrl = `${url.gtmAddUrl}`;
+    postAction(gtmAddUrl, Qs.stringify(params), 1000 * 60 * 5)
+      .then(function (res) {
+        tableLoading = false;
+        tableLoadingTip = '';
+        if (res.code == 200) {
+          $message.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;
+          loadingDrawerBtn = false;
+        } else if (res.code == 102) {
+          loadingDrawerBtn = false;
+          $message.warning('该网站已分配GA账号，不可生成跟踪代码！');
+        } else {
+          loadingDrawerBtn = false;
+          $message.error('网站跟踪代码生成失败！');
+        }
+      })
+      .catch(function () {
+        loadingDrawerBtn = false;
+        $message.error('网络超时，请重试!');
+        loadData();
+      });
+  }
+
+  defineExpose({ init });
+</script>