联调

src/style/global.less

@@ -1,9 +1,17 @@
-@import 'dark.less';
-@import 'animation.less';
+@import "dark.less";
+@import "animation.less";
 
-html, body {
+html,
+body {
   height: 100%;
 }
+
+.arco-tree-node-disabled .arco-tree-node-title,
+.arco-tree-node-disabled .arco-tree-node-title:hover {
+  color: rgb(var(--primary-6));
+  font-weight: bold;
+}
+
 .arco-layout-sider-children {
   overflow-x: hidden;
 }
@@ -15,45 +23,68 @@ html, body {
   background-color: rgb(var(--primary-6));
 }
 
-.layout, .layout-columns-left-panel, .layout-columns-right-panel {
+.layout,
+.layout-columns-left-panel,
+.layout-columns-right-panel {
   height: 100%;
 }
 
 .layout-columns-left-panel {
-  .sider { padding: 5px; height: 100%; overflow-y: auto; overflow-x: hidden }
+  .sider {
+    padding: 5px;
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
 
   .layout-menu {
-    position: relative; z-index: 3; overflow: hidden;
+    position: relative;
+    z-index: 3;
+    overflow: hidden;
   }
 
   .menu-title {
-    height: 51px; padding-left: 10px; font-weight: bold;
+    height: 51px;
+    padding-left: 10px;
+    font-weight: bold;
     background-color: var(--color-bg-2);
-    border-bottom:1px solid var(--color-border-1);
+    border-bottom: 1px solid var(--color-border-1);
   }
 }
 
 .layout-columns-right-panel {
-  width: 100%; background-color: var(--color-neutral-2);
+  width: 100%;
+  background-color: var(--color-neutral-2);
   .layout-header {
     background-color: var(--color-bg-2);
-    width: 100%; box-shadow: 1px 1px 2px var(--color-neutral-2);
+    width: 100%;
+    box-shadow: 1px 1px 2px var(--color-neutral-2);
   }
 }
 
 .layout-banner-header {
-  height: 52px; border-bottom:1px solid var(--color-border-1);
+  height: 52px;
+  border-bottom: 1px solid var(--color-border-1);
   background-color: var(--color-bg-2);
   .logo {
-    width: 220px; padding-bottom: 1px; border-bottom: 0;
+    width: 220px;
+    padding-bottom: 1px;
+    border-bottom: 0;
   }
 
   .banner-menus li {
-    cursor: pointer; padding: 0px 15px; height: 40px;
-    margin-left: 5px; border-radius: 4px; color: var(--color-neutral-10); fill: var(--color-neutral-10);
+    cursor: pointer;
+    padding: 0px 15px;
+    height: 40px;
+    margin-left: 5px;
+    border-radius: 4px;
+    color: var(--color-neutral-10);
+    fill: var(--color-neutral-10);
 
     .icon {
-      width: 1.1em; height: 1.1em; display: inline;
+      width: 1.1em;
+      height: 1.1em;
+      display: inline;
     }
   }
 
@@ -61,7 +92,8 @@ html, body {
     background-color: var(--color-neutral-2);
   }
   .banner-menus li.active {
-    background-color: rgb(var(--primary-4)); color: var(--color-white);
+    background-color: rgb(var(--primary-4));
+    color: var(--color-white);
     fill: var(--color-white);
   }
 }
@@ -71,18 +103,20 @@ html, body {
   }
 }
 
-.layout-classic-sider { box-shadow: none; }
+.layout-classic-sider {
+  box-shadow: none;
+}
 .layout-classic-header {
   .layout-classic-header-container {
-    background-color: var(--color-bg-2); height: 50px;
+    background-color: var(--color-bg-2);
+    height: 50px;
   }
 }
 
 .ma-menu .arco-menu-inner::-webkit-scrollbar,
 .backend-setting .arco-drawer-body::-webkit-scrollbar,
 .arco-list::-webkit-scrollbar,
-.customer-scrollbar::-webkit-scrollbar
-{ 
+.customer-scrollbar::-webkit-scrollbar {
   width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
   height: 7px;
 }
@@ -90,58 +124,81 @@ html, body {
 .ma-menu .arco-menu-inner::-webkit-scrollbar-thumb,
 .backend-setting .arco-drawer-body::-webkit-scrollbar-thumb,
 .arco-list::-webkit-scrollbar-thumb,
-.customer-scrollbar::-webkit-scrollbar-thumb
-{
+.customer-scrollbar::-webkit-scrollbar-thumb {
   border-radius: 10px;
-  background: var(--color-text-4)
+  background: var(--color-text-4);
 }
 .ma-menu .arco-menu-inner::-webkit-scrollbar-thumb:hover,
 .backend-setting .arco-drawer-body::-webkit-scrollbar-thumb:hover,
 .arco-list::-webkit-scrollbar-thumb:hover,
-.customer-scrollbar::-webkit-scrollbar-thumb:hover
-{
+.customer-scrollbar::-webkit-scrollbar-thumb:hover {
   border-radius: 10px;
-  background: var(--color-text-3)
+  background: var(--color-text-3);
 }
 .ma-menu .arco-menu-inner::-webkit-scrollbar-track,
 .backend-setting .arco-drawer-body::-webkit-scrollbar-track,
 .arco-list::-webkit-scrollbar-track,
-.customer-scrollbar::-webkit-scrollbar-track
-{
+.customer-scrollbar::-webkit-scrollbar-track {
   border-radius: 0;
-  background: var(--color-text-5)
+  background: var(--color-text-5);
 }
 
 .tags-container {
   background-color: var(--color-bg-2);
-  border-top:1px solid var(--color-border-1);
+  border-top: 1px solid var(--color-border-1);
   .tags {
-    border-bottom:1px solid var(--color-border-1);
+    border-bottom: 1px solid var(--color-border-1);
     background-color: var(--color-bg-2);
-    height: 40px; position: relative;
-    display: flex; align-items: center;
-    overflow: hidden; width: 100%;
+    height: 40px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    width: 100%;
     div {
-      font-size: 13px; color: var(--color-text-2);
-      position: relative; flex-shrink: 0;
-      padding: 4px 8px; border-radius: 4px;
+      font-size: 13px;
+      color: var(--color-text-2);
+      position: relative;
+      flex-shrink: 0;
+      padding: 4px 8px;
+      border-radius: 4px;
       border: 1px solid var(--color-border-2);
-      cursor: pointer; transition: all 0.2s; margin-left: 10px;
-      display: inline-flex; justify-content: center; align-items: center;
+      cursor: pointer;
+      transition: all 0.2s;
+      margin-left: 10px;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
 
-      .tag-icon { margin-left: 5px; font-size:18px; padding:2px; border-radius: 10px;}
+      .tag-icon {
+        margin-left: 5px;
+        font-size: 18px;
+        padding: 2px;
+        border-radius: 10px;
+      }
 
-      .tag-icon:hover { color: var(--color-white); background-color: rgb(var(--primary-6));}
+      .tag-icon:hover {
+        color: var(--color-white);
+        background-color: rgb(var(--primary-6));
+      }
     }
 
     div:hover {
-      border: 1px solid rgb(var(--primary-3)); color: rgb(var(--primary-6));
+      border: 1px solid rgb(var(--primary-3));
+      color: rgb(var(--primary-6));
     }
 
-    div.active{
-      background-color: rgb(var(--primary-1)); color: rgb(var(--primary-6));border: 1px solid rgb(var(--primary-3));
-      .tag-icon { color: var(--primary-6);}
-      .tag-icon:hover { color: var(--color-white); background-color: rgb(var(--primary-6));}
+    div.active {
+      background-color: rgb(var(--primary-1));
+      color: rgb(var(--primary-6));
+      border: 1px solid rgb(var(--primary-3));
+      .tag-icon {
+        color: var(--primary-6);
+      }
+      .tag-icon:hover {
+        color: var(--color-white);
+        background-color: rgb(var(--primary-6));
+      }
     }
   }
 
@@ -150,24 +207,30 @@ html, body {
   }
 
   .tags-contextmenu {
-    position: fixed; border: 1px solid var(--color-border-2);
-    padding: 5px 0; z-index: 999;
-    width: 170px; background-color: var(--color-bg-5);
+    position: fixed;
+    border: 1px solid var(--color-border-2);
+    padding: 5px 0;
+    z-index: 999;
+    width: 170px;
+    background-color: var(--color-bg-5);
     border-radius: 4px;
-    
+
     .arco-divider-horizontal {
       margin: 5px 0;
     }
 
     li {
-      padding: 7px 15px; color: var(--color-text-2); font-size: 13px;
+      padding: 7px 15px;
+      color: var(--color-text-2);
+      font-size: 13px;
     }
     li:hover {
       background-color: rgb(var(--primary-1));
       cursor: pointer;
     }
     li.disabled {
-      color: var(--color-text-4); cursor: no-drop;
+      color: var(--color-text-4);
+      cursor: no-drop;
     }
   }
 }
@@ -175,16 +238,24 @@ html, body {
 .work-area {
   background-color: var(--color-neutral-2);
   color: var(--color-text-2);
-  height: 100%; overflow-y: auto;
-  .content-block-title { color: var(--color-text-1); font-size: 1.3em; }
+  height: 100%;
+  overflow-y: auto;
+  .content-block-title {
+    color: var(--color-text-1);
+    font-size: 1.3em;
+  }
 
   .ma-content-block {
-    background-color: var(--color-bg-2); border-radius: 2px;
+    background-color: var(--color-bg-2);
+    border-radius: 2px;
   }
 }
 
 .button-menu {
-  position: fixed; bottom: 30px; left: 20px; z-index: 100;
+  position: fixed;
+  bottom: 30px;
+  left: 20px;
+  z-index: 100;
   .button-trigger {
     display: flex;
     align-items: center;
@@ -209,8 +280,15 @@ html, body {
 }
 
 .ma-ui.max-size {
-  .max-size-exit {display: block;}
-  .ma-ui-slider, .ma-ui-header, .ma-ui-menu, .ma-ui-tags {display: none;}
+  .max-size-exit {
+    display: block;
+  }
+  .ma-ui-slider,
+  .ma-ui-header,
+  .ma-ui-menu,
+  .ma-ui-tags {
+    display: none;
+  }
 }
 
 .ma-ui {

src/views/v1/advert/agentSite/index.vue

@@ -90,6 +90,11 @@
         >
       </template>
 
+      <template #operationAfterExtend="{ record }">
+        <a-button size="mini" type="primary" @click="addLinkDebug(record)"
+          >联调</a-button
+        >
+      </template>
       <!-- Table 自定义渲染 -->
     </sa-table>
     <!-- 编辑弹框 -->
@@ -106,6 +111,9 @@
 
     <!-- 头条推送（新） -->
     <tt-pac-form ref="ttPacRef" @success="refresh" />
+
+    <!-- 联调 -->
+    <link-debug-form ref="linkDebugRef" @success="refresh" />
   </div>
 </template>
 
@@ -119,6 +127,7 @@ import api from "../../api/advert/agentSite";
 import ksPacForm from "./ks_pac.vue";
 import gdtPacForm from "./gdt_pac.vue";
 import ttPacForm from "./tt_pac.vue";
+import linkDebugForm from "./link-debug-form.vue";
 // 引用定义
 const crudRef = ref();
 const viewRef = ref();
@@ -131,6 +140,7 @@ const ksPacRef = ref();
 const gdtPacRef = ref();
 const ttPacRef = ref();
 const selecteds = ref([]);
+const linkDebugRef = ref();
 
 // 搜索表单
 const searchForm = ref({
@@ -313,6 +323,12 @@ const addTt = async () => {
   ttPacRef.value?.setSiteIds(siteIds.join(","));
 };
 
+// 联调
+const addLinkDebug = async (record) => {
+  linkDebugRef.value?.open();
+  linkDebugRef.value?.setFormData(record);
+};
+
 // 页面数据初始化
 const initPage = async () => {
   await getMediaOptions();

src/views/v1/advert/agentSite/link-debug-form.vue

@@ -0,0 +1,200 @@
+<template>
+  <component
+    is="a-modal"
+    v-model:visible="visible"
+    :width="tool.getDevice() === 'mobile' ? '100%' : '600px'"
+    :title="title"
+    :mask-closable="false"
+    :ok-loading="loading"
+    @cancel="close"
+    @before-ok="submit"
+    :footer="false"
+  >
+    <!-- 表单信息 start -->
+    <a-form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      :auto-label-width="true"
+    >
+      <a-form-item label="推广媒体" field="media_id">
+        <a-select v-model="formData.media_id" placeholder="请选择推广媒体">
+          <a-option
+            v-for="item in mediaOptions"
+            :key="item.id"
+            :value="item.id"
+            :label="item.name"
+          />
+        </a-select>
+      </a-form-item>
+
+      <a-form-item label="推送游戏" field="game_id">
+        <a-tree-select
+          v-model="formData.game_id"
+          :data="gameOptions"
+          tree-checked-strategy="child"
+          :tree-checkable="false"
+          :max-tag-count="2"
+          :fieldNames="{ title: 'name', key: 'id' }"
+          allow-search
+          allow-clear
+          placeholder="请选择游戏"
+        />
+      </a-form-item>
+
+      <a-form-item label="广告位ID" field="site_id">
+        <a-input v-model="formData.site_id" placeholder="请输入广告位ID" />
+        <template #extra>
+          <Space>
+            {{ formData.site_name }}, 渠道ID：{{ formData.agent_id }}
+          </Space>
+        </template>
+      </a-form-item>
+      <a-button
+        type="primary"
+        class="w-[200px] ml-auto mr-auto"
+        @click="generateParams"
+        >生成参数</a-button
+      >
+      <Divider />
+    </a-form>
+    <a-form ref="paramsFormRef" :model="paramsData">
+      <a-form-item label="广告位信息" class="flex" field="site_info">
+        <a-input readonly v-model="paramsData.site_info" />
+      </a-form-item>
+      <a-form-item label="APPID" field="appid">
+        <a-input readonly v-model="paramsData.appid" />
+      </a-form-item>
+      <a-form-item label="包名" field="package_name">
+        <a-input readonly v-model="paramsData.package_name" />
+      </a-form-item>
+
+      <a-form-item label="点击监测地址" field="click_url">
+        <a-textarea readonly v-model="paramsData.click_url" auto-size />
+      </a-form-item>
+      <a-form-item label="小游戏路径参数" field="wxgamepro">
+        <a-textarea readonly v-model="paramsData.wxgamepro" />
+      </a-form-item>
+    </a-form>
+    <!-- 表单信息 end -->
+  </component>
+</template>
+
+<script setup>
+import { ref, reactive, computed } from "vue";
+import { Divider, Modal, Space } from "@arco-design/web-vue";
+import tool from "@/utils/tool";
+import commonApi from "../../api/common";
+import agentSiteApi from "../../api/advert/agentSite";
+import centerGameApi from "../../api/center/game";
+
+const emit = defineEmits(["success"]);
+
+// 引用定义
+const formRef = ref();
+const mode = ref("");
+const visible = ref(false);
+const loading = ref(false);
+const siteIds = ref();
+const paramsFormRef = ref();
+
+const mediaOptions = ref([]);
+const gameOptions = ref([]);
+const paramsData = reactive({
+  site_info: "",
+});
+
+let title = computed(() => {
+  return "联调";
+});
+
+// 表单初始值
+const initialFormData = {
+  media_id: "",
+  game_id: "",
+  site_id: "",
+  site_name: "",
+  agent_id: "",
+};
+
+// 表单信息
+const formData = reactive({ ...initialFormData });
+
+// 验证规则
+const rules = {
+  media_id: [{ required: true, message: "推广媒体不能为空" }],
+  game_id: [{ required: true, message: "推送游戏不能为空" }],
+  site_id: [{ required: true, message: "广告位ID不能为空" }],
+};
+
+// 打开弹框
+const open = async (type = "ks") => {
+  mode.value = type;
+  // 重置表单数据
+  Object.assign(formData, initialFormData);
+  formRef.value.clearValidate();
+  formRef.value.resetFields();
+  paramsFormRef.value?.resetFields();
+
+  visible.value = true;
+  await initPage();
+};
+
+// 初始化页面数据
+const initPage = async () => {
+  await getMediaOptions();
+  await getGameOptions();
+};
+
+// 获取媒体列表Options
+const getMediaOptions = async () => {
+  const res = await commonApi.getMediaOptionsApi();
+  if (res.code == 200) {
+    mediaOptions.value = res.data;
+  }
+};
+
+// 获取游戏列表Options
+const getGameOptions = async () => {
+  const res = await commonApi.getGameListTreeApi({ single: true });
+  if (res.code == 200) {
+    gameOptions.value = res.data;
+  }
+};
+
+// 设置数据
+const setFormData = async (data) => {
+  console.log(data);
+  formData.agent_id = data.agent_id;
+  formData.site_name = data.name;
+  formData.media_id = data.media_id;
+  formData.site_id = data.id;
+};
+
+// 生成参数
+const generateParams = async () => {
+  const validate = await formRef.value?.validate();
+  if (!validate) {
+    // 提交生成监测链接
+    const res = await agentSiteApi.linkDebugGenerateParamsApi({
+      game_id: formData.game_id,
+      agent_id: formData.agent_id,
+      site_id: formData.site_id,
+      media_id: formData.media_id,
+    });
+    if (res.code == 200) {
+      for (const key in res.data) {
+        if (res.data[key] != null && res.data[key] != undefined) {
+          paramsData[key] = res.data[key];
+        }
+      }
+      paramsFormRef.value?.setFields(paramsData);
+    }
+  }
+};
+
+// 关闭弹窗
+const close = () => (visible.value = false);
+
+defineExpose({ open, setFormData });
+</script>

src/views/v1/advert/mediaList/index.vue

@@ -1,21 +1,38 @@
 <template>
   <div class="ma-content-block">
-    <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm">
+    <sa-table
+      ref="crudRef"
+      :options="options"
+      :columns="columns"
+      :searchForm="searchForm"
+    >
       <!-- 搜索区 tableSearch -->
       <template #tableSearch>
         <a-col :sm="8" :xs="24">
           <a-form-item label="媒体id" field="id">
-            <a-input v-model="searchForm.id" placeholder="请输入媒体id" allow-clear />
+            <a-input
+              v-model="searchForm.id"
+              placeholder="请输入媒体id"
+              allow-clear
+            />
           </a-form-item>
         </a-col>
         <a-col :sm="8" :xs="24">
           <a-form-item label="媒体名称" field="name">
-            <a-input v-model="searchForm.name" placeholder="请输入媒体名称" allow-clear />
+            <a-input
+              v-model="searchForm.name"
+              placeholder="请输入媒体名称"
+              allow-clear
+            />
           </a-form-item>
         </a-col>
         <a-col :sm="8" :xs="24">
           <a-form-item label="媒体渠道简称" field="channel_name">
-            <a-input v-model="searchForm.channel_name" placeholder="请输入媒体渠道简称" allow-clear />
+            <a-input
+              v-model="searchForm.channel_name"
+              placeholder="请输入媒体渠道简称"
+              allow-clear
+            />
           </a-form-item>
         </a-col>
       </template>
@@ -25,27 +42,26 @@
 
     <!-- 编辑表单 -->
     <edit-form ref="editRef" @success="refresh" />
-
   </div>
 </template>
 
 <script setup>
-import { onMounted, ref, reactive } from 'vue'
-import { Message } from '@arco-design/web-vue'
-import EditForm from './edit.vue'
-import api from '../../api/advert/mediaList'
+import { onMounted, ref, reactive } from "vue";
+import { Message } from "@arco-design/web-vue";
+import EditForm from "./edit.vue";
+import api from "../../api/advert/mediaList";
 
 // 引用定义
-const crudRef = ref()
-const editRef = ref()
-const viewRef = ref()
+const crudRef = ref();
+const editRef = ref();
+const viewRef = ref();
 
 // 搜索表单
 const searchForm = ref({
-  id: '',
-  name: '',
-  channel_name: '',
-})
+  id: "",
+  name: "",
+  channel_name: "",
+});
 
 // SaTable 基础配置
 const options = reactive({
@@ -53,55 +69,61 @@ const options = reactive({
   rowSelection: { showCheckedAll: true },
   add: {
     show: true,
-    auth: ['/v1/advert/MediaList/save'],
+    auth: ["/v1/advert/MediaList/save"],
     func: async () => {
-      editRef.value?.open()
+      editRef.value?.open();
     },
   },
   edit: {
     show: true,
-    auth: ['/v1/advert/MediaList/update'],
+    auth: ["/v1/advert/MediaList/update"],
     func: async (record) => {
-      editRef.value?.open('edit')
-      editRef.value?.setFormData(record)
+      editRef.value?.open("edit");
+      editRef.value?.setFormData(record);
     },
   },
   delete: {
     show: true,
-    auth: ['/v1/advert/MediaList/destroy'],
+    auth: ["/v1/advert/MediaList/destroy"],
     func: async (params) => {
-      const resp = await api.destroy(params)
+      const resp = await api.destroy(params);
       if (resp.code === 200) {
-        Message.success(`删除成功！`)
-        crudRef.value?.refresh()
+        Message.success(`删除成功！`);
+        crudRef.value?.refresh();
       }
     },
   },
-})
+});
 
 // SaTable 列配置
 const columns = reactive([
-  { title: '媒体id', dataIndex: 'id', width: 180 },
-  { title: '媒体名称', dataIndex: 'name', width: 180 },
-  { title: '媒体渠道简称', dataIndex: 'channel_name', width: 180 },
-  { title: '安卓监测链接', dataIndex: 'andurl', width: 180 },
-  { title: 'ios监测链接', dataIndex: 'iosurl', width: 180 },
-  { title: '小游戏监测链接', dataIndex: 'xyxurl', width: 180 },
-  { title: '小游戏路径参数补充', dataIndex: 'appleturl', width: 180 },
-  { title: '状态', dataIndex: 'state', type: 'dict', dict: 'nomal_or_stop', width: 120 },
-])
+  { title: "媒体id", dataIndex: "id", width: 180 },
+  { title: "媒体名称", dataIndex: "name", width: 180 },
+  { title: "媒体渠道简称", dataIndex: "channel_name", width: 180 },
+  { title: "安卓监测链接", dataIndex: "andurl", width: 180 },
+  { title: "ios监测链接", dataIndex: "iosurl", width: 180 },
+  { title: "小游戏监测链接", dataIndex: "xyxurl", width: 180 },
+  { title: "小游戏路径参数补充", dataIndex: "appleturl", width: 180 },
+  {
+    title: "状态",
+    dataIndex: "status",
+    type: "dict",
+    dict: "nomal_or_stop",
+    width: 120,
+  },
+]);
 
 // 页面数据初始化
-const initPage = async () => {}
+const initPage = async () => {};
 
 // SaTable 数据请求
 const refresh = async () => {
-  crudRef.value?.refresh()
-}
+  crudRef.value?.refresh();
+};
 
 // 页面加载完成执行
 onMounted(async () => {
-  initPage()
-  refresh()
-})
+  initPage();
+  refresh();
+});
 </script>

src/views/v1/api/advert/agentSite.js

@@ -95,4 +95,15 @@ export default {
       data,
     });
   },
+
+  /**
+   * 生成联调参数
+   */
+  linkDebugGenerateParamsApi(data = {}) {
+    return request({
+      url: "/v1/advert/AgentSite/linkDebugGenerateParams",
+      method: "post",
+      data,
+    });
+  },
 };

src/views/v1/api/common.js

@@ -75,4 +75,16 @@ export default {
       params,
     });
   },
+
+  /**
+   * 获取媒体列表options
+   * @returns
+   */
+  getMediaOptionsApi(params = {}) {
+    return request({
+      url: "/v1/common/getMediaOptions",
+      method: "get",
+      params,
+    });
+  },
 };