<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>客户跟踪查询</title>
<meta name="author" content="JIAL">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="HandheldFriendly" content="true">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="icon" href="/static/image/JNlogo.png" type="image/x-icon">
<link rel="stylesheet" href="/plugins/element-ui/index.css">
<!-- import CSS -->
<link rel="stylesheet" href="/static/bizquery/css/index.css">
</head>
<body>
<div class="container" id="index-app">
<div class="center-container">
<div class="table-box">
<span th:text="${employeeId}" style="display: none" ref="employeeIdSpan"></span>
<div>正在访问客户跟踪查询界面，登入的用户为: <span th:text="${employeeName}"></span></div>
<h3>该页面可以根据客户名称查询该客户与公司发生业务的相关信息，方便各位判断是否可以作为新客户进行开发。</h3>
<el-form >
<el-form-item>
<el-input v-model="var1" placeholder="请输入客户名称" maxlength="20" type="text" auto-complete="off" clearable>
</el-input>
<el-select v-model="timeValue" placeholder="请选择时间">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button type="primary" @click="queryList">点击查询</el-button>
</el-form-item>
</el-form>
</div>
<el-table
:data="tableData"
border
:row-style="{height: '0px'}"
:cell-style="{padding: '2px 0px 1px 0px', 'text-align': 'left'}"
:header-cell-style="{ background: '#eef1f6', color: '#606266', 'text-align': 'left' }">
<el-table-column
prop="kunnr"
label="客户编号">
</el-table-column>
<el-table-column
prop="name1"
label="客户名称">
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text">查看</el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog title="详细情况" :visible.sync="dialogTableVisible">
<template>
<el-descriptions :column="1" :label-style="LS" border>
<el-descriptions-item label="最近下单日期">{{detail.latestOrderDate}}</el-descriptions-item>
<el-descriptions-item label="最近发货日期">{{detail.latestShippingDate}}</el-descriptions-item>
<el-descriptions-item label="最近报价日期">{{detail.latestQuotationDate}}</el-descriptions-item>
<el-descriptions-item label="最近合同日期" >{{detail.latestContractDate}}</el-descriptions-item>
<el-descriptions-item label="最近投标日期" >{{detail.latestBidDate}}</el-descriptions-item>
<el-descriptions-item label="目前在跟踪的业务员数量" >{{detail.salespersonCount}}</el-descriptions-item>
<el-descriptions-item label="参保人数" >{{detail.insuredCount}}</el-descriptions-item>
</el-descriptions>
</template>
</el-dialog>
</div>
<script src="/plugins/vue/vue.js"></script>
<script src="/plugins/element-ui/index.js"></script>
<script src="/plugins/calendar/calendar.js"></script>
<script src="/plugins/axios/axios.min.js"></script>
<script src="/plugins/axios/request.js"></script>
<script src="/static/bizquery/js/index.js"></script>
<script>
new Vue({
el: '#index-app',
data() {
return {
var1 : "",
options: [
{value: '1', label: '一年以内'},
{value: '2', label: '两年以内'},
{value: '3', label: '三年以内'},
],
timeValue: '1',
tableData: null,
gridData: "",
dialogTableVisible: false,
LS: {
'color': '#000',
'text-align': 'left',
'font-weight': '600',
'height': '40px',
'background-color': '#d6dbe1',
'min-width' : '50px',
'width': '150px',
'word-break': 'keep-all',
'whiteSpace': 'pre-wrap'
},
detail: {
latestOrderDate: '',
latestShippingDate: '',
salespersonCount: '',
latestQuotationDate: '',
insuredCount: '',
latestContractDate: '',
latestBidDate: ''
},
employeeId: /*[[${employeeId}]]*/ ''
}
},
computed: {
},
created() {
},
mounted() {
},
methods: {
async init () {
},
handleClick(row) {
console.log(row.kunnr)
console.log(row.name1)
const employeeId = this.$refs.employeeIdSpan.innerText;
const params = {
employeeId: employeeId,
name : row.name1,
kunnr : row.kunnr,
time : this.timeValue
}
console.log(params)
queryDetailByParams(params).then(res => {
if (String(res.code) === '1') {
console.log(res.data)
this.detail.latestOrderDate = res.data.latestOrderDate !== '0' ? res.data.latestOrderDate : '无数据';
this.detail.salespersonCount = res.data.salespersonCount !== '0' ? res.data.salespersonCount : '无数据';
this.detail.latestQuotationDate = res.data.latestQuotationDate !== '0' ? res.data.latestQuotationDate : '无数据';
this.detail.latestShippingDate = res.data.latestShippingDate !== '0' ? res.data.latestShippingDate : '无数据';
this.detail.latestContractDate = res.data.latestContractDate !== '0' ? res.data.latestContractDate : '无数据';
this.detail.latestBidDate = res.data.latestBidDate !== '0' ? res.data.latestBidDate : '无数据';
}
}).catch(err => {
this.$message.error('请求出错了：' + err)
})
queryInsuredCountByName(params).then(res => {
if (String(res.code) === '1') {
this.detail.insuredCount = res.data.insuredCount !== '' ? res.data.insuredCount : '无数据';
}
}).catch(err => {
this.$message.error('请求出错了：' + err)
})
this.dialogTableVisible = true
},
queryList() {
console.log("开始调用查询")
const name = this.var1
console.log("名称+" + name)
const params = {
name : name
}
console.log(params)
if(this.var1 !== "") {
queryListByName(params).then(res => {
if (String(res.code) === '1') {
console.log(res.data)
this.tableData = res.data || []
} else if (String(res.code) === '0') {
this.$message({
showClose: true,
message: res.msg,
type: 'error'
});
}
}).catch(err => {
this.$message.error('请求出错了：' + err)
})
}else {
this.$message('请输入客户名称进行查询');
this.tableData = ""
}
}
}
})
</script>
</body>
</html>