刚刚开始实习，划水两天后分到的第一个工作，算是一个小 demo 吧！
磕磕绊绊实现后记录一下。。。
查问条件为：顾客姓名、商品名称、订单创立时间段。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 测试 </title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入款式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#app {
width: 1200px;
margin: 0 auto;
padding-top: 20px;
text-align: center;
}
.table {
font-size: 10px;
margin: 0 auto;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="app">
<input type="custName" v-model="custName" placeholder="请输出顾客姓名"/>
<input type="goodsName" v-model="goodsName" placeholder="请输出商品名称"/>
<input type="startDate" v-model="startDate" placeholder="起始工夫"/>
<input type="endDate" v-model="endDate" placeholder="最初工夫"/>
<el-button type="primary" round size="mini" v-on:click="queryOrder"> 查问 </el-button>
<el-button type="primary" round size="mini" v-on:click="clearData"> 清空 </el-button>
<br>
<table border="1" class="table">
<tr>
<td> 订单号 </td>
<td> 下单工夫 </td>
<td> 订单状态 </td>
<td> 源零碎号 </td>
<td> 商品名称 </td>
<td> 商品订单号 </td>
<td> 商品号 </td>
<td> 品种 </td>
<td> 地址 </td>
<td> 顾客姓名 </td>
<td> 电话 </td>
<tr/>
<tr v-for="item in dataList">
<td v-text="item.orderId"></td>
<td v-text="item.createDate"></td>
<td v-text="item.orderStatus"></td>
<td v-text="item.sourceSystemId"></td>
<td v-text="item.goodsName"></td>
<td v-text="item.goodsOrderId"></td>
<td v-text="item.goodsId"></td>
<td v-text="item.busiType"></td>
<td v-text="item.address"></td>
<td v-text="item.custName"></td>
<td v-text="item.phone"></td>
<tr/>
</table>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
custName: '',
goodsName: '',
startDate: '',
endDate: '',
dataList: [],},
methods: {queryOrder: function () {
var self = this;
axios.post('http://localhost:8080/demo/queryDemoList', {
custName: this.custName,
goodsName: this.goodsName,
startDate: this.startDate,
endDate: this.endDate
}).then(function (response) {console.info('响应数据:' + JSON.stringify(response));
var item;
self.dataList = response.data.data;
});
},
clearData: function () {
var self = this;
this.custName = '', this.goodsName ='', this.startDate = '', this.endDate ='';
axios.post('http://localhost:8080/demo/queryDemoList', {
custName: this.custName,
goodsName: this.goodsName,
startDate: this.startDate,
endDate: this.endDate
}).then(function (response) {self.dataList = response.data.data;});
}
},
created: function () {
var self = this;
axios.post('http://localhost:8080/demo/queryDemoList', {
custName: this.custName,
goodsName: this.goodsName,
startDate: this.startDate,
endDate: this.endDate
}).then(function (response) {self.dataList = response.data.data;});
}
});
</script>
</body>
</html>