账号组管理

dist/index.html

@@ -12,7 +12,7 @@
 			document.write('<script src="' + src + '"><\/script>');
 			})();
     </script>
-    <script type="module" crossorigin src="./assets/index-BsPh14Cn.js"></script>
+    <script type="module" crossorigin src="./assets/index-B-M_fJAo.js"></script>
     <link rel="modulepreload" crossorigin href="./js/@vue/@vue.lccsL1Mu.js">
     <link rel="modulepreload" crossorigin href="./js/vue-router/vue-router.D86bYXwF.js">
     <link rel="modulepreload" crossorigin href="./js/vue-demi/vue-demi.Dq6ymT-8.js">

src/api/ApiModel.ts

@@ -259,6 +259,14 @@ export interface departParams{
     keyword?:string
 }
 
+export interface adGroupParams{
+    name?:string,
+    group_id?:string|number,
+    promoter_id?:any,
+    keyword?:string,
+    status?:number,
+}
+
 
 
 

src/api/api.ts

@@ -88,6 +88,12 @@ export enum Api{
     oe_ad_account = '/api/oeAdAccount/lists',
     oe_account_auth = '/oceanAuth/getUrl',
 
+    // 广告账户分组管理
+    ad_account_group_list = '/api/adAccountGroup/lists',
+    ad_account_group_edit = '/api/adAccountGroup/edit',
+    ad_account_group_convert = '/api/adAccountGroup/convert',
+    ad_account_group_detail = '/api/adAccountGroup/detail',
+
     //定向包
     directPacket_add = '/api/ad/targetingsAdd',
     directPacket_list = '/api/ad/targetingGet',

src/components/businessMoudle/adAccountGroup/dialog/addGroup.vue

@@ -0,0 +1,457 @@
+<template>
+
+  <Dialog ref="DialogRef_editType"
+          :dialogVisible="dialogShow"
+          @confirm="confirmEvent"
+          @close="dialogShow = false"
+          width="800px"
+          height="calc(100vh - 220px)"
+          top="20px"
+          :dialog-title="pageInfo.title">
+    <template v-slot:content>
+      <div class="dialogBox" v-loading="loading">
+        <Input ref="nameRef" spanTitleWidth="80px" inputWidth="80%" title="分组名称" :haveTag="true" :haverMar15="false"/>
+        <Select ref="promoterRef"
+                class="tMar20"
+                :clearFlag="true"
+                :haveTag="true"
+                title="所属投手"
+                selectWidth="190px"
+                :optObj="{k:'id',la:'username',val:'id'}"
+                :options="pageInfo.userList"/>
+      </div>
+    </template>
+  </Dialog>
+
+</template>
+<script setup lang="ts">
+import Select from '@/components/capsulationMoudle/_select.vue'
+import Dialog from '@/components/capsulationMoudle/_dialog.vue'
+import Input from '@/components/capsulationMoudle/_input.vue'
+import {getCurrentInstance, nextTick, onMounted, reactive, ref} from "vue";
+import {ElMessage} from "element-plus";
+import {adGroupParams, fileParam, reactiveTableAndAny} from "@/api/ApiModel";
+import {Api} from "@/api/api";
+
+const { proxy } = getCurrentInstance() as any;
+// 全局方法定义
+const NumberHandle = proxy.$NumberHandle
+
+const emit = defineEmits<{
+  (event: "init"): void;
+}>();
+
+//页面数据
+const pageInfo = reactive<reactiveTableAndAny>({
+  editId:'',
+  title:'新增账号分组',
+  userList:[]
+})
+
+const init_userList = async () => {
+  let res:any = await proxy.$http.get(Api.user_list)
+  if(res&&res.errNo=='0'){
+    let resNew:any = res.rst
+    pageInfo.userList = resNew
+  }else{
+    ElMessage.error(res.errMsg)
+  }
+}
+
+const nameRef=ref<{value:string}>()
+const promoterRef=ref<{value:any}>()
+const loading=ref<boolean>(false)
+const confirmEvent = async () => {
+  if(nameRef.value!.value==''){
+    ElMessage.error('分组名称为必填项')
+    return
+  }
+
+  if(promoterRef.value!.value==''){
+    ElMessage.error('所属投手为必选项')
+    return
+  }
+  loading.value = true
+  let api:string = Api.ad_account_group_edit
+  const paramsModel = reactive<adGroupParams>({
+    name:nameRef.value!.value,
+    promoter_id:promoterRef.value!.value,
+  })
+  if(pageInfo.editId){ // 编辑
+    paramsModel.group_id = pageInfo.editId
+  }
+  let res:any = await proxy.$http.post(api,paramsModel)
+  loading.value = false
+  if(res&&res.errNo=='0'){
+    let resNew:any = res.rst
+    dialogShow.value = false
+    emit('init')
+  }else{
+    ElMessage.error(res.errMsg)
+  }
+}
+
+/**项目详情 */
+const getDetail = async (group_id) => {
+  loading.value = true;
+  let res:any = await proxy.$http.get(Api.ad_account_group_detail, {group_id})
+  loading.value = false;
+  if(res&&res.errNo=='0'){
+    let info = res?.rst;
+    pageInfo.editId = info?.id
+    nameRef.value!.value = info.name
+    promoterRef.value!.value = info.promoter_id
+    pageInfo.title = '编辑账号组'
+  }else{
+    ElMessage.error(res.errMsg)
+  }
+}
+
+// 切换显隐
+const dialogShow = ref<boolean>(false)
+const switchShow = (val:boolean,info?:any)=>{
+  dialogShow.value = val
+  if(val){
+    nextTick(async ()=>{
+      nameRef.value!.value = ''
+      promoterRef.value!.value = ''
+      pageInfo.editId = ''
+      pageInfo.title = '新增账号组'
+      loading.value = true;
+      await init_userList()
+      loading.value = false;
+      if(info?.id){ // 编辑
+        getDetail(info?.id)
+      }
+    })
+  }
+}
+// 父组件共享值
+defineExpose({
+  switchShow,
+});
+onMounted(()=>{
+  nextTick(()=>{
+
+  })
+})
+</script>
+<style lang="scss" scoped>
+:deep(.spanTitle), .spanTitle{
+  font-size: 14px;
+  width: 80px !important;
+}
+.treeBox{
+  border-radius: 4px;
+  border: 1px solid #EDEDED;
+
+}
+
+ .search-box {
+  display: block!important;
+  width: 400px;
+  margin-bottom: 10px
+}
+
+ .search-box .el-input__inner, .search-box .el-input__inner:focus {
+  border-color: #dcdfe6
+}
+
+.cascader-container {
+  display: inline-block;
+  vertical-align: top;
+  background-color: #fff;
+  border: 1px solid #dee4f5
+}
+
+.cascader-container.left {
+  width: 400px;
+  margin-right: 16px
+}
+
+.cascader-container.right {
+  width: 200px
+}
+
+.cascader-title {
+  height: 40px;
+  padding: 0 12px;
+  font-size: 14px;
+  line-height: 40px;
+  color: #333;
+  background-color: #fafafa;
+  border-bottom: 1px solid #dee4f5
+}
+
+.cascader-title .tab-label {
+  cursor: pointer
+}
+
+.cascader-title .tab-label:first-child {
+  margin-right: 16px
+}
+
+.cascader-title .tab-label.active {
+  font-weight: 700;
+  color: #197afb;
+  border-bottom: 2px solid #197afb
+}
+
+.cascader-title .tab-label.is-hidden {
+  display: none
+}
+
+.clear {
+  float: right;
+  color: #598fe6;
+  text-decoration: none;
+  cursor: pointer
+}
+
+.cascader-list {
+  width: 100%;
+  height: 236px;
+  overflow: auto;
+  font-size: 14px
+}
+
+.depart-tree .el-tree-node {
+  padding: 0 10px;
+  margin-top: 10px
+}
+
+.depart-tree .el-tree-node__content,.depart-tree .el-upload-list__item {
+  background-color: transparent
+}
+
+.depart-tree .el-tree-node:focus>.el-tree-node__content {
+  width: 100%;
+  background-color: transparent
+}
+
+.choose-member {
+  padding: 3px 10px;
+  cursor: pointer
+}
+
+.choose-member .choose {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 10px;
+  color: #666;
+  background-color: #f2f3f6
+}
+
+.choose-member .choose .icon-right {
+  display: inline-block;
+  width: 15px;
+  height: 15px
+}
+
+.member-parent {
+  display: flex;
+  flex-direction: row
+}
+
+.member-parent .member-left {
+  box-sizing: border-box;
+  width: 200px;
+  height: 100%;
+  padding-top: 8px;
+  padding-right: 10px;
+  padding-left: 10px;
+  overflow: auto
+}
+
+.member-parent .member-right {
+  flex: 1;
+  height: 100%;
+  padding-top: 8px;
+  padding-right: 10px;
+  padding-left: 10px;
+  overflow: auto;
+  border-left: 1px solid #dee4f5
+}
+
+.member-parent .member-right .tipbox {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: 12px;
+  color: #909399
+}
+
+.member-tree .custom-tree-node {
+  width: 100%;
+  font-size: 12px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none
+}
+
+.member-tree .custom-tree-node.active {
+  color: #197afb;
+  background-color: #f3f9ff;
+  border-radius: 3px
+}
+
+.member-tree .custom-tree-node .mg-icon-department,.member-tree .custom-tree-node .mg-icon-line {
+  margin-right: 6px;
+  font-size: 12px
+}
+
+.member-tree .custom-tree-node,.member-tree .el-tree-node__label {
+  overflow: hidden;
+  font-size: 14px;
+  text-indent: 8px;
+  text-overflow: ellipsis;
+  white-space: nowrap
+}
+
+.member-tree .el-tree-node__content {
+  height: 32px;
+  font-size: 14px;
+  line-height: 32px
+}
+
+.member-tree .el-tree-node__content:hover,.member-tree .el-upload-list__item:hover {
+  background-color: transparent
+}
+
+.member-tree .el-tree-node:focus>.el-tree-node__content {
+  width: 100%;
+  background-color: transparent
+}
+
+.member-tree .el-tree-node__content>.el-tree-node__expand-icon {
+  padding: 4px
+}
+
+.self-check .el-checkbox__label {
+  width: 100%;
+  font-size: 14px;
+  line-height: 32px
+}
+
+.display[data-v-7272e714] {
+  display: flex;
+  align-items: center
+}
+
+.hold[data-v-7272e714] {
+  width: 100%;
+  padding: 16px 0;
+  font-size: 12px;
+  color: #999;
+  text-align: center
+}
+
+.pricelimit[data-v-7272e714] {
+  padding: 6px 12px;
+  border: 1px solid #dcdfe6;
+  border-radius: 3px
+}
+
+.pricelimit .pricelimit-list[data-v-7272e714] {
+  display: flex;
+  align-items: center;
+  margin: 16px 0;
+  font-size: 14px
+}
+
+.pricelimit .pricelimit-list .tab-select[data-v-7272e714] {
+  width: 170px;
+  margin: 0 8px
+}
+
+.pricelimit .pricelimit-list .delete-icon[data-v-7272e714] {
+  font-size: 20px;
+  color: #999;
+  cursor: pointer
+}
+
+.pricelimit .addnew[data-v-7272e714] {
+  width: 100px;
+  font-size: 12px;
+  color: #197afb;
+  cursor: pointer
+}
+
+.pricelimit[data-v-7272e714] .el-form .el-form-item {
+  margin-bottom: 0!important
+}
+
+[data-v-1eec231b] .el-select .el-input__inner {
+  width: auto;
+  margin-left: 0
+}
+
+[data-v-1eec231b] .el-select .el-select__tags {
+  flex-wrap: nowrap
+}
+
+[data-v-1eec231b] .el-select .el-select__tags>span {
+  display: contents;
+  width: 100%
+}
+
+[data-v-1eec231b] .el-select .el-select__tags .el-tag {
+  height: 32px;
+  overflow: hidden;
+  line-height: 32px;
+  background-color: transparent;
+  border: 0 none
+}
+
+[data-v-1eec231b] .el-select .el-select__tags .el-tag .el-select__tags-text {
+  display: inline-block;
+  overflow: hidden;
+  font-size: 14px;
+  color: #666;
+  text-overflow: ellipsis;
+  white-space: nowrap
+}
+
+[data-v-1eec231b] .el-select .el-select__tags .el-tag .el-tag__close {
+  display: none
+}
+
+[data-v-1eec231b] .el-select .el-select__tags .el-select__input {
+  height: 32px;
+  margin-left: 0;
+  line-height: 32px
+}
+
+[data-v-1eec231b] .el-select.all-filter.el-select--small .el-input .el-input__inner {
+  height: 32px!important
+}
+
+[data-v-1eec231b] .el-select.all-filter.el-select--small .el-select__tags .el-select__input {
+  margin-left: 15px
+}
+
+[data-v-1eec231b] .el-select.all-filter.el-select--small .el-input__suffix {
+  height: 32px
+}
+
+.disable-icon[data-v-1eec231b] {
+  float: right;
+  width: 45px;
+  height: 24px;
+  margin-top: 5px;
+  margin-right: 20px;
+  font-size: 12px;
+  line-height: 24px;
+  color: #999;
+  text-align: center;
+  background-color: #e8eaec;
+  border-radius: 8px
+}
+
+</style>

src/components/businessMoudle/adAccountGroup/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="screenBox flex">
+    <Input ref="InputRef_text" title="分组名称" placeholderTxt="分组名称" @changeEvent="init()" @clearEvent="init()"/>
+    <Select ref="statusRef" title="状态" @changeEvent="init()" @clearEvent="init()" 
+      :options="statusList.list" />
+    <el-button type="primary" class="lMarauto"  @click="addEvent()">新增账号组</el-button>
+  </div>
+
+  <!--  列表-->
+  <TableList
+      ref="tableListRef"
+      :tableData="tableInfo.tableList"
+      :descol="tableInfo.descolList"
+      :total="total"
+      @init="init"
+  >
+    <template v-slot:operate="slotProps">
+      <div class="text-center">
+        <span class="operate_text lMar8 pointer" @click="addEvent(slotProps.row)">编辑</span>
+        <Popconfirm @confirm="deleEvent(slotProps.row)"/>
+      </div>
+    </template>
+  </TableList>
+
+  <!--  添加分组-->
+  <AddGroup ref="AddGroupRef" @init="init"></AddGroup>
+</template>
+<script setup lang="ts">
+import {nextTick, onMounted, reactive, ref, getCurrentInstance} from 'vue'
+import Input from '@/components/capsulationMoudle/_input.vue'
+import Popconfirm from '@/components/capsulationMoudle/_popconfirm.vue'
+import Select from '@/components/capsulationMoudle/_select.vue'
+import TableList from '@/components/capsulationMoudle/tableList.vue'
+import {adGroupParams, adqParam, departParams, reactiveTableAndAny} from "@/api/ApiModel";
+import {Api} from "@/api/api";
+import {ElMessage} from "element-plus";
+import { publicTableTs } from '@/components/businessMoudle/tableInfo'
+import AddGroup from '@/components/businessMoudle/adAccountGroup/dialog/addGroup.vue'
+
+const { proxy } = getCurrentInstance() as any;
+
+
+// 表格数据公共ts
+const descolParams = reactive([
+  { name:'账号组名称',column:'name',},
+  { name:'操作人',column:'admin',},
+  { name:'所属投手',column:'promoter',},
+  { name:'创建时间',column:'created_at',},
+  { name:'更新时间',column:'updated_at',},
+  { name:'操作',column:'operate',slotFlag: true},
+])
+const { tableInfo,tableListRef,total } = publicTableTs(descolParams)
+
+const addEvent = (item?:any) => {
+  console.log(item)
+  nextTick(()=>{
+    AddGroupRef.value!.switchShow(true,item||'')
+  })
+}
+
+const AddGroupRef = ref<{switchShow:(val:boolean,info?:any)=>void}>()
+
+const InputRef_text = ref<{value:string}>()
+
+const statusRef = ref<{value:number}>()
+
+const statusList = reactive({
+  list: [
+    {value: 0, label: '已禁用' },
+    {value: 1, label: '正常' },
+]
+})
+
+//账号列表
+const init = async (page?:any,pageSize?:any) => {
+  tableListRef.value!.loading = true
+  const paramsModel = reactive({
+    keyword:InputRef_text.value!.value,
+    status: statusRef.value!.value,
+    page: page ? page : 1,
+    page_size: pageSize ? pageSize : 20,
+  })
+  let res:any = await proxy.$http.get(Api.ad_account_group_list,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<adGroupParams>({
+    group_id:item.id,
+    status: 1-item.status
+  })
+  let res:any = await proxy.$http.get(Api.ad_account_group_convert,paramsModel)
+  tableListRef.value!.loading = false
+  ElMessage.info(res.errMsg)
+  if(res&&res.errNo=='0'){
+    await init()
+  }
+}
+
+onMounted( async ()=>{
+  await init()
+})
+</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/components/businessMoudle/oeAdAccount/index.vue

@@ -39,7 +39,7 @@ 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 { reactiveTableAndAny } from "@/api/ApiModel";
 import { Api } from "@/api/api";
 import { ElMessage } from "element-plus";
 import { publicTableTs } from '@/components/businessMoudle/tableInfo'
@@ -54,10 +54,11 @@ const { proxy } = getCurrentInstance() as any;
 
 const typeList = reactive({
   list: [
-  {id:'ACCOUNT_ROLE_TYPE_ADVERTISER', name: '广告主' },
-  // {id:'ACCOUNT_ROLE_TYPE_AGENCY', name: '代理商' },
+  {id:'ADVERTISER', name: '广告主' },
+  {id:'CUSTOMER_ADMIN', name: '纵横组织' },
+  {id:'UNCLAIMED', name: '仓库' },
 ],
-typeAc: 'ACCOUNT_ROLE_TYPE_ADVERTISER'
+  typeAc: 'CUSTOMER_ADMIN'
 })
 const switchTypeItem = (info)=>{
   typeList.typeAc = info.id
@@ -84,10 +85,6 @@ const { tableInfo, tableListRef, total } = publicTableTs(descolParams)
 
 
 const pageInfo = reactive<reactiveTableAndAny>({
-  getTypeList: [
-    { label: '微信MP', value: 1 },
-    { label: '广点通', value: 2 },
-  ],
   createrList: [],
 })
 
@@ -105,12 +102,12 @@ const authEvent = async () => {
 }
 
 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>({
+  const paramsModel = reactive({
+    type: typeList.typeAc,
     keyword: InputRef_text.value!.value,
     page: page ? page : 1,
     page_size: pageSize ? pageSize : 20,
@@ -127,7 +124,7 @@ const init = async (page?: any, pageSize?: any) => {
 
 const deleEvent = async (item: any) => {
   tableListRef.value!.loading = true
-  const paramsModel = reactive<adqParam>({
+  const paramsModel = reactive({
     account_id: item.account_id
   })
   let res: any = await proxy.$http.post(Api.adq_dele, paramsModel)

src/router/index.ts

@@ -31,6 +31,7 @@ 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 adAccountGroup = () => import('@/components/businessMoudle/adAccountGroup/index.vue')
 
 //数据报表
 const acStatement = () => import('@/components/businessMoudle/dataManagement/acStatement/index.vue')
@@ -260,6 +261,14 @@ const constantRoutes: Array<RouteRecordRaw> = [
           title: '广告账户管理'
         }
       },
+      {
+        path: '/adAccountGroup',
+        component: adAccountGroup,
+        name: 'adAccountGroup',
+        meta: {
+          title: '账户组'
+        }
+      },
     ],
   },
 ]