yumeng 2 週間 前
コミット
7c215faa90
1 ファイル変更246 行追加0 行削除
  1. 246 0
      src/views/modules/advertiser/AdqAccountClaimList.vue

+ 246 - 0
src/views/modules/advertiser/AdqAccountClaimList.vue

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