巨量广告账户授权

dist/index.html

@@ -12,7 +12,7 @@
 			document.write('<script src="' + src + '"><\/script>');
 			})();
     </script>
-    <script type="module" crossorigin src="./assets/index.b57fbe5c.js"></script>
+    <script type="module" crossorigin src="./assets/index.604e61a5.js"></script>
     <link rel="modulepreload" href="./js/@vue/@vue.5bfcce30.js">
     <link rel="modulepreload" href="./js/vue-router/vue-router.ccba075e.js">
     <link rel="modulepreload" href="./js/vue-demi/vue-demi.4f3c4c97.js">

src/api/api.ts

@@ -84,6 +84,9 @@ export enum Api{
     account_listToSelect = '/api/account/listToSelect',
     account_listNameToSelect = '/api/account/listNameToSelect',
 
+    // 巨量广告账户管理
+    oe_ad_account = '/api/oeAdAccount/lists',
+    oe_account_auth = '/oceanAuth/getUrl',
 
     //定向包
     directPacket_add = '/api/ad/targetingsAdd',

src/components/businessMoudle/oeAdAccount/agency/childList.vue

@@ -0,0 +1,157 @@
+<template>
+  <div v-loading="loading" class="tMar15">
+    <div class="flex">
+      <el-input v-model="keyword" style="width: 300px;" placeholder="请输入搜索关键词" :prefix-icon="Search" size="default"
+        clearable @input="search()" @clear="search()" />
+      <div v-if="selectionFlag" class="flex_1 flex">
+        <p class="f12 c-555">（已选 {{ multipleSelection.length }} 个媒体账户）</p>
+        <span class="f13 pointer c-theme" @click="clearMultiple">清空选择</span>
+      </div>
+    </div>
+
+
+    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" row-key="account_id" class="tMar15" height="36vh"
+      :header-cell-style="tableHeaderStyle" @selection-change="handleSelectionChange" border>
+      <el-table-column v-if="selectionFlag" reserve-selection type="selection" width="55" align="center" />
+      <el-table-column v-else label="序号" width="80" align="center">
+        <template #default="scope">
+          {{ (scope.$index + 1) + (pagination.page - 1) * pagination.pageSize }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="corporation_name" label="账户名称" />
+      <el-table-column prop="account_id" label="账户ID" />
+    </el-table>
+    <!-- 分页 -->
+    <div class="flex_center tMar10 bMar10">
+      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.pageSize"
+        :page-sizes="[10, 20, 50, 100]" :small="true" layout="total, sizes, prev, pager, next, jumper"
+        :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+    </div>
+
+  </div>
+</template>
+<script setup lang="ts">
+import { nextTick, onBeforeMount, reactive, ref, watch } from 'vue';
+import { accountChildListAxios } from '../hooks/api'
+import { Search } from '@element-plus/icons-vue'
+import { tableHeaderStyle } from '@/api/eventModel'
+import _, { reject } from 'lodash';
+const props = defineProps({
+  agencyItem: {
+    type: Object,
+    default: () => { }
+  },
+  importType: {
+    type: String,
+    default: ''
+  },
+  handType: {
+    type: Number,
+    default: 0
+  }
+})
+const emit = defineEmits<{
+  (event: "total", value: any): void;
+}>();
+const loading = ref(false)
+const keyword = ref('')
+const oldTableDataMain = ref([]);//原始账户列表数据
+const oldTableData = ref([]);//搜索时进行操作的账户列表
+const tableData = ref([]);//table列表数据
+const multipleSelection = ref<any[]>([])
+const selectionFlag = ref(false)
+const multipleTableRef = ref()
+const total = ref(0)
+const pagination = reactive({
+  page: 1,
+  pageSize: 20,
+  total: 0
+})
+/**多选 */
+const handleSelectionChange = (val: any[], row) => {
+  multipleSelection.value = val
+}
+/**清空选择 */
+const clearMultiple = () => {
+  multipleSelection.value = []
+  multipleTableRef.value?.clearSelection()
+}
+/**模糊搜索 */
+const search = () => {
+  let oldList = _.cloneDeep(oldTableDataMain.value)
+  if (!isNaN(Number(keyword.value))) { //根据账户ID进行搜索
+    oldTableData.value = oldList.filter((v: any) => {
+      return v.account_id?.indexOf(keyword.value) != -1
+    })
+  } else {//根据账户名称就行搜索
+    oldTableData.value = oldList.filter((v: any) => {
+      return v.corporation_name?.indexOf(keyword.value) != -1
+    })
+  }
+  pagination.total = oldTableData.value.length;
+  pagination.page = 1;
+  getPagination()
+}
+/**分页 */
+const getPagination = () => {
+  const dataList = _.cloneDeep(oldTableData.value)
+  tableData.value = dataList.slice((pagination.page - 1) * pagination.pageSize, pagination.page * pagination.pageSize)
+}
+const handleSizeChange = (val) => {
+  pagination.page = 1;
+  pagination.pageSize = val;
+  getPagination()
+}
+const handleCurrentChange = (val) => {
+  pagination.page = val;
+  getPagination()
+}
+const getList = () => {
+  if (!props.agencyItem?.agency_account_id) return;
+  loading.value = true;
+  accountChildListAxios({
+    agency_account_id: props.agencyItem?.agency_account_id,
+    keyword: keyword.value
+  }).then((res: any) => {
+    loading.value = false;
+    oldTableDataMain.value = res.list;
+    oldTableData.value = _.cloneDeep(oldTableDataMain.value)
+    pagination.total = res.total;
+    total.value = res.total
+    emit('total', total.value)
+    getPagination()
+  }).catch(() => {
+    loading.value = false;
+  })
+}
+onBeforeMount(() => {
+  getList();
+})
+
+/** 暴露自己的属性供父组件使用 */
+/** 获取选中的媒体账户 */
+const getMultipleList = () => {
+  return new Promise((resolve,reject)=>{
+    if(selectionFlag.value) {
+      resolve(multipleSelection.value)
+    }else{
+      resolve(oldTableDataMain.value)
+    }
+  })
+}
+defineExpose({
+  getMultipleList
+});
+
+watch([
+  () => props.importType,
+  () => props.handType
+], (newValue, oldValue) => {
+  if (newValue[0] == 'part' && newValue[1] == 2) {
+    selectionFlag.value = true
+    multipleSelection.value = []
+  } else {
+    selectionFlag.value = false
+  }
+}, { immediate: true })
+</script>

src/components/businessMoudle/oeAdAccount/agency/editDialog.vue

@@ -0,0 +1,103 @@
+<template>
+  <el-dialog class="gdt-dialog" :close-on-click-modal="false" :destroy-on-close="true" v-model="visible" :title="`账户编辑（${account_id}）`"
+    width="440px" :before-close="handleClose">
+    <div v-loading="loading" class="container">
+      <Select ref="ownerIdRef" title="所属人员"  class="block tMar20" selectWidth="260px" :haveTag="true"
+        :optObj="{ k: 'id', la: 'username', val: 'id' }" :options="userList.list" />
+      <Select ref="projectIdRef"  class="block tMar20" title="所属项目" selectWidth="260px" :optObj="{ k: 'id', la: 'name', val: 'id' }"
+        :options="projectList.list" />
+    </div>
+    <template #footer>
+      <div class="dialog-footer" style="text-align: right;padding:10px;padding-top: 0;">
+        <el-button size="default" @click="handleClose"> 取 消 </el-button>
+        <el-button size="default" type="primary" @click="submitEvent"> 确 认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { nextTick, onBeforeMount, ref } from 'vue';
+import { agencyDialogExport } from '../hooks/dialog';
+import Select from '@/components/capsulationMoudle/_select.vue'
+import { accountSetParamAxios } from '../hooks/api';
+import { ElMessage } from 'element-plus';
+
+const emit = defineEmits<{
+  (event: "close", val?: any): void;
+}>();
+
+const loading = ref(false)
+const visible = ref(false)
+const account_id = ref('')
+const {
+  ownerIdRef,
+  projectIdRef,
+  userList,
+  projectList,
+  getUserList,
+  getProjectList,
+} = agencyDialogExport()
+
+const handleClose = ()=>{
+  visible.value = false
+}
+const submitEvent = () => {
+  if (account_id.value == '' || !account_id.value) {
+    ElMessage.warning('获取账户ID失败');
+    return
+  }
+  if (ownerIdRef.value?.value == '' || !ownerIdRef.value?.value) {
+    ElMessage.warning('请选择所属人员');
+    return
+  }
+  loading.value = true;
+  accountSetParamAxios({
+    account_id: account_id.value,
+    owner_id: ownerIdRef.value?.value,
+    project_id: projectIdRef.value?.value,
+  }).then((res)=>{
+    loading.value = false;
+    if(res){
+      ElMessage.warning('编辑成功')
+      visible.value = false
+      emit('close')
+    }
+  }).catch(()=>{
+    loading.value = false;
+  })
+}
+
+onBeforeMount(() => {
+  getUserList()
+  getProjectList()
+})
+
+/**初始化 */
+const initFun = async (flag, obj) => {
+  visible.value = flag
+  if (flag) {
+    account_id.value = obj.account_id
+    nextTick(()=>{
+      if(ownerIdRef.value && obj.owner_id){
+        ownerIdRef.value.value = obj.owner_id
+      }
+      if(projectIdRef.value && obj.project_id){
+        projectIdRef.value.value = obj.project_id
+      }
+    })
+  }
+}
+// 暴露自己的属性供父组件使用
+defineExpose({
+  initFun
+});
+</script>
+<style lang="scss" scoped>:deep(.spanTitle),
+.spanTitle {
+  font-size: 13px;
+  color: #666;
+  width: 70px !important;
+  text-align: right;
+  margin-right: 20px;
+}
+</style>

src/components/businessMoudle/oeAdAccount/agency/importDialog.vue

@@ -0,0 +1,167 @@
+<template>
+  <el-dialog class="gdt-dialog" :close-on-click-modal="false" :destroy-on-close="true" v-model="visible" title="导入媒体账户"
+    width="800px" top="40px" :before-close="handleClose">
+    <div v-loading="loading" class="container">
+      <!-- S 导入type操作 -->
+      <el-radio-group v-model="importType.type" size="default" class="block tMar20">
+        <el-radio-button v-for="item in importType.list" :label="item.id">{{ item.name }}</el-radio-button>
+      </el-radio-group>
+      <el-radio-group v-model="handType.type" size="default" class="block tMar10" v-if="importType.type == 'part'">
+        <el-radio v-for="item in handType.list" :label="item.id">{{ item.name }}</el-radio>
+      </el-radio-group>
+      <!-- E 导入type操作 -->
+
+      <div class="flex_start c-aaa line18 tMar10">
+        <el-icon class="rMar7 tMar2" color="#ff9b48">
+          <WarningFilled />
+        </el-icon>
+        <span class="flex_1 " v-if="importType.type == 'part' && handType.type == 1">请确保输入的广告主账户已属于对应的代理商，否则会导致失败；单次授权账户上限{{ agencyCount }}个，如账户数量较多，请分批次输入</span>
+        <span class="flex_1 " v-if="importType.type == 'part' && handType.type == 2">该代理商账户下共{{acc_count}}个媒体账户，请选择想要导入的账户名称</span>
+        <span class="flex_1 " v-if="importType.type == 'all'">该代理商账户下共{{acc_count}}个媒体账户</span>
+      </div>
+
+      <!-- S 导入媒体账户 附加条件 -->
+      <div class="flex tMar15">
+        <Select ref="ownerIdRef" title="所属人员" selectWidth="160px" :haveTag="true"
+          :optObj="{ k: 'id', la: 'username', val: 'id' }" :options="userList.list" />
+        <Select ref="projectIdRef" title="所属项目" selectWidth="160px" :optObj="{ k: 'id', la: 'name', val: 'id' }"
+          :options="projectList.list" />
+      </div>
+      <!-- E 导入媒体账户 附加条件 -->
+
+      <!-- 手动输入 -->
+      <ManualInput v-show="importType.type == 'part' && handType.type == 1" :maxRow="agencyCount" @mInput="getMInput"></ManualInput>
+
+      <!-- 列表选择或者全部导入 -->
+      <ChildList ref="ChildListRef" v-show="importType.type == 'part' && handType.type == 2 || importType.type == 'all'" :agencyItem="agencyItem" :importType="importType.type" :handType="handType.type" @total="getCountAcc"></ChildList>
+    </div>
+    <template #footer>
+      <div class="dialog-footer" style="text-align: right;padding:10px;padding-top: 0;">
+        <el-button size="default" @click="handleClose"> 取 消 </el-button>
+        <el-button size="default" type="primary" @click="submitEvent"> 确 认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { Search } from '@element-plus/icons-vue'
+import Select from '@/components/capsulationMoudle/_select.vue'
+import { getPromotedObjectType } from '@/components/businessMoudle/batchGdt/configArea/basicInfo/ts/basicApi'
+import { nextTick, onBeforeMount, reactive, ref, watch } from 'vue';
+import { ElMessage } from 'element-plus';
+import _ from 'lodash';
+import { agencyDialogExport } from '../hooks/dialog'
+import ChildList from './childList.vue'
+import ManualInput from './manualInput.vue'
+import { accountImAddAxios } from '../hooks/api'
+
+const emit = defineEmits<{
+  (event: "close", val?: any): void;
+}>();
+const loading = ref(false)
+const agencyCount = 300
+const agencyItem = ref<any>('')
+const inputValue = ref('')
+const visible = ref(false)
+const acc_count = ref(0)
+const ChildListRef = ref()
+
+const {
+  ownerIdRef,
+  projectIdRef,
+  importType,
+  handType,
+  userList,
+  projectList,
+  getUserList,
+  getProjectList,
+} = agencyDialogExport()
+
+onBeforeMount(() => {
+  getUserList()
+  getProjectList()
+})
+
+/**点击关闭弹框 */
+const handleClose = () => {
+  visible.value = false
+}
+const getCountAcc = (val) =>{
+  acc_count.value = val
+}
+const getMInput = (val)=>{
+  inputValue.value = val
+}
+
+/**点击确定 */
+const submitEvent = async () => {
+  if (ownerIdRef.value?.value == '' || !ownerIdRef.value?.value) {
+    ElMessage.warning('请选择所属人员');
+    return
+  }
+  let data_str = '';
+  if(importType.type == 'part' && handType.type == 1){
+    data_str = inputValue.value
+  }else{
+    if(ChildListRef.value){
+      await ChildListRef.value.getMultipleList().then((res)=>{
+        data_str = JSON.stringify(res)
+      })
+    }
+  }
+  if(data_str == ''){
+    ElMessage.warning('请输入账户ID或手动选择媒体账户！');
+    return
+  }
+  loading.value = true
+  accountImAddAxios({
+    agency_account_id: agencyItem.value.agency_account_id,
+    import_method: importType.type,
+    type: handType.type,
+    data_str,
+    owner_id: ownerIdRef.value?.value,
+    project_id: projectIdRef.value?.value,
+  }).then((res) => {
+    loading.value = false
+    if(res){
+      ElMessage.warning('导入成功')
+      visible.value = false
+      emit('close')
+    }
+  }).catch(() => { loading.value = false })
+}
+
+
+/**初始化 */
+const initFun = async (flag, obj) => {
+  visible.value = flag
+  if (flag) {
+    console.log(obj)
+    agencyItem.value = obj
+  }
+}
+// 暴露自己的属性供父组件使用
+defineExpose({
+  initFun
+});
+</script>
+<style lang="scss" scoped>
+@import "@/assets/style/batchDialogGdt.scss";
+
+:deep(.spanTitle),
+.spanTitle {
+  font-size: 13px;
+  color: #666;
+}
+
+.container {
+  max-height: 73vh;
+  overflow-y: auto;
+  height: auto !important;
+  border-bottom: 1px solid #f2f2f2;
+}
+
+.block {
+  display: block;
+}
+</style>

src/components/businessMoudle/oeAdAccount/agency/manualInput.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="tMar20 textBox">
+    <div class="flex_between titleBox">
+      <div>请输入广告主账户ID（{{ getRows() }} / {{ maxRow }} ）</div>
+      <div class="c-theme pointer" @click="text_textarea = ''">清空</div>
+    </div>
+    <div class="tips">请输入广告主账户ID，多账户请换行（即每个账户ID一行）</div>
+    <el-input id="emojiInput" v-model="text_textarea" resize="none" :rows="12" type="textarea" style="width: 100%;" @input="emit('mInput', text_textarea)"/>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  maxRow:{
+    type: Number,
+    default: 300
+  }
+})
+const emit = defineEmits<{
+  (event: "mInput", value: string): void;
+}>();
+const text_textarea = ref<any>('')
+//获取行数
+const getRows = ()=>{
+  let count:number = 0
+  text_textarea.value?.split('\n').forEach(item=>{
+    if(item!==''){
+      count++
+    }
+  })
+  return count
+}
+
+watch(()=>text_textarea.value, (newValue, oldValue) => {
+  if(getRows() > props.maxRow) {
+    text_textarea.value = oldValue;
+  }
+}, { immediate: true })
+</script>
+<style scoped lang="scss">
+.textBox{
+  color: #161E46;
+  border: 1px solid #d9d9d9;
+  height: 340px;
+  overflow-y: auto;
+  scrollbar-color: transparent transparent;
+  &::-webkit-scrollbar{
+    width: 2px;
+  }
+  &:deep(.el-textarea){
+    --el-input-border:none;
+    --el-input-border-color:none;
+    padding: 0 10px;
+  }
+  &:deep(.el-textarea__inner:hover){
+    box-shadow: none;
+  }
+  &:deep(.el-textarea__inner:focus){
+    box-shadow: none;
+  }
+  .titleBox{
+    background-color: #f5f5f5;
+    padding: 15px 20px;
+  }
+  .tips{
+    color: #999;
+    background-color: rgba(49, 115, 255, .1);
+    padding: 15px 20px;
+    font-size: 12px;
+  }
+}
+</style>

