adsp-vue/src/views/modules/advertiser/AdqAccountClaimList.vue

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