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