|
@@ -0,0 +1,246 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <a-card :bordered="false">
|
|
|
|
|
+ <!-- 查询区域 -->
|
|
|
|
|
+ <div class="table-page-search-wrapper">
|
|
|
|
|
+ <a-form layout="inline">
|
|
|
|
|
+ <a-row :gutter="24">
|
|
|
|
|
+ <a-col :md="8" :sm="8">
|
|
|
|
|
+ <a-form-item label="账户ID">
|
|
|
|
|
+ <a-textarea placeholder="请输入账户ID,多个用逗号或换行分隔" v-model="queryParam.accountIds" :autoSize="{ minRows: 1, maxRows: 4 }"></a-textarea>
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ </a-col>
|
|
|
|
|
+ <a-col :md="8" :sm="8">
|
|
|
|
|
+ <a-form-item label="广告主名称">
|
|
|
|
|
+ <a-input placeholder="请输入广告主名称" v-model="queryParam.advertiserName"></a-input>
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ </a-col>
|
|
|
|
|
+ <a-col :md="8" :sm="8">
|
|
|
|
|
+ <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
|
|
|
|
|
+ <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
|
|
|
|
+ <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </a-col>
|
|
|
|
|
+ </a-row>
|
|
|
|
|
+ </a-form>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 操作按钮区域 -->
|
|
|
|
|
+ <div class="table-operator" style="margin-top: 16px">
|
|
|
|
|
+ <a-button type="primary" @click="showClaimModal" :disabled="selectedRowKeys.length === 0">
|
|
|
|
|
+ <a-icon type="check-circle" />批量认领 ({{ selectedRowKeys.length }})
|
|
|
|
|
+ </a-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- table区域 -->
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <a-table
|
|
|
|
|
+ ref="table"
|
|
|
|
|
+ size="middle"
|
|
|
|
|
+ bordered
|
|
|
|
|
+ rowKey="accountId"
|
|
|
|
|
+ :columns="columns"
|
|
|
|
|
+ :dataSource="dataSource"
|
|
|
|
|
+ :pagination="ipagination"
|
|
|
|
|
+ :loading="loading"
|
|
|
|
|
+ :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
|
|
|
|
|
+ @change="handleTableChange"
|
|
|
|
|
+ >
|
|
|
|
|
+ </a-table>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 认领弹窗 -->
|
|
|
|
|
+ <a-modal
|
|
|
|
|
+ title="账户认领 - 选择项目"
|
|
|
|
|
+ v-model="claimVisible"
|
|
|
|
|
+ @ok="handleClaim"
|
|
|
|
|
+ :confirmLoading="claimLoading"
|
|
|
|
|
+ :width="600"
|
|
|
|
|
+ >
|
|
|
|
|
+ <a-form layout="vertical">
|
|
|
|
|
+ <a-form-item label="已选账户数">
|
|
|
|
|
+ <span style="font-weight: bold; font-size: 16px">{{ selectedRowKeys.length }} 个</span>
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ <a-form-item label="选择项目" required>
|
|
|
|
|
+ <a-select
|
|
|
|
|
+ v-model="claimProjectId"
|
|
|
|
|
+ placeholder="请选择项目"
|
|
|
|
|
+ showSearch
|
|
|
|
|
+ optionFilterProp="children"
|
|
|
|
|
+ :filterOption="filterOption"
|
|
|
|
|
+ @search="searchProjects"
|
|
|
|
|
+ @focus="loadProjects"
|
|
|
|
|
+ style="width: 100%"
|
|
|
|
|
+ >
|
|
|
|
|
+ <a-select-option :value="item.projectId" v-for="item of projectList" :key="item.projectId">
|
|
|
|
|
+ {{ item.projectName }}
|
|
|
|
|
+ </a-select-option>
|
|
|
|
|
+ </a-select>
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ </a-form>
|
|
|
|
|
+ </a-modal>
|
|
|
|
|
+ </a-card>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+import { getAction, postAction } from '@/api/manage'
|
|
|
|
|
+
|
|
|
|
|
+export default {
|
|
|
|
|
+ name: 'AdqAccountClaimList',
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ description: '腾讯账户认领',
|
|
|
|
|
+ queryParam: {},
|
|
|
|
|
+ dataSource: [],
|
|
|
|
|
+ loading: false,
|
|
|
|
|
+ selectedRowKeys: [],
|
|
|
|
|
+ selectedRows: [],
|
|
|
|
|
+ columns: [
|
|
|
|
|
+ {
|
|
|
|
|
+ title: '账户ID',
|
|
|
|
|
+ align: 'center',
|
|
|
|
|
+ dataIndex: 'accountId',
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ title: '广告主名称',
|
|
|
|
|
+ align: 'center',
|
|
|
|
|
+ dataIndex: 'advertiserName',
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ title: '公司名称',
|
|
|
|
|
+ align: 'center',
|
|
|
|
|
+ dataIndex: 'corporationName',
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ title: '认证状态',
|
|
|
|
|
+ align: 'center',
|
|
|
|
|
+ dataIndex: 'systemStatus',
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ title: '管家账户ID',
|
|
|
|
|
+ align: 'center',
|
|
|
|
|
+ dataIndex: 'adminAdvertiserId',
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ title: '创建时间',
|
|
|
|
|
+ align: 'center',
|
|
|
|
|
+ dataIndex: 'createTime',
|
|
|
|
|
+ },
|
|
|
|
|
+ ],
|
|
|
|
|
+ ipagination: {
|
|
|
|
|
+ current: 1,
|
|
|
|
|
+ pageSize: 10,
|
|
|
|
|
+ pageSizeOptions: ['10', '20', '50', '100'],
|
|
|
|
|
+ showTotal: (total, range) => {
|
|
|
|
|
+ return range[0] + '-' + range[1] + ' 共' + total + '条'
|
|
|
|
|
+ },
|
|
|
|
|
+ showQuickJumper: true,
|
|
|
|
|
+ showSizeChanger: true,
|
|
|
|
|
+ total: 0,
|
|
|
|
|
+ },
|
|
|
|
|
+ // 认领相关
|
|
|
|
|
+ claimVisible: false,
|
|
|
|
|
+ claimLoading: false,
|
|
|
|
|
+ claimProjectId: undefined,
|
|
|
|
|
+ projectList: [],
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ mounted() {
|
|
|
|
|
+ this.loadData()
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ loadData(arg) {
|
|
|
|
|
+ if (arg === 1) {
|
|
|
|
|
+ this.ipagination.current = 1
|
|
|
|
|
+ }
|
|
|
|
|
+ this.loading = true
|
|
|
|
|
+ let params = {
|
|
|
|
|
+ pageNo: this.ipagination.current,
|
|
|
|
|
+ pageSize: this.ipagination.pageSize,
|
|
|
|
|
+ ...this.queryParam,
|
|
|
|
|
+ }
|
|
|
|
|
+ getAction('/ctop/adqAccountClaim/unclaimedList', params).then((res) => {
|
|
|
|
|
+ this.loading = false
|
|
|
|
|
+ if (res.success) {
|
|
|
|
|
+ this.dataSource = res.result.records || []
|
|
|
|
|
+ this.ipagination.total = res.result.total || 0
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$message.error(res.message || '查询失败')
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ searchQuery() {
|
|
|
|
|
+ this.loadData(1)
|
|
|
|
|
+ },
|
|
|
|
|
+ searchReset() {
|
|
|
|
|
+ this.queryParam = {}
|
|
|
|
|
+ this.loadData(1)
|
|
|
|
|
+ },
|
|
|
|
|
+ handleTableChange(pagination) {
|
|
|
|
|
+ this.ipagination = pagination
|
|
|
|
|
+ this.loadData()
|
|
|
|
|
+ },
|
|
|
|
|
+ onSelectChange(selectedRowKeys, selectedRows) {
|
|
|
|
|
+ this.selectedRowKeys = selectedRowKeys
|
|
|
|
|
+ this.selectedRows = selectedRows
|
|
|
|
|
+ },
|
|
|
|
|
+ showClaimModal() {
|
|
|
|
|
+ if (this.selectedRowKeys.length === 0) {
|
|
|
|
|
+ this.$message.warning('请至少选择一个账户')
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ this.claimVisible = true
|
|
|
|
|
+ this.claimProjectId = undefined
|
|
|
|
|
+ this.loadProjects()
|
|
|
|
|
+ },
|
|
|
|
|
+ loadProjects() {
|
|
|
|
|
+ getAction('/ctop/adqAccountClaim/projectList', {}).then((res) => {
|
|
|
|
|
+ if (res.success) {
|
|
|
|
|
+ this.projectList = res.result || []
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ searchProjects(value) {
|
|
|
|
|
+ getAction('/ctop/adqAccountClaim/projectList', { projectName: value }).then((res) => {
|
|
|
|
|
+ if (res.success) {
|
|
|
|
|
+ this.projectList = res.result || []
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ filterOption(input, option) {
|
|
|
|
|
+ return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
|
|
+ },
|
|
|
|
|
+ handleClaim() {
|
|
|
|
|
+ if (!this.claimProjectId) {
|
|
|
|
|
+ this.$message.warning('请选择项目')
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ this.claimLoading = true
|
|
|
|
|
+ let accountIds = this.selectedRows.map((item) => ({
|
|
|
|
|
+ accountId: item.accountId,
|
|
|
|
|
+ advertiserName: item.advertiserName,
|
|
|
|
|
+ adminAdvertiserId: item.adminAdvertiserId,
|
|
|
|
|
+ }))
|
|
|
|
|
+ let params = {
|
|
|
|
|
+ projectId: this.claimProjectId,
|
|
|
|
|
+ accountIds: accountIds,
|
|
|
|
|
+ }
|
|
|
|
|
+ postAction('/ctop/adqAccountClaim/batchClaim', params).then((res) => {
|
|
|
|
|
+ this.claimLoading = false
|
|
|
|
|
+ if (res.success) {
|
|
|
|
|
+ this.$message.success('账户认领成功')
|
|
|
|
|
+ this.claimVisible = false
|
|
|
|
|
+ this.selectedRowKeys = []
|
|
|
|
|
+ this.selectedRows = []
|
|
|
|
|
+ this.loadData()
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$message.error(res.message || '认领失败')
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+}
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style scoped>
|
|
|
|
|
+@import '~@assets/less/common.less';
|
|
|
|
|
+</style>
|