276 lines
7.5 KiB
Vue
276 lines
7.5 KiB
Vue
<template>
|
||
<div class="customer-wrap">
|
||
<div class="content-box">
|
||
<div class="form-box">
|
||
<el-form ref="searchForm" :model="searchForm">
|
||
<el-row>
|
||
<el-col :span="6">
|
||
<el-form-item label="客户名称" prop="custName" label-width="80px">
|
||
<el-input
|
||
v-model="searchForm.custName"
|
||
clearable
|
||
@keyup.enter.native="handleSearch"
|
||
@clear="handleSearch"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col v-if="selectedTab === '1'" :span="6">
|
||
<el-form-item label="证件号" prop="custIdc" label-width="80px">
|
||
<el-input
|
||
v-model="searchForm.custIdc"
|
||
clearable
|
||
@keyup.enter.native="handleSearch"
|
||
@clear="handleSearch"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col v-else :span="6">
|
||
<el-form-item label="统一信用码" prop="socialCreditCode" label-width="100px">
|
||
<el-input
|
||
v-model="searchForm.socialCreditCode"
|
||
clearable
|
||
@keyup.enter.native="handleSearch"
|
||
@clear="handleSearch"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="5" :offset="1" style="text-align: left">
|
||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||
<el-button @click="handleReset">重置</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</div>
|
||
|
||
<div class="operate-btn">
|
||
<el-button @click="returnLastPage">返回上一级</el-button>
|
||
<el-button type="primary" @click="handleDownload">导出</el-button>
|
||
</div>
|
||
|
||
<div class="remark">
|
||
<span>统计日期：<span class="span-value">{{ dt }}</span></span>
|
||
<span>客群名称：<span class="span-value">{{ groupName }}</span></span>
|
||
<span>客群模式：<span class="span-value">{{ groupModeText }}</span></span>
|
||
</div>
|
||
|
||
<div class="main_table">
|
||
<el-table v-loading="loading" :data="tableData" style="width: 100%">
|
||
<el-table-column
|
||
v-for="(item, index) in tableColumns"
|
||
:key="index"
|
||
align="center"
|
||
:prop="item.prop"
|
||
:label="item.label"
|
||
show-overflow-tooltip
|
||
:width="item.width || 120"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
v-if="item.prop === 'custName'"
|
||
type="text"
|
||
class="special-btn"
|
||
@click="openCustomer(scope.row)"
|
||
>
|
||
{{ scope.row[item.prop] || '-' }}
|
||
</el-button>
|
||
<span v-else>{{ scope.row[item.prop] || '-' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
:page-sizes="[10, 20, 30, 40]"
|
||
:page-size="pageSize"
|
||
layout="->,total,prev,pager,next,sizes"
|
||
:total="total"
|
||
:current-page="pageNum"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getGroupPerformanceLsCustList,
|
||
getGroupPerformanceGsCustList,
|
||
exportGroupPerformanceLsCust,
|
||
exportGroupPerformanceGsCust
|
||
} from '@/api/group/performance';
|
||
import { retailDetailColumns, publicDetailColumns, groupModeDict } from '../list/list';
|
||
import { downloadFiles } from '@/utils';
|
||
|
||
export default {
|
||
name: 'GroupPerformanceCustom',
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
tableData: [],
|
||
total: 0,
|
||
pageSize: 10,
|
||
pageNum: 1,
|
||
tableColumns: [],
|
||
selectedTab: '1',
|
||
dt: '',
|
||
groupId: '',
|
||
groupName: '',
|
||
groupMode: '',
|
||
searchForm: {
|
||
custName: '',
|
||
custIdc: '',
|
||
socialCreditCode: ''
|
||
}
|
||
};
|
||
},
|
||
computed: {
|
||
groupModeText() {
|
||
return groupModeDict[this.groupMode] || '-';
|
||
}
|
||
},
|
||
created() {
|
||
const { type, dt, groupId, groupName, groupMode } = this.$route.query;
|
||
this.selectedTab = type || '1';
|
||
this.dt = dt || '';
|
||
this.groupId = groupId || '';
|
||
this.groupName = groupName || '';
|
||
this.groupMode = groupMode || '';
|
||
this.tableColumns = this.selectedTab === '1' ? retailDetailColumns : publicDetailColumns;
|
||
this.getList();
|
||
},
|
||
methods: {
|
||
getList() {
|
||
this.loading = true;
|
||
const api = this.selectedTab === '1' ? getGroupPerformanceLsCustList : getGroupPerformanceGsCustList;
|
||
const params = {
|
||
groupId: this.groupId,
|
||
dt: this.dt,
|
||
custName: this.searchForm.custName,
|
||
custIdc: this.searchForm.custIdc,
|
||
socialCreditCode: this.searchForm.socialCreditCode,
|
||
pageNum: this.pageNum,
|
||
pageSize: this.pageSize
|
||
};
|
||
api(params).then(res => {
|
||
this.tableData = res.rows;
|
||
this.total = res.total;
|
||
this.loading = false;
|
||
}).catch(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
handleSearch() {
|
||
this.pageNum = 1;
|
||
this.getList();
|
||
},
|
||
handleReset() {
|
||
this.searchForm = {
|
||
custName: '',
|
||
custIdc: '',
|
||
socialCreditCode: ''
|
||
};
|
||
this.pageNum = 1;
|
||
this.getList();
|
||
},
|
||
handleSizeChange(size) {
|
||
this.pageSize = size;
|
||
this.getList();
|
||
},
|
||
handleCurrentChange(page) {
|
||
this.pageNum = page;
|
||
this.getList();
|
||
},
|
||
handleDownload() {
|
||
const api = this.selectedTab === '1' ? exportGroupPerformanceLsCust : exportGroupPerformanceGsCust;
|
||
const fileName = this.selectedTab === '1' ? '零售客群客户明细' : '公司客群客户明细';
|
||
api({
|
||
groupId: this.groupId,
|
||
dt: this.dt,
|
||
custName: this.searchForm.custName,
|
||
custIdc: this.searchForm.custIdc,
|
||
socialCreditCode: this.searchForm.socialCreditCode
|
||
}).then(res => {
|
||
downloadFiles(res, `${fileName}_${new Date().getTime()}.xlsx`);
|
||
});
|
||
},
|
||
returnLastPage() {
|
||
this.$router.replace({
|
||
path: '/center/groupPerformance/list'
|
||
});
|
||
},
|
||
openCustomer(row) {
|
||
const custType = row.custType;
|
||
let path = '';
|
||
const rawId = this.selectedTab === '1' ? row.custIdc : row.socialCreditCode;
|
||
const custId = rawId ? (custType === '0' ? `101${rawId}` : `202${rawId}`) : '';
|
||
if (custType === '0') {
|
||
path = '/360charts/indexcharts';
|
||
} else if (custType === '1') {
|
||
path = '/360charts/commercial/';
|
||
} else if (custType === '2') {
|
||
path = '/360charts/firm/';
|
||
}
|
||
if (!path || !custId) {
|
||
return;
|
||
}
|
||
this.$router.push({
|
||
path: path,
|
||
query: {
|
||
custId,
|
||
selectedTab: custType,
|
||
backUrl: '/center/groupPerformance/list'
|
||
}
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.customer-wrap {
|
||
background-color: #ffffff;
|
||
overflow: hidden;
|
||
box-shadow: 0 3px 8px 0 #00000017;
|
||
}
|
||
|
||
.content-box {
|
||
padding: 20px 24px 24px;
|
||
}
|
||
|
||
.operate-btn {
|
||
margin-bottom: 12px;
|
||
|
||
.el-button + .el-button {
|
||
margin-left: 12px;
|
||
}
|
||
}
|
||
|
||
.remark {
|
||
margin-bottom: 12px;
|
||
color: #666666;
|
||
|
||
span {
|
||
display: inline-block;
|
||
margin-right: 20px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.span-value {
|
||
color: #333333;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.main_table {
|
||
margin-top: 15px;
|
||
}
|
||
|
||
::v-deep .el-input {
|
||
width: 100%;
|
||
}
|
||
|
||
::v-deep .el-pagination {
|
||
margin-top: 15px;
|
||
}
|
||
</style>
|