<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<!-- 基础代码引入 -->
<link rel="stylesheet" href="/projectapp/zgydtjyw/view/zysz/css/index.css" />
<script src="/utility/lzmain.js"></script>
<script src="/utility/lzmain-form.js"></script>
<style type="text/css">
@font-face {
font-family: element-icons;
src: url('/projectapp/fonts/sy/element-icons.woff') format("woff"),
url('/projectapp/fonts/sy/element-icons.ttf') format("truetype");
font-weight: 400;
font-display: "auto";
font-style: normal
}
.dis-flex {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
/* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;
/* TWEENER - IE 10 */
display: -webkit-flex;
/* NEW - Chrome */
display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.dis-flex-cen {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
/* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;
/* TWEENER - IE 10 */
display: -webkit-flex;
/* NEW - Chrome */
display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
justify-content: center;
align-items: center;
}
#selectpersonApp {
width: 99%;
margin: 10px 20px;
}
.top_row {
font-size: 16px;
height: 40px;
line-height: 40px;
}
.top_row .personsel input,
.first_row .personsel input,
.center_row .personsel input {
margin-left: 10px;
height: 17px;
width: 17px;
}
.first_row {
/* float: left; */
/* width: calc( 100% - 20px ); */
font-size: 14px;
height: 40px;
margin-top: 10px;
justify-content: space-between;
}
.first_row .personsel input,
.center_row .personsel input {
margin-left: 8px;
height: 17px;
width: 17px;
}
.chaxunanniu {
display: inline-block;
width: 61px;
height: 30px;
border-radius: 6px;
color: #fff;
text-align: center;
line-height: 30px;
border: 1px solid #D7D7D7;
cursor: pointer;
margin-left: 15px;
margin-right: 20px;
background-color: #02a7f0;
}
.center_row {
font-size: 16px;
padding-top: 15px;
}
.center_row .left_jibei {
width: 45%;
float: left;
}
.center_row span {
margin-top: -5px;
}
.kongxian i {
display: inline-block;
width: 18px;
height: 18px;
border: 1px solid #000;
vertical-align: top;
margin-right: 8px;
}
.shifang i {
display: inline-block;
width: 18px;
height: 18px;
background-color: #D4D9DD;
vertical-align: top;
margin-right: 8px;
}
.first_row .chongtu i {
display: inline-block;
width: 20px;
height: 20px;
background-color: #FFC776;
vertical-align: top;
}
.first_row .chongtu2 i {
display: inline-block;
width: 20px;
height: 20px;
background-color: #FFF600;
vertical-align: top;
}
.first_row .personsel i {
display: inline-block;
width: 18px;
height: 18px;
background-color: #BCE4A8;
vertical-align: top;
margin-right: 8px;
}
.center_row .right_shuoming {
/* width: 55%; */
/* float: right; */
font-size: 16px;
/* text-align: right; */
}
/* 表格开始 */
.tablebox {
width: calc(100% - 20px);
height: 600px;
/* 固定高度 */
border-bottom: 0;
border-right: 0;
overflow: auto;
margin-top: 10px;
}
table.gridtable {
display: table;
width: 100%;
table-layout: fixed;
margin: 0 auto;
font-family: verdana, arial, sans-serif;
font-size: 15px;
color: #333333;
border-width: 1px;
border-color: #666666;
border-collapse: separate;
padding-right: 5px;
border-top: 1px solid #D7D7D7;
border-left: 1px solid #D7D7D7;
}
table.gridtable thead tr th {
padding: 8px;
text-align: center;
background: #E8F4FE;
width: 130px;
height: 50px;
/* 控制表头固定的核心代码 */
position: sticky;
top: 0;
/* 第一列最上 */
border-right: 1px solid #D7D7D7;
border-bottom: 1px solid #D7D7D7;
}
/* 控制左边固定的核心代码 */
table.gridtable tbody td:nth-child(1),
table.gridtable thead th:nth-child(1) {
position: sticky;
left: 0;
/* 首行在左 */
z-index: 1;
}
table.gridtable tbody td:nth-child(2),
table.gridtable thead th:nth-child(2) {
position: sticky;
left: 130px;
z-index: 1;
}
table.gridtable tbody td:nth-child(3),
table.gridtable thead th:nth-child(3) {
position: sticky;
left: 260px;
z-index: 1;
}
/* table.gridtable thead tr th */
table.gridtable thead th:nth-child(1),
table.gridtable thead th:nth-child(2),
table.gridtable thead th:nth-child(3) {
z-index: 2;
}
table.gridtable td {
height: 55px;
background-color: #ffffff;
text-align: center;
font-size: 14px;
border-right: 1px solid #D7D7D7;
border-bottom: 1px solid #D7D7D7;
}
/* 休的样式 */
table.gridtable td.xiu_suausyes {
width: 100%;
height: 55px;
line-height: 40px;
background-color: #f2f2f2;
}
/* 空闲占用 */
table.gridtable td.suausyes {
width: 100%;
height: 55px;
background-color: #fff;
}
/* 新申请 */
table.gridtable td.xinshenqing_suausyes {
width: 100%;
height: 55px;
background-color: #BCE4A8;
color: red;
}
/* 释放 */
table.gridtable td.shifang_suausyes {
width: 100%;
height: 55px;
background-color: #D4D9DD;
}
/* 冲突新申请 */
table.gridtable td.ctxsq_suausyes {
width: 100%;
height: 55px;
background-color: #FFC776;
}
/* 冲突占用 */
table.gridtable td.ctzy_suausyes {
width: 100%;
height: 55px;
background-color: #FFF600;
}
/* 多个 冲突(新申请) 多个5冲突(已占用) */
/* 字體顔色 */
table.gridtable td div .valitemColor1 {
color: #F71414;
}
table.gridtable td div .valitemColor2 {
color: #000;
}
table.gridtable td div .valitemColor3 {
color: #000;
text-decoration: underline;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
width: 125px;
height: 26px;
margin: 0 8px;
}
.el-input__icon {
/* display: none; */
}
.el-input--prefix .el-input__inner {
height: 35px;
width: 125px;
}
.el-input--suffix .el-input__inner {
padding-right: 0;
}
/* .el-icon-date:before {
content: "\e78e";
}
.el-input__icon:after{
content: "";
} */
.el-input__prefix {
width: 125px;
height: 100%;
text-align: right;
padding-right: 10px;
}
.el-input__suffix-inner {
display: none;
}
.el-input--prefix .el-input__inner {
padding-left: 15px;
}
.explain {
height: 30px;
font-size: 16px;
text-align: center;
color: #666666;
margin-top: 10px;
position: absolute;
left: 48%;
}
.select-l-and-l {
background: url(/projectapp/zgydtjyw/view/zysz/images/ljt.svg) no-repeat center;
width: 6px;
height: 11px;
display: inline-block;
cursor: pointer;
margin-right: 12px;
}
.select-l-and-r {
background: url(/projectapp/zgydtjyw/view/zysz/images/rjt.svg) no-repeat center;
width: 6px;
height: 11px;
display: inline-block;
cursor: pointer;
margin-left: 12px;
margin-right: 30px;
}
.okBtn {
color: #0075FF;
cursor: pointer;
border: 1px solid #dedede;
padding: 7px 8px;
border-radius: 4px;
}
.first_row_l {
flex: 1;
}
</style>
</head>
<body>
<div id="selectpersonApp">
<div class="first_row dis-flex-cen">
<div class="first_row_l">
<span class="tittext">时间显示范围:</span>
<span class="select-l-and-l" @click="shangyizhou()"> </span>
<el-date-picker v-model="statValue" type="date" @change="dateSelect()" placeholder="选择日期">
</el-date-picker>至
<el-date-picker v-model="stopValue" type="date" @change="dateSelecttop()" placeholder="选择日期">
</el-date-picker>
<span class="select-l-and-r" @click="xiayizhou()"> </span>
<span @click="searchpersonAll()" class="okBtn">查询</span>
</div>
<div class="first_row_r dis-flex">
<span> <span style="color: #F71414; font-weight: bold;font-size: 17px;">A</span> 当前项目</span>
<span style=" margin-left: 20px;"> <span
style="color: #2A2A2A; font-weight: bold;font-size: 17px;">A</span> 其他项目</span>
<span class="kongxian dis-flex-cen" style="margin-left: 50px;"><i></i> 空闲/占用</span>
<span class="personsel dis-flex-cen" style="margin-left: 10px;"><i></i>新申请</span>
<span class="shifang dis-flex-cen" style="margin-left: 10px;"><i></i>释放</span>
</div>
<span class="chaxunanniu" @click="savePerson()">保存</span>
</div>
<div class="center_row">
<!-- <div class="left_jibei" style="display: none;">
<span class="tittext">级别:</span>
<span class="personsel" v-for="(item, index) in jboptions" :key="index">
<input type="checkbox" v-model="jbcheckedValues" :value="item.value">
{{ item.label }}
</span>
</div> -->
</div>
<div class="tablebox">
<table class="gridtable infinite-list-wrapper" class="" style="overflow:auto;">
<thead>
<tr>
<th v-for="(thitem, key) in stepData" :key="key">
{{thitem}}
</th>
</tr>
</thead>
<tbody v-infinite-scroll="loadMore" infinite-scroll-disabled="disabled"
infinite-scroll-distance="10" immediate-check="false">
<tr v-for="(item, idx) in dataList" :key="idx">
<td>{{item.level_name}}</td>
<td>{{item.personName}}</td>
<td>{{item.department_name}}</td>
<!-- <td @click="applyMeth(tditem,idx,tdidx)" v-for="(tditem, tdidx) in item.dateArray" :key="tdidx" :class="[ifSelect ?'xinshenqing_suausyes':'','suausyes']" > -->
<td @click="applyMeth(idx,tditem,tdidx,$event)" ref="bgfive" :bgtest="tditem.bgcolor"
v-for="(tditem, tdidx) in item.dateArray" :key="tdidx"
:class="{'xiu_suausyes':tditem.bgcolor ==0 ,'suausyes': tditem.bgcolor==1, 'xinshenqing_suausyes':tditem.bgcolor==2 ,'shifang_suausyes': tditem.bgcolor==3, 'ctxsq_suausyes':tditem.bgcolor==4, 'ctzy_suausyes':tditem.bgcolor==5}">
<!-- 1空闲/占用 2 新申请 3释放 4冲突(新申请) 5冲突(已占用) -->
<div v-if="tditem.bgcolor ==0" class=""> 休 </div>
<div v-if="tditem.bgcolor==1" class="">
<p v-for="(valitem, validx) in tditem.projectcode" :key="validx"
:text="valitem.fontcolor">
<span
:class="{valitemColor1: valitem.fontcolor == 1, valitemColor2: valitem.fontcolor == 2, valitemColor3: valitem.fontcolor == 3}">
{{valitem.val}} </br></span>
</p>
</div>
<div v-if="tditem.bgcolor==2" class="">
<p v-for="(valitem, validx) in tditem.projectcode" :key="validx"
:text="valitem.fontcolor">
<span
:class="{valitemColor1: valitem.fontcolor == 1, valitemColor2: valitem.fontcolor == 2, valitemColor3: valitem.fontcolor == 3}">
{{valitem.val}} </br></span>
</p>
</div>
<div v-if="tditem.bgcolor==3" class="">
<p v-for="(valitem, validx) in tditem.projectcode" :key="validx"
:text="valitem.fontcolor">
<span
:class="{valitemColor1: valitem.fontcolor == 1, valitemColor2: valitem.fontcolor == 2, valitemColor3: valitem.fontcolor == 3}">
{{valitem.val}} </br></span>
</br>
</p>
</div>
<div v-if="tditem.bgcolor==4" class="">
<p v-for="(valitem, validx) in tditem.projectcode" :key="validx"
:text="valitem.fontcolor">
<span
:class="{valitemColor1: valitem.fontcolor == 1, valitemColor2: valitem.fontcolor == 2, valitemColor3: valitem.fontcolor == 3}">
{{valitem.val}} </br></span>
</p>
</div>
<div v-if="tditem.bgcolor==5" class="">
<p v-for="(valitem, validx) in tditem.projectcode" :key="validx"
:text="valitem.fontcolor">
<span
:class="{valitemColor1: valitem.fontcolor == 1, valitemColor2: valitem.fontcolor == 2, valitemColor3: valitem.fontcolor == 3}">
{{valitem.val}} </br></span>
</p>
</div>
<div v-if="tditem.bgcolor==6" class="">
<p v-for="(valitem, validx) in tditem.projectcode" :key="validx"
:text="valitem.fontcolor">
<span
:class="{valitemColor1: valitem.fontcolor == 1, valitemColor2: valitem.fontcolor == 2, valitemColor3: valitem.fontcolor == 3}">
{{valitem.val}} </br></span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
<p class="explain" v-if="loading">数据加载中...</p>
<p class="explain" v-if="noMore && dataList.length != 0">没有数据了!</p>
<p class="explain" v-if="dataList.length == 0 &&noMore">暂无数据!</p>
</div>
</div>
</body>
<script src="/projectapp/zgydtjyw/view/zysz/js/vue.js"></script>
<script src="/projectapp/zgydtjyw/view/zysz/js/element-ui-index.js"></script>
<script src="/projectapp/zgydtjyw/view/zysz/js/moment.min.js"></script>
<script>
new Vue({
el: '#selectpersonApp',
data() {
return {
tabPosition: "top",
statValue: '', //开始时间
stopValue: '', // 结束时间
// 其他项目叠加
qitaproOptions: [{
label: '人员需求已通过尚未提交工时计划',
value: '1'
},
{
label: '已提交工时计划尚未审核',
value: '2'
},
{
label: '已提交工时计划调整尚未审核',
value: '3'
},
],
qitaprocheckedValues: [],
// 级别
jboptions: [{
label: '高级总监',
value: 'gjzj'
},
{
label: '总监',
value: 'zj'
},
{
label: '高级经理',
value: 'gjj'
},
{
label: '经理',
value: 'jl'
},
{
label: '高级顾问',
value: 'gjgw'
},
{
label: '顾问',
value: 'gw'
}
],
jbcheckedValues: [],
stepData: [], //自定义表头
// 下拉加载数据
dataList: [], //前端分页需要拼接的数组
loading: false, //数据请求中,开关
noMore: false,
pageNum: 1, //頁數
totalPages: 0, //总条数
tableColumns: [], //接口返回的数据
firstData: [], //暫存数组
fullscreenLoading: false, //数据加载loading
currentModel: null,
currentRow: null,
ifSelect: false, //是否选中数据
xmid: "", //项目id
xmbh: "", //项目编号
jhsq_id: "" //工时计划申请id
}
},
methods: {
// 保存
savePerson() {
var _this = this
_this.dataList.forEach((Arrayitem, Arrayindex, Arrayobj) => {
if (Arrayitem.bgcolor === "6") {
}
})
let scerchparme = {
"jhsq_id": _this.jhsq_id,
"xmid": _this.xmid,
"xmbh": _this.xmbh,
"tableColumns": _this.dataList
}
var saveurl = '/serverapp/api/workHour/personOccupyStateGSJHTZSave'
var savepersonlist = $lzpost(saveurl, scerchparme).value
if (savepersonlist) {
lzalertok("保存成功")
lzclose()
top.location.reload()
}
},
// 新申请
applyMeth(idx, item, tdidx, e) {
var _this = this
console.log("bgfive:" + e)
console.log("bgfive:" + e.target.getAttribute('bgtest'))
let bgtest = e.target.getAttribute('bgtest')
if (bgtest === 5) {
jQuery(e.currentTarget).addClass("suausyes").removeClass("ctzy_suausyes")
jQuery(e.currentTarget).find("p[text='1']").hide()
}
_this.dataList.forEach((item, index, obj) => {
if (index === idx) {
item.dateArray.forEach((Arrayitem, Arrayindex, Arrayobj) => {
if (Arrayindex === tdidx) {
if (Arrayitem.bgcolor === "2") {
// 新申请
Arrayitem.bgcolor = "1" //空闲
Arrayitem.projectcode[0].fontcolor = "0"
Arrayitem.projectcode[0].val = ""
} else if (!Arrayitem.projectcode[0].val) {
// 释放新申请
Arrayitem.bgcolor = "2"
Arrayitem.projectcode[0].fontcolor = "1" //1: 当前项目
Arrayitem.projectcode[0].val = _this.xmbh
} else if (Arrayitem.bgcolor === "5") { //冲突
// let bgfive1=_this.$refs.bgfive
// console.log("bgfive1:"+bgfive1)
Arrayitem.projectcode.forEach((projectcodeitem,
projectcodeindex, projectcodeobj) => {
if (projectcodeitem.val === _this.xmbh) {
Arrayitem.bgcolor = "6" //
Arrayitem.projectcode.splice(projectcodeindex,
1)
}
})
} else if (Arrayitem.bgcolor === "6") {
let parme = {
"starttime": this.statValue,
"endtime": this.stopValue,
"jhtz_id": _this.jhsq_id,
"xmid": this.xmid,
"xmbh": this.xmbh
}
let url = '/serverapp/api/workHour/personOccupyStateGSJHTZ'
let list = $lzpost(url, parme).value
let tableColumns = list.tableColumns
_this.dataList[idx].dateArray[tdidx].bgcolor = tableColumns[
idx].dateArray[tdidx].bgcolor
_this.dataList[idx].dateArray[tdidx].projectcode =
tableColumns[idx].dateArray[tdidx].projectcode
}
}
})
}
})
console.log(_this.dataList)
},
// 查询
searchpersonAll() {
let scerchparme = {
"starttime": this.statValue,
"endtime": this.stopValue,
"jhtz_id": _this.jhsq_id,
"xmid": this.xmid,
"xmbh": this.xmbh
}
console.log(scerchparme);
this.getSearchpersonList(scerchparme)
},
// 查询重新获取
getSearchpersonList(scerchparme) {
this.fullscreenLoading = true
var _this = this
this.firstData = []
this.dataList = []
// var getallpersonurl = '/serverapp/api/workHour/personOccupyPlanApplicaion'
var getallpersonurl = '/serverapp/api/workHour/personOccupyStateGSJHTZ'
var personlist = $lzpost(getallpersonurl, scerchparme).value
_this.firstData = personlist.tableColumns
_this.dataList = _this.firstData.slice(0, 11)
// this.set(this.dataList)
console.log(_this.dataList);
if (_this.dataList.length == 0) {
_this.loading = false; /*终止请求*/
_this.noMore = true;
} else {}
_this.totalPages = personlist.totalPages;
// 查询完重新获取
var diffDate = _this.getDiffDate(scerchparme.starttime, scerchparme.endtime)
console.log(diffDate);
_this.stepData = diffDate;
_this.fullscreenLoading = false
},
shangyizhou() {
let startDate = this.lastDay(this.statValue)
let endDate = this.lastDay(this.stopValue)
console.log(startDate, endDate);
this.statValue = startDate;
this.stopValue = endDate;
// var diffDate = this.getDiffDate(startDate, endDate)
// console.log(diffDate);
// this.stepData = diffDate
},
// 点击下一周
xiayizhou() {
let startDate = this.nextDay(this.statValue)
let endDate = this.nextDay(this.stopValue)
this.statValue = startDate;
this.stopValue = endDate;
// var diffDate = this.getDiffDate(startDate, endDate)
// console.log(diffDate);
// this.stepData = diffDate
},
//前七天
lastDay(time) {
let now = new Date(time); // 当前日期
return this.formatDate(new Date(now.getFullYear(), now.getMonth(), now.getDate() - 7))
},
//后七天
nextDay(time) {
let now = new Date(time); // 当前日期
return this.formatDate(new Date(now.getFullYear(), now.getMonth(), now.getDate() + 7))
},
// 日期处理
formatDate(date) {
let myyear = date.getFullYear();
let mymonth = date.getMonth() + 1;
let myweekday = date.getDate();
if (mymonth < 10) {
mymonth = '0' + mymonth;
}
if (myweekday < 10) {
myweekday = '0' + myweekday;
}
return (myyear + '-' + mymonth + '-' + myweekday);
},
//设置默认日期
defaultDate(startbeg, stpend) {
// 获取时间
this.statValue = startbeg
this.stopValue = stpend
var diffDate = this.getDiffDate(startbeg, stpend)
// console.log(diffDate);
this.stepData = diffDate;
},
// 点选获取时间
dateSelect() {
this.statValue = this.statValue.getFullYear() + '-' + (this.statValue.getMonth() + 1) + '-' + this
.statValue.getDate();
},
// 点选获取时间
dateSelecttop() {
this.stopValue = this.stopValue.getFullYear() + '-' + (this.stopValue.getMonth() + 1) + '-' + this
.stopValue.getDate();
},
/**
***获取两个日期间的所有日期
**/
getDiffDate(start, end) {
var startTime = this.getDate(start);
var endTime = this.getDate(end);
var dateArr = [];
while ((endTime.getTime() - startTime.getTime()) > -1) {
var year = startTime.getFullYear();
var month = (startTime.getMonth() + 1).toString().length === 1 ? +(parseInt(startTime
.getMonth().toString(), 10) + 1) : (startTime.getMonth() + 1);
var day = startTime.getDate().toString().length === 1 ? startTime.getDate() : startTime
.getDate();;
// var day = startTime.getDate()+1
// dateArr.push( year + "/" + month + "/" + day);
dateArr.push(month + "月" + day + "日");
startTime.setDate(startTime.getDate() + 1);
}
dateArr.unshift('级别', '姓名', '所属部门')
return dateArr;
},
getDate(datestr) {
var temp = datestr.split("-");
if (temp[1] === '01') {
temp[0] = parseInt(temp[0], 10) - 1;
temp[1] = '12';
} else {
temp[1] = parseInt(temp[1], 10) - 1;
}
var date = new Date(temp[0], temp[1], temp[2]);
return date;
},
// 下拉加載
loadMore() {
// console.log(this.firstData);
var slicedata = []
// 下拉 开关
this.loading = true
setTimeout(() => {
this.pageNum++
// 根据页数继续拼接 数据
slicedata = this.firstData.slice((this.pageNum - 1) * 11, this.pageNum * 11)
this.dataList = this.dataList.concat(slicedata)
if (this.totalPages == this.dataList.length) {
this.loading = false; /*终止请求*/
this.noMore = true;
this.pageNum = 1
} else {
this.loading = false; /*继续请求*/
}
}, 2000)
},
// 初始化获取查询数据
getMessageList() {
var _this = this
this.firstData = []
this.dataList = []
// 首次数据切割显示 获取所有数据的length
var parmes = {
"starttime": this.statValue,
"endtime": this.stopValue,
"jhtz_id": _this.jhsq_id,
"xmid": this.xmid,
"xmbh": this.xmbh
// "starttime":"2023-11-01",
// "endtime":"2023-11-05",
// "jhtz_id":"主表id",
// "xmid":"1722434228337119234",
// "xmbh":"2023-HBY-D14"
}
// var getallpersonurl = '/serverapp/api/workHour/personOccupyPlanApplicaion'
var getallpersonurl = '/serverapp/api/workHour/personOccupyStateGSJHTZ'
var personlist = $lzpost(getallpersonurl, parmes).value
debugger
_this.firstData = personlist.tableColumns
_this.dataList = _this.firstData.slice(0, 11)
// this.set(this.dataList)
console.log("dataList:" + _this.dataList);
if (_this.dataList.length == 0) {
_this.loading = false; /*终止请求*/
_this.noMore = true;
} else {}
_this.totalPages = personlist.totalPages;
}
},
mounted() {
// 日期初始化
let startbeg = $request('starttime')
let stpend = $request('stoptime')
this.xmid = $request('xmid')
this.xmbh = $request('xmbh')
this.jhsq_id = $request('id')
this.defaultDate(startbeg, stpend)
// 初始化数据
this.getMessageList();
},
computed: {
disabled() {
return this.loading || this.noMore
}
},
created() {
},
})
</script>
<script>
function pinzhuangObj(parmaeKey, parmaeValue) {
//数组拼装成对象
var assembledObj = {}
for (var l = 0; l < parmaeKey.length; l++) {
assembledObj[parmaeKey[l]] = parmaeValue[l]
}
return assembledObj
}
function parseParams(url, params) {
var paramsArray = []
Object.keys(params).forEach(key => params[key] && paramsArray.push(`${key}=${params[key]}`))
if (url.search(/\?/) === -1) {
url += `?${paramsArray.join('&')}`
} else {
url += `&${paramsArray.join('&')}`
}
return url
}
</script>
</html>