<!DOCTYPE HTML>
|
<html xmlns:th="http://www.thymeleaf.org" xmlns:matrix="http://www.w3.org/1999/xhtml">
|
<head>
|
<meta charset="utf-8">
|
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
|
<meta name="renderer" content="webkit|ie-comp|ie-stand">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport"
|
content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
|
<meta http-equiv="Cache-Control" content="no-siteapp"/>
|
<!-- 本框架基本脚本和样式 -->
|
<script type="text/javascript"
|
th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script>
|
<script type="text/javascript" th:src="@{/js/systools/MBase.js}"></script>
|
<link rel="stylesheet"
|
th:href="@{/plugin/zTree/zTreeStyle/zTreeStyle.css}"
|
type="text/css">
|
<script type="text/javascript"
|
th:src="@{/plugin/zTree/jquery.ztree.core-3.5.min.js}"></script>
|
<script type="text/javascript"
|
th:src="@{/plugin/zTree/jquery.ztree.excheck.min.js}"></script>
|
</head>
|
<body class=" container-fluid">
|
<div class="pd-10">
|
<!-- 搜索框部分start -->
|
<div class="ibox-content">
|
<div class="row">
|
<span class="alert-warning btn-sm"> <b>提示：</b>
|
勾选左边的产品分类，可以绑定整个分类的产品到充值卡中。 勾选表格中的产品可以绑定单个产品到充值卡中。
|
</span>
|
</div>
|
<br>
|
<div class="row">
|
<div class="col-sm-3">
|
|
<div class="ibox float-e-margins">
|
<div class="ibox-title">
|
<h5>按商品类型绑定</h5>
|
</div>
|
<div id="treeDemo" class="ibox-content ztree"
|
style="min-height: 400px"></div>
|
</div>
|
|
</div>
|
<div class="col-sm-9">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title">
|
<h5>按单个商品绑定</h5>
|
</div>
|
<div class="ibox-content">
|
<!-- 搜索框部分start -->
|
<form class="form-inline" id="serchform">
|
<input autocomplete="off" type="hidden" name="salePlatform" value="线下">
|
<div class="form-group mr-20">
|
<label for="instoreType">商品类型</label> <select
|
class="form-control" name="goodType" id="goodType">
|
<option value=''>--请选择商品类型--</option>
|
<option value='家居产品'>家居产品</option>
|
<option value='项目'>项目</option>
|
<option value='套餐'>套餐</option>
|
</select>
|
</div>
|
<div class="form-group mr-20">
|
<label for="name">商品名称</label> <input autocomplete="off" name="name" type="text"
|
class="form-control" id="name">
|
</div>
|
|
<div class="form-group mr-20">
|
<label for="goodsSortId">商品分类</label> <select
|
class="form-control " size="1" name="goodsSortId"
|
id="goodsSortId">
|
<option value=''>--选择商品分类--</option>
|
</select>
|
</div>
|
<button onclick="myGrid.serchData()" type="button"
|
class="btn btn-info btn-sm">
|
<i class="fa fa-search "></i> 搜索
|
</button>
|
<button onclick="myGrid.resetForm()" type="button" class="btn btn-info btn-sm">
|
<i class="fa fa-refresh "></i> 重置
|
</button>
|
<button type="button" onclick="selectAll()" class="btn btn-info btn-sm">
|
<i class="fa fa-refresh "></i> 全选
|
</button>
|
</form>
|
<table id="mgrid" data-url="">
|
<thead>
|
<tr>
|
<th data-field="name">产品名称</th>
|
<th data-field="sealPice">售价</th>
|
<th data-field="staus">状态</th>
|
<th data-field="isPresent">是否赠送</th>
|
<th data-field="goodType">类型</th>
|
<th data-field="cateName">分类</th>
|
</tr>
|
</thead>
|
</table>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="row ">
|
|
|
|
<div class="col-sm-9 col-sm-offset-3">
|
<div class="ibox-title">
|
<h5>已选择商品</h5>
|
</div>
|
<div class="ibox-content"></div>
|
<table class="table">
|
<thead>
|
<tr>
|
<th width="50">序号</th>
|
<th>产品名称</th>
|
<th>操作</th>
|
</tr>
|
</thead>
|
<tbody id="tbody">
|
</tbody>
|
</table>
|
</div>
|
<div class="row ">
|
<button class="btn btn-success center-block"
|
onclick="selectoption()">确认选择</button>
|
</div>
|
</div>
|
</div>
|
|
<script type="text/javascript" th:src="@{/js/systools/MJsBase.js}"></script>
|
<script type="text/javascript" th:inline="javascript">
|
|
|
var myGrid;
|
var tree=null;
|
//记录客户选则的产品
|
var selectedTr = new Array();
|
var goodsList =[[${goodsList}]]
|
if(goodsList){
|
for(var i=0;i<goodsList.length;i++){
|
var goodsItem=goodsList[i];
|
var obj = new Object();
|
//库存sku信息
|
//组合id
|
obj.id=goodsItem.id;
|
//商品id
|
obj.name=goodsItem.name;
|
selectedTr[i]=obj;
|
}
|
}
|
selectTrChange();
|
|
$(function() {
|
//初始化商品属性搜索列表
|
MTools.autoFullSelect();
|
myGrid = MGrid.initGrid({
|
height : 400,
|
url : basePath+"/admin/shoppinggoods/showList",
|
});
|
|
initCateTree();
|
$('#mgrid').on('click-row.bs.table', function(e, name, args) {
|
selectTrChange(e, name, args);
|
})
|
});
|
|
|
|
|
//初始化商品类型
|
function initCateTree() {
|
var zNodes = new Array();
|
$.AjaxProxy({
|
p : {
|
salePlatform : '线下'
|
}
|
}).invoke(
|
basePath+"/admin/shoppinggoodscategory/all",
|
function(loj) {
|
//初始化下拉选择框
|
$("#goodsSortId").createSelectTree(loj.attr("result").rows, {
|
append : true,
|
value : "name",
|
});
|
|
|
for (var i = 0; i < loj.getRowCount(); i++) {
|
zNodes[i] = createNode(loj.getString(i, "id"), loj
|
.getString(i, "parentId"), loj.getString(i,
|
"name"));
|
}
|
initTree(zNodes);
|
});
|
}
|
//确认选择
|
function selectoption() {
|
var arr = myGrid.initParam.$table.bootstrapTable('getSelections');
|
//客户选择的要绑定的分类
|
var cates=tree.getCheckedNodes();
|
var keys="";
|
for(var i=0 ; i<cates.length ; i++){
|
keys+=cates[i]["id"]+",";
|
}
|
var goodIds="";
|
for(var i=0 ; i<selectedTr.length ; i++){
|
goodIds+=selectedTr[i]["id"]+",";
|
}
|
parent.callback(goodIds,keys);
|
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
}
|
|
/**
|
* 初始化商品类型列表
|
*/
|
function initFunctionSelected(id) {
|
$
|
.AjaxProxy({
|
a : false,
|
c : false,
|
p : {
|
salePlatform : '线下'
|
}
|
})
|
.invoke(
|
basePath+"/admin/shoppinggoodscategory/all",
|
function(loj) {
|
$("#parentId")
|
.createSelectTree(
|
loj.attr("result").rows,
|
{
|
append : false,
|
defaultValue : id,
|
value : "name",
|
defaultHtml : '<option value="0" selected="selected">一级商品类型</option>',
|
});
|
});
|
|
}
|
|
function initTree(zNodes) {
|
var setting = {
|
check : {
|
enable : true,
|
chkStyle : "checkbox",
|
radioType : "level",
|
chkboxType : {
|
"Y" : "ps",
|
"N" : "ps"
|
}
|
},
|
view : {
|
dblClickExpand : false,
|
showLine : true,
|
|
},
|
data : {
|
simpleData : {
|
enable : true,
|
idKey : "id",
|
pIdKey : "pId",
|
rootPId : ""
|
}
|
},
|
|
};
|
tree=$.fn.zTree.init($("#treeDemo"), setting, zNodes);
|
}
|
|
function createNode(id, parentId, name) {
|
var o = new Object();
|
o.id = id;
|
o.pId = parentId;
|
o.name = name;
|
o.open = true;
|
//如果是编辑则设置节点选中
|
var cates=[[${cates}]];
|
if(cates){
|
var cates="${cates}";
|
if(cates.indexOf(id)!=-1){
|
o.checked=true;
|
}
|
}
|
return o;
|
}
|
function selectAll(){
|
var allTableData = $("#mgrid").bootstrapTable('getData');
|
for(var t=0;t<allTableData.length;t++){
|
var flag = true;
|
for (var i = 0; i < selectedTr.length; i++) {
|
if (allTableData[t].id == selectedTr[i].id) {
|
flag = false;
|
}
|
}
|
if (flag) {
|
selectedTr.push(allTableData[t]);
|
}
|
}
|
|
var html = '';
|
for (var i = 0; i < selectedTr.length; i++) {
|
html += '<tr><td>'
|
+ (i + 1)
|
+ '</td><td>'
|
+ selectedTr[i].name
|
+ '</td>'
|
+ '<td><a class="fa fa-trash" onClick="delSelectItem(this,'
|
+ selectedTr[i].id + ')" title="删除"></a></td></tr>';
|
}
|
$("#tbody").html(html);
|
}
|
|
//改变tr选择
|
function selectTrChange(e, name, args) {
|
var flag = true;
|
if(name){
|
for (var i = 0; i < selectedTr.length; i++) {
|
if (name.id == selectedTr[i].id) {
|
flag = false;
|
}
|
}
|
if (flag) {
|
selectedTr.push(name);
|
}
|
}
|
var trs = $('#mgrid').bootstrapTable('getSelections');
|
var html = '';
|
for (var i = 0; i < selectedTr.length; i++) {
|
html += '<tr><td>'
|
+ (i + 1)
|
+ '</td><td>'
|
+ selectedTr[i].name
|
+ '</td>'
|
+ '<td><a class="fa fa-trash" onClick="delSelectItem(this,'
|
+ selectedTr[i].id + ')" title="删除"></a></td></tr>';
|
}
|
$("#tbody").html(html);
|
}
|
|
//删除选中的元素
|
function delSelectItem(node, id) {
|
var arr = new Array();
|
for (var i = 0; i < selectedTr.length; i++) {
|
if (id != selectedTr[i].id) {
|
arr.push(selectedTr[i]);
|
}
|
}
|
selectedTr=arr.reverse();
|
$(node).closest('tr').remove();
|
}
|
</script>
|
|
</body>
|
</html>
|
