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> <!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> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
...@@ -32,10 +32,10 @@ ...@@ -32,10 +32,10 @@
<a href="#" class="bar"><i class="fa fa-bars" aria-hidden="true"></i></a> <a href="#" class="bar"><i class="fa fa-bars" aria-hidden="true"></i></a>
</div> </div>
<div class="col-sm-10 col-md-10 col-lg-7 info"> <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="#"><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> <a href="#" class="user-img"><img src="./images/avatar.jpg" alt="">admin</a>
</div> </div>
</div> </div>
...@@ -158,13 +158,13 @@ ...@@ -158,13 +158,13 @@
<div class="col-xs-6 col-sm-8 col-md-10 digital-container"> <div class="col-xs-6 col-sm-8 col-md-10 digital-container">
<div class="subnav"> <div class="subnav">
<h3>工单类型</h3> <h3>工单类型</h3>
<button type="button" class="btn btn-default select">全部</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">费率修改</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>
<div class="status"> <div class="status" id="workStatus">
工作状态：<select name="status" id=""> 工作状态：<select name="status" id="">
<option value="">空闲中</option> <option value="">空闲中</option>
<option value="">下班</option> <option value="">下班</option>
...@@ -178,15 +178,15 @@ ...@@ -178,15 +178,15 @@
<li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" <li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab"
aria-controls="home" aria-expanded="true" aria-controls="home" aria-expanded="true"
v-on:click="unprocessed()">未受理</a></li> v-on:click="unprocessed()">未受理</a></li>
<!--<li role="presentation" class=""><a href="#profile" role="tab" id="profile-tab" data-toggle="tab"--> <!--<li role="presentation" class=""><a href="#profile" role="tab" id="profile-tab" data-toggle="tab"
<!--aria-controls="profile" aria-expanded="false"--> aria-controls="profile" aria-expanded="false"
<!--&gt;受理中</a></li>--> >受理中</a></li>-->
<li role="presentation" class="dropdown"> <li role="presentation" class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown"
aria-controls="myTabDrop1-contents" aria-expanded="false" v-on:click="processed()">已完结</a> aria-controls="myTabDrop1-contents" aria-expanded="false" v-on:click="processed()">已完结</a>
</li> </li>
</ul> </ul>
<div class="detail">第1-20条，共123条数据</div> <div class="detail" id="numCount">第1-20条，共{{message}}条数据</div>
<!-- 表格 --> <!-- 表格 -->
<table class="table" id="order-list"> <table class="table" id="order-list">
...@@ -205,25 +205,25 @@ ...@@ -205,25 +205,25 @@
</thead> </thead>
<tbody> <tbody>
<tr class="active" v-for="wo in workOrders" :key="wo.text"> <tr class="active" v-for="wo in workOrders" v-bind:key="wo.id">
<th scope="row">1</th> <th scope="row">{{wo.id}}</th>
<td>非常紧急</td> <td>{{wo.urgentLevelDisplay}}</td>
<td>回访</td> <td>{{wo.woType}}</td>
<td>系统</td> <td>{{wo.woCreateUname}}</td>
<td>客服中心/录入客服组</td> <td>{{wo.deptName}}</td>
<td>处理完成</td> <td>{{wo.statusDisplay}}</td>
<td>2018-05-09 12:49:46</td> <td>{{wo.woStartTime}}</td>
<td>12：00</td> <td>12：00</td>
<td><a href="#">查看</a></td> <td><a href="#" v-on:click="woDetail(wo)">查看</a></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<!-- 分页 --> <!-- 分页 -->
<nav aria-label="..."> <nav aria-label="..." id="pager">
<ul class="pager"> <ul class="pager">
<li><a href="#">上一页</a></li> <li><a href="#" v-on:click="prePage()">上一页</a></li>
<li><span>1</span>/<span>5</span></li> <li><span>{{curPage}}</span>/<span>20</span></li>
<li><a href="#">下一页</a></li> <li><a href="#" v-on:click="nextPage()">下一页</a></li>
</ul> </ul>
</nav> </nav>
</div> </div>
......
js/index.js
jQuery(document).ready(function ($) { jQuery(document).ready(function($) {
// 工单列表逻辑
var orderList = new Vue({ var orderList = new Vue({
el: '#order-list', el: '#order-list',
data: { data: {
workOrders: [ workOrders: []
{text: '未处理 JavaScript'}, },
{text: '处理完成 Vue2'}, methods: {
{text: '处理完成 Vue'}, woDetail: function (wo) {
{text: '处理完成'} 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 ($) { ...@@ -30,6 +56,7 @@ jQuery(document).ready(function ($) {
success: function (res) { success: function (res) {
console.log(res); console.log(res);
orderList.workOrders = res.data.list; orderList.workOrders = res.data.list;
numCount.message = res.data.total;
} }
}); });
} }
...@@ -39,13 +66,43 @@ jQuery(document).ready(function ($) { ...@@ -39,13 +66,43 @@ jQuery(document).ready(function ($) {
// 初始化加载回访工单列表 // 初始化加载回访工单列表
initLoadWO(); 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({ var statusTab = new Vue({
el: '#statusTab', el: '#statusTab',
methods: { methods: {
unprocessed: function () { unprocessed: function () {
console.log('unprocessed...');
var url = "/work/wo/list?page=1&limit=20";
var data = JSON.stringify( var data = JSON.stringify(
{ {
"woStatus": 0, "woStatus": 0,
...@@ -53,7 +110,6 @@ jQuery(document).ready(function ($) { ...@@ -53,7 +110,6 @@ jQuery(document).ready(function ($) {
"woProcessUid":'' "woProcessUid":''
} }
); );
console.log('unprocessed...2');
$.ajax({ $.ajax({
url: url, url: url,
dataType: "json", dataType: "json",
...@@ -68,19 +124,15 @@ jQuery(document).ready(function ($) { ...@@ -68,19 +124,15 @@ jQuery(document).ready(function ($) {
} }
}); });
console.log('unprocessed...3');
}, },
processed: function () { processed: function () {
console.log('unprocessed...');
var url = "/work/wo/list?page=1&limit=20";
var data = JSON.stringify( var data = JSON.stringify(
{ {
"woStatus": 1, "woStatus": 1,
"woType": "revisit" "woType": "revisit",
"woProcessUid":''
} }
); );
console.log('unprocessed...2');
$.ajax({ $.ajax({
url: url, url: url,
dataType: "json", dataType: "json",
...@@ -88,7 +140,6 @@ jQuery(document).ready(function ($) { ...@@ -88,7 +140,6 @@ jQuery(document).ready(function ($) {
type: 'post', type: 'post',
contentType: "application/json; charset=utf-8", contentType: "application/json; charset=utf-8",
success: function (res) { success: function (res) {
console.log('unprocessed...4');
console.log(res); console.log(res);
orderList.workOrders = res.data.list; orderList.workOrders = res.data.list;
}, },
...@@ -97,7 +148,6 @@ jQuery(document).ready(function ($) { ...@@ -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