|
|
@@ -2,27 +2,75 @@
|
|
|
<div class="customer-equity-grant">
|
|
|
<el-card>
|
|
|
<div class="search-section" slot="header">
|
|
|
- <div class="search-row">
|
|
|
- <el-form :model="searchForm" label-width="70px" inline>
|
|
|
- <el-form-item label="客户号:">
|
|
|
- <el-input v-model="searchForm.customerId" placeholder="请输入客户号" style="width: 220px;" clearable></el-input>
|
|
|
- </el-form-item>
|
|
|
- <div class="button-group" style="margin-left: 20px;">
|
|
|
+ <el-form :model="searchForm" label-width="130px">
|
|
|
+ <el-row :gutter="16">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="客户号:">
|
|
|
+ <el-input v-model="searchForm.customerId" placeholder="请输入客户号" clearable></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="权益编号:">
|
|
|
+ <el-input v-model="searchForm.equityCode" placeholder="请输入权益编号" clearable></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="发放时间:">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="searchForm.grantTimeRange"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ style="width: 100%;"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="16">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="Channel 名称:">
|
|
|
+ <el-select v-model="searchForm.channelName" placeholder="请选择 Channel 名称" clearable filterable style="width: 100%;">
|
|
|
+ <el-option v-for="item in channelOptions" :key="item.id" :label="item.name" :value="item.name"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="Campaign 名称:">
|
|
|
+ <el-select v-model="searchForm.campaignName" placeholder="请选择 Campaign 名称" clearable filterable style="width: 100%;">
|
|
|
+ <el-option v-for="item in campaignOptions" :key="item.id" :label="item.name" :value="item.name"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="客户账户类型:">
|
|
|
+ <el-select v-model="searchForm.accountType" placeholder="请选择客户账户类型" clearable style="width: 100%;">
|
|
|
+ <el-option v-for="item in accountTypeOptions" :key="item" :label="item" :value="item"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="16">
|
|
|
+ <el-col :span="24" class="action-col">
|
|
|
<el-button type="primary" @click="handleSearch">查询</el-button>
|
|
|
<el-button @click="handleReset">重置</el-button>
|
|
|
<el-button type="success" icon="el-icon-download" @click="handleExport">导出</el-button>
|
|
|
- </div>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
</div>
|
|
|
|
|
|
<el-table :data="pagedData" stripe style="width: 100%;" v-loading="loading">
|
|
|
- <el-table-column prop="grantTime" label="发放时间"></el-table-column>
|
|
|
+ <el-table-column prop="grantTime" label="发放时间" width="170"></el-table-column>
|
|
|
<el-table-column prop="equityName" label="权益名称"></el-table-column>
|
|
|
- <el-table-column prop="equityCode" label="权益编号"></el-table-column>
|
|
|
- <el-table-column prop="sourceChannel" label="客户来源渠道"></el-table-column>
|
|
|
- <el-table-column prop="customerId" label="客户号"></el-table-column>
|
|
|
- <el-table-column prop="accountType" label="客户账户类型">
|
|
|
+ <el-table-column prop="equityCode" label="权益编号" width="130"></el-table-column>
|
|
|
+ <el-table-column prop="campaignId" label="Campaign ID" width="120"></el-table-column>
|
|
|
+ <el-table-column prop="campaignName" label="Campaign 名称" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="channelId" label="Channel ID" width="120"></el-table-column>
|
|
|
+ <el-table-column prop="channelName" label="Channel 名称"></el-table-column>
|
|
|
+ <el-table-column prop="customerId" label="客户号" width="140"></el-table-column>
|
|
|
+ <el-table-column prop="accountType" label="客户账户类型" width="130">
|
|
|
<template slot-scope="scope">
|
|
|
<el-tag :type="accountTypeTag[scope.row.accountType]" size="small">{{ scope.row.accountType }}</el-tag>
|
|
|
</template>
|
|
|
@@ -43,11 +91,40 @@
|
|
|
|
|
|
<script>
|
|
|
const ACCOUNT_TYPES = ['Premier', 'Elite', 'PB', 'Prospect']
|
|
|
-const CHANNELS = ['Mobile App', 'Online Banking', 'Branch', 'WeChat Mini Program', 'API']
|
|
|
+const CHANNELS = [
|
|
|
+ { id: 'CH0001', name: '汇丰中国客户服务号' },
|
|
|
+ { id: 'CH0002', name: 'MGM - Mortgage' },
|
|
|
+ { id: 'CH0003', name: 'MGM - Premier' },
|
|
|
+ { id: 'CH0004', name: 'CCSS SMS' },
|
|
|
+ { id: 'CH0005', name: 'GPB Referral' },
|
|
|
+ { id: 'CH0006', name: 'HK referral' },
|
|
|
+ { id: 'CH0007', name: 'Non WPB staff Referral' },
|
|
|
+ { id: 'CH0008', name: 'Pinnacle Referral' },
|
|
|
+ { id: 'CH0009', name: 'RBB Refferal' },
|
|
|
+ { id: 'CH0010', name: 'New staff' },
|
|
|
+ { id: 'CH0011', name: 'IBC referral staff code' },
|
|
|
+ { id: 'CH0012', name: 'HTC' },
|
|
|
+ { id: 'CH0013', name: 'NIVIDA' },
|
|
|
+ { id: 'CH0014', name: 'Mobile X' },
|
|
|
+ { id: 'CH0015', name: 'PWS site' },
|
|
|
+ { id: 'CH0016', name: '汇丰中国小程序' },
|
|
|
+ { id: 'CH0017', name: '汇丰中国订阅号' },
|
|
|
+ { id: 'CH0018', name: '推文尾部入口' },
|
|
|
+ { id: 'CH0019', name: 'Chatbot' },
|
|
|
+ { id: 'CH0020', name: 'SMS' },
|
|
|
+ { id: 'CH0021', name: 'River APP' }
|
|
|
+]
|
|
|
const EQUITY_NAMES = [
|
|
|
'机场贵宾厅', '酒店权益', '高尔夫权益', '健康体检', '保险权益',
|
|
|
'积分兑换', '消费返现', '生日礼遇', '出行权益', '餐饮优惠'
|
|
|
]
|
|
|
+const CAMPAIGNS = [
|
|
|
+ { id: 'CP9001', name: 'Q3 大客户回馈' },
|
|
|
+ { id: 'CP9002', name: '新春开户活动' },
|
|
|
+ { id: 'CP9003', name: '618 消费季营销' },
|
|
|
+ { id: 'CP9004', name: '双十一专享权益' },
|
|
|
+ { id: 'CP9005', name: 'Premier 升级礼遇' }
|
|
|
+]
|
|
|
|
|
|
function generateMockData() {
|
|
|
const list = []
|
|
|
@@ -58,12 +135,17 @@ function generateMockData() {
|
|
|
const pad = n => String(n).padStart(2, '0')
|
|
|
const timeStr = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
|
|
|
|
|
|
+ const campaign = CAMPAIGNS[Math.floor(Math.random() * CAMPAIGNS.length)]
|
|
|
+ const channel = CHANNELS[Math.floor(Math.random() * CHANNELS.length)]
|
|
|
list.push({
|
|
|
id: i,
|
|
|
grantTime: timeStr,
|
|
|
equityName: EQUITY_NAMES[Math.floor(Math.random() * EQUITY_NAMES.length)],
|
|
|
- equityCode: 'EQ' + String(202600000 + i),
|
|
|
- sourceChannel: CHANNELS[Math.floor(Math.random() * CHANNELS.length)],
|
|
|
+ equityCode: 'Q' + String(202600000 + i),
|
|
|
+ campaignId: campaign.id,
|
|
|
+ campaignName: campaign.name,
|
|
|
+ channelId: channel.id,
|
|
|
+ channelName: channel.name,
|
|
|
customerId: 'CUST' + String(100000 + Math.floor(Math.random() * 900000)),
|
|
|
accountType: ACCOUNT_TYPES[Math.floor(Math.random() * ACCOUNT_TYPES.length)]
|
|
|
})
|
|
|
@@ -76,11 +158,21 @@ export default {
|
|
|
name: 'CustomerEquityGrant',
|
|
|
data() {
|
|
|
return {
|
|
|
- searchForm: { customerId: '' },
|
|
|
+ searchForm: {
|
|
|
+ customerId: '',
|
|
|
+ grantTimeRange: [],
|
|
|
+ channelName: '',
|
|
|
+ campaignName: '',
|
|
|
+ equityCode: '',
|
|
|
+ accountType: ''
|
|
|
+ },
|
|
|
loading: false,
|
|
|
currentPage: 1,
|
|
|
pageSize: 10,
|
|
|
tableData: generateMockData(),
|
|
|
+ channelOptions: CHANNELS,
|
|
|
+ campaignOptions: CAMPAIGNS,
|
|
|
+ accountTypeOptions: ACCOUNT_TYPES,
|
|
|
accountTypeTag: {
|
|
|
Premier: '',
|
|
|
Elite: 'success',
|
|
|
@@ -91,9 +183,30 @@ export default {
|
|
|
},
|
|
|
computed: {
|
|
|
filteredData() {
|
|
|
- const keyword = this.searchForm.customerId.trim()
|
|
|
- if (!keyword) return this.tableData
|
|
|
- return this.tableData.filter(item => item.customerId.includes(keyword))
|
|
|
+ let list = this.tableData
|
|
|
+ const customerId = this.searchForm.customerId.trim()
|
|
|
+ if (customerId) {
|
|
|
+ list = list.filter(item => item.customerId.includes(customerId))
|
|
|
+ }
|
|
|
+ if (this.searchForm.grantTimeRange && this.searchForm.grantTimeRange.length === 2) {
|
|
|
+ const start = this.searchForm.grantTimeRange[0]
|
|
|
+ const end = this.searchForm.grantTimeRange[1] + ' 23:59:59'
|
|
|
+ list = list.filter(item => item.grantTime >= start && item.grantTime <= end)
|
|
|
+ }
|
|
|
+ if (this.searchForm.channelName) {
|
|
|
+ list = list.filter(item => item.channelName === this.searchForm.channelName)
|
|
|
+ }
|
|
|
+ if (this.searchForm.campaignName) {
|
|
|
+ list = list.filter(item => item.campaignName === this.searchForm.campaignName)
|
|
|
+ }
|
|
|
+ const equityCode = this.searchForm.equityCode.trim()
|
|
|
+ if (equityCode) {
|
|
|
+ list = list.filter(item => item.equityCode.includes(equityCode))
|
|
|
+ }
|
|
|
+ if (this.searchForm.accountType) {
|
|
|
+ list = list.filter(item => item.accountType === this.searchForm.accountType)
|
|
|
+ }
|
|
|
+ return list
|
|
|
},
|
|
|
pagedData() {
|
|
|
const start = (this.currentPage - 1) * this.pageSize
|
|
|
@@ -105,7 +218,14 @@ export default {
|
|
|
this.currentPage = 1
|
|
|
},
|
|
|
handleReset() {
|
|
|
- this.searchForm.customerId = ''
|
|
|
+ this.searchForm = {
|
|
|
+ customerId: '',
|
|
|
+ grantTimeRange: [],
|
|
|
+ channelName: '',
|
|
|
+ campaignName: '',
|
|
|
+ equityCode: '',
|
|
|
+ accountType: ''
|
|
|
+ }
|
|
|
this.currentPage = 1
|
|
|
},
|
|
|
handlePageChange(page) {
|
|
|
@@ -121,16 +241,13 @@ export default {
|
|
|
<style scoped>
|
|
|
.search-section {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: stretch;
|
|
|
}
|
|
|
|
|
|
-.search-row {
|
|
|
+.action-col {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.button-group {
|
|
|
- display: inline-flex;
|
|
|
gap: 8px;
|
|
|
}
|
|
|
</style>
|