Vue.js的应用——e.currentTarget的应用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0,width=device-width" />
<title></title>
<link rel="stylesheet" href="../static/css/mobiscroll.custom-2.5.2.min.css">
<link rel="stylesheet" type="text/css" href="../static/css/queryList.css"/>

</head>
<body>

<div id="ql">
<div class="title">
<div class="return" @click="returnFront">
<img src="../static/img/return.png"/>
</div>
<span>工单查询</span>
</div>

<div class="queryHead">
<form method="post" id="queryId">
<div class="qCompany">
<label >企业名称：</label>
<input type="text" id="companyName" name="companyName" v-model="companyName" placeholder="请输入企业名称" />
</div>
<div class="qTime">
<label>起止时间：</label>
<input type="text" name="fromTime" id="fromTime" v-model="fromTime" placeholder="开始日期" />
<span>—</span>
<input type="text" name="toTime" id="toTime" v-model="toTime" placeholder="结束日期" />
</div>
</form>
<div class="queryImg" @click="queryIng">
<div>
<img src="../static/img/query.png"/>
</div>
</div>
</div>

<div class="queryCont">

<span class="queryContUl" v-html="message" ></span>
<ul class="queryContUl">
<li v-for="valData in resData" id= {{valData.dispatchId}} @click.capture='liClick'>
<div class='company placeholder'>
<div>
<img src='../static/img/company.png/'>
</div>
<p><span> {{valData.customerName}} </span></p>
</div>
<div class='listCont'>
<div class='listC_left'>
<div>工单内容</div>
</div>
<div class='listC_right'>
<p> {{valData.dispatchMsg}} </p>
</div>
</div>
</li>
</ul>
</div>
</div>
<script src="../static/js/jquery-2.1.3.min.js"></script>

<script src ="../static/js/mobiscroll.custom-2.5.2.min.js"></script>
<script src="../static/js/vue.min(1).js"></script>
<script src="../static/js/vue-resource.js"></script>