src/components/businessMoudle/oeAdAccount/hooks/agency.ts

@@ -0,0 +1,31 @@
+import { ref } from "vue"
+import { ElMessage } from "element-plus";
+
+export const agencyExport = () => {
+  const EditDialogRef = ref()
+  const ImpoartDialogRef = ref()
+  const agencyEvent = (info) => {
+    if(!info?.agency_account_id){
+      ElMessage.error('代理商获取失败，无法导入账户！')
+      return
+    }
+    if (ImpoartDialogRef.value) {
+      ImpoartDialogRef.value.initFun(true, info)
+    }
+  }
+  const agencyEditEvent = (info) => {
+    if(!info?.account_id){
+      ElMessage.error('账户获取失败，无法进行编辑！')
+      return
+    }
+    if (EditDialogRef.value) {
+      EditDialogRef.value.initFun(true, info)
+    }
+  }
+  return {
+    EditDialogRef,
+    ImpoartDialogRef,
+    agencyEvent,
+    agencyEditEvent
+  }
+}

src/components/businessMoudle/oeAdAccount/hooks/api.ts

@@ -0,0 +1,58 @@
+import http from '@/http/http'
+import { ElMessage, ElMessageBox } from "element-plus";
+
+/**代理商子账户导入添加 */
+interface IAccountImAdd {
+  agency_account_id: string,
+  import_method: string,
+  type: string,
+  data_str: string,
+  owner_id: string,
+  project_id?: string
+}
+export function accountImAddAxios(params: IAccountImAdd) {
+  return new Promise(async (resolve,reject)=>{
+    const res: any = await http.post('/api/account/imAdd', params)
+    if (res.errNo == 0) {
+      resolve(res.rst)
+    } else {
+      ElMessage.error(res.errMsg)
+      reject()
+    }
+  })
+}
+
+/**代理商子账户列表 */
+interface IAccountChildList {
+  agency_account_id: string,
+  keyword?: string
+}
+export function accountChildListAxios(params: IAccountChildList) {
+  return new Promise(async (resolve,reject)=>{
+    const res: any = await http.get('/api/account/agentChildList', params)
+    if (res.errNo == 0) {
+      resolve(res.rst)
+    } else {
+      ElMessage.error(res.errMsg)
+      reject()
+    }
+  })
+}
+
+/**账户设置参数 */
+interface IAccountSetParam {
+  account_id: string,
+  owner_id: string,
+  project_id?: string
+}
+export function accountSetParamAxios(params: IAccountSetParam) {
+  return new Promise(async (resolve,reject)=>{
+    const res: any = await http.post('/api/account/setParam', params)
+    if (res.errNo == 0) {
+      resolve(res.rst)
+    } else {
+      ElMessage.error(res.errMsg)
+      reject()
+    }
+  })
+}

