189 lines
7.3 KiB
HTML
189 lines
7.3 KiB
HTML
<!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="css/index.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container" id="index-app">
|
|
<div class="center-container">
|
|
<el-form class="table-box">
|
|
<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>
|
|
<el-table
|
|
:data="tableData"
|
|
border
|
|
row-height="30px">
|
|
<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.salespersonCount}}</el-descriptions-item>
|
|
<el-descriptions-item label="参保人数" >{{detail.insuredPersonCount}}</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="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: '',
|
|
insuredPersonCount: ''
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
created() {
|
|
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
async init () {
|
|
|
|
},
|
|
handleClick(row) {
|
|
console.log(row.kunnr)
|
|
console.log(row.name1)
|
|
|
|
const params = {
|
|
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 : '无数据';
|
|
|
|
}
|
|
}).catch(err => {
|
|
this.$message.error('请求出错了：' + err)
|
|
})
|
|
queryInsuredPersonCountByName(params).then(res => {
|
|
if (String(res.code) === '1') {
|
|
|
|
}
|
|
}).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 || []
|
|
}
|
|
}).catch(err => {
|
|
this.$message.error('请求出错了：' + err)
|
|
})
|
|
}else {
|
|
this.$message('请输入客户名称进行查询');
|
|
this.tableData = ""
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |