<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="UTF-8">
|
<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
<title>热门搜索</title>
|
<link rel="stylesheet" type="text/css" href="css/doui.min.css"/>
|
<script src="js/doui.min.js" type="text/javascript" charset="utf-8"></script>
|
<script src="js/publicFunction.js" type="text/javascript" charset="utf-8"></script>
|
</head>
|
|
<body style="display:none;">
|
<div id="allwai" class="heightenBox fontPC">
|
|
|
<!-- =============================================================== 搜索筛选(顶部) -->
|
<div class="header bg-white" style="border-bottom:1px solid #CCC;">
|
|
<!--第1排：搜索输入框 + 排序-->
|
<div class="top1 fboxRow Xstart Ycenter">
|
|
<!--关键字搜搜-->
|
<input type="text" placeholder="名称" v-model="topSearch.strKey"/>
|
<div class="do-btn do-click bg-blue nodeMarginRow" v-on:click="creatTable();tableGet();">搜索</div>
|
<!--展开/收起筛选框-->
|
<!--<div class="do-btn do-click bg-blue font6" v-on:click="topSearch.show_more=!topSearch.show_more"><i class="fa fa-filter"></i></div>-->
|
|
<!--空白区域-->
|
<div class="flex1"></div>
|
|
<!--vue循环打印-->
|
<div v-for="(obj, key) in optSort" class="paixu fboxRow Xcenter Ycenter font-gray" v-on:click="clickOptSort(optSort, obj, function(){ creatTable(); tableGet(); })">
|
<!--选项名称-->
|
<div class="font6" v-bind:class="obj.result.length>0?'font-green':''">{{obj.value}}</div>
|
<!--上下箭头-->
|
<div class="fboxCol Xstart Ystart">
|
<i v-if="obj.up" class="fa fa-caret-up" v-bind:class="obj.result==obj.up?'font-green':''"></i>
|
<i v-if="obj.down" class="fa fa-caret-down" v-bind:class="obj.result==obj.down?'font-green':''"></i>
|
</div>
|
</div>
|
|
</div>
|
|
<!--第2排：筛选设置-->
|
<div v-show="topSearch.show_more" class="top2 fboxCol Xstart Ystart">
|
|
<!--一行筛选设置-->
|
<div v-for="(obj, key) in optScreen" class="opt_row fboxRow Xstart Ystart">
|
|
<!-- 设置项标题 -->
|
<div class="opt_title font7 font-blue">{{obj.value}}：</div>
|
|
<!-- 3. 大小型输入 设置项选项 -->
|
<div v-if="obj.type=='texts'" class="flex1 fboxWrap Xstart Ystart">
|
<!-- 必须有：循环输出child选择项 -->
|
<div v-for="(item, index) in obj.child" class="opt_xuan font-black" v-bind:class="(item.key.min==obj.result.min&&item.key.max==obj.result.max)?'opt_xuanOK':''" v-on:click="clickOptScreenChild(obj, item)">{{item.value}}</div>
|
<!--3. type = texts 大小输入型设置-->
|
<div class="fboxRow Xstart Ycenter nodeMarginRow">
|
<input class="opt_input" type="number" min="0" placeholder="最小值" v-model="obj.result.min"/>
|
<div class="font-gray nodeMarginRow">~</div>
|
<input class="opt_input" type="number" min="0" placeholder="最大值" v-model="obj.result.max"/>
|
</div>
|
</div>
|
|
<!--其它 设置项选项-->
|
<div v-else class="flex1 fboxWrap Xstart Ystart">
|
|
<!-- 必须有：循环输出child选择项 -->
|
<div v-for="(item, index) in obj.child" class="opt_xuan font-black" v-bind:class="item.key==obj.result?'opt_xuanOK':''" v-on:click="clickOptScreenChild(obj, item)">{{item.value}}</div>
|
|
<!--1. type = xuan 选择型设置 (无特殊)-->
|
|
<!--2. type = text 单独输入型设置-->
|
<div v-if="obj.type=='text'" class="fboxRow Xstart Ycenter nodeMarginRow">
|
<input class="opt_input" type="number" min="0" placeholder="最小值" v-model="obj.result"/>
|
</div>
|
|
<!--4. type = dates 前后日期范围型设置-->
|
<div v-else-if="obj.type=='dates'" class="fboxRow Xstart Ycenter nodeMarginRow">
|
<input class="opt_inputTime" type="date" v-model="obj.result.min"/>
|
<div class="font-gray nodeMarginRow">~</div>
|
<input class="opt_inputTime" type="date" v-model="obj.result.max"/>
|
</div>
|
|
<!--5. type = datetime 日期+时间型设置-->
|
<div v-else-if="obj.type=='datetime'" class="fboxRow Xstart Ycenter nodeMarginRow">
|
<div>日期</div>
|
<input class="opt_inputTime nodeMarginRow" type="date" v-model="obj.result.date"/>
|
<div class="nodeMarginRow">时间</div>
|
<input class="opt_inputTime" type="time" v-model="obj.result.time"/>
|
</div>
|
|
</div>
|
|
</div><!--一行筛选设置-->
|
|
</div>
|
|
</div>
|
|
|
<!-- =============================================================== 表格列表 -->
|
<div class="main">
|
|
<div class="pageRow bg-white scroll-x">
|
|
<table>
|
<!--表格抬头-->
|
<thead>
|
<th style="width:0.3rem;">
|
<div class="fboxRow Xcenter Ycenter">
|
<div class="do-btn do-click bg-blue font5 font-ell1" v-on:click="clickAllXuan(table.list, pi)">{{pi.hadAllXuan==true?'取消':'全选'}}</div>
|
</div>
|
</th>
|
<th style="width:0.2rem;">序号</th>
|
<th>ID</th>
|
<th>名称</th>
|
<th>权重</th>
|
<th>创建时间</th>
|
<th>被使用</th>
|
</thead>
|
<!--新建行-->
|
<tr>
|
<td colspan="7">
|
<div class="fboxRow Xcenter Ycenter">
|
<div class="btnyuan2 fboxRow Xcenter Ycenter bg-green font8 font-white nodeMargin" v-on:click="vm.creatBuild(); vm.build.show=true;">
|
<i class="fa fa-plus"></i>
|
</div>
|
</div>
|
</td>
|
</tr>
|
<!--一行-->
|
<tr v-for='(item, index) in table.list' v-bind:class="item.xuan==true?'trxuan':''">
|
<!--选择-->
|
<td style="cursor:pointer;" v-on:click="checkTr(table.list, item, pi)">
|
<div class="fboxRow Xcenter Ycenter font8">
|
<i class="fa" v-bind:class="item.xuan==true?'fa-check-square font-green':'fa-square-o font-gray'"></i>
|
</div>
|
</td>
|
<!--序号-->
|
<td>
|
<div class="font-ell1 nodeMargin">{{(table.yema-1)*table.pagesize+index+1}}</div>
|
</td>
|
<!--ID-->
|
<td>
|
<div class="font6 font-ell2 nodeMargin">{{item.id}}</div>
|
</td>
|
<!--名称-->
|
<td style="width:1.5rem;">
|
<div class="fboxRow Xstart Ycenter">
|
<!--1. 显示状态-->
|
<div v-show="item.canUp1==false" class="fboxRow Xstart Ycenter nodeMargin">
|
<!--文字-->
|
<div class="font6 font-ell2" style="line-height:1.5;">{{item.name}}</div>
|
<!--修改按钮-->
|
<div class="font8 font-blue nodeMarginRow" style="cursor:pointer;" v-on:click="item.canUp1=true;"><i class="fa fa-pencil-square-o"></i></div>
|
</div>
|
<!--2. 修改状态-->
|
<div v-show="item.canUp1==true" class="fboxRow Xstart Ycenter nodeMargin">
|
<!--输入组件-->
|
<input style="width:1rem;" type="text" v-model="item.name" />
|
<!--确认按钮-->
|
<div class="font8 font-green nodeMarginRow" style="cursor:pointer;" v-on:click="tableRowUp('value', item)"><i class="fa fa-check"></i></div>
|
<!--取消按钮-->
|
<div class="font8 font-red nodeMarginRow" style="cursor:pointer;" v-on:click="item.canUp1=false;"><i class="fa fa-close"></i></div>
|
</div>
|
</div>
|
</td>
|
<!--权重-->
|
<td style="width:1.5rem;">
|
<div class="fboxRow Xstart Ycenter">
|
<!--1. 显示状态-->
|
<div v-show="item.canUp2==false" class="fboxRow Xstart Ycenter nodeMargin">
|
<!--文字-->
|
<div class="font6 font-ell2">{{item.orderby}}</div>
|
<!--修改按钮-->
|
<div class="font8 font-blue nodeMarginRow" style="cursor:pointer;" v-on:click="item.canUp2=true;"><i class="fa fa-pencil-square-o"></i></div>
|
</div>
|
<!--2. 修改状态-->
|
<div v-show="item.canUp2==true" class="fboxRow Xstart Ycenter nodeMargin">
|
<!--输入组件-->
|
<input style="width:1rem;" type="text" v-model="item.orderby" />
|
<!--确认按钮-->
|
<div class="font8 font-green nodeMarginRow" style="cursor:pointer;" v-on:click="tableRowUp('order', item)"><i class="fa fa-check"></i></div>
|
<!--取消按钮-->
|
<div class="font8 font-red nodeMarginRow" style="cursor:pointer;" v-on:click="item.canUp2=false;"><i class="fa fa-close"></i></div>
|
</div>
|
</div>
|
</td>
|
<!--创建时间-->
|
<td>
|
<div class="font6 nodeMargin">{{item.createtime}}</div>
|
</td>
|
<!--被使用-->
|
<td style="width:1.6rem;">
|
<div class="fboxRow Xcenter Ycenter">
|
<div class="fboxWrap Xstart Ystart">
|
<!--一个选项-->
|
<div v-if="item.systemList" v-for="(item2, index2) in item.systemList" class="fboxRow Xstart Ycenter nodeMargin" style="width:0.6rem; cursor:pointer;" v-on:click.stop="tableRowUp('sys', item, item2);">
|
<div class="font8"><i class="fa" v-bind:class="item2.check==1?'fa-dot-circle-o font-green':'fa-circle-o font-gray'"></i></div>
|
<div class="font6 font-ell1 nodeMarginRow" v-bind:title="item2.name">{{item2.name}}</div>
|
</div>
|
</div>
|
</div>
|
</td>
|
</tr>
|
</table>
|
|
</div>
|
|
</div>
|
|
|
<!-- =============================================================== 翻页区域 -->
|
<div class="foot bg-white" style="border-top:1px solid #CCC;">
|
<div class="bom1 fboxRow Xcenter Ycenter">
|
|
<!--批量操作区域-->
|
<div class="fboxRow Xstart Ycenter pi">
|
<!--批量弹框触发-->
|
<div class="do-btn do-click bg-blue" v-on:click="pi.show=!pi.show">
|
<div class="font-ell1 nodeMarginRow">批量操作</div>
|
<i class="fa nodeMarginRow" v-bind:class="pi.show==true?'fa-chevron-down':'fa-chevron-up'"></i>
|
</div>
|
<!--弹出框-->
|
<div v-show="pi.show==true" class="piTan fboxCol Xstart Ystretch">
|
<!--删除-->
|
<div class="fboxRow Xstart Ycenter font-red" v-on:click="piCheckClick('del')">
|
<div class="font9 nodeMarginRow"><i class="fa fa-trash"></i></div>
|
<div class="font6 nodeMarginRow">删除</div>
|
</div>
|
</div>
|
</div>
|
|
<!--前后翻页-->
|
<div class="fboxRow Xstart Ycenter">
|
<!--方向翻页-->
|
<div class="do-btn bg-blue do-click" v-on:click="yemaChange('shang', table, function(){ initPi(vm.table.list,vm.pi); tableGet(); })">上一页</div>
|
<div class="fboxRow Ycenter nodeMarginRow">{{table.yema}}/{{table.yemamax}}</div>
|
<div class="do-btn bg-blue do-click" v-on:click="yemaChange('xia', table, function(){ initPi(vm.table.list,vm.pi); tableGet(); })">下一页</div>
|
<!--直接跳页-->
|
<div class="nodeMarginRow">转到</div>
|
<input id="zhuandao" class="opt_input" type="number" min="1" v-bind:max="table.yemamax"/>
|
<div class="nodeMarginRow">页</div>
|
<div class="do-btn do-click bg-blue" v-on:click="yemaZhuandao('#zhuandao', table, function(){ initPi(vm.table.list,vm.pi); tableGet(); })">跳转</div>
|
</div>
|
|
</div>
|
</div><!-- 底部按钮区域结束 -->
|
|
|
<!-- =============================================================== 隐藏弹框 -->
|
<!--贴标签弹框-->
|
<div v-show="build.show" class="tan fboxRow Xcenter Ycenter">
|
<div class="tan_nei fboxCol Xcenter Ycenter bg-white">
|
<!--关闭按钮-->
|
<div class="tan_close font8 font-red"><i class="fa fa-close" v-on:click="creatBuild();"></i></div>
|
|
<div class="font7 nodeMargin">新建热门搜索</div>
|
|
<div class="fboxCol Xstart Ystart nodeMargin">
|
<!--说明-->
|
<div class="fboxRow Xstart Ycenter nodeMarginCol">
|
<div class="font6">名称：</div>
|
<input style="width:1rem;" type="text" placeholder="如：秋冬连衣裙" v-model="build.value"/>
|
<div class="font6 font-red nodeMarginRow"><i class="fa fa-asterisk"></i></div>
|
</div>
|
<!--匹配标识-->
|
<div class="fboxRow Xstart Ycenter nodeMarginCol">
|
<div class="font6">权重：</div>
|
<input style="width:1rem;" type="text" placeholder="用于排序，如：10" v-model="build.order"/>
|
</div>
|
</div>
|
|
<div class="do-btn do-click bg-green nodeMargin" v-on:click="tableRowBuild()">新建</div>
|
|
</div>
|
</div>
|
|
|
</div>
|
</body>
|
|
</html>
|
|
|
<!--js加载-->
|
<script type="text/javascript">
|
|
var vm = null;
|
doui.onReady(function()
|
{
|
vm = new Vue({
|
el: "#allwai",
|
|
// 数据
|
data: {
|
|
// ---------------------------------------------------------------- 顶部搜索数据
|
topSearch: {
|
strKey: "", // 商品标题输入
|
show_more: false, // 展开更多项
|
},
|
// ---------------------------------------------------------------- 表格筛选设置
|
optScreen: {},
|
// ---------------------------------------------------------------- 表格排序设置
|
optSort: {},
|
|
// ---------------------------------------------------------------- 表格数据
|
// 表格内容
|
table: {
|
yema: 1,
|
yemamax: 1,
|
pagesize: 20,
|
list: [],
|
},
|
|
// 表格批量操作
|
pi: {
|
show: false, // 是否显示操作弹框
|
hadAllXuan: false, // 是否点击了全选
|
},
|
|
// ---------------------------------------------------------------- 隐藏弹框
|
// 新建弹框
|
build: {
|
show: false, // 是否显示
|
value: "", // 显示值
|
order: "", // 权重
|
},
|
},
|
|
// 初始化事件
|
methods: {
|
// 初始化 表格
|
creatTable: function ()
|
{
|
vm.table.yema = 1;
|
vm.table.yemamax = 1;
|
vm.table.pagesize = 20;
|
vm.table.list = new Array();
|
// 必然也要初始化批量
|
initPi(vm.table.list, vm.pi);
|
},
|
// 初始化 新建弹框
|
creatBuild: function ()
|
{
|
vm.build.show = false;
|
vm.build.value = "";
|
vm.build.order = "";
|
},
|
},
|
});
|
|
|
// 获取表格
|
tableGet();
|
|
|
$("body").css("display","block");
|
});
|
|
|
|
// ==================================================================================== 页面事件
|
// 点击 批量弹框按钮
|
function piCheckClick (typeC)
|
{
|
// 获取选中项
|
var xuans = getTableListXuaned(vm.table.list);
|
if (xuans.xuanNum <= 0) { doui.showToast("未选择"); }
|
else
|
{
|
// 批量弹框隐藏
|
vm.pi.show = false;
|
|
// 1. 删除
|
if (typeC == "del") { rowRemoveSet(); }
|
}
|
}
|
|
|
|
// ==================================================================================== 数据请求
|
// 获取表格
|
function tableGet ()
|
{
|
// 数据准备
|
var myurl = gethttp() + "/admin/new/api/v1/search/newHotSearchList";
|
var mydata = doui.AjaxData({
|
pageIndex: vm.table.yema, // 页码
|
pageSize: vm.table.pagesize, // 每页数量
|
key: vm.topSearch.strKey, // 搜索关键字
|
});
|
|
// 数据请求
|
doui.showLoading("加载列表");
|
doui.AjaxJsonp(myurl, mydata, function(res)
|
{
|
if (res.code != 0) { doui.hideLoading(); doui.showToast(res.msg); vm.creatTable(); }
|
else
|
{
|
// 保存页码数据
|
vm.table.yemamax = res.data.pe.totalPage;
|
// 每行初始化为未选中
|
var mo = res.data.result_list;
|
for (var i = 0; i < mo.length; i++)
|
{
|
mo[i].xuan = false;
|
mo[i].canUp1 = false;
|
mo[i].canUp2 = false;
|
|
var thistime = '-';
|
if (mo[i].createtime > 0) { thistime = doui.timestampForDate(mo[i].createtime); }
|
mo[i].createtime = thistime;
|
}
|
// 保存列表
|
vm.table.list = mo;
|
doui.hideLoading();
|
}
|
});
|
}
|
|
// 新建表格行
|
function tableRowBuild ()
|
{
|
if (vm.build.value.length <= 0) { doui.showToast("未填写完毕"); }
|
else
|
{
|
var orderThis = "1";
|
if (vm.build.order) { orderThis = vm.build.order; }
|
// 数据准备
|
var myurl = gethttp() + "/admin/new/api/v1/search/saveAdd";
|
var mydata = doui.AjaxData({
|
name: vm.build.value, // 名字
|
orderby: orderThis, // 排序
|
});
|
|
// 数据请求
|
doui.showLoading("处理中");
|
doui.AjaxJsonp(myurl, mydata, function(res)
|
{
|
if (res.code != 0) { doui.hideLoading(); doui.showToast(res.msg); }
|
else
|
{
|
doui.hideLoading();
|
// 初始化弹框
|
vm.creatBuild();
|
// 获取表格
|
tableGet();
|
}
|
});
|
}
|
}
|
|
// 行文字内容 修改，参数: 1.修改的是哪样 2.该行item对象
|
function tableRowUp (typeC, itemC, item2C)
|
{
|
// 1. 显示值修改
|
if (typeC == "value")
|
{
|
// 数据准备
|
var myurl = gethttp() + "/admin/new/api/v1/search/updateHotSearch";
|
var mydata = doui.AjaxData({
|
id: itemC.id,
|
name: itemC.name, // 文字
|
orderby: itemC.orderby, // 顺序
|
});
|
|
// 数据请求
|
doui.showLoading();
|
doui.AjaxJsonp(myurl, mydata, function(res)
|
{
|
if (res.code != 0) { doui.hideLoading(); doui.showToast(res.msg); }
|
else
|
{
|
doui.hideLoading();
|
// 初始化弹框
|
itemC.canUp1 = false;
|
}
|
});
|
}
|
// 2. 顺序修改
|
else if (typeC == "order")
|
{
|
// 数据准备
|
var myurl = gethttp() + "/admin/new/api/v1/search/updateHotSearch";
|
var mydata = doui.AjaxData({
|
id: itemC.id,
|
name: itemC.name, // 文字
|
orderby: itemC.orderby, // 顺序
|
});
|
|
// 数据请求
|
doui.showLoading();
|
doui.AjaxJsonp(myurl, mydata, function(res)
|
{
|
if (res.code != 0) { doui.hideLoading(); doui.showToast(res.msg); }
|
else
|
{
|
doui.hideLoading();
|
// 初始化弹框
|
itemC.canUp2 = false;
|
}
|
});
|
}
|
// 4. 使用位置修改
|
else if (typeC == "sys")
|
{
|
// var type = 'delete';
|
// if (item2C.check == 0) { type = ''; }
|
|
// 数据准备
|
var myurl = gethttp() + "/admin/new/api/v1/search/setSystem";
|
var mydata = doui.AjaxData({
|
id: itemC.id, // id
|
systemId: item2C.id, // 选项id
|
// type: type, // 关闭才传：delete
|
});
|
|
// 数据请求
|
doui.showLoading();
|
doui.AjaxJsonp(myurl, mydata, function(res)
|
{
|
if (res.code != 0) { doui.hideLoading(); doui.showToast(res.msg); }
|
else
|
{
|
doui.hideLoading();
|
// 初始化弹框
|
item2C.check = res.data.check;
|
}
|
});
|
}
|
}
|
|
// 批量删除
|
function rowRemoveSet ()
|
{
|
// 选中项的id组
|
var zu_id = new Array();
|
var xuans = getTableListXuaned(vm.table.list);
|
for (var i = 0; i < xuans.xuanList.length; i++) { zu_id.push(xuans.xuanList[i].id); }
|
|
if (zu_id.length <= 0) { doui.showToast("未选择"); }
|
else
|
{
|
// 数据准备
|
var myurl = gethttp() + "/admin/new/api/v1/search/delete";
|
var mydata = doui.AjaxData({ idArray: JSON.stringify(zu_id), });
|
|
// 数据请求
|
doui.showLoading("正在删除");
|
doui.AjaxJsonp(myurl, mydata, function(res)
|
{
|
if (res.code != 0) { doui.hideLoading(); doui.showToast(res.msg); }
|
else
|
{
|
// 初始化 批量
|
initPi(vm.table.list, vm.pi);
|
// 重新请求表格数据
|
tableGet();
|
}
|
});
|
}
|
}
|
|
</script>
|
