媒体授权

src/views/v1/advert/mediaAuth/edit.vue

@@ -0,0 +1,127 @@
+<template>
+  <component
+    is="a-modal"
+    :width="tool.getDevice() === 'mobile' ? '100%' : '600px'"
+    v-model:visible="visible"
+    :title="title"
+    :mask-closable="false"
+    :ok-loading="loading"
+    @cancel="close"
+    @before-ok="submit">
+    <!-- 表单信息 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="请选择媒体ID" allow-clear @change="handleMediaChange">
+          <a-option v-for="item in mediaOptions" :key="item.id" :value="item.id" :label="`[${item.id}] ${item.name}`" />
+        </a-select>
+      </a-form-item>
+    </a-form>
+    <!-- 表单信息 end -->
+  </component>
+</template>
+
+<script setup>
+import { ref, reactive, computed } from 'vue'
+import tool from '@/utils/tool'
+import { Message } from '@arco-design/web-vue'
+import api from '../../api/advert/gamePackage'
+import advertCommonApi from '../../api/advert/common'
+
+const emit = defineEmits(['success'])
+// 引用定义
+const visible = ref(false)
+const loading = ref(false)
+const formRef = ref()
+const mode = ref('')
+const mediaOptions = ref([])
+const gameOptions = ref([])
+const gameListTree = ref([])
+
+let title = computed(() => {
+  return '账户授权' + (mode.value == 'add' ? '-新增' : '-编辑')
+})
+
+// 表单初始值
+const initialFormData = {
+  id: null,
+  media_id: null,
+  game_id: null,
+  name: '',
+  package_name: '',
+  appid: '0',
+  letter: '',
+}
+
+// 表单信息
+const formData = reactive({ ...initialFormData })
+
+// 验证规则
+const rules = {
+  media_id: [{ required: true, message: '所属媒体必需选择' }],
+}
+
+// 打开弹框
+const open = async (type = 'add') => {
+  mode.value = type
+  // 重置表单数据
+  Object.assign(formData, initialFormData)
+  formRef.value.clearValidate()
+  visible.value = true
+  await initPage()
+}
+
+// 初始化页面数据
+const initPage = async () => {
+  await getMediaOptions()
+}
+
+// 获取媒体列表Options
+const getMediaOptions = async () => {
+  const res = await advertCommonApi.getMediaOptionsApi()
+  if (res.code == 200) {
+    mediaOptions.value = res.data
+  }
+}
+
+// 设置数据
+const setFormData = async (data) => {
+  for (const key in formData) {
+    if (data[key] != null && data[key] != undefined) {
+      formData[key] = data[key]
+    }
+  }
+}
+
+// 数据保存
+const submit = async (done) => {
+  const validate = await formRef.value?.validate()
+  if (!validate) {
+    loading.value = true
+    let data = { ...formData }
+    let result = {}
+    if (mode.value === 'add') {
+      // 添加数据
+      data.id = undefined
+      result = await api.save(data)
+    } else {
+      // 修改数据
+      result = await api.update(data.id, data)
+    }
+    if (result.code === 200) {
+      Message.success('操作成功')
+      emit('success')
+      done(true)
+    }
+    // 防止连续点击提交
+    setTimeout(() => {
+      loading.value = false
+    }, 500)
+  }
+  done(false)
+}
+
+// 关闭弹窗
+const close = () => (visible.value = false)
+
+defineExpose({ open, setFormData })
+</script>

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

@@ -0,0 +1,131 @@
+<template>
+  <div class="ma-content-block">
+    <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="media_id">
+            <a-select v-model="searchForm.media_id" placeholder="请选择媒体ID" allow-clear>
+              <a-option
+                v-for="item in mediaOptions"
+                :key="item.id"
+                :value="item.id"
+                :label="`${item.id}:${item.name}`" />
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </template>
+
+      <!-- Table 自定义渲染 -->
+      <template #letter="{ record }"> {{ record.game_id }}_{{ record.letter }} </template>
+    </sa-table>
+
+    <!-- 编辑表单 -->
+    <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 advertCommonApi from '../../api/advert/common'
+// import centerCommonApi from "../../api/center/common";
+import api from '../../api/advert/gamePackage'
+import commonApi from '../../api/common'
+
+// 引用定义
+const crudRef = ref()
+const editRef = ref()
+const mediaOptions = ref([])
+const gameListTree = ref([])
+
+// 搜索表单
+const searchForm = ref({
+  media_id: '',
+  game_id: '',
+})
+
+// SaTable 基础配置
+const options = reactive({
+  api: api.getPageList,
+  rowSelection: { showCheckedAll: true },
+  add: {
+    show: true,
+    auth: ['/v1/gameLog/GamePackage/save'],
+    func: async () => {
+      editRef.value?.open()
+    },
+  },
+  edit: {
+    show: true,
+    auth: ['/v1/gameLog/GamePackage/update'],
+    func: async (record) => {
+      editRef.value?.open('edit')
+      editRef.value?.setFormData(record)
+    },
+  },
+  delete: {
+    show: false,
+    auth: ['/v1/gameLog/GamePackage/destroy'],
+    func: async (params) => {
+      const resp = await api.destroy(params)
+      if (resp.code === 200) {
+        Message.success(`删除成功！`)
+        crudRef.value?.refresh()
+      }
+    },
+  },
+})
+
+// SaTable 列配置
+const columns = reactive([
+  { title: '游戏ID', dataIndex: 'game_id', width: 80 },
+  { title: '母包名称', dataIndex: 'name', width: 220 },
+  { title: '打包目录', dataIndex: 'letter', width: 120 },
+  { title: '包名', dataIndex: 'package_name', width: 180 },
+  { title: 'APPID（头条）', dataIndex: 'tt_appid', width: 180 },
+  { title: '账号ID（头条）', dataIndex: 'tt_advertiser_id', width: 180 },
+])
+
+// 页面数据初始化
+const initPage = async () => {
+  // await getGameOptions();
+  await getMediaOptions()
+  await getGameListTree()
+}
+
+// 获取媒体列表
+const getMediaOptions = async () => {
+  const resp = await advertCommonApi.getMediaOptionsApi()
+  if (resp.code === 200) {
+    mediaOptions.value = resp.data
+  }
+}
+
+// 获取游戏列表
+// const getGameOptions = async () => {
+//   const resp = await centerCommonApi.getGameOptionsApi();
+//   if (resp.code === 200) {
+//     gameOptions.value = resp.data;
+//   }
+// };
+
+const getGameListTree = async () => {
+  const resp = await commonApi.getGameListTreeApi({ single: true })
+  if (resp.code === 200) {
+    gameListTree.value = resp.data
+  }
+}
+
+// SaTable 数据请求
+const refresh = async () => {
+  crudRef.value?.refresh()
+}
+
+// 页面加载完成执行
+onMounted(async () => {
+  initPage()
+  refresh()
+})
+</script>