<script>
$(function(){
var vm = new Vue({
el:"#ql",
data:{
companyName:'',
fromTime:'',
toTime:'',
message:'',
resData:[]
},
ready:function(){
var Request =new Object();
Request= this.GetRequest();
if(Request.backFromRenew){
this.companyName = Request.queryName;
this.fromTime = Request.startDate;
this.toTime = Request.endDate;
//上页返回获取本地
var data = JSON.parse(sessionStorage.getItem('dataQl'));
//for (var i = 0; i < data.obj.length; i++) {
// var liNew = "<li class="+data.obj[i].dispatchId+ " @click='liClick'><div class='company placeholder'><div><img src='../static/img/company.png/'></div><p><span>"+data.obj[i].customerName+"</span></p></div><div class='listCont'><div class='listC_left'><div>工单内容</div></div><div class='listC_right'><p>"+data.obj[i].dispatchMsg+ "</p></div></li>";
//this.message += liNew;
//}
this.resData=data.obj;
//$("li").click(function(){
//var dispatchId = $(this).attr("class");
//window.location.href = 'contractRenew.html?dispatchId='+dispatchId+'&queryName='+this.companyName+'&startDate='+this.fromTime+'&endDate='+this.toTime+'&dataQuery=1';
//});
}
},
methods:{
returnFront:function(){
window.location.href="entry.jsp";
},
GetRequest:function (){
var url = location.search;
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
}
}
return theRequest;
},
getDays:function(day1, day2){
var d1 = day1.getDate();
var d2 = day2.getDate();
// 定义一天的毫秒数
var dayMilliSeconds = 1000*60*60*24;
// 获取输入日期的毫秒数
var d1Ms = d1.getTime();
var d2Ms = d2.getTime();
// 定义返回值
var ret=(d2Ms-d1Ms)/dayMilliSeconds;
return ret;
},
liClick:function(){
//重点：此处万不可用event.target否则会出现点击哪个得到哪个标签的id出现问题。
var el = event.currentTarget;
var dispatchId = el.getAttribute('id');
//var dispatchId = obj;
window.location.href = 'contractRenew.html?dispatchId='+dispatchId+'&queryName='+this.companyName+'&startDate='+this.fromTime+'&endDate='+this.toTime+'&dataQuery=1';
},
queryIng:function(){
var disT = this.getDays(this.fromTime, this.toTime);
if(this.fromTime=="" || this.toTime==""){
this.message = "<li style='text-align: center;color: #FF6600 ;font-size: 4vw;'>时间信息不全，请重新选择！</li>";

return false;
}else if(disT>31){
this.message = "<li style='text-align: center;color: #FF6600 ;font-size: 4vw;'>查询时间超过一个月范围，请重新选择！</li>";

return false;
}else if(disT<0){
this.message = "<li style='text-align: center;color: #FF6600 ;font-size: 4vw;'>开始日期不能晚于结束日期，请重新选择！</li>";
return false;
}else{
this.message ='';
this.message = "<li style='text-align: center;color: #FF6600 ;font-size: 4vw;'>输入成功，请求后台数据中...</li>";
this.$http.post('dispatchQuery', {customerName: this.companyName,startDate: this.fromTime,endDate: this.toTime},{emulateJSON:true}).then(
function(res){
if(res.data.code==0 ){
this.message = "<li style='text-align: center;color: #FF6600 ;font-size: 4vw;'>"+ res.data.msg+"</li>";
}else if(res.data.code==1 && res.data.obj.length!=0){
sessionStorage.setItem('dataQl',JSON.stringify(res.data));
this.message ='';
this.resData=res.data.obj;
//for (var i = 0; i < res.data.obj.length; i++) {
// var liNew = "<li class="+res.data.obj[i].dispatchId+ " @click='liClick'><div class='company placeholder'><div><img src='../static/img/company.png/'></div><p><span>"+res.data.obj[i].customerName+"</span></p></div><div class='listCont'><div class='listC_left'><div>工单内容</div></div><div class='listC_right'><p>"+res.data.obj[i].dispatchMsg+ "</p></div></li>";
//this.message += liNew;
//}
//$("li").click(function(){

// var dispatchId = $(this).attr("class");

//});
}
})
}
}
}
});

var newjavascript = {
plugdatetime: function($dateTxt,type) {
var opt = {};
opt.time = {preset : type};
opt.date = {preset : type};
opt.datetime = {
preset : type,
minDate: new Date(2010,1,01,00,00),
maxDate: new Date(2020,12,31,24,59),
stepMinute: 1
};
$dateTxt.val('').scroller('destroy').scroller(
$.extend(opt[type],
{
preset: "date",
theme: "android-ics",
mode: "scroller",
display: "bottom",
dateOrder: 'yymmdd',
lang: "zh",
yearText: "年",
monthText: "月",
dayText: "日",
hourText: "时",
minuteText: "分",
setText: '确定',
cancelText: '取消',
dateFormat: 'yy-mm-dd',
max: "2037-12-25"
//将面板显示去掉ampm
// timeFormat: 'HH:ii'
//将滚轮画面显示为只有小时分钟
// timeWheels: 'HH:ii'
}
)
);
}
};

newjavascript.plugdatetime($("#fromTime"), "datetime");
newjavascript.plugdatetime($("#toTime"), "datetime");

// 给String对象添加getDate方法，使字符串形式的日期返回为Date型的日期
String.prototype.getDate = function(){
var strArr = this.split('-');
var date = new Date(strArr[0], strArr[1] - 1, strArr[2]);
return date;
}

// 给String对象添加getDate方法，使字符串形式的日期返回为Date型的日期
String.prototype.getDate = function(){
var strArr = this.split('-');
var date = new Date(strArr[0], strArr[1] - 1, strArr[2]);
return date;
}

//解析url传参方法
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
// url = decodeURI(url); 方案1
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
//theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]); 方案1
theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
}
}
return theRequest;
}

})
</script>
</body>
</html>

Vue.js的应用——e.currentTarget的应用

猜你喜欢