src/components/businessMoudle/oeAdAccount/hooks/dialog.ts

@@ -0,0 +1,61 @@
+import { reactive, ref } from "vue"
+import $http from '@/http/http'
+import to from 'await-to-js'
+import { Api as $api } from '@/api/api'
+import { ElMessage } from "element-plus"
+
+export const agencyDialogExport = () => {
+  const ownerIdRef = ref()
+  const projectIdRef = ref()
+  const importType = reactive<any>({
+    list: [
+      { id: 'part', name: '部分导入' },
+      { id: 'all', name: '全部导入' }
+    ],
+    type: 'part'
+  })
+  const handType = reactive<any>({
+    list: [
+      { id: 1, name: '手动输入' },
+      { id: 2, name: '手动选择' },
+    ],
+    type: 1
+  })
+  const userList = reactive<any>({
+    list:[],
+    active: ''
+  })
+  const projectList = reactive<any>({
+    list:[],
+    active: ''
+  })
+
+  /**获取人员列表 */
+  const getUserList = async () => {
+    const url = $api.user_list
+    const params = {}
+    const [err, res]: any = await to($http.get(url, params))
+    if (err || res?.errNo !== '0') return ElMessage.error(err?.message || res?.errMsg || "操作失败")
+    userList.list = [...res?.rst]
+  }
+
+  /**项目列表 */
+  const getProjectList = async () => {
+    const url = $api.project_list
+    const params = {}
+    const [err, res]: any = await to($http.get(url, params))
+    if (err || res?.errNo !== '0') return ElMessage.error(err?.message || res?.errMsg || "操作失败")
+    projectList.list = [...res?.rst]
+  }
+
+  return {
+    projectIdRef,
+    ownerIdRef,
+    importType,
+    handType,
+    userList,
+    projectList,
+    getProjectList,
+    getUserList
+  }
+}

