advertSystem/src/components/businessMoudle/adAccountGroup/index.vue

<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>