395 lines
16 KiB
PHP
395 lines
16 KiB
PHP
<?php
|
||
|
||
/**
|
||
* @author Any
|
||
* @description KISS
|
||
* @date 2021年10月7日
|
||
* @version 1.0.0
|
||
*
|
||
* _____LOG_____
|
||
*
|
||
*/
|
||
?>
|
||
<style>
|
||
.input-control-group .btn-control,
|
||
.input-control-group .input-wrap,
|
||
.input-control-group .label {
|
||
display: inline-block;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
padding: 0 10px;
|
||
font-size: 12px;
|
||
border: 1px solid #C9C9C9;
|
||
background-color: #fff;
|
||
color: #555;
|
||
float: left;
|
||
}
|
||
.input-control-group .input-wrap {
|
||
border-left-width: 0;
|
||
border-right-width: 0;
|
||
}
|
||
.input-control-group .input-wrap .input-control {
|
||
height:100%;
|
||
border-width: 0;
|
||
}
|
||
.input-control-group .btn-control:hover {
|
||
background-color: #009688;
|
||
border: 1px solid #009688;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|
||
<div class="layui-form-item attr-group-panel" id="<?=$id?>" lay-ignore>
|
||
<label class="layui-form-label">业务类型</label>
|
||
<div class="layui-input-block">
|
||
<div class="input-control-group">
|
||
<label class="label">业务组</label>
|
||
<div class="input-wrap">
|
||
<input type="text" name="" required="" placeholder="请输入业务" autocomplete="off" class="input-control" v-model="attr_group_name">
|
||
</div>
|
||
<span class="btn-control" v-on:click="add_attr_group"><i class="layui-icon"></i>添加</span>
|
||
</div>
|
||
</div>
|
||
<div class="attr-group-list layui-input-block layui-mt-15 layui-mb-15" v-for="(attr_group,index) in attr_groups">
|
||
<div class="attr-group-item">
|
||
<div class="layui-btn-group">
|
||
<button class="layui-btn layui-btn-primary layui-btn-sm">{{attr_group['attr_group_name']}}</button>
|
||
<button class="layui-btn layui-btn-primary layui-btn-sm" v-on:click="remove_attr_group(index)"><i class="layui-icon">ဆ</i></button>
|
||
</div>
|
||
</div>
|
||
<div class="layui-mt-15">
|
||
<div class="input-control-group">
|
||
<label class="label">{{attr_group['attr_group_name']}}</label>
|
||
<div class="input-wrap">
|
||
<input type="text" name="" required="" placeholder="请输入规格值" autocomplete="off" class="input-control" v-model="attr_group.attr_name">
|
||
</div>
|
||
<span class="btn-control" v-on:click="add_attr_name(index)"><i class="layui-icon"></i>添加</span>
|
||
</div>
|
||
</div>
|
||
<div class="layui-row">
|
||
<button class="layui-btn layui-btn-sm layui-btn-normal layui-mt-15" v-for="(attr_item,i) in attr_group['attr_list']" v-on:click="remove_attr_name(index,i)">{{attr_item['attr_name']}} <i class="layui-icon"></i> </button>
|
||
</div>
|
||
</div>
|
||
<div class="layui-input-block" v-show="attr_groups.length > 0">
|
||
<table class="layui-table">
|
||
<thead>
|
||
<th v-for="attr_group in attr_groups" v-show="attr_group['attr_list'].length > 0">{{attr_group['attr_group_name']}}</th>
|
||
<th>
|
||
<div class="layui-inline">价格</div>
|
||
<div class="layui-inline">
|
||
<input class="layui-input" type="text" placeholder="批量设置价格" name="batch_price" v-model="batch_price" style="margin-right: 0;height: 34px;line-height: 34px;width:120px"/>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<button class="layui-btn layui-btn-primary layui-btn-sm" v-on:click="batch_set_goods_price()" >设置</button>
|
||
</div>
|
||
</th>
|
||
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(goods_attr,index) in attr">
|
||
<td v-for="attr_val in goods_attr['attr_list']">{{attr_val.attr_name}}</td>
|
||
<td><input class="layui-input" type="number" placeholder="" name="" v-model="attr[index]['price']" style="margin-right: 0;height: 34px;line-height: 34px;"/></td>
|
||
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="layui-form-mid layui-word-aux"></div>
|
||
<div class="layui-hide" id="uploadCoverPicBtn"></div>
|
||
</div>
|
||
|
||
<script>
|
||
<?php $this->beginBlock('js_script_wrap') ?>
|
||
var _attr_<?=$id?> = JSON.parse('<?=$attr?>');
|
||
var _attr_groups_<?=$id?> = JSON.parse('<?=$attr_groups?>');
|
||
function fixAttrGroups(action){
|
||
var data = {};
|
||
data.attr_groups = _attr_groups_<?=$id?>;
|
||
data.attr = _attr_<?=$id?>;
|
||
$.each(data.attr_groups,function(index,item){
|
||
if(action){
|
||
item.attr_name = '';
|
||
} else {
|
||
delete item.attr_name;
|
||
}
|
||
data.attr_groups[index] = item;
|
||
});
|
||
$.each(data.attr,function(index,item){
|
||
if(!action && item.integral_num){
|
||
item.integral_num = item.integral_num * 1;
|
||
}
|
||
data.attr[index] = item;
|
||
});
|
||
return data;
|
||
}
|
||
fixAttrGroups('set');
|
||
(function($,layui,layer){
|
||
function doExchange(doubleArrays){
|
||
var len = doubleArrays.length;
|
||
if (len >= 2) {
|
||
var arr1 = doubleArrays[0];
|
||
var arr2 = doubleArrays[1];
|
||
var len1 = doubleArrays[0].length;
|
||
var len2 = doubleArrays[1].length;
|
||
var newlen = len1 * len2;
|
||
var temp = new Array(newlen);
|
||
var index = 0;
|
||
for (var i = 0; i < len1; i++) {
|
||
for (var j = 0; j < len2; j++) {
|
||
temp[index] = arr1[i] + ",,," + arr2[j];
|
||
index++;
|
||
}
|
||
}
|
||
var newArray = new Array(len - 1);
|
||
newArray[0] = temp;
|
||
if (len > 2) {
|
||
var _count = 1;
|
||
for (var i = 2; i < len; i++) {
|
||
newArray[_count] = doubleArrays[i];
|
||
_count++;
|
||
}
|
||
}
|
||
//console.log(newArray);
|
||
return doExchange(newArray);
|
||
}
|
||
else {
|
||
return doubleArrays[0];
|
||
}
|
||
}
|
||
function hasExistAttr(mark, attr){
|
||
for(var i in attr){
|
||
var _mark = '';
|
||
for(var j in attr[i].attr_list){
|
||
_mark += attr[i].attr_list[j]['attr_group_name'] + '=' + attr[i].attr_list[j]['attr_name'] + '=';
|
||
}
|
||
if(mark == _mark){
|
||
return attr[i];
|
||
}
|
||
}
|
||
return null;
|
||
};
|
||
var vm = new Vue({
|
||
el:'#<?=$id?>',
|
||
data:{
|
||
attr:_attr_<?=$id?>,
|
||
attr_groups:_attr_groups_<?=$id?>,
|
||
attr_group_name:'',
|
||
batch_price:'',
|
||
batch_stock:'',
|
||
batch_integral_num:'',
|
||
upload_cover_pic_index:-1,
|
||
},
|
||
methods:{
|
||
remit:function(){
|
||
_attr_<?=$id?> = vm.attr;
|
||
_attr_groups_<?=$id?> = vm.attr_groups;
|
||
},
|
||
//添加规格组
|
||
add_attr_group:function(){
|
||
var attr_group_name = vm.attr_group_name;
|
||
attr_group_name = $.trim(attr_group_name);
|
||
if(attr_group_name.length == 0){
|
||
vm.attr_group_name = '';
|
||
return;
|
||
}
|
||
var flag = false;
|
||
for(var i in vm.attr_groups){
|
||
if(vm.attr_groups[i]['attr_group_name'] == attr_group_name){
|
||
flag = true;
|
||
break;
|
||
}
|
||
}
|
||
if(!flag){
|
||
vm.attr_groups.push({
|
||
'attr_group_name':attr_group_name,
|
||
'attr_list':[],
|
||
});
|
||
}
|
||
vm.attr_group_name = '';
|
||
vm.update_attr();
|
||
},
|
||
remove_attr_group:function(index){
|
||
var attr_groups = vm.attr_groups;
|
||
attr_groups.splice(index,1);
|
||
vm.attr_groups = attr_groups;
|
||
vm.update_attr();
|
||
},
|
||
add_attr_name:function(index){
|
||
var attr_list = vm.attr_groups[index]['attr_list'];
|
||
var attr_name = vm.attr_groups[index]['attr_name'];
|
||
attr_name = $.trim(attr_name);
|
||
if(attr_name.length == 0){
|
||
vm.attr_groups[index]['attr_name'] = '';
|
||
return;
|
||
}
|
||
var flag = false;
|
||
for(var i in attr_list){
|
||
if(attr_name == attr_list[i]['attr_name']){
|
||
flag = true;
|
||
break;
|
||
}
|
||
}
|
||
if(!flag){
|
||
attr_list.push({attr_name:attr_name});
|
||
vm.attr_groups[index]['attr_list'] = attr_list;
|
||
}
|
||
vm.attr_groups[index]['attr_name'] = '';
|
||
vm.update_attr();
|
||
},
|
||
remove_attr_name:function(index,attr_list_index){
|
||
var attr_list = vm.attr_groups[index]['attr_list'];
|
||
attr_list.splice(attr_list_index,1);
|
||
vm.attr_groups[index]['attr_list'] = attr_list;
|
||
vm.update_attr();
|
||
},
|
||
update_attr(){
|
||
vm.handle_attr_groups();
|
||
var attr_temp = vm.attr;
|
||
var attr_arr = [];
|
||
var attr_groups = vm.attr_groups;
|
||
for(var i in attr_groups){
|
||
var arr = [];
|
||
for(var j in attr_groups[i]['attr_list']){
|
||
arr.push(attr_groups[i]['attr_list'][j]['attr_id'] + "=,=," + attr_groups[i]['attr_list'][j]['attr_name']);
|
||
}
|
||
attr_arr.push(arr);
|
||
}
|
||
var attr_arr_sort = doExchange(attr_arr);
|
||
var attr = [];
|
||
for(var i in attr_arr_sort){
|
||
var item = {};
|
||
var attr_list = [];
|
||
var attr_list_arr = attr_arr_sort[i].split(',,,');
|
||
var sign_ids = [];
|
||
var mark = "";
|
||
for(var j in attr_list_arr){
|
||
var attr_id_name = attr_list_arr[j].split("=,=,");
|
||
var attr_id = attr_id_name.shift();
|
||
var attr_name = attr_id_name.pop();
|
||
sign_ids.push(attr_id);
|
||
attr_list.push({attr_id:attr_id,attr_name:attr_name,attr_group_name:attr_groups[j]['attr_group_name'],attr_group_id:attr_groups[j]['attr_group_id']});
|
||
mark += attr_groups[j]['attr_group_name'] + '=' + attr_name + '=';
|
||
}
|
||
var exists = hasExistAttr(mark,attr_temp);
|
||
if(exists){
|
||
attr.push(exists);
|
||
continue;
|
||
}
|
||
item.sign_id = sign_ids.join(':');
|
||
item.attr_list = attr_list;
|
||
item.price = '';
|
||
<?php if($open_integral):?>
|
||
item.integral_num = 0;
|
||
<?php endif;?>
|
||
attr.push(item);
|
||
}
|
||
vm.attr = attr;
|
||
vm.remit();
|
||
},
|
||
handle_attr_groups:function(){
|
||
var attr_groups = vm.attr_groups;
|
||
var attr_id = 0;
|
||
$.each(attr_groups,function(index,item){
|
||
item.attr_group_id = index+1;
|
||
$.each(item.attr_list,function(attr_list_index, sub_item){
|
||
attr_id += 1;
|
||
sub_item.attr_id = attr_id;
|
||
item.attr_list[attr_list_index] = sub_item;
|
||
});
|
||
attr_groups[index] = item;
|
||
});
|
||
vm.attr_groups = attr_groups;
|
||
},
|
||
batch_set_goods_price(){
|
||
var price = vm.batch_price;
|
||
if(price * 1 < 0){
|
||
return;
|
||
}
|
||
var attr = vm.attr;
|
||
$.each(attr,function(index,item){
|
||
item.price = price;
|
||
attr[index] = item;
|
||
});
|
||
vm.batch_price = '';
|
||
vm.attr = attr;
|
||
vm.remit();
|
||
},
|
||
batch_set_goods_stock(){
|
||
var stock = vm.batch_stock;
|
||
if(stock * 1 < 0){
|
||
return;
|
||
}
|
||
var attr = vm.attr;
|
||
$.each(attr,function(index,item){
|
||
item.stock = stock;
|
||
attr[index] = item;
|
||
});
|
||
vm.batch_stock = '';
|
||
vm.attr = attr;
|
||
vm.remit();
|
||
},
|
||
batch_set_goods_integral_num(){
|
||
var integral_num = vm.batch_integral_num;
|
||
if(integral_num * 1 < 0){
|
||
return;
|
||
}
|
||
var attr = vm.attr;
|
||
$.each(attr,function(index,item){
|
||
item.integral_num = integral_num;
|
||
attr[index] = item;
|
||
});
|
||
vm.batch_integral_num = '';
|
||
vm.attr = attr;
|
||
vm.remit();
|
||
},
|
||
upload_goods_cover_pic(index){
|
||
vm.upload_cover_pic_index = index;
|
||
$('#uploadCoverPicBtn').trigger('click');
|
||
}
|
||
}
|
||
});
|
||
layui.use(['upload', 'element'],function(){
|
||
var uploader = layui.upload;
|
||
setTimeout(function(){
|
||
uploader.render({
|
||
elem: '#uploadCoverPicBtn'
|
||
, url: '<?= $url ?>'
|
||
, accept: 'images'
|
||
, exts:'png|jpg|jpeg|gif|ico|bmp'
|
||
, before: function (obj) {
|
||
//预读本地文件示例，不支持ie8
|
||
obj.preview(function (index, file, result) {
|
||
console.log(result)
|
||
if(vm.upload_cover_pic_index != -1){
|
||
vm.attr[vm.upload_cover_pic_index]['cover_pic'] = result;
|
||
}
|
||
});
|
||
}
|
||
, progress: function(n, elem){
|
||
}
|
||
, done: function (res) {
|
||
//如果上传失败
|
||
if (res.code != 0) {
|
||
return layer.msg(res.msg);
|
||
}
|
||
if(vm.upload_cover_pic_index != -1){
|
||
vm.attr[vm.upload_cover_pic_index]['cover_pic'] = res.data.url;
|
||
vm.upload_cover_pic_index = -1;
|
||
}
|
||
}
|
||
, error: function () {
|
||
|
||
}
|
||
});
|
||
},1000);
|
||
})
|
||
|
||
})($,layui,layer);
|
||
<?php $this->endBlock(); ?>
|
||
</script>
|
||
<?php $this->registerJs($this->blocks['js_script_wrap'], \yii\web\View::POS_END); ?>
|
||
|
||
|
||
|
||
|