src/components/businessMoudle/oeAdAccount/index.vue

@@ -0,0 +1,180 @@
+<template>
+  <!--  类型切换 -->
+  <div class="typeBorlineBox flex_between">
+    <div class="flex" style="margin-left: 15px">
+      <div class="item" v-for="item in typeList.list" :key="item.id" :class="item.id == typeList.typeAc ? 'itemAc' : ''" @click="switchTypeItem(item)">
+      <div>{{item.name}}</div>
+      <div class="borLine"></div>
+    </div>
+    </div>
+    <el-button type="primary" size="default" class="rMar15" @click="authEvent()">账号授权</el-button>
+  </div>
+
+  <div class="screenBox flex" style="padding: 15px;s" v-loading="authLoading">
+    <Input ref="InputRef_text" title="关键词" placeholderTxt="关键词" @changeEvent="init()" @clearEvent="init()" />
+    <!-- <Select ref="ideaManRef" :clearFlag="true" title="所属人员" selectWidth="160px" :optObj="{ k: 'id', la: 'username', val: 'id' }"
+      @changeEvent="init()" @clearEvent="init()" :options="pageInfo.createrList" /> -->
+    <!-- <Select ref="ctypeRef" :clearFlag="true" title="类型" selectWidth="160px" @changeEvent="init()" @clearEvent="init()"
+      :options="pageInfo.getTypeList" /> -->
+  </div>
+
+  <!--  列表-->
+  <TableList ref="tableListRef" :tableData="tableInfo.tableList" immobilizationHeight="calc(100vh - 260px)" :descol="tableInfo.descolList" :total="total"
+    @init="init">
+    <template v-slot:operate="slotProps">
+      <div class="text-center">
+        <span class="c-theme pointer f13" @click="agencyEditEvent(slotProps.row)">编辑</span>
+        <Popconfirm @confirm="deleEvent(slotProps.row)" />
+      </div>
+    </template>
+  </TableList>
+  <!-- 代理商导入媒体账户 -->
+  <ImpoartDialog ref="ImpoartDialogRef" @close="init(1)"></ImpoartDialog>
+  <!-- 账户设置参数 -->
+  <EditDialog ref="EditDialogRef" @close="editClose"></EditDialog>
+</template>
+<script setup lang="ts">
+import Select from '@/components/capsulationMoudle/_select.vue'
+import { nextTick, onMounted, reactive, ref, getCurrentInstance } from 'vue'
+import Popconfirm from '@/components/capsulationMoudle/_popconfirm.vue'
+import TableList from '@/components/capsulationMoudle/tableList.vue'
+import Input from '@/components/capsulationMoudle/_input.vue'
+import { adqParam, reactiveTableAndAny } from "@/api/ApiModel";
+import { Api } from "@/api/api";
+import { ElMessage } from "element-plus";
+import { publicTableTs } from '@/components/businessMoudle/tableInfo'
+import ImpoartDialog from './agency/importDialog.vue'
+import EditDialog from './agency/editDialog.vue'
+import { agencyExport } from './hooks/agency'
+import { useRoute, useRouter } from 'vue-router'
+const route = useRoute();
+const router = useRouter();
+
+const { proxy } = getCurrentInstance() as any;
+
+const typeList = reactive({
+  list: [
+  {id:'ACCOUNT_ROLE_TYPE_ADVERTISER', name: '广告主' },
+  // {id:'ACCOUNT_ROLE_TYPE_AGENCY', name: '代理商' },
+],
+typeAc: 'ACCOUNT_ROLE_TYPE_ADVERTISER'
+})
+const switchTypeItem = (info)=>{
+  typeList.typeAc = info.id
+  init(1)
+}
+
+const {
+  EditDialogRef,
+  ImpoartDialogRef,
+  agencyEvent,
+  agencyEditEvent
+} = agencyExport()
+
+// 表格数据公共ts
+const descolParams = reactive([
+  { name: '账号名称', column: 'advertiser_name', minWidth: '120px'},
+  { name: '账号ID', column: 'advertiser_id', cancleForMat: true },
+  // { name: '授权状态', column: 'is_valid', },
+  // { name: '所属人员', column: 'owner_name', },
+  { name: '创建时间', column: 'created_at', minWidth: '100px'},
+  // { name: '操作', column: 'operate', slotFlag: true },
+])
+const { tableInfo, tableListRef, total } = publicTableTs(descolParams)
+
+
+const pageInfo = reactive<reactiveTableAndAny>({
+  getTypeList: [
+    { label: '微信MP', value: 1 },
+    { label: '广点通', value: 2 },
+  ],
+  createrList: [],
+})
+
+
+const authLoading = ref<boolean>(false)
+const authEvent = async () => {
+  authLoading.value = true
+  let res: any = await proxy.$http.get(Api.oe_account_auth)
+  authLoading.value = false
+  if (res && res.errNo == '0') {
+    window.open(res.rst, '_blank')
+  } else {
+    ElMessage.error(res.errMsg)
+  }
+}
+
+const InputRef_text = ref<{ value: string }>()
+const ideaManRef = ref<{ value: string | number }>()
+const ctypeRef = ref<{ value: string | number }>()
+//账号列表
+const init = async (page?: any, pageSize?: any) => {
+  tableListRef.value!.loading = true
+  const paramsModel = reactive<adqParam>({
+    keyword: InputRef_text.value!.value,
+    page: page ? page : 1,
+    page_size: pageSize ? pageSize : 20,
+  })
+  let res: any = await proxy.$http.get(Api.oe_ad_account, paramsModel)
+  tableListRef.value!.loading = false
+  if (res && res.errNo == '0') {
+    tableInfo.tableList = res.rst.data
+    total.value = res.rst.pageInfo.total
+  } else {
+    ElMessage.error(res.errMsg)
+  }
+}
+
+const deleEvent = async (item: any) => {
+  tableListRef.value!.loading = true
+  const paramsModel = reactive<adqParam>({
+    account_id: item.account_id
+  })
+  let res: any = await proxy.$http.post(Api.adq_dele, paramsModel)
+  tableListRef.value!.loading = false
+  ElMessage.info(res.errMsg)
+  if (res && res.errNo == '0') {
+    await init()
+  }
+}
+
+//创意师
+const init_createrList = async () => {
+  let res: any = await proxy.$http.get(Api.account_list)
+  if (res && res.errNo == '0') {
+    pageInfo.createrList = res.rst
+  } else {
+    ElMessage.error(res.errMsg)
+  }
+}
+
+const editClose = () => {
+  if(route.query?.account_id){
+    router.replace('/adqManage')
+  }
+  init(1)
+}
+
+onMounted(async () => {
+  if(route.query?.account_id){
+    agencyEditEvent({'account_id': route.query?.account_id})
+  }
+  await init()
+  await init_createrList()
+})
+</script>
+<style lang="scss" scoped>
+.dialogBox {
+  :deep(.el-input__wrapper) {
+    background: #F9F9F9;
+    border-radius: 5px;
+    border: 1px solid #F1F1F1;
+    height: 45px;
+    box-shadow: none;
+  }
+}
+
+.screenArea {
+  margin-bottom: 8px;
+}
+</style>

src/router/index.ts

@@ -30,6 +30,7 @@ const adTask = () => import('@/components/businessMoudle/adTask/index.vue')
 const adTask3 = () => import('@/components/businessMoudle/adTask3/index.vue')
 const menuList = () => import('@/components/businessMoudle/menu/index.vue')
 const document = () => import('@/components/document/index.vue')
+const oeAdAccount = () => import('@/components/businessMoudle/oeAdAccount/index.vue')
 
 //数据报表
 const acStatement = () => import('@/components/businessMoudle/dataManagement/acStatement/index.vue')
@@ -250,7 +251,15 @@ const constantRoutes: Array<RouteRecordRaw> = [
         meta: {
           title: '素材报表'
         }
-      }
+      },
+      {
+        path: '/oeAdAccount',
+        component: oeAdAccount,
+        name: 'oeAdAccount',
+        meta: {
+          title: '广告账户管理'
+        }
+      },
     ],
   },
 ]