<template>
|
<div class='customer'>
|
<c-r-m-list-head
|
ref="listHead"
|
title="EWS洞察分析"
|
main-title="PWS API" />
|
<el-form :inline="true" class="selectInline">
|
<el-form-item>
|
<el-input
|
class="search-container"
|
v-model="searchName"
|
placeholder="请输入客户CSN"
|
@keyup.enter.native="searchClick"/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="searchClick">查询</el-button>
|
</el-form-item>
|
</el-form>
|
<el-card class="el-card">
|
<el-table
|
v-loading="loading"
|
id="crm-table"
|
:data="tableData"
|
:height="tableHeight"
|
:cell-style="cellStyle"
|
class="n-table--border"
|
border
|
highlight-current-row
|
style="width: 100%"
|
@row-click="rowClick">
|
<el-table-column
|
v-for="(item, index) in fieldList"
|
:key="index"
|
:prop="item.field"
|
:label="item.name"
|
:formatter="fieldFormatter"
|
show-overflow-tooltip>
|
<template
|
slot="header"
|
slot-scope="scope">
|
<div class="table-head-name">{{ scope.column.label }}</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
import CRMListHead from '../clients/components/CRMListHead'
|
import { InsightsMetrics } from '@/api/pwsApi/ewsAnalyze'
|
|
export default {
|
name: 'EwsAnalyze',
|
components: {
|
CRMListHead
|
},
|
data () {
|
return {
|
searchName: '',
|
tableData: [],
|
tableHeight: document.documentElement.clientHeight - 360 + 44,
|
fieldList: [
|
{ name: 'CustomerCSN', field: 'CustomerCSN', formType: 'text' },
|
{ name: 'ContractNumber', field: 'ContractNumber', formType: 'text' },
|
{ name: 'OwnerType', field: 'OwnerType', formType: 'text' },
|
{ name: 'ProductLineCode', field: 'ProductLineCode', formType: 'text' },
|
{ name: 'SeatsPurchased', field: 'SeatsPurchased', formType: 'text' },
|
{ name: 'UsersAssigned', field: 'UsersAssigned', formType: 'text' },
|
{ name: 'SeatsInUse', field: 'SeatsInUse', formType: 'text' },
|
{ name: 'usersAssignedProRated', field: 'UsersAssignedProRated', formType: 'text' },
|
{ name: 'SeatsInUseProRated', field: 'SeatsInUseProRated', formType: 'text' },
|
{ name: 'PremiumFlag', field: 'PremiumFlag', formType: 'text' },
|
{ name: 'TenantId', field: 'TenantId', formType: 'text' },
|
{ name: 'ResellerCSN', field: 'ResellerCSN', formType: 'text' },
|
{ name: 'ResellerName', field: 'ResellerName', formType: 'text' }
|
],
|
crmType: 'ewsAnalyze',
|
loading: false
|
}
|
},
|
mounted () {
|
var self = this
|
/** 控制table的高度 */
|
window.onresize = () => {
|
self.updateTableHeight()
|
}
|
},
|
methods: {
|
searchClick () {
|
console.log(this.searchName)
|
this.getList()
|
},
|
getList () {
|
this.loading = true
|
let params = {
|
'CustomerCSN': this.searchName
|
}
|
InsightsMetrics(params)
|
.then(res => {
|
if (res.data.ErrorCode === 200) {
|
if (res.data.Result.length > 0) {
|
this.tableData = res.data.Result
|
} else {
|
this.tableData = []
|
}
|
this.loading = false
|
} else {
|
this.$message.error(res.data.Message)
|
this.loading = false
|
}
|
})
|
.catch(() => {
|
this.loading = false
|
})
|
},
|
/** 通过回调控制style */
|
cellStyle ({ row, column, rowIndex, columnIndex }) {
|
if (
|
column.property === 'CustomerName' ||
|
column.property === 'businessCheck'
|
) {
|
return { color: '#4D88FF', cursor: 'pointer' }
|
} else {
|
return ''
|
}
|
},
|
rowClick (row, column, event) {
|
},
|
// 列表信息格式化
|
fieldFormatter (row, column) {
|
if (column.property === 'PremiumFlag') {
|
switch (row[column.property]) {
|
case 'true':
|
row[column.property] = '1'
|
break
|
case 'false':
|
row[column.property] = '0'
|
break
|
}
|
}
|
if (row[column.property] === 'null') {
|
return '--'
|
}
|
return row[column.property] || '--'
|
},
|
updateTableHeight () {
|
var offsetHei = document.documentElement.clientHeight
|
// var removeHeight = Object.keys(this.filterObj).length > 0 ? 310 : 240
|
var removeHeight = 240
|
this.tableHeight = offsetHei - removeHeight
|
},
|
queryList (data) {
|
console.log(data)
|
this.headObj = data
|
this.getList(data)
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../clients/styles/table.scss';
|
.selectInline{
|
background: #fff;
|
padding:20px;
|
margin-bottom: 10px;
|
}
|
.crm-create-container {
|
position: relative;
|
height: 100%;
|
}
|
|
.crm-create-flex {
|
position: relative;
|
overflow-x: hidden;
|
overflow-y: auto;
|
flex: 1;
|
}
|
|
.crm-create-header {
|
height: 40px;
|
margin-bottom: 20px;
|
padding: 0 10px;
|
flex-shrink: 0;
|
display: flex;
|
.close {
|
display: block;
|
// width: 15px;
|
// height: 15px;
|
margin-right: -10px;
|
padding: 10px;
|
cursor: pointer;
|
}
|
}
|
|
.crm-create-body {
|
flex: 1;
|
// overflow-x: hidden;
|
// overflow-y: auto;
|
max-height: 500px;
|
}
|
|
/** 将其改变为flex布局 */
|
.crm-create-box {
|
display: flex;
|
flex-wrap: wrap;
|
padding: 0 10px;
|
}
|
|
.crm-create-item {
|
flex: 0 0 45%;
|
flex-shrink: 0;
|
// overflow: hidden;
|
padding-bottom: 30px;
|
}
|
|
// 占用一整行
|
.crm-create-block-item {
|
flex: 0 0 100%;
|
flex-shrink: 0;
|
padding-bottom: 10px;
|
}
|
|
.el-form-item /deep/ .el-form-item__label {
|
// line-height: 32px;
|
font-size: 13px;
|
color: #333333;
|
position: relative;
|
padding-left: 8px;
|
padding-bottom: 0;
|
}
|
|
.el-form /deep/ .el-form-item {
|
margin-bottom: 0px;
|
}
|
|
.el-form /deep/ .el-form-item.is-required .el-form-item__label:before {
|
content: '*';
|
color: #f56c6c;
|
margin-right: 4px;
|
position: absolute;
|
left: 0;
|
top: 8px;
|
}
|
|
.handle-bar {
|
position: relative;
|
.handle-button {
|
float: right;
|
margin-top: 5px;
|
margin-right: 20px;
|
}
|
}
|
|
.el-button + .el-button {
|
margin-left: 0;
|
}
|
.container{
|
position: relative;
|
.popover-foot{
|
position: relative;
|
left: 38%;
|
width: 100%;
|
margin-bottom: 30px;
|
}
|
}
|
.content {
|
position: relative;
|
padding: 32px 40px;
|
display: flex;
|
flex-direction: column;
|
margin-bottom: 40px;
|
height: 355px;
|
overflow: hidden;
|
overflow-y: auto;
|
border-bottom: 1px solid #f1f1f1;
|
.content-wrap{
|
width: 100%;
|
}
|
.otherOpt{
|
margin-bottom: 15px;
|
width: 100%;
|
}
|
p{
|
margin-bottom: 36px;
|
font-size: 14px;
|
font-weight: 550;
|
color: #333;
|
|
}
|
.con-group{
|
margin-bottom: 28px;
|
}
|
.content-wrap /deep/.el-radio-group .el-radio{
|
margin-right: 64px;
|
margin-bottom: 12px;
|
}
|
.content-wrap /deep/.el-radio-group .el-radio .el-radio__label{
|
font-weight: 400;
|
color: #666666;
|
font-size: 14px;
|
}
|
}
|
.header {
|
padding: 16px 30px;
|
flex-shrink: 0;
|
border-bottom: 1px solid #F1F1F1;
|
.name {
|
font-size: 13px;
|
padding: 0 10px;
|
color: #333;
|
}
|
.detail {
|
font-size: 12px;
|
padding: 0 10px;
|
color: #aaaaaa;
|
border-left: 1px solid #aaaaaa;
|
}
|
.close {
|
position: absolute;
|
width: 40px;
|
height: 40px;
|
top: 5px;
|
right: 10px;
|
padding: 10px;
|
}
|
}
|
.customer{
|
// .xr-btn--orange{
|
// background-color: #ff6a00;
|
// border-color: #ff6a00;
|
// }
|
.customerName{
|
cursor:pointer;
|
// color: #ff6a00
|
}
|
}
|
</style>
|
<style lang="scss">
|
.customer{
|
/deep/.el-input .el-input-group__append{
|
// background-color: #ff7d00;
|
// border-color: #ff7d00;
|
// color: #fff;
|
}
|
}
|
/* 新建和编辑 */
|
.new-dialog-title {
|
padding-left: 10px;
|
margin-bottom: 3px;
|
border-left: 2px solid #4D88FF;
|
}
|
.user-dialog{
|
height: 20vh;
|
}
|
.base-dialog{
|
height: 35vh;
|
}
|
.followDialog{
|
height: 35vh;
|
}
|
.new-cusDialog-form {
|
overflow-y: auto;
|
padding: 20px;
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
.new-cusDialog-form /deep/ .el-form-item {
|
// width: 50%;
|
margin: 0;
|
padding-bottom: 10px;
|
}
|
.new-cusDialog-form /deep/ .el-form-item .el-form-item__label {
|
line-height: normal;
|
font-size: 13px;
|
color: #333333;
|
position: relative;
|
padding-bottom: 8px;
|
}
|
.new-cusDialog-form /deep/ .crm-create-item.el-form-item .el-form-item__content {
|
width: 70%;
|
}
|
.new-cusDialog-form /deep/ .crm-create-block-item.el-form-item .el-form-item__content {
|
width: 90%;
|
}
|
.new-cusDialog-form /deep/ .crm-create-item.el-form-item .el-form-item__content .el-input.is-disabled .el-input__inner{
|
cursor: pointer;
|
}
|
.crm-create-item {
|
flex: 0 0 45%;
|
flex-shrink: 0;
|
// overflow: hidden;
|
padding-bottom: 10px;
|
}
|
|
// 占用一整行
|
.crm-create-block-item {
|
flex: 0 0 100%;
|
flex-shrink: 0;
|
padding-bottom: 10px;
|
}
|
.nav-dialog-div {
|
margin-bottom: 20px;
|
}
|
.nav-dialog-div /deep/ .el-input {
|
width: auto;
|
}
|
</style>
|
