Skip to content

W
work-order-system
Commit 50e7ad59 by Jie Feng
Options

add vue and page logic

parent a72c90e2
Showing with 94 additions and 44 deletions
index.html
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
......@@ -32,10 +32,10 @@
<a href="#" class="bar"><i class="fa fa-bars" aria-hidden="true"></i></a>
</div>
<div class="col-sm-10 col-md-10 col-lg-7 info">
<a href="#">即将回收的客户<i class="circle">5</i></a>
<!--<a href="#">即将回收的客户<i class="circle">5</i></a>
<a href="#"><i class="fa fa-upload" aria-hidden="true"></i>上传</a>
<a href="#"><i class="fa fa-upload" aria-hidden="true"></i>备用上传</a>
<a href="#"><i class="fa fa-upload" aria-hidden="true"></i>海外收款</a>
<a href="#"><i class="fa fa-upload" aria-hidden="true"></i>海外收款</a>-->
<a href="#" class="user-img"><img src="./images/avatar.jpg" alt="">admin</a>
</div>
</div>
......@@ -158,13 +158,13 @@
<div class="col-xs-6 col-sm-8 col-md-10 digital-container">
<div class="subnav">
<h3>工单类型</h3>
<button type="button" class="btn btn-default select">全部</button>
<button type="button" class="btn btn-default">预定</button>
<button type="button" class="btn btn-default">费率修改</button>
<!--<button type="button" class="btn btn-default select">全部</button>-->
<!--<button type="button" class="btn btn-default">预定</button>-->
<!--<button type="button" class="btn btn-default">费率修改</button>-->
<button type="button" class="btn btn-default">回访</button>
<button type="button" class="btn btn-default else">其他</button>
<!--<button type="button" class="btn btn-default else">其他</button>-->
</div>
<div class="status">
<div class="status" id="workStatus">
工作状态：<select name="status" id="">
<option value="">空闲中</option>
<option value="">下班</option>
......@@ -178,15 +178,15 @@
<li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab"
aria-controls="home" aria-expanded="true"
v-on:click="unprocessed()">未受理</a></li>
<!--<li role="presentation" class=""><a href="#profile" role="tab" id="profile-tab" data-toggle="tab"-->
<!--aria-controls="profile" aria-expanded="false"-->
<!--&gt;受理中</a></li>-->
<!--<li role="presentation" class=""><a href="#profile" role="tab" id="profile-tab" data-toggle="tab"
aria-controls="profile" aria-expanded="false"
>受理中</a></li>-->
<li role="presentation" class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown"
aria-controls="myTabDrop1-contents" aria-expanded="false" v-on:click="processed()">已完结</a>
</li>
</ul>
<div class="detail">第1-20条，共123条数据</div>
<div class="detail" id="numCount">第1-20条，共{{message}}条数据</div>
<!-- 表格 -->
<table class="table" id="order-list">
......@@ -205,25 +205,25 @@
</thead>
<tbody>
<tr class="active" v-for="wo in workOrders" :key="wo.text">
<th scope="row">1</th>
<td>非常紧急</td>
<td>回访</td>
<td>系统</td>
<td>客服中心/录入客服组</td>
<td>处理完成</td>
<td>2018-05-09 12:49:46</td>
<tr class="active" v-for="wo in workOrders" v-bind:key="wo.id">
<th scope="row">{{wo.id}}</th>
<td>{{wo.urgentLevelDisplay}}</td>
<td>{{wo.woType}}</td>
<td>{{wo.woCreateUname}}</td>
<td>{{wo.deptName}}</td>
<td>{{wo.statusDisplay}}</td>
<td>{{wo.woStartTime}}</td>
<td>12：00</td>
<td><a href="#">查看</a></td>
<td><a href="#" v-on:click="woDetail(wo)">查看</a></td>
</tr>
</tbody>
</table>
<!-- 分页 -->
<nav aria-label="...">
<nav aria-label="..." id="pager">
<ul class="pager">
<li><a href="#">上一页</a></li>
<li><span>1</span>/<span>5</span></li>
<li><a href="#">下一页</a></li>
<li><a href="#" v-on:click="prePage()">上一页</a></li>
<li><span>{{curPage}}</span>/<span>20</span></li>
<li><a href="#" v-on:click="nextPage()">下一页</a></li>
</ul>
</nav>
</div>
......
js/index.js
jQuery(document).ready(function ($) {
jQuery(document).ready(function($) {
// 工单列表逻辑
var orderList = new Vue({
el: '#order-list',
data: {
workOrders: [
{text: '未处理 JavaScript'},
{text: '处理完成 Vue2'},
{text: '处理完成 Vue'},
{text: '处理完成'}
]
workOrders: []
},
methods: {
woDetail: function (wo) {
console.log(wo.id);
// 获取工单详情
var data = JSON.stringify(
{
"id": wo.id,
"woStatus": wo.woStatus,
"woType": wo.woType,
"woProcessUid":''
}
);
$.ajax({
url: url,
dataType: "json",
data: data,
type: 'post',
contentType: "application/json; charset=utf-8",
success: function (res) {
console.log(res);
orderList.workOrders = res.data.list;
},
fail: function (msg) {
console.log(msg);
}
});
}
}
})
......@@ -30,6 +56,7 @@ jQuery(document).ready(function ($) {
success: function (res) {
console.log(res);
orderList.workOrders = res.data.list;
numCount.message = res.data.total;
}
});
}
......@@ -39,13 +66,43 @@ jQuery(document).ready(function ($) {
// 初始化加载回访工单列表
initLoadWO();
// 员工工作状态逻辑
var workStatus = new Vue({
el: '#workStatus',
data: {
curStatus: '下班'
}
})
// 数据提示条
var numCount = new Vue({
el: '#numCount',
data: {
message:"100"
}
})
// 页面分页按钮逻辑
var pager = new Vue({
el: '#pager',
data: {
curPage: 1
},
methods: {
prePage: function() {
this.curPage = this.curPage - 1;
},
nextPage: function() {
this.curPage = this.curPage + 1;
}
}
})
// 工单状态选择Tab逻辑
var url = "/work/wo/list?page=1&limit=20";
var statusTab = new Vue({
el: '#statusTab',
methods: {
unprocessed: function () {
console.log('unprocessed...');
var url = "/work/wo/list?page=1&limit=20";
var data = JSON.stringify(
{
"woStatus": 0,
......@@ -53,7 +110,6 @@ jQuery(document).ready(function ($) {
"woProcessUid":''
}
);
console.log('unprocessed...2');
$.ajax({
url: url,
dataType: "json",
......@@ -68,19 +124,15 @@ jQuery(document).ready(function ($) {
}
});
console.log('unprocessed...3');
},
processed: function () {
console.log('unprocessed...');
var url = "/work/wo/list?page=1&limit=20";
var data = JSON.stringify(
{
"woStatus": 1,
"woType": "revisit"
"woType": "revisit",
"woProcessUid":''
}
);
console.log('unprocessed...2');
$.ajax({
url: url,
dataType: "json",
......@@ -88,7 +140,6 @@ jQuery(document).ready(function ($) {
type: 'post',
contentType: "application/json; charset=utf-8",
success: function (res) {
console.log('unprocessed...4');
console.log(res);
orderList.workOrders = res.data.list;
},
......@@ -97,7 +148,6 @@ jQuery(document).ready(function ($) {
}
});
console.log('unprocessed...3');
}
}
})
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment