568 行
20 KiB
HTML
可执行文件
568 行
20 KiB
HTML
可执行文件
<!DOCTYPE html>
|
|
<html>
|
|
<!--[1.2.41]-->
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>商品</title>
|
|
<link rel="stylesheet" type="text/css" href="__PUBLIC__/layui/css/layui.css"/>
|
|
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Retail/css/goodsList.css"/>
|
|
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Retail/css/myscroll.css"/>
|
|
<style>
|
|
.gA_inner01 > span {
|
|
min-width: 66px;
|
|
}
|
|
|
|
.gA_inner01 > input {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.gA_inner02 {
|
|
margin-right: 0px;
|
|
}
|
|
|
|
.layui-btn {
|
|
background-color: white !important;
|
|
color: #999 !important;
|
|
border: 1px solid #CCCCCC !important;
|
|
}
|
|
|
|
.supplier {
|
|
width: 200px;
|
|
margin-left: 30px;
|
|
height: 30px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.layui-form .gA_inner01 > select {
|
|
display: none;
|
|
}
|
|
|
|
.layui-form-item {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.twosynchlist .layui-table-body td .layui-table-cell {
|
|
height: 100px;
|
|
line-height: 100px;
|
|
}
|
|
|
|
/**/
|
|
.basic_set {
|
|
width: 620px;
|
|
float: left;
|
|
}
|
|
|
|
.pic_set {
|
|
width: 600px;
|
|
float: left;
|
|
}
|
|
|
|
/*多图*/
|
|
.file_label {
|
|
position: relative;
|
|
cursor: pointer;
|
|
font-weight: normal;
|
|
width: 210px;
|
|
height: 130px;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.file_label:before {
|
|
display: block;
|
|
content: '+';
|
|
font-size: 80px;
|
|
font-weight: 100;
|
|
color: #bbb;
|
|
border: 1px solid #bbb;
|
|
width: 210px;
|
|
height: 130px;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
line-height: 126px;
|
|
}
|
|
|
|
.file_label > input {
|
|
width: 100px;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.file_label > img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 210px;
|
|
height: 130px;
|
|
background-color: white;
|
|
border-radius: 10px;
|
|
border: 1px solid #ddd;
|
|
display: none;
|
|
}
|
|
|
|
.close {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
color: white;
|
|
position: absolute;
|
|
top: -10px;
|
|
right: -10px;
|
|
cursor: pointer;
|
|
display: none;
|
|
}
|
|
|
|
.close::selection {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.file_label_box {
|
|
position: relative;
|
|
display: inline-block;
|
|
margin: 0 10px 10px 0;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.file_label_box:hover > .close {
|
|
display: block;
|
|
}
|
|
|
|
.close:hover {
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.tips {
|
|
text-align: left;
|
|
color: #009688;
|
|
}
|
|
|
|
.btn-hover {
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
|
|
.btn-hover_hide {
|
|
position: absolute;
|
|
top: -64px;
|
|
left: 20px;
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
border-radius: 3px;
|
|
width: 300px;
|
|
padding: 10px 20px;
|
|
color: white;
|
|
display: none;
|
|
z-index: 100;
|
|
}
|
|
|
|
.btn-hover_hide:after {
|
|
content: '';
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 4px;
|
|
position: absolute;
|
|
bottom: -4px;
|
|
left: 10px;
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
transform: rotateZ(45deg);
|
|
}
|
|
|
|
.btn-hover > button:hover + .btn-hover_hide {
|
|
display: block;
|
|
}
|
|
.goods_edit_input {
|
|
width: 212px;
|
|
height: 35px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
padding-right: 0;
|
|
background: white;
|
|
margin-right: 20px;
|
|
}
|
|
#goods_class {
|
|
margin-left: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#canChooseClass {
|
|
padding-top: 30px;
|
|
display: none;
|
|
}
|
|
|
|
#goods_class > div {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 7px 10px;
|
|
height: 20px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
#goods_class span {
|
|
font-size: 20px;
|
|
line-height: 22px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="synchlist" style="padding: 20px">
|
|
<div class="goods_edit" style="padding-left: 0;">
|
|
<div class="goods_edit_add" id="chooseGoods" style="margin-left: 0;">选择将要修改的分类</div>
|
|
<div id="goods_class">未选择分类</div>
|
|
</div>
|
|
<div class="goods_edit" style="padding-left: 0;">
|
|
<div class="goods_edit_input">
|
|
<input type="text" name="text" id="search_name" placeholder="货号/品名/编码"/>
|
|
</div>
|
|
</div>
|
|
<div class="goods_edit" style="padding-left: 0;">
|
|
<form id="select_serach" class="layui-form">
|
|
<div class="sale_screen_hr">
|
|
<div class="layui-input-inline">
|
|
<select name="person1" id="person1" lay-filter="person1">
|
|
<option value="">选择一级分类</option>
|
|
<volist name="class_name" id="cl">
|
|
<option value="{$cl['id']}">{$cl['class_name']}</option>
|
|
</volist>
|
|
</select>
|
|
</div>
|
|
<div class="layui-input-inline class2" style="display: none;">
|
|
<select name="person2" id="person2" lay-filter="person2">
|
|
<option value="">选择二级分类</option>
|
|
</select>
|
|
</div>
|
|
<div class="layui-input-inline class3" style="display: none;">
|
|
<select name="person3" id="person3" lay-filter="person3">
|
|
<option value="">选择三级分类</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<div class="goods_edit_add" id="serach_icon" style="margin-left: 20px;">搜索</div>
|
|
</div>
|
|
<table class="layui-hide" id="goodsList" lay-filter="goodsList"></table>
|
|
<script type="text/html" id="check">
|
|
<div class="layui-input-block">
|
|
<input type="checkbox" name="like[write]" title="同步">
|
|
</div>
|
|
</script>
|
|
<div style="text-align: center">
|
|
<button class="goods_edit_add" type="button" id="sure">确认修改分类</button>
|
|
</div>
|
|
</div>
|
|
<div id="canChooseClass">
|
|
<form class="layui-form">
|
|
<div class="sale_screen_hr" style="margin-left: 30px;">
|
|
<div class="layui-input-inline" style="text-align: left">
|
|
<select name="_person1" id="_person1" lay-filter="_person1">
|
|
<option value="">选择一级分类</option>
|
|
<volist name="class_name" id="vo">
|
|
<option value="{$vo['id']}">{$vo['class_name']}</option>
|
|
</volist>
|
|
</select>
|
|
</div>
|
|
<div class="layui-input-inline _class2" style="text-align: left;display: none;">
|
|
<select name="_person2" id="_person2" lay-filter="_person2">
|
|
<option value="">选择二级分类</option>
|
|
</select>
|
|
</div>
|
|
<div class="layui-input-inline _class3" style="text-align: left;display: none;">
|
|
<select name="_person3" id="_person3" lay-filter="_person3">
|
|
<option value="">选择三级分类</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/jquery/js/jquery.min.js"></script>
|
|
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/layui/layui.js"></script>
|
|
<script type="text/javascript">
|
|
function renderForm() {
|
|
layui.use('form', function () {
|
|
var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
|
|
form.render();
|
|
});
|
|
}
|
|
|
|
layui.use(['table', 'form'], function () {
|
|
var table = layui.table;
|
|
var form = layui.form;
|
|
var delLists = [];
|
|
console.log(1);
|
|
table.render({
|
|
elem: '#goodsList',
|
|
url: "{:U('goodsMoveList')}",
|
|
cols: [
|
|
[{
|
|
type: 'checkbox',
|
|
title: "同步"
|
|
}, {
|
|
field: 'goods_number',
|
|
title: '货号',
|
|
width: 130
|
|
}, {
|
|
field: 'goods_name',
|
|
title: '品名',
|
|
width: 200
|
|
}, {
|
|
field: 'goods_code',
|
|
title: '商品条码',
|
|
width: 180
|
|
}, {
|
|
field: 'class_name',
|
|
title: '分类',
|
|
}]
|
|
],
|
|
page: true,
|
|
id: 'goodsList' //是否开启分页
|
|
|
|
});
|
|
table.on('checkbox(goodsList)', function (obj) {
|
|
var checkStatus = table.checkStatus('goodsList');
|
|
delLists = checkStatus.data;
|
|
})
|
|
var class1_val = '';
|
|
var class2_val = '';
|
|
form.on('select(person1)', function (data) {
|
|
if(class1_val == data.value){
|
|
return;
|
|
}
|
|
class1_val = data.value;
|
|
class2_val = '';
|
|
if (data.value == '') {
|
|
$('.class2').hide();
|
|
$('.class3').hide();
|
|
$('#person2').html("<option value=''>选择二级分类</option>");
|
|
$('#person3').html("<option value=''>选择三级分类</option>");
|
|
renderForm();
|
|
} else {
|
|
$('.class3').hide();
|
|
$('#person2').html("<option value=''>选择二级分类</option>");
|
|
$('#person3').html("<option value=''>选择三级分类</option>");
|
|
$.post("{:U('Sale/getChildClass')}", {
|
|
id: data.value,
|
|
type: 2
|
|
}, function (res) {
|
|
if (res.status == 1) {
|
|
for (var i = 0; i < res.data.length; i++) {
|
|
var child = `<option value="${res.data[i].id}">${res.data[i].class_name}</option>`;
|
|
$('#person2').append(child);
|
|
}
|
|
$('.class2').fadeIn();
|
|
$('#person3').html("<option value=''>选择三级分类</option>");
|
|
renderForm();
|
|
} else {
|
|
$('.class2').hide();
|
|
renderForm();
|
|
}
|
|
})
|
|
}
|
|
});
|
|
form.on('select(person2)', function (data) {
|
|
if(class2_val == data.value){
|
|
return;
|
|
}
|
|
class2_val = data.value;
|
|
if (data.value == '') {
|
|
$('.class3').hide();
|
|
$('#person3>option').remove();
|
|
$('#person3').append("<option value=''>选择三级分类</option>");
|
|
renderForm();
|
|
} else {
|
|
$('#person3').html("<option value=''>选择三级分类</option>");
|
|
$.post("{:U('Sale/getChildClass')}", {
|
|
id: data.value,
|
|
type: 3
|
|
}, function (res) {
|
|
if (res.status == 1) {
|
|
for (var i = 0; i < res.data.length; i++) {
|
|
var child = `<option value="${res.data[i].id}">${res.data[i].class_name}</option>`;
|
|
$('#person3').append(child);
|
|
}
|
|
$('.class3').fadeIn();
|
|
renderForm();
|
|
} else {
|
|
$('.class3').hide();
|
|
renderForm();
|
|
}
|
|
})
|
|
}
|
|
});
|
|
|
|
var _class1_val = '';
|
|
var _class2_val = '';
|
|
form.on('select(_person1)', function (data) {
|
|
if(_class1_val == data.value){
|
|
return;
|
|
}
|
|
_class1_val = data.value;
|
|
_class2_val = '';
|
|
if (data.value == '') {
|
|
$('._class2').hide();
|
|
$('._class3').hide();
|
|
$('#_person2').html("<option value=''>选择二级分类</option>");
|
|
$('#_person3').html("<option value=''>选择三级分类</option>");
|
|
renderForm();
|
|
} else {
|
|
$('._class3').hide();
|
|
$('#_person2').html("<option value=''>选择二级分类</option>");
|
|
$('#_person3').html("<option value=''>选择三级分类</option>");
|
|
$.post("{:U('Sale/getChildClass')}", {
|
|
id: data.value,
|
|
type: 2
|
|
}, function (res) {
|
|
if (res.status == 1) {
|
|
for (var i = 0; i < res.data.length; i++) {
|
|
var child = `<option value="${res.data[i].id}">${res.data[i].class_name}</option>`;
|
|
$('#_person2').append(child);
|
|
}
|
|
$('._class2').fadeIn();
|
|
$('#_person3').html("<option value=''>选择三级分类</option>");
|
|
renderForm();
|
|
} else {
|
|
$('._class2').hide();
|
|
renderForm();
|
|
}
|
|
})
|
|
}
|
|
});
|
|
form.on('select(_person2)', function (data) {
|
|
if(class2_val == data.value){
|
|
return;
|
|
}
|
|
class2_val = data.value;
|
|
if (data.value == '') {
|
|
$('._class3').hide();
|
|
$('#_person3>option').remove();
|
|
$('#_person3').append("<option value=''>选择三级分类</option>");
|
|
renderForm();
|
|
} else {
|
|
$('#_person3').html("<option value=''>选择三级分类</option>");
|
|
$.post("{:U('Sale/getChildClass')}", {
|
|
id: data.value,
|
|
type: 3
|
|
}, function (res) {
|
|
if (res.status == 1) {
|
|
for (var i = 0; i < res.data.length; i++) {
|
|
var child = `<option value="${res.data[i].id}">${res.data[i].class_name}</option>`;
|
|
$('#_person3').append(child);
|
|
}
|
|
$('._class3').fadeIn();
|
|
renderForm();
|
|
} else {
|
|
$('._class3').hide();
|
|
renderForm();
|
|
}
|
|
})
|
|
}
|
|
});
|
|
//商品类别搜索
|
|
$("#serach_icon").click(function () {
|
|
var keyword = $("#search_name").val();
|
|
//执行重载
|
|
table.reload('goodsList', {
|
|
page: {
|
|
curr: 1 //重新从第 1 页开始
|
|
}
|
|
, where: {
|
|
keyword: keyword,
|
|
person1: $('#person1').val(),
|
|
person2: $('#person2').val(),
|
|
person3: $('#person3').val()
|
|
}
|
|
});
|
|
})
|
|
$('#chooseGoods').click(function () {
|
|
var index = layer.open({
|
|
type: 1,
|
|
content: $('#canChooseClass'),
|
|
title: "选择分类-批量修改分类",
|
|
area: ["700px", "550px"],
|
|
btn: ['确定'],
|
|
btnAlign: 'c',
|
|
yes: function () {
|
|
console.log($('#_person1').val(), $('#_person2').val(), $('#_person3').val())
|
|
if ($('#_person1').val() == 0 || !$('#_person1').val()) {
|
|
top.layer.msg('请选择分类', {time: 1000});
|
|
return;
|
|
} else if (($('#_person2').val() == 0 || !$('#_person2').val()) && $('#_person2>option').length > 1) {
|
|
top.layer.msg('请选择二级分类', {time: 1000});
|
|
return;
|
|
} else if (($('#_person3').val() == 0 || !$('#_person1').val()) && $('#_person3>option').length > 1) {
|
|
top.layer.msg('请选择三级分类', {time: 1000});
|
|
return;
|
|
}
|
|
var str = $('#_person1>option:selected').html();
|
|
var id = $('#_person1>option:selected').val();
|
|
if ($('#_person2>option').length > 1) {
|
|
str += '<span> / </span>' + $('#_person2>option:selected').html();
|
|
id = $('#_person2>option:selected').val();
|
|
}
|
|
if ($('#_person3>option').length > 1) {
|
|
str += '<span> / </span>' + $('#_person3>option:selected').html();
|
|
id = $('#_person3>option:selected').val();
|
|
}
|
|
$('#goods_class').attr('data-id', id);
|
|
$('#goods_class').html('已选择：' + `<div>${str}</div>`);
|
|
layer.close(index);
|
|
}
|
|
})
|
|
})
|
|
$("#sure").click(function () {
|
|
if (!$('#goods_class').attr('data-id')) {
|
|
top.layer.msg('请选择分类', {time: 1000});
|
|
return false;
|
|
}
|
|
var delList = [];
|
|
for (var i = 0; i < delLists.length; i++) {
|
|
delList.push(delLists[i].id);
|
|
}
|
|
// console.log(delList);
|
|
if (delList.length == 0) {
|
|
top.layer.msg('请选择一个商品', {time: 1000});
|
|
return false;
|
|
} else {
|
|
var index = layer.confirm("确认将选中商品移到分类 <i style='font-weight: bold;'>“</i>"+$('#goods_class>div').html()+"<i style='font-weight: bold;'>”</i> 下吗？",function () {
|
|
layer.msg('更换分类中', {time: 1000}, function () {
|
|
layer.close(index);
|
|
var loadindex = layer.load();
|
|
$.ajax({
|
|
url: "{:U('moveGoodsClass')}",
|
|
data: {
|
|
goodsIds: delList,
|
|
class_id: $('#goods_class').attr('data-id')
|
|
},
|
|
type: "post",
|
|
success: function (res) {
|
|
layer.close(loadindex);
|
|
if (res.status == 1) {
|
|
layer.msg(res.msg, {icon: 1, time: 1500}, function () {
|
|
delLists = [];
|
|
localStorage.isChangeClass = 1;
|
|
table.reload('goodsList')
|
|
})
|
|
} else {
|
|
layer.msg(res.msg, {icon: 1, time: 1500})
|
|
}
|
|
}, error: function (error) {
|
|
layer.close(loadindex);
|
|
layer.alert('出错了:' + JSON.stringify(error))
|
|
}
|
|
})
|
|
})
|
|
})
|
|
}
|
|
})
|
|
})
|
|
</script>
|
|
</